/* ============================================
   Jugoo Dash — app-specifieke styling
   ============================================
   Design tokens (kleuren, radius, spacing, fonts, schaduwen, sidebar)
   komen uit het centrale design-system in /css/ds/tokens.css.
   Voeg hier alléén app-specifieke overrides toe als ze niet thuishoren
   in het gedeelde systeem — en documenteer waarom. */

/* --- Reset --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-family);
    color: var(--text-default);
    background: var(--app-bg);
    line-height: 1.5;
    min-height: 100vh;
    font-size: 0.875rem;     /* 14px = Google body-medium */
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
    font-weight: 500;        /* Google Material 500 voor headings */
    line-height: 1.25;
    letter-spacing: -0.01em; /* Subtiel tighter zoals Google */
}

h1 { font-size: 1.75rem;  letter-spacing: -0.02em; }   /* 28px headline-medium */
h2 { font-size: 1.375rem; letter-spacing: -0.015em; }  /* 22px title-large */
h3 { font-size: 1.125rem; }                            /* 18px title-medium+ */
h4 { font-size: 1rem; }                                /* 16px title-medium */
h5 { font-size: 0.875rem; font-weight: 500; }
h6 { font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-tertiary); }

a {
    color: var(--oranje);
    text-decoration: none;
    transition: color var(--transition);
}
a:hover { color: var(--oranje-hover); }

img { max-width: 100%; display: block; }
ul, ol { list-style: none; }

/* ============================================
   ICON SYSTEM — Material Symbols Outlined
   ============================================ */
.material-symbols-rounded.icon {
    font-size: 20px;
    line-height: 1;
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

.icon-xs { font-size: 14px !important; }
.icon-sm { font-size: 18px !important; }
.icon-md { font-size: 20px !important; }
.icon-lg { font-size: 24px !important; }
.icon-xl { font-size: 32px !important; }

/* Icon color helpers */
.color-groen { color: var(--groen); }
.color-rood { color: var(--rood); }
.color-geel { color: var(--geel); }
.color-oranje { color: var(--oranje); }
.color-muted { color: var(--grijs-licht); }
.color-wit { color: var(--wit); }

/* ============================================
   LAYOUT
   ============================================ */
.app-layout {
    display: flex;
    min-height: 100vh;
}

/* ============================================
   SIDEBAR
   ============================================ */
.sidebar {
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 100;
    transition: transform var(--transition);
    border-right: 1px solid var(--sidebar-border);
}

.sidebar-brand {
    /* Zelfde hoogte als .brand-header-bar (64px) zodat het logo-vak
       links exact aansluit op de klant-header-strip rechts ervan. */
    padding: 0 var(--sp-5);
    min-height: 64px;
    border-bottom: 1px solid var(--sidebar-border);
    display: flex; align-items: center; gap: 10px;
}

.sidebar-brand h1 {
    color: #202124;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.5px;
}

/* Compact vierkant SVG-icoon (38x38 native) naast een HTML-wordmark.
   Icoon op natuurlijke grootte, wordmark krijgt de Geist-styling die
   in het oorspronkelijke logo zat. */
.sidebar-brand-logo {
    display: block;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
}
.sidebar-brand-wordmark {
    color: #18181B;
    font-size: 1.25rem;
    letter-spacing: -0.5px;
    font-weight: 300;
    line-height: 1;
    margin: 0;
}
.sidebar-brand-wordmark strong { font-weight: 700; }

.sidebar-brand span {
    display: block;
    font-size: 0.7rem;
    color: #80868B;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 2px;
}

.sidebar-nav {
    flex: 1;
    padding: 0 0 var(--sp-3);
    overflow-y: auto;
}

/* Sidebar-section, nav-item, nav-icon en nav-badge komen uit het design system
   (css/ds/components.css). Het menu van MijnCRM is daar de maat: items in een
   pil, hover en actief in twee grijstinten, kleur alleen in het icoon. Zet hier
   niets terug zonder het eerst in het design system te wijzigen. */

.sidebar-footer {
    padding: var(--sp-4) var(--sp-5);
    border-top: 1px solid var(--sidebar-border);
    font-size: 0.8rem;
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.sidebar-user .user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--wit);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}
img.user-avatar { object-fit: cover; }

.sidebar-user .user-info {
    flex: 1;
    min-width: 0;
}

.sidebar-user .user-name {
    color: #202124;
    font-weight: 500;
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user .user-role {
    color: #80868B;
    font-size: 0.7rem;
}

/* Welke versie er draait, onder de uitlogknop. Bewust klein en grijs: je wilt
   hem kunnen opzoeken, niet lezen. De volledige tekst staat in de title. */
.sidebar-versie {
    display: flex;
    gap: var(--sp-2);
    align-items: baseline;
    margin-top: var(--sp-3);
    padding-top: var(--sp-2);
    border-top: 1px solid var(--sidebar-border);
    color: #9AA0A6;
    font-size: 0.65rem;
    line-height: 1.4;
    cursor: default;
}

.sidebar-versie-commit {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.02em;
}

.sidebar-versie-datum {
    margin-left: auto;
    white-space: nowrap;
}

.sidebar-logout {
    background: none;
    border: none;
    color: var(--grijs-400);
    cursor: pointer;
    padding: var(--sp-1);
    transition: color var(--transition);
    display: flex;
    align-items: center;
}

.sidebar-logout:hover {
    color: var(--rood);
}

/* ============================================
   MAIN CONTENT
   ============================================ */
.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    padding: var(--sp-8);
}

/* ============================================
   PAGE HEADER — consistent op alle schermen
   ============================================ */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-6);
    flex-wrap: wrap;
    gap: var(--sp-4);
}

.page-header h1 {
    font-size: 1.5rem;
    margin: 0;
}

.page-header-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

/* Page header met back-button + titel */
.page-header-title {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.page-header-subtitle {
    font-size: 0.85rem;
    color: var(--grijs-licht);
    margin-top: var(--sp-1);
}

/* ============================================
   SECTION HEADING — consistent sub-sections
   ============================================ */
.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-3);
    margin-top: var(--sp-6);
}

.section-heading h2 {
    font-size: 1.1rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

/* ============================================
   QUICK STATS BAR
   ============================================ */
.quick-stats {
    display: flex;
    gap: var(--sp-6);
    margin-bottom: var(--sp-6);
    flex-wrap: wrap;
}

.quick-stat {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 0.85rem;
}

.quick-stat .stat-value {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--zwart);
}

.quick-stat .stat-label {
    color: var(--grijs-licht);
}

/* ============================================
   CARDS — universeel component
   ============================================ */
.card {
    background: var(--wit);
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius);
    transition: box-shadow var(--transition);
}

.card:hover {
    box-shadow: var(--shadow);
}

/* Card met standaard padding (voor eenvoudige content) */
.card-padded {
    padding: var(--sp-5);
}

.card-header {
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--divider-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-header h3 {
    font-size: 0.95rem;
    margin: 0;
}

.card-body {
    padding: var(--sp-5);
}

.card-footer {
    padding: var(--sp-3) var(--sp-5);
    border-top: 1px solid var(--divider-soft);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-2);
}

/* ============================================
   BRAND CARDS GRID — Portfolio dashboard
   ============================================ */
.brand-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-4);
}

.brand-card {
    cursor: pointer;
    transition: all var(--transition);
}

.brand-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.brand-card .brand-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--divider-soft);
}

.brand-card .brand-name {
    font-weight: 600;
    color: var(--zwart);
    font-size: 1rem;
}

.brand-card .brand-industry {
    font-size: 0.75rem;
    color: var(--grijs-licht);
    margin-top: 2px;
}

.brand-card .brand-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
}

.brand-card .brand-metric {
    text-align: center;
}

.brand-card .brand-metric .metric-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--zwart);
}

.brand-card .brand-metric .metric-label {
    font-size: 0.7rem;
    color: var(--grijs-licht);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.brand-card .brand-card-footer {
    padding: var(--sp-3) var(--sp-5);
    border-top: 1px solid var(--divider-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--grijs-licht);
}

/* ============================================
   DATA SOURCE CARDS GRID
   ============================================ */
.ds-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--sp-4);
}

.ds-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--sp-3);
}

.ds-card-type {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 1rem;
    font-weight: 600;
    color: var(--zwart);
}

.ds-card-type .icon {
    color: var(--oranje);
}

.ds-card-name {
    color: var(--grijs);
    font-weight: 500;
    font-size: 0.85rem;
    margin-top: var(--sp-1);
}

.ds-card-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
    font-size: 0.85rem;
}

.ds-card-detail-label {
    color: var(--grijs-licht);
    font-size: 0.75rem;
}

.ds-card-actions {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
    padding-top: var(--sp-3);
    border-top: 1px solid var(--divider-soft);
}

/* ============================================
   JUGOO CMS templates-viewer
   Uitgeklapte boom van modules -> templates -> slots -> fields
   die uit /pages/{module}/templates komt. Ontworpen om structuur
   snel te scannen, niet om zelf te bewerken.
   ============================================ */
.jugoo-cms-loading {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--pa-text-meta); font-size: 13px;
}
.jugoo-cms-modules-head {
    display: flex; align-items: baseline; gap: 12px;
    margin: 4px 0 10px;
}
.jugoo-cms-subhead {
    font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--pa-text-meta);
}
.jugoo-cms-hint {
    font-size: 12px; color: var(--pa-text-meta);
}
.jugoo-cms-empty {
    font-size: 12.5px; color: var(--pa-text-meta); font-style: italic;
    padding: 4px 0;
}
.jugoo-cms-modules,
.jugoo-cms-templates,
.jugoo-cms-module-fields {
    display: flex; flex-direction: column; gap: 6px;
}
.jugoo-cms-module,
.jugoo-cms-template,
.jugoo-cms-slot {
    border: 1px solid var(--pa-border-card, #e5e5e5);
    border-radius: 8px;
    background: #fff;
}
.jugoo-cms-module > summary,
.jugoo-cms-template > summary,
.jugoo-cms-slot > summary {
    list-style: none;
    cursor: pointer;
    padding: 8px 12px;
    display: flex; align-items: center; gap: 10px;
    font-size: 13px;
    user-select: none;
}
.jugoo-cms-module > summary::-webkit-details-marker,
.jugoo-cms-template > summary::-webkit-details-marker,
.jugoo-cms-slot > summary::-webkit-details-marker { display: none; }
.jugoo-cms-module > summary::before,
.jugoo-cms-template > summary::before,
.jugoo-cms-slot > summary::before {
    content: '▸'; color: var(--pa-text-meta); font-size: 11px;
    transition: transform 0.12s;
    display: inline-block; width: 10px;
}
.jugoo-cms-module[open] > summary::before,
.jugoo-cms-template[open] > summary::before,
.jugoo-cms-slot[open] > summary::before { transform: rotate(90deg); }

.jugoo-cms-module-slot,
.jugoo-cms-module-body,
.jugoo-cms-regions {
    padding: 4px 12px 12px 26px;
    border-top: 1px solid var(--divider-soft, #eee);
}
.jugoo-cms-module-body {
    display: flex; flex-direction: column; gap: 12px;
}
.jugoo-cms-region {
    border-left: 2px solid var(--divider-soft, #eee);
    padding-left: 10px;
    display: flex; flex-direction: column; gap: 4px;
}
.jugoo-cms-region-head {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; color: var(--pa-text-label);
    margin-bottom: 2px;
}
.jugoo-cms-region-count,
.jugoo-cms-module-meta,
.jugoo-cms-template-meta,
.jugoo-cms-slot-count,
.jugoo-cms-template-id {
    font-size: 11.5px; color: var(--pa-text-meta);
    margin-left: auto;
}
.jugoo-cms-template-id { margin-left: 0; opacity: 0.7; }
.jugoo-cms-template-name,
.jugoo-cms-slot-index {
    font-weight: 600;
}
.jugoo-cms-slot-index {
    font-size: 11.5px; color: var(--pa-text-meta);
    background: var(--creme-dark, #E8E0D8);
    padding: 1px 6px; border-radius: 4px;
}
.jugoo-cms-fields {
    padding: 6px 12px 10px 20px;
    border-top: 1px solid var(--divider-soft, #eee);
    display: flex; flex-direction: column; gap: 3px;
}
.jugoo-cms-field {
    display: flex; align-items: center; gap: 8px;
    font-size: 12.5px;
    padding: 2px 0;
}
.jugoo-cms-name {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    background: var(--creme, #F5F0EB);
    color: var(--zwart, #000);
    padding: 1px 6px; border-radius: 3px;
}
.jugoo-cms-type {
    display: inline-block;
    font-size: 10.5px; font-weight: 600;
    letter-spacing: 0.03em; text-transform: uppercase;
    color: var(--pa-text-label);
    background: transparent;
    border: 1px solid var(--divider-soft, #e5e5e5);
    padding: 0 5px; border-radius: 3px;
}
.jugoo-cms-req {
    color: var(--rood, #D4633A);
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
    padding-left: 2px;
}

/* ============================================
   COCKPIT TABS — klant detail
   ============================================ */
/* Cockpit tabs — CRM-stijl: tabs-strip sluit direct aan onder de header,
   gaat edge-to-edge over de viewport (negatieve side-margins die de
   parent padding-x ongedaan maken), met inset padding zodat de tabs
   zelf netjes uitlijnen met de header-content. Sticky onder de
   breadcrumb-header zodat ze in beeld blijven tijdens scroll. */
.cockpit-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border-subtle, #E8EAED);
    margin: 0 calc(-1 * var(--sp-8)) var(--sp-5);
    padding: 0 var(--sp-5);
    background: var(--wit);
    position: sticky;
    top: 53px;       /* hoogte van .brand-header-bar (12px padding + ~28px content + 1px border) */
    z-index: 49;     /* net onder z-index van brand-header-bar (50) */
}

.cockpit-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: #71717A;
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast);
    margin-bottom: -1px;
    font-family: inherit;
}

.cockpit-tab .icon {
    font-size: 16px;
    color: inherit;
}

.cockpit-tab:hover {
    color: #18181B;
    background: none;
}

.cockpit-tab-active {
    color: var(--accent, #2A6FDB);
    border-bottom-color: var(--accent, #2A6FDB);
    font-weight: 600;
}

.cockpit-tab-active .icon {
    color: var(--accent, #2A6FDB);
}

/* ============================================
   KLANTEN LIJST
   ============================================ */
.klanten-lijst {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.klant-row {
    cursor: pointer;
    transition: all var(--transition);
}

.klant-row:hover {
    background: rgba(232, 224, 216, 0.4);
    transform: none;
}

.klant-row-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
}

.klant-row-left {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    flex: 1;
    min-width: 0;
}

.klant-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--oranje);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}

.klant-info {
    min-width: 0;
}

.klant-name {
    font-weight: 600;
    color: var(--zwart);
    font-size: 1.05rem;
}
/* Klantcode-chip voor de naam. Monospace zodat administratieve codes
   visueel afwijken van de bedrijfsnaam. */
.klant-code {
    display: inline-block;
    margin-right: 8px;
    padding: 1px 8px;
    background: var(--creme-dark, #E8E0D8);
    color: var(--grijs, #4A4A4A);
    border-radius: 4px;
    font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
    font-size: 0.82rem;
    font-weight: 500;
    vertical-align: middle;
}

.klant-meta {
    font-size: 0.8rem;
    color: var(--grijs-licht);
}

.klant-row-right {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-shrink: 0;
}

.klant-quick-nav {
    display: flex;
    gap: var(--sp-1);
}

/* Wie doet wat: de verantwoordelijke per klant als avatar, klik om te wijzigen. */
.mw-avatar {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    border-radius: 50%; font-weight: 600; line-height: 1; object-fit: cover;
    background: var(--accent-100); color: var(--fg-info);
}
.mw-avatar--md { width: 30px; height: 30px; font-size: 11px; }
.mw-avatar--sm { width: 22px; height: 22px; font-size: 9px; }
.mw-avatar.is-leeg { background: transparent; color: var(--text-muted); border: 1px dashed var(--divider-soft); }
.mw-avatar.is-alle { background: var(--surface-sunken); color: var(--text-secondary); }
.mw-kleur-0 { background: var(--bg-info);    color: var(--fg-info); }
.mw-kleur-1 { background: var(--bg-success); color: var(--fg-success); }
.mw-kleur-2 { background: var(--bg-warning); color: var(--fg-warning); }
.mw-kleur-3 { background: var(--bg-danger);  color: var(--fg-danger); }
.mw-kleur-4 { background: var(--surface-sunken); color: var(--text-primary); }

.klant-mw {
    display: inline-flex; padding: 2px; border: 0; border-radius: 50%;
    background: transparent; cursor: pointer;
}
.klant-mw:hover .mw-avatar { box-shadow: 0 0 0 2px var(--divider-soft); }
.klant-mw:hover .mw-avatar.is-leeg { border-color: var(--accent); color: var(--accent); }
.klant-mw:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.mw-menu {
    position: fixed; z-index: 1000; min-width: 200px; max-height: 60vh; overflow-y: auto;
    padding: var(--sp-1); border-radius: var(--radius);
    background: var(--surface); border: 1px solid var(--divider-soft);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.mw-menu__item {
    display: flex; align-items: center; gap: var(--sp-2); width: 100%;
    padding: 6px var(--sp-2); border: 0; border-radius: var(--radius);
    background: transparent; font: inherit; font-size: 13px; text-align: left; cursor: pointer; color: var(--text-primary);
}
.mw-menu__item span:not(.mw-avatar) { flex: 1; }
.mw-menu__item:hover, .mw-menu__item:focus-visible { background: var(--surface-subtle); outline: none; }
.mw-menu__item.is-gekozen { font-weight: 600; }

/* Boven de lijst: per medewerker het aantal klanten, klikbaar als filter. Kop, deze
   rij en de filterbalk vormen samen één wit blok over de volle breedte. */
.klanten-page-header { background: var(--surface); }
.klanten-verdeling {
    display: flex; flex-wrap: wrap; gap: var(--sp-2);
    margin: 0 calc(-1 * var(--sp-8)); padding: 0 24px 12px;
    background: var(--surface);
}
.klanten-verdeling + .klanten-toolbar { border-top: 1px solid var(--border-subtle); }
.klanten-verdeling__mw {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    padding: 4px 12px 4px 4px; border-radius: 999px;
    border: 1px solid var(--divider-soft); background: var(--surface);
    font: inherit; font-size: 13px; cursor: pointer;
}
.klanten-verdeling__mw span:not(.mw-avatar) { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.klanten-verdeling__mw.is-actief { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.klanten-verdeling__mw.is-geen { border-style: dashed; }
.klanten-verdeling__mw:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ============================================
   METRIC CARDS
   ============================================ */
.metrics-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
}

/* Overzichts-pagina KPI's — eenvoudige rij met 3 kaarten */
.overview-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: var(--sp-4);
    gap: var(--sp-3);
    flex-wrap: wrap;
}
.overview-period-label {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary, var(--zwart));
}
.overview-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
}
.overview-kpi-card {
    background: var(--wit, #fff);
    border: 1px solid var(--divider-soft, #e8e0d8);
    border-radius: 10px;
    padding: var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.overview-kpi-card.overview-kpi-bonus {
    background: linear-gradient(135deg, rgba(232,124,42,0.04), rgba(124,183,123,0.04));
    border-color: rgba(232,124,42,0.25);
}
.overview-kpi-icon {
    color: var(--accent, var(--oranje));
    display: flex;
}
.overview-kpi-label {
    font-size: 0.78rem;
    color: var(--text-tertiary, var(--grijs));
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.overview-kpi-value {
    /* Unified KPI-typografie: Geist Mono medium (weight 500) ipv default bold.
       User-feedback: 'dunder vind ik mooier'. Tabular-nums houdt
       cijferkolommen netjes uitgelijnd. */
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 1.55rem;
    font-weight: 500;
    letter-spacing: -0.4px;
    color: #18181B;
    line-height: 1.1;
}
.overview-kpi-detail {
    font-size: 0.72rem;
    color: var(--text-tertiary, var(--grijs));
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Keyword-pattern chips in service-edit modal */
/* Service-first keyword-grid status-pills (in de pillar keyword-grid modal) */
.kg-svc-table th { border-bottom: 1px solid var(--divider-soft, #e8e0d8); }
.kg-svc-table td { padding: 8px; border-bottom: 1px solid var(--creme, #F4F2F0); vertical-align: top; }
.kg-svc-table tr:last-child td { border-bottom: none; }
.kg-svc-table tr:hover td { background: var(--creme, #F4F2F0); }
.kg-status-pill {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 500;
    vertical-align: middle;
}
.kg-status-pillar   { background: rgba(46, 143, 92, 0.12);  color: #2e6f30; }
.kg-status-sub      { background: rgba(232, 124, 42, 0.12); color: #87601a; }
.kg-status-other    { background: rgba(107, 114, 128, 0.15); color: #4b5563; }
.kg-status-svc      { background: var(--creme, #F4F2F0);    color: var(--text-tertiary, var(--grijs)); }
.kg-action-cell .form-select-sm,
.kg-action-cell .form-input-sm {
    width: 100%;
    font-size: 0.82rem;
}

/* Pillar-modal: lijst rankende pagina's als radio-opties */
.pillar-page-options {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 240px;
    overflow-y: auto;
    padding: 6px;
    background: var(--creme, #F4F2F0);
    border-radius: 6px;
}
.pillar-page-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--wit, #fff);
    border: 1px solid var(--divider-soft, #e8e0d8);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.pillar-page-option:hover { border-color: var(--accent, var(--oranje)); }
.pillar-page-option input[type="radio"] {
    accent-color: var(--accent, var(--oranje));
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.pillar-page-option:has(input:checked) {
    border-color: var(--accent, var(--oranje));
    background: rgba(232, 124, 42, 0.05);
}
.pillar-page-option-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.pillar-page-path {
    font-family: monospace;
    font-size: 0.85rem;
    color: var(--text-primary, var(--zwart));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pillar-page-meta {
    font-size: 0.72rem;
    color: var(--text-tertiary, var(--grijs));
}

.kw-pattern-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px 4px 10px;
    background: var(--wit, #fff);
    border: 1px solid var(--divider-soft, #e8e0d8);
    border-radius: 999px;
    font-size: 0.78rem;
    color: var(--text-primary, var(--zwart));
}
.kw-pattern-chip .kw-pattern-remove {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    background: var(--creme, #F4F2F0);
    color: var(--text-tertiary, var(--grijs));
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.kw-pattern-chip .kw-pattern-remove:hover {
    background: var(--rood, #d4633a);
    color: #fff;
}

.overview-kpi-skeleton {
    height: 110px;
    background: var(--creme, #F4F2F0);
    border: none;
}
@keyframes skeleton-pulse {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.metric-card {
    background: var(--wit);
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius);
    padding: var(--sp-5);
    text-align: center;
}

.metric-card .metric-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--zwart);
    line-height: 1.2;
}

.metric-card .metric-label {
    font-size: 0.75rem;
    color: var(--grijs-licht);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: var(--sp-1);
}

.metric-card .metric-trend {
    margin-top: var(--sp-2);
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1);
}

.metric-card .metric-trend.up { color: var(--groen); }
.metric-card .metric-trend.down { color: var(--rood); }
.metric-card .metric-trend.flat { color: var(--grijs-licht); }

.metric-card .metric-target {
    margin-top: var(--sp-1);
    font-size: 0.7rem;
    color: var(--grijs-licht);
}

/* ============================================
   TABLES
   ============================================ */
.table-wrapper {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

thead th {
    text-align: left;
    padding: var(--sp-3) var(--sp-4);
    font-weight: 600;
    color: var(--grijs);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--divider-soft);
    background: var(--surface-alt);
}

tbody td {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--divider-soft);
    vertical-align: middle;
}

tbody tr:nth-child(even) {
    background: rgba(245, 240, 235, 0.4);
}

tbody tr:hover {
    background: var(--creme-dark);
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    height: 44px;
    padding: 0 var(--sp-5);
    font-size: 0.875rem;
    font-weight: 500;
    font-family: var(--font-family);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition);
    line-height: 1;
    white-space: nowrap;
}

.btn .icon { font-size: 20px; }
.btn-sm { height: 40px; padding: 0 var(--sp-4); font-size: 0.85rem; }
.btn-sm .icon { font-size: 18px; }
.btn-lg { height: 48px; padding: 0 var(--sp-6); font-size: 0.95rem; }
.btn-lg .icon { font-size: 22px; }

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary {
    background: var(--accent);
    color: var(--wit);
    border-color: var(--accent);
}

.btn-primary:hover:not(:disabled) {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

.btn-secondary {
    background: var(--wit);
    color: var(--accent);
    border-color: var(--divider-soft);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--accent-light);
    border-color: var(--accent-light);
    color: var(--accent-hover);
}

/* Alle sync-knoppen — uniform GA4-stijl: blauwe outline */
.btn[data-action="sync"],
.btn[data-ds-action="sync"],
.btn[id$="-sync-btn"],
.btn[id*="sync-"] {
    background: var(--wit) !important;
    color: var(--accent) !important;
    border: 1px solid var(--accent) !important;
    font-weight: 500 !important;
}

.btn[data-action="sync"]:hover:not(:disabled),
.btn[data-ds-action="sync"]:hover:not(:disabled),
.btn[id$="-sync-btn"]:hover:not(:disabled),
.btn[id*="sync-"]:hover:not(:disabled) {
    background: var(--accent-light) !important;
    color: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
}

.btn[data-action="sync"]:disabled,
.btn[data-ds-action="sync"]:disabled,
.btn[id$="-sync-btn"]:disabled,
.btn[id*="sync-"]:disabled {
    background: var(--surface-alt) !important;
    color: var(--grijs-licht) !important;
    border-color: var(--divider-soft) !important;
}

.btn-danger {
    background: var(--rood);
    color: var(--wit);
    border-color: var(--rood);
}

.btn-danger:hover:not(:disabled) {
    background: #b8522e;
    border-color: #b8522e;
}

.btn-success {
    background: var(--groen);
    color: var(--wit);
    border-color: var(--groen);
}

.btn-success:hover:not(:disabled) {
    background: #6aa369;
    border-color: #6aa369;
}

.btn-warning {
    background: var(--geel);
    color: var(--wit);
    border-color: var(--geel);
}

.btn-sm {
    padding: var(--sp-1) var(--sp-3);
    font-size: 0.75rem;
}

.btn-sm .icon { font-size: 14px; }

.btn-lg {
    padding: var(--sp-3) var(--sp-6);
    font-size: 1rem;
}

.btn-icon {
    padding: var(--sp-2);
    min-width: 32px;
    min-height: 32px;
}

.btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--grijs);
}

.btn-ghost:hover:not(:disabled) {
    background: var(--surface-alt);
    color: var(--zwart);
}

/* Extra-small button — voor compacte tabel-acties */
.btn-xs {
    height: 24px;
    padding: 0 var(--sp-2);
    font-size: 0.75rem;
}
.btn-xs .icon { font-size: 14px; }

/* Klanten-pagina header + toolbar — dezelfde cream+witte+lijn opbouw
   als de brand-cockpit, alleen dan met filter-controls in plaats van
   tabs onder de header. */
.klanten-page-header,
.dashboard-page-header {
    margin: calc(-1 * var(--sp-8)) calc(-1 * var(--sp-8)) 0;
}
.dashboard-page-header + .dash-hero {
    padding-top: var(--sp-5, 32px);
}
.klanten-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--surface, #FFFFFF);
    border-bottom: 1px solid var(--border-subtle, #E8EAED);
    margin: 0 calc(-1 * var(--sp-8)) var(--sp-5);
}

/* Brand-header balk boven de tabs — cream-achtergrond, matcht de
   .pa-page-header uit het design-system (~/design-system/v2). Border-
   bottom weggehaald zodat de witte tab-strip direct aansluit en het
   grijze lijntje pas ONDER de tabs zit (net als in de CRM-look). */
.brand-header-bar {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 14px var(--sp-5);
    margin: calc(-1 * var(--sp-8)) calc(-1 * var(--sp-8)) 0;
    background: #fff;
    border-bottom: 1px solid var(--pa-border-row, #E4E4E7);
    position: sticky;
    top: 0;
    z-index: 50;
}
.brand-header-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: var(--text-secondary);
    transition: background var(--transition);
}
.brand-header-back:hover {
    background: var(--surface-alt);
    color: var(--text-primary);
}
.brand-header-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--text-tertiary);
}
.brand-header-crumb {
    cursor: default;
}
.brand-header-sep {
    color: var(--text-disabled);
    font-size: 1rem;
    line-height: 1;
}
.brand-header-name {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}
.brand-header-domain {
    font-size: 0.85rem;
    color: var(--text-tertiary);
    padding-left: var(--sp-2);
    border-left: 1px solid var(--divider-soft);
    margin-left: var(--sp-1);
}
/* Instellingen-knop rechtsboven in de brand-header-bar (vervangt de tab). */
.brand-header-settings {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border: 1px solid var(--border-subtle, #E8EAED);
    border-radius: 8px;
    background: var(--wit);
    color: var(--text-secondary, #71717A);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.brand-header-settings:hover {
    color: var(--text-primary, #18181B);
    background: var(--surface-subtle, #FBFBFC);
    border-color: var(--border-strong, #D0D7DE);
}
.brand-header-settings.cockpit-tab-active {
    color: var(--accent, #2A6FDB);
    border-color: var(--accent, #2A6FDB);
    background: rgba(42,111,219,0.04);
    font-weight: 600;
}
.brand-header-settings .icon { font-size: 16px; }

/* Compacte stat-strip in uitgeklapte keyword-rij */
.kw-stat-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: var(--sp-1);
    background: var(--surface-alt);
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius-sm);
    padding: var(--sp-2);
    margin-bottom: var(--sp-2);
}
.kw-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 6px 8px;
    background: var(--wit);
    border-radius: 4px;
    border: 1px solid var(--divider-soft);
}
.kw-stat-label {
    font-size: 0.65rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}
.kw-stat-val {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.2;
}
.kw-stat-prev {
    font-size: 0.7rem;
    color: var(--text-tertiary);
}
.kw-ai-reason {
    font-size: 0.8rem;
    color: var(--text-secondary);
    background: var(--accent-light);
    border-radius: var(--radius-sm);
    padding: 6px var(--sp-2);
    margin-bottom: var(--sp-2);
}

/* Inline edit form binnen uitgeklapte keyword-rij */
.seo-detail-edit-form .form-input-sm {
    height: 32px;
    padding: 0 var(--sp-2);
    font-size: 0.85rem;
    line-height: 1.4;
    border: 1px solid var(--divider-soft);
    background: var(--wit);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.seo-detail-edit-form .form-input-sm:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.12);
}
.seo-detail-edit-form textarea.form-input-sm {
    height: auto;
    padding: 6px var(--sp-2);
}
.seo-detail-edit-form .seo-detail-row label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 500;
    min-width: 110px;
    flex-shrink: 0;
}
.seo-detail-edit-form .seo-detail-row {
    align-items: center;
    gap: var(--sp-2);
}

/* ═══════════════════════════════════════════
   Keyword positie-historie — clean & isolated
   Override ALLE globale tbody/thead regels
   ═══════════════════════════════════════════ */
.kw-history-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-4);
    padding: 8px 12px;
    margin-bottom: var(--sp-2);
    font-size: 0.8rem;
    color: var(--text-secondary);
    background: var(--surface-alt, #f9fafb);
    border: 1px solid var(--divider-soft, #e5e7eb);
    border-radius: 6px;
}
.kw-history-summary strong {
    color: var(--text-primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.kw-history-summary > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.kw-history-table-wrap {
    width: 100%;
    overflow-x: auto;
}
.kw-history-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-family: var(--font-family);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}
/* Reset alle globale tbody/thead overrides (specificity 0,2,2 + !important) */
.kw-history-table thead tr,
.kw-history-table tbody tr,
.kw-history-table thead tr:nth-child(even),
.kw-history-table tbody tr:nth-child(even),
.kw-history-table tbody tr:hover {
    background: transparent !important;
}
.kw-history-table thead th,
.kw-history-table tbody td {
    padding: 8px 14px !important;
    text-align: right !important;                    /* numerieke waarden rechts-uitgelijnd voor visuele vulling */
    text-indent: 0 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    font-weight: 400 !important;
    border: 0 !important;
    border-bottom: 1px solid #EEEEEE !important;
    box-shadow: none !important;
    white-space: nowrap;
    vertical-align: middle;
    color: var(--text-primary);
    background: transparent !important;
    line-height: 1.5;
}
/* Eerste kolom (Maand-labels) blijft links uitgelijnd */
.kw-history-table thead th:first-child,
.kw-history-table tbody td:first-child {
    text-align: left !important;
}
.kw-history-table thead th {
    font-size: 0.78rem !important;
    color: var(--text-tertiary) !important;
    font-weight: 500 !important;
}
.kw-history-table tbody tr:last-child td {
    border-bottom: 0 !important;
}
.kw-history-table th:first-child,
.kw-history-table td:first-child {
    width: 110px;
    color: var(--text-secondary) !important;
    font-weight: 500 !important;
}
.kw-history-table .pos-good { color: var(--groen) !important; font-weight: 500 !important; }
.kw-history-table .pos-ok   { color: #B58900 !important; font-weight: 500 !important; }
.kw-history-table .pos-low  { color: var(--rood) !important; font-weight: 500 !important; }

/* Diensten + uren-budget grid */
.dienst-hours-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--sp-2);
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius-sm);
    padding: var(--sp-3);
    background: var(--surface-alt);
}
.dienst-hours-row {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2);
    background: var(--wit);
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius-sm);
}
.dienst-hours-row .checkbox-label {
    flex: 1;
    margin: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}
.dienst-hours-input-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100px;
    flex-shrink: 0;
}
.dienst-hours-input {
    width: 60px;
    height: 32px;
    padding: 0 6px;
    text-align: right;
    font-size: 0.85rem;
}
.dienst-hours-input:disabled {
    background: var(--surface-alt);
    color: var(--text-disabled);
    cursor: not-allowed;
}
.dienst-hours-unit {
    font-size: 0.7rem;
    color: var(--text-tertiary);
    white-space: nowrap;
}

/* Wie deze dienst doet. Onder de naam en de uren, niet ernaast: de rij is al
   vol en drie dingen op één regel duwt de dienstnaam weg. */
.dienst-hours-row {
    flex-wrap: wrap;
}
.dienst-wie {
    width: 100%;
    height: 30px;
    padding: 0 6px;
    font-size: 0.8rem;
}
.dienst-wie:disabled {
    background: var(--surface-alt);
    color: var(--text-disabled);
    cursor: not-allowed;
}

/* Read-only weergave in klant-overzicht */
.dienst-hours-readonly {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}
.dienst-hours-readonly-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px dashed var(--divider-soft);
    font-size: 0.85rem;
}
.dienst-hours-readonly-row:last-child {
    border-bottom: none;
}
.dienst-hours-readonly-val {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.85rem;
    white-space: nowrap;
}

/* Settings sub-tabs (Klantgegevens / KPI / Databronnen / Conversiewaarden) */
.settings-subtabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--divider-soft);
    margin-bottom: var(--sp-5);
    flex-wrap: wrap;
}
.settings-subtab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--sp-3) var(--sp-4);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--grijs);
    font-size: 0.85rem;
    font-weight: 500;
    font-family: var(--font-family);
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition);
    margin-bottom: -1px;
}
.settings-subtab:hover { color: var(--zwart); }
.settings-subtab-active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.btn-group {
    display: flex;
    gap: var(--sp-2);
}

/* ============================================
   FORMS
   ============================================ */
.form-group {
    margin-bottom: var(--sp-4);
}

.form-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--grijs);
    margin-bottom: var(--sp-1);
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: var(--sp-3) var(--sp-3);
    font-size: 0.875rem;
    font-family: var(--font-family);
    color: var(--zwart);
    background: var(--wit);
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius-sm);
    transition: all var(--transition);
    outline: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.15);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--grijs-300);
}

.form-textarea {
    resize: vertical;
    min-height: 80px;
}

.form-row {
    display: flex;
    gap: var(--sp-4);
}

.form-row .form-group {
    flex: 1;
}

.form-error {
    color: var(--rood);
    font-size: 0.8rem;
    margin-top: var(--sp-1);
}

/* ============================================
   BADGES
   ============================================ */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 10px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    white-space: nowrap;
}

.badge-connected, .badge-success, .badge-groen {
    background: var(--groen-light);
    color: #3d7a3c;
}

.badge-error, .badge-rood, .badge-critical {
    background: var(--rood-light);
    color: #a84428;
}

.badge-warning, .badge-geel {
    background: var(--geel-light);
    color: #8a6d1f;
}

.badge-pending, .badge-grijs, .badge-info {
    background: var(--grijs-100);
    color: var(--grijs-500);
}

.badge-oranje {
    background: #fef0e4;
    color: #b35f1a;
}

.badge-zwart {
    background: var(--grijs-700);
    color: var(--wit);
}

.badge-default {
    background: var(--creme-dark);
    color: var(--grijs);
}

/* Label badges */
.label-badge {
    padding: 2px 8px;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.label-feit { background: var(--groen); color: var(--wit); }
.label-diagnose { background: var(--oranje); color: var(--wit); }
.label-hypothese { background: var(--geel); color: var(--wit); }
.label-scenario { background: var(--grijs-licht); color: var(--wit); }

/* Severity indicators — kleur via badges, geen colored border meer */
.severity-critical,
.severity-warning,
.severity-opportunity,
.severity-info { /* geen border-left meer, status zit in pills/badges */ }

/* Confidence badges */
.confidence-high { background: var(--groen-light); color: #3d7a3c; }
.confidence-medium { background: var(--geel-light); color: #8a6d1f; }
.confidence-low { background: #F4F2F0; color: var(--grijs-400); }

/* ============================================
   SCORECARD (6-axis)
   ============================================ */
.scorecard {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

.scorecard .score-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-sm);
    background: #F4F2F0;
    min-width: 60px;
    text-align: center;
}

.scorecard .score-badge .score-label {
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--grijs-licht);
    margin-bottom: 2px;
}

.scorecard .score-badge .score-value {
    font-weight: 700;
    font-size: 0.75rem;
}

.scorecard .score-badge.score-high { background: var(--groen-light); }
.scorecard .score-badge.score-high .score-value { color: #3d7a3c; }
.scorecard .score-badge.score-medium { background: var(--geel-light); }
.scorecard .score-badge.score-medium .score-value { color: #8a6d1f; }
.scorecard .score-badge.score-low { background: var(--rood-light); }
.scorecard .score-badge.score-low .score-value { color: #a84428; }

/* ============================================
   INSIGHT CARDS
   ============================================ */
.insight-card {
    background: var(--wit);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    margin-bottom: var(--sp-3);
    overflow: hidden;
    cursor: pointer;
    transition: border-color var(--transition);
}

.insight-card:hover {
    border-color: var(--border-strong);
}

.insight-card-main {
    display: flex;
    align-items: flex-start;
    padding: var(--sp-4) var(--sp-5);
    gap: var(--sp-4);
}

.insight-card .insight-badges {
    display: flex;
    gap: var(--sp-1);
    flex-wrap: wrap;
    margin-bottom: var(--sp-2);
}

.insight-card .insight-title {
    font-weight: 600;
    color: var(--zwart);
    font-size: 0.9rem;
    margin-bottom: var(--sp-1);
}

.insight-card .insight-observation {
    font-size: 0.8rem;
    color: var(--grijs);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.insight-card .insight-meta {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    font-size: 0.75rem;
    color: var(--grijs-licht);
    margin-top: var(--sp-2);
}

.insight-card .insight-meta .icon {
    font-size: 14px;
    margin-right: 2px;
}

.insight-card .insight-actions {
    display: flex;
    gap: var(--sp-2);
    margin-left: auto;
    flex-shrink: 0;
}

.insight-card .insight-detail {
    padding: 0 var(--sp-5) var(--sp-5);
    border-top: 1px solid var(--divider-soft);
    margin-top: -1px;
    display: none;
}

.insight-card .insight-detail.open {
    display: block;
    padding-top: var(--sp-4);
}

/* ============================================
   FILTER BAR
   ============================================ */
.filter-bar {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
    flex-wrap: wrap;
    padding: var(--sp-3) var(--sp-4);
    background: var(--wit);
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius);
}

.filter-bar .form-select,
.filter-bar .form-input {
    width: auto;
    min-width: 150px;
    padding: var(--sp-2) var(--sp-3);
    font-size: 0.8rem;
}

.filter-bar .form-input {
    min-width: 200px;
}

/* ============================================
   STATS BAR
   ============================================ */
.stats-bar {
    display: flex;
    gap: var(--sp-6);
    margin-bottom: var(--sp-5);
    padding: var(--sp-3) var(--sp-4);
    background: var(--wit);
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius);
}

.stats-bar .stat-item {
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.stats-bar .stat-item .stat-count {
    font-weight: 700;
    font-size: 1rem;
    color: var(--zwart);
}

/* ============================================
   KANBAN BOARD
   ============================================ */
.kanban-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-4);
    min-height: 400px;
}

.kanban-column {
    background: var(--surface-alt);
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    min-height: 300px;
}

.kanban-column-header {
    padding: var(--sp-3) var(--sp-4);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--zwart);
    border-bottom: 1px solid var(--divider-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.kanban-column-header .column-count {
    background: var(--creme-dark);
    color: var(--grijs);
    font-size: 0.7rem;
    padding: 1px 7px;
    border-radius: 10px;
    font-weight: 600;
}

.kanban-column-body {
    flex: 1;
    padding: var(--sp-2);
    overflow-y: auto;
}

.kanban-card {
    background: var(--wit);
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius-sm);
    padding: var(--sp-3);
    margin-bottom: var(--sp-2);
    cursor: pointer;
    transition: box-shadow var(--transition);
}

.kanban-card:hover {
    box-shadow: var(--shadow);
}

.kanban-card .kanban-card-title {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--zwart);
    margin-bottom: var(--sp-1);
}

.kanban-card .kanban-card-brand {
    font-size: 0.7rem;
    color: var(--grijs-licht);
    margin-bottom: var(--sp-2);
}

.kanban-card .kanban-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--grijs-licht);
}

.kanban-card .kanban-card-assignee {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
}

.kanban-card .kanban-card-due {
    font-size: 0.7rem;
}

.kanban-card .kanban-card-due.overdue {
    color: var(--rood);
    font-weight: 600;
}

.kanban-card .kanban-card-moves {
    display: flex;
    gap: 3px;
    margin-top: var(--sp-2);
    flex-wrap: wrap;
}

/* Priority indicators on kanban cards */
/* Priority — zichtbaar via badges/labels, geen colored border meer */
.kanban-card.priority-high,
.kanban-card.priority-medium,
.kanban-card.priority-low { /* geen border-left meer */ }

/* ============================================
   MODAL
   ============================================ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.15s ease;
}

.modal {
    background: var(--wit);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 90%;
    max-width: 560px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.2s ease;
}

.modal-header {
    padding: var(--sp-5) var(--sp-6);
    border-bottom: 1px solid var(--divider-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-header h3 {
    font-size: 1.1rem;
    margin: 0;
}

.modal-close {
    background: none;
    border: none;
    color: var(--grijs-licht);
    cursor: pointer;
    padding: var(--sp-1);
    line-height: 1;
    display: flex;
    align-items: center;
    border-radius: var(--radius-sm);
    transition: all var(--transition);
}

.modal-close:hover {
    color: var(--zwart);
    background: var(--creme-dark);
}

.modal-body {
    padding: var(--sp-6);
    overflow-y: auto;
    flex: 1;
}

.modal-footer {
    padding: var(--sp-4) var(--sp-6);
    border-top: 1px solid var(--divider-soft);
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-2);
}

.modal.modal-sm { max-width: 420px; }
.modal-header h2 { font-size: 1.1rem; margin: 0; }

/* Mijn profiel — avatar bewerken */
.profile-avatar-edit {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
}
.profile-avatar-preview {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--accent-light);
    color: var(--accent-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.4rem;
    flex-shrink: 0;
    overflow: hidden;
}
.profile-avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.profile-avatar-meta .profile-name { font-weight: 600; }
.profile-avatar-actions { display: flex; align-items: center; gap: var(--sp-3); }
.btn-text {
    background: none;
    border: none;
    color: var(--grijs-licht);
    cursor: pointer;
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--radius-sm);
    transition: all var(--transition);
}
.btn-text:hover { color: var(--zwart); background: var(--creme-dark); }

/* Sidebar-user is klikbaar (→ Mijn profiel) */
.sidebar-user { cursor: pointer; border-radius: var(--radius-sm); transition: background var(--transition); }
.sidebar-user:hover { background: var(--creme-dark); }
.sidebar-user .sidebar-logout { cursor: pointer; }

/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */
/* Onderaan in het midden, onder elkaar.
   Het design-system zet elke .toast los op position: fixed, onderaan in het
   midden. Dat is goed voor één melding, maar twee tegelijk -- "Gekoppeld" en
   "Gedetecteerd: basic" -- lagen daardoor precies over elkaar en waren geen van
   beide te lezen. De container stapelt ze nu; de melding zelf staat in de rij. */
.toast-container {
    position: fixed;
    top: auto;
    right: auto;
    bottom: var(--sp-6);
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    pointer-events: none;
}
.toast-container .toast {
    position: static;
    transform: none;
    pointer-events: auto;
}

.toast {
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius);
    font-size: 0.85rem;
    font-weight: 500;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-width: 280px;
    max-width: 420px;
    animation: slideInRight 0.3s ease;
}

.toast .icon { font-size: 18px; }

.toast-success { background: var(--groen); color: var(--wit); }
.toast-error { background: var(--rood); color: var(--wit); }
.toast-warning { background: var(--geel); color: var(--wit); }
.toast-info { background: var(--grijs); color: var(--wit); }

/* ============================================
   LOADING SPINNER
   ============================================ */
.loader-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-12);
}

.loader {
    width: 36px;
    height: 36px;
    border: 3px solid var(--creme-dark);
    border-top-color: var(--oranje);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

.loader-sm {
    width: 20px;
    height: 20px;
    border-width: 2px;
}

/* ============================================
   EMPTY STATE
   ============================================ */
.empty-state {
    text-align: center;
    padding: var(--sp-12) var(--sp-8);
    color: var(--grijs-licht);
}

.empty-state .empty-icon {
    margin-bottom: var(--sp-3);
}

.empty-state .empty-icon .icon {
    font-size: 48px;
    opacity: 0.4;
}

.empty-state .empty-message {
    font-size: 0.95rem;
    margin-bottom: var(--sp-2);
}

.empty-state .empty-hint {
    font-size: 0.8rem;
}

/* ============================================
   LOGIN SCREEN
   ============================================ */
.login-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--surface-alt);
}

.login-card {
    background: var(--wit);
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius-lg);
    padding: var(--sp-10);
    width: 100%;
    max-width: 400px;
}

.login-card .login-brand {
    text-align: center;
    margin-bottom: var(--sp-8);
}

.login-card .login-brand h1 {
    font-size: 1.5rem;
    margin-bottom: var(--sp-1);
}

.login-card .login-brand p {
    color: var(--grijs-licht);
    font-size: 0.85rem;
}

.login-error {
    background: var(--rood-light);
    color: #a84428;
    padding: var(--sp-3);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    margin-bottom: var(--sp-4);
    display: none;
}

.login-error.visible {
    display: block;
}

/* ============================================
   BRAND CONTEXT SIDEBAR (cockpit)
   ============================================ */
.cockpit-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--sp-6);
}

.brand-context {
    background: var(--wit);
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius);
    padding: var(--sp-5);
    height: fit-content;
    position: sticky;
    top: var(--sp-8);
}

.brand-context h2 {
    font-size: 1.1rem;
    margin-bottom: var(--sp-3);
    padding-bottom: var(--sp-2);
    border-bottom: 2px solid var(--oranje);
}

.brand-context .context-section {
    margin-bottom: var(--sp-4);
}

.brand-context .context-section h4 {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--grijs-licht);
    margin-bottom: var(--sp-1);
}

.brand-context .context-section p,
.brand-context .context-section ul {
    font-size: 0.8rem;
    color: var(--grijs);
}

.brand-context .context-section ul li {
    padding: var(--sp-1) 0;
}

.brand-context .source-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-1) 0;
    font-size: 0.8rem;
}

/* ============================================
   CONTEXT / SETTINGS CARDS
   ============================================ */
.context-card {
    padding: var(--sp-5);
}

.context-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--sp-4);
}

.context-field {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

.context-field-full {
    grid-column: 1 / -1;
}

.context-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--grijs);
}

.context-value {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--zwart);
}

.context-card p {
    margin-bottom: var(--sp-3);
    font-size: 0.9rem;
    line-height: 1.6;
}

.context-card p:last-child {
    margin-bottom: 0;
}

.context-card p strong {
    color: var(--zwart);
}

/* Checkbox grid for services/channels */
.checkbox-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-1) var(--sp-3);
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    user-select: none;
}

.checkbox-label:hover {
    background: var(--surface-alt);
}

.checkbox-label:has(input:checked) {
    background: var(--oranje-light, #fef0e4);
    border-color: var(--oranje);
    color: var(--oranje);
    font-weight: 600;
}

.checkbox-label input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--oranje);
}

/* Text helpers */
.text-xs {
    font-size: 0.75rem;
}

.contact-item {
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--divider-soft);
}

.contact-item:last-child {
    border-bottom: none;
}

/* ============================================
   REVIEW WORKSPACE
   ============================================ */
.review-container {
    max-width: 800px;
    margin: 0 auto;
}

.review-progress {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
    font-size: 0.85rem;
}

.review-progress .progress-bar {
    flex: 1;
    height: 6px;
    background: var(--creme-dark);
    border-radius: 3px;
    overflow: hidden;
}

.review-progress .progress-fill {
    height: 100%;
    background: var(--oranje);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.review-item {
    background: var(--wit);
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius);
}

.review-item .review-header {
    padding: var(--sp-5) var(--sp-6);
    border-bottom: 1px solid var(--divider-soft);
}

.review-item .review-body {
    padding: var(--sp-6);
}

.review-field {
    margin-bottom: var(--sp-5);
}

.review-field .field-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--grijs-licht);
    margin-bottom: var(--sp-1);
    font-weight: 600;
}

.review-field .field-content {
    font-size: 0.875rem;
    line-height: 1.6;
}

.review-item .review-footer {
    padding: var(--sp-4) var(--sp-6);
    border-top: 1px solid var(--divider-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.review-nav {
    display: flex;
    gap: var(--sp-2);
}

.review-actions {
    display: flex;
    gap: var(--sp-2);
}

/* ============================================
   PRIORITY SCORE
   ============================================ */
.priority-score {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.priority-score .score-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--wit);
}

.priority-score .score-circle.score-high { background: var(--rood); }
.priority-score .score-circle.score-medium { background: var(--geel); }
.priority-score .score-circle.score-low { background: var(--groen); }

/* ============================================
   REPORTING
   ============================================ */
.report-builder {
    max-width: 900px;
}

.report-section {
    background: var(--wit);
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius);
    margin-bottom: var(--sp-4);
}

.report-section-header {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--divider-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.report-section-header h4 {
    font-size: 0.9rem;
    margin: 0;
}

.report-section-body {
    padding: var(--sp-4);
}

.report-section .auto-content {
    background: var(--surface-alt);
    border-radius: var(--radius-sm);
    padding: var(--sp-3);
    font-size: 0.8rem;
    margin-bottom: var(--sp-3);
    color: var(--grijs);
    line-height: 1.6;
}

.version-toggle {
    display: flex;
    background: var(--surface-alt);
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius-sm);
    padding: 2px;
    gap: 2px;
}

.version-toggle button {
    padding: var(--sp-1) var(--sp-3);
    border: none;
    background: transparent;
    font-size: 0.8rem;
    font-family: var(--font-family);
    cursor: pointer;
    border-radius: 3px;
    transition: all var(--transition);
    color: var(--grijs);
}

.version-toggle button.active {
    background: var(--wit);
    color: var(--zwart);
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}

/* Report list item */
.report-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-3) var(--sp-5);
    border-bottom: 1px solid var(--divider-soft);
}

.report-list-item:last-child {
    border-bottom: none;
}

.report-list-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--zwart);
}

.report-list-meta {
    font-size: 0.8rem;
    color: var(--grijs-licht);
    margin-top: 2px;
}

/* ============================================
   ALERT BOX
   ============================================ */
.alert-box {
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius);
    font-size: 0.85rem;
    margin-bottom: var(--sp-4);
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
}

.alert-box-error {
    background: var(--rood-light);
    color: #a84428;
    border: 1px solid #e8b0a0;
}

.alert-box-warning {
    background: var(--geel-light);
    color: #8a6d1f;
    border: 1px solid #e8d5a0;
}

.alert-box-success {
    background: var(--groen-light);
    color: #3d7a3c;
    border: 1px solid #a0d8a0;
}

.alert-box-info {
    background: #eef3ff;
    color: #3366aa;
    border: 1px solid #aac5ee;
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(100px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}
/* Spinning utility — gebruikt op icons in actie-knoppen (Sync GSC, Volumes,
   Spam-filter etc). Voeg klasse 'spin' toe op een icon-span. */
.spin { animation: spin 1s linear infinite; display: inline-block; }
.seo2-btn[disabled] { opacity: 0.7; cursor: wait; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1200px) {
    .brand-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .main-content {
        margin-left: 0;
    }

    .brand-grid {
        grid-template-columns: 1fr;
    }

    .kanban-board {
        grid-template-columns: 1fr;
    }

    .cockpit-layout {
        grid-template-columns: 1fr;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .metrics-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .main-content {
        padding: var(--sp-4);
    }

    .metrics-row {
        grid-template-columns: 1fr;
    }

    .filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-bar .form-select,
    .filter-bar .form-input {
        width: 100%;
        min-width: unset;
    }

    .cockpit-tabs {
        overflow-x: auto;
    }

    .ds-cards-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   MOBILE MENU TOGGLE
   ============================================ */
.mobile-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: var(--sp-3);
    left: var(--sp-3);
    z-index: 150;
    width: 40px;
    height: 40px;
    background: var(--sidebar-bg);
    color: var(--wit);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 1.25rem;
}

@media (max-width: 900px) {
    .mobile-menu-toggle {
        display: flex;
    }
}

/* ============================================
   UTILITIES
   ============================================ */
.text-muted { color: var(--text-tertiary); }
.text-secondary { color: var(--text-secondary); }
.text-sm { font-size: 0.8rem; }
.text-xs { font-size: 0.7rem; }
.text-strong { font-weight: 500; color: var(--text-primary); }
.text-center { text-align: center; }
.text-right { text-align: right; }
.font-bold { font-weight: 700; }
.mt-1 { margin-top: var(--sp-2); }
.mt-2 { margin-top: var(--sp-4); }
.mt-3 { margin-top: var(--sp-6); }
.mb-1 { margin-bottom: var(--sp-2); }
.mb-2 { margin-bottom: var(--sp-4); }
.mb-3 { margin-bottom: var(--sp-6); }
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-center { display: flex; align-items: center; }
.gap-1 { gap: var(--sp-2); }
.gap-2 { gap: var(--sp-4); }
.gap-3 { gap: var(--sp-6); }
.hidden { display: none !important; }

/* ============================================
   Journey Funnel — Customer Journey Visualisatie
   ============================================ */
.journey-funnel {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
}
@media (max-width: 900px) {
    .journey-funnel { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 500px) {
    .journey-funnel { grid-template-columns: 1fr; }
}

.journey-phase {
    border: 2px solid var(--divider-soft);
    border-radius: var(--radius);
    background: var(--wit);
    overflow: hidden;
    transition: border-color 0.2s;
}
.journey-phase:hover { border-color: var(--oranje); }
.journey-phase-header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.journey-phase-see .journey-phase-header { background: rgba(232,184,74,0.12); color: var(--geel); }
.journey-phase-think .journey-phase-header { background: rgba(232,124,42,0.10); color: var(--oranje); }
.journey-phase-do .journey-phase-header { background: rgba(124,183,123,0.12); color: var(--groen); }
.journey-phase-care .journey-phase-header { background: rgba(212,99,58,0.10); color: var(--rood); }

.journey-phase-body {
    padding: var(--sp-3) var(--sp-4);
}

.journey-middel-card {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-sm);
    background: var(--surface-alt);
    margin-bottom: var(--sp-2);
    cursor: pointer;
    transition: background 0.15s;
}
.journey-middel-card:last-child { margin-bottom: 0; }
.journey-middel-card:hover { background: var(--creme-dark); }
.journey-middel-card .middel-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--wit);
    flex-shrink: 0;
}
.journey-middel-card .middel-details {
    flex: 1;
    min-width: 0;
}
.journey-middel-card .middel-name {
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.journey-middel-card .middel-meta {
    font-size: 0.75rem;
    color: var(--grijs-licht);
}

.journey-phase-empty {
    text-align: center;
    padding: var(--sp-4);
    color: var(--grijs-licht);
    font-size: 0.8rem;
    font-style: italic;
}

.journey-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--creme-dark);
    font-size: 1.5rem;
    padding: 0 var(--sp-1);
}

/* ============================================
   Service Cards (Diensten & Middelen)
   ============================================ */
.middelen-service-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.service-card {
    background: var(--wit);
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius);
    overflow: hidden;
    transition: box-shadow 0.2s;
}
.service-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.service-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-4) var(--sp-5);
    cursor: pointer;
    user-select: none;
}
.service-card-left {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    min-width: 0;
}
.service-card-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
/* Type-based icon colors */
.service-card-icon.type-sea, .middel-detail-icon.type-sea, .middel-icon.type-sea { background: rgba(66,133,244,0.12); color: #4285f4; }
.service-card-icon.type-seo, .middel-detail-icon.type-seo, .middel-icon.type-seo { background: rgba(52,168,83,0.12); color: #34a853; }
.service-card-icon.type-social, .middel-detail-icon.type-social, .middel-icon.type-social { background: rgba(24,119,242,0.12); color: #1877f2; }
.service-card-icon.type-email, .middel-detail-icon.type-email, .middel-icon.type-email { background: rgba(232,124,42,0.12); color: var(--oranje); }
.service-card-icon.type-display, .middel-detail-icon.type-display, .middel-icon.type-display { background: rgba(251,188,4,0.12); color: #fbbc04; }
.service-card-icon.type-video, .middel-detail-icon.type-video, .middel-icon.type-video { background: rgba(234,67,53,0.12); color: #ea4335; }
.service-card-icon.type-content, .middel-detail-icon.type-content, .middel-icon.type-content { background: rgba(124,183,123,0.12); color: var(--groen); }
.service-card-icon.type-crm, .middel-detail-icon.type-crm, .middel-icon.type-crm { background: rgba(74,74,74,0.1); color: var(--grijs); }
.service-card-icon.type-direct, .middel-detail-icon.type-direct, .middel-icon.type-direct { background: rgba(74,74,74,0.08); color: var(--grijs); }
.service-card-icon.type-referral, .middel-detail-icon.type-referral, .middel-icon.type-referral { background: rgba(156,39,176,0.1); color: #9c27b0; }

.service-card-name {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}
.service-card-meta {
    font-size: 0.8rem;
    color: var(--grijs-licht);
    margin-top: 2px;
}
.service-card-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
}
.service-expand-icon {
    transition: transform 0.2s;
}
.service-card:not(.expanded) .service-expand-icon {
    transform: rotate(-90deg);
}

/* Collapsible body */
.service-card-body {
    padding: 0;
    display: none;
}
.service-card.expanded .service-card-body {
    display: block;
}
.service-card.expanded .service-card-header {
    border-bottom: 1px solid var(--divider-soft);
    padding-bottom: var(--sp-3);
}

/* Sub-middelen list */
.sub-middelen-list {
    display: flex;
    flex-direction: column;
}

.sub-middel-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-5);
    border-bottom: 1px solid var(--creme);
    font-size: 0.82rem;
    transition: background 0.12s;
}
.sub-middel-row:last-child {
    border-bottom: none;
}
.sub-middel-row:hover {
    background: var(--surface-alt);
}
.sub-middel-row.sub-inactive {
    opacity: 0.55;
}
.sub-middel-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 400;
    color: var(--zwart);
}
.sub-middel-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.12s;
}
.sub-middel-row:hover .sub-middel-actions {
    opacity: 1;
}

/* Sub-middel KPI panel (from funnel) */
.sub-kpi-panel {
    padding: 0 var(--sp-5) var(--sp-2) var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.sub-kpi-funnel-group {
    background: var(--surface-alt);
    border-radius: var(--radius);
    overflow: hidden;
}
.sub-kpi-funnel-header {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    padding: var(--sp-1) var(--sp-3);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--grijs);
    border-bottom: 1px solid var(--divider-soft);
}
.sub-kpi-table {
    width: 100%;
    font-size: 0.78rem;
    border-collapse: collapse;
}
.sub-kpi-table th {
    font-weight: 500;
    font-size: 0.68rem;
    color: var(--grijs);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: var(--sp-1) var(--sp-3);
    border-bottom: 1px solid var(--divider-soft);
}
.sub-kpi-table td {
    padding: var(--sp-1) var(--sp-3);
    border-bottom: 1px solid var(--divider-soft);
}
.sub-kpi-table tr:last-child td {
    border-bottom: none;
}
.sub-kpi-primary {
    background: rgba(232, 124, 42, 0.06);
}
.sub-kpi-primary td:first-child {
    font-weight: 600;
}

/* Funnel KPI row drag handle + actions (on hover) */
.funnel-kpi-drag {
    cursor: grab;
    opacity: 0;
    transition: opacity 0.12s;
    vertical-align: middle;
    margin-right: 2px;
    color: var(--grijs);
}
.funnel-kpi-row:hover .funnel-kpi-drag {
    opacity: 0.5;
}
.funnel-kpi-row.drag-active {
    opacity: 0.4;
}
.funnel-kpi-row.drag-over {
    border-top: 2px solid var(--oranje);
}
.funnel-kpi-actions {
    display: inline-flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.12s;
    vertical-align: middle;
    margin-left: var(--sp-1);
}
.funnel-kpi-row:hover .funnel-kpi-actions {
    opacity: 1;
}
.btn-icon-xs {
    width: 20px;
    height: 20px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Funnel results table (period snapshots) */
.funnel-results-table-wrap {
    overflow-x: auto;
    margin-bottom: var(--sp-4);
}
.funnel-results-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}
.funnel-results-table th,
.funnel-results-table td {
    padding: var(--sp-1) var(--sp-3);
    border: 1px solid var(--divider-soft);
    text-align: left;
    white-space: nowrap;
}
.funnel-results-table th {
    background: var(--surface-alt);
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.funnel-results-step-header {
    text-align: left !important;
    border-bottom: 2px solid var(--oranje);
}
.funnel-results-kpi-header {
    font-weight: 500 !important;
    text-transform: none !important;
    font-size: 0.7rem !important;
}
.funnel-results-period {
    text-align: left !important;
    font-weight: 600;
    background: var(--surface-alt);
}
.funnel-results-primary {
    background: rgba(232, 124, 42, 0.05);
}
.funnel-results-value {
    font-weight: 600;
}

/* Funnel instroom row (previous step's primary KPI shown as entry) */
.funnel-kpi-instroom {
    background: var(--surface-alt);
    font-style: italic;
    opacity: 0.75;
    border-bottom: 2px solid var(--divider-soft);
}

/* Add-sub button & empty hint inside service card */
.service-card-body > .btn {
    margin: var(--sp-1) var(--sp-5) var(--sp-3) var(--sp-5);
}
.sub-empty-hint {
    padding: var(--sp-3) var(--sp-5) 0 var(--sp-5);
}

/* Icon-only button */
.btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    border-radius: var(--radius-sm);
    color: var(--grijs);
    transition: color 0.15s, background 0.15s;
    display: flex;
    align-items: center;
}
.btn-icon:hover {
    color: var(--zwart);
    background: rgba(0,0,0,0.05);
}
.btn-icon:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    color: var(--zwart);
}
.btn-icon-danger:hover {
    color: var(--rood);
    background: rgba(212,99,58,0.1);
}
.btn-icon-danger:focus-visible {
    outline-color: var(--rood);
    color: var(--rood);
}

/* Badge sizes */
.badge-sm { font-size: 0.65rem; padding: 1px 6px; }
.badge-xs { font-size: 0.6rem; padding: 0 4px; }

/* Phase radio selector in modal */
.phase-radio-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
}
.phase-radio-option {
    display: block;
    cursor: pointer;
    border: 2px solid var(--divider-soft);
    border-radius: var(--radius);
    padding: var(--sp-3);
    transition: border-color 0.15s, background 0.15s;
}
.phase-radio-option input { display: none; }
.phase-radio-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-1);
    text-align: center;
}
.phase-radio-option:hover {
    border-color: var(--grijs-licht);
}
.phase-radio-option.selected,
.phase-radio-option:has(input:checked) {
    border-width: 2px;
}
.phase-option-see.selected, .phase-option-see:has(input:checked) { border-color: var(--geel); background: rgba(232,184,74,0.08); }
.phase-option-think.selected, .phase-option-think:has(input:checked) { border-color: var(--oranje); background: rgba(232,124,42,0.06); }
.phase-option-do.selected, .phase-option-do:has(input:checked) { border-color: var(--groen); background: rgba(124,183,123,0.08); }
.phase-option-care.selected, .phase-option-care:has(input:checked) { border-color: var(--rood); background: rgba(212,99,58,0.06); }

/* Middel detail view */
.middel-detail-header {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    margin-bottom: var(--sp-4);
}
.middel-detail-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.3rem;
}
.middel-detail-info h2 { margin: 0; }
.middel-detail-info .middel-detail-meta {
    font-size: 0.85rem;
    color: var(--grijs-licht);
    display: flex;
    gap: var(--sp-3);
    align-items: center;
    margin-top: var(--sp-1);
}

/* Phase labels */
.phase-label {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 1px 0;
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 54px;
    justify-content: center;
    padding: 2px 8px;
}
.phase-label .icon { font-size: 12px; }
.phase-label-see { background: rgba(232,184,74,0.15); color: #b8920d; }
.phase-label-think { background: rgba(232,124,42,0.12); color: var(--oranje); }
.phase-label-do { background: rgba(124,183,123,0.15); color: #4a8f49; }
.phase-label-care { background: rgba(212,99,58,0.12); color: var(--rood); }

/* ============================================
   Funnels
   ============================================ */
.funnels-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--sp-4);
}

/* ════════════════════════════════════════════════════════
   Funnel-cards v2 — header-pill + titel + KPI-recap + status
   Zelfde column-feeling als .journey-phase-col in funnel-detail.
   ════════════════════════════════════════════════════════ */
.funnel-card-v2 {
    background: #fff;
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
    display: flex;
    flex-direction: column;
}
.funnel-card-v2:hover {
    border-color: var(--accent, var(--oranje));
    transform: translateY(-2px);
    box-shadow: 0 8px 24px -12px rgba(0,0,0,0.12);
}

/* Pill bovenaan — block-display, full-width, centered (zoals SEE/THINK) */
.funnel-card-v2-phase {
    display: block;
    width: 100%;
    text-align: center;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 12px 16px;
    color: var(--phase-color, var(--zwart));
}
.funnel-card-phase-ecom {
    --phase-color: var(--groen);
    background: color-mix(in srgb, var(--groen) 18%, white);
}
.funnel-card-phase-lead {
    --phase-color: var(--oranje);
    background: color-mix(in srgb, var(--oranje) 18%, white);
}

.funnel-card-v2-body {
    padding: var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    flex: 1;
}
.funnel-card-v2-top {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
}
.funnel-card-v2-titles {
    flex: 1;
    min-width: 0;
}
.funnel-card-v2-name {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--ink, #111);
    line-height: 1.25;
}
.funnel-card-v2-desc {
    margin: 4px 0 0 0;
    font-size: 0.85rem;
    color: var(--text-secondary, var(--grijs));
}
.funnel-card-v2-actions { display: flex; gap: 2px; }

/* KPI-rij — 3 cellen, geen kaders, alleen typografische hiërarchie */
.funnel-card-v2-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-2);
    padding: var(--sp-2) 0;
    border-top: 1px solid var(--divider-soft);
    border-bottom: 1px solid var(--divider-soft);
}
.funnel-card-v2-kpi { display: flex; flex-direction: column; gap: 2px; }
.funnel-card-v2-kpi-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink, #111);
    line-height: 1.1;
}
.funnel-card-v2-kpi-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--grijs-licht);
    font-weight: 500;
}

.funnel-card-v2-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin-top: auto;
}
.funnel-card-v2-period {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--grijs-licht);
}

/* ─── Funnel-overzicht horizontaal ───────────────────────────────
   Per funnel één brede rij i.p.v. kaarten. Layout:
   [type-chip] [naam + desc] [3 KPI's] [status + periode] [acties] */
.funnel-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.funnel-row {
    display: grid;
    grid-template-columns: 130px minmax(220px, 1fr) auto auto auto;
    align-items: center;
    gap: var(--sp-5);
    padding: var(--sp-4) var(--sp-5);
    background: var(--wit);
    border: 1px solid var(--border-subtle, #E8EAED);
    border-radius: var(--radius);
    cursor: pointer;
    transition: box-shadow var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast);
}
.funnel-row:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transform: translateY(-1px);
    border-color: var(--border-strong, #D0D7DE);
}
/* Type-chip links: subtiele kleur-dot + label. Geen volle gekleurde
   pill of border-strip meer — alleen een klein rond accent in de
   funnel-type kleur (--phase-color: groen=ecom, oranje=lead). */
.funnel-row-type {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.funnel-row-type::before {
    content: '';
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--phase-color, var(--grijs-licht));
    flex-shrink: 0;
}
.funnel-row-type .icon { color: var(--text-tertiary); font-size: 14px; }
.funnel-row-titles { min-width: 0; }
.funnel-row-name {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.funnel-row-desc {
    margin: 2px 0 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.funnel-row-kpis {
    display: flex;
    gap: var(--sp-7, 40px);
    align-items: center;
}
.funnel-row-kpi {
    text-align: right;
    min-width: 80px;
}
.funnel-row-kpi-value {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    letter-spacing: -0.01em;
}
.funnel-row-kpi-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-tertiary);
    margin-top: 4px;
    font-weight: 500;
}
.funnel-row-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    min-width: 180px;
}
.funnel-row-period {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    color: var(--text-tertiary);
}
.funnel-row-actions {
    display: flex;
    gap: 2px;
}

/* Compactere layout op smallere viewports — KPI's onder de titel
   en acties op de plek van meta. */
@media (max-width: 960px) {
    .funnel-row {
        grid-template-columns: 90px 1fr auto;
        grid-template-areas:
            "type titles actions"
            "type kpis meta";
        row-gap: var(--sp-2);
    }
    .funnel-row-type   { grid-area: type; }
    .funnel-row-titles { grid-area: titles; }
    .funnel-row-kpis   { grid-area: kpis; justify-content: flex-start; }
    .funnel-row-meta   { grid-area: meta; align-items: flex-end; min-width: 0; }
    .funnel-row-actions{ grid-area: actions; }
}
.funnel-card-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    border: 1px solid transparent;
}
/* Statusvoor-dot — subtieler indicator naast de label (✓/⚠/—). */
.funnel-card-status::before {
    content: '';
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.funnel-card-status.status-ok {
    background: color-mix(in srgb, var(--groen) 16%, white);
    color: color-mix(in srgb, var(--groen) 80%, black);
    border-color: color-mix(in srgb, var(--groen) 28%, white);
}
.funnel-card-status.status-warn {
    background: color-mix(in srgb, var(--rood) 14%, white);
    color: color-mix(in srgb, var(--rood) 78%, black);
    border-color: color-mix(in srgb, var(--rood) 28%, white);
}
.funnel-card-status.status-none {
    background: var(--surface-alt);
    color: var(--text-secondary);
    border-color: var(--border-subtle, #E8EAED);
}

.funnel-card {
    background: var(--wit);
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius);
    padding: var(--sp-4);
    cursor: pointer;
    transition: box-shadow 0.2s, border-color 0.2s;
}
.funnel-card:hover {
    box-shadow: var(--shadow);
    border-color: var(--oranje);
}
.funnel-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--sp-3);
}
.funnel-card-name {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}
.funnel-card-actions { display: flex; gap: 2px; }
.funnel-card-footer { margin-top: var(--sp-3); padding-top: var(--sp-2); border-top: 1px solid var(--creme); }

.funnel-goal, .funnel-goal-bar {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    background: var(--geel-light);
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    margin-bottom: var(--sp-3);
}
.funnel-goal .icon, .funnel-goal-bar .icon { color: var(--geel); }

/* Funnel datasources bar */
.funnel-datasources-bar {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    background: var(--surface-alt);
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    margin-bottom: var(--sp-3);
}
.funnel-ds-label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 600;
    color: var(--grijs);
    white-space: nowrap;
}
.funnel-ds-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.funnel-ds-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: var(--sp-1) var(--sp-2);
    background: var(--wit);
    border: 1px solid var(--divider-soft);
    border-radius: 20px;
    font-size: 0.75rem;
    color: var(--zwart);
}
.funnel-ds-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Funnel result bar (bottom of detail) */
.funnel-result-bar {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    background: var(--creme-dark);
    border-radius: var(--radius-sm);
    margin-top: var(--sp-4);
    border: 1px solid rgba(0,0,0,0.06);
}
.funnel-result-goal,
.funnel-result-actual {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex: 1;
}
.funnel-result-goal .icon { color: var(--geel); }
.funnel-result-actual .icon { color: var(--groen); }
.funnel-result-label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--grijs);
    margin-bottom: 2px;
}
.funnel-result-arrow {
    color: var(--grijs);
    opacity: 0.4;
}
.funnel-target-value {
    color: var(--oranje);
    font-weight: 600;
}

.funnel-steps-preview {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}
.funnel-step-preview {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 0.82rem;
}
.funnel-step-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.funnel-step-arrow {
    display: flex;
    justify-content: center;
    color: var(--grijs-licht);
}
.funnel-step-arrow .icon { font-size: 14px; }

/* Funnel builder (detail view) */
.funnel-builder {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 640px;
    margin: 0 auto;
}

.funnel-step-card {
    display: flex;
    width: 100%;
    background: var(--wit);
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius);
    overflow: hidden;
    transition: box-shadow 0.15s;
    cursor: grab;
}
.funnel-step-card:hover { box-shadow: var(--shadow-sm); }
.funnel-step-card.drag-active { opacity: 0.4; }
.funnel-step-card.drag-over { border-color: var(--oranje); box-shadow: 0 0 0 2px rgba(232,124,42,0.3); }

.funnel-step-phase {
    width: 5px;
    flex-shrink: 0;
}
.funnel-step-content {
    flex: 1;
    padding: var(--sp-3) var(--sp-4);
}
.funnel-step-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--sp-2);
}
.funnel-step-actions {
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.12s;
}
.funnel-step-card:hover .funnel-step-actions { opacity: 1; }

.funnel-step-subs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}
.pill-xs {
    font-size: 0.65rem;
    padding: 1px 6px;
    border-radius: 8px;
}
.pill-muted {
    background: var(--creme-dark);
    color: var(--grijs);
}

.funnel-step-metrics {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}
.funnel-metric {
    display: flex;
    flex-direction: column;
    min-width: 80px;
}
.funnel-metric-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--grijs-licht);
}
.funnel-metric-value {
    font-size: 1.1rem;
    font-weight: 600;
}
.funnel-metric-target {
    font-size: 0.72rem;
    color: var(--grijs-licht);
}
.funnel-metric-arrow { color: var(--grijs-licht); }

/* Funnel step KPI block (single metric per step) */
.funnel-step-kpi {
    margin-top: var(--sp-2);
}
.funnel-kpi-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--grijs);
    font-weight: 600;
    display: block;
    margin-bottom: var(--sp-1);
}
.funnel-kpi-numbers {
    display: flex;
    align-items: flex-end;
    gap: var(--sp-4);
}
.funnel-kpi-col {
    display: flex;
    flex-direction: column;
}
.funnel-kpi-sublabel {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--grijs-licht);
}
.funnel-kpi-value {
    font-size: 1.2rem;
    font-weight: 700;
}
.funnel-kpi-target { color: var(--grijs); }
.funnel-kpi-actual { color: var(--zwart); }
.funnel-conv-warn {
    background: rgba(232,124,42,0.12);
    color: var(--oranje);
}
.funnel-result-conv {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding-left: var(--sp-3);
    border-left: 1px solid rgba(0,0,0,0.06);
}

/* Funnel KPI table in step card */
/* Channel table (simplified funnel step view) */
.funnel-channel-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; margin-top: var(--sp-2); }
.funnel-channel-table th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--grijs); font-weight: 600; padding: var(--sp-1) var(--sp-2); border-bottom: 1px solid var(--divider-soft); }
.funnel-channel-table th.text-right { text-align: right; }
.funnel-channel-table td { padding: var(--sp-1) var(--sp-2); border-bottom: 1px solid var(--creme); }
.funnel-channel-table td.text-right { text-align: right; }
.funnel-channel-total td { border-top: 2px solid var(--creme-dark); border-bottom: none; font-weight: 600; }

.funnel-kpi-table {
    width: 100%;
    margin-top: var(--sp-2);
    font-size: 0.8rem;
    border-collapse: collapse;
}
.funnel-kpi-table th {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--grijs-licht);
    font-weight: 600;
    padding: 2px 6px;
    border-bottom: 1px solid var(--divider-soft);
    text-align: left;
}
.funnel-kpi-table td {
    padding: 4px 6px;
    border-bottom: 1px solid var(--creme);
}
.funnel-kpi-table .text-right { text-align: right; }
.funnel-kpi-primary td { background: rgba(232,184,74,0.06); }
.funnel-kpi-primary td:first-child { font-weight: 600; }

/* Step KPI row in modal */
.step-kpi-row {
    padding: var(--sp-1);
    background: var(--surface-alt);
    border-radius: var(--radius-sm);
}
.step-kpi-row .form-input-sm,
.step-kpi-row .form-select-sm {
    font-size: 0.8rem;
    padding: 4px 8px;
    height: auto;
}

/* Conversion badge between in/out in step card */
.funnel-metric-conv {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: var(--grijs-licht);
}
.funnel-conv-badge {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}
.funnel-conv-actual {
    background: rgba(124,183,123,0.15);
    color: #4a8f49;
}
.funnel-conv-target {
    background: rgba(232,184,74,0.12);
    color: #b8920d;
}

.funnel-connector-rate-target {
    background: rgba(232,184,74,0.12) !important;
    color: #b8920d !important;
}

.funnel-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--sp-1) 0;
}
.funnel-connector-line {
    width: 2px;
    height: 20px;
    background: var(--creme-dark);
}
.funnel-connector-rate {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--groen);
    background: var(--groen-light);
    padding: 1px 8px;
    border-radius: 10px;
}

.funnel-empty {
    text-align: center;
    padding: var(--sp-8) var(--sp-4);
}

/* ── Funnel step type badges ── */
.funnel-step-type {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px var(--sp-2);
    border-radius: 3px;
    display: inline-block;
}
.funnel-step-type-instroom { background: var(--oranje); color: white; }
.funnel-step-type-doorstroom { background: var(--geel); color: var(--zwart); }
.funnel-step-type-conversie { background: var(--groen); color: white; }

/* ── ROAS result bar ── */
.funnel-roas-bar {
    background: var(--zwart);
    color: white;
    border-radius: var(--radius-sm);
    padding: var(--sp-4);
    margin-top: var(--sp-3);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-4);
    text-align: center;
}
.funnel-roas-value { font-size: 1.5rem; font-weight: 700; }
.funnel-roas-label { font-size: 0.7rem; text-transform: uppercase; color: rgba(255,255,255,0.6); letter-spacing: 0.04em; margin-bottom: 4px; }

/* ═══ SWIMLANE GRID (lanes per channel) ═══ */
.funnel-swimlane-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
}
.funnel-swimlane-headers {
    display: grid;
    grid-template-columns: 180px 1fr 1fr 1fr 140px;
    gap: var(--sp-2);
    padding: 0 var(--sp-3);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--grijs);
}
.funnel-swimlane-headers > div { padding: var(--sp-1) var(--sp-2); }
.funnel-swimlane-headers .col-header-instroom { color: var(--oranje); }
.funnel-swimlane-headers .col-header-doorstroom { color: var(--geel); }
.funnel-swimlane-headers .col-header-conversie { color: var(--groen); }
.funnel-swimlane-headers .col-header-revenue { text-align: right; color: var(--zwart); }

.funnel-lane-row {
    display: grid;
    grid-template-columns: 180px 1fr 1fr 1fr 140px;
    gap: var(--sp-2);
    align-items: stretch;
    background: var(--surface-alt);
    border-radius: var(--radius);
    padding: var(--sp-2);
    border-left: 4px solid var(--channel-color, var(--grijs));
}

.funnel-lane-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--sp-2);
    gap: var(--sp-1);
}
.funnel-lane-channel-label {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--zwart);
}
.funnel-lane-channel-source {
    font-size: 0.7rem;
    color: var(--grijs);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.funnel-lane-header-actions {
    display: flex;
    gap: 4px;
    margin-top: var(--sp-1);
}

.funnel-lane-cell {
    background: white;
    border-radius: var(--radius-sm);
    padding: var(--sp-2);
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    min-height: 100px;
    position: relative;
    border: 1px solid var(--divider-soft);
}
.funnel-lane-cell:hover { border-color: var(--channel-color, var(--grijs)); }
.funnel-lane-cell-empty {
    background: transparent;
    border: 2px dashed var(--divider-soft);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    color: var(--grijs);
    font-size: 0.8rem;
}
.funnel-lane-cell-empty:hover { border-color: var(--oranje); color: var(--oranje); }

.funnel-lane-cell-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-1);
    font-size: 0.8rem;
    font-weight: 600;
}
.funnel-lane-cell-actions {
    display: flex;
    gap: 2px;
    opacity: 0.5;
    transition: opacity 0.15s;
}
.funnel-lane-cell:hover .funnel-lane-cell-actions { opacity: 1; }

.funnel-lane-cell-kpis {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 0.8rem;
}
.funnel-lane-cell-kpi {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-1);
}
.funnel-lane-cell-kpi-label { color: var(--grijs); font-size: 0.75rem; }
.funnel-lane-cell-kpi-value { font-weight: 600; color: var(--zwart); }
.funnel-lane-cell-kpi.is-primary .funnel-lane-cell-kpi-value { color: var(--channel-color, var(--oranje)); font-size: 0.95rem; }

.funnel-lane-revenue {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    padding: var(--sp-2);
    gap: 3px;
}
.funnel-lane-revenue-amount {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--zwart);
}
.funnel-lane-revenue-roas {
    font-size: 0.75rem;
    color: var(--grijs);
}
.funnel-lane-revenue-cost {
    font-size: 0.7rem;
    color: var(--grijs);
}

.funnel-add-lane-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1);
    padding: var(--sp-3);
    background: transparent;
    border: 2px dashed var(--divider-soft);
    border-radius: var(--radius);
    color: var(--grijs);
    cursor: pointer;
    transition: all 0.15s;
    width: 100%;
    font-size: 0.9rem;
}
.funnel-add-lane-btn:hover {
    border-color: var(--oranje);
    color: var(--oranje);
    background: rgba(232, 124, 42, 0.05);
}

/* Period selector */
.funnel-period-selector {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    height: 44px;
    background: var(--surface-alt);
    padding: 0 var(--sp-2);
    border-radius: var(--radius-sm);
    border: 1px solid var(--divider-soft);
}
/* Period-selector v2: jaar+maand dropdowns (vervangt < > knoppen).
   Selects krijgen een minimale look zodat ze passen in de funnel-period-selector. */
.period-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    padding: 4px 22px 4px 6px;
    font: inherit;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--zwart);
    cursor: pointer;
    text-transform: capitalize;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3e%3cpath fill='%234A4A4A' d='M0 0l5 6 5-6z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 10px 6px;
}
.period-select:hover { background-color: rgba(0,0,0,0.03); }
.period-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.period-select:disabled { opacity: 0.5; cursor: not-allowed; }
.period-select-month { min-width: 92px; }
.period-select-year  { min-width: 62px; }
.funnel-period-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--zwart);
    min-width: 120px;
    justify-content: center;
    text-transform: capitalize;
}
.funnel-period-info {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    background: var(--surface-alt);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--groen);
    margin: var(--sp-2) 0;
    font-size: 0.85rem;
    color: var(--zwart);
}
.funnel-period-info-warning {
    border-left-color: var(--oranje);
    background: rgba(232, 124, 42, 0.05);
}
/* Periode is bevroren — sync mag deze data niet meer wijzigen. Subtiel
   lichtgroen gemarkeerd zodat duidelijk is dat het 'maand afgesloten' is. */
.funnel-period-info-frozen {
    border-left-color: var(--fg-success, #1e7a36);
    background: var(--bg-success, #e8f5e8);
    color: var(--fg-success, #1e7a36);
}
.funnel-period-info-frozen strong { color: var(--fg-success, #1e7a36); }

/* ─── Rapportage tab — conversies per bron ──────────────────────── */
.rapportage-page { display: flex; flex-direction: column; gap: var(--sp-3); }

/* KPI-tegels bovenaan — DS-card stijl, compact */
.rap-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--sp-2);
}
.rap-tile {
    background: var(--wit);
    border: 1px solid var(--border-subtle, #E8EAED);
    border-radius: var(--radius);
    padding: var(--sp-3);
}
.rap-tile-lbl {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    font-weight: 600;
}
.rap-tile-val {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

/* Tabel — DS-stijl, compact zoals Cogoo cluster-rij */
.rap-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    table-layout: fixed;
}
/* Vaste kolombreedtes — netjes uitgelijnd, geen wegglijdende cellen */
.rap-table colgroup col:nth-child(1) { width: auto; }
.rap-table colgroup col:nth-child(2) { width: 160px; }
.rap-table colgroup col:nth-child(3) { width: 100px; }
.rap-table colgroup col:nth-child(4) { width: 120px; }
.rap-table colgroup col:nth-child(5) { width: 110px; }
.rap-table colgroup col:nth-child(6) { width: 110px; }

.rap-table thead th {
    background: var(--accent);
    color: var(--text-inverse);
    text-align: left;
    padding: var(--sp-2) var(--sp-3);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}
.rap-table thead th.num,
.rap-table tbody td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.rap-table tbody td {
    padding: 6px var(--sp-3);
    border-bottom: 1px solid var(--border-subtle, #E8EAED);
    vertical-align: middle;
    line-height: 1.35;
}
.rap-table tbody tr:hover td { background: var(--surface-subtle, #FAF7F2); }
.rap-table tbody tr:last-child td { border-bottom: none; }

/* Source-cell: source + medium op één regel zodat de rij niet uitwaaiert */
.rap-source-row {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    min-width: 0;
}
.rap-source-link {
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-width: 0;
}
.rap-source-link:hover { text-decoration: underline; }
.rap-source-link > span:first-of-type {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rap-source-ext { opacity: 0.55; flex-shrink: 0; }
.rap-source-plain {
    color: var(--text-primary);
    font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0;
}
.rap-source-meta {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    white-space: nowrap;
    flex-shrink: 0;
}
.rap-source-meta::before { content: '· '; opacity: 0.5; margin-right: 2px; }

/* Channel-group pil — links uitgelijnd, compact */
.rap-channel-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--surface-subtle, #FAF7F2);
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 500;
    border: 1px solid var(--border-subtle, #E8EAED);
    white-space: nowrap;
}
/* Numerieke cellen subtieler maken — zwaarste cell is 'conversies' */
.rap-table tbody td.num { color: var(--text-secondary); }
.rap-table tbody td.num strong { color: var(--text-primary); font-weight: 600; }
.rap-table tbody td.num.zero { color: var(--text-tertiary); }

/* Platform-dot in geaggregeerde view — kleur van het platform (Meta blue,
   Google orange, ChatGPT green, etc.). */
.rap-platform-dot {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-right: var(--sp-2);
}

/* View-toggle: Per platform | Per bron — DS pill-stijl */
.rap-view-toggle {
    display: inline-flex;
    background: var(--surface-subtle, #FAF7F2);
    border: 1px solid var(--border-subtle, #E8EAED);
    border-radius: var(--radius);
    padding: 2px;
    gap: 2px;
}
.rap-view-btn {
    display: inline-flex; align-items: center; gap: 4px;
    border: none; background: transparent;
    padding: 4px 10px;
    border-radius: calc(var(--radius) - 2px);
    color: var(--text-secondary);
    font-size: 0.78rem; font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.rap-view-btn:hover { color: var(--text-primary); }
.rap-view-btn.is-active {
    background: var(--wit);
    color: var(--accent);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* ═══ TRECHTER LAYOUT (lanes → shared steps → revenue) ═══ */
.funnel-trechter-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
}
.funnel-trechter-headers {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 0.8fr;
    gap: var(--sp-2);
    padding: 0 var(--sp-2);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--grijs);
}
.col-h { padding: var(--sp-1) var(--sp-2); }
.col-h-instroom { color: var(--oranje); }
.col-h-doorstroom { color: var(--geel); }
.col-h-conversie { color: var(--groen); }
.col-h-revenue { text-align: right; color: var(--zwart); }

.funnel-trechter-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 0.8fr;
    gap: var(--sp-5);
    align-items: stretch;
}
/* Arrow from each lane → landing */
.funnel-lane-instroom {
    position: relative;
}
.funnel-lane-instroom::after {
    content: '';
    position: absolute;
    right: calc(-1 * var(--sp-5));
    top: 50%;
    transform: translateY(-50%);
    width: var(--sp-5);
    height: 2px;
    background: var(--channel-color, var(--grijs));
    z-index: 1;
}
.funnel-lane-instroom::before {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid var(--channel-color, var(--grijs));
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    z-index: 2;
}
/* Arrow from landing → conversie */
.funnel-trechter-shared {
    position: relative;
}
.funnel-trechter-shared-landing::after {
    content: '';
    position: absolute;
    right: calc(-1 * var(--sp-5));
    top: 50%;
    transform: translateY(-50%);
    width: var(--sp-5);
    height: 2px;
    background: var(--geel);
    z-index: 1;
}
.funnel-trechter-shared-landing::before {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid var(--geel);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    z-index: 2;
}

.funnel-trechter-lanes {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.funnel-lane-instroom {
    background: white;
    border-radius: var(--radius);
    padding: var(--sp-3);
    border-left: 4px solid var(--channel-color, var(--grijs));
    border-top: 1px solid var(--divider-soft);
    border-right: 1px solid var(--divider-soft);
    border-bottom: 1px solid var(--divider-soft);
}
.funnel-lane-instroom-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
}
.funnel-lane-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.funnel-lane-drag-handle {
    cursor: grab;
    color: var(--grijs);
    display: inline-flex;
    opacity: 0.4;
    transition: opacity 0.15s;
}
.funnel-lane-drag-handle:hover { opacity: 1; }
.funnel-lane-drag-handle:active { cursor: grabbing; }

/* Dragging states */
.funnel-lane-instroom.lane-dragging {
    opacity: 0.4;
    transform: scale(0.98);
}
.funnel-lane-instroom.lane-drag-over {
    border-top: 3px solid var(--oranje);
    box-shadow: 0 -2px 8px rgba(232, 124, 42, 0.2);
}
.funnel-lane-channel-label {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--zwart);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.funnel-lane-channel-source {
    font-size: 0.7rem;
    color: var(--grijs);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.funnel-lane-actions {
    display: flex;
    gap: 2px;
    opacity: 0.85;
    transition: opacity 0.15s;
}
.funnel-lane-instroom:hover .funnel-lane-actions { opacity: 1; }

.funnel-lane-instroom-metrics {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: var(--sp-3);
    align-items: flex-end;
}
.funnel-metric-primary .funnel-metric-value {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
}
.funnel-metric-secondary .funnel-metric-value-sm {
    font-size: 1rem;
    font-weight: 600;
    color: var(--zwart);
}
.funnel-metric-cost-editable {
    cursor: pointer;
    padding: 4px 6px;
    border-radius: var(--radius-sm);
    transition: background 0.15s;
}
.funnel-metric-cost-editable:hover {
    background: var(--surface-alt);
}
.funnel-metric-cost-editable .funnel-metric-label {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* Target badges (lanes + shared steps) */
.funnel-lane-target-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: var(--sp-1);
    margin-bottom: var(--sp-2);
    width: 100%;
    box-sizing: border-box;
}
.funnel-lane-target-bar.target-achieved {
    background: rgba(124, 183, 123, 0.15);
    color: var(--groen);
}
.funnel-lane-target-bar.target-missed {
    background: rgba(212, 99, 58, 0.1);
    color: var(--rood);
}
.funnel-lane-target-bar .target-icon {
    display: inline-flex;
}
.funnel-lane-target-bar .target-pct {
    margin-left: auto;
    font-weight: 700;
}
.funnel-shared-target {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 600;
    margin-top: 4px;
    width: 100%;
    box-sizing: border-box;
}
.funnel-shared-target.target-achieved {
    background: rgba(124, 183, 123, 0.15);
    color: var(--groen);
}
.funnel-shared-target.target-missed {
    background: rgba(212, 99, 58, 0.1);
    color: var(--rood);
}
.funnel-revenue-target {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 600;
    width: 100%;
    box-sizing: border-box;
}
.funnel-revenue-target.target-achieved {
    background: rgba(124, 183, 123, 0.15);
    color: var(--groen);
}
.funnel-revenue-target.target-missed {
    background: rgba(212, 99, 58, 0.1);
    color: var(--rood);
}
.funnel-metric-label {
    font-size: 0.7rem;
    color: var(--grijs);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 2px;
}

.funnel-trechter-shared {
    display: flex;
}
.funnel-shared-card {
    background: white;
    border-radius: var(--radius);
    padding: var(--sp-3);
    border: 1px solid var(--divider-soft);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.funnel-shared-card-empty {
    border-style: dashed;
    align-items: center;
    justify-content: center;
    text-align: center;
    opacity: 0.7;
}
.funnel-shared-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-1);
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--divider-soft);
}
.funnel-shared-actions { display: flex; gap: 2px; opacity: 0.6; }
.funnel-shared-card:hover .funnel-shared-actions { opacity: 1; }
.funnel-shared-pages {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: var(--sp-1) 0;
    border-bottom: 1px solid var(--divider-soft);
}
.funnel-shared-page-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: var(--surface-alt);
    padding: 2px var(--sp-2);
    border-radius: 12px;
    font-size: 0.75rem;
    color: var(--zwart);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.funnel-shared-events {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: var(--sp-1) 0;
}
.funnel-shared-event-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: rgba(124, 183, 123, 0.15);
    color: var(--groen);
    padding: 2px var(--sp-2);
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 600;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.funnel-shared-main {
    text-align: center;
    padding: var(--sp-2) 0;
}
.funnel-shared-main-label {
    font-size: 0.75rem;
    color: var(--grijs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.funnel-shared-main-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--zwart);
}
.funnel-shared-channels {
    padding-top: var(--sp-1);
    border-top: 1px solid var(--divider-soft);
}
.funnel-shared-channel-row {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
}

.funnel-trechter-revenue-col {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    align-items: stretch;
}
.funnel-lane-revenue-block {
    background: white;
    border-radius: var(--radius-sm);
    padding: var(--sp-2);
    border-right: 4px solid var(--channel-color, var(--grijs));
    border-top: 1px solid var(--divider-soft);
    border-left: 1px solid var(--divider-soft);
    border-bottom: 1px solid var(--divider-soft);
    text-align: right;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.funnel-revenue-channel {
    font-size: 0.95rem;
    color: var(--zwart);
    margin-bottom: var(--sp-1);
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.funnel-revenue-amount {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--zwart);
}
.funnel-revenue-roas-sm {
    font-size: 0.75rem;
    font-weight: 600;
}

/* Row-based lane layout (instroom + revenue) */
.funnel-lane-rows {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: var(--sp-1);
}
.funnel-lane-row-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-2);
    padding: 4px 6px;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    min-height: 24px;
}
.funnel-lane-row-item.funnel-metric-cost-editable {
    cursor: pointer;
    transition: background 0.15s;
}
.funnel-lane-row-item.funnel-metric-cost-editable:hover {
    background: var(--surface-alt);
}
.funnel-lane-row-label {
    color: var(--grijs);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
}
.funnel-lane-row-value {
    font-weight: 700;
    color: var(--zwart);
    display: flex;
    align-items: center;
    gap: 6px;
    text-align: right;
    white-space: nowrap;
}
.funnel-lane-row-pct {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 8px;
    background: rgba(0,0,0,0.04);
}
.funnel-lane-row-target-pill {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(0,0,0,0.06);
    color: var(--zwart);
}
/* AI Visibility */
.ai-prompt-list { margin-top: var(--sp-3); }
.ai-prompt-item {
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius);
    padding: var(--sp-3);
    margin-bottom: var(--sp-2);
    background: white;
}
.ai-prompt-header {
    display: flex;
    gap: var(--sp-2);
    align-items: flex-start;
}
.ai-prompt-text {
    font-weight: 600;
    color: var(--zwart);
    font-size: 0.95rem;
    margin-bottom: 4px;
}
.ai-prompt-meta {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
    flex-wrap: wrap;
    font-size: 0.78rem;
    color: var(--grijs);
}
.ai-prompt-cat {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 6px;
    background: rgba(232, 124, 42, 0.1);
    color: var(--oranje);
    border-radius: 8px;
    font-weight: 600;
}
.ai-prompt-runs {
    margin-top: var(--sp-2);
    padding-top: var(--sp-2);
    border-top: 1px dashed var(--divider-soft);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.ai-prompt-run {
    background: var(--surface-alt);
    padding: var(--sp-2);
    border-radius: var(--radius-sm);
}
.ai-run-header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    font-size: 0.82rem;
}
.ai-engine-badge {
    background: var(--zwart);
    color: white;
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.ai-mention-yes {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--groen);
    font-weight: 600;
}
.ai-mention-no {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--rood);
    font-weight: 600;
}
.ai-competitors {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}
.ai-competitor-chip {
    background: rgba(0,0,0,0.05);
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 0.72rem;
    color: var(--zwart);
}
.ai-response-preview {
    margin-top: var(--sp-2);
    padding: var(--sp-2);
    background: white;
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    color: var(--grijs);
    white-space: pre-wrap;
}
.ai-prompt-no-runs {
    margin-top: var(--sp-2);
    color: var(--grijs-licht);
    font-size: 0.82rem;
    font-style: italic;
}

/* SEO view-tabs (Keywords vs Pagina's) */
.seo-view-tabs {
    display: flex;
    gap: 2px;
    margin: var(--sp-2) 0;
    border-bottom: 1px solid var(--divider-soft);
}
.seo-view-tab {
    background: none;
    border: none;
    padding: var(--sp-2) var(--sp-3);
    font-size: 0.88rem;
    color: var(--grijs);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
}
.seo-view-tab:hover { color: var(--zwart); }
.seo-view-tab-active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* Pages overview — list met tussenlijntjes */
.seo-pages-summary {
    font-size: 0.85rem;
    color: var(--grijs);
    padding: var(--sp-2) 0;
}
.seo-pages-list {
    border-top: 1px solid var(--divider-soft);
}
.seo-page-item {
    display: flex;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-2);
    border-bottom: 1px solid var(--divider-soft);
}
.seo-page-item:hover {
    background: var(--surface-alt);
}
.seo-page-rank {
    flex-shrink: 0;
    width: 36px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--grijs-licht);
    padding-top: 2px;
}
.seo-page-main { flex: 1; min-width: 0; }
.seo-page-url {
    font-family: ui-monospace, monospace;
    font-weight: 700;
    color: var(--zwart);
    font-size: 0.92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.seo-page-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    margin-top: 4px;
    font-size: 0.82rem;
    color: var(--grijs);
}
.seo-page-stats strong { color: var(--zwart); }
.seo-stat-divider { color: var(--creme-dark); }
.seo-page-keywords {
    margin-top: var(--sp-2);
    padding-top: var(--sp-2);
    border-top: 1px dashed var(--divider-soft);
}
.seo-page-keywords-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--grijs);
    font-weight: 600;
    margin-bottom: 4px;
}
.seo-page-keywords-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.seo-page-keywords-list li {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: var(--sp-3);
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px dotted var(--creme-dark);
    font-size: 0.82rem;
}
.seo-page-keywords-list li:last-child { border-bottom: none; }
.seo-kw-name { color: var(--zwart); }
.seo-kw-clicks { color: var(--grijs); }
.seo-kw-clicks strong { color: var(--zwart); }
.seo-kw-impr { color: var(--grijs-licht); font-size: 0.75rem; }
.seo-kw-pos { font-weight: 600; font-size: 0.78rem; }

/* SEO filter-bar + bulk-bar */
.seo-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    align-items: center;
    background: var(--surface-alt);
    padding: var(--sp-2);
    border-radius: var(--radius-sm);
    margin: var(--sp-2) 0;
}
.seo-filter-select {
    padding: 4px 8px;
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius-sm);
    background: white;
    font-size: 0.82rem;
    cursor: pointer;
}
.seo-filter-check {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.82rem;
    cursor: pointer;
}
.seo-bulk-bar {
    display: none;
    align-items: center;
    gap: var(--sp-2);
    background: rgba(232,124,42,0.1);
    border: 1px solid var(--oranje);
    padding: var(--sp-2);
    border-radius: var(--radius-sm);
    margin-bottom: var(--sp-2);
}

/* SEO role badges */
.seo-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}
.seo-role-primair {
    background: rgba(232, 124, 42, 0.18);
    color: var(--oranje, #E87C2A);
    font-weight: 700;
}
.seo-role-hoofd {
    background: rgba(124, 183, 123, 0.2);
    color: var(--groen);
    font-weight: 700;
}
.seo-role-steun {
    background: rgba(74, 144, 226, 0.15);
    color: #4A90E2;
}
.seo-role-kandidaat {
    background: rgba(232, 184, 74, 0.18);
    color: #8a6d1f;
}
.seo-role-geen {
    color: var(--grijs-licht);
    font-size: 0.8rem;
}

/* SEO strategy status badges */
.seo-status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}
.seo-status-loopt { background: rgba(124, 183, 123, 0.15); color: var(--groen); }
.seo-status-kansrijk { background: rgba(232, 124, 42, 0.15); color: var(--oranje); }
.seo-status-later { background: rgba(139, 92, 246, 0.12); color: #8B5CF6; }
.seo-status-laag { background: rgba(0,0,0,0.05); color: var(--grijs); }

/* Pillar row highlight */
.seo-row-pillar {
    border-left: 3px solid var(--groen);
    background: rgba(124, 183, 123, 0.04);
}
.seo-row-pillar:hover {
    background: rgba(124, 183, 123, 0.08);
}
.seo-row-pillar td:nth-child(2) strong {
    color: var(--groen);
}

/* Branded / non-branded badges in SEO keyword lijst */
.seo-branded-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 700;
    background: rgba(232, 124, 42, 0.15);
    color: var(--oranje);
    white-space: nowrap;
}
.seo-nonbranded-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 600;
    background: rgba(124, 183, 123, 0.12);
    color: var(--groen);
    white-space: nowrap;
}
.seo-row-branded {
    background: rgba(232, 124, 42, 0.04);
}
.seo-row-branded:hover {
    background: rgba(232, 124, 42, 0.08);
}
.seo-row-discovered {
    background: rgba(0,0,0,0.02);
}
.seo-row-discovered:hover {
    background: rgba(0,0,0,0.04);
}

/* Status pills — groen/geel/rood met bijpassende achtergrond */
.pill-achieved {
    background: rgba(124, 183, 123, 0.18);
    color: var(--groen);
}
.pill-close {
    background: rgba(232, 184, 74, 0.18);
    color: var(--geel);
}
.pill-missed {
    background: rgba(212, 99, 58, 0.15);
    color: var(--rood);
}
.pill-neutral {
    background: rgba(0,0,0,0.04);
    color: var(--grijs);
}
/* ROAS als pill (dezelfde stijl) */
.funnel-roas-pill {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
}
/* Section backgrounds — volledig gekleurd bij target-status */
.journey-lane-section.status-achieved {
    background: rgba(124, 183, 123, 0.12);
}
.journey-lane-section.status-close {
    background: rgba(232, 184, 74, 0.12);
}
.journey-lane-section.status-missed {
    background: rgba(212, 99, 58, 0.1);
}
.funnel-lane-row-realized {
    background: rgba(0,0,0,0.02);
}
/* Sub-rijen per event in de Leadwaarde-uitsplitsing (telefoon, formulier, etc.).
   Iets ingesprongen + kleiner zodat het visueel duidelijk is dat het opbouw is
   naar het totaal eronder. */
.funnel-lane-row-event {
    padding-left: var(--sp-3);
    font-size: 0.85rem;
    opacity: 0.9;
}
.funnel-lane-row-event .funnel-lane-row-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.funnel-lane-row-event .funnel-lane-row-value {
    color: var(--ink, #111);
}
.funnel-lane-revenue-block .funnel-lane-row-item {
    justify-content: space-between;
}

/* Funnel totalen in de Conversie kaart */
.funnel-shared-totals {
    margin-top: var(--sp-2);
    padding-top: var(--sp-2);
    border-top: 2px solid var(--creme-dark);
}
.funnel-shared-totals-title {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--grijs);
    font-weight: 700;
    margin-bottom: 4px;
}

/* Werkelijke kanaal-attributie onder Funnel-totaal — alleen lead-funnel modus */
.funnel-channel-attribution {
    margin-top: var(--sp-3);
    padding-top: var(--sp-2);
    border-top: 1px dashed var(--creme-dark);
}
.funnel-channel-attribution-title {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--grijs);
    font-weight: 700;
    margin-bottom: 6px;
}
.funnel-channel-attribution-title .text-xs { text-transform: none; letter-spacing: 0; font-weight: 500; }
.funnel-channel-attribution-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}
.funnel-channel-attribution-table td {
    padding: 3px 4px;
    border-top: 1px solid var(--creme);
    vertical-align: middle;
}
.funnel-channel-attribution-table tr:first-child td { border-top: none; }
.funnel-channel-attribution-table .ch-name {
    color: var(--text-primary);
    white-space: nowrap;
    padding-right: 10px;
    width: 1%; /* zo smal mogelijk; nowrap zorgt dat de volledige naam past */
    font-weight: 500;
}
.funnel-channel-attribution-table .ch-bar { width: auto; min-width: 80px; }
.funnel-channel-attribution-table .ch-bar-fill {
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, #6aa5d4, #8fbede);
    min-width: 2px;
}
.funnel-channel-attribution-table .ch-num,
.funnel-channel-attribution-table .ch-pct {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding-left: 8px;
}
.funnel-channel-attribution-table .ch-pct {
    color: var(--text-secondary);
    font-size: 0.72rem;
    min-width: 36px;
}

/* Waarschuwing op Google Ads / Meta Ads-lanes: kosten zijn account-totaal,
   niet funnel-specifiek. Gele toon zodat het opvalt zonder paniekerig te zijn. */
.funnel-lane-cost-warning {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    background: #fdf3dc;
    border: 1px solid #f0d99a;
    color: #7a5a14;
    font-size: 0.72rem;
    line-height: 1.3;
}
.funnel-lane-cost-warning.is-clickable {
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.funnel-lane-cost-warning.is-clickable:hover {
    background: #fbe9b5;
    border-color: #e5c46f;
}
.funnel-lane-cost-warning-text { flex: 1; min-width: 0; }
.funnel-lane-cost-warning-cta { opacity: 0.6; }
.funnel-lane-cost-warning.is-clickable:hover .funnel-lane-cost-warning-cta { opacity: 1; }

/* Cross-funnel kanaal-investerings sectie: account-totaal Ads/Meta tegen
   GA4-omzet over alle funnels. Verklaart de "echte" ROAS van een gedeeld kanaal. */
.cross-funnel-channel-investment {
    margin-top: var(--sp-5);
    padding: var(--sp-4);
    background: var(--creme);
    border-radius: var(--radius);
    border: 1px solid var(--creme-dark);
}
.cross-funnel-channel-investment-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-2);
    flex-wrap: wrap;
}
.cross-funnel-channel-investment-head h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.cross-funnel-channel-investment-intro {
    margin: 4px 0 var(--sp-3) 0;
    line-height: 1.4;
}
.cross-funnel-platform-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--sp-3);
}
.cross-funnel-platform-card {
    background: var(--wit);
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius-md, 8px);
    padding: var(--sp-3);
}
.cross-funnel-platform-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: var(--sp-2);
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--creme-dark);
}
.cross-funnel-platform-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cross-funnel-platform-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
}
.cross-funnel-platform-row-label {
    color: var(--text-secondary);
}
.cross-funnel-platform-row-value {
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.cross-funnel-platform-row-roas .cross-funnel-platform-row-label {
    font-weight: 600;
    color: var(--text-primary);
}
/* Sub-rijen voor de uitsplitsing e-commerce + lead onder Account-investering */
.cross-funnel-platform-row-revenue-sub {
    font-size: 0.78rem;
    color: var(--text-secondary);
    padding-left: 8px;
}
.cross-funnel-platform-row-revenue-sub .cross-funnel-platform-row-value {
    font-weight: 500;
    color: var(--text-secondary);
}
/* Subtotaal totaal-opbrengst — visuele scheiding van sub-rijen */
.cross-funnel-platform-row-revenue-total {
    border-top: 1px solid var(--creme-dark);
    padding-top: 6px;
    margin-top: 2px;
}
.cross-funnel-platform-row-revenue-total .cross-funnel-platform-row-label {
    font-weight: 600;
    color: var(--text-primary);
}

/* URL(s) onder de Landingspagina / Conversie kop */
.funnel-shared-combined-urls {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 2px;
    margin-bottom: var(--sp-1);
}
.funnel-shared-combined-url {
    font-size: 0.75rem;
    color: var(--groen);
    font-family: 'Courier New', monospace;
    font-weight: 600;
    padding: 3px 8px;
    background: rgba(124, 183, 123, 0.1);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Meetpunten (pagina's + events) in shared cards */
.funnel-shared-meetpunten {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: var(--sp-1);
    padding-top: var(--sp-1);
    border-top: 1px dashed var(--divider-soft);
}
.funnel-shared-meetpunt-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.funnel-shared-meetpunt-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--grijs);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 3px;
}
.funnel-shared-meetpunt-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}
.funnel-shared-page-chip {
    display: inline-block;
    background: rgba(124, 183, 123, 0.12);
    color: var(--groen);
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 600;
    font-family: 'Courier New', monospace;
}
.funnel-shared-event-chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: rgba(232, 124, 42, 0.12);
    color: var(--oranje);
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 600;
}
.funnel-shared-events-inline {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3px;
    margin-top: 4px;
}
.funnel-shared-page-chip-more {
    background: var(--creme-dark);
    color: var(--grijs);
}
.funnel-shared-meetpunt-empty {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.funnel-lane-revenue-total {
    background: var(--zwart);
    color: white;
    border-radius: var(--radius-sm);
    padding: var(--sp-2);
    text-align: right;
    margin-top: var(--sp-1);
}
.funnel-revenue-total-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    letter-spacing: 0.04em;
}
.funnel-revenue-total-amount {
    font-size: 1.4rem;
    font-weight: 700;
}
.funnel-revenue-roas { font-size: 0.8rem; font-weight: 600; }

/* ═══ KANALEN TAB (auto-overzicht uit funnels) ═══ */
.kanalen-summary-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}
.kanalen-summary-card {
    background: white;
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius);
    padding: var(--sp-3);
}
.kanalen-summary-label {
    font-size: 0.72rem;
    color: var(--grijs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}
.kanalen-summary-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--zwart);
}
.kanalen-lijst {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}
.kanaal-card {
    background: white;
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius);
    padding: var(--sp-3);
}
.kanaal-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--sp-2);
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--divider-soft);
}
.kanaal-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}
.kanaal-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}
.kanaal-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--zwart);
}
.kanaal-card-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-3);
    padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--divider-soft);
    margin-bottom: var(--sp-2);
}
.kanaal-metric-label {
    font-size: 0.7rem;
    color: var(--grijs);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 2px;
}
.kanaal-metric-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--zwart);
}
.kanaal-funnels {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.kanaal-funnel-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px var(--sp-2);
    background: var(--surface-alt);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s;
}
.kanaal-funnel-row:hover {
    background: rgba(232, 124, 42, 0.1);
}

/* ═══ SEO KEYWORDS TAB ═══ */
.seo-summary-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}
.seo-summary-card {
    background: white;
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius);
    padding: var(--sp-3);
}
.seo-summary-label {
    font-size: 0.75rem;
    color: var(--grijs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}
.seo-summary-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--zwart);
}
.seo-keyword-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--divider-soft);
    font-size: 0.9rem;
}
.seo-keyword-table thead th {
    background: var(--accent);
    text-align: left;
    padding: var(--sp-2) var(--sp-3);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-inverse);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: none;
    white-space: nowrap;
}
.seo-keyword-table thead th.text-right,
.seo-keyword-table tbody td.text-right { text-align: right; }
.seo-keyword-table thead th.text-center,
.seo-keyword-table tbody td.text-center { text-align: center; }
.seo-keyword-table tbody td {
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--creme);
    vertical-align: middle;
}
.seo-keyword-table thead {
    position: sticky;
    top: 0;
    z-index: 5;
}
/* Sort-headers: hover = subtiele opacity-shift op de blauwe balk; icons in wit */
.seo-sort-header {
    cursor: pointer;
    user-select: none;
    transition: opacity 0.15s;
}
.seo-sort-header:hover { opacity: 0.85; }
.seo-sort-icon {
    display: inline-flex;
    align-items: center;
    margin-left: 2px;
    vertical-align: middle;
}
.seo-keyword-table thead th .seo-sort-idle { color: rgba(255,255,255,0.45); opacity: 1; }
.seo-keyword-table thead th .seo-sort-active { color: var(--text-inverse); }
.seo-keyword-table tbody tr:last-child td {
    border-bottom: none;
}
.seo-keyword-table tbody tr:hover {
    background: var(--surface-alt);
}

/* ═══ SEO V2 — Semrush-style redesign ═══ */

/* KPI strip — 5 metrics top of page */
.seo-kpi-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
}
.seo-kpi-card {
    background: white;
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius);
    padding: var(--sp-3);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.seo-kpi-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--grijs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 4px;
}
.seo-kpi-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--zwart);
    line-height: 1.1;
}
.seo-kpi-unit {
    font-size: 1rem;
    font-weight: 600;
    color: var(--grijs);
}
.seo-kpi-sub {
    font-size: 0.75rem;
    color: var(--grijs);
}
.kpi-diff {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    margin-top: 4px;
    width: fit-content;
}
.kpi-diff-up    { background: rgba(124,183,123,0.15); color: var(--groen); }
.kpi-diff-down  { background: rgba(212,99,58,0.15);  color: var(--rood);  }
.kpi-diff-neutral { background: var(--surface-alt); color: var(--grijs); }

/* Filter zones */
.seo-filter-zones {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
    padding: var(--sp-2);
    background: white;
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius);
}
.seo-filter-zone {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
    align-items: center;
}
.seo-filter-zone-primary { gap: 6px; }
.seo-filter-zone-advanced {
    padding-top: var(--sp-2);
    border-top: 1px dashed var(--divider-soft);
}
.seo-filter-zone-meta {
    padding-top: var(--sp-2);
    border-top: 1px solid var(--creme);
    font-size: 0.85rem;
}
.seo-filter-status { color: var(--grijs); }

/* Search box */
.seo-search-box {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--surface-alt);
    border: 1px solid var(--divider-soft);
    border-radius: 6px;
    padding: 4px 8px;
    min-width: 220px;
    flex: 1;
    max-width: 320px;
}
.seo-search-box .icon { color: var(--grijs); }
.seo-search-input {
    border: none;
    background: transparent;
    outline: none;
    flex: 1;
    font-size: 0.9rem;
    color: var(--zwart);
}
.seo-search-input::placeholder { color: var(--grijs); }

/* Snel-filter chips */
.seo-filter-chips { gap: 6px; }
.seo-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: white;
    border: 1px solid var(--divider-soft);
    color: var(--zwart);
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s;
    font-weight: 500;
}
.seo-chip:hover {
    background: var(--accent-light);
    border-color: var(--accent);
}
.seo-chip-active {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

/* Acties dropdown */
.seo-actions-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    background: white;
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 100;
    min-width: 240px;
    flex-direction: column;
    padding: 4px;
}
.seo-action-item {
    background: none;
    border: none;
    text-align: left;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--zwart);
}
.seo-action-item:hover { background: var(--surface-alt); }

/* Compact table met sticky header binnen interne scroll-context.
   Wrapper heeft max-height + overflow-y:auto zodat lange keyword-lijsten
   binnen de wrapper scrollen i.p.v. de hele pagina. thead blijft sticky
   aan de top van die wrapper. */
.seo-table-wrapper {
    max-height: 75vh;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
    background: transparent;
    border: none;
}
/* SEO keyword-tabel — continue rijen-stijl (Cogoo cluster-list look).
   Eén afgeronde blauwe header bovenaan, daaronder een continue lijst
   van witte rijen met dunne dividers (geen gaps, geen per-row card-
   rand). Match met de Cogoo tv2-cluster-rij look. */
.seo-keyword-table-compact {
    width: 100%;
    max-width: 100%;
    border: none;
    font-size: 0.82rem;
    border-collapse: collapse;
    background: var(--wit);
    border-radius: 6px;
    overflow: hidden;
    table-layout: fixed;
}
/* Kolombreedtes in percentages — sommeren tot 100% zodat de tabel
   EXACT de wrapper-breedte vult, ongeacht viewport-grootte. */
.seo-keyword-table-compact thead th:nth-child(1),
.seo-keyword-table-compact tbody td:nth-child(1)  { width: 28%; }  /* KEYWORD */
.seo-keyword-table-compact thead th:nth-child(2),
.seo-keyword-table-compact tbody td:nth-child(2)  { width: 7%; }   /* VOL/MTH */
.seo-keyword-table-compact thead th:nth-child(3),
.seo-keyword-table-compact tbody td:nth-child(3)  { width: 6%; }   /* COMP */
.seo-keyword-table-compact thead th:nth-child(4),
.seo-keyword-table-compact tbody td:nth-child(4)  { width: 7%; }   /* IMPR */
.seo-keyword-table-compact thead th:nth-child(5),
.seo-keyword-table-compact tbody td:nth-child(5)  { width: 5%; }   /* CL */
.seo-keyword-table-compact thead th:nth-child(6),
.seo-keyword-table-compact tbody td:nth-child(6)  { width: 6%; }   /* CTR */
.seo-keyword-table-compact thead th:nth-child(7),
.seo-keyword-table-compact tbody td:nth-child(7)  { width: 8%; }   /* START POS */
.seo-keyword-table-compact thead th:nth-child(8),
.seo-keyword-table-compact tbody td:nth-child(8)  { width: 6%; }   /* POS */
.seo-keyword-table-compact thead th:nth-child(9),
.seo-keyword-table-compact tbody td:nth-child(9)  { width: 7%; }   /* Δ */
.seo-keyword-table-compact thead th:nth-child(10),
.seo-keyword-table-compact tbody td:nth-child(10) { width: 20%; }  /* TARGET */
/* KEYWORD-cel: ellipsis op de tekst-wrapper zodat lange keywords
   netjes afgekapt worden zonder dat de cel groeit. */
.seo-keyword-table-compact tbody td:first-child {
    overflow: hidden;
}
.seo-keyword-table-compact tbody td:first-child .seo-keyword-toggle {
    max-width: calc(100% - 56px);  /* ruimte voor star + label-mark */
    overflow: hidden;
    min-width: 0;
}
.seo-keyword-table-compact tbody td:first-child .seo-keyword-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    max-width: 100%;
    vertical-align: bottom;
}
.seo-keyword-table-compact thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}
.seo-keyword-table-compact thead th:first-child { border-radius: 6px 0 0 0; }
.seo-keyword-table-compact thead th:last-child  { border-radius: 0 6px 0 0; }
.seo-keyword-table-compact tbody td {
    padding: 8px var(--sp-3);
    background: var(--wit);
    border-bottom: 1px solid var(--border-subtle, #E8EAED);
    font-weight: 400;
    color: var(--text-primary);
    vertical-align: middle;
}
.seo-keyword-table-compact tbody tr:last-child td { border-bottom: none; }
.seo-keyword-table-compact tbody tr:hover td {
    background: var(--surface-subtle, #FAF7F2);
}
/* Detail-rijen onder een hoofd-rij (positie-historie etc.) — geen
   extra divider boven, blendt visueel met de hoofd-rij. */
.seo-keyword-table-compact tbody tr.seo-row-detail td {
    border-top: none;
}

/* Compacte label-mark — vervangt de oude Labels kolom. Klein rond
   knopje naast het sterretje: '+' wanneer geen label, vinkje wanneer
   gelabeld. Klikbaar → opent de dienst-koppel-modal. */
.seo-kw-label-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px;
    margin: 0 4px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--border-subtle, #E8EAED);
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    vertical-align: middle;
    font-family: inherit;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}
.seo-kw-label-mark .icon { font-size: 12px; }
.seo-kw-label-mark:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(26,115,232,0.06);
}
.seo-kw-label-mark.has-labels {
    background: rgba(26,115,232,0.08);
    border-color: rgba(26,115,232,0.25);
    color: var(--accent);
}
.seo-kw-label-mark.has-labels:hover {
    background: rgba(26,115,232,0.14);
    border-color: rgba(26,115,232,0.4);
}

.seo-keyword-text {
    font-weight: 400;
    color: var(--text-primary);
    line-height: 1.6;
    display: inline-block;
}
.seo-keyword-toggle {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    color: inherit;
}
.seo-keyword-toggle:hover .seo-keyword-text { color: var(--accent); }

/* Lichtgroene rij-tint voor keywords die in Cogoo als primair-keyword
   voor één of meer pagina's zijn gemarkeerd. Eén signaal, geen badge —
   de hele rij valt op zonder visuele dubbele markering. */
.seo-row-cogoo-pillar td {
    background: var(--groen-light, #e8f5e8) !important;
}
.seo-row-cogoo-pillar:hover td {
    background: #d8ecd8 !important;
}
.seo-priority-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-disabled);
    padding: 4px;
    margin-right: 2px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s, transform 0.15s;
    vertical-align: middle;
}
.seo-priority-toggle:hover {
    color: var(--geel);
    background: rgba(232, 184, 74, 0.1);
}
.seo-priority-toggle.is-priority {
    color: var(--geel);
}
.seo-priority-toggle.is-priority .icon {
    font-variation-settings: 'FILL' 1;
}

/* ═══════════════════════════════════════════
   Strategie-tab (zoekwoordstrategie)
   ═══════════════════════════════════════════ */
.strategy-status-strip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
}
.strategy-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--wit);
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.82rem;
    color: var(--text-secondary);
    transition: all 0.15s;
}
.strategy-chip:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.strategy-chip-active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--wit);
}
.strategy-chip-count {
    background: rgba(255,255,255,0.25);
    color: inherit;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 600;
}
.strategy-chip:not(.strategy-chip-active) .strategy-chip-count {
    background: var(--surface-alt);
    color: var(--text-tertiary);
}

.strategy-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius);
    background: var(--wit);
    max-height: 70vh;
    overflow-y: auto;
}
.strategy-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    font-size: 0.9rem;
}
.strategy-table th,
.strategy-table td {
    padding: var(--sp-2) var(--sp-3);
    text-align: left;
    border-bottom: 1px solid var(--divider-soft);
    vertical-align: middle;
}
.strategy-table thead {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--surface-alt);
    box-shadow: 0 1px 0 var(--divider-soft);
}
.strategy-table thead th {
    background: var(--surface-alt);
    font-weight: 700;
    color: var(--grijs);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.strategy-table tbody td { border-bottom: 1px solid var(--creme); }
.strategy-table tbody tr:last-child td { border-bottom: none; }
.strategy-row-main:hover { background: var(--surface-alt); }
.strategy-row-main.is-expanded { background: var(--accent-light); }
.strategy-cell-page {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.strategy-page-link {
    color: var(--text-primary);
    text-decoration: none;
    font-family: ui-monospace, monospace;
    font-size: 0.82rem;
}
.strategy-page-link:hover { color: var(--accent); }
.strategy-target-empty {
    color: var(--text-tertiary);
    font-style: italic;
    font-size: 0.82rem;
}
.strategy-target-set {
    font-family: ui-monospace, monospace;
    font-size: 0.82rem;
}

/* Status badges */
.strategy-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid;
}
.strat-status-aligned { background: rgba(124,183,123,0.12); color: #4a7d4a; border-color: rgba(124,183,123,0.25); }
.strat-status-mismatch { background: rgba(232,184,74,0.12); color: #8d6f1f; border-color: rgba(232,184,74,0.3); }
.strat-status-cannibalization { background: rgba(212,99,58,0.1); color: #a04a26; border-color: rgba(212,99,58,0.25); }
.strat-status-no-target { background: var(--accent-light); color: var(--accent-hover); border-color: rgba(26,115,232,0.2); }
.strat-status-not-ranked { background: var(--surface-alt); color: var(--text-tertiary); border-color: var(--divider-soft); }
.strat-status-no-data { background: var(--surface-alt); color: var(--text-disabled); border-color: var(--divider-soft); }

.strategy-priority-pill {
    color: var(--geel);
    margin-left: 4px;
}

/* Expanded detail */
.strategy-row-detail td {
    background: var(--surface-alt);
    padding: 0 !important;
    border-bottom: 1px solid var(--divider-soft);
}
.strategy-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
    padding: var(--sp-4);
}
.strategy-detail-section-full { grid-column: 1 / -1; }
.strategy-detail-title {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--sp-2);
    display: flex;
    align-items: center;
    gap: 6px;
}
.strategy-suggestions {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.strategy-suggestion {
    background: var(--wit);
    border: 1px solid var(--divider-soft);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    font-size: 0.85rem;
    color: var(--text-primary);
    line-height: 1.5;
}

.strategy-target-form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.strategy-suggestion-target {
    background: var(--accent-light);
    border: 1px solid rgba(26,115,232,0.2);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    font-size: 0.85rem;
}
.strategy-suggestion-target strong {
    font-family: ui-monospace, monospace;
    font-size: 0.82rem;
    color: var(--accent-hover);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.strategy-rankings-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    background: var(--wit);
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius-sm);
}
.strategy-rankings-table th,
.strategy-rankings-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--divider-soft);
    text-align: left;
}
.strategy-rankings-table thead th {
    background: var(--surface-alt);
    font-weight: 500;
    color: var(--text-tertiary);
    font-size: 0.7rem;
    text-transform: uppercase;
}
.strategy-rankings-table tbody tr:last-child td { border-bottom: none; }
.strategy-rankings-table .is-target-row { background: rgba(26,115,232,0.04); }

/* V2 — rankings-tabel in dezelfde stijl als de hoofd-keyword-tabel */
.strategy-rankings-table-v2 {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius);
    overflow: hidden;
    /* GEEN table-layout: fixed — laat de tabel zichzelf auto-verdelen op basis van inhoud */
    font-size: 0.9rem;
}
/* Geen vaste widths meer — Pagina krijgt natuurlijk alle ruimte, andere kolommen krimpen tot content */
.strategy-rankings-table-v2 .col-page   { width: 100%; }       /* dwingt pagina-cel max breedte op */
.strategy-rankings-table-v2 .col-metric { width: 1%; white-space: nowrap; }
.strategy-rankings-table-v2 .col-pos    { width: 1%; }
.strategy-rankings-table-v2 .col-tag    { width: 1%; white-space: nowrap; }
.strategy-rankings-table-v2 .col-action { width: 1%; white-space: nowrap; }

table.strategy-rankings-table-v2 thead th {
    background: var(--surface-alt);
    text-align: left;
    padding: 12px 16px !important;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--grijs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--divider-soft);
    white-space: nowrap;
    vertical-align: middle;
}
table.strategy-rankings-table-v2 thead th.text-right  { text-align: right; }
table.strategy-rankings-table-v2 thead th.text-center { text-align: center; }
table.strategy-rankings-table-v2 thead th.text-left   { text-align: left; }

table.strategy-rankings-table-v2 tbody td {
    padding: 8px 16px !important;         /* compacte regelhoogte, header-horizontaal voor kolom-alignment */
    border-bottom: 1px solid var(--creme);
    vertical-align: middle;
    line-height: 1.5;
}
.strategy-rankings-table-v2 tbody tr {
    transition: background 0.15s;
}
.strategy-rankings-table-v2 tbody tr:hover { background: var(--surface-alt); }
.strategy-rankings-table-v2 tbody tr:last-child td { border-bottom: none; }

.strategy-rankings-table-v2 tbody tr.is-target-row {
    background: #eaf3fe;
    box-shadow: inset 3px 0 0 var(--accent, #1a73e8);
}
.strategy-rankings-table-v2 tbody tr.is-target-row:hover { background: #d9e9fd; }
.strategy-rankings-table-v2 tbody tr.is-zero-clicks:not(.is-target-row) td {
    color: var(--text-muted, #9ca3af);
}

/* Numerieke cells: tabular-nums voor uitlijning */
.strategy-rankings-table-v2 td.text-right,
.strategy-rankings-table-v2 td.text-center {
    font-variant-numeric: tabular-nums;
}

.strategy-rankings-page {
    overflow: hidden;
}
.strategy-rankings-page .strategy-page-link {
    color: var(--text-primary, #111827);
    text-decoration: none;
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

/* Tag-cell: badges gecentreerd, compact — vult cel netjes */
.strategy-rankings-tags {
    text-align: center;
    white-space: nowrap;
    line-height: 1;
}
.strategy-rankings-tags .utm-source-badge,
.strategy-rankings-tags .strategy-doel-pill {
    margin: 0 3px;
    vertical-align: middle;
}

/* Actie-cell: button compact en niet te dicht op de rand */
.strategy-rankings-action {
    white-space: nowrap;
}
.strategy-rankings-action .btn {
    white-space: nowrap;
    height: 26px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    font-size: 0.76rem;
}

/* Doel-rij krijgt icoon-knoppen (Wijzigen + Wissen) in plaats van een grote knop */
.strategy-rankings-target-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    justify-content: flex-end;
}
.strategy-rankings-target-actions .btn-icon {
    width: 26px;
    height: 26px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.strategy-rankings-page .strategy-page-link:hover {
    color: var(--accent, #1a73e8);
    text-decoration: underline;
}

/* Aanbevolen doel — banner boven de tabel + pill in de rij */
.strategy-recommend-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
    background: linear-gradient(135deg, #e8f5e9 0%, #f1f8f2 100%);
    border: 1px solid #b5dcc0;
    border-left: 4px solid #2e8f5c;
    border-radius: 6px;
    font-size: 0.85rem;
    line-height: 1.4;
    color: #1d4d2e;
}
.strategy-recommend-icon {
    flex-shrink: 0;
    color: #2e8f5c;
    padding-top: 1px;
}
.strategy-recommend-body { flex: 1; min-width: 0; }
.strategy-recommend-body code {
    background: rgba(46, 143, 92, 0.1);
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.78rem;
    color: #1d4d2e;
}
.strategy-recommend-reason {
    margin-top: 4px;
    font-size: 0.78rem;
    color: #355c45;
    opacity: 0.9;
}

.strategy-recommend-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 24px;
    padding: 0 var(--sp-2);
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 4px;
    background: #2e8f5c;
    color: white;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1;
    box-sizing: border-box;
    margin-right: 4px;
    cursor: help;
}

/* Aanbevolen-rij krijgt zachte groene tint + linker accent-bar */
.strategy-rankings-table-v2 tbody tr.is-recommended-row {
    background: #f1f8f2;
    box-shadow: inset 3px 0 0 #2e8f5c;
}
.strategy-rankings-table-v2 tbody tr.is-recommended-row:hover { background: #e6f1e8; }
/* Voorkom dat zero-clicks dimming over de aanbeveling heen gaat */
.strategy-rankings-table-v2 tbody tr.is-recommended-row.is-zero-clicks td { color: inherit; }

/* Doelpagina-kolom in keyword-lijst — visueel onderscheid tussen "doel gekozen" en "fallback top-page" */
.seo-doelpagina-cell {
    font-size: 0.82rem;
    white-space: nowrap;
}
.seo-doelpagina-cell.has-target {
    background: rgba(26,115,232,0.06);
}
.seo-doelpagina-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--accent, #1a73e8);
    font-weight: 400;
    font-family: ui-monospace, monospace;
    text-decoration: none;
    max-width: 100%;
    overflow: hidden;
}
.seo-doelpagina-link:hover { text-decoration: underline; }
.seo-doelpagina-link .icon { flex-shrink: 0; }
.seo-doelpagina-path {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.seo-doelpagina-fallback {
    color: var(--grijs);
    font-family: ui-monospace, monospace;
    font-style: italic;
    opacity: 0.85;
}
.seo-doelpagina-fallback-link {
    color: inherit;
    text-decoration: none;
}
.seo-doelpagina-fallback-link:hover { color: var(--text-primary); }
.seo-doelpagina-empty {
    color: var(--text-tertiary);
}

/* Doel-pill en positie-pill — exact zelfde maatvoering voor visuele consistentie */
.strategy-doel-pill,
.strategy-pos-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 5px;
    line-height: 1.2;
    min-height: 26px;
    min-width: 56px;
    box-sizing: border-box;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.strategy-doel-pill {
    background: var(--accent, #1a73e8);
    color: white;
    text-transform: none;        /* geen uppercase — voorkomt visuele weight-verschil met positie-pill */
    letter-spacing: 0;
}
.strategy-pos-pill.pos-good  { background: #d8f0d8; color: #2e6f30; }
.strategy-pos-pill.pos-ok    { background: #e7f4d4; color: #4d7218; }
.strategy-pos-pill.pos-mid   { background: #fbeed1; color: #87601a; }
.strategy-pos-pill.pos-bad   { background: #fde2d4; color: #a14817; }
.strategy-pos-pill.pos-empty { background: #eef0f2; color: #9ca3af; }

/* Blocked state + action checklist */
.strategy-row-main.is-blocked {
    border-left: 3px solid var(--rood);
    background: rgba(212, 99, 58, 0.03);
}
.strategy-row-main.is-blocked:hover {
    background: rgba(212, 99, 58, 0.06);
}
.strategy-blocked-indicator {
    color: var(--rood);
    margin-right: 4px;
}
.strategy-blocked-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    background: rgba(212, 99, 58, 0.1);
    color: #8a3c1f;
    border: 1px solid rgba(212, 99, 58, 0.2);
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 600;
    margin-left: 4px;
}
.strategy-actions-done {
    color: var(--groen);
    margin-left: 4px;
}

.strat-action-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}
.strat-action-item {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: 10px 12px;
    background: var(--wit);
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius-sm);
    transition: background 0.15s;
}
.strat-action-item.is-completed {
    background: var(--surface-alt);
    opacity: 0.6;
}
.strat-action-item.is-completed .strat-action-title strong {
    text-decoration: line-through;
}
.strat-action-priority-critical { border-left: 3px solid var(--rood); }
.strat-action-priority-high     { border-left: 3px solid #B58900; }
.strat-action-priority-medium   { border-left: 3px solid var(--accent); }
.strat-action-priority-low      { border-left: 3px solid var(--divider-soft); }

.strat-action-check {
    cursor: pointer;
    padding: 2px;
}
.strat-action-check input {
    width: 16px;
    height: 16px;
    cursor: pointer;
}
.strat-action-body {
    flex: 1;
    min-width: 0;
}
.strat-action-title {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 0.85rem;
    margin-bottom: 2px;
}
.strat-action-priority-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--surface-alt);
    color: var(--text-tertiary);
}
.strat-action-priority-critical .strat-action-priority-badge {
    background: rgba(212,99,58,0.1);
    color: #8a3c1f;
}
.strat-action-priority-high .strat-action-priority-badge {
    background: rgba(232,184,74,0.15);
    color: #8d6f1f;
}
.strat-action-desc {
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Unified pill styling — alle status/role pills hebben zelfde dimensies */
/* Uniforme DS pill-basis — gebruikt door rol-, strategie-, conc-,
   positie-diff- en branded/pillar-badges. Compact: 18px hoog, 0.7rem
   font, weight 500, rounded 4px. */
.kw-role-badge,
.strategy-status-badge,
.strategy-blocked-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    padding: 0 6px !important;
    height: 18px !important;
    font-size: 0.7rem !important;
    font-weight: 500 !important;
    border-radius: 4px !important;
    margin-left: 6px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    border: 1px solid !important;
    box-sizing: border-box !important;
}
.kw-role-badge .icon,
.strategy-status-badge .icon,
.strategy-blocked-pill .icon { font-size: 11px !important; }
.kw-role-primary {
    background: var(--accent-light);
    color: var(--accent-hover);
    border: 1px solid rgba(26,115,232,0.2);
}
.kw-role-supporting {
    background: rgba(124,183,123,0.12);
    color: #4a7d4a;
    border: 1px solid rgba(124,183,123,0.25);
}
.kw-role-longtail {
    background: rgba(232,184,74,0.12);
    color: #8d6f1f;
    border: 1px solid rgba(232,184,74,0.25);
}
.kw-role-anchor {
    background: var(--surface-alt);
    color: var(--text-secondary);
    border: 1px solid var(--divider-soft);
}
.kw-role-irrelevant {
    background: rgba(212,99,58,0.08);
    color: #8a3c1f;
    border: 1px solid rgba(212,99,58,0.2);
}
.kw-role-review {
    background: var(--surface-alt);
    color: var(--text-tertiary);
    border: 1px solid var(--divider-soft);
}
.kw-role-more {
    background: var(--surface-alt);
    color: var(--text-tertiary);
    border: 1px solid var(--divider-soft);
    font-size: 0.65rem;
}
.kw-role-default {
    background: var(--surface-alt);
    color: var(--text-secondary);
    border: 1px solid var(--divider-soft);
}
.seo-keyword-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.seo-keyword-chevron {
    color: var(--text-tertiary);
    display: inline-flex;
    align-items: center;
}
.seo-keyword-toggle:hover .seo-keyword-chevron { color: var(--accent); }

/* Labels kolom — eigen plek voor alle pills (rustiger overzicht) */
.seo-labels-col {
    min-width: 200px;
    max-width: 320px;
}
.seo-labels-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}
.seo-labels-wrap > * {
    margin-left: 0 !important;
}

.seo-branded-badge,
.seo-pillar-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 6px;
    border-radius: 4px;
    vertical-align: middle;
    color: var(--oranje);
    background: rgba(232, 124, 42, 0.1);
    border: 1px solid rgba(232, 124, 42, 0.2);
}
.seo-pillar-badge {
    color: var(--groen);
    background: rgba(124, 183, 123, 0.12);
    border-color: rgba(124, 183, 123, 0.25);
}
.seo-branded-badge .icon,
.seo-pillar-badge .icon { font-size: 12px; }
.seo-nonbranded-badge {
    display: none; /* niet meer gebruikt in compact */
}

/* ═══ STRATEGY TAB — Pillar mind-map ═══ */
.strategy-canvas {
    background: var(--surface-alt);
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius);
    padding: var(--sp-4);
    overflow-x: auto;
    min-height: 400px;
}
.strategy-tree {
    display: flex;
    flex-direction: row;
    gap: var(--sp-4);
    align-items: flex-start;
    min-width: fit-content;
    padding-bottom: var(--sp-3);
}
.strategy-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    position: relative;
    transition: transform 0.15s, opacity 0.15s;
}
.strategy-node.dragging {
    opacity: 0.4;
    transform: scale(0.98);
}
.strategy-node.drag-over > .strategy-card {
    border-style: dashed !important;
    background: rgba(232,124,42,0.05) !important;
}
.strategy-node-sub {
    align-items: stretch;
}
.strategy-children {
    display: grid;
    grid-template-columns: repeat(5, 240px);
    gap: var(--sp-3);
    justify-content: flex-start;
    position: relative;
    padding-top: var(--sp-3);
    align-items: start;
}
/* Bij minder dan 5 subs: vul aan met placeholder-slots zodat het altijd een nette rij is */
.strategy-children-placeholder {
    width: 240px;
    min-height: 120px;
    border: 2px dashed var(--divider-soft);
    border-radius: var(--radius);
    background: rgba(0,0,0,0.015);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--grijs);
    font-size: 0.8rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.strategy-children-placeholder:hover {
    border-color: var(--oranje);
    background: rgba(232,124,42,0.04);
    color: var(--oranje);
}
.strategy-connector {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: var(--sp-3);
    background: var(--creme-dark);
}

.strategy-card {
    background: white;
    border: 2px solid var(--pillar-color, var(--creme-dark));
    border-radius: var(--radius);
    padding: var(--sp-2);
    width: 240px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: box-shadow 0.15s;
    cursor: grab;
}
.strategy-card:active { cursor: grabbing; }
.strategy-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.strategy-node-root > .strategy-card {
    width: 280px;
    padding: var(--sp-3);
}

/* Delete-knop prominent */
.strategy-del-btn {
    color: var(--rood);
}
.strategy-del-btn:hover {
    background: rgba(212,99,58,0.15) !important;
}

/* Add-sub plus knop onder elke card */
.strategy-add-sub-btn {
    background: white;
    border: 2px dashed var(--divider-soft);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--grijs);
    cursor: pointer;
    transition: all 0.15s;
}
.strategy-add-sub-btn:hover {
    border-color: var(--oranje);
    color: var(--oranje);
    background: rgba(232,124,42,0.05);
}

/* Context menu (rechtermuisknop) */
.strategy-context-menu {
    position: fixed;
    background: white;
    border: 1px solid var(--divider-soft);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 1000;
    min-width: 200px;
    padding: 4px;
}
.strategy-context-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: 0.85rem;
    cursor: pointer;
    border-radius: 4px;
    color: var(--zwart);
    background: none;
    border: none;
    width: 100%;
    text-align: left;
}
.strategy-context-item:hover { background: var(--surface-alt); }

.strategy-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--creme);
}
.strategy-card-title-block { flex: 1; min-width: 0; }
.strategy-card-title {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--zwart);
    margin: 4px 0 2px;
    word-break: break-word;
}
.strategy-card-url {
    font-size: 0.75rem;
    color: var(--oranje);
    text-decoration: none;
    font-family: ui-monospace, monospace;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.strategy-card-url:hover { text-decoration: underline; }
.strategy-card-actions { display: flex; gap: 2px; flex-shrink: 0; }

.pillar-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.strategy-card-stats {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
    margin-bottom: var(--sp-2);
    flex-wrap: wrap;
}
.strategy-stat { text-align: left; }
.strategy-stat-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--zwart);
    line-height: 1.1;
}
.strategy-node-root .strategy-stat-value { font-size: 1.2rem; }
.strategy-stat-label {
    font-size: 0.65rem;
    color: var(--grijs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 1px;
}
.strategy-card .strategy-card-stats button {
    font-size: 0.7rem;
    padding: 4px 8px;
}
.strategy-card .strategy-card-title { font-size: 0.95rem; }
.strategy-node-root > .strategy-card .strategy-card-title { font-size: 1.05rem; }
.strategy-card .strategy-keywords { gap: 3px; }
.strategy-card .strategy-kw-chip { font-size: 0.7rem; padding: 2px 6px; }

.strategy-keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: var(--sp-2);
    padding-top: var(--sp-2);
    border-top: 1px dashed var(--divider-soft);
}
.strategy-keywords-empty {
    font-size: 0.8rem;
    color: var(--grijs);
    font-style: italic;
    padding: var(--sp-2) 0;
    border-top: 1px dashed var(--divider-soft);
    margin-top: var(--sp-2);
}
.strategy-kw-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--surface-alt);
    border: 1px solid var(--divider-soft);
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    color: var(--zwart);
}
.strategy-kw-text { font-weight: 500; }
.strategy-kw-clicks { color: var(--grijs); font-size: 0.7rem; }
.strategy-kw-vol {
    color: var(--oranje);
    font-size: 0.7rem;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.btn-icon-tiny {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    margin-left: 2px;
    color: var(--grijs);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
}
.btn-icon-tiny:hover {
    background: var(--rood);
    color: white;
}
.strategy-kw-more {
    background: none;
    border: 1px dashed var(--oranje);
    color: var(--oranje);
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    cursor: pointer;
}
.strategy-kw-more:hover { background: rgba(232,124,42,0.08); }

/* Pillar type radio (in modal) */
.pillar-type-radios {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
.pillar-type-radio {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: white;
    border: 2px solid var(--divider-soft);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    flex-wrap: wrap;
}
.pillar-type-radio:hover { border-color: var(--type-color); }
.pillar-type-radio.selected {
    border-color: var(--type-color);
    background: rgba(232,124,42,0.05);
}
.pillar-type-radio strong { color: var(--zwart); }
.pillar-type-icon {
    background: var(--type-color);
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pillar-type-radio .text-xs { width: 100%; flex-basis: 100%; }

@media (max-width: 900px) {
    .strategy-children { flex-direction: column; align-items: center; }
    .pillar-type-radios { grid-template-columns: 1fr; }
}

/* GSC country selector chip (naast periode) */
.seo-country-selector {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    background: var(--surface-alt);
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius-sm);
    padding: 0 var(--sp-2) 0 var(--sp-3);
    font-size: 0.85rem;
}
.seo-country-flag { font-size: 1.1em; }
.seo-country-label { font-weight: 500; color: var(--zwart); }

/* Country picker modal */
.seo-country-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 400px;
    overflow-y: auto;
}
.seo-country-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: white;
    border: 1px solid var(--divider-soft);
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s;
}
.seo-country-option:hover {
    border-color: var(--accent);
    background: var(--accent-light);
}
.seo-country-option-active {
    border-color: var(--accent);
    background: var(--accent-light);
}

/* Competition pills */
.comp-pill {
    display: inline-flex;
    align-items: center;
    height: 18px;
    font-size: 0.7rem;
    font-weight: 500;
    padding: 0 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1;
    box-sizing: border-box;
}
.comp-low  { background: rgba(124,183,123,0.18); color: var(--groen); }
.comp-med  { background: rgba(232,184,74,0.18);  color: #c89020; }
.comp-high { background: rgba(212,99,58,0.15);   color: var(--rood); }
.comp-unk  { background: var(--surface-alt); color: var(--grijs); }

/* Position diff pills */
.seo-pos-diff {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 18px;
    font-size: 0.7rem;
    font-weight: 500;
    padding: 0 6px;
    border-radius: 4px;
    line-height: 1;
    box-sizing: border-box;
}
.seo-pos-diff .icon { font-size: 11px; }
.seo-pos-diff-up    { background: rgba(124,183,123,0.15); color: var(--groen); }
.seo-pos-diff-down  { background: rgba(212,99,58,0.15);  color: var(--rood);  }
.seo-pos-diff-same  { background: var(--surface-alt); color: var(--grijs); }
.seo-pos-diff-new   { background: rgba(74,144,226,0.15); color: #4a90e2; }
.seo-pos-diff-lost  { background: rgba(212,99,58,0.15); color: var(--rood); }

/* Expand button */
.seo-expand-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    display: flex;
    align-items: center;
    color: var(--grijs);
    border-radius: 3px;
}
.seo-expand-btn:hover { background: var(--creme-dark); color: var(--zwart); }
.seo-row-expanded { background: var(--surface-alt) !important; }
.seo-row-expanded td { font-weight: 400; }

/* Detail row (expanded) — strakke witte container met subtiele schaduw */
.seo-row-detail td {
    background: var(--wit);
    padding: 0 !important;
    border-bottom: 1px solid var(--divider-soft);
    box-shadow: inset 0 1px 0 var(--divider-soft);
}
.seo-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-5);                          /* sp-6 → sp-5: minder verticale ruimte tussen secties */
    padding: var(--sp-4) var(--sp-5);          /* sp-5/6 → sp-4/5: compacter wrapper */
    background: var(--wit);
}
.seo-detail-section {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.seo-detail-section-full {
    grid-column: 1 / -1;
}
.seo-detail-section-title {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--sp-2);
    display: flex;
    align-items: center;
    gap: 6px;
}
/* Bron-tag rechts in section-title (Doel-pagina / Beste positie) */
.seo-history-source-inline {
    margin-left: auto;
}
.seo-history-source-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    font-size: 0.66rem;
    font-weight: 500;
    border-radius: 4px;
    letter-spacing: 0.02em;
    text-transform: none;
}
.seo-history-source-target {
    background: #eaf3fe;
    color: #1a4d9e;
    border: 1px solid rgba(26,115,232,0.2);
}
.seo-history-source-best {
    background: #f3f4f6;
    color: #4b5563;
    border: 1px solid var(--divider-soft, #e5e7eb);
}
.seo-detail-row {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 0.85rem;
    padding: 3px 0;
    color: var(--text-primary);
}
.seo-detail-row span:first-child,
.seo-detail-row label {
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
    min-width: 110px;
    flex-shrink: 0;
}
.seo-detail-actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
    padding-top: 0;
    border-top: none;
}
.seo-detail-actions-left {
    flex: 1;
    min-width: 0;
    text-align: left;
}
.seo-detail-actions-right {
    display: flex;
    gap: var(--sp-2);
    flex-shrink: 0;
}
.kw-ai-reason-inline {
    display: inline-block;
    font-size: 0.85rem;
    color: var(--accent-hover);
    line-height: 1.4;
    background: var(--accent-light);
    padding: 6px 12px;
    border-radius: 16px;
    border: 1px solid rgba(26, 115, 232, 0.15);
}
.kw-ai-reason-inline strong {
    color: var(--accent);
    font-weight: 600;
}
.kw-ai-reason-inline em {
    font-style: normal;
}
.seo-detail-actions .btn-icon-danger {
    color: var(--rood) !important;
    border-color: var(--divider-soft) !important;
    background: var(--wit) !important;
}
.seo-detail-actions .btn-icon-danger:hover:not(:disabled) {
    background: var(--rood-light) !important;
    border-color: var(--rood) !important;
}

/* Responsive: KPI strip wraps to 2 cols on narrow screens */
@media (max-width: 1100px) {
    .seo-kpi-strip { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .seo-kpi-strip { grid-template-columns: repeat(2, 1fr); }
    .seo-detail-grid { grid-template-columns: 1fr; }
}

/* ═══ SEO PAGES OVERVIEW V2 ═══ */
.seo-kpi-strip-pages { grid-template-columns: repeat(5, 1fr); }
.seo-kpi-card-opportunity { border-color: var(--accent); border-width: 2px; }
.seo-kpi-card-opportunity .seo-kpi-value { color: var(--accent); }

/* Pages toolbar (sortering) */
.seo-pages-toolbar {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: var(--sp-2);
    padding: var(--sp-2);
    background: white;
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius);
}
.seo-pages-sort-btn {
    background: white;
    border: 1px solid var(--divider-soft);
    color: var(--zwart);
    padding: 5px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s;
}
.seo-pages-sort-btn:hover { background: var(--surface-alt); }
.seo-pages-sort-active {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

/* Pages grid */
.seo-pages-grid {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

/* Page card */
.seo-page-card {
    background: white;
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius);
    padding: var(--sp-3);
    transition: box-shadow 0.15s;
}
.seo-page-card:hover {
    box-shadow: var(--shadow-sm);
}
.seo-page-card-strong {
    /* Geen aparte rand — pillar-status is herkenbaar aan de groene Pillar-kandidaat badge in de header */
}

.seo-page-card-header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--creme);
    flex-wrap: wrap;
}
.seo-page-card-rank {
    background: var(--creme-dark);
    color: var(--zwart);
    font-weight: 700;
    font-size: 0.85rem;
    padding: 4px 10px;
    border-radius: 6px;
    min-width: 36px;
    text-align: center;
    flex-shrink: 0;
}
.seo-page-card-url {
    font-family: ui-monospace, monospace;
    font-size: 0.85rem;
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.15s;
}
.seo-page-card-url:hover { color: var(--accent); }
.seo-page-card-url .icon { color: var(--text-tertiary); font-size: 14px; }

.seo-page-card-badges {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    flex-shrink: 0;
    margin-left: auto;
}
.seo-page-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
}
.seo-page-badge-pillar { background: rgba(124,183,123,0.15); color: var(--groen); }
.seo-page-badge-opportunity { background: var(--accent-light); color: var(--accent); }
.seo-page-badge-quickwin { background: rgba(232,184,74,0.15); color: #c89020; }

/* Page card metrics — GA4-stijl, compact */
.seo-page-card-metrics {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr;
    gap: var(--sp-1);
    margin-bottom: var(--sp-3);
    padding: 0;
    background: transparent;
    border-radius: 0;
}
.seo-page-metric {
    text-align: left;
    padding: 8px 10px;
    background: var(--wit);
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius-sm);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.seo-page-metric:hover {
    border-color: var(--accent);
}
.seo-page-metric-primary {
    background: var(--accent-light);
    border-color: rgba(26, 115, 232, 0.2);
}
.seo-page-metric-primary .seo-page-metric-value {
    color: var(--accent);
    font-size: 1.15rem;
}
.seo-page-metric-value {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.seo-page-metric-label {
    font-size: 0.65rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 2px;
    font-weight: 500;
}

/* Page card body — drivers + quickwins + opportunities columns */
.seo-page-card-body {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--sp-3);
}
.seo-page-column { min-width: 0; }
.seo-page-column-drivers { border-right: 1px solid var(--creme); padding-right: var(--sp-3); }
.seo-page-column-quickwins { border-right: 1px solid var(--creme); padding-right: var(--sp-3); padding-left: var(--sp-1); }
.seo-page-column-opportunities { padding-left: var(--sp-1); }
.seo-page-column-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--grijs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Query items */
.page-query-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.page-query-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 0.85rem;
}
.page-query-item:hover { background: var(--surface-alt); }
.page-query-name {
    color: var(--zwart);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.page-query-metrics {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.page-query-clicks, .page-query-impr {
    font-size: 0.75rem;
    color: var(--grijs);
}

/* Pages overview — sub-pillars rij onder elke page card */
.seo-page-subs-wrap {
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--divider-soft);
}
/* Title-variant boven body: geen extra dubbele lijn */
.seo-page-subs-wrap-title {
    margin-top: var(--sp-2);
    padding-top: 0;
    border-top: none;
}
.seo-page-subs-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--zwart);
    margin-bottom: var(--sp-2);
}
.seo-page-subs-grid {
    display: grid;
    gap: var(--sp-2);
    align-items: stretch;
}
.seo-page-sub-card {
    background: white;
    border: 2px solid var(--pillar-color, var(--creme-dark));
    border-radius: var(--radius);
    padding: var(--sp-2);
    cursor: pointer;
    min-height: 70px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: box-shadow 0.15s, transform 0.15s;
    position: relative;
}
.seo-page-sub-del {
    position: absolute;
    top: 4px;
    right: 4px;
    background: transparent;
    border: none;
    color: var(--rood);
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s;
}
.seo-page-sub-card:hover .seo-page-sub-del { opacity: 1; }
.seo-page-sub-del:hover { background: rgba(212,99,58,0.1); }
.seo-page-sub-card:hover {
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}
.seo-page-sub-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--zwart);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.2;
}
.seo-page-sub-stats {
    display: flex;
    gap: var(--sp-2);
    font-size: 0.7rem;
    color: var(--grijs);
    margin-top: 4px;
}
/* Keyword preview op sub-card */
.seo-page-sub-keywords {
    list-style: none;
    margin: 6px 0 0;
    padding: 6px 0 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-top: 1px solid var(--creme);
}
.seo-page-sub-keywords li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    color: var(--zwart);
    padding: 2px 0;
    line-height: 1.2;
}
.seo-page-sub-keywords li .kw-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.seo-page-sub-keywords li .kw-meta {
    color: var(--grijs);
    font-weight: 600;
    font-size: 0.65rem;
    flex-shrink: 0;
}
.seo-page-sub-keywords li.kw-more {
    color: var(--oranje);
    font-style: italic;
    font-size: 0.65rem;
    padding-top: 4px;
}
.seo-page-sub-placeholder {
    border: 2px dashed var(--divider-soft);
    border-radius: var(--radius);
    background: rgba(0,0,0,0.015);
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--grijs);
    font-size: 0.78rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.seo-page-sub-placeholder:hover {
    border-color: var(--oranje);
    background: rgba(232,124,42,0.04);
    color: var(--oranje);
}
/* Inline edit-vorm voor nieuwe sub-pagina */
.seo-page-sub-edit {
    background: white;
    border: 2px solid var(--oranje);
    border-radius: var(--radius);
    padding: var(--sp-2);
    min-height: 70px;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    box-shadow: 0 4px 14px rgba(232,124,42,0.18);
    animation: subEditIn 0.15s ease-out;
}
@keyframes subEditIn {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}
.seo-sub-edit-name {
    width: 100%;
    border: 1px solid var(--divider-soft);
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 0.82rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
}
.seo-sub-edit-name:focus {
    border-color: var(--oranje);
}
.seo-sub-edit-actions {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
}
.seo-sub-edit-actions .btn {
    padding: 4px 10px;
    font-size: 0.75rem;
}
.seo-sub-edit-url {
    width: 100%;
    border: 1px solid var(--divider-soft);
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 0.78rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
}
.seo-sub-edit-url:focus { border-color: var(--accent); }

/* Sub-pagina detail-panel (modal-stijl overlay) */
.seo-sub-detail-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 1000;
    padding: var(--sp-6) var(--sp-4);
    overflow-y: auto;
}
.seo-sub-detail-panel {
    background: white;
    border-radius: var(--radius);
    width: 100%;
    max-width: 1080px;
    box-shadow: 0 16px 60px rgba(0,0,0,0.25);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    animation: subDetailIn 0.18s ease-out;
}
@keyframes subDetailIn {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.seo-sub-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--divider-soft);
    gap: var(--sp-2);
}
.seo-sub-detail-title { flex: 1; min-width: 0; }
.seo-sub-detail-title-block { display: flex; flex-direction: column; gap: 4px; }
.seo-sub-detail-name { font-size: 1.05rem; font-weight: 700; color: var(--zwart); }
.seo-sub-detail-url { display: flex; align-items: center; gap: var(--sp-2); font-size: 0.82rem; color: var(--grijs); }
.seo-sub-detail-url a { color: var(--accent); text-decoration: none; }
.seo-sub-detail-url a:hover { text-decoration: underline; }
.seo-sub-detail-url-edit { display: flex; gap: 4px; align-items: center; }
.seo-sub-url-input {
    flex: 1; min-width: 280px;
    border: 1px solid var(--divider-soft);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.85rem;
    font-family: inherit;
    outline: none;
}
.seo-sub-url-input:focus { border-color: var(--accent); }
.seo-sub-detail-close {
    background: transparent;
    border: none;
    color: var(--grijs);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    flex-shrink: 0;
}
.seo-sub-detail-close:hover { background: var(--surface-alt); color: var(--zwart); }
.seo-sub-detail-body {
    padding: var(--sp-3) var(--sp-4);
    flex: 1;
    overflow-y: auto;
}
.seo-sub-detail-actions {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
    margin-bottom: var(--sp-3);
}
.seo-sub-keywords-table-wrap {
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius);
    overflow: hidden;
}
.seo-sub-keywords-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.seo-sub-keywords-table th,
.seo-sub-keywords-table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--creme);
}
.seo-sub-keywords-table th {
    background: var(--surface-alt);
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    color: var(--grijs);
    letter-spacing: 0.02em;
}
.seo-sub-keywords-table tr:last-child td { border-bottom: none; }
.seo-sub-keywords-table tr:hover { background: rgba(232,124,42,0.03); }
.seo-sub-kw-name { font-weight: 600; max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.seo-sub-kw-status, .seo-sub-kw-role {
    border: 1px solid var(--divider-soft);
    border-radius: 4px;
    padding: 4px 6px;
    font-size: 0.78rem;
    background: white;
    font-family: inherit;
    cursor: pointer;
}
.kw-linked-badge { color: var(--groen); font-size: 0.9rem; vertical-align: middle; }

/* Ownership badges in keyword detail panel */
.kw-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kw-badge-free        { background: rgba(0,0,0,0.06); color: var(--grijs); }
.kw-badge-primary-here{ background: rgba(124,183,123,0.20); color: var(--groen); }
.kw-badge-supporting  { background: rgba(74,144,226,0.18); color: #2c5b96; }
.kw-badge-conflict    { background: rgba(212,99,58,0.18); color: var(--rood); }
.kw-badge-irrelevant  { background: rgba(0,0,0,0.05); color: var(--grijs); text-decoration: line-through; }

/* Conflict modal content */
.kw-conflict-list {
    list-style: none;
    padding: 0;
    margin: var(--sp-2) 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.kw-conflict-item {
    background: rgba(212,99,58,0.06);
    border-left: 3px solid var(--rood);
    padding: 8px 10px;
    border-radius: 4px;
    font-size: 0.85rem;
}
.kw-conflict-pillar {
    color: var(--rood);
    font-weight: 700;
}
.kw-conflict-actions {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
}
.kw-conflict-actions .btn {
    text-align: left;
    padding: 10px 14px;
    line-height: 1.3;
}
.seo-sub-detail-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-3);
    margin-top: var(--sp-3);
}
.seo-sub-detail-footer {
    margin-top: var(--sp-3);
    display: flex;
    justify-content: flex-end;
}
/* Markeer als pillar knop */
.seo-page-mark-pillar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 var(--sp-4);
    background: white;
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.seo-page-mark-pillar:hover {
    background: var(--accent-light);
    color: var(--accent-hover);
    border-color: var(--accent-hover);
}
/* Pillar badge */
.seo-page-pillar-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--oranje);
    color: white;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-right: 4px;
}
/* Primair keyword pill in subs-title (op pillar-niveau) */
.kw-primary-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    background: rgba(124,183,123,0.18);
    color: var(--groen);
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 700;
    margin-right: 4px;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kw-primary-pill-empty {
    background: rgba(0,0,0,0.05);
    color: var(--grijs);
    font-weight: 500;
    font-style: italic;
}
/* Primair keyword regel in sub-card (compact) */
.seo-page-sub-primary {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--groen);
    background: rgba(124,183,123,0.10);
    border-radius: 4px;
    padding: 3px 6px;
    margin-top: 2px;
}
.seo-page-sub-primary span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.seo-page-sub-primary-empty {
    color: var(--grijs);
    background: rgba(0,0,0,0.04);
    font-weight: 500;
    font-style: italic;
}
/* "Keywords beoordelen" knop voor pillar-pagina */
.seo-page-pillar-keywords-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: white;
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    margin-left: auto;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.seo-page-pillar-keywords-btn:hover {
    background: var(--accent-light);
    color: var(--accent-hover);
    border-color: var(--accent-hover);
}
/* Unmark pillar knop */
.seo-page-unmark-pillar {
    background: transparent;
    border: none;
    color: var(--rood);
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    margin-left: 4px;
    transition: background 0.15s;
}
.seo-page-unmark-pillar:hover {
    background: rgba(212,99,58,0.1);
}
.seo-page-subs-title {
    width: 100%;
}
/* Volume pill */
.page-query-vol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(0,0,0,0.06);
    color: var(--zwart);
    white-space: nowrap;
    min-width: 56px;
}
/* Competition pill */
.page-query-comp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    min-width: 56px;
}
.page-query-comp.comp-low  { background: rgba(124,183,123,0.18); color: var(--groen); }
.page-query-comp.comp-med  { background: rgba(232,184,74,0.18); color: #c89020; }
.page-query-comp.comp-high { background: rgba(212,99,58,0.18); color: var(--rood); }

/* Position pills */
.pos-pill {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    min-width: 56px;
    justify-content: center;
}
.pos-pill-good { background: rgba(124,183,123,0.18); color: var(--groen); }
.pos-pill-ok   { background: rgba(232,184,74,0.18); color: #c89020; }
.pos-pill-warn { background: rgba(232,124,42,0.18); color: var(--oranje); }
.pos-pill-bad  { background: rgba(212,99,58,0.15);  color: var(--rood); }

/* Quick wins footer */
.seo-page-quickwins {
    margin-top: var(--sp-2);
    padding-top: var(--sp-2);
    border-top: 1px dashed var(--divider-soft);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.seo-page-quickwins-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #c89020;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.seo-page-quickwin-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--surface-alt);
    color: var(--zwart);
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    border: 1px solid var(--divider-soft);
}

/* Responsive page cards */
@media (max-width: 900px) {
    .seo-page-card-body { grid-template-columns: 1fr; }
    .seo-page-column-drivers { border-right: none; border-bottom: 1px solid var(--creme); padding-right: 0; padding-bottom: var(--sp-2); }
    .seo-page-column-quickwins { border-right: none; border-bottom: 1px solid var(--creme); padding-right: 0; padding-left: 0; padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
    .seo-page-column-opportunities { padding-left: 0; padding-top: var(--sp-2); }
    .seo-page-card-metrics { grid-template-columns: repeat(2, 1fr); }
    .seo-kpi-strip-pages { grid-template-columns: repeat(2, 1fr); }
}

/* Lokale zichtbaarheid widget */
.seo-local-block {
    background: white;
    border: 1px solid var(--divider-soft);
    border-left: 4px solid var(--groen);
    border-radius: var(--radius);
    padding: var(--sp-3);
    margin-bottom: var(--sp-3);
}
.seo-local-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--sp-2);
}
.seo-local-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--sp-3);
    padding: var(--sp-2) 0;
    border-top: 1px solid var(--divider-soft);
    border-bottom: 1px solid var(--divider-soft);
    margin: var(--sp-2) 0;
}
.seo-local-metric-label {
    font-size: 0.72rem;
    color: var(--grijs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}
.seo-local-metric-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--zwart);
}
.seo-local-keyword-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 4px;
}
.seo-local-keyword-chip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px var(--sp-2);
    background: var(--surface-alt);
    border-radius: var(--radius-sm);
}

.gbp-snapshot-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius-sm);
    padding: var(--sp-2);
}
.gbp-snapshot-row {
    display: grid;
    grid-template-columns: 140px 1fr auto;
    align-items: center;
    gap: var(--sp-2);
    padding: 4px;
    font-size: 0.85rem;
}
.gbp-snapshot-row:hover { background: var(--surface-alt); }


/* ═══ HANDLEIDINGEN ═══ */
.handleidingen-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: var(--sp-4);
    margin-top: var(--sp-3);
}
.handleidingen-sidebar {
    background: white;
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius);
    padding: var(--sp-2);
    height: fit-content;
    position: sticky;
    top: var(--sp-3);
}
.handleidingen-topic-link {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-sm);
    color: var(--zwart);
    text-decoration: none;
    font-size: 0.9rem;
    margin-bottom: 2px;
    transition: background 0.15s;
}
.handleidingen-topic-link:hover { background: var(--surface-alt); }
.handleidingen-topic-link.active {
    background: var(--accent);
    color: white;
    font-weight: 600;
}
.handleidingen-topic-icon { display: inline-flex; opacity: 0.7; }
.handleidingen-topic-link.active .handleidingen-topic-icon { opacity: 1; }
.handleidingen-topic-sub {
    padding-left: var(--sp-5);
    font-size: 0.82rem;
    color: var(--grijs);
}
.handleidingen-topic-sub::before {
    content: '\21B3';
    margin-right: 4px;
    opacity: 0.4;
}

.handleidingen-card-children {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: var(--sp-2);
    padding-top: var(--sp-2);
    border-top: 1px solid var(--divider-soft);
}
.handleidingen-child-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.72rem;
    background: white;
    padding: 2px 8px;
    border-radius: 10px;
    color: var(--grijs);
}

.handleidingen-breadcrumb {
    margin-bottom: var(--sp-3);
    font-size: 0.85rem;
}
.handleidingen-breadcrumb a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--grijs);
    text-decoration: none;
}
.handleidingen-breadcrumb a:hover { color: var(--oranje); }

.handleidingen-subtopics { margin-top: var(--sp-6); }
.handleidingen-subtopic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--sp-3);
}
.handleidingen-subtopic-card {
    display: flex;
    gap: var(--sp-3);
    padding: var(--sp-3);
    background: var(--surface-alt);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--zwart);
    border: 2px solid transparent;
    transition: all 0.15s;
}
.handleidingen-subtopic-card:hover {
    border-color: var(--oranje);
    background: white;
}

.handleidingen-content {
    background: white;
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius);
    padding: var(--sp-5);
    min-height: 400px;
}
.handleidingen-welcome h2 { margin-top: 0; }
.handleidingen-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--sp-3);
    margin-top: var(--sp-4);
}
.handleidingen-card {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-4);
    background: var(--surface-alt);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--zwart);
    border: 2px solid transparent;
    transition: all 0.15s;
}
.handleidingen-card:hover {
    border-color: var(--oranje);
    background: white;
}
.handleidingen-card-icon {
    display: inline-flex;
    color: var(--oranje);
}

.handleidingen-article { max-width: 820px; }
.handleidingen-article-header {
    margin-bottom: var(--sp-5);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--divider-soft);
}
.handleidingen-article-header h2 {
    margin: 0 0 var(--sp-1) 0;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
.handleidingen-section {
    margin-bottom: var(--sp-5);
}
.handleidingen-section h3 {
    margin: 0 0 var(--sp-2) 0;
    color: var(--oranje);
    font-size: 1.15rem;
}
.handleidingen-section-body p { margin: 0 0 var(--sp-2) 0; line-height: 1.6; }
.handleidingen-section-body ol,
.handleidingen-section-body ul {
    padding-left: var(--sp-5);
    line-height: 1.7;
}
.handleidingen-section-body li { margin-bottom: 4px; }
.handleidingen-section-body code {
    background: var(--surface-alt);
    padding: 1px 6px;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.88em;
}
.handleidingen-section-body a {
    color: var(--oranje);
    text-decoration: underline;
}
.handleidingen-section-body .alert-box {
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-sm);
    margin-top: var(--sp-1);
}

@media (max-width: 900px) {
    .handleidingen-layout {
        grid-template-columns: 1fr;
    }
    .handleidingen-sidebar { position: static; }
}

/* ═══ JOURNEY FUNNEL LAYOUT (SEE/THINK/DO/CARE) ═══ */
.funnel-journey-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin-top: var(--sp-3);
}
.funnel-journey-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr);
    gap: var(--sp-4);
    align-items: stretch;
    position: relative;
}
@media (min-width: 1400px) {
    .funnel-journey-grid { gap: var(--sp-5); }
}
@media (min-width: 1600px) {
    .funnel-journey-grid { gap: var(--sp-6); }
}

/* Connector-bolletjes met pijl tussen fase-kolommen */
.journey-phase-col {
    position: relative;
}
.journey-phase-col:not(:last-child)::after {
    content: '\2192'; /* → */
    position: absolute;
    top: 50%;
    right: calc(-1 * var(--sp-4) / 2 - 18px);
    width: 36px;
    height: 36px;
    background: white;
    color: var(--zwart);
    border: 1px solid var(--zwart);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    transform: translateY(-50%);
    z-index: 3;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
/* CARE-pijl: wijst terug naar de funnel (retentie loop) */
.journey-phase-shared::after {
    content: '\2190' !important; /* ← */
}

/* Shared kolom: zelfde design als andere fase-kolommen (wit + creme border) */
.journey-phase-shared {
    /* Inherit default .journey-phase-col styling */
}

/* Cards binnen shared-kolom gebruiken zelfde styling als lane-cards */
.journey-phase-shared .funnel-shared-combined-card {
    background: white;
    color: var(--zwart);
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius-sm);
    position: relative;
    padding: var(--sp-2);
}
/* Pijltje tussen landingspagina en conversie card (verticaal) */
.journey-shared-inner {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    min-width: 0;
    position: relative;
}
.journey-shared-inner .funnel-shared-combined-card:first-child::after {
    content: '\2193'; /* ↓ */
    position: absolute;
    left: 50%;
    bottom: calc(-1 * var(--sp-3) - 18px);
    width: 36px;
    height: 36px;
    background: white;
    color: var(--zwart);
    border: 1px solid var(--zwart);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    transform: translateX(-50%);
    z-index: 3;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.journey-shared-inner {
    padding-bottom: var(--sp-3);
}

/* Kolom-content mag shrinken (voorkomt grid-overflow door lange woorden/cijfers) */
.journey-phase-col { min-width: 0; }
.journey-lane-card { min-width: 0; }

/* Icon chip in lane header — vierkant, kleur als achtergrond, wit icoon */
.lane-icon-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    color: white;
    flex-shrink: 0;
}
.lane-icon-chip .icon {
    color: white;
}
.journey-lane-header { min-width: 0; }
.journey-lane-title { min-width: 0; }
.funnel-shared-combined-card { min-width: 0; }
.funnel-shared-combined-value { word-break: break-word; }

/* Responsive: op middelgrote schermen (laptop < 1400px) kleinere tekst + padding */
@media (max-width: 1400px) {
    .funnel-journey-grid {
        gap: var(--sp-1);
    }
    .journey-phase-col {
        padding: var(--sp-1);
    }
    .journey-phase-label {
        font-size: 1rem;
    }
    .journey-lane-card {
        padding: 6px;
    }
    .journey-lane-title {
        font-size: 0.82rem;
    }
    .journey-lane-revenue-amount {
        font-size: 0.98rem;
    }
    .journey-metric {
        font-size: 0.75rem;
    }
    .funnel-shared-combined-value {
        font-size: 1.3rem;
    }
    .funnel-revenue-target,
    .funnel-shared-target {
        font-size: 0.68rem;
        padding: 3px 6px;
    }
}

/* Responsive: op kleinere laptops (<1100px) kolommen wrappen — 2 rijen */
@media (max-width: 1100px) {
    .funnel-journey-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .journey-phase-shared {
        grid-column: span 2;
    }
}

/* Mobile: alles onder elkaar */
@media (max-width: 700px) {
    .funnel-journey-grid {
        grid-template-columns: 1fr;
    }
    .journey-phase-shared {
        grid-column: span 1;
    }
}
.journey-phase-col {
    background: white;
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius);
    padding: var(--sp-2);
    min-height: 200px;
}
.journey-phase-header {
    display: block;
    margin-bottom: var(--sp-2);
    padding: 0;
}
.journey-phase-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--phase-color, var(--grijs));
}
.journey-phase-label {
    display: block;
    width: 100%;
    text-align: center;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--phase-color, var(--zwart));
    letter-spacing: 0.06em;
    background: color-mix(in srgb, var(--phase-color, var(--grijs)) 15%, white);
    padding: 10px 12px;
    border-radius: var(--radius-sm);
}
.journey-phase-desc {
    display: none;
    text-transform: none;
    letter-spacing: 0;
    margin-top: 1px;
}
.journey-phase-lanes {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.journey-phase-empty {
    padding: var(--sp-3);
    text-align: center;
    font-size: 0.8rem;
    color: var(--grijs);
    font-style: italic;
    border: 2px dashed var(--divider-soft);
    border-radius: var(--radius-sm);
}
.journey-lane-card {
    background: white;
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius-sm);
    padding: var(--sp-2);
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    cursor: move;
    transition: box-shadow 0.15s;
}
.journey-lane-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.journey-lane-card.lane-dragging { opacity: 0.4; }
.journey-lane-card.lane-drag-over { border-top-color: var(--oranje); border-top-width: 3px; }
.journey-phase-lanes.phase-drag-over {
    background: var(--accent-light, #fef0e4);
    border: 2px dashed var(--oranje);
    border-radius: 8px;
    min-height: 60px;
}
.journey-lane-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
}
.journey-lane-title {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--zwart);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.journey-lane-actions {
    display: flex;
    gap: 2px;
    opacity: 0.85;
    transition: opacity 0.15s;
}
.journey-lane-card:hover .journey-lane-actions { opacity: 1; }
.journey-lane-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--surface-alt);
    margin: 0 calc(-1 * var(--sp-2));
    padding: var(--sp-2);
    border-bottom: 1px solid var(--divider-soft);
}
.journey-lane-section:first-of-type {
    margin-top: var(--sp-1);
    border-top-left-radius: var(--radius-sm);
    border-top-right-radius: var(--radius-sm);
}
.journey-lane-section-revenue {
    margin-bottom: calc(-1 * var(--sp-2));
    border-bottom-left-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-sm);
    border-bottom: none;
}
.journey-lane-section-label {
    font-size: 0.72rem;
    color: var(--grijs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
}
.journey-lane-main-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--zwart);
    line-height: 1;
    text-align: center;
}
.journey-lane-subline {
    display: flex;
    justify-content: space-around;
    gap: var(--sp-2);
    font-size: 0.72rem;
    color: var(--grijs);
    padding-top: 2px;
}
.journey-lane-subline strong { color: var(--zwart); }
.journey-lane-roas {
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
}

/* Shared Landing + Conversie gecombineerd blok */
.funnel-shared-combined {
    display: flex;
    align-items: stretch;
    gap: var(--sp-2);
    background: var(--surface-alt);
    border-radius: var(--radius);
    padding: var(--sp-2);
}
.funnel-shared-combined-card {
    flex: 1;
    background: white;
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius-sm);
    padding: var(--sp-2);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
/* Conversie-kaart krijgt een licht-warm achtergrondje zodat de eindstap
   visueel iets meer presence heeft dan de Landingspagina-kaart. */
.funnel-shared-combined-card-conversie {
    background: #F4F2F0;
}
.funnel-shared-combined-label {
    font-size: 0.72rem;
    color: var(--grijs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}
.funnel-shared-combined-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-1);
}
.funnel-shared-combined-main {
    text-align: left;
}
.funnel-shared-combined-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--zwart);
    line-height: 1;
}
.funnel-shared-combined-pages {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding-top: 4px;
}
.funnel-shared-combined-arrow {
    display: flex;
    align-items: center;
    color: var(--grijs);
}

/* Totaal-blok onderaan */
.funnel-journey-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--zwart);
    color: white;
    border-radius: var(--radius);
    padding: var(--sp-3) var(--sp-4);
}
.funnel-journey-total .funnel-revenue-total-label {
    color: rgba(255,255,255,0.8);
}
.funnel-journey-total .funnel-revenue-total-amount {
    color: white;
    font-size: 1.8rem;
}
.funnel-journey-total-right {
    text-align: right;
}
.funnel-journey-total .text-muted {
    color: rgba(255,255,255,0.6) !important;
}

/* Phase radio buttons in config modal */
.phase-radio {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 4px;
    border: 2px solid var(--divider-soft);
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: center;
    transition: all 0.15s;
    background: white;
}
.phase-radio:hover { border-color: var(--oranje); }
.phase-radio.selected {
    border-color: var(--oranje);
    background: var(--surface-alt);
}
.phase-radio strong { font-size: 0.82rem; }

/* Channel picker modal */
.channel-picker-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-2);
}
.channel-picker-option {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3);
    border: 2px solid var(--divider-soft);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.15s;
    background: white;
}
.channel-picker-option:hover { border-color: var(--channel-color, var(--oranje)); }
.channel-picker-option.selected {
    border-color: var(--channel-color, var(--oranje));
    background: var(--surface-alt);
}
.channel-picker-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--channel-color, var(--grijs));
    flex-shrink: 0;
}
.channel-picker-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}
.channel-picker-label { font-weight: 600; font-size: 0.9rem; }
.channel-picker-source { font-size: 0.7rem; color: var(--grijs); text-transform: uppercase; }
.channel-picker-meta { flex: 1; min-width: 0; }

/* Al-ingericht in deze funnel: visueel afgevinkt, niet selecteerbaar */
.channel-picker-option.is-added {
    background: #f1f8f2;
    border-color: #cfe5d2;
    cursor: not-allowed;
    opacity: 0.85;
}
.channel-picker-option.is-added:hover { border-color: #cfe5d2; }
.channel-picker-option.is-added .channel-picker-label { color: #2c6c43; }
.channel-picker-added {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #d4eddb;
    color: #2c6c43;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    flex-shrink: 0;
}
/* Subtiele 'extra lane'-badge — kanaal staat al in de funnel maar mag
   nogmaals worden toegevoegd (Google Ads/Meta met aparte campagne-set). */
.channel-picker-reuse {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--bg-info, #E8F0FE);
    color: var(--fg-info, #1557B0);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Doorstroom step value ── */
.funnel-doorstroom-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--zwart);
}
.funnel-doorstroom-label {
    font-size: 0.8rem;
    color: var(--grijs);
}

/* ── Conversie step grid ── */
.funnel-conversie-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
}
.funnel-conversie-value { font-size: 1.5rem; font-weight: 700; color: var(--zwart); }
.funnel-conversie-label { font-size: 0.75rem; color: var(--grijs); text-transform: uppercase; letter-spacing: 0.03em; }

/* Phase radio buttons (funnel step modal) */
.phase-radio-row {
    display: flex;
    gap: var(--sp-2);
}
.phase-radio-btn {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.15s, border-color 0.15s;
}
.phase-radio-btn:hover { background: var(--surface-alt); }
.phase-radio-btn input { display: none; }
.phase-radio-btn:has(input:checked) {
    background: color-mix(in srgb, var(--phase-color) 15%, white);
    border-color: var(--phase-color);
    font-weight: 600;
}

/* Archived service card */
.service-card.service-archived {
    opacity: 0.5;
}
.service-card.service-archived .service-card-name {
    text-decoration: line-through;
    color: var(--grijs-licht);
}

/* Dienst picker (catalog modal) */
.dienst-picker {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    max-height: 320px;
    overflow-y: auto;
}
.dienst-option {
    display: block;
    cursor: pointer;
    border: 2px solid var(--divider-soft);
    border-radius: var(--radius);
    transition: border-color 0.15s, background 0.15s;
}
.dienst-option input { display: none; }
.dienst-option-inner {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
}
.dienst-option:hover {
    border-color: var(--grijs-licht);
    background: var(--surface-alt);
}
.dienst-option.selected,
.dienst-option:has(input:checked) {
    border-color: var(--oranje);
    background: rgba(232, 124, 42, 0.06);
}

/* Datasource link chips (in service card) */
.ds-link-chips {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
    padding: var(--sp-2) var(--sp-5) var(--sp-3) var(--sp-5);
}
.ds-link-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 500;
    background: var(--surface-alt);
    color: var(--grijs);
    border: 1px solid var(--divider-soft);
    white-space: nowrap;
}
.ds-link-chip .icon { font-size: 13px; }
.ds-link-chip-connected { border-color: var(--groen); background: var(--groen-light); color: #3d7a3c; }

/* Datasource linking list (detail view) */
.ds-link-list {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.ds-link-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--creme);
    cursor: pointer;
    transition: background var(--transition);
    font-size: 0.85rem;
}
.ds-link-row:last-child { border-bottom: none; }
.ds-link-row:hover { background: rgba(245, 240, 235, 0.5); }
.ds-link-row-active { background: var(--groen-light); }
.ds-link-row-active:hover { background: #d8eed8; }

.ds-link-check {
    width: 16px;
    height: 16px;
    accent-color: var(--groen);
    flex-shrink: 0;
    cursor: pointer;
}
.ds-link-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.ds-link-icon .icon { font-size: 18px; color: var(--grijs); }
.ds-link-row-active .ds-link-icon .icon { color: var(--groen); }

.ds-link-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
.ds-link-name {
    font-weight: 500;
    color: var(--zwart);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ds-link-type {
    font-size: 0.72rem;
    color: var(--grijs-licht);
}

.ds-link-save-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-2) var(--sp-4);
    background: var(--geel-light);
    border: 1px solid var(--geel);
    border-radius: var(--radius-sm);
    margin-bottom: var(--sp-4);
}
.ds-link-save-bar .text-sm { color: var(--grijs); }

/* Diensten table */
.diensten-table {
    width: 100%;
    border-collapse: collapse;
}
.diensten-table th {
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--grijs);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 2px solid var(--divider-soft);
}
.diensten-table td {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--creme);
    vertical-align: middle;
}
.diensten-table tr:last-child td { border-bottom: none; }
.diensten-table tr:hover td { background: var(--surface-alt); }

/* Drag handle */
.drag-handle {
    cursor: grab;
    color: var(--grijs-licht);
    width: 36px;
    text-align: center;
}
.drag-handle:active { cursor: grabbing; }
.drag-handle .icon { font-size: 18px; }

/* Drag states */
.diensten-table tr.drag-active {
    opacity: 0.4;
}
.diensten-table tr.drag-over td {
    border-top: 2px solid var(--oranje);
}
.btn-link {
    background: none;
    border: none;
    color: var(--oranje);
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.btn-link:hover { text-decoration: underline; }

.table-simple {
    border-collapse: collapse;
}
.table-simple th {
    text-align: left;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--grijs);
    padding: var(--sp-1) var(--sp-2);
    border-bottom: 1px solid var(--border);
}
.table-simple td {
    padding: var(--sp-2);
    border-bottom: 1px solid var(--border-light);
    vertical-align: top;
}
.table-simple tr:last-child td { border-bottom: none; }

.ds-badges-row {
    display: flex;
    gap: var(--sp-1);
    flex-wrap: wrap;
}
.ds-badge-default {
    display: inline-block;
    font-size: 0.7rem;
    padding: 1px 8px;
    border-radius: 10px;
    background: rgba(124,183,123,0.12);
    color: #4a8f49;
    white-space: nowrap;
}

/* Catalog manager */
.catalog-list {
    display: flex;
    flex-direction: column;
    max-height: 400px;
    overflow-y: auto;
}
.catalog-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-2);
    border-bottom: 1px solid var(--creme);
}
.catalog-row:last-child { border-bottom: none; }
.catalog-row:hover { background: var(--surface-alt); }
.catalog-row-info {
    display: flex;
    flex-direction: column;
    min-width: 140px;
}
.catalog-row-ds {
    flex: 1;
    display: flex;
    gap: var(--sp-1);
    flex-wrap: wrap;
}
.catalog-row-actions {
    display: flex;
    gap: var(--sp-1);
    flex-shrink: 0;
}

/* Default datasource grid */
.ds-defaults-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2);
}
.ds-default-option {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.82rem;
    transition: all 0.12s;
}
.ds-default-option:hover { background: var(--surface-alt); }
.ds-default-active {
    background: rgba(124,183,123,0.1);
    border-color: var(--groen);
}
.ds-default-option input[type="checkbox"] {
    accent-color: var(--groen);
}

/* Responsive */
@media (max-width: 600px) {
    .phase-radio-grid {
        grid-template-columns: 1fr;
    }
    .sub-middel-row {
        flex-wrap: wrap;
    }
    .dienst-picker {
        max-height: 260px;
    }
}

/* Datasource checkbox list in dienst edit modal */
.ds-checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius);
    overflow: hidden;
}
.ds-checkbox-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    cursor: pointer;
    transition: background 0.15s;
    font-size: 0.85rem;
}
.ds-checkbox-row:hover { background: rgba(245, 240, 235, 0.5); }
.ds-checkbox-active { background: var(--groen-light); }
.ds-checkbox-active:hover { background: #d8eed8; }
.ds-checkbox-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--groen);
    flex-shrink: 0;
}
.ds-checkbox-icon { display: flex; align-items: center; }
.ds-checkbox-icon .icon { font-size: 16px; color: var(--grijs); }
.ds-checkbox-active .ds-checkbox-icon .icon { color: var(--groen); }
.ds-checkbox-name { font-weight: 500; flex: 1; }
.ds-checkbox-type { font-size: 0.75rem; color: var(--grijs); }

/* Datasource sync results */
.ds-results-card { border-top: 3px solid var(--oranje); }
.ds-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--sp-3);
}
.ds-metric-card {
    background: var(--surface-alt);
    border-radius: 8px;
    padding: var(--sp-3);
    text-align: center;
}
.ds-metric-highlight {
    background: var(--wit);
    border: 1px solid var(--divider-soft);
}
.ds-metric-value {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
}
.ds-metric-label {
    font-size: 0.75rem;
    color: var(--grijs);
    margin-top: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.ds-detail-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}
.ds-detail-table th,
.ds-detail-table td {
    padding: var(--sp-1) var(--sp-2);
    border-bottom: 1px solid var(--divider-soft);
    text-align: left;
}
.ds-detail-table th {
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--grijs);
}
.ds-detail-table td:nth-child(2),
.ds-detail-table td:nth-child(3),
.ds-detail-table th:nth-child(2),
.ds-detail-table th:nth-child(3) {
    text-align: right;
    white-space: nowrap;
}
.ds-detail-table tbody tr:hover { background: var(--surface-alt); }
.ds-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--sp-4);
}

/* ── Strategie sub-tab (diensten & locaties) ────────────────── */
.table-min {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.table-min th {
    text-align: left;
    font-weight: 500;
    color: var(--text-muted, #6b7280);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.4rem 0.4rem;
    border-bottom: 1px solid var(--divider-soft, #e5e7eb);
}
.table-min td {
    padding: 0.5rem 0.4rem;
    border-bottom: 1px solid var(--divider-soft, #e5e7eb);
    vertical-align: middle;
}
.table-min tbody tr:hover { background: var(--surface-alt, #f9fafb); }
.table-min .text-right { text-align: right; }

/* Actie-knoppen op één rij in compacte tabel */
.table-min-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    justify-content: flex-end;
}
.table-min-actions .btn-icon {
    padding: 4px;
    line-height: 1;
}

/* Locatie-type pills — vergelijkbaar met andere status pills in de app */
.loc-type-pill {
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.7rem;
    font-weight: 500;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.5;
}

/* Markten / Doelgroepen — chips op dienst-rijen + multi-select in modal */
.audience-chip {
    display: inline-block;
    padding: 2px 8px;
    margin: 1px 2px 1px 0;
    font-size: 0.72rem;
    font-weight: 500;
    border-radius: 999px;
    background: #eef3f8;
    color: #345b86;
    line-height: 1.5;
    white-space: nowrap;
}
.audience-pick {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--divider-soft);
    border-radius: 999px;
    background: var(--wit);
    cursor: pointer;
    font-size: 0.85rem;
    user-select: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.audience-pick:hover { background: var(--creme); }
.audience-pick input[type="checkbox"] { accent-color: var(--accent); width: 14px; height: 14px; }
.audience-pick:has(input:checked) { background: #eef3f8; border-color: #b6cce5; color: #2c5078; }
.loc-type-primary   { background: #e3f4e3; color: #2e6f30; }
.loc-type-secondary { background: #eef0f2; color: #4a4a4a; }
.loc-type-wijk      { background: #e8ecf3; color: #3b4c63; }
.loc-type-regio     { background: #fbeed1; color: #87601a; }

/* ── Pillars strategie-modus ────────────────────────────────── */
.pillar-mode-switcher {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--divider-soft, #e5e7eb);
}
.pillar-mode-btn {
    background: transparent;
    border: 1px solid transparent;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--text-muted, #6b7280);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s;
}
.pillar-mode-btn:hover { background: var(--surface-alt, #f9fafb); color: var(--text-primary, #111827); }
.pillar-mode-btn.pillar-mode-active {
    background: var(--accent-soft, #eaf1fb);
    color: var(--accent, #1a73e8);
    font-weight: 600;
}

.pillar-strategie-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 1.25rem;
    align-items: flex-start;
}

.pillar-card {
    background: white;
    border: 1px solid var(--divider-soft, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    overflow: hidden;
    transition: box-shadow 0.15s;
}
.pillar-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }

.pillar-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid var(--divider-soft, #e5e7eb);
    background: var(--surface-alt, #f9fafb);
}
.pillar-card-title {
    margin: 0.25rem 0 0 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary, #111827);
}
.pillar-gap-pill {
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 4px;
    letter-spacing: 0.02em;
}
.pillar-card-body { padding: 0.75rem 0.9rem; }

.pillar-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.4rem;
}
.pillar-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--surface-alt, #f3f4f6);
    border: 1px solid var(--divider-soft, #e5e7eb);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--text-primary, #1f2937);
}
.pillar-meta-chip.pillar-meta-empty {
    color: var(--text-muted, #9ca3af);
    font-style: italic;
    background: transparent;
    border-style: dashed;
}

.pillar-modifier-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0.3rem 0;
}
.pillar-modifier-tag {
    background: #f3e8ff;
    color: #6b21a8;
    padding: 1px 7px;
    font-size: 0.7rem;
    border-radius: 4px;
    font-weight: 500;
}

.pillar-stats-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--divider-soft, #e5e7eb);
    font-size: 0.78rem;
}
.pillar-stat { display: inline-flex; align-items: center; gap: 3px; }

/* Klikbare keyword-teller die expand-detail opent */
.pillar-keywords-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    font: inherit;
    color: inherit;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.15s;
}
.pillar-keywords-toggle:hover {
    background: var(--creme, #F4F2F0);
}

/* Expand-detail: pagina-metrics + keyword-tabel onder de pillar-card */
.pillar-expand-detail {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--divider-soft, #e5e7eb);
}
.pillar-page-metrics {
    background: var(--creme, #F4F2F0);
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 0.6rem;
}
.pillar-metric-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    font-size: 0.82rem;
}
.pillar-metric {
    display: inline-flex;
    flex-direction: column;
    gap: 1px;
}
.pillar-metric-label {
    font-size: 0.68rem;
    color: var(--text-tertiary, var(--grijs));
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
/* SEO sub-mode toggle: Keywords / Discovery */
.seo-submode-toggle {
    display: inline-flex;
    gap: 4px;
    background: var(--creme, #F4F2F0);
    border: 1px solid var(--divider-soft, #e8e0d8);
    border-radius: 6px;
    padding: 3px;
    margin-bottom: 0.75rem;
}
.seo-submode-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: none;
    background: transparent;
    border-radius: 4px;
    font-size: 0.82rem;
    color: var(--text-tertiary, var(--grijs));
    cursor: pointer;
    transition: all 0.15s;
}
.seo-submode-btn:hover {
    color: var(--text-primary, var(--zwart));
    background: rgba(255,255,255,0.5);
}
.seo-submode-btn.is-active {
    background: var(--wit, #fff);
    color: var(--accent, var(--oranje));
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.seo-submode-badge {
    display: inline-block;
    min-width: 18px;
    padding: 0 5px;
    background: var(--accent, var(--oranje));
    color: #fff;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    text-align: center;
    line-height: 16px;
}

/* Sectie-koppen in pillar-expand-detail (Doel-keywords vs Overig) */
.pillar-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 4px 2px;
    margin-bottom: 4px;
    font-size: 0.78rem;
}
.pillar-section-header strong { font-weight: 600; }
.pillar-kw-table-target tbody tr td {
    background: rgba(232, 124, 42, 0.05);
}
.pillar-target-on {
    color: var(--accent, var(--oranje));
    background: rgba(232, 124, 42, 0.15);
}
.pillar-target-on:hover { background: rgba(232, 124, 42, 0.25); }
.pillar-target-off {
    color: var(--text-tertiary, var(--grijs));
    opacity: 0.5;
}
.pillar-target-off:hover {
    opacity: 1;
    color: var(--accent, var(--oranje));
    background: rgba(232, 124, 42, 0.08);
}

.pillar-kw-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 6px 8px;
    margin-bottom: 6px;
    background: rgba(232, 124, 42, 0.04);
    border: 1px solid var(--creme-dark, #e8e0d8);
    border-radius: 4px;
    font-size: 0.78rem;
}
.pillar-kw-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.pillar-kw-table th,
.pillar-kw-table td {
    padding: 5px 6px;
    border-bottom: 1px solid var(--creme, #F4F2F0);
}
.pillar-kw-table thead th {
    background: var(--creme, #F4F2F0);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--text-tertiary, var(--grijs));
    text-align: left;
}
.pillar-kw-table tbody tr:last-child td { border-bottom: none; }
.pillar-kw-table tbody tr:hover td { background: rgba(232, 124, 42, 0.04); }

.pillar-target-row code {
    background: var(--surface-alt, #f3f4f6);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.72rem;
}

/* Gap-status diagnose — vertelt WAAROM een pillar de huidige status heeft */
.pillar-diag {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 8px 10px;
    margin-top: 0.5rem;
    border-radius: 6px;
    font-size: 0.78rem;
    line-height: 1.35;
    flex-wrap: wrap;
}
.pillar-diag-icon {
    flex-shrink: 0;
    line-height: 1;
    padding-top: 1px;
}
.pillar-diag-text {
    flex: 1;
    min-width: 0;
}
.pillar-diag-extra {
    flex-basis: 100%;
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px dashed currentColor;
    opacity: 0.85;
}
.pillar-diag-list {
    margin: 4px 0 0 0;
    padding-left: 16px;
    list-style: disc;
}
.pillar-diag-list code {
    background: rgba(255,255,255,0.6);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.72rem;
}
.pillar-diag-action {
    flex-basis: 100%;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed currentColor;
    opacity: 0.92;
    font-size: 0.75rem;
}

/* ── Pillar-cluster: parent + losse children met tree-connector ─ */
.pillar-cluster {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.pillar-cluster .pillar-card { margin-bottom: 0; }

.pillar-branch {
    position: relative;
    margin-top: 0.5rem;
    padding-left: 28px;
}
/* Verticale tree-lijn die zich uitstrekt van branch-header naar onder */
.pillar-branch::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 28px;
    bottom: 18px;
    width: 2px;
    background: linear-gradient(180deg, var(--divider-soft, #e5e7eb) 0%, var(--divider-soft, #e5e7eb) 70%, rgba(229,231,235,0) 100%);
    border-radius: 1px;
}

.pillar-branch-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    margin-left: -14px;
    padding-left: 4px;
}
.pillar-branch-title {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pillar-children-count {
    background: white;
    border: 1px solid var(--divider-soft, #e5e7eb);
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 4px;
    font-size: 0.7rem;
    text-transform: none;
    color: var(--text-primary, #111827);
    letter-spacing: 0;
}
.pillar-branch-empty {
    position: relative;
    padding: 0.5rem 0.4rem 0.5rem 24px;
    font-size: 0.78rem;
    color: var(--text-muted, #6b7280);
    font-style: italic;
    background: var(--surface-alt, #f9fafb);
    border: 1px dashed var(--divider-soft, #e5e7eb);
    border-radius: 6px;
}
.pillar-branch-empty .pillar-branch-connector {
    position: absolute;
    left: -14px;
    top: 50%;
    width: 16px;
    height: 2px;
    background: var(--divider-soft, #e5e7eb);
    transform: translateY(-50%);
}
.pillar-branch-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
/* Child-card als losse mini-card onder de branch-lijn */
.pillar-child-card {
    position: relative;
    padding-left: 0;
}
/* Horizontale connector van de tree-lijn naar de child-card */
.pillar-child-connector {
    position: absolute;
    left: -14px;
    top: 28px;
    width: 16px;
    height: 2px;
    background: var(--divider-soft, #e5e7eb);
}
/* Bij de laatste child: knip de verticale lijn boven de connector af met een mask */
.pillar-child-card.pillar-child-card-last::after {
    content: '';
    position: absolute;
    left: -14px;
    top: 28px;
    bottom: 0;
    width: 2px;
    background: var(--bg-primary, #fff);
}
.pillar-child-card-inner {
    background: white;
    border: 1px solid var(--divider-soft, #e5e7eb);
    border-radius: 6px;
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.pillar-child-card-inner:hover {
    border-color: #c7d2db;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.pillar-child-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem 0.3rem;
}
.pillar-child-card-title-area {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.pillar-child-card-title {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary, #111827);
    line-height: 1.25;
}
.pillar-child-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    font-size: 0.72rem;
    color: var(--text-muted, #6b7280);
    padding: 0 0.7rem 0.4rem;
}
.pillar-child-meta > span { display: inline-flex; align-items: center; gap: 3px; }
.pillar-child-url {
    background: var(--surface-alt, #f3f4f6);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.7rem;
    font-family: ui-monospace, monospace;
}
.pillar-child-url-actual {
    background: #fff4e0;
    color: #8a5a18;
}
.pillar-child-kw-count {
    font-size: 0.7rem;
    color: var(--text-muted, #6b7280);
    background: var(--surface-alt, #f3f4f6);
    padding: 1px 6px;
    border-radius: 4px;
    white-space: nowrap;
}
.pillar-child-pos {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 7px;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 4px;
    white-space: nowrap;
}
.pillar-child-pos.pos-good  { background: #e3f4e3; color: #2e6f30; }
.pillar-child-pos.pos-ok    { background: #fff7d6; color: #87601a; }
.pillar-child-pos.pos-mid   { background: #ffe7d0; color: #b56412; }
.pillar-child-pos.pos-bad   { background: #ffe1e1; color: #b91c1c; }
.pillar-child-pos.pos-empty { background: #eef0f2; color: #9ca3af; font-style: italic; }

/* Diagnose-strook in steunpagina-card */
.pillar-child-diag {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 8px 12px;
    border-top: 1px solid rgba(0,0,0,0.05);
    font-size: 0.72rem;
    line-height: 1.4;
}
.pillar-child-diag-icon {
    flex-shrink: 0;
    line-height: 1;
    padding-top: 1px;
}
.pillar-child-diag-body { flex: 1; min-width: 0; }
.pillar-child-diag-reason { font-weight: 500; }
.pillar-child-diag-action {
    margin-top: 3px;
    opacity: 0.85;
    font-style: italic;
}

/* ── Keyword-grid modal ─────────────────────────────────────── */
.kg-controls {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--divider-soft, #e5e7eb);
    margin-bottom: 0.4rem;
}
.kg-grid-header,
.kg-row {
    display: grid;
    grid-template-columns: 28px 1fr 90px 140px;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.5rem;
    border-bottom: 1px solid var(--divider-soft, #f1f5f9);
    font-size: 0.85rem;
}
.kg-grid-header {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted, #6b7280);
    background: var(--surface-alt, #f9fafb);
    border-radius: 4px;
    padding: 0.4rem 0.5rem;
    margin-bottom: 0.2rem;
}
.kg-grid-rows {
    max-height: 50vh;
    overflow-y: auto;
    border: 1px solid var(--divider-soft, #e5e7eb);
    border-radius: 6px;
}
.kg-row {
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background 0.1s, border-color 0.1s;
}
.kg-row:hover { background: var(--surface-alt, #f9fafb); }

/* Reeds gekoppeld én aangevinkt = blijft in pillar (groen) */
.kg-row:has(.kg-cb[data-initial="1"]:checked) {
    background: #f1f8f2;
    border-left-color: #4ea155;
}
.kg-row:has(.kg-cb[data-initial="1"]:checked):hover { background: #e7f1e8; }
.kg-row:has(.kg-cb[data-initial="1"]:checked) .kg-kw { color: #2e6f30; font-weight: 600; }

/* Niet-gekoppeld én aangevinkt = wordt toegevoegd (blauw) */
.kg-row:has(.kg-cb[data-initial="0"]:checked) {
    background: #eaf3fe;
    border-left-color: var(--accent, #1a73e8);
}
.kg-row:has(.kg-cb[data-initial="0"]:checked):hover { background: #d9e9fd; }
.kg-row:has(.kg-cb[data-initial="0"]:checked) .kg-kw { color: #1a73e8; font-weight: 600; }

/* Initieel gekoppeld maar nu uitgevinkt = wordt ontkoppeld (rood) */
.kg-row:has(.kg-cb[data-initial="1"]:not(:checked)) {
    background: #fef2f2;
    border-left-color: #dc2626;
}
.kg-row:has(.kg-cb[data-initial="1"]:not(:checked)):hover { background: #fde8e8; }
.kg-row:has(.kg-cb[data-initial="1"]:not(:checked)) .kg-kw {
    color: #b91c1c;
    text-decoration: line-through;
    font-weight: 500;
}

.kg-cb { width: 18px; height: 18px; accent-color: var(--accent, #1a73e8); cursor: pointer; }

.color-blauw { color: var(--accent, #1a73e8); }
.color-rood  { color: #b91c1c; }
.kg-kw { font-weight: 500; }
.kg-vol {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary, #111827);
    font-weight: 500;
}
.kg-status {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    justify-content: flex-end;
}

/* Keyword badges */
.kw-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 7px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 500;
}
.kw-badge-success { background: #d8f0d8; color: #2e6f30; }
.kw-badge-warning { background: #fbeed1; color: #87601a; }
.kw-badge-neutral { background: #e8ecf3; color: #3b4c63; }
.kw-badge-main    { background: #fff7e6; color: #d97706; border: 1px solid #fbbf24; padding: 0 5px; font-weight: 700; }
.kw-pos-badge {
    display: inline-block;
    padding: 1px 6px;
    background: #f3f4f6;
    border-radius: 4px;
    font-size: 0.7rem;
    color: var(--text-muted, #6b7280);
    font-variant-numeric: tabular-nums;
}

/* Compacte weergave van een gekozen doelpagina (i.p.v. input + knop) */
.strategy-target-form-set .strategy-target-current {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #eaf3fe;
    border: 1px solid rgba(26,115,232,0.2);
    border-left: 4px solid var(--accent, #1a73e8);
    border-radius: 6px;
}
.strategy-target-current-icon { color: var(--accent, #1a73e8); flex-shrink: 0; }
.strategy-target-current-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #1a4d9e;
    flex-shrink: 0;
}
.strategy-target-current-url {
    flex: 1;
    min-width: 0;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.85rem;
    color: var(--text-primary, #111827);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Hint-rij standalone (zonder section-title) */
.seo-detail-hint-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}
/* Hint in section-title als doelpagina nog niet gekozen */
.seo-detail-hint {
    margin-left: auto;
    font-size: 0.7rem;
    font-weight: 500;
    color: #87601a;
    background: #fbeed1;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: none;
    letter-spacing: 0;
}

/* Collapsed "voer URL handmatig in" toggle voor doelpagina */
.strategy-target-manual {
    margin-top: 8px;
    padding: 0 4px;
}
.strategy-target-manual-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    color: var(--accent, #1a73e8);
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 5px;
    list-style: none;
    user-select: none;
    transition: background 0.1s;
}
.strategy-target-manual-toggle::-webkit-details-marker { display: none; }
.strategy-target-manual-toggle:hover {
    background: var(--surface-alt, #f3f4f6);
}
.strategy-target-manual[open] .strategy-target-manual-toggle {
    color: var(--text-primary, #111827);
    font-weight: 500;
}
.strategy-target-manual-form {
    padding: 8px 10px 4px;
}
.strategy-target-current-url:hover {
    color: var(--accent, #1a73e8);
    text-decoration: underline;
}
/* Edit-rij is standaard verborgen; krijgt display:flex via inline style + .is-editing toggle */
.strategy-target-form-set .strategy-target-edit.is-editing {
    display: flex;
}

/* (Oude .kw-history-source banner is vervangen door .seo-history-source-tag in de section-title) */

/* Partiele (lopende) maand in history-tabel: licht gedimd + visueel anders */
.kw-history-table .kw-history-partial {
    background: rgba(252, 233, 175, 0.18) !important;
    font-style: italic;
}
.kw-history-table th.kw-history-partial {
    color: #87601a;
    font-style: normal;
    font-weight: 700;
}
.kw-history-legend {
    margin-top: 6px;
    font-size: 0.72rem;
    color: var(--text-muted, #6b7280);
}

/* "Lopend" badge naast periode-label */
/* Kleine badge naast positie als die uit een fallback-periode komt */
.seo-fallback-badge {
    display: inline-block;
    margin-left: 4px;
    font-size: 0.7rem;
    color: var(--text-muted, #9ca3af);
    cursor: help;
}

.funnel-period-partial {
    display: inline-block;
    padding: 1px 6px;
    margin-left: 6px;
    font-size: 0.65rem;
    font-weight: 600;
    color: #87601a;
    background: #fbeed1;
    border: 1px solid #f0c478;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Geen-resultaten state in de SEO keyword tabel */
.seo-no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 3rem 1.5rem;
    background: var(--surface-alt, #f9fafb);
    border: 1px dashed var(--divider-soft, #e5e7eb);
    border-radius: 8px;
    text-align: center;
}
.seo-no-results-icon {
    color: var(--text-muted, #9ca3af);
    opacity: 0.6;
}
.seo-no-results-icon .icon { font-size: 38px !important; }
.seo-no-results-title {
    font-weight: 600;
    color: var(--text-primary, #111827);
    font-size: 0.95rem;
}
.seo-no-results-body {
    font-size: 0.85rem;
    color: var(--text-muted, #6b7280);
    max-width: 460px;
    line-height: 1.45;
}

/* UTM-source badges (GBP detection in Search Console pages) */
.utm-source-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 6px;
    font-size: 0.65rem;
    font-weight: 600;
    border-radius: 4px;
    letter-spacing: 0.04em;
    margin-left: 4px;
    vertical-align: middle;
    text-transform: uppercase;
}
.utm-source-gbp   { background: #e3f2fd; color: #1565c0; border: 1px solid #bbdefb; }
.utm-source-other { background: #F4F2F0; color: #757575; border: 1px solid #e0e0e0; }

.empty-state-mini {
    padding: 1.2rem 0.8rem;
    color: var(--text-muted, #6b7280);
    background: var(--surface-alt, #f9fafb);
    border: 1px dashed var(--divider-soft, #e5e7eb);
    border-radius: 6px;
    text-align: center;
    font-size: 0.85rem;
}

@media (max-width: 900px) {
    .strat-grid { grid-template-columns: 1fr !important; }
}

/* ─── Gebruikersbeheer (admin) ────────────────────────────────────── */
.users-table-wrap {
    background: white;
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius);
    overflow: hidden;
}
.users-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.users-table thead th {
    background: var(--surface-alt);
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    color: var(--text-tertiary);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--divider-soft);
}
.users-table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--divider-soft);
    vertical-align: middle;
}
.users-table tbody tr:last-child td { border-bottom: none; }
.users-table tbody tr:hover { background: var(--surface-alt); }
.users-table tbody tr.is-inactive { opacity: 0.55; }
.users-table .text-right { text-align: right; }

.users-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent-light);
    color: var(--accent-hover);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.78rem;
}
img.users-avatar { object-fit: cover; }
.users-email { font-family: ui-monospace, monospace; font-size: 0.85rem; color: var(--text-secondary); }
.users-self-badge {
    margin-left: 6px;
    padding: 1px 6px;
    background: var(--accent-light);
    color: var(--accent-hover);
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.users-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}
.users-role-badge.role-admin        { background: #fde2d4; color: #a14817; }
.users-role-badge.role-brandmanager { background: #e7f4d4; color: #4d7218; }
.users-role-badge.role-specialist   { background: #e0e7ff; color: #3730a3; }
.users-role-badge.role-default      { background: var(--surface-alt); color: var(--text-tertiary); }

.users-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.users-status-active   { background: #d8f0d8; color: #2e6f30; }
.users-status-inactive { background: #f3f4f6; color: #6b7280; }

.btn-icon-danger { color: var(--rood, #d4633a); }
.btn-icon-danger:hover { background: #fde2d4; }

/* Users-table acties — horizontaal naast elkaar (override default btn-icon block-gedrag) */
.users-table td:last-child {
    white-space: nowrap;
}
.users-table td:last-child .btn-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    margin-left: 2px;
    vertical-align: middle;
}
.users-table tbody td {
    padding: 10px 16px;   /* iets compacter dan 12px */
}

/* Users-modal — eigen checkbox-row zonder de oranje accent-styling van .checkbox-label */
.users-checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--zwart);
    user-select: none;
}
.users-checkbox-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
}
.users-checkbox-row:hover { color: var(--accent); }

/* Required-asterisk in form-labels */
.form-label .required {
    color: var(--rood, #d4633a);
    margin-left: 2px;
}

/* Custom context menu — rechts-klik op keyword-rij */
.seo-context-menu {
    position: fixed;
    z-index: 9999;
    min-width: 200px;
    background: white;
    border: 1px solid var(--divider-soft);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    padding: 4px;
    font-size: 0.85rem;
    user-select: none;
    overflow: hidden;
}
.seo-context-menu-header {
    padding: 6px 10px 8px;
    border-bottom: 1px solid var(--divider-soft);
    margin-bottom: 4px;
    color: var(--text-tertiary);
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 320px;
}
.seo-context-menu-header strong {
    color: var(--zwart);
    font-family: ui-monospace, monospace;
    font-size: 0.85rem;
}
.seo-context-menu-item {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 7px 12px;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--zwart);
    font-size: 0.85rem;
}
.seo-context-menu-item:hover { background: var(--surface-alt); }
.seo-context-menu-item.is-danger { color: var(--rood, #d4633a); }
.seo-context-menu-item.is-danger:hover { background: #fde2d4; }
.seo-context-menu-divider {
    height: 1px;
    background: var(--divider-soft);
    margin: 4px 2px;
}

/* Channel-icons admin pagina */
.channel-phase-group { margin-bottom: var(--sp-5); }
.channel-phase-title {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--sp-2);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--divider-soft);
}
.channel-icons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--sp-3);
}
.channel-icon-card {
    background: white;
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius);
    padding: var(--sp-3);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}
.channel-icon-card-preview {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    background: #f9fafb;
    border: 1px solid var(--divider-soft);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.channel-icon-preview {
    width: 48px;
    height: 48px;
    object-fit: contain;
}
.channel-icon-empty {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}
.channel-icon-card-meta {
    flex: 1;
    min-width: 0;
}
.channel-icon-card-label {
    font-weight: 600;
    font-size: 0.88rem;
    margin-bottom: 2px;
    color: var(--zwart);
}
.channel-icon-card-key {
    font-size: 0.7rem;
    color: var(--text-tertiary);
    background: var(--surface-alt);
    padding: 1px 6px;
    border-radius: 3px;
    font-family: ui-monospace, monospace;
}
.channel-icon-card-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.channel-icon-card-actions .btn { cursor: pointer; }

/* Geselecteerde keyword-rij — accent blauwe achtergrond */
.seo-keyword-table-compact tbody tr.seo-row-selected {
    background: rgba(26,115,232,0.10);
}
.seo-keyword-table-compact tbody tr.seo-row-selected:hover {
    background: rgba(26,115,232,0.15);
}
.seo-keyword-table-compact tbody tr.seo-row-selected td:first-child {
    box-shadow: inset 3px 0 0 var(--accent, #1a73e8);
}

/* Service-badge in SEO Keywords labels-kolom */
.seo-service-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 4px;
    background: #e8f5e9;
    color: #2e6f30;
    border: 1px solid #b5dcc0;
    white-space: nowrap;
}
.seo-service-badge.is-primary {
    background: #fef0e4;
    color: #87601a;
    border-color: #fbeed1;
}
.seo-service-badge .icon { flex-shrink: 0; }

/* Klikbare service-badge — opent service-picker voor 1 keyword */
.seo-service-badge-clickable {
    cursor: pointer;
    font-family: inherit;
}
.seo-service-badge-clickable:hover {
    filter: brightness(0.95);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.seo-service-badge-empty {
    cursor: pointer;
    font-family: inherit;
    background: transparent;
    color: var(--text-tertiary, var(--grijs));
    border: 1px dashed var(--divider-soft, #e8e0d8);
    font-weight: 500;
    opacity: 0.7;
}
.seo-service-badge-empty:hover {
    opacity: 1;
    border-color: var(--accent, var(--oranje));
    color: var(--accent, var(--oranje));
}

/* Sub-header in context-menu (groep-label) */
.seo-context-menu-subheader {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 12px 2px;
}

/* Brand-card periode-/sync-info onder metrics */
.brand-card-period {
    padding: 6px 12px;
    font-size: 0.75rem;
    color: var(--text-tertiary);
    border-top: 1px solid var(--divider-soft);
    display: flex;
    align-items: center;
    gap: 4px;
}
.brand-card-period strong {
    color: var(--zwart);
    font-weight: 600;
}
.brand-card-period .icon { flex-shrink: 0; }

/* Event-values modal — kleine helpers */
.form-input-sm {
    padding: 4px 8px;
    font-size: 0.85rem;
    border: 1px solid var(--divider-soft);
    border-radius: 4px;
}
.form-input-sm:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 2px rgba(26,115,232,0.12);
}
.badge-mini {
    display: inline-block;
    padding: 1px 5px;
    font-size: 0.65rem;
    font-weight: 700;
    background: var(--accent-light, #e3f2fd);
    color: var(--accent, #1a73e8);
    border-radius: 3px;
    margin-left: 4px;
    vertical-align: middle;
}

/* Funnel-type radio kaarten — visuele selectie */
.funnel-type-option:hover > div {
    border-color: var(--accent) !important;
}
.funnel-type-option input[type="radio"]:checked + div {
    border-color: var(--accent) !important;
    background: var(--accent-light) !important;
}

/* Funnel-toolbar — alle pills/dropdowns/buttons even hoog (44px, gelijk
   aan de period-selector) zodat de horizontale lijn rustig oogt. */
.funnel-toolbar {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}
.funnel-toolbar .funnel-period-selector,
.funnel-toolbar .funnel-type-badge,
.funnel-toolbar .btn,
.funnel-toolbar .btn-sm {
    height: 44px;
    box-sizing: border-box;
}

/* Funnel-type badge in toolbar (read-only — wijzigen via funnel-bewerken) */
.funnel-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid transparent;
    height: 32px;
    box-sizing: border-box;
    white-space: nowrap;
}
.funnel-type-badge.type-ecom {
    background: #e8f5e9;
    color: #2e6f30;
    border-color: #b5dcc0;
}
.funnel-type-badge.type-lead {
    background: #fef0e4;
    color: #87601a;
    border-color: #fbeed1;
}

/* Pill op de funnel-cards in het overzicht — duidelijk zichtbaar met
   optioneel custom icoon dat via /channel-icons te uploaden is. */
.funnel-type-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 8px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    border: 1px solid transparent;
    margin-bottom: 8px;
    white-space: nowrap;
}
.funnel-type-pill-ecom {
    background: #e8f5e9;
    color: #2e6f30;
    border-color: #b5dcc0;
}
.funnel-type-pill-lead {
    background: #fef0e4;
    color: #87601a;
    border-color: #fbeed1;
}
.funnel-type-pill-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}
.funnel-type-pill-emoji {
    font-size: 1.05rem;
    line-height: 1;
}

/* Info-icoon naast lane-titel als organisch-totaal lane gededupliceerd is */
.lane-dedup-hint {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    color: var(--grijs);
    cursor: help;
    opacity: 0.7;
}
.lane-dedup-hint:hover { opacity: 1; }

/* GA4 ↔ Business Profile product-link status — kleurt actief/inactief */
.lane-gmb-status { opacity: 0.85; }
.lane-gmb-status.is-active   { color: var(--fg-success, #1e7a36); opacity: 1; }
.lane-gmb-status.is-inactive {
    color: #fff;
    background: var(--rood, #D4633A);
    opacity: 1;
    padding: 2px 6px 2px 4px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
}
.lane-gmb-status.is-inactive:hover { filter: brightness(1.1); }
.lane-gmb-status-label { line-height: 1; }

/* ═══════════════════════════════════════════════════════════════
   PORTFOLIO DASHBOARD — herontwerp v2 (mei 2026)
   ═══════════════════════════════════════════════════════════════ */

/* HERO — groot, rustig, met subtiele kleurstrook */
.dash-hero {
    position: relative;
    margin: 0 0 var(--sp-5, 32px);
    padding: 0 0 var(--sp-4, 24px);
}
.dash-hero-stripe {
    position: relative;
    height: 6px;
    margin: 0 0 var(--sp-4, 32px) 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent, #e33b2a) 0%, #d65cc8 45%, #a69cf3 75%, #F4F2F0 100%);
}
.dash-hero-content {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4, 32px);
}
.dash-hero-title {
    /* Kleiner en gelijkgetrokken met de pa-page headers elders. */
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0;
    color: var(--ink, #111);
}
.dash-hero-subtitle {
    flex: 1 1 320px;
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-secondary, #57595c);
}
.dash-hero-subtitle strong { color: var(--ink, #111); font-weight: 600; }

/* Stat-rij — horizontaal, geen kaders, alleen typografische hiërarchie */
.dash-hero-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--sp-4, 24px);
    padding: var(--sp-3) 0;
    border-top: 1px solid var(--divider-soft, #e7e8e9);
    border-bottom: 1px solid var(--divider-soft, #e7e8e9);
}
.dash-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.dash-stat-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ink, #111);
}
.dash-stat-label {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary, #57595c);
}
.dash-stat-alert .dash-stat-value { color: var(--rood, #d4633a); }

/* Section header — uniforme titel met inline-actions rechts */
.dash-section { margin: var(--sp-5, 40px) 0; }
.dash-section-header {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
    margin-bottom: var(--sp-3);
}
.dash-section-title {
    flex: 1;
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ink, #111);
}

/* Filter-bar — compacter dan de oude */
.dash-filter-bar {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
}
.dash-search-input {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid var(--divider-soft, #d5d7d8);
    border-radius: 8px;
    padding: 6px 10px;
    min-width: 220px;
    color: var(--text-secondary);
}
.dash-search-input:focus-within {
    border-color: var(--accent);
    outline: 2px solid color-mix(in srgb, var(--accent) 20%, transparent);
    outline-offset: -1px;
}
.dash-search-input input {
    border: 0;
    outline: 0;
    background: transparent;
    flex: 1;
    font-size: 0.875rem;
    color: var(--ink);
}

/* Brand-grid + cards */
.dash-brand-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--sp-3);
}
.dash-brand-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--divider-soft, #e7e8e9);
    border-radius: 12px;
    padding: var(--sp-4, 20px);
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.dash-brand-card:hover {
    border-color: var(--accent, #1A73E8);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px -12px rgba(0,0,0,0.12);
}
.dash-brand-card-header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
}
.dash-brand-logo {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--accent, #e33b2a), #d65cc8);
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.dash-brand-titles { flex: 1; min-width: 0; }
.dash-brand-name {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 2px 0;
    color: var(--ink, #111);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dash-brand-industry {
    font-size: 0.8rem;
    color: var(--text-secondary, #57595c);
    margin: 0;
}

/* Metrics-grid binnen card */
.dash-brand-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-2);
    padding: var(--sp-2) 0;
    margin-bottom: var(--sp-3);
    border-top: 1px solid var(--divider-soft, #e7e8e9);
    border-bottom: 1px solid var(--divider-soft, #e7e8e9);
}
.dash-brand-card .brand-metric {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 0;
}
.dash-brand-card .brand-metric .metric-value {
    /* Unified KPI-typografie: Geist Mono medium (500) — zelfde stijl
       als pa-kpi-tile-val en de andere dashboards. */
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: -0.3px;
    color: #18181B;
}
.dash-brand-card .brand-metric .metric-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary, #57595c);
}
.dash-brand-no-metrics {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.85rem;
    padding: var(--sp-2) 0;
}

.dash-brand-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    margin-top: auto;
}
.dash-brand-meta {
    flex: 1;
    min-width: 0;
    font-size: 0.75rem;
    color: var(--text-secondary, #57595c);
}
.dash-brand-meta .brand-card-period {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.dash-brand-counts {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--text-secondary, #57595c);
    font-size: 0.8rem;
}
.dash-brand-count {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.dash-brand-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ink, #111);
    color: #fff;
    transition: background 0.15s;
}
.dash-brand-card:hover .dash-brand-cta {
    background: var(--accent, #e33b2a);
}

/* Portfolio dashboard — sync-fouten lijst */
.portfolio-sync-errors {
    /* Subtieler dan een fel rood alert-blok — meer 'waarschuwing die je moet
       aanpakken' dan 'alarm'. Behoudt de urgentie via het icoon en de rode
       accenten in de rijen zelf. */
    margin: var(--sp-3) 0;
    padding: 14px 16px;
    background: #FDF5F3;
    border: 1px solid #F1DCD5;
    border-radius: 10px;
}
.portfolio-sync-errors-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 600;
    color: #7C2D12;
}
.portfolio-sync-errors-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: var(--radius, 8px);
    overflow: hidden;
    font-size: 0.875rem;
}
.portfolio-sync-errors-table thead th {
    text-align: left;
    padding: 8px 12px;
    background: var(--surface-alt, #F4F2F0);
    font-weight: 600;
    color: var(--grijs);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.portfolio-sync-errors-table tbody td {
    padding: 10px 12px;
    border-top: 1px solid var(--divider-soft);
    vertical-align: middle;
}
.portfolio-sync-error-msg {
    color: #9A3412;
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 11.5px;
    word-break: break-word;
    max-width: 360px;
}
/* Wanneer .lane-dedup-hint een <button> is (klikbare info-toast i.p.v. native
   title-tooltip) — reset default button styling. */
button.lane-dedup-hint {
    background: transparent;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
}
button.lane-dedup-hint:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* SEO KPI — MoM/YoY toggle in de non-branded card */
.seo-kpi-cmp-toggle {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--accent);
    background: transparent;
    border: 1px solid var(--accent);
    border-radius: 4px;
    cursor: pointer;
    line-height: 1.4;
    transition: background 0.15s;
}
.seo-kpi-cmp-toggle:hover { background: var(--surface-alt, #F4F2F0); }

/* Discovery view — banner + actions */
.discovery-banner {
    display: flex;
    gap: var(--sp-3);
    align-items: flex-start;
    padding: var(--sp-3);
    margin: var(--sp-2) 0 var(--sp-3);
    background: var(--surface-alt, #F4F2F0);
    border-radius: var(--radius, 8px);
    border-left: 3px solid var(--accent);
}
.discovery-banner-icon {
    color: var(--accent);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding-top: 2px;
}
.discovery-banner-title {
    font-size: 0.95rem;
    margin-bottom: 2px;
    color: var(--ink, #111);
}
.discovery-banner-sub {
    line-height: 1.4;
}
.discovery-actions-cell {
    white-space: nowrap;
}
.discovery-actions-cell .btn-xs + .btn-xs {
    margin-left: 4px;
}

/* ============================================
   PILLARS — pillar → versterkings-acties → sub-pagina's
   ============================================ */

.pillars-wrapper {
    max-width: 1100px;
    margin: 0 auto;
}
.pillars-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.pillars-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.pillars-loading { padding: 60px 20px; text-align: center; color: var(--text-secondary); }

.pillars-empty {
    background: #faf8f5;
    border-radius: 16px;
    border: 1px dashed rgba(200, 180, 160, 0.4);
    padding: 60px 28px;
    text-align: center;
    color: var(--text-secondary);
}
.pillars-empty-icon { color: #c96f52; opacity: 0.5; margin-bottom: 8px; }
.pillars-empty h3 { margin: 0 0 8px; font-size: 18px; }

.pillars-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pillar-card {
    background: #fff;
    border-radius: 14px;
    border: 1px solid rgba(200, 180, 160, 0.3);
    box-shadow: 0 1px 4px rgba(80, 45, 30, 0.04);
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}
.pillar-card:hover { box-shadow: 0 2px 12px rgba(80, 45, 30, 0.08); }
.pillar-card.is-open { box-shadow: 0 4px 16px rgba(80, 45, 30, 0.1); }

.pillar-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    user-select: none;
}
.pillar-card-color {
    width: 5px;
    height: 36px;
    background: var(--pillar-color, #c96f52);
    border-radius: 4px;
    flex-shrink: 0;
}
.pillar-card-main { flex: 1; min-width: 0; }
.pillar-card-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 15px;
    margin-bottom: 2px;
}
.pillar-card-kw {
    font-size: 12px;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.pillar-card-counts {
    display: flex;
    align-items: center;
    gap: 6px;
}
.pillar-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
}
.pillar-count-todo { background: #aaa; }
.pillar-count-progress { background: #d9a55c; }
.pillar-count-done { background: #7ba373; }

.pillar-card-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 4px;
    border-radius: 6px;
    display: inline-flex;
}
.pillar-card-toggle:hover { background: rgba(0,0,0,0.04); }

.pillar-card-body {
    padding: 16px 20px 20px;
    border-top: 1px solid rgba(200, 180, 160, 0.2);
    background: #faf8f5;
}

.pillar-meta { margin-bottom: 18px; }
.pillar-meta-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 8px 0 4px;
}
.pillar-meta-input { font-size: 13px; }
.pillar-meta-desc { resize: vertical; min-height: 50px; }

.pillar-actions-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 8px;
}
.pillar-actions-header h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 4px;
}
.pillar-actions-buttons { display: flex; gap: 6px; }

.pillar-actions-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--text-tertiary);
    background: #fff;
    border: 1px dashed rgba(200, 180, 160, 0.4);
    border-radius: 8px;
    font-size: 13px;
}

.pillar-actions-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pillar-action-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid rgba(200, 180, 160, 0.25);
    border-radius: 8px;
    transition: border-color 0.15s;
}
.pillar-action-row:hover { border-color: rgba(201, 111, 82, 0.4); }

.pillar-action-status {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin-top: 2px;
}
.pillar-action-main { flex: 1; min-width: 0; }

.pillar-action-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 4px;
}
.pillar-action-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    outline: none;
    border-radius: 4px;
    padding: 1px 3px;
    min-width: 100px;
    word-break: break-word;
}
.pillar-action-title:hover { background: #f7f4ef; }
.pillar-action-title:focus { background: #fff; box-shadow: 0 0 0 2px rgba(201,111,82,0.2); }
.pillar-action-title.is-done {
    text-decoration: line-through;
    color: var(--text-tertiary);
}

.pillar-action-type-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
}
.pillar-action-prio {
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pillar-action-prio-high   { background: #fad8d2; color: #913030; }
.pillar-action-prio-medium { background: #f5e1bd; color: #6e4c1e; }
.pillar-action-prio-low    { background: #e8e8e8; color: #555; }

.pillar-action-desc {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
}
.pillar-action-link {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 3px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.pillar-action-link code { background: rgba(0,0,0,0.04); padding: 1px 5px; border-radius: 3px; }

.pillar-action-del {
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.15s;
}
.pillar-action-row:hover .pillar-action-del { opacity: 1; }
.pillar-action-del:hover { background: rgba(194,85,85,0.12); color: #c25555; }

.pillar-card-footer {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid rgba(200, 180, 160, 0.2);
    display: flex;
    justify-content: flex-end;
}
.pillar-delete-btn {
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    font-size: 11px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.pillar-delete-btn:hover { color: #c25555; }

.pillars-color-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.pillars-color-swatch {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
}
.pillars-color-swatch.is-selected {
    border-color: #fff;
    box-shadow: 0 0 0 2px #c96f52;
}

/* AI suggestions modal */
.pillars-suggestion-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 500px;
    overflow-y: auto;
    margin-top: 8px;
}
.pillars-suggestion-item {
    display: flex;
    gap: 10px;
    padding: 12px;
    background: #faf8f5;
    border-radius: 8px;
    border: 1px solid rgba(200, 180, 160, 0.3);
    cursor: pointer;
}
.pillars-suggestion-item:hover { background: #f7f4ef; }
.pillars-suggestion-item input[type="checkbox"] { margin-top: 4px; }
.pillars-suggestion-body { flex: 1; }
.pillars-suggestion-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
    font-size: 13px;
}
.pillars-suggestion-desc {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 6px;
    line-height: 1.4;
}
.pillars-suggestion-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}
.pillars-suggestion-meta code {
    background: rgba(0,0,0,0.05);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
}

/* ============================================
   COGOO — zoekwoordonderzoek + paginalanceringsplanning
   ============================================ */

.cogoo-wrapper {
    background: #faf8f5;
    border-radius: 12px;
    border: 1px solid rgba(200, 180, 160, 0.25);
    overflow: hidden;
}

.cogoo-tabs {
    display: flex;
    gap: 4px;
    padding: 10px 12px 0;
    background: linear-gradient(180deg, #fdf1e7 0%, #faf8f5 100%);
    border-bottom: 1px solid rgba(200, 180, 160, 0.2);
}

.cogoo-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 500;
    border-radius: 10px 10px 0 0;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: background 0.15s ease, color 0.15s ease;
}
.cogoo-tab:hover { background: rgba(201, 111, 82, 0.06); color: var(--text-primary); }
.cogoo-tab.is-active { background: #faf8f5; color: #c96f52; border-bottom-color: #c96f52; }

.cogoo-sub { padding: 16px; }
.cogoo-loading { padding: 60px 20px; text-align: center; color: var(--text-secondary); }

.cogoo-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
}
.cogoo-toolbar-left, .cogoo-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cogoo-legend {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.cogoo-legend-add {
    background: transparent;
    border: 1px dashed rgba(200, 180, 160, 0.5);
    color: var(--text-secondary);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    cursor: pointer;
}
.cogoo-legend-add:hover { border-color: #c96f52; color: #c96f52; }
.cogoo-legend-item { display: inline-flex; align-items: center; gap: 2px; }
.cogoo-pillar-del-btn {
    background: transparent; border: none; cursor: pointer;
    color: var(--text-tertiary, #9b8d80); padding: 0 2px;
    display: inline-flex; align-items: center; border-radius: 4px; line-height: 1;
}
.cogoo-pillar-del-btn:hover { color: var(--rood, #c0392b); background: var(--rood-light, #fde8e8); }

.cogoo-table-wrap {
    overflow-x: auto;
    border: 1px solid rgba(200, 180, 160, 0.25);
    border-radius: 8px;
    background: #fff;
}
.cogoo-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.cogoo-table thead th {
    background: #f1ede5;
    text-align: left;
    padding: 9px 10px;
    font-weight: 600;
    font-size: 12px;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(200, 180, 160, 0.3);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 2;
}
.cogoo-table tbody td {
    padding: 4px 6px;
    border-bottom: 1px solid rgba(200, 180, 160, 0.12);
    vertical-align: middle;
}
.cogoo-table tbody tr:hover { background: rgba(253, 241, 231, 0.5); }
.cogoo-table tbody tr.is-saved { background: rgba(123, 163, 115, 0.18); transition: background 0.4s ease; }

.cogoo-col-handle { width: 22px; text-align: center; color: var(--text-tertiary); }
.cogoo-col-volume { width: 90px; }
.cogoo-col-pillar { width: 170px; }
.cogoo-col-def { width: 90px; text-align: center; }
.cogoo-col-role { width: 150px; }
.cogoo-col-url { width: 220px; }
.cogoo-col-fase { width: 90px; }
.cogoo-col-date { width: 140px; }
.cogoo-col-status { width: 130px; }
.cogoo-col-del { width: 28px; text-align: center; }

.cogoo-drag {
    color: var(--text-tertiary);
    cursor: grab;
    display: inline-flex;
    opacity: 0.4;
}
.cogoo-drag:hover { opacity: 0.9; }

.cogoo-input {
    width: 100%;
    border: 1px solid transparent;
    background: transparent;
    padding: 6px 8px;
    border-radius: 6px;
    font-family: inherit;
    font-size: 13px;
    color: var(--text-primary);
    outline: none;
}
.cogoo-input:hover  { background: #faf8f5; }
.cogoo-input:focus  { background: #fff; border-color: #c96f52; box-shadow: 0 0 0 2px rgba(201,111,82,0.1); }
.cogoo-num   { text-align: right; }
.cogoo-mono  { font-family: var(--font-mono); font-size: 12px; }
.cogoo-ta {
    resize: vertical;
    min-height: 38px;
    font-size: 12px;
    line-height: 1.35;
}

.cogoo-toggle {
    border: none;
    border-radius: 12px;
    padding: 3px 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    min-width: 50px;
}
.cogoo-toggle.is-yes { background: #cce5c2; color: #345e29; }
.cogoo-toggle.is-no  { background: #f6c8c0; color: #7a3024; }

.cogoo-pillar-trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 3px 6px;
    cursor: pointer;
    width: 100%;
    text-align: left;
}
.cogoo-pillar-trigger:hover { background: #faf8f5; border-color: rgba(200,180,160,0.3); }
.cogoo-pillar-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cogoo-pillar-empty { color: var(--text-tertiary); font-size: 13px; }
.cogoo-pillar-arrow { display: inline-flex; color: var(--text-tertiary); }

.cogoo-status-trigger {
    border: none;
    color: #fff;
    border-radius: 12px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    min-width: 80px;
}
.cogoo-status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
}

.cogoo-del {
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.15s;
}
.cogoo-table tbody tr:hover .cogoo-del { opacity: 1; }
.cogoo-del:hover { background: rgba(194, 85, 85, 0.12); color: #c25555; }

.cogoo-empty {
    text-align: center;
    color: var(--text-tertiary);
    padding: 32px 16px;
    font-style: italic;
}

/* Popover (pillar/status picker) */
.cogoo-popover {
    position: absolute;
    z-index: 10000;
    background: #fff;
    border: 1px solid rgba(200, 180, 160, 0.35);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(80, 45, 30, 0.18);
    min-width: 240px;
    max-width: 320px;
    padding: 6px;
}
.cogoo-popover-list {
    max-height: 260px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cogoo-popover-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    width: 100%;
}
.cogoo-popover-item:hover { background: #faf8f5; }
.cogoo-popover-clear { color: var(--text-tertiary); font-size: 12px; font-style: italic; }
.cogoo-popover-create {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid rgba(200, 180, 160, 0.2);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cogoo-popover-input { font-size: 13px; }
.cogoo-popover-colors {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.cogoo-color-swatch {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
}
.cogoo-color-swatch.is-selected {
    border-color: #fff;
    box-shadow: 0 0 0 2px #c96f52;
}

/* ============================================
   AI Agents — Brand Voice / Pillar / Kannibalisatie / Concurrentie
   ============================================ */

.agents-card {
    background: #faf8f5;
    border-radius: 16px;
    border: 1px solid rgba(200, 180, 160, 0.25);
    box-shadow: 0 2px 12px rgba(80, 45, 30, 0.06);
    margin: 0 0 16px;
    overflow: hidden;
}

.agents-tabs {
    display: flex;
    gap: 2px;
    padding: 8px 8px 0;
    background: linear-gradient(180deg, #fdf1e7 0%, #faf8f5 100%);
    border-bottom: 1px solid rgba(200, 180, 160, 0.2);
    flex-wrap: wrap;
}

.agents-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 500;
    border-radius: 10px 10px 0 0;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    border-bottom: 2px solid transparent;
}
.agents-tab:hover {
    background: rgba(201, 111, 82, 0.06);
    color: var(--text-primary);
}
.agents-tab.is-active {
    background: #faf8f5;
    color: #c96f52;
    border-bottom-color: #c96f52;
}

.agents-tab-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}
.agents-tab-status:empty { display: none; }
.agents-tab-status-running {
    width: 9px;
    height: 9px;
    min-width: 9px;
    background: #c96f52;
    box-shadow: 0 0 0 0 rgba(201, 111, 82, 0.6);
    animation: agents-pulse 1.4s infinite;
}
.agents-tab-status-completed {
    background: #7ba373;
    color: #fff;
    padding: 0 4px;
}
.agents-tab-status-failed {
    background: #c25555;
    color: #fff;
    padding: 0 4px;
}
@keyframes agents-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(201, 111, 82, 0.6); }
    70%  { box-shadow: 0 0 0 6px rgba(201, 111, 82, 0); }
    100% { box-shadow: 0 0 0 0 rgba(201, 111, 82, 0); }
}

.agents-panel { min-height: 200px; }

.agents-empty {
    padding: 40px 28px;
    text-align: center;
    color: var(--text-secondary);
}
.agents-empty-icon {
    color: #c96f52;
    opacity: 0.55;
    margin-bottom: 12px;
}
.agents-empty h3 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}
.agents-empty p {
    max-width: 480px;
    margin: 0 auto 16px;
}
.agents-empty .btn { margin-top: 12px; }
.agents-input {
    max-width: 480px;
    margin: 16px auto 0;
    text-align: left;
}
.agents-input .form-label {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    color: var(--text-secondary);
}
.agents-input textarea {
    font-family: var(--font-mono);
    font-size: 13px;
}

.agents-loading {
    padding: 40px 28px;
    text-align: center;
    color: var(--text-secondary);
}

.agents-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(200, 180, 160, 0.2);
    background: rgba(253, 241, 231, 0.4);
}
.agents-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.agents-content {
    padding: 20px 24px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-primary);
    max-height: 700px;
    overflow-y: auto;
}
.agents-content h2 {
    font-size: 18px;
    font-weight: 600;
    margin: 24px 0 8px;
    color: var(--text-primary);
}
.agents-content h2:first-child { margin-top: 0; }
.agents-content h3 {
    font-size: 15px;
    font-weight: 600;
    margin: 18px 0 6px;
    color: #c96f52;
}
.agents-content h4 {
    font-size: 14px;
    font-weight: 600;
    margin: 14px 0 4px;
}
.agents-content p { margin: 6px 0; }
.agents-content hr {
    border: none;
    border-top: 1px solid rgba(200, 180, 160, 0.25);
    margin: 16px 0;
}
.agents-content ul { margin: 6px 0 6px 20px; padding: 0; }
.agents-content li { margin: 3px 0; }
.agents-content blockquote {
    border-left: 3px solid #c96f52;
    margin: 8px 0;
    padding: 6px 14px;
    background: rgba(201, 111, 82, 0.05);
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: var(--text-secondary);
}
.agents-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
    font-size: 13px;
}
.agents-content th {
    background: rgba(200, 180, 160, 0.12);
    padding: 8px 10px;
    text-align: left;
    font-weight: 600;
    border-bottom: 1px solid rgba(200, 180, 160, 0.3);
}
.agents-content td {
    padding: 6px 10px;
    border-bottom: 1px solid rgba(200, 180, 160, 0.15);
}
.agents-content code {
    background: rgba(0, 0, 0, 0.05);
    padding: 1px 5px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 13px;
}
.agents-content strong { font-weight: 600; }

/* ============================================
   Brand Analyse (legacy)
   ============================================ */

.brand-analysis-card {
    background: #faf8f5;
    border-radius: 16px;
    border: 1px solid rgba(200, 180, 160, 0.25);
    box-shadow: 0 2px 12px rgba(80, 45, 30, 0.06);
    margin: 0 0 16px;
    overflow: hidden;
}

.brand-analysis-empty {
    padding: 32px 24px;
    text-align: center;
    color: var(--text-secondary);
}
.brand-analysis-empty-icon {
    color: #c96f52;
    margin-bottom: 8px;
    opacity: 0.6;
}
.brand-analysis-empty .btn {
    margin-top: 16px;
}

.brand-analysis-loading {
    padding: 32px 24px;
    text-align: center;
    color: var(--text-secondary);
}

.brand-analysis-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 20px;
    background: linear-gradient(180deg, #fdf1e7 0%, #faf8f5 100%);
    border-bottom: 1px solid rgba(200, 180, 160, 0.2);
}
.brand-analysis-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.brand-analysis-content {
    padding: 20px 24px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-primary);
    max-height: 600px;
    overflow-y: auto;
}
.brand-analysis-content h2 {
    font-size: 18px;
    font-weight: 600;
    margin: 24px 0 8px;
    color: var(--text-primary);
}
.brand-analysis-content h2:first-child { margin-top: 0; }
.brand-analysis-content h3 {
    font-size: 15px;
    font-weight: 600;
    margin: 18px 0 6px;
    color: #c96f52;
}
.brand-analysis-content h4 {
    font-size: 14px;
    font-weight: 600;
    margin: 14px 0 4px;
}
.brand-analysis-content p {
    margin: 6px 0;
}
.brand-analysis-content hr {
    border: none;
    border-top: 1px solid rgba(200, 180, 160, 0.25);
    margin: 16px 0;
}
.brand-analysis-content ul {
    margin: 6px 0 6px 20px;
    padding: 0;
}
.brand-analysis-content li {
    margin: 3px 0;
}
.brand-analysis-content blockquote {
    border-left: 3px solid #c96f52;
    margin: 8px 0;
    padding: 6px 14px;
    background: rgba(201, 111, 82, 0.05);
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: var(--text-secondary);
}
.brand-analysis-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
    font-size: 13px;
}
.brand-analysis-content th {
    background: rgba(200, 180, 160, 0.12);
    padding: 8px 10px;
    text-align: left;
    font-weight: 600;
    border-bottom: 1px solid rgba(200, 180, 160, 0.3);
}
.brand-analysis-content td {
    padding: 6px 10px;
    border-bottom: 1px solid rgba(200, 180, 160, 0.15);
}
.brand-analysis-content code {
    background: rgba(0, 0, 0, 0.05);
    padding: 1px 5px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 13px;
}
.brand-analysis-content strong {
    font-weight: 600;
}

/* ============================================
   AI Chat — popup (home) + inline (cockpit)
   ============================================ */

.ai-chat-popup-root {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9999;
    font-family: var(--font-family);
}

.ai-chat-fab {
    /* Floating action button rechtsonder — snelle toegang op elke pagina
       tot de PA agent. De sidebar-knop 'PA agent' opent hetzelfde panel;
       de FAB is voor medewerkers die niet weten waar de sidebar-knop zit. */
    height: 46px;
    padding: 0 18px 0 14px;
    border-radius: 24px;
    background: linear-gradient(135deg, #d98261, #c96f52);
    color: #fffaf5;
    border: 1px solid rgba(255, 240, 225, 0.25);
    box-shadow: 0 2px 12px rgba(80, 45, 30, 0.18), 0 0 0 1px rgba(80, 45, 30, 0.06);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.ai-chat-fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(80, 45, 30, 0.24), 0 0 0 1px rgba(80, 45, 30, 0.08);
    border-color: rgba(255, 240, 225, 0.4);
}
.ai-chat-fab:active { transform: translateY(0); box-shadow: 0 1px 6px rgba(80, 45, 30, 0.15); }

.ai-chat-fab-label {
    font-size: 14px;
}

/* Claude-mark SVG op de dichte FAB-knop */
.ai-chat-claude-logo {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
    color: #fff1e6;
}
/* P.O.S.T.-badge in de popup-header en inline-chat */
.ai-chat-logo {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
    object-fit: contain;
}
.ai-chat-popup-title .ai-chat-logo {
    width: 24px;
    height: 24px;
}
.ai-chat-inline-header .ai-chat-logo {
    width: 20px;
    height: 20px;
}

.ai-chat-popup-panel {
    position: absolute;
    right: 0;
    bottom: 64px;
    width: 400px;
    max-width: calc(100vw - 32px);
    height: 600px;
    max-height: calc(100vh - 120px);
    background: #faf8f5;
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(80, 45, 30, 0.12), 0 0 0 1px rgba(80, 45, 30, 0.06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(200, 180, 160, 0.25);

    /* Open/dicht animatie — schuift uit de FAB rechtsonder omhoog */
    transform-origin: bottom right;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px) scale(0.92);
    pointer-events: none;
    transition:
        opacity 220ms ease-out,
        transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0s linear 240ms;
}
.ai-chat-popup-panel.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    transition:
        opacity 220ms ease-out,
        transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0s linear 0s;
}

@media (prefers-reduced-motion: reduce) {
    .ai-chat-popup-panel,
    .ai-chat-popup-panel.is-open {
        transition: opacity 80ms linear, visibility 0s linear 0s;
        transform: none;
    }
}

.ai-chat-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.18);
    background: #4A4A4A;
}
.ai-chat-popup-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fdf6ef;
    font-weight: 600;
    letter-spacing: 0.04em;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.ai-chat-close {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #e9ded3;
    padding: 4px;
    border-radius: var(--radius-sm);
}
.ai-chat-close:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }

.ai-chat-popup-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.ai-chat-picker {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
    flex: 1;
    min-height: 0;
}
.ai-chat-brand-list {
    flex: 1;
    overflow-y: auto;
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
}
.ai-chat-brand-row {
    background: var(--wit);
    border: none;
    border-bottom: 1px solid var(--divider-soft);
    padding: 10px 12px;
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-primary);
}
.ai-chat-brand-row:last-child { border-bottom: none; }
.ai-chat-brand-row:hover { background: var(--accent-light); }

/* ── Algemene-vraag knop (boven de klantenlijst) ── */
.ai-chat-general-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    text-align: left;
    cursor: pointer;
    border: 1px solid var(--accent, #c9885a);
    border-radius: var(--radius);
    background: var(--accent-light, #f7efe7);
    color: var(--text-primary);
    transition: background 0.12s ease, box-shadow 0.12s ease;
}
.ai-chat-general-row:hover {
    background: var(--accent, #c9885a);
    color: #fff;
    box-shadow: 0 2px 8px rgba(80, 45, 30, 0.12);
}
.ai-chat-general-row:hover .text-muted { color: rgba(255, 255, 255, 0.85); }
.ai-chat-general-main {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}
.ai-chat-picker-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--text-secondary);
    font-size: 12px;
    gap: 8px;
    margin: 2px 0;
}
.ai-chat-picker-divider::before,
.ai-chat-picker-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--divider-soft);
}
.ai-chat-active-general { background: var(--accent-light, #f7efe7); }

.ai-chat-active-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #f7f4ef;
    border-bottom: 1px solid rgba(200, 180, 160, 0.2);
    font-size: 14px;
    color: var(--text-primary);
}
.ai-chat-active-brand .ai-chat-switch-brand {
    margin-left: auto;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 4px;
    border-radius: var(--radius-sm);
}
.ai-chat-active-brand .ai-chat-switch-brand:hover { background: rgba(0,0,0,0.05); }

/* ── Inline mode (op brand-cockpit) ── */
.ai-chat-inline-card {
    background: #faf8f5;
    border-radius: 16px;
    border: 1px solid rgba(200, 180, 160, 0.25);
    box-shadow: 0 2px 12px rgba(80, 45, 30, 0.06);
    margin: 16px 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 560px;
    max-height: 70vh;
}
.ai-chat-inline-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    background: linear-gradient(180deg, #fdf1e7 0%, #faf8f5 100%);
    border-bottom: 1px solid rgba(200, 180, 160, 0.2);
    color: var(--text-primary);
    font-weight: 500;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ── Chatbox kern ── */
.ai-chat-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.ai-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #f7f4ef;
}

.ai-chat-empty {
    color: var(--text-tertiary);
    text-align: center;
    padding: 24px 12px;
    font-size: 14px;
}
.ai-chat-empty ul {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    text-align: left;
    display: inline-block;
}
.ai-chat-empty li {
    padding: 4px 0;
    color: var(--text-secondary);
}

.ai-chat-msg {
    display: flex;
    max-width: 92%;
}
.ai-chat-msg-content {
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.55;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    color: var(--text-primary);
    box-shadow: 0 1px 4px rgba(80, 45, 30, 0.06);
}
.ai-chat-msg-content code {
    background: rgba(0,0,0,0.06);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 13px;
}
.ai-chat-msg-content ul {
    margin: 6px 0 6px 18px;
    padding: 0;
}
.ai-chat-msg-user {
    align-self: flex-end;
}
.ai-chat-msg-user .ai-chat-msg-content {
    background: linear-gradient(135deg, #d98261, #c96f52);
    color: #fffaf5;
    border-bottom-right-radius: 4px;
}
.ai-chat-msg-user .ai-chat-msg-content code {
    background: rgba(255,255,255,0.2);
    color: var(--wit);
}
.ai-chat-msg-assistant {
    align-self: flex-start;
}
.ai-chat-msg-assistant .ai-chat-msg-content {
    background: #fff;
    border: 1px solid rgba(200, 180, 160, 0.18);
    border-bottom-left-radius: 4px;
}
.ai-chat-msg-error .ai-chat-msg-content {
    background: var(--rood-light);
    color: var(--rood);
}

.ai-chat-typing {
    display: inline-flex;
    gap: 4px;
    padding: 4px 0;
}
.ai-chat-typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #c96f52;
    animation: ai-chat-bounce 1.2s infinite ease-in-out;
}
.ai-chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.ai-chat-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes ai-chat-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30%           { transform: translateY(-5px); opacity: 1; }
}

.ai-chat-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 14px 14px;
    border-top: 1px solid rgba(200, 180, 160, 0.2);
    background: #faf8f5;
}
.ai-chat-input {
    width: 100%;
    resize: none;
    border: 1px solid rgba(200, 180, 160, 0.3);
    border-radius: 12px;
    padding: 10px 12px;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 14px;
    color: var(--text-primary);
    background: #fff;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ai-chat-input:focus { border-color: #c96f52; box-shadow: 0 0 0 2px rgba(201, 111, 82, 0.1); }
.ai-chat-input:disabled { background: #f7f4ef; cursor: wait; }

.ai-chat-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.ai-chat-reset {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: 12px;
}
.ai-chat-reset:hover { background: var(--creme); color: var(--text-primary); }
.ai-chat-send {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Login-pagina + andere full-screen views: popup verbergen */
.login-page .ai-chat-popup-root { display: none; }

/* ============================================
   TEST-tabje (experimenteel) — AI SEO-acties
   ============================================ */
.test-wrap { display: flex; flex-direction: column; gap: var(--sp-4); }

.test-banner {
    display: flex; align-items: center; gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    background: linear-gradient(90deg, #fff7ed, #fdf6e3);
    border: 1px dashed var(--oranje);
    border-radius: var(--radius-lg);
}
.test-banner-icon { color: var(--oranje); display: flex; }
.test-banner-text { flex: 1; }
.test-banner-text h2 { margin: 0; font-size: 1.1rem; color: var(--text-primary); }
.test-banner-text p { margin: 4px 0 0; font-size: 0.85rem; color: var(--text-secondary); max-width: 70ch; }

.test-nav { display: flex; gap: var(--sp-2); border-bottom: 1px solid var(--divider-soft); }
.test-nav-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: var(--sp-3) var(--sp-4); border: none; background: none;
    font-size: 0.9rem; color: var(--text-secondary); cursor: pointer;
    border-bottom: 2px solid transparent;
}
.test-nav-btn:hover { color: var(--text-primary); }
.test-nav-btn.is-active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 500; }

.test-content { min-height: 200px; }

.test-toolbar { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.test-toolbar-left, .test-toolbar-right { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.test-muted { color: var(--text-tertiary); font-size: 0.82rem; }
.test-search, .test-filter {
    height: 36px; padding: 0 var(--sp-3); border: 1px solid var(--grijs-200);
    border-radius: var(--radius-sm); font-size: 0.85rem; background: var(--wit);
}
.test-count { margin-top: var(--sp-2); }

/* Tabellen */
.test-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.test-table th { text-align: left; padding: var(--sp-2) var(--sp-3); color: var(--text-secondary); font-weight: 500; border-bottom: 1px solid var(--divider-soft); white-space: nowrap; }
.test-table td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--grijs-100); vertical-align: top; }
.test-table tbody tr:hover { background: var(--surface-alt); }
.test-table-sm { font-size: 0.8rem; }
.test-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.test-kw-cell { font-weight: 500; color: var(--text-primary); }
.test-url { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); }
.test-pos { color: var(--groen); }
.test-neg { color: var(--rood); }

/* Cards */
/* Brede, horizontale kaarten: ~2 per rij op desktop (≥1100px viewport), 1 per rij daaronder. */
.test-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(760px, 1fr)); gap: var(--sp-4); align-items: start; }
@media (max-width: 1100px) { .test-cards { grid-template-columns: 1fr; } }

/* Cogoo overzicht (binnen .test-v2-group): één kaart per rij — minder rommelig
   nu de kaarten compact zijn (titel + cijfers + Open cluster-knop). */
.test-v2-group .test-cards { grid-template-columns: 1fr; gap: var(--sp-2); }

/* Compactere overzicht-kaarten. */
.test-v2-group .test-service-card { padding: var(--sp-2) var(--sp-3); }
.test-v2-group .test-service-card .test-card-title { font-size: 0.95rem; }
.test-v2-group .test-service-card .test-service-mainurl { margin-bottom: 0; font-size: 0.78rem; }
.test-v2-group .test-service-card .test-card-head-row { margin-bottom: 0; }
.test-v2-group .test-service-card .tv2-tiles-row { margin-top: 4px; }

/* Klikbare single-row cluster-card: titel + badge + stats in kolommen
   onder de tabel-header. Layout matched de header-bar 1-op-1. */
.test-card-clickable { cursor: pointer; }
.test-card-clickable:hover { border-color: var(--border-strong); }

/* CRM-stijl tabel-header bovenaan elke commercieel-groep. Kleuren komen
   uit het centrale design-system (accent + text-inverse) zodat alle
   apps dezelfde tabel-stijl krijgen. */
.tv2-table-header,
.test-v2-group .test-cards .test-service-card .test-service-card-row {
    display: grid;
    grid-template-columns:
        minmax(320px, 2.2fr)   /* dienst (naam + label + URL)        */
        140px                  /* pagina's (met '5 comm · 0 info')   */
        70px                   /* clicks                             */
        110px                  /* impressies (met delta)             */
        70px                   /* CTR                                */
        80px                   /* bezoekers                          */
        110px                  /* tijd op pagina                     */
        32px;                  /* delete-icoon                       */
    gap: var(--sp-3);
    align-items: center;
}
/* Hoofd-URL rechts van de badge, klein en grijs zodat 'ie leesbaar
   maar ondergeschikt is. Ellipsis bij te lang. */
.tv2-rubriek-url {
    font-size: 0.72rem;
    color: var(--text-tertiary, #9CA3AF);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    background: #F9FAFB;
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid #E5E7EB;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
    flex-shrink: 1;
    min-width: 0;
}
/* Live-status chip in de page-card: 'nog niet live' bij missing/error,
   zodat de user meteen weet welke pages nog gelanceerd moeten worden. */
.tv2-pcard-livechip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.03em;
    white-space: nowrap;
    margin-left: 6px;
    cursor: pointer;
    font-family: inherit;
    transition: opacity .12s;
}
/* Publish-badge (klein groen labeltje met datum) + live-check-badge (icon-
   only button). Beide naast de content-run status-badge in de page-card. */
.tv2-cr-pubbadge {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 8px; margin-left: 4px;
    background: #DCFCE7; color: #14532D;
    border: 1px solid #86EFAC; border-radius: 999px;
    font-size: 10.5px; font-weight: 600;
    text-decoration: none; white-space: nowrap;
    transition: opacity .12s;
}
.tv2-cr-pubbadge:hover { opacity: .8; }
/* Extern variant: 'In CMS' zonder datum (URL bestaat wel maar niet via
   jugoo-dash gepubliceerd). Blauwig ipv groen zodat 't visueel duidelijk
   afwijkt van de tracked publishes. */
.tv2-cr-pubbadge-extern {
    background: #DBEAFE; color: #1E40AF; border-color: #93C5FD;
}
/* Wat de laatste publicatie opleverde, naast 'live 3 sep'. Zelfde vorm als
   die pil, zodat je publicatie en uitkomst als één regel leest: groen is meer
   vertoningen dan de vier weken ervoor, oranje minder, grijs nog aan het meten. */
.tv2-meting {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 8px; margin-left: 4px;
    background: var(--surface-subtle); color: var(--text-muted);
    border: 1px solid var(--border-subtle); border-radius: 999px;
    font-size: 10.5px; font-weight: 600; white-space: nowrap; cursor: help;
}
.tv2-meting.is-beter    { background: #DCFCE7; color: #14532D; border-color: #86EFAC; }
.tv2-meting.is-slechter { background: #FFEDD5; color: #9A3412; border-color: #FDBA74; }
.tv2-meting.is-geen     { color: var(--danger); }
.tv2-cr-livecheck {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; margin-left: 3px;
    background: transparent; border: 1px solid currentColor; border-radius: 50%;
    cursor: pointer; font-family: inherit;
    transition: background .12s;
}
.tv2-cr-livecheck.is-match   { background: rgba(21,128,61,.08); }
.tv2-cr-livecheck.is-stale   { background: rgba(180,83,9,.10); }
.tv2-cr-livecheck.is-unknown { background: transparent; }
.tv2-cr-livecheck:hover:not(:disabled) { background: currentColor; color: #fff !important; }
.tv2-cr-livecheck:hover:not(:disabled) .icon { color: #fff; }
.tv2-cr-livecheck:disabled { cursor: wait; opacity: .6; }
/* Actionable pill-variant bij live-mismatch: 'Wijkt af - republiceer'
   met tekst-label zodat 't oogt als een call-to-action ipv een status-
   badge. Breekt uit de default round-icon styling. */
.tv2-cr-livecheck.is-stale-pill {
    width: auto; height: 22px;
    padding: 0 10px 0 8px;
    border-radius: 999px;
    background: #FEF3C7; color: #92400E; border-color: #FCD34D;
    font-size: 10.5px; font-weight: 700;
    letter-spacing: .2px; text-transform: none;
    gap: 4px; white-space: nowrap;
}
.tv2-cr-livecheck.is-stale-pill:hover:not(:disabled) {
    background: #B45309; color: #fff !important; border-color: #B45309;
}
/* No-reference variant: run is gepubliceerd voor de hash-tracking, dus
   check kan geen match/mismatch geven. Blauwig ipv oranje - het is geen
   fout maar wel een acti-item ('publiceer opnieuw om vergelijkbaar te
   maken'). */
.tv2-cr-livecheck.is-noref-pill {
    width: auto; height: 22px;
    padding: 0 10px 0 8px;
    border-radius: 999px;
    background: #DBEAFE; color: #1E40AF; border-color: #93C5FD;
    font-size: 10.5px; font-weight: 700;
    letter-spacing: .2px; text-transform: none;
    gap: 4px; white-space: nowrap;
}
.tv2-cr-livecheck.is-noref-pill:hover:not(:disabled) {
    background: #1D4ED8; color: #fff !important; border-color: #1D4ED8;
}
.tv2-pcard-livechip:hover { opacity: .8; }
.tv2-pcard-livechip:disabled { cursor: wait; opacity: .6; }
.tv2-pcard-livechip-missing {
    background: #FEF3C7;
    color: #92400E;
    border: 1px solid #FDE68A;
}
.tv2-pcard-livechip-error {
    background: #FEE2E2;
    color: #991B1B;
    border: 1px solid #FECACA;
}

/* Content-run badge + optionele restart-knop naast elkaar. Bij status
   'running' verschijnt de restart-knop; user kan zo een pipeline die
   vast lijkt te zitten forceren opnieuw te starten. */
.tv2-cr-badge-wrap {
    display: inline-flex; align-items: center; gap: 4px;
}
.tv2-cr-restart {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px;
    padding: 0;
    background: transparent;
    color: #B45309;
    border: 1px solid #FDE68A;
    border-radius: 4px;
    cursor: pointer;
    transition: background 120ms ease;
}
.tv2-cr-restart:hover:not(:disabled) { background: #FEF3C7; }
.tv2-cr-restart:disabled { opacity: 0.6; cursor: wait; }

/* Compact 'N nog niet live'-pill op de rubriek-rij: telt hoeveel pages
   uit die rubriek nog niet live staan volgens de laatste live-check. */
.tv2-rubriek-notlive {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.03em;
    background: #FEF3C7;
    color: #92400E;
    border: 1px solid #FDE68A;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: help;
}

/* Waarschuwings-icoon bij URL-conflicten. */
.tv2-rubriek-conflict {
    display: inline-flex; align-items: center;
    color: #B45309;
    flex-shrink: 0;
    cursor: help;
}
/* Klikbare merge-variant: hover-highlight zodat 't als knop voelt. */
button.tv2-rubriek-conflict-merge {
    background: transparent;
    border: none;
    padding: 2px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 120ms ease;
}
button.tv2-rubriek-conflict-merge:hover:not(:disabled) {
    background: #FEF3C7;
}
button.tv2-rubriek-conflict-merge:disabled { opacity: 0.6; cursor: wait; }
.test-service-card.has-url-conflict {
    background: #FFFBEB;
    border-color: #FDE68A;
}
.tv2-table-header {
    background: var(--accent);
    color: var(--text-inverse);
    padding: var(--sp-2) var(--sp-3);
    margin-bottom: var(--sp-2);
    border-radius: var(--radius);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.tv2-table-header > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.test-service-card-title {
    font-weight: 400; color: var(--text-primary);
    font-size: 0.875rem;
    display: flex; align-items: center; gap: var(--sp-2);
    min-width: 0;
    overflow: hidden;
}
.test-service-card-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* tv2-tiles-row binnen de single-row card 'verdwijnt' visueel: de tiles
   worden direct child van de grid-container zodat ze de kolommen 2-7
   invullen. */
.test-v2-group .test-service-card .test-service-card-row .tv2-tiles-row {
    display: contents;
}
/* Labels staan in de header-bar; in de cellen tonen we alleen de waarde. */
.test-v2-group .test-service-card .test-service-card-row .tv2-tile-lbl { display: none; }
.test-v2-group .test-service-card .test-service-card-row .tv2-tile { min-width: 0; }

/* Fallback-hint (no_source / error) spant álle kolommen. */
.test-v2-group .test-service-card .test-cluster-headline-msg {
    grid-column: 1 / -1;
    margin-top: var(--sp-1);
}

.test-service-card-row .test-card-del { justify-self: end; flex-shrink: 0; }

/* Een rubriek opengeklapt in het overzicht: de pagina's op hetzelfde kolomgrid
   als de rubriekrij, zodat clicks, impressies en bezoekers onder hun kop staan. */
.test-v2-group .test-service-card .test-service-card-name::before {
    content: '▸';
    display: inline-block;
    width: 12px;
    color: var(--text-tertiary);
    font-size: 11px;
    transition: transform 0.12s;
}
.test-v2-group .test-service-card.is-open .test-service-card-name::before { transform: rotate(90deg); }
.test-v2-group .test-service-card.is-open { padding-bottom: 0; }
.tv2-rubriek-paginas {
    margin: var(--sp-2) calc(-1 * var(--sp-3)) 0;
    border-top: 1px solid var(--border-subtle);
    background: var(--surface-alt);
    border-radius: 0 0 var(--radius) var(--radius);
    cursor: default;
}
.test-v2-group .test-cards .test-service-card .tv2-rubriek-paginas .test-service-card-row {
    padding: 6px var(--sp-3);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}
.tv2-rubriek-pagina + .tv2-rubriek-pagina { border-top: 1px solid var(--border-subtle); }
.tv2-rubriek-pagina-naam {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-width: 0;
    padding-left: 20px;
    overflow: hidden;
}
.tv2-rubriek-pagina-pad {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    white-space: nowrap;
    flex-shrink: 0;
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tv2-rubriek-pagina-titel {
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.tv2-rubriek-paginas-voet {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-3);
    padding: 6px var(--sp-3) var(--sp-2);
}

/* Card-head als rij: links naam+URL, rechts Open cluster-knop + delete. */
.test-card-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-2);
}
.test-card-head-left { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.test-card-head-right { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }

/* Stat-tiles: zoals het bijgeleverde voorbeeld (kleine uppercase label boven,
   grote bold waarde eronder, optionele delta-pill rechts in de waarde-rij).
   Lichte achtergrond + dunne border zodat het visueel duidelijke blokjes zijn. */
.tv2-tiles-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3) var(--sp-6);
    margin-top: var(--sp-2);
    align-items: baseline;
}
.tv2-tile {
    display: inline-flex;
    align-items: baseline;
    gap: var(--sp-2);
    min-width: 0;
}
.tv2-tile-lbl {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
    font-weight: 500;
    white-space: nowrap;
}
.tv2-tile-val {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    display: inline-flex; align-items: center; gap: 4px;
    line-height: 1.2;
    white-space: nowrap;
}
.tv2-tile-delta {
    display: inline-flex; align-items: center; gap: 1px;
    font-size: 0.72rem; font-weight: 600;
}
.tv2-tile-delta.is-up { color: #2c6c43; }
.tv2-tile-delta.is-down { color: #b4513a; }
.tv2-tile-sub {
    font-size: 0.7rem;
    color: var(--text-tertiary);
    line-height: 1.1;
    margin-top: 1px;
}

/* ── Cogoo portfolio-hero (bovenaan overzicht) ─────────────────────────
   Visueel sterk: zachte accent-gradient achtergrond, grote getallen,
   gestapelde positie-balk onderaan. */
.tv2-tot-hero {
    margin-bottom: var(--sp-3);
    padding: var(--sp-4);
    background: linear-gradient(135deg, #f0f7f1 0%, #e7f1ea 100%);
    border: 1px solid #c7dccd;
    border-radius: var(--radius);
}

/* Landings-funnel — 3-stappen horizontale flow op de Overzicht-tab.
   Zit binnen een pa-kpi-hero-wrapper (groene gradient); de individuele
   stappen krijgen de wit-transparante 'kaart-look' die past bij de
   andere KPI-tegels. */
.landing-funnel-hero {
    margin-top: 14px;
}
.landing-funnel-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 12px;
    align-items: stretch;
}
.landing-funnel-row + .landing-funnel-row {
    margin-top: 10px;
}
.landing-funnel-tree {
    display: grid;
    grid-template-columns: 1fr 2.4fr;
    gap: 12px;
    align-items: stretch;
}
.landing-funnel-tree-source {
    display: flex;
    align-items: stretch;
}
.landing-funnel-tree-source > .landing-funnel-step {
    flex: 1;
    justify-content: center;
}
.landing-funnel-tree-branches {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.landing-funnel-branch {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr;
    gap: 12px;
    align-items: stretch;
}
/* Stapel van landings-pagina's tussen bezoekers en de totale conversie-KPI.
   flex:1 zodat de kolom mee-schaalt met de row-breedte. */
.landing-funnel-branch-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 200px;
}
.landing-funnel-branch-stack > .landing-funnel-step { flex: 1; }
/* De twee uitkomsten van de funnel -- een aanvraag of een aankoop -- staan
   onder elkaar aan het eind, niet achter elkaar. Ze volgen op dezelfde stap,
   dus ze horen op dezelfde hoogte. Hoogte naar inhoud: het lead-blok draagt
   een events-regel en een herkomstregel, het verkopen-blok niet. */
.landing-funnel-uitkomsten > .landing-funnel-step { flex: 0 0 auto; }
/* De stappen ervoor zijn even hoog als die kolom; zet hun inhoud in het
   midden, anders staan ze met een half lege kaart naast elkaar. */
.landing-funnel-row > .landing-funnel-step { justify-content: center; }
.landing-funnel-step {
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(199, 220, 205, 0.6);
    border-radius: 8px;
    display: flex; flex-direction: column; gap: 3px;
    min-width: 0;
}
.landing-funnel-step.is-primary {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(44, 108, 67, 0.35);
}
.landing-funnel-step-label {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6B7280;
    font-weight: 600;
}
.landing-funnel-step-value {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 1.55rem;
    font-weight: 500;
    letter-spacing: -0.4px;
    color: #18181B;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    margin-top: 2px;
}
.landing-funnel-step-sub {
    font-size: 0.7rem;
    color: #6B7280;
    line-height: 1.2;
}
.landing-funnel-arrow {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 2px;
    padding: 0 4px;
    min-width: 60px;
}
.landing-funnel-arrow-pct {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 0.85rem;
    font-weight: 600;
    color: #2c6c43;
    font-variant-numeric: tabular-nums;
}
.landing-funnel-arrow-line {
    color: #9CA3AF;
    display: inline-flex;
}
.landing-funnel-url {
    font-family: 'Geist Mono', ui-monospace, monospace;
    background: rgba(255, 255, 255, 0.6);
    color: #4A4A4A;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 11px;
    margin-right: 4px;
}
/* Naar de trechter waar het cijfer uit komt. */
.landing-funnel-bron {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    margin-top: 8px;
    font-size: 11.5px;
    color: var(--accent, #1A73E8);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.landing-funnel-bron:hover {
    border-bottom-color: currentColor;
}
.landing-funnel-events {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(44, 108, 67, 0.15);
}
.landing-funnel-event {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    color: #4A4A4A;
    line-height: 1.4;
}
.landing-funnel-event strong {
    font-family: var(--font-mono), ui-monospace, monospace;
    font-weight: 600;
    color: #18181B;
}
.landing-funnel-hint {
    margin-bottom: 14px;
    padding: 10px 14px;
    background: #FEF3C7;
    border: 1px solid #FDE68A;
    border-radius: 8px;
    font-size: 12.5px;
    color: #78350F;
    display: flex; align-items: center; gap: 6px;
}
@media (max-width: 900px) {
    .landing-funnel-row,
    .landing-funnel-tree,
    .landing-funnel-branch {
        grid-template-columns: 1fr;
    }
    .landing-funnel-arrow {
        min-width: 0;
        flex-direction: row;
        justify-content: flex-start;
        gap: 8px;
    }
    .landing-funnel-arrow-line { transform: rotate(90deg); }
}

/* Generieke KPI-hero — herbruikbare variant van .tv2-tot-hero zodat
   Funnels, SEO keywords, Overview en andere dashboards dezelfde
   lichtgroene look krijgen als 'Cogoo results'. Tiles binnen deze
   wrapper krijgen de wit-transparante styling via .pa-kpi-tile of
   via context-overrides voor bestaande klassen (.seo2-kpi,
   .overview-kpi-card). */
.pa-kpi-hero {
    margin-bottom: 16px;
    padding: 16px;
    background: linear-gradient(135deg, #f0f7f1 0%, #e7f1ea 100%);
    border: 1px solid #c7dccd;
    border-radius: 8px;
}
.pa-kpi-hero-head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 12px;
}
.pa-kpi-hero-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #2c6c43;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: inline-flex; align-items: center; gap: 6px;
}
.pa-kpi-hero-sub {
    font-size: 0.78rem;
    color: var(--text-secondary, #6B7280);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

/* Blauwe variant van hetzelfde hero-kader, voor het clusterrapport. Dezelfde
   vorm en verhoudingen als de groene landings-funnel; alleen de tint verschilt,
   zodat je op het overzicht ziet dat het twee soorten informatie zijn. */
.pa-kpi-hero.is-blauw {
    background: linear-gradient(135deg, #f0f5fb 0%, #e7eef8 100%);
    border-color: #c7d6ea;
}
.pa-kpi-hero.is-blauw .pa-kpi-hero-title { color: #1d4f8f; }
.pa-kpi-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 8px;
}
.pa-kpi-tile {
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(199, 220, 205, 0.6);
    border-radius: 8px;
    display: flex; flex-direction: column; gap: 2px;
}
.pa-kpi-tile-lbl {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6B7280;
    font-weight: 600;
}
.pa-kpi-tile-val {
    /* Unified KPI-typografie: Geist Mono medium, niet de zware default. */
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 1.55rem;
    font-weight: 500;
    letter-spacing: -0.4px;
    color: #18181B;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.pa-kpi-tile-sub {
    font-size: 0.7rem;
    color: #6B7280;
    line-height: 1.2;
}

/* Override-context voor bestaande KPI-card-klassen binnen pa-kpi-hero,
   zodat ze de transparante witte achtergrond aanhouden in plaats van
   hun originele witte vlak met grijze border. */
.pa-kpi-hero .seo2-kpi,
.pa-kpi-hero .overview-kpi-card {
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(199, 220, 205, 0.6);
}
.pa-kpi-hero .seo2-kpis,
.pa-kpi-hero .overview-kpi-row,
.pa-kpi-hero .pa-kpi-strip {
    background: transparent;
    border: none;
    padding: 0;
}
/* Winacties + Mail-tab tegels (BEM-style pa-kpi-tile__label/__value/__meta)
   krijgen binnen de pa-kpi-hero context dezelfde wit-transparante kaart. */
.pa-kpi-hero .pa-kpi-strip > .pa-kpi-tile {
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(199, 220, 205, 0.6);
}
.pa-kpi-hero .pa-kpi-strip > .pa-kpi-tile.pa-kpi-tile--primary {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(44, 108, 67, 0.35);
}

/* Strip-layout + BEM-tile internals zodat Winacties en Mail-tab een
   consistente kpi-presentatie krijgen. Default (zonder pa-kpi-hero
   wrapper) blijft 'm ook werken; binnen de hero kleurt de override
   hierboven 'm op groen. */
.pa-kpi-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 8px;
}
.pa-kpi-tile {
    padding: 12px 14px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    display: flex; flex-direction: column; gap: 2px;
}
.pa-kpi-tile__label {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6B7280;
    font-weight: 600;
}
.pa-kpi-tile__value {
    /* Unified KPI-typografie: Geist Mono medium. */
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 1.55rem;
    font-weight: 500;
    letter-spacing: -0.4px;
    color: #18181B;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.pa-kpi-tile__meta {
    font-size: 0.7rem;
    color: #6B7280;
    line-height: 1.2;
}
.pa-kpi-tile.pa-kpi-tile--danger .pa-kpi-tile__value { color: #B91C1C; }
/* Alert-variant voor sync-fouten op portfolio: rand + waarde in warm oranje-
   rood, blijft binnen de groene hero-context een subtiele hint. */
.pa-kpi-tile.pa-kpi-tile--alert {
    border-color: rgba(212, 99, 58, 0.35);
    background: rgba(255, 245, 240, 0.85);
}
.pa-kpi-tile.pa-kpi-tile--alert .pa-kpi-tile-val { color: #D4633A; }

/* Pa-modal — generieke overlay-modal voor preview-vensters zoals
   klant-update. */
.pa-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex; align-items: center; justify-content: center;
    z-index: 9000;
    padding: 24px;
}
.pa-modal {
    background: #fff;
    border-radius: 12px;
    max-width: 720px;
    width: 100%;
    max-height: 90vh;
    display: flex; flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0,0,0,0.2);
}
.pa-modal-md { max-width: 720px; }
.pa-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #E5E7EB;
    font-size: 14px;
}
.pa-modal-close {
    background: transparent; border: none; cursor: pointer;
    color: #6B7280; padding: 4px; display: inline-flex;
}
.pa-modal-close:hover { color: #18181B; }
.pa-modal-body {
    padding: 18px;
    overflow-y: auto;
    flex: 1;
}
.pa-modal-foot {
    padding: 12px 18px;
    border-top: 1px solid #E5E7EB;
    display: flex; justify-content: flex-end; gap: 8px;
}

/* Meta-velden card boven de publicatietekst — kopieerbare SEO-velden. */
.final-meta-card {
    background: #fff;
    border: 1px solid var(--pa-border-card, #ECECEF);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 18px;
    max-width: 960px;
}
.final-meta-head {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #4A4A4A;
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 12px;
}
.final-meta-hint {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    color: #9CA3AF;
    font-size: 11px;
    margin-left: 4px;
}
.final-meta-list { display: flex; flex-direction: column; gap: 10px; }
.final-meta-row {
    display: grid;
    grid-template-columns: 130px 1fr 28px;
    gap: 12px;
    align-items: start;
    padding: 8px 0;
    border-bottom: 1px solid #F4F4F5;
}
.final-meta-row:last-child { border-bottom: none; }
.final-meta-label {
    font-size: 12px;
    font-weight: 600;
    color: #6B7280;
    padding-top: 2px;
}
.final-meta-value {
    font-size: 13px;
    color: #18181B;
    line-height: 1.5;
    word-break: break-word;
    font-family: var(--font-mono);
    background: #FAFAFB;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #F0F0F2;
}
.final-meta-copy {
    background: transparent;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    width: 28px; height: 28px;
    padding: 0;
    color: #6B7280;
    cursor: pointer;
    display: inline-flex;
    align-items: center; justify-content: center;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
    margin-top: 1px;
}
.final-meta-copy:hover {
    color: #2c6c43;
    border-color: #BBF7D0;
    background: #F0FDF4;
}
.final-meta-copy.is-copied {
    color: #166534;
    border-color: #BBF7D0;
    background: #DCFCE7;
}

/* Kopregel boven de publicatietekst-viewer. */
.final-body-head {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #4A4A4A;
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 8px;
}
.final-body-hint {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    color: #9CA3AF;
    font-size: 11px;
    margin-left: 4px;
}

/* Per-sectie card op de Final-tab (split op --- in de bron). */
.final-body-sections {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Kwaliteits-strip boven de body: telling van links + CTA-checks. */
.final-quality-panel {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 4px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
}
.final-quality-pills {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
}
.final-quality-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.2px;
}
.final-quality-pill strong { font-weight: 700; font-family: var(--font-mono), ui-monospace, monospace; }
.final-quality-pill--internal { background: #EEF2FF; color: #4338CA; border: 1px solid #C7D2FE; }
.final-quality-pill--cta      { background: #ECFDF5; color: #047857; border: 1px solid #A7F3D0; }
.final-quality-pill--external { background: #FEF3C7; color: #92400E; border: 1px solid #FDE68A; }
.final-quality-pill--muted    { background: #F4F4F5; color: #71717A; border: 1px solid #E4E4E7; }
.final-quality-check {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.final-quality-check-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    font-family: var(--font-mono), ui-monospace, monospace;
    font-size: 11.5px;
    line-height: 1.4;
}
.final-quality-check-item.is-ok      { background: #ECFDF5; color: #065F46; }
.final-quality-check-item.is-missing { background: #FEF2F2; color: #991B1B; }

/* Visuele markering van links binnen de body. */
.final-section-body .final-link,
.final-body-sections > .md-block .final-link {
    padding: 1px 4px;
    border-radius: 3px;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.final-link.is-cta {
    background: #ECFDF5;
    color: #065F46 !important;
    text-decoration-color: #059669;
    font-weight: 500;
}
.final-link.is-cta::after {
    content: ' ★';
    font-size: 0.85em;
    color: #059669;
}
.final-link.is-internal {
    background: #EEF2FF;
    color: #3730A3 !important;
    text-decoration-color: #4338CA;
}
.final-link.is-external {
    background: #FEF3C7;
    color: #92400E !important;
    text-decoration-color: #B45309;
}
.final-link.is-external::after {
    content: ' ↗';
    font-size: 0.85em;
    color: #B45309;
}
.final-section {
    position: relative;
    background: #fff;
    border: 1px solid var(--pa-border-card);
    border-radius: 12px;
    padding: 24px 32px;
}
.final-section-body { min-width: 0; }
.final-section-copy {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    height: 30px;
    background: #fff;
    border: 1px solid var(--pa-border-row);
    border-radius: 7px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    color: var(--pa-text-label);
    cursor: pointer;
    z-index: 2;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.final-section-copy:hover {
    background: #F4F4F5;
    color: var(--pa-text-value);
    border-color: var(--pa-border-strong, #D4D4D8);
}
.final-section-copy .material-symbols-rounded { font-size: 15px; }

/* Technische aanpassingen — collapsable onderaan. */
.final-technical {
    margin-top: 18px;
    max-width: 960px;
}
.final-technical summary {
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: #4A4A4A;
    padding: 10px 14px;
    background: #FAFAFB;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    display: flex; align-items: center; gap: 6px;
    list-style: none;
    user-select: none;
}
.final-technical summary::-webkit-details-marker { display: none; }
.final-technical summary::before {
    content: '›';
    font-size: 18px;
    line-height: 1;
    color: #9CA3AF;
    transition: transform 0.15s;
    display: inline-block;
    width: 12px;
}
.final-technical[open] summary::before { transform: rotate(90deg); }
.final-technical summary:hover { background: #F4F4F5; }
.final-technical-body { font-size: 13px; color: #4A4A4A; }
.final-technical-body h2 { font-size: 14px !important; margin-top: 20px !important; }
.final-technical-body h3 { font-size: 13px !important; }

/* Content-run detail: 2-koloms layout met viewer + logboek als zijpaneel.
   Viewer krijgt de volledige breedte tot 880px; logboek pakt 260px rechts.
   Op smallere schermen valt logboek onder de viewer. */
.content-run-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 24px;
    align-items: start;
}
.content-run-grid.is-full-width { grid-template-columns: 1fr; }
.content-run-main { min-width: 0; }
.content-run-side { position: sticky; top: 96px; }
@media (max-width: 1240px) {
    .content-run-grid { grid-template-columns: 1fr; }
    .content-run-side { position: static; }
}

/* Openstaande TODO's: geel/oranje aandacht boven het logboek. */
.final-todos-panel {
    background: #FEFCE8;
    border: 1px solid #FDE68A;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 14px;
}
.final-todos-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #78350F;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.final-todos-count {
    margin-left: auto;
    background: #B45309;
    color: #fff;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: 0;
}
.final-todos-hint {
    font-size: 11.5px;
    color: #92400E;
    margin: 6px 0 10px;
    line-height: 1.5;
}
.final-todos-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.final-todo-row {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    gap: 8px;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid #FDE68A;
    border-radius: 8px;
    font-size: 12.5px;
    line-height: 1.5;
    align-items: start;
}
.final-todo-actions {
    display: flex;
    gap: 2px;
    opacity: 0.55;
    transition: opacity 0.12s;
}
.final-todo-row:hover .final-todo-actions { opacity: 1; }
.final-todo-row.is-editing .final-todo-actions { opacity: 0.3; pointer-events: none; }
.final-todo-editor {
    width: 100%;
    padding: 4px 6px;
    border: 1px solid #B45309;
    border-radius: 4px;
    background: #FFFBEB;
    color: #78350F;
    font-family: inherit;
    font-size: 12.5px;
    resize: vertical;
    box-sizing: border-box;
}
.final-todo-num {
    background: #B45309;
    color: #fff;
    font-weight: 700;
    font-size: 11px;
    border-radius: 999px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.final-todo-body { color: #78350F; }

/* Inline badge in de body waar de TODO stond */
.final-todo-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px;
    background: #FEF3C7;
    color: #78350F;
    border: 1px solid #FDE68A;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    vertical-align: middle;
    margin: 0 2px;
}

/* Compact logboek: subtiel, timeline-achtig, mag geen aandacht vragen. */
.content-log-panel {
    background: #fff;
    border: 1px solid var(--pa-border-card, #ECECEF);
    border-radius: 12px;
    padding: 14px 16px;
}
.content-log-head-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--pa-text-label, #4A4A4A);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.content-log-list {
    display: flex; flex-direction: column;
    gap: 12px;
    position: relative;
}
/* Vertical line achter de dots (timeline-hint). */
.content-log-list::before {
    content: '';
    position: absolute;
    left: 9px; top: 4px; bottom: 4px;
    width: 1px;
    background: #F0F0F2;
    z-index: 0;
}
.content-log-row {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    position: relative;
    z-index: 1;
}
.content-log-dot {
    width: 20px; height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center; justify-content: center;
    color: #fff;
    box-shadow: 0 0 0 3px #fff;
    flex-shrink: 0;
    margin-top: 1px;
}
.content-log-dot .material-symbols-rounded,
.content-log-dot .material-icons { font-size: 12px; }

/* Avatar-dot voor menselijke events (inline_edit, inline_rewrite,
   review_*). Vervangt de gekleurde icoon-dot met de foto van de user. */
.content-log-avatar {
    width: 24px; height: 24px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 3px #fff;
    flex-shrink: 0;
    margin-top: 0;
    display: block;
    margin-left: -2px;
}
.content-log-avatar-fallback {
    display: inline-flex;
    align-items: center; justify-content: center;
    background: #E5E7EB;
    color: #4A4A4A;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
}
/* Grid-kolom van de row is 20px voor de dot. Avatar (24px) mag daar
   over uitsteken; corrigeer via negatieve margin. */
.content-log-row { grid-template-columns: 24px minmax(0, 1fr); }
.content-log-list::before { left: 11px; }
.content-log-body { min-width: 0; font-size: 12px; color: var(--pa-text-label, #4A4A4A); }
.content-log-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
    font-size: 11.5px;
}
.content-log-time { color: var(--pa-text-meta, #A1A1AA); }
.content-log-actor {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #F4F4F5;
    color: #4A4A4A;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
}
.content-log-msg {
    margin-top: 4px;
    padding: 6px 8px;
    background: #FAFAFB;
    border-left: 2px solid #E5E7EB;
    border-radius: 3px;
    font-size: 11.5px;
    color: #4A4A4A;
    line-height: 1.4;
    white-space: pre-wrap;
    max-height: 3.2em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.content-log-row:hover .content-log-msg {
    max-height: none;
    -webkit-line-clamp: unset;
    overflow: visible;
}

/* Content-md-viewer met inline edit — klik op een block maakt 'm bewerkbaar
   in-place; rechtsklik op selectie opent AI-menu. */
.content-md-viewer { user-select: text; }
.content-md-viewer.is-editable .md-block {
    border-radius: 6px;
    padding: 2px 6px;
    margin: 0 -6px;
    cursor: text;
    transition: background 0.12s ease;
}
.content-md-viewer.is-editable .md-block:hover {
    background: #FBFBFC;
    outline: 1px dashed #E5E7EB;
    outline-offset: 0;
}
.content-md-viewer.is-editable .md-block.is-editing {
    background: #FFFBEB;
    outline: 2px solid #FDE68A;
    outline-offset: 0;
}
.md-block-editor {
    width: 100%;
    min-height: 60px;
    padding: 8px 10px;
    border: 1px solid #FDE68A;
    border-radius: 6px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.65;
    color: #18181B;
    background: #fff;
    box-sizing: border-box;
    resize: vertical;
}
.md-block-actions {
    margin-top: 6px;
    display: flex; align-items: center; justify-content: space-between;
    font-size: 11px; color: #92400E;
}
.md-block-hint { display: inline-flex; align-items: center; gap: 4px; }

/* Context-menu bij rechtsklik op selectie */
.md-ctx-menu {
    position: absolute;
    z-index: 9500;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    padding: 4px;
    min-width: 180px;
    font-family: inherit;
}
.md-ctx-menu-item {
    display: flex; align-items: center; gap: 8px;
    width: 100%;
    padding: 8px 10px;
    background: none; border: none;
    color: #18181B;
    font-size: 13px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    border-radius: 5px;
}
.md-ctx-menu-item:hover { background: #F0FDF4; color: #166534; }
.md-ctx-menu-item:first-child { color: #166534; font-weight: 600; }
.tv2-tot-hero-head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: var(--sp-3);
}
.tv2-tot-hero-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #2c6c43;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: inline-flex; align-items: center; gap: 6px;
}
.tv2-tot-hero-sub {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    color: var(--text-secondary);
    font-size: 0.78rem;
    margin-left: 4px;
}

.tv2-tot-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
    gap: var(--sp-2);
}
.tv2-tot-tile {
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(199, 220, 205, 0.6);
    border-radius: 8px;
    display: flex; flex-direction: column; gap: 2px;
}
.tv2-tot-tile-lbl {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    font-weight: 600;
}
.tv2-tot-tile-val {
    /* Unified KPI-typografie: Geist Mono medium. */
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 1.55rem;
    font-weight: 500;
    letter-spacing: -0.4px;
    color: #18181B;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.tv2-tot-tile-sub {
    font-size: 0.7rem;
    color: var(--text-secondary);
    line-height: 1.2;
}

/* Positie-verdeling als gestapelde balk */
.tv2-tot-posbar { margin-top: var(--sp-3); }
.tv2-tot-posbar-bar {
    display: flex;
    width: 100%;
    height: 28px;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(199, 220, 205, 0.6);
}
.tv2-tot-posbar-seg {
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 0.78rem; font-weight: 700;
    font-variant-numeric: tabular-nums;
    min-width: 1.5em;
    transition: filter 0.15s ease;
}
.tv2-tot-posbar-seg:hover { filter: brightness(1.05); }
.tv2-tot-posbar-seg.seg-top10 { background: #2e8f5c; }
.tv2-tot-posbar-seg.seg-mid   { background: #e8b84a; color: #4a3a0a; }
.tv2-tot-posbar-seg.seg-low   { background: #c96f52; }
.tv2-tot-posbar-legend {
    display: flex; flex-wrap: wrap; gap: var(--sp-3);
    margin-top: 8px;
    font-size: 0.78rem;
    color: var(--text-secondary);
}
.tv2-tot-posbar-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.tv2-tot-dot {
    width: 10px; height: 10px; border-radius: 50%;
    display: inline-block;
}
.tv2-tot-dot.seg-top10 { background: #2e8f5c; }
.tv2-tot-dot.seg-mid   { background: #e8b84a; }
.tv2-tot-dot.seg-low   { background: #c96f52; }
/* Focus-keywords op de dienst-kaart */
.test-focus-kw { margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--divider-soft); }
.test-focus-kw-head { font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
.test-focus-kw-chips { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.test-focus-chip-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.test-focus-chip-target {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.78rem;
    color: var(--text-secondary);
    max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.test-focus-chip-target-empty { color: var(--text-tertiary); font-style: italic; }
.test-focus-target-sel { font-size: 0.8rem; max-width: 320px; }

/* Focus-keyword chip in de cluster-header.
   Default = wit/neutraal (geen visuele claim op aandacht). Lock-toggle
   maakt 'm geel/oranje als de gebruiker dit keyword wil markeren als
   echte focus van de cluster. */
.test-focus-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    color: var(--text-primary);
    border-radius: 999px;
    padding: 3px 6px 3px 6px;
    font-size: 0.82rem;
}
.test-focus-chip.is-locked {
    background: var(--oranje-light, #fdf0e3);
    border-color: #E8B84A;
}
.test-focus-chip-lock {
    border: none; background: transparent; cursor: pointer;
    color: #9CA3AF; padding: 0;
    display: inline-flex; align-items: center;
    opacity: 0.7;
}
.test-focus-chip-lock:hover { opacity: 1; color: #4A4A4A; }
.test-focus-chip.is-locked .test-focus-chip-lock { color: #B8722A; opacity: 1; }
.test-focus-chip-name { font-weight: 500; }
.test-focus-chip-stats {
    display: inline-flex; gap: 3px; flex-wrap: wrap;
    margin-left: 2px;
}
.test-focus-chip-stat {
    background: rgba(0,0,0,0.05);
    color: #4A4A4A;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 10.5px;
    font-weight: 500;
    white-space: nowrap;
}
.test-focus-chip-stat.is-empty {
    background: transparent;
    color: #9CA3AF;
    font-style: italic;
    padding: 1px 4px;
}
.test-focus-chip.is-locked .test-focus-chip-stat {
    background: rgba(184, 114, 42, 0.12);
    color: #8B5A1F;
}

/* Focus-positie status-badges (klopt / verkeerde pagina / nog geen data / geen doel) */
.tv2-fp-status {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    white-space: nowrap;
}
.tv2-fp-ok       { background: #e3f4e3; color: #2c6c43; }
.tv2-fp-wrong    { background: #fbe9d6; color: #b8651f; }
.tv2-fp-nodata   { background: #eef0f2; color: #4a4a4a; }
.tv2-fp-notarget { background: #f3f3f3; color: #6e6e6e; }

/* Gecombineerde keywords-tabel — ster-toggle + focus-row highlight */
.tv2-kw-addbar {
    display: flex; gap: var(--sp-2); align-items: center;
    margin: var(--sp-2) 0 var(--sp-3);
}
.tv2-kw-addinput { flex: 1; max-width: 360px; }

.tv2-kw-table tbody tr.is-focus {
    background: #fffbe6;
}
.tv2-kw-table tbody tr.is-focus:hover { background: #fff5c2; }
.tv2-kw-star-cell { width: 32px; text-align: center; padding: 0 !important; }
.tv2-kw-star {
    background: transparent; border: none; cursor: pointer;
    color: var(--text-tertiary);
    padding: 4px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 4px;
}
.tv2-kw-star:hover:not(:disabled) { color: #e8b84a; background: rgba(232, 184, 74, 0.1); }
.tv2-kw-star.is-on { color: #e8b84a; }
.tv2-kw-star:disabled { opacity: 0.3; cursor: not-allowed; }
.tv2-kw-target { font-size: 0.82rem; max-width: 280px; }

/* Split-layout op cluster-detail: keywords links, pagina-structuur rechts */
.tv2-cd-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: var(--sp-3);
    margin-top: var(--sp-3);
}
.tv2-cd-split-left, .tv2-cd-split-right { min-width: 0; }
.tv2-cd-split-left > .test-card,
.tv2-cd-split-right > .tv2-inline-sm { margin-top: 0; padding-top: var(--sp-3); }
@media (max-width: 1080px) {
    .tv2-cd-split { grid-template-columns: 1fr; }
}

/* Keyword-cards in tabel-layout — kolom-titels in een DS-stijl header-balk
   bovenaan, daarna een rij per keyword met identieke grid-template. */
.tv2-kwcards { display: flex; flex-direction: column; gap: var(--sp-2); }
.tv2-kw-table-header,
.tv2-kwcards .tv2-kwcard {
    display: grid;
    grid-template-columns:
        16px              /* grip                       */
        minmax(180px, 1fr)/* keyword                    */
        60px              /* vol                        */
        60px              /* impr                       */
        60px              /* pos                        */
        50px              /* cl                         */
        44px              /* assigned-badge             */
        28px;             /* unlink                     */
    gap: 10px;
    align-items: center;
}
.tv2-kw-table-header {
    background: var(--accent);
    color: var(--text-inverse);
    padding: var(--sp-2) 10px;
    margin-bottom: var(--sp-3);
    border-radius: var(--radius);
    font-size: 0.7rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.tv2-kw-table-header > span {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    /* Cijfer-kolommen (vol/impr/pos/cl) rechts uitlijnen zoals de waarden. */
}
.tv2-kw-table-header > span:nth-child(3),
.tv2-kw-table-header > span:nth-child(4),
.tv2-kw-table-header > span:nth-child(5),
.tv2-kw-table-header > span:nth-child(6) { text-align: right; }

.tv2-kwcard {
    padding: 6px 10px;
    background: var(--wit);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
}
.tv2-kwcard.is-focus {
    background: #fffbe6;
}
/* Lichtgele highlight voor keywords die aan een pagina in dit cluster
   gekoppeld zijn (via page.target_keywords of via focus_keyword.target_urls).
   Zo zie je in de linker keyword-tabel meteen welke al hun plek hebben. */
.tv2-kwcard.is-assigned {
    background: #fffbe6;
}

/* "Vind meer keywords" — discover-paneel onder de keyword-tabel header.
   Toont twee secties (GSC + AI) met per-item Tracken-knop. */
.tv2-discover-wrap { margin-top: 8px; }
.tv2-discover-loading,
.tv2-discover-empty,
.tv2-discover-warn {
    padding: 10px 12px;
    border-radius: 6px;
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    color: #4A4A4A;
    font-size: 12.5px;
    display: flex; align-items: center; gap: 6px;
    flex-wrap: wrap;
}
.tv2-discover-warn { background: #FEF3C7; border-color: #FDE68A; color: #78350F; }
.tv2-discover-card {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 10px 12px;
    display: flex; flex-direction: column; gap: 10px;
}
.tv2-discover-head {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 13px;
    color: #18181B;
}
.tv2-discover-refine {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px;
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
}
.tv2-discover-hint-input {
    flex: 1;
    min-width: 0;
    height: 30px;
    padding: 0 10px;
    font-size: 12.5px;
    color: #18181B;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 5px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.tv2-discover-hint-input::placeholder { color: #9CA3AF; }
.tv2-discover-hint-input:focus {
    border-color: #E87C2A;
    box-shadow: 0 0 0 3px rgba(232, 124, 42, 0.12);
}
.tv2-discover-refine .btn { flex-shrink: 0; }
.tv2-discover-section { display: flex; flex-direction: column; gap: 4px; }
.tv2-discover-section-head {
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
    color: #4A4A4A;
    display: flex; align-items: center; gap: 4px;
    padding-bottom: 2px;
}
.tv2-discover-list { display: flex; flex-direction: column; gap: 2px; }
.tv2-discover-item {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 5px 6px;
    border-radius: 5px;
}
.tv2-discover-item:hover { background: #F9FAFB; }
.tv2-discover-kw {
    font-weight: 500; color: #18181B; font-size: 12.5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tv2-discover-stats {
    display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap;
    font-size: 11px; color: #6B7280;
}
.tv2-discover-stat {
    background: rgba(0,0,0,0.04);
    padding: 1px 6px;
    border-radius: 3px;
    white-space: nowrap;
}
.tv2-discover-stat strong { color: #18181B; font-variant-numeric: tabular-nums; }
.tv2-discover-prio {
    padding: 1px 6px; border-radius: 3px;
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.tv2-prio-hoog   { background: #DCFCE7; color: #166534; }
.tv2-prio-middel { background: #FEF3C7; color: #92400E; }
.tv2-prio-laag   { background: #F3F4F6; color: #6B7280; }
.tv2-discover-intent {
    background: #EFF6FF; color: #1E40AF;
    padding: 1px 6px; border-radius: 3px;
    font-size: 10px;
}
.tv2-discover-reason {
    color: #6B7280; font-style: italic;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 280px;
}
.tv2-discover-add.tv2-discover-add-done {
    background: #DCFCE7 !important;
    color: #166534 !important;
    border-color: #BBF7D0 !important;
}
.tv2-kwcard-kw {
    min-width: 0;
    font-weight: 600; color: var(--text-primary);
    word-break: break-word;
}
.tv2-kwcard-unlink {
    grid-column-start: 8;
    justify-self: center;
    opacity: 0.6;
}
.tv2-kwcard-unlink:hover { opacity: 1; }
/* tv2-kwcard-stats verdwijnt visueel; de 4 stat-spans worden direct grid-children. */
.tv2-kwcard .tv2-kwcard-stats {
    display: contents;
}
.tv2-kwcard .tv2-kwcard-stat {
    font-size: 0.78rem; color: var(--text-secondary);
    text-align: right;
    white-space: nowrap;
}
.tv2-kwcard-target,
.tv2-kwcard-ranks,
.tv2-kwcard-status {
    margin-top: 4px;
    font-size: 0.78rem;
    color: var(--text-secondary);
    display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}
.tv2-kwcard-row-lbl {
    color: var(--text-tertiary);
    display: inline-flex; align-items: center; gap: 3px;
    flex-shrink: 0;
}
.tv2-kwcard-target .tv2-kw-target { flex: 1; min-width: 0; max-width: none; font-size: 0.78rem; }
.tv2-kwcard-stat { white-space: nowrap; }
.tv2-kwcard-stat strong { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.tv2-kwcard-ranks a {
    color: var(--accent, #2563eb);
    word-break: break-all;
    text-decoration: none;
}
.tv2-kwcard-ranks a:hover { text-decoration: underline; }

/* Drag-and-drop: keyword → pagina */
.tv2-kwcard { cursor: grab; transition: opacity 0.15s ease, transform 0.1s ease; }
.tv2-kwcard:active { cursor: grabbing; }
.tv2-kwcard.is-dragging { opacity: 0.4; }
.tv2-kwcard-grip {
    display: inline-flex; align-items: center;
    color: var(--text-tertiary);
    cursor: grab;
    margin-right: 2px;
}
.tv2-kwcard-grip:hover { color: var(--text-secondary); }

/* Pagina-card als drop-target — tijdens sleep highlight + tip */
.is-dragging-kw .tv2-pcard {
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.is-dragging-kw .tv2-pcard[data-drop-page-url] {
    border-style: dashed;
    border-color: #b6cce5;
}
.tv2-pcard.is-drop-target {
    border-style: solid !important;
    border-color: var(--accent, #2563eb) !important;
    background: #eef3f8;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    transform: scale(1.005);
}
.tv2-pcard.is-drop-target::before {
    content: 'Plaats hier';
    position: absolute;
    top: 4px; right: 8px;
    font-size: 0.7rem; font-weight: 700;
    color: var(--accent, #2563eb);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: #fff;
    padding: 1px 6px;
    border-radius: 4px;
    pointer-events: none;
}
.tv2-pcard { position: relative; }

/* Drop-target voor 'Pagina toevoegen' — visueel duidelijk maken dat het
   een drop-zone is wanneer een keyword wordt gesleept. */
.is-dragging-kw .tv2-sm-addbtn {
    border-style: dashed;
    border-color: var(--accent, #2563eb);
}
.tv2-sm-addbtn.is-drop-target {
    background: #eef3f8 !important;
    border-color: var(--accent, #2563eb) !important;
    color: var(--accent, #2563eb) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* Hint in het add-formulier wanneer een keyword wacht om gekoppeld te worden */
.tv2-sm-addrow-hint {
    margin: 4px 0 8px;
    padding: 6px 10px;
    background: #eef3f8;
    border: 1px solid #cbd9ee;
    border-radius: 6px;
    font-size: 0.82rem;
    color: var(--accent, #2563eb);
    display: flex; align-items: center; gap: 6px;
}

/* Toegewezen keywords binnen een pagina-card — simpel zoals de keyword-cards links */
.tv2-pcard-assigned {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--divider-soft);
}
.tv2-pcard-assigned-head {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    font-weight: 600;
    margin-bottom: 6px;
    display: inline-flex; align-items: center; gap: 4px;
}
/* Inline chips — kw + 'x', wrappen automatisch. Stats al op de left-card. */
.tv2-pcard-assigned-chips {
    display: flex; flex-wrap: wrap; gap: 6px;
}
.tv2-pcard-kwchip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 4px 3px 10px;
    background: var(--surface-subtle, #FAF7F2);
    border: 1px solid var(--border-subtle, #E8EAED);
    border-radius: 999px;
    font-size: 0.82rem;
    line-height: 1.2;
}
.tv2-pcard-kwchip-name {
    font-weight: 500; color: var(--text-primary);
    white-space: nowrap;
    border: none; background: transparent; padding: 0;
    font-family: inherit; font-size: inherit;
    cursor: pointer;
}
.tv2-pcard-kwchip-name:hover { text-decoration: underline; color: var(--accent); }
.tv2-pcard-kwchip-x {
    border: none; background: transparent; cursor: pointer;
    padding: 2px; border-radius: 999px;
    color: var(--text-secondary);
    display: inline-flex; align-items: center; justify-content: center;
    opacity: 0.6;
}
.tv2-pcard-kwchip-x:hover { opacity: 1; background: rgba(0,0,0,0.06); }

/* Primair-keyword chip: ster-pil vóór de URL op de pagina-card. Kleur
   matched de pagina-intentie — groen voor commercieel, blauw voor
   informatief (zelfde kleurcode als de C/I-cirkel). Klik = primair-
   status loskoppelen (degraderen naar gewone chip). */
.tv2-pcard-primary {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px;
    background: var(--groen-light, #e8f5e8);
    color: var(--fg-success, #1e7a36);
    border: 1px solid var(--green-100, #C8E6CB);
    border-radius: 999px;
    font-size: 0.82rem; font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
}
.tv2-pcard-primary:hover { background: #d8ecd8; }
.tv2-pcard-primary .material-symbols-rounded { font-size: 14px; }
/* Informatieve pagina's krijgen een blauwe primair-pil — matched de I-cirkel. */
.tv2-pcard.is-info .tv2-pcard-primary {
    background: var(--bg-info, #E8F0FE);
    color: var(--fg-info, #1557B0);
    border-color: var(--blue-100, #D2E3FC);
}
.tv2-pcard.is-info .tv2-pcard-primary:hover { background: #d5e3fb; }

/* Toegewezen-badge op de linker keyword-cards (laat zien aan hoeveel pagina's).
   Vaste positie in grid-column 7 zodat 'm aligneert met de header. */
.tv2-kwcard-assigned {
    grid-column-start: 7;
    justify-self: center;
    display: inline-flex; align-items: center; gap: 2px;
    padding: 1px 6px;
    border-radius: 999px;
    background: #e3f4e3;
    color: #2c6c43;
    font-size: 0.7rem; font-weight: 600;
}

/* ── Pagina-cards (vervangt tree-rendering) ───────────────────────────────
   Eén card per pagina, allemaal op hetzelfde visuele niveau. Geen "+ Sub",
   geen indent — alle pagina's zijn gelijk in de cluster. */
.tv2-sm-cards {
    display: flex; flex-direction: column;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
}
.tv2-pcard {
    padding: 10px 12px;
    background: var(--wit);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
}
.tv2-pcard.is-info { background: #f9fbfd; }
/* Pillar / hoofdpagina visueel onderscheiden — subtiel donkerder achtergrond
   t.o.v. de overige cards in het cluster (linker-accent-rand is op verzoek
   verwijderd, C/I-cirkel + PILLAR-PAGE pil zijn voldoende signaal). */
.tv2-pcard.is-pillar { background: var(--surface-subtle, #FAF7F2); }
.tv2-pcard.is-pillar.is-info { background: #eef4fb; }

/* "pillar-page" pil naast de C/I-cirkel op de hoofdpagina. Donkergroen voor
   commercieel, donkerblauw voor informatieve pillar. Hoogte/padding gelijk
   aan .tv2-pcard-primary zodat ze visueel uitlijnen. */
.tv2-pcard-pillartag {
    display: inline-flex; align-items: center;
    padding: 3px 10px;
    background: #2c6c43;
    color: var(--text-inverse, #fff);
    border-radius: 999px;
    font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
    line-height: 1.2;
    flex-shrink: 0;
}
.tv2-pcard.is-info .tv2-pcard-pillartag { background: var(--fg-info, #1557B0); }
.tv2-pcard-overlap {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px;
    background: #FEF3C7;
    color: #78350F;
    border: 1px solid #FDE68A;
    border-radius: 999px;
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.02em;
    cursor: help;
    line-height: 1.4;
}
.tv2-pcard-overlap:hover { background: #FDE68A; }

.tv2-pcard-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--sp-2);
}
.tv2-pcard-title {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    min-width: 0; flex: 1;
}
.tv2-pcard-titletext {
    font-weight: 600; color: var(--text-primary);
}
.tv2-pcard-url {
    font-size: 0.82rem; color: var(--text-primary);
    word-break: break-all; text-decoration: none;
}
.tv2-pcard-url:hover { text-decoration: underline; }
.tv2-pcard-actions {
    display: flex; gap: 2px; flex-shrink: 0; align-items: center;
}
.tv2-pcard-ready {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 600;
    margin-right: 4px;
    white-space: nowrap;
    cursor: help;
}
.tv2-pcard-ready.is-full {
    background: #DCFCE7; color: #14532D; border: 1px solid #86EFAC;
}
.tv2-pcard-ready.is-partial {
    background: #FEF3C7; color: #78350F; border: 1px solid #FCD34D;
}
/* Een ronde die nu draait. Blauw, want het is een stand en geen uitkomst;
   groen zou zeggen dat de tekst er al is. */
.tv2-pcard-bezig {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 600;
    margin-right: 4px;
    white-space: nowrap;
    font-family: inherit; cursor: pointer;
    background: #DBEAFE; color: #1E3A8A; border: 1px solid #93C5FD;
}
.tv2-pcard-bezig:hover { filter: brightness(.96); }

/* Dezelfde badge, maar als ingang naar de geschreven tekst. Een <button>
   brengt eigen font, achtergrond en padding mee; die zet ik terug. */
button.tv2-pcard-ready {
    font-family: inherit; cursor: pointer;
    transition: filter .12s ease;
}
button.tv2-pcard-ready:hover { filter: brightness(.95); }
.tv2-cr-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--tv2-cr-bg, #15803D);
    color: #fff !important;
    text-decoration: none;
    margin-right: 4px;
    flex-shrink: 0;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.6), 0 1px 2px rgba(0,0,0,0.12);
}
.tv2-cr-badge:hover {
    transform: scale(1.08);
    box-shadow: 0 0 0 2px rgba(255,255,255,0.6), 0 2px 6px rgba(0,0,0,0.18);
}

/* Activity-strip bovenaan Cogoo: toont welke pages nu door de pipeline
   worden geschreven + hoeveel in de wachtrij staan. Zichtbaar signaal
   dat 't AI-team bezig is (of niet). */
.tv2-activity-strip {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 10px 12px;
    margin: 8px 0 12px;
    padding: 10px 14px;
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    border-radius: 10px;
    font-size: 12.5px;
    color: #1E3A8A;
}
.tv2-activity-strip-idle {
    background: #F9FAFB;
    border-color: #E5E7EB;
    color: #6B7280;
}
.tv2-activity-lbl {
    display: inline-flex; align-items: center; gap: 6px;
    font-weight: 600;
    white-space: nowrap;
}
.tv2-activity-chips {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 6px 8px;
}
.tv2-activity-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px;
    background: #fff;
    color: #1D4ED8;
    border: 1px solid #BFDBFE;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 500;
    max-width: 320px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tv2-activity-chip:hover {
    background: #DBEAFE;
    border-color: #93C5FD;
}
.tv2-activity-chip-running .material-symbols-rounded {
    animation: spin 1.4s linear infinite;
}
.tv2-activity-chip-stale {
    background: #FEF2F2;
    color: #991B1B;
    border-color: #FCA5A5;
    animation: activity-stale-pulse 1.6s ease-in-out infinite;
}
.tv2-activity-chip-stale:hover { background: #FEE2E2; }
.tv2-activity-more,
.tv2-activity-pending,
.tv2-activity-slot {
    display: inline-flex; align-items: center; gap: 5px;
    color: #6B7280;
    font-weight: 500;
}
.tv2-activity-slot {
    background: #fff;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid #D1D5DB;
    margin-left: auto;
    font-size: 11.5px;
}
.tv2-activity-alert {
    display: flex; align-items: center; gap: 8px;
    margin: -6px 0 12px;
    padding: 10px 14px;
    background: #FEF2F2;
    border: 1px solid #FCA5A5;
    border-radius: 10px;
    color: #991B1B;
    font-size: 12.5px;
}
.tv2-activity-bulk {
    display: flex; gap: 6px; margin-left: auto;
    flex-basis: 100%;
    justify-content: flex-end;
}

/* Actie-knoppen tijdens async werk: pulserende schaduw + subtiele
   opacity-blink zodat je meteen ziet dat er iets gebeurt (bv 'Analyseer
   cluster'). Werkt op elke .btn die tijdens de call .is-loading krijgt. */
.btn.is-loading {
    position: relative;
    animation: btn-loading-pulse 1.4s ease-in-out infinite;
    cursor: progress;
}

/* Interne linking indicator: klein link-icoon naast de content-run
   badge als de run een 09-internal-links.md heeft. Groen zodat direct
   duidelijk is dat deze page al interne links gekregen heeft van de
   linking-agent (of van een reeds geaccepteerde linking-review). */
.tv2-cr-linked {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #DCFCE7;
    color: #166534;
    margin-right: 4px;
    flex-shrink: 0;
}
.tv2-cr-linked .material-symbols-rounded,
.tv2-cr-linked .material-symbols-outlined,
.tv2-cr-linked .material-icons {
    font-size: 12px !important;
    color: #166534;
}
@keyframes btn-loading-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(29,78,216,0.35); }
    50%      { box-shadow: 0 0 0 6px rgba(29,78,216,0); }
}
.tv2-activity-strip-loading {
    background: #F9FAFB;
    border-color: #E5E7EB;
    color: #6B7280;
}
.tv2-activity-strip-loading .material-symbols-rounded {
    animation: spin 1.4s linear infinite;
}
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes activity-stale-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); }
    50%      { box-shadow: 0 0 0 4px rgba(220,38,38,0.15); }
}
.tv2-cr-badge .material-symbols-outlined,
.tv2-cr-badge .material-icons {
    font-size: 14px !important;
    color: #fff;
}
/* Schrijven-knop op pages zonder content-run: subtiel, niet schreeuwerig. */
.tv2-cr-write {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px;
    background: transparent;
    color: var(--accent, #E33B2A);
    border: 1px dashed currentColor;
    border-radius: 999px;
    font-size: 11.5px; font-weight: 600;
    text-decoration: none;
    margin-right: 4px;
    transition: background 0.12s ease, color 0.12s ease;
    flex-shrink: 0;
    white-space: nowrap;
}
.tv2-cr-write:hover {
    background: var(--accent, #E33B2A);
    color: #fff;
    border-style: solid;
}
.tv2-cr-write .material-symbols-outlined,
.tv2-cr-write .material-icons { font-size: 14px !important; color: inherit; }


/* Chevron tussen stappen: maakt zichtbaar dat dit een sequentie is, geen
   losse tags. Decoratief — los van de pill zodat klik niet doorklikt. */
@keyframes tv2-cr-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.tv2-pcard-badges {
    display: flex; gap: 4px; flex-wrap: wrap;
    margin-top: 4px;
}
.tv2-pcard-gsc {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
    margin-top: 6px;
    font-size: 0.82rem; color: var(--text-secondary);
}
.tv2-pcard-gsc-stat {
    white-space: nowrap;
    display: inline-flex; align-items: center; gap: 3px;
}
.tv2-pcard-gsc-stat strong { color: var(--text-primary); font-variant-numeric: tabular-nums; }
/* Inline top-query: italic, secundair, truncate als 'm te lang wordt */
.tv2-pcard-tq-inline {
    min-width: 0;
    overflow: hidden;
    color: var(--text-tertiary);
}
.tv2-pcard-tq-inline em {
    font-style: italic;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0;
}
.tv2-pcard-note {
    margin-top: 4px;
    font-size: 0.78rem; color: var(--text-tertiary);
}
.tv2-pcard-edit { padding: 12px; }
.tv2-pcard-edit .tv2-pcard-actions { margin-top: 8px; }
.tv2-pcard-edit-cq {
    margin-top: 8px;
    padding: 10px 12px;
    background: #F0F9FF;
    border: 1px solid #BAE6FD;
    border-radius: 6px;
}
.tv2-pcard-edit-cq-label {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; color: #0C4A6E;
    margin-bottom: 6px;
}
.tv2-pcard-edit-cq-hint {
    font-weight: 400; color: #075985; font-style: italic;
    font-size: 11px;
}
.tv2-pcard-edit-cq-input {
    width: 100%;
    font-size: 12.5px;
    resize: vertical;
    min-height: 44px;
}
.tv2-pcard-edit-cq-ai {
    margin-left: auto;
    padding: 3px 8px;
    font-size: 11px !important;
}
.tv2-pcard-edit-primaud {
    margin-top: 8px;
    padding: 10px 12px;
    background: #FAF5FF;
    border: 1px solid #E9D5FF;
    border-radius: 6px;
}
.tv2-pcard-edit-primaud-empty {
    background: #F9FAFB;
    border-color: #E5E7EB;
    color: #6B7280;
    font-size: 12px;
    display: flex; align-items: center; gap: 6px;
}
.tv2-pcard-edit-primaud-label {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; color: #581C87;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.tv2-pcard-edit-primaud-hint {
    font-weight: 400; color: #6B21A8; font-style: italic;
    font-size: 11px;
}
.tv2-pcard-edit-primaud-input {
    width: 100%;
    font-size: 12.5px;
    background: #FFFFFF;
}
/* Writer-mode + page_category (Fase 1 sitemap+branded) */
.tv2-pcard-edit-mode {
    margin: 12px 0;
    padding: 10px 14px;
    background: #F0F9FF;
    border: 1px solid #BFDBFE;
    border-radius: 8px;
}
.tv2-pcard-edit-mode-label {
    display: flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 600; color: #1E40AF;
    margin-bottom: 8px;
}
.tv2-pcard-edit-mode-hint {
    font-weight: 400; font-size: 11px; color: #3B82F6;
    margin-left: 6px;
}
.tv2-pcard-edit-mode-row {
    display: flex; gap: 8px; flex-wrap: wrap;
}
.tv2-pcard-edit-mode-input {
    flex: 1; min-width: 180px; font-size: 13px;
}
.tv2-pcard-audchip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px;
    background: #FAF5FF;
    color: #6B21A8;
    border: 1px solid #E9D5FF;
    border-radius: 999px;
    font-size: 11px; font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
.tv2-pcard-audchip.tv2-pcard-audchip-broad {
    background: #F3F4F6;
    color: #6B7280;
    border-color: #E5E7EB;
    font-weight: 500;
    font-style: italic;
}
.tv2-pcard-cq {
    display: flex; align-items: flex-start; gap: 6px;
    margin-top: 6px;
    padding: 6px 10px;
    background: #F0F9FF;
    border: 1px solid #BAE6FD;
    border-radius: 5px;
    font-size: 12px;
    color: #075985;
    line-height: 1.45;
}
.tv2-pcard-cq em { font-style: italic; color: #0C4A6E; }
.tv2-pcard-cq.tv2-pcard-cq-missing {
    background: #FFFBEB;
    border-color: #FDE68A;
    color: #78350F;
    font-weight: 500;
}
.tv2-pcard-cq-hint {
    font-weight: 400; color: #92400E; font-style: italic;
    margin-left: 6px;
    font-size: 11px;
}
/* Cluster-strategist scan modal */
.tv2-clusterscan { display: flex; flex-direction: column; gap: 16px; font-size: 13px; }
.tv2-clusterscan-summary {
    padding: 10px 14px;
    background: #F0F9FF;
    border: 1px solid #BAE6FD;
    border-radius: 6px;
    font-size: 12.5px; color: #075985;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.tv2-clusterscan-summary-issues {
    padding: 2px 8px; background: #FEE2E2; color: #991B1B; border-radius: 999px;
    font-size: 11px; font-weight: 600;
}
.tv2-clusterscan-summary-goods {
    padding: 2px 8px; background: #DCFCE7; color: #166534; border-radius: 999px;
    font-size: 11px; font-weight: 600;
}
.tv2-clusterscan-section-hd {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 700; color: #78350F;
    padding-bottom: 6px; margin-bottom: 8px;
    border-bottom: 1px solid #FDE68A;
}
.tv2-clusterscan-section-hd-good { color: #166534; border-color: #86EFAC; }
.tv2-clusterscan-issues, .tv2-clusterscan-goods {
    display: flex; flex-direction: column; gap: 10px;
}
.tv2-clusterscan-issue {
    padding: 12px 14px;
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    border-radius: 8px;
    border-left: 4px solid #B45309;
}
.tv2-clusterscan-issue[data-sev="high"] {
    background: #FEF2F2;
    border-color: #FCA5A5;
    border-left-color: #DC2626;
}
.tv2-clusterscan-issue-head {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-bottom: 6px;
}
.tv2-clusterscan-sev {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.tv2-clusterscan-cat {
    font-size: 11px; color: #6B7280;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.tv2-clusterscan-title { color: #18181B; font-size: 13.5px; }
.tv2-clusterscan-detail { color: #4A4A4A; margin: 6px 0 8px; line-height: 1.5; white-space: pre-wrap; }
.tv2-clusterscan-action {
    padding: 8px 10px;
    background: rgba(255,255,255,0.7);
    border: 1px dashed #FDE68A;
    border-radius: 5px;
    font-size: 12px;
    color: #78350F;
    display: flex; align-items: flex-start; gap: 6px;
}
.tv2-clusterscan-good {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 8px 12px;
    background: #F0FDF4;
    border: 1px solid #86EFAC;
    border-radius: 6px;
    font-size: 12.5px;
}
.tv2-clusterscan-good-check { color: #15803D; margin-top: 2px; flex-shrink: 0; }
.tv2-clusterscan-good-detail { color: #166534; margin-top: 2px; font-size: 12px; }
.tv2-clusterscan-empty-issues {
    padding: 14px;
    background: #F0FDF4;
    border: 1px solid #86EFAC;
    border-radius: 6px;
    color: #166534; font-weight: 500;
    display: flex; align-items: center; gap: 8px;
    justify-content: center;
}
/* Auto-fix bar bovenaan de issue-lijst */
.tv2-clusterscan-applybar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    border-radius: 8px;
    margin: 0 0 14px;
}
.tv2-clusterscan-applybar-hint {
    font-size: 12.5px; color: #1E40AF;
    display: flex; align-items: center; gap: 6px;
}
/* Fix-row onder elke issue (checkbox of deep-link knop) */
.tv2-clusterscan-fix-row {
    display: flex; align-items: center; gap: 10px;
    margin-top: 10px; padding-top: 10px;
    border-top: 1px dashed #E5E7EB;
}
.tv2-clusterscan-fix-check {
    display: flex; align-items: center; gap: 8px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 120ms;
}
.tv2-clusterscan-fix-check:hover { background: #F3F4F6; }
.tv2-clusterscan-fix-cb {
    width: 16px; height: 16px;
    accent-color: var(--pa-accent, #E33B2A);
    cursor: pointer;
}
.tv2-clusterscan-fix-cb:disabled { cursor: not-allowed; opacity: 0.5; }
.tv2-clusterscan-fix-label {
    font-size: 12.5px; font-weight: 500; color: #1F2937;
    display: flex; align-items: center; gap: 5px;
}
.tv2-clusterscan-fix-none {
    font-size: 12px; color: #6B7280; font-style: italic;
    display: flex; align-items: center; gap: 5px;
}
.tv2-clusterscan-fix-link {
    font-size: 12px;
}
/* Resultaten na apply */
.tv2-clusterscan-running {
    padding: 14px;
    background: #FFF7ED;
    border: 1px solid #FDBA74;
    border-radius: 6px;
    color: #9A3412;
    display: flex; align-items: center; gap: 8px;
    margin-top: 16px;
}
.tv2-clusterscan-results {
    margin-top: 16px;
}
.tv2-clusterscan-results-hd {
    font-weight: 700; color: #18181B;
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 10px;
    padding-top: 12px;
    border-top: 2px solid #E5E7EB;
}
.tv2-clusterscan-result {
    display: flex; gap: 10px;
    padding: 10px 12px;
    border-radius: 6px;
    margin-bottom: 8px;
    font-size: 12.5px;
    line-height: 1.5;
}
.tv2-clusterscan-result-ok {
    background: #F0FDF4; border: 1px solid #BBF7D0;
    color: #166534;
}
.tv2-clusterscan-result-err {
    background: #FEF2F2; border: 1px solid #FCA5A5;
    color: #991B1B;
}
.tv2-clusterscan-result-body { flex: 1; }
.tv2-clusterscan-result-q {
    margin-top: 4px; font-size: 12px; color: #374151;
    padding: 6px 8px; background: rgba(255,255,255,0.6); border-radius: 4px;
}
.tv2-clusterscan-result-url {
    margin-top: 4px; font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 11.5px; color: #374151;
    display: flex; align-items: center; gap: 4px;
}
.tv2-clusterscan-result-details {
    margin: 6px 0 0; padding-left: 20px; font-size: 11.5px;
    color: #4B5563;
}
.tv2-clusterscan-result-details li { margin: 2px 0; }
.tv2-clusterscan-result-details em { font-style: italic; color: #1F2937; }
.tv2-clusterscan-results-foot {
    display: flex; justify-content: flex-end;
    margin-top: 12px;
}
/* Autoriteitssignalen sub-tab */
.auth-signals-card {
    background: #fff;
    border: 1px solid var(--pa-border-card, #E5E7EB);
    border-radius: 12px;
    padding: 24px;
    max-width: 1100px;
}
.auth-signals-head h2 {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 8px;
    font-size: 1.1rem; font-weight: 700;
    color: var(--text-primary, #18181B);
}
.auth-signals-lead {
    font-size: 0.8125rem; color: var(--text-secondary, #4A4A4A); line-height: 1.55;
    margin: 0 0 22px;
    max-width: 820px;
}
.auth-signals-lead code {
    background: #F3F4F6; padding: 1px 6px; border-radius: 4px;
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 11.5px;
}
.auth-signals-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}
@media (max-width: 900px) { .auth-signals-grid { grid-template-columns: 1fr; } }
.auth-signals-field {
    display: flex; flex-direction: column; gap: 4px;
}
/* Full-width extra scan-URLs veld: staat onder de 2-koloms grid */
.auth-signals-field--full { margin-top: 18px; }
.auth-signals-label {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600; color: #18181B;
}
/* Toelichtingsregels onder een pagina of veld.
   Stonden op 11,5px cursief. Voor een los woord gaat dat, maar hier staan hele
   zinnen in — "Definieert het bureau als partij die ontwerp en realisatie
   begeleidt..." — en cursief op 11,5px leest dan slecht.

   Nu 0.8rem, gelijk aan .text-sm, rechtop, met wat meer regelafstand. De kleur
   houdt het ondergeschikt; daar is cursief niet voor nodig. */
.auth-signals-hint {
    font-size: 0.8rem;
    color: var(--text-secondary, #6B7280);
    line-height: 1.5;
    margin-bottom: 2px;
}
.auth-signals-textarea {
    font-family: inherit;
    font-size: 12.5px;
    resize: vertical;
    min-height: 80px;
    line-height: 1.5;
}
.auth-signals-actions {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #F3F4F6;
}
.tv2-pcard-edit-cq-suggestions {
    margin-top: 6px;
    display: flex; flex-direction: column; gap: 4px;
}
.tv2-cq-loading, .tv2-cq-empty {
    padding: 6px 10px;
    background: #FFFBEB;
    border: 1px dashed #FDE68A;
    border-radius: 5px;
    font-size: 12px;
    color: #78350F;
    display: flex; align-items: center; gap: 6px;
}
.tv2-cq-sug-hd {
    font-size: 11px; font-weight: 600; color: #075985;
    text-transform: uppercase; letter-spacing: 0.03em;
    padding: 2px 0;
}
.tv2-cq-sug-item {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 8px 10px;
    background: #FFFFFF;
    border: 1px solid #BAE6FD;
    border-radius: 5px;
    font-size: 12.5px;
    color: #18181B;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.tv2-cq-sug-item:hover {
    background: #F0F9FF;
    border-color: #0EA5E9;
}
.tv2-cq-sug-num {
    flex-shrink: 0;
    width: 20px; height: 20px;
    background: #E0F2FE;
    color: #0C4A6E;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
    line-height: 1;
}
.tv2-cq-sug-text {
    flex: 1;
    line-height: 1.4;
}
.tv2-cr-write-group {
    display: inline-flex; align-items: center; gap: 6px;
}
.tv2-cr-depth {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 11px; color: #6B7280;
    cursor: pointer; user-select: none;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid transparent;
}
.tv2-cr-depth:hover { background: #F9FAFB; border-color: #E5E7EB; }
.tv2-cr-depth input[type="checkbox"] {
    accent-color: #E87C2A;
    margin: 0;
}
.tv2-cr-write.is-disabled {
    background: #FEF3C7 !important;
    color: #78350F !important;
    border-color: #FDE68A !important;
    cursor: not-allowed !important;
    opacity: 1;
}
.test-focus-chip-x { border: none; background: transparent; cursor: pointer; display: inline-flex; color: var(--text-tertiary); padding: 0; }
.test-focus-chip-x:hover { color: var(--rood); }
.test-focus-add { display: flex; gap: 6px; align-items: center; }
.test-focus-input { flex: 1; min-width: 0; padding: 4px 8px; border: 1px solid var(--divider-soft); border-radius: var(--radius-sm); font-size: 0.85rem; }
/* Cluster-prestatie (GSC over de URL-cluster) */
.test-cluster-perf { margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--divider-soft); }
.test-cluster-perf-head { font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
.test-cp-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }
.test-cp-metric { background: var(--creme, #faf7f2); border-radius: var(--radius-sm); padding: 6px 8px; text-align: center; }
.test-cp-val { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 1.05rem; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.test-cp-lbl { display: block; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-tertiary); margin-top: 2px; }
.test-cp-delta { display: inline-flex; align-items: center; font-size: 0.72rem; font-weight: 600; }
.test-cp-delta.is-up { color: var(--groen); }
.test-cp-delta.is-down { color: var(--rood); }
.test-cp-queries { margin-top: 6px; }
.test-cp-queries summary { cursor: pointer; list-style: none; font-size: 0.8rem; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 4px; }
.test-cp-queries summary::-webkit-details-marker { display: none; }
.test-cp-queries .icon { transition: transform 0.15s ease; }
.test-cp-queries[open] summary .icon { transform: rotate(180deg); }
.test-cp-q-table { width: 100%; border-collapse: collapse; margin-top: 4px; font-size: 0.8rem; }
.test-cp-q-table th, .test-cp-q-table td { padding: 3px 6px; border-bottom: 1px solid var(--divider-soft); text-align: left; }
.test-cp-q-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.test-cp-q-table th { font-size: 0.66rem; text-transform: uppercase; color: var(--text-tertiary); }
.test-cp-noq { font-size: 0.8rem; margin-top: 4px; }
.test-cluster-perf-head { justify-content: space-between; }
.test-cp-open { flex-shrink: 0; }
.test-stats-label { font-size: 0.72rem; font-weight: 600; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: var(--sp-2) 0 4px; }
.test-ga4-line { font-size: 0.8rem; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 6px 0 var(--sp-2); }
.test-kw-line { font-size: 0.8rem; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 6px 0 4px; }
.test-cluster-label { justify-content: space-between; }
.test-cluster-headline-msg { font-size: 0.85rem; display: flex; align-items: center; gap: 4px; padding: var(--sp-2) 0; }
/* Focus-keyword posities in de cluster-detail */
.tv2-cd-focus-empty { font-size: 0.85rem; }
.tv2-cd-focus-out { color: var(--oranje, #c96f52); }
/* Cluster-detail sub-view (pagina-niveau) */
/* Cluster-prestatie kaart — gelijke stijl als de Cogoo-resultaten hero
   bovenaan het overzicht (groene gradient, dark green title, witte tegels). */
.tv2-cd-total {
    margin-bottom: var(--sp-3);
    padding: var(--sp-4);
    background: linear-gradient(135deg, #f0f7f1 0%, #e7f1ea 100%);
    border: 1px solid #c7dccd;
    border-radius: var(--radius);
}
.tv2-cd-total-head {
    font-size: 0.95rem;
    font-weight: 700;
    color: #2c6c43;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
    margin-bottom: var(--sp-3);
}
.tv2-cd-total-sub {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    color: var(--text-secondary);
    font-size: 0.78rem;
}
.tv2-cd-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); gap: var(--sp-2); }
.tv2-cd-metric {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(199, 220, 205, 0.6);
    border-radius: 8px;
    padding: 12px 14px;
    display: flex; flex-direction: column; gap: 2px;
    text-align: left;
}
.tv2-cd-val {
    /* Unified KPI-typografie: Geist Mono medium, gelijk aan
       pa-kpi-tile-val en seo2-kpi-value. */
    display: block;
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 1.55rem;
    font-weight: 500;
    letter-spacing: -0.4px;
    color: #18181B;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

/* Positie-verdeling balk op cluster-detail — gebruikt dezelfde seg-kleuren als de hero */
.tv2-cd-posbar { margin-top: var(--sp-3); }
.tv2-cd-posbar-bar {
    display: flex;
    width: 100%;
    height: 28px;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(199, 220, 205, 0.6);
}
.tv2-cd-lbl { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-tertiary); margin-top: 2px; }
.tv2-cd-table-title { font-weight: 700; display: flex; align-items: center; gap: 6px; margin-bottom: var(--sp-2); }
.tv2-cd-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.tv2-cd-table th, .tv2-cd-table td { padding: 8px 10px; border-bottom: 1px solid var(--divider-soft); text-align: left; vertical-align: top; }
.tv2-cd-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tv2-cd-table th { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-tertiary); }
.tv2-cd-url { display: flex; flex-direction: column; gap: 2px; }
.tv2-cd-url-title { font-weight: 600; color: var(--text-primary); }
.tv2-cd-url a { color: var(--accent, #2563eb); word-break: break-all; font-size: 0.82rem; }
.tv2-cd-tq { color: var(--text-secondary); max-width: 320px; }
@media (max-width: 640px) { .tv2-cd-metrics { grid-template-columns: repeat(2, 1fr); } }
.test-card { background: var(--wit); border: 1px solid var(--border-subtle); border-radius: var(--radius); padding: var(--sp-4); min-width: 0; }
.test-card.is-dim { background: var(--grijs-50, #fafafa); border-style: dashed; color: var(--text-secondary); }
.test-card.is-dim .test-card-title { color: var(--text-secondary); font-weight: 500; }
.test-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-2); }
.test-card-title { font-weight: 600; color: var(--text-primary); }
.test-card-del { background: none; border: none; cursor: pointer; padding: 2px; color: var(--text-tertiary); display: flex; flex-shrink: 0; border-radius: 4px; line-height: 0; }
.test-card-del:hover { color: var(--rood); background: rgba(220, 53, 69, 0.08); }
.test-card-sub { font-size: 0.8rem; color: var(--text-secondary); margin-top: 2px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.test-card-scope { font-size: 0.85rem; color: var(--text-default); margin: var(--sp-2) 0; }
.test-card-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.test-section-h { margin: var(--sp-5) 0 var(--sp-2); font-size: 0.95rem; color: var(--text-secondary); }

.test-cluster-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin: var(--sp-2) 0; }
.test-cluster-grid > div { min-width: 0; }
.test-mini-h { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-tertiary); margin: var(--sp-2) 0 4px; font-weight: 600; }
.test-mini-sub { font-size: 0.78rem; color: var(--text-secondary); margin: var(--sp-2) 0 2px; }
.test-list { list-style: none; margin: 0; padding: 0; font-size: 0.82rem; color: var(--text-default); }
.test-list li { padding: 2px 0; display: flex; align-items: baseline; gap: 6px; }
.test-list-text { flex: 1; min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.test-btn-danger { color: var(--rood); }
.test-btn-danger:hover { background: var(--rood-light, #fee2e2); color: var(--rood); }
.test-opp li::before { content: "✓"; color: var(--groen); }
.test-risk li::before { content: "!"; color: var(--rood); font-weight: 700; }
.test-pg { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 5px; }
.test-pg-existing { background: var(--groen); }
.test-pg-missing { background: var(--oranje); }

.test-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--sp-2); }
.test-chip { font-size: 0.72rem; background: var(--creme); color: var(--text-secondary); padding: 2px 8px; border-radius: 10px; }

/* Pillar-detail */
.test-detail-head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.test-detail-head h3 { margin: 0; font-size: 1.1rem; }
.test-detail-head-right { margin-left: auto; display: flex; gap: var(--sp-2); }
.test-detail-meta { margin-bottom: var(--sp-3); color: var(--text-secondary); font-size: 0.85rem; }
.test-detail-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-4); margin-bottom: var(--sp-5); }

.test-actions-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.test-actions-head h4 { margin: 0; }
.test-actions-head > div { display: flex; gap: var(--sp-2); }

/* Filters + bulk */
.test-filterbar { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.test-bulkbar { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: var(--accent-light); border-radius: var(--radius-sm); margin-bottom: var(--sp-3); font-size: 0.85rem; flex-wrap: wrap; }

.test-actions-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.test-actions-listhead { display: flex; justify-content: space-between; align-items: center; }
.test-selall { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--text-secondary); }

/* Actie-regels — linker kleurbalk per soort */
.test-action { display: flex; gap: var(--sp-3); padding: var(--sp-3); background: var(--wit); border: 1px solid var(--divider-soft); border-left: 4px solid var(--grijs-300); border-radius: var(--radius); }
.test-action.kind-new    { border-left-color: var(--groen); }
.test-action.kind-opt    { border-left-color: var(--accent); }
.test-action.kind-links  { border-left-color: #8b5cf6; }
.test-action.kind-tech   { border-left-color: var(--grijs-700); }
.test-action.kind-local  { border-left-color: #14b8a6; }
.test-action.kind-offpage{ border-left-color: var(--oranje); }
.test-action.kind-cro    { border-left-color: #db2777; }
.test-action.kind-review { border-left-color: var(--geel); }
.test-action-check { padding-top: 2px; }
.test-action-main { flex: 1; min-width: 0; }
.test-action-title { font-weight: 600; color: var(--text-primary); }
.test-action-badges { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.test-action-desc { font-size: 0.85rem; color: var(--text-default); margin-top: 4px; }
.test-action-reason { font-size: 0.82rem; color: var(--text-secondary); margin-top: 4px; display: flex; gap: 4px; align-items: baseline; }
.test-action-urls { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: 4px; font-size: 0.78rem; color: var(--text-tertiary); }
.test-deps { font-size: 0.78rem; color: var(--text-secondary); margin-top: 6px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.test-action-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.test-status-select { height: 30px; border: 1px solid var(--grijs-200); border-radius: var(--radius-sm); font-size: 0.78rem; background: var(--wit); }
.test-action-tools { display: flex; gap: 2px; }

/* Actietype-badge kleurtint (kind-*) */
.badge.test-at { font-weight: 600; }
.badge.test-at.kind-new    { background: var(--groen-light); color: #2f6b2e; }
.badge.test-at.kind-opt    { background: var(--accent-light); color: var(--accent-hover); }
.badge.test-at.kind-links  { background: #ede9fe; color: #6d28d9; }
.badge.test-at.kind-tech   { background: var(--grijs-100); color: var(--grijs-700); }
.badge.test-at.kind-local  { background: #ccfbf1; color: #0f766e; }
.badge.test-at.kind-offpage{ background: #fff7ed; color: var(--oranje-hover); }
.badge.test-at.kind-cro    { background: #fce7f3; color: #be185d; }
.badge.test-at.kind-review { background: var(--geel-light); color: #8a6d1a; }

/* Modals + diversen */
.test-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--sp-3); font-size: 0.82rem; color: var(--text-secondary); }
.test-field input, .test-field select, .test-field textarea { padding: 8px 10px; border: 1px solid var(--grijs-200); border-radius: var(--radius-sm); font-size: 0.9rem; font-family: inherit; }
.test-field-row { display: flex; gap: var(--sp-3); }
.test-field-row .test-field { flex: 1; }
.test-dep-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 0.85rem; }
.test-history { list-style: none; margin: 0; padding: 0; }
.test-history li { padding: 6px 0; border-bottom: 1px solid var(--grijs-100); font-size: 0.85rem; display: flex; flex-direction: column; gap: 2px; }
.test-busy { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-6); color: var(--text-secondary); justify-content: center; }
.test-err { color: var(--rood); font-size: 0.8rem; }

@media (max-width: 900px) {
    .test-cluster-grid, .test-detail-grid { grid-template-columns: 1fr; }
    .test-action { flex-wrap: wrap; }
    .test-action-side { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }
}

/* ── Test iteratie 2: Diensten + ranking-coach ─────────────────────── */
.test-intro { font-size: 0.88rem; color: var(--text-secondary); margin-bottom: var(--sp-3); max-width: 90ch; }
.test-unlinked { margin-bottom: var(--sp-3); display: flex; align-items: center; gap: 6px; }

.test-service-card .test-card-title { display: flex; align-items: center; gap: 6px; }

/* Hoofdpagina-URL onder de titel — compact, truncate bij lange URLs */
.test-service-mainurl {
    display: flex; align-items: center; gap: 4px;
    margin-top: 2px; margin-bottom: var(--sp-1);
    font-size: 0.82rem; color: var(--text-secondary);
    min-width: 0;
}
.test-service-mainurl a {
    color: var(--accent); text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0; flex: 1;
}
.test-service-mainurl a:hover { text-decoration: underline; }
.test-service-mainurl.test-muted { color: var(--text-tertiary); font-style: italic; }
.test-service-mainurl-warn {
    display: inline-flex; align-items: center; gap: 2px;
    margin-left: 6px; color: #b8651f;
    font-size: 0.75rem; font-weight: 500;
}

/* Per-pagina uitsplitsing onder de stats (uitklapbaar) */
.test-pages-breakdown {
    margin: var(--sp-2) 0 var(--sp-3);
    border: 1px solid var(--border-subtle); border-radius: 6px;
    background: var(--surface-subtle);
}
.test-pages-breakdown > summary {
    list-style: none; cursor: pointer;
    padding: var(--sp-2) var(--sp-3);
    font-size: 0.82rem; color: var(--text-secondary);
    display: flex; align-items: center; gap: 4px;
}
.test-pages-breakdown > summary::-webkit-details-marker { display: none; }
.test-pages-breakdown[open] > summary { border-bottom: 1px solid var(--border-subtle); }
.test-pages-table {
    width: 100%; border-collapse: collapse;
    font-size: 0.85rem;
}
.test-pages-table th,
.test-pages-table td {
    padding: 6px var(--sp-3); text-align: left;
    border-top: 1px solid var(--border-subtle);
}
.test-pages-table thead th {
    background: transparent;
    color: var(--text-tertiary);
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em;
    font-weight: 500;
    border-top: none;
}
.test-pages-table tbody td { color: var(--text-primary); }
.test-pages-table .test-page-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.test-pages-table .test-page-url-cell {
    max-width: 0; /* hack voor truncate met flex */
    overflow: hidden;
}
.test-pages-table .test-page-url-cell a {
    color: var(--accent); text-decoration: none;
}
.test-pages-table .test-page-url-cell a:hover { text-decoration: underline; }
.test-page-url-invalid { color: var(--text-tertiary); font-style: italic; }
.test-page-tag {
    display: inline-block; margin-left: 6px;
    padding: 1px 6px; border-radius: 10px;
    font-size: 0.68rem; font-weight: 500;
    background: rgba(0,0,0,0.05); color: var(--text-secondary);
}
.test-page-tag-main { background: #e7f3ec; color: #2c6c43; }
.test-page-tag-warn { background: #fbe9d6; color: #b8651f; }

.test-stats-row { display: flex; gap: var(--sp-4); margin: var(--sp-3) 0; flex-wrap: wrap; }
.test-stat { display: flex; flex-direction: column; }
.test-stat-val { font-size: 1.15rem; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.test-stat-lbl { font-size: 0.72rem; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.03em; }
.test-pos-bars { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.test-pos-bar { font-size: 0.72rem; padding: 2px 8px; border-radius: 10px; display: inline-flex; align-items: center; gap: 3px; }
.test-pos-top10 { background: var(--groen-light); color: #2f6b2e; }
.test-pos-mid { background: var(--geel-light); color: #8a6d1a; }
.test-pos-low { background: var(--grijs-100); color: var(--grijs-500); }

/* ── Test v2 — diensten-startscherm ───────────────────────────────── */
.test-v2-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.test-v2-head-icon { color: var(--oranje); display: flex; flex-shrink: 0; }
.test-v2-head-body { min-width: 0; }
.test-v2-head-title { margin: 0; font-size: 1.05rem; color: var(--text-primary); }
.test-v2-head-sub { margin: 2px 0 0; font-size: 0.82rem; color: var(--text-secondary); max-width: 90ch; }
.test-v2-head-actions { margin-left: auto; align-self: center; flex-shrink: 0; display: inline-flex; gap: var(--sp-2); align-items: stretch; }
/* Uniforme hoogte voor alle knoppen in de Cogoo-banner (Importeer sitemap +
   Toevoegen). Voorkomt visuele hoogte-verschillen tussen btn-secondary
   (outline) en btn-primary (gevuld). */
.test-v2-head-actions .btn { height: 40px; }
.test-v2-addform { display: flex; flex-direction: column; gap: var(--sp-3); }
.test-v2-addform .test-v2-field { width: 100%; }
.test-v2-addform .form-input, .test-v2-addform .test-v2-select { width: 100%; }
.test-v2-group { margin-top: var(--sp-4); }
.test-v2-group-head {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--text-tertiary); margin-bottom: var(--sp-2);
}
.test-v2-group-primair .test-v2-group-head { color: #2f6b2e; }
.test-v2-fields { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin: var(--sp-2) 0; }
.test-v2-field { display: flex; flex-direction: column; gap: 2px; }
.test-v2-field-lbl { font-size: 0.7rem; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.03em; }
.test-v2-select {
    height: 32px; padding: 0 var(--sp-2); border: 1px solid var(--grijs-200);
    border-radius: var(--radius-sm); font-size: 0.82rem; background: var(--wit); color: var(--text-primary);
}
.test-v2-totaal { margin-top: var(--sp-4); background: var(--grijs-50, #fafafa); border-style: dashed; }
.test-v2-detail-head { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.test-v2-pre {
    font-size: 0.78rem; line-height: 1.5; background: var(--grijs-50, #fafafa); border: 1px solid var(--divider-soft);
    border-radius: var(--radius-sm); padding: var(--sp-3); overflow-x: auto; max-height: 480px; white-space: pre-wrap; word-break: break-word;
}
.test-v2-detail-title { display: flex; align-items: center; gap: 6px; font-size: 1.05rem; }
.test-v2-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.test-v2-detail-head .test-card, .test-v2-detail-head + .test-card { margin-top: var(--sp-3); }
.test-v2-detail-head ~ .test-card { margin-top: var(--sp-3); }

/* Content-briefing card op cluster-detail. Compact, collapseable, 3 textareas. */
.tv2-cb-card {
    background: #fff;
    border: 1px solid var(--pa-border-card, #E5E7EB);
    border-radius: 10px;
    margin-bottom: var(--sp-3);
}
.tv2-cb-head {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
}
.tv2-cb-head-icon { display: inline-flex; }
.tv2-cb-head-title { font-size: 13px; color: var(--pa-text-value, #111); }
.tv2-cb-head-meta { font-size: 12px; font-weight: 600; }
.tv2-cb-toggle { margin-left: auto; }
.tv2-cb-body {
    padding: 6px 14px 14px;
    display: flex; flex-direction: column; gap: 12px;
    border-top: 1px solid var(--pa-border-row, #F1F1F2);
}
.tv2-cb-intro {
    margin: 8px 0 2px; font-size: 12px; color: var(--pa-text-meta, #666);
}
.tv2-cb-field { display: flex; flex-direction: column; gap: 4px; }
.tv2-cb-label {
    font-size: 12px; color: var(--pa-text-label, #444); font-weight: 600;
}
.tv2-cb-hint {
    font-weight: 400; font-size: 11px; color: var(--pa-text-meta, #888);
    margin-left: 4px;
}
.tv2-cb-input {
    font-family: inherit; font-size: 13px; line-height: 1.5;
    padding: 8px 10px; border-radius: 6px;
    resize: vertical; min-height: 40px;
}
.tv2-cb-actions {
    display: flex; align-items: center; gap: 10px; justify-content: flex-end;
    margin-top: 4px;
}
.tv2-cb-savehint { font-size: 12px; color: var(--pa-text-meta, #888); }

/* Chip-weergave van gekozen doelgroepen/werkgebieden. */
.tv2-cb-chips {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin: 2px 0 6px;
}
.tv2-cb-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    color: #1E40AF;
    border-radius: 999px;
    font-size: 12px; font-weight: 500;
}
.tv2-cb-chip em {
    font-style: normal; font-size: 10.5px; color: #3B82F6;
    text-transform: uppercase; letter-spacing: 0.3px;
}
.tv2-cb-chip-empty {
    font-size: 12px; color: var(--pa-text-meta, #888); font-style: italic;
}

/* Multi-select dropdown via <details>. */
.tv2-cb-select {
    border: 1px solid var(--pa-border-card, #E5E7EB);
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
}
.tv2-cb-select-summary {
    cursor: pointer;
    padding: 8px 12px;
    font-size: 13px;
    display: flex; align-items: center; gap: 6px;
    list-style: none;
    color: var(--pa-text-value, #111);
}
.tv2-cb-select-summary::-webkit-details-marker { display: none; }
.tv2-cb-select[open] .tv2-cb-select-summary {
    border-bottom: 1px solid var(--pa-border-row, #F1F1F2);
}
.tv2-cb-select-list {
    max-height: 200px; overflow-y: auto;
    padding: 4px 0;
}
.tv2-cb-checkrow {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 12px;
    font-size: 13px;
    cursor: pointer;
}
.tv2-cb-checkrow:hover { background: #F9FAFB; }
.tv2-cb-checkrow input { margin: 0; }
.tv2-cb-checkrow em {
    font-style: normal; font-size: 10.5px; color: var(--pa-text-meta, #888);
    text-transform: uppercase; letter-spacing: 0.3px; margin-left: 4px;
}
.tv2-cb-empty {
    padding: 10px 12px; font-size: 12.5px; color: var(--pa-text-meta, #666);
    background: #FAFAFB; border: 1px dashed var(--pa-border-card, #E5E7EB);
    border-radius: 6px;
}
.tv2-cb-link { color: var(--accent, #E33B2A); text-decoration: none; font-weight: 500; }
.tv2-cb-link:hover { text-decoration: underline; }

/* AI-suggest knop in het label van strategische intentie. */
.tv2-cb-ai-btn { margin-left: auto; }
.tv2-cb-field .tv2-cb-label { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* AI suggestion list. */
.tv2-cb-suggestions { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.tv2-cb-suggestions:empty { display: none; }
.tv2-cb-suggestions-hd {
    font-size: 11.5px; color: var(--pa-text-meta, #666);
    font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase;
}
.tv2-cb-suggestions-loading,
.tv2-cb-suggestions-empty {
    padding: 10px 12px; font-size: 12.5px; color: var(--pa-text-meta, #666);
    background: #FAFAFB; border-radius: 6px;
    display: inline-flex; align-items: center; gap: 6px;
}
.tv2-cb-suggestion {
    text-align: left; cursor: pointer;
    border: 1px solid var(--pa-border-card, #E5E7EB);
    background: #FFFBEB;
    padding: 10px 12px;
    border-radius: 6px;
    display: flex; align-items: start; gap: 10px;
    font-size: 13px; line-height: 1.5;
    color: var(--pa-text-value, #111);
    transition: background 0.12s ease;
    font-family: inherit;
}
.tv2-cb-suggestion:hover { background: #FEF3C7; border-color: #FCD34D; }
.tv2-cb-suggestion-num {
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    width: 22px; height: 22px;
    background: #F59E0B; color: #fff;
    border-radius: 50%; font-size: 11.5px; font-weight: 700;
}
.tv2-cb-suggestion-text { flex: 1; }

/* Funnel-stage badge op page-cards. Pastel-bg + donkere tekst worden
   inline via renderFunnelBadge gezet zodat ze per stage onderscheidend
   blijven maar niet meer met de page-titel concurreren. */
.tv2-funnel-badge {
    display: inline-flex; align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    background: #F3F4F6;
    color: #4A4A4A;
    font-size: 10.5px; font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    flex-shrink: 0;
}
.tv2-funnel-empty {
    background: transparent;
    border: 1px dashed #D1D5DB;
    color: #9CA3AF;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0.3px;
    cursor: help;
}
.tv2-sm-funnel { min-width: 110px; }

/* Doelkeywords-rij op page-card. */
.tv2-tkw-row {
    margin-top: 8px;
    padding: 8px 10px;
    background: #FAFBFE;
    border: 1px solid #E6E9F0;
    border-radius: 8px;
    display: flex; flex-direction: column; gap: 6px;
}
/* Flat-variant: alle keywords in 1 rij zonder eigen vlak/border. Wordt
   visueel direct onder de page-titel/URL gehangen als compact chip-strip. */
.tv2-tkw-row.tv2-tkw-row-flat {
    margin-top: 4px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}
.tv2-tkw-head {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.tv2-tkw-label {
    font-size: 11.5px; font-weight: 600; color: var(--pa-text-label, #444);
    text-transform: uppercase; letter-spacing: 0.4px;
    display: inline-flex; align-items: center; gap: 4px;
}
.tv2-tkw-chips {
    display: flex; flex-wrap: wrap; gap: 4px;
    min-height: 24px;
}
.tv2-tkw-chip {
    /* User-feedback: het blauw vroeg te veel aandacht en maakte de page-rij
       moeilijk te scannen. Neutraal lichtgrijs houdt de chips functioneel
       zichtbaar zonder de visuele hierarchie van de page-naam te overstemmen. */
    display: inline-flex; align-items: center; gap: 2px;
    padding: 3px 4px 3px 4px;
    background: #F3F4F6;
    border: 1px solid #E5E7EB;
    color: #4A4A4A;
    border-radius: 14px;
    font-size: 12px; font-weight: 500;
}
.tv2-tkw-chip-name {
    border: none; background: transparent; padding: 0 6px;
    color: inherit; font-family: inherit; font-size: inherit; font-weight: inherit;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 3px;
}
.tv2-tkw-chip-name:hover { text-decoration: underline; }
/* Primair doelkeyword: ster vóór de naam, groen/blauw afhankelijk van intent
   zoals de bestaande tv2-pcard-primary chip. */
.tv2-tkw-chip.is-primary {
    background: var(--groen-light, #e8f5e8);
    border-color: var(--green-100, #C8E6CB);
    color: var(--fg-success, #1e7a36);
}
.tv2-pcard.is-info .tv2-tkw-chip.is-primary {
    background: var(--bg-info, #E8F0FE);
    border-color: var(--blue-100, #D2E3FC);
    color: var(--fg-info, #1557B0);
}
.tv2-tkw-chip.is-primary .tv2-tkw-chip-name { font-weight: 600; }
.tv2-tkw-chip.is-primary .tv2-tkw-chip-x { color: inherit; }
.tv2-tkw-chip-x {
    background: transparent; border: none; cursor: pointer;
    display: inline-flex; align-items: center; padding: 0;
    color: #6B7280; opacity: 0.7;
}
.tv2-tkw-chip-x:hover { opacity: 1; color: #4A4A4A; }
.tv2-tkw-empty {
    font-size: 12px; color: var(--pa-text-meta, #888); font-style: italic;
}

/* AI-suggest knop (klein, terughoudend) en respons. */
.tv2-tkw-ai-mini {
    margin-left: auto;
    background: transparent; border: none; cursor: pointer;
    padding: 2px 6px;
    font-size: 11px; font-weight: 600;
    color: var(--pa-text-meta, #888);
    display: inline-flex; align-items: center; gap: 4px;
    border-radius: 4px;
    font-family: inherit;
}
.tv2-tkw-ai-mini:hover { background: #FEF3C7; color: #78350F; }
.tv2-tkw-ai-mini:disabled { opacity: 0.5; cursor: not-allowed; }

/* Long-tail sectie: gegroepeerd per type (variant/vraag/intent). */
.tv2-tkw-lt-section { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.tv2-tkw-lt-sec-hd {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; margin-bottom: 2px;
}
.tv2-tkw-lt-item { /* kleurthema via inline style, hover-darken via filter */ }
.tv2-tkw-lt-item:hover { filter: brightness(0.97); }
.tv2-tkw-lt-intent {
    display: inline-block;
    font-size: 10.5px; color: var(--pa-text-meta, #888);
    font-family: var(--font-mono, monospace);
    margin-top: 2px;
}
.tv2-tkw-suggestions:empty { display: none; }
.tv2-tkw-suggestions { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.tv2-tkw-sug-hd {
    font-size: 11px; color: var(--pa-text-meta, #666);
    font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase;
}
.tv2-tkw-loading,
.tv2-tkw-empty-ai {
    padding: 8px 10px; font-size: 12.5px;
    color: var(--pa-text-meta, #666);
    background: #FFF; border-radius: 6px;
    display: inline-flex; align-items: center; gap: 6px;
}
.tv2-tkw-sug-item {
    text-align: left; cursor: pointer;
    background: #FEF3C7;
    border: 1px solid #FCD34D;
    padding: 8px 10px;
    border-radius: 6px;
    display: flex; align-items: start; gap: 8px;
    font-size: 12.5px; line-height: 1.4;
    font-family: inherit;
}
.tv2-tkw-sug-item:hover { background: #FDE68A; }
.tv2-tkw-sug-prio {
    display: inline-flex; align-items: center;
    padding: 1px 6px;
    color: #fff;
    border-radius: 3px;
    font-size: 9.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.4px;
    flex-shrink: 0;
}
.tv2-tkw-sug-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.tv2-tkw-sug-text strong { font-weight: 600; }
.tv2-tkw-sug-reason {
    font-size: 11.5px; color: #78350F;
}
.tv2-tkw-sug-add {
    display: inline-flex; align-items: center;
    color: #78350F; opacity: 0.7;
}
.tv2-tkw-sug-item:hover .tv2-tkw-sug-add { opacity: 1; }
.tv2-tkw-sug-foot { display: flex; justify-content: flex-end; }
.tv2-tkw-refine {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px;
    background: #FFFFFF;
    border: 1px solid #FDE68A;
    border-radius: 6px;
    margin-top: 4px;
}
.tv2-tkw-hint-input {
    flex: 1;
    min-width: 0;
    height: 30px;
    padding: 0 10px;
    font-size: 12.5px;
    color: #18181B;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 5px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.tv2-tkw-hint-input::placeholder { color: #9CA3AF; }
.tv2-tkw-hint-input:focus {
    border-color: #E87C2A;
    box-shadow: 0 0 0 3px rgba(232, 124, 42, 0.12);
}
.tv2-tkw-refine .btn { flex-shrink: 0; }
.test-v2-tablewrap { overflow-x: auto; }
.test-v2-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.test-v2-table th, .test-v2-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--divider-soft); vertical-align: top; }
.test-v2-table th { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-tertiary); white-space: nowrap; }
.test-v2-table td.num, .test-v2-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.test-v2-table tr.test-v2-row-protected { background: var(--geel-light, #fdf6e3); }
.test-v2-blok { padding: var(--sp-2) 0; border-bottom: 1px solid var(--divider-soft); }
.test-v2-blok:last-child { border-bottom: none; }
.test-v2-vraag { padding: var(--sp-2) 0; border-bottom: 1px solid var(--divider-soft); }
.test-v2-vraag:last-child { border-bottom: none; }
.test-v2-vraag-term { font-weight: 600; font-size: 0.85rem; margin-bottom: 2px; }
.test-v2-links { margin: var(--sp-2) 0 0; padding-left: var(--sp-4); font-size: 0.85rem; }
.test-v2-links li { margin-bottom: 4px; }
.test-v2-list { margin: 2px 0 var(--sp-2); padding-left: var(--sp-4); font-size: 0.85rem; }
.test-v2-list li { margin-bottom: 3px; }
.test-v2-cta { margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: var(--groen-light, #eaf6ea); border-radius: var(--radius-sm); font-size: 0.85rem; }
.test-v2-koppel-tools { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; margin-bottom: var(--sp-3); }
.test-v2-koppel-tools .test-search { flex: 1; min-width: 180px; }
.test-v2-chip-x { border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; font: inherit; }
.test-v2-chip-x:hover { background: var(--rood-light, #fde8e8); color: var(--rood, #c0392b); }
.test-v2-card-kws { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: var(--sp-2) 0; }
.test-v2-card-kws-empty { margin: var(--sp-2) 0; display: flex; align-items: center; gap: 4px; font-size: 0.8rem; }

/* ── Test v2 — handmatige URL-structuur / sitemap per dienst ── */
.tv2-sm-tree { display: flex; flex-direction: column; gap: 4px; }
.tv2-sm-node { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: var(--wit); border: 1px solid var(--border-subtle); border-radius: var(--radius); }
.tv2-sm-node-main { display: flex; align-items: flex-start; gap: 6px; min-width: 0; flex: 1 1 auto; }
.tv2-sm-node-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tv2-sm-node-title { font-weight: 600; color: var(--text-primary); }
.tv2-sm-node-url { font-size: 0.82rem; color: var(--oranje, #c96f52); word-break: break-all; text-decoration: none; }
.tv2-sm-node-url:hover { text-decoration: underline; }
.tv2-sm-node-note { font-size: 0.78rem; color: var(--text-tertiary); }
.tv2-sm-node-actions { display: flex; gap: 2px; flex: 0 0 auto; align-items: center; }
.tv2-sm-node-edit { flex-direction: column; align-items: stretch; gap: var(--sp-2); border-color: var(--oranje, #c96f52); }
.tv2-sm-edit-fields { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.tv2-sm-edit-fields .form-input { flex: 1 1 220px; min-width: 160px; }
.tv2-sm-addform { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.tv2-sm-addform .form-input { flex: 1 1 220px; min-width: 160px; }
.tv2-sm-addform .test-v2-select, .tv2-sm-edit-fields .test-v2-select { flex: 0 1 auto; }

/* ── Inline sitemap-editor op de dienst-kaart ─────────────────────────
   Vervangt de oude losse Sitemap-toggle + standalone URL-structuur-modal:
   tree + add/edit/delete-rijen inline op de kaart. */
.tv2-inline-sm {
    margin-top: var(--sp-3);
    padding-top: var(--sp-2);
    border-top: 1px dashed var(--divider-soft);
}
.tv2-inline-sm-head {
    display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
    margin-bottom: var(--sp-2);
    font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--text-secondary); font-weight: 600;
}
.tv2-inline-sm-title { display: inline-flex; align-items: center; gap: 4px; }
.tv2-sm-empty { padding: var(--sp-2) 0; font-size: 0.85rem; }
.tv2-sm-node-metrics {
    display: inline-flex; align-items: center; gap: 6px;
    margin-left: 8px; font-size: 0.74rem; white-space: nowrap;
}

/* Inline GSC-data per pagina-rij op cluster-detail (vervangt aparte "Per pagina"-tabel). */
.tv2-sm-node-titlerow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tv2-sm-gsc-row {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: var(--sp-2); margin-top: 4px;
    font-size: 0.78rem; color: var(--text-secondary);
}
.tv2-sm-gsc-stat { white-space: nowrap; }
.tv2-sm-gsc-stat strong { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.tv2-sm-gsc-tq {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--text-tertiary); font-style: italic;
    margin-left: auto;
    max-width: 60%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Role-badge (pillar / sub) op de inline sitemap */
.tv2-sm-role {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.tv2-sm-role-pillar { background: #e3f4e3; color: #2c6c43; }
.tv2-sm-role-sub    { background: #eef0f2; color: #4a4a4a; }
.tv2-sm-addtoggle { margin-top: var(--sp-2); }
.tv2-sm-addrow {
    margin-top: var(--sp-2);
    padding: var(--sp-3);
    background: var(--creme, #faf7f2);
    border: 1px dashed var(--divider-soft);
    border-radius: var(--radius-md, 10px);
}
.tv2-sm-addrow-title {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 6px;
    display: inline-flex; align-items: center; gap: 4px;
}

/* Compacte service-kaart op overzicht: 'Open cluster'-knop centraal, full-width
   onderaan zodat duidelijk is wat de volgende stap is. */
.test-card-actions-open {
    margin-top: var(--sp-3);
    padding-top: var(--sp-2);
    border-top: 1px dashed var(--divider-soft);
    display: flex; justify-content: stretch;
}
.test-card-actions-open .btn { flex: 1; justify-content: center; }

/* Cluster-detail: ranking-plan + keywords koppelen acties in een eigen kaart
   onderaan. */
.tv2-cd-actions { margin-top: var(--sp-3); }
.tv2-cd-actions-row {
    display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center;
}

/* ── Blok C: kleurgecodeerde pagina-structuur (commercieel=groen / informatief=blauw) ── */
.tv2-viewtoggle { display: inline-flex; border: 1px solid var(--divider-soft); border-radius: var(--radius-md, 10px); overflow: hidden; }
.tv2-vt-btn { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; background: var(--wit); border: none; cursor: pointer; font-size: 0.82rem; color: var(--text-secondary); }
.tv2-vt-btn + .tv2-vt-btn { border-left: 1px solid var(--divider-soft); }
.tv2-vt-btn.is-active { background: var(--text-primary); color: var(--wit); }

/* Pagina-type indicator: cirkel met een letter — C (commercieel) of I (informatief). */
.tv2-pdot {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 50%;
    flex-shrink: 0;
    font-size: 0.7rem; font-weight: 700;
    color: var(--text-inverse);
    line-height: 1;
    font-family: var(--font-family);
}
.tv2-pdot-comm { background: #2f9e6e; }
.tv2-pdot-info { background: #3b82f6; }

.tv2-pbadge { display: inline-block; font-size: 0.68rem; line-height: 1.55; padding: 0 6px; border-radius: 999px; white-space: nowrap; }
.tv2-pbadge-doel    { background: rgba(47, 158, 110, 0.14); color: #1d7a52; }
.tv2-pbadge-info    { background: rgba(59, 130, 246, 0.14); color: #1d4ed8; }
.tv2-pbadge-bestaat { background: rgba(47, 158, 110, 0.14); color: #1d7a52; }
.tv2-pbadge-gepland { background: var(--grijs-100, #eef0f2); color: var(--text-tertiary); }

.tv2-pcompact { display: flex; flex-direction: column; gap: 2px; margin-top: var(--sp-2); }
.tv2-pcompact-row { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; padding: 2px 0 2px 6px; border-left: 2px solid #2f9e6e; }
.tv2-pcompact-row.is-info { border-left-color: #3b82f6; }
.tv2-pcompact-url { color: var(--text-primary); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv2-pcompact-url:hover { text-decoration: underline; }
.tv2-pcompact-badges { display: inline-flex; gap: 4px; margin-left: auto; flex-shrink: 0; }
.tv2-pcompact-empty { font-size: 0.8rem; }

.tv2-planned { margin: var(--sp-2) 0; }
.tv2-planned-sum { cursor: pointer; font-size: 0.78rem; color: var(--text-tertiary); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tv2-planned-counts { display: inline-flex; gap: 8px; }
.tv2-pcount { font-size: 0.7rem; }
.tv2-pcount-comm { color: #1d7a52; }
.tv2-pcount-info { color: #1d4ed8; }

/* Rubriek-label: 'Pillar' (content-strategie actief) of 'Brand' (alleen
   bestaande pages). Klein pill-badge naast de rubriek-naam in Cogoo. */
.tv2-rubriek-label {
    display: inline-flex; align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
    line-height: 1.3;
    white-space: nowrap;
    flex-shrink: 0;
}
.tv2-rubriek-label-pillar {
    background: #DCFCE7;
    color: #166534;
    border: 1px solid #86EFAC;
}
.tv2-rubriek-label-brand {
    background: #F3F4F6;
    color: #4B5563;
    border: 1px solid #D1D5DB;
}
/* Klikbare toggle-badge: override default button-styling + hover-effect
   zodat 'ie visueel matcht met de niet-klikbare span-variant. */
button.tv2-rubriek-label-toggle {
    font-family: inherit;
    cursor: pointer;
    transition: filter 120ms ease, transform 120ms ease;
}
button.tv2-rubriek-label-toggle:hover:not(:disabled) {
    filter: brightness(0.96);
    transform: translateY(-1px);
}
button.tv2-rubriek-label-toggle:active:not(:disabled) {
    transform: translateY(0);
}
button.tv2-rubriek-label-toggle:disabled { opacity: 0.6; cursor: wait; }
/* Virtuele Ongesorteerd-rubriek: subtiel gestreepte achtergrond zodat
   'ie visueel apart staat van echte diensten. */
.test-service-card-virtual {
    background: repeating-linear-gradient(
        135deg,
        #FAFAFA,
        #FAFAFA 8px,
        #F5F5F5 8px,
        #F5F5F5 16px
    );
}

/* Sleep-hendel voor rubriek-herordening (drag & drop). Bolletjes-icoon
   links van de rubriek-naam. Cursor grab/grabbing zodat de user snapt
   dat 'ie kan slepen. Alleen zichtbaar in de rubriek-tabel. */
.tv2-rubriek-drag {
    display: inline-flex; align-items: center;
    color: #9CA3AF;
    cursor: grab;
    padding: 2px;
    border-radius: 4px;
    margin-right: 2px;
    flex-shrink: 0;
    user-select: none;
}
.tv2-rubriek-drag:hover { color: #4B5563; background: #F3F4F6; }
.tv2-rubriek-drag:active { cursor: grabbing; }
.test-service-card.is-dragging { opacity: 0.5; }
.test-service-card.drop-above { box-shadow: inset 0 3px 0 0 var(--accent); }
.test-service-card.drop-below { box-shadow: inset 0 -3px 0 0 var(--accent); }

/* Detail-view voor virtuele (Brand) rubrieken: header met terug-knop +
   titel + import-actie, meta-regel met counts, en de bestaande
   inline-sitemap-component eronder. */
.tv2-vrubriek-detail { padding: 0; }
.tv2-vrubriek-detail-head {
    display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
    padding: var(--sp-3) 0 var(--sp-2);
    border-bottom: 1px solid var(--divider-soft);
    margin-bottom: var(--sp-3);
}
.tv2-vrubriek-detail-title {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    font-size: 1.05rem; font-weight: 600; color: var(--text-primary);
    margin: 0;
}
.tv2-vrubriek-detail-actions { margin-left: auto; display: inline-flex; gap: var(--sp-2); }
.tv2-vrubriek-detail-meta {
    font-size: 0.82rem; color: var(--text-secondary);
    margin-bottom: var(--sp-3);
}
.tv2-vrubriek-detail-pages { margin-top: var(--sp-2); }

.tv2-sm-node { border-left: 3px solid #2f9e6e; }
.tv2-sm-node.is-info { border-left-color: #3b82f6; }
.tv2-sm-node-badges { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: middle; }

/* Site-brede Sitemap-toggle */
.tv2-sm-legend { display: flex; gap: var(--sp-4); font-size: 0.78rem; margin: var(--sp-3) 0; flex-wrap: wrap; }
.tv2-sm-legend span { display: inline-flex; align-items: center; gap: 6px; }
.tv2-sm-site { display: flex; flex-direction: column; gap: var(--sp-3); }
.tv2-sm-block { border: 1px solid var(--border-subtle); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); background: var(--wit); border-left: 4px solid #2f9e6e; }
.tv2-sm-block.is-info { border-left-color: #3b82f6; }
.tv2-sm-block-head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.tv2-sm-block-name { font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.tv2-sm-block-counts { font-size: 0.76rem; }
.tv2-sm-block-edit { margin-left: auto; }

/* ── SEO Audit — luchtig multi-page dashboard ── */
.seo-audit { max-width: 1000px; }
.seo-audit-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.seo-audit-head-icon { color: var(--oranje); display: flex; flex: 0 0 auto; }
.seo-audit-title { margin: 0; font-size: 1.35rem; color: var(--text-primary); }
.seo-audit-sub { margin: 2px 0 0; font-size: 0.875rem; color: var(--text-secondary); max-width: 620px; }

/* Toolbar */
.seo-audit-controls { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; background: var(--wit); border: 1px solid var(--divider-soft); border-radius: var(--radius-lg); padding: var(--sp-3); box-shadow: var(--shadow-sm); margin-bottom: var(--sp-5); }
.seo-audit-controls .seo-audit-url { flex: 1 1 240px; min-width: 200px; }
.seo-audit-controls .seo-audit-maxpages { flex: 0 0 auto; width: auto; }
.seo-audit-aitoggle { display: inline-flex; align-items: center; gap: 5px; font-size: 0.85rem; color: var(--text-secondary); white-space: nowrap; cursor: pointer; }
.seo-audit-result { margin-top: var(--sp-2); }

/* Lege & laad-toestand */
.seo-audit-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: var(--sp-10) var(--sp-4); background: var(--wit); border: 1px dashed var(--divider-soft); border-radius: var(--radius-lg); color: var(--text-primary); }
.seo-audit-empty-icon { color: var(--text-tertiary); margin-bottom: var(--sp-1); }
.seo-audit-empty span { max-width: 380px; }
.seo-audit-running { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-5); background: var(--wit); border: 1px solid var(--divider-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.seo-audit-running-txt { display: flex; flex-direction: column; gap: 2px; }
.seo-audit-spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--divider-soft); border-top-color: var(--accent); animation: seoSpin 0.8s linear infinite; flex: 0 0 auto; }
@keyframes seoSpin { to { transform: rotate(360deg); } }

.seo-audit-dash { display: flex; flex-direction: column; gap: var(--sp-5); }

/* Hero met donut-gauge + stat-tegels */
.seo-audit-hero { display: flex; gap: var(--sp-6); align-items: center; flex-wrap: wrap; background: var(--wit); border: 1px solid var(--divider-soft); border-radius: var(--radius-lg); padding: var(--sp-6); box-shadow: var(--shadow-sm); }
.seo-audit-gaugewrap { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 0 0 auto; }
.seo-audit-gauge { display: block; }
.seo-audit-gauge-track { stroke: var(--surface-alt); }
.seo-audit-gauge-fill { transition: stroke-dashoffset 0.7s ease; }
.seo-audit-gauge-good .seo-audit-gauge-fill { stroke: var(--groen); }
.seo-audit-gauge-warn .seo-audit-gauge-fill { stroke: var(--geel); }
.seo-audit-gauge-bad .seo-audit-gauge-fill { stroke: var(--rood); }
.seo-audit-gauge-num { font-size: 30px; font-weight: 800; fill: var(--text-primary); }
.seo-audit-gauge-cap { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; fill: var(--text-tertiary); }
.seo-audit-health { font-size: 0.85rem; font-weight: 700; padding: 3px 14px; border-radius: 999px; }
.seo-audit-health-good { color: var(--groen); background: var(--groen-light); }
.seo-audit-health-warn { color: #9a7b18; background: var(--geel-light); }
.seo-audit-health-bad { color: var(--rood); background: var(--rood-light); }

.seo-audit-hero-right { flex: 1 1 320px; min-width: 260px; display: flex; flex-direction: column; gap: var(--sp-4); }
.seo-audit-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.seo-audit-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); position: relative; }
.seo-audit-stat-ico { position: absolute; top: var(--sp-3); right: var(--sp-3); opacity: 0.45; display: flex; }
.seo-audit-stat-num { font-size: 1.9rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.seo-audit-stat-lbl { font-size: 0.78rem; opacity: 0.85; }
.seo-audit-stat-error { background: var(--rood-light); color: var(--rood); }
.seo-audit-stat-warning { background: var(--geel-light); color: #9a7b18; }
.seo-audit-stat-notice { background: var(--accent-light); color: var(--accent); }

.seo-audit-hero-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: 0.8rem; color: var(--text-tertiary); }
.seo-audit-hero-meta span { display: inline-flex; align-items: center; gap: 4px; }
.seo-audit-hero-meta a { color: var(--accent); text-decoration: none; word-break: break-all; }
.seo-audit-hero-meta a:hover { text-decoration: underline; }

/* AI-kaart */
.seo-audit-ai { background: linear-gradient(180deg, var(--accent-light), var(--wit) 55%); border: 1px solid var(--divider-soft); border-radius: var(--radius-lg); padding: var(--sp-5); box-shadow: var(--shadow-sm); }
.seo-audit-ai-head { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 1.05rem; color: var(--text-primary); margin-bottom: var(--sp-2); }
.seo-audit-ai-head > :first-child { color: var(--accent); }
.seo-audit-ai-exec { margin: 0 0 var(--sp-3); color: var(--text-default); line-height: 1.5; }
.seo-audit-prios { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.seo-audit-prio { display: flex; gap: var(--sp-3); background: var(--wit); border: 1px solid var(--divider-soft); border-radius: var(--radius); padding: var(--sp-3); }
.seo-audit-prio-num { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 0.8rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.seo-audit-prio-body { min-width: 0; flex: 1 1 auto; }
.seo-audit-prio-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.seo-audit-prio-titel { font-weight: 600; color: var(--text-primary); }
.seo-audit-prio-why { font-size: 0.85rem; color: var(--text-secondary); margin-top: 2px; line-height: 1.45; }
.seo-audit-prio-pages { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.seo-audit-pagechip { font-size: 0.75rem; background: var(--surface-alt); color: var(--text-secondary); padding: 2px 8px; border-radius: 999px; text-decoration: none; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seo-audit-pagechip:hover { background: var(--accent-light); color: var(--accent); }

/* Secties */
.seo-audit-section-title { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 1.05rem; color: var(--text-primary); margin-bottom: var(--sp-3); }
.seo-audit-section-count { font-size: 0.72rem; font-weight: 600; color: var(--text-tertiary); background: var(--surface-alt); padding: 2px 9px; border-radius: 999px; }
.seo-audit-allgood { display: flex; align-items: center; gap: 8px; padding: var(--sp-4); background: var(--groen-light); color: var(--groen); border-radius: var(--radius-lg); font-weight: 600; }

/* Issue-groepen */
.seo-audit-igroup { margin-bottom: var(--sp-4); }
.seo-audit-igroup-head { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-secondary); margin-bottom: 6px; }
.seo-audit-igroup-count { color: var(--text-tertiary); font-weight: 600; }
.seo-audit-issues, .seo-audit-pages { display: flex; flex-direction: column; gap: 6px; }
.seo-audit-issue, .seo-audit-page { background: var(--wit); border: 1px solid var(--divider-soft); border-radius: var(--radius); overflow: hidden; transition: box-shadow 0.15s ease; }
.seo-audit-issue.is-open, .seo-audit-page.is-open { box-shadow: var(--shadow); }
.seo-audit-issue-head, .seo-audit-page-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: var(--sp-3); background: none; border: none; cursor: pointer; font: inherit; text-align: left; color: var(--text-primary); }
.seo-audit-issue-head:hover, .seo-audit-page-head:hover { background: var(--surface-alt); }
.seo-audit-issue-label { flex: 1 1 auto; font-weight: 500; }
.seo-audit-issue-chev { flex: 0 0 auto; color: var(--text-tertiary); display: flex; }
.seo-audit-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.seo-audit-dot-error { background: var(--rood); }
.seo-audit-dot-warning { background: var(--geel); }
.seo-audit-dot-notice { background: var(--accent); }
.seo-audit-count { flex: 0 0 auto; min-width: 22px; text-align: center; font-size: 0.78rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.seo-audit-count-error { background: var(--rood-light); color: var(--rood); }
.seo-audit-count-warning { background: var(--geel-light); color: #9a7b18; }
.seo-audit-count-notice { background: var(--accent-light); color: var(--accent); }
.seo-audit-issue-pages { margin: 0; padding: 0 var(--sp-3) var(--sp-3) calc(var(--sp-3) + 20px); list-style: none; display: flex; flex-direction: column; gap: 3px; }
.seo-audit-issue-pages a { font-size: 0.82rem; color: var(--accent); text-decoration: none; word-break: break-all; }
.seo-audit-issue-pages a:hover { text-decoration: underline; }
.seo-audit-more { font-size: 0.8rem; color: var(--text-tertiary); }

/* Pagina-rijen */
.seo-audit-page-status { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 0.78rem; min-width: 36px; text-align: center; padding: 2px 6px; border-radius: var(--radius-sm); }
.seo-audit-page-status-ok { color: var(--groen); background: var(--groen-light); }
.seo-audit-page-status-warn { color: #9a7b18; background: var(--geel-light); }
.seo-audit-page-status-bad { color: var(--rood); background: var(--rood-light); }
.seo-audit-page-url { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.875rem; }
.seo-audit-page-counts { display: inline-flex; gap: 4px; flex: 0 0 auto; }
.seo-audit-mini { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; color: #fff; }
.seo-audit-mini-error { background: var(--rood); }
.seo-audit-mini-warning { background: var(--geel); color: #5b4708; }
.seo-audit-mini-notice { background: var(--accent); }
.seo-audit-mini-ok { background: var(--groen-light); color: var(--groen); }
.seo-audit-page-checks { padding: var(--sp-3); border-top: 1px solid var(--divider-soft); display: flex; flex-direction: column; gap: 6px; background: var(--surface-alt); }

/* Per-pagina check-rij */
.seo-audit-check { display: flex; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: var(--wit); border: 1px solid var(--divider-soft); border-left-width: 3px; border-radius: var(--radius); }
.seo-audit-check-ok { border-left-color: var(--groen); }
.seo-audit-check-notice { border-left-color: var(--accent); }
.seo-audit-check-warning { border-left-color: var(--geel); }
.seo-audit-check-error { border-left-color: var(--rood); }
.seo-audit-check-icon { flex: 0 0 auto; display: flex; }
.seo-audit-check-ok .seo-audit-check-icon { color: var(--groen); }
.seo-audit-check-notice .seo-audit-check-icon { color: var(--accent); }
.seo-audit-check-warning .seo-audit-check-icon { color: var(--geel); }
.seo-audit-check-error .seo-audit-check-icon { color: var(--rood); }
.seo-audit-check-body { min-width: 0; flex: 1 1 auto; }
.seo-audit-check-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.seo-audit-check-label { font-weight: 600; color: var(--text-primary); font-size: 0.88rem; }
.seo-audit-check-val { font-size: 0.83rem; color: var(--text-secondary); margin-top: 2px; word-break: break-word; }
.seo-audit-check-advies { font-size: 0.8rem; color: var(--text-tertiary); margin-top: 2px; }

@media (max-width: 640px) {
  .seo-audit-stats { grid-template-columns: 1fr; }
  .seo-audit-hero { justify-content: center; text-align: center; }
}

/* ── Agents-hub (sidebar → Uitvoering → Agents) ── */
.agents-page { max-width: 1000px; }
.agents-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.agents-head-icon { color: var(--accent); display: flex; flex: 0 0 auto; }
.agents-title { margin: 0; font-size: 1.5rem; color: var(--text-primary); }
.agents-sub { margin: 2px 0 0; font-size: 0.875rem; color: var(--text-secondary); max-width: 640px; }
.agents-loading { padding: var(--sp-6); }
.agents-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-5); }
.agents-card { display: flex; gap: var(--sp-3); align-items: flex-start; text-align: left; padding: var(--sp-4); background: var(--wit); border: 1px solid var(--divider-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); cursor: pointer; font: inherit; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.agents-card:hover { box-shadow: var(--shadow); }
.agents-card.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.agents-card-icon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--radius); background: var(--accent-light); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.agents-card-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.agents-card-name { font-weight: 700; color: var(--text-primary); }
.agents-card-desc { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.4; }
.agents-runner-bar { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.agents-runner-lbl { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--text-secondary); font-size: 0.9rem; }
.agents-brand { max-width: 320px; }
.agents-placeholder { display: flex; align-items: center; justify-content: center; gap: 6px; padding: var(--sp-8) var(--sp-4); background: var(--wit); border: 1px dashed var(--divider-soft); border-radius: var(--radius-lg); }

/* Brand Voice + Concurrentie agents (BrandAnalysisAgent) */
.ba-page { display: block; }
.ba-empty {
    padding: var(--sp-6) var(--sp-4);
    background: var(--wit);
    border: 1px dashed var(--divider-soft);
    border-radius: var(--radius-lg);
    text-align: center;
}
.ba-empty-icon { display: inline-flex; color: var(--accent, #2563eb); margin-bottom: var(--sp-2); }
.ba-empty h3 { margin: 0 0 var(--sp-1); font-size: 1.1rem; }
.ba-empty-desc { color: var(--text-secondary); max-width: 540px; margin: 0 auto var(--sp-3); }
.ba-input { max-width: 540px; margin: 0 auto var(--sp-3); text-align: left; }
.ba-input .form-label { display: block; margin-bottom: 4px; font-size: 0.85rem; color: var(--text-secondary); }
.ba-err { color: var(--rood, #b8651f); font-size: 0.85rem; margin-top: 0; }

.ba-running {
    padding: var(--sp-8) var(--sp-4);
    text-align: center;
    background: var(--wit);
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius-lg);
}
.ba-running p { color: var(--text-secondary); margin-top: var(--sp-3); }

.ba-result {
    background: var(--wit);
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.ba-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-2); flex-wrap: wrap;
    padding: var(--sp-3) var(--sp-4);
    background: var(--creme, #faf7f2);
    border-bottom: 1px solid var(--divider-soft);
}
.ba-meta { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; font-size: 0.8rem; color: var(--text-secondary); }
.ba-meta > span { display: inline-flex; align-items: center; gap: 3px; }
.ba-content { padding: var(--sp-4); line-height: 1.6; color: var(--text-primary); }
.ba-content h2 { font-size: 1.2rem; margin-top: var(--sp-4); margin-bottom: var(--sp-2); }
.ba-content h3 { font-size: 1.05rem; margin-top: var(--sp-3); margin-bottom: var(--sp-2); }
.ba-content h4 { font-size: 0.95rem; margin-top: var(--sp-2); margin-bottom: 4px; }
.ba-content ul, .ba-content ol { padding-left: 1.4em; margin: var(--sp-2) 0; }
.ba-content p { margin: var(--sp-2) 0; }
.ba-content a { color: var(--accent, #2563eb); }
.ba-content code { background: var(--creme, #faf7f2); padding: 1px 5px; border-radius: 4px; font-size: 0.9em; }

/* ── Google Ads audit — KPI's, omzet-blok en tabellen (bovenop de seo-audit-stijl) ── */
.ads-audit { max-width: 1000px; }
.ads-audit-ranat { margin-bottom: var(--sp-3); }
.ads-kpis { flex: 1 1 320px; min-width: 260px; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
.ads-kpi { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); background: var(--surface-alt); position: relative; }
.ads-kpi-ico { position: absolute; top: var(--sp-3); right: var(--sp-3); color: var(--text-tertiary); opacity: 0.6; display: flex; }
.ads-kpi-val { font-size: 1.5rem; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; line-height: 1.2; }
.ads-kpi-lbl { font-size: 0.76rem; color: var(--text-secondary); }

.ads-rev { background: var(--wit); border: 1px solid var(--divider-soft); border-radius: var(--radius-lg); padding: var(--sp-4); box-shadow: var(--shadow-sm); }
.ads-rev-warn { display: flex; align-items: center; gap: 6px; color: var(--text-secondary); }
.ads-rev-head { display: flex; align-items: center; gap: 6px; margin-bottom: var(--sp-3); }
.ads-rev-head > :first-child { color: var(--accent); }
.ads-rev-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); }
.ads-rev-val { display: block; font-size: 1.25rem; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.ads-rev-lbl { display: block; font-size: 0.76rem; color: var(--text-secondary); margin-top: 2px; }
.ads-chans { display: flex; flex-wrap: wrap; gap: 5px; margin-top: var(--sp-3); }
.ads-chan { font-size: 0.76rem; background: var(--surface-alt); color: var(--text-secondary); padding: 2px 9px; border-radius: 999px; }

.ads-issue-val { flex: 0 0 auto; font-size: 0.8rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.ads-issue-body { padding: 0 var(--sp-3) var(--sp-3) calc(var(--sp-3) + 20px); }
.ads-issue-advies { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 6px; }
.ads-issue-items { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; }
.ads-issue-items li { font-size: 0.82rem; color: var(--text-default); }

.ads-tablewrap { overflow-x: auto; border: 1px solid var(--divider-soft); border-radius: var(--radius); background: var(--wit); }
.ads-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.ads-table th, .ads-table td { padding: 7px var(--sp-3); text-align: left; border-bottom: 1px solid var(--divider-soft); white-space: nowrap; }
.ads-table th { background: var(--surface-alt); font-weight: 700; color: var(--text-secondary); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.03em; }
.ads-table tbody tr:last-child td { border-bottom: none; }
.ads-table tbody tr:hover { background: var(--surface-alt); }
.ads-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.ads-td-name { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ads-qs { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; border-radius: 999px; font-weight: 700; font-size: 0.76rem; color: #fff; }
.ads-qs-good { background: var(--groen); }
.ads-qs-warn { background: var(--geel); color: #5b4708; }
.ads-qs-bad { background: var(--rood); }

@media (max-width: 640px) { .ads-kpis { grid-template-columns: 1fr; } }

/* ── Test v2 — dossier-detail (Niveau 2): verticale flow-rail met genummerde stappen ── */
.tv2d { max-width: 860px; }
.tv2d-top { margin-bottom: var(--sp-3); }
.tv2d-rail { display: flex; flex-direction: column; }

.tv2d-step { display: flex; gap: var(--sp-4, 16px); }
.tv2d-step-rail { position: relative; flex: 0 0 32px; }
.tv2d-step-rail::before { content: ''; position: absolute; left: 15px; top: 0; bottom: 0; width: 2px; background: var(--divider-soft); }
.tv2d-step:last-child .tv2d-step-rail::before { display: none; }
.tv2d-step-num { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; background: var(--oranje, #c96f52); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.95rem; }
.tv2d-step-body { flex: 1 1 auto; min-width: 0; padding-bottom: var(--sp-5, 28px); }
.tv2d-step-title { font-weight: 700; font-size: 1.05rem; color: var(--text-primary); }
.tv2d-step-sub { font-size: 0.82rem; color: var(--text-secondary); margin: 2px 0 var(--sp-3); }

/* Stap 1 — dienst */
.tv2d-dienst-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: var(--sp-2); }
.tv2d-dienst-naam { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); }
.tv2d-dienst-url { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 0.85rem; color: var(--text-secondary); }
.tv2d-dienst-url span { word-break: break-all; }
.tv2d-metrics { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-2); margin-top: var(--sp-3); }
.tv2d-metric { background: var(--wit); border: 1px solid var(--divider-soft); border-radius: var(--radius-md, 10px); padding: var(--sp-3) var(--sp-2); text-align: center; box-shadow: var(--shadow-sm); }
.tv2d-metric-val { display: block; font-size: 1.25rem; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.tv2d-metric-lbl { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-tertiary); margin-top: 2px; }
@media (max-width: 640px) { .tv2d-metrics { grid-template-columns: repeat(2, 1fr); } }

/* Stap 2 — geprioriteerd actieplan */
.tv2d-actions { display: grid; gap: var(--sp-2); }
.tv2d-action { display: flex; gap: var(--sp-3); align-items: flex-start; background: var(--wit); border: 1px solid var(--divider-soft); border-radius: var(--radius-lg); padding: var(--sp-3); box-shadow: var(--shadow-sm); }
.tv2d-action-nr { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; background: var(--creme); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.82rem; }
.tv2d-action-body { flex: 1 1 auto; min-width: 0; }
.tv2d-action-titel { font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tv2d-action-waarom { font-size: 0.85rem; color: var(--text-secondary); margin-top: 2px; }
.tv2d-action-url { font-size: 0.78rem; color: var(--text-tertiary); margin-top: 4px; display: inline-flex; align-items: center; gap: 4px; word-break: break-all; }

/* Stap 3 — de zoekreis (funnel) */
.tv2d-funnel { margin-top: var(--sp-2); }
/* Echte trechter: elke band versmalt symmetrisch naar het midden (margin-inline:auto).
   box-sizing zodat de 1px-border de breedte niet scheeftrekt. */
.tv2d-band { box-sizing: border-box; width: 100%; margin-top: 6px; margin-inline: auto; border-radius: var(--radius-md, 10px); border: 1px solid rgba(0,0,0,0.06); overflow: hidden; background: var(--wit); }
.tv2d-funnel > .tv2d-band:first-child { margin-top: 0; }
.tv2d-funnel > .tv2d-band:nth-child(1) { width: 100%; }
.tv2d-funnel > .tv2d-band:nth-child(2) { width: 90%; }
.tv2d-funnel > .tv2d-band:nth-child(3) { width: 81%; }
.tv2d-funnel > .tv2d-band:nth-child(4) { width: 72%; }
.tv2d-funnel > .tv2d-band:nth-child(5) { width: 64%; }
.tv2d-funnel > .tv2d-band:nth-child(6) { width: 57%; }
.tv2d-band-head { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: 10px var(--sp-3); color: var(--text-primary); }
.tv2d-band-head::-webkit-details-marker { display: none; }
.tv2d-band-empty .tv2d-band-head { cursor: default; opacity: 0.7; }
.tv2d-funnel > .tv2d-band:nth-child(1) > .tv2d-band-head { background: #fbeee7; }
.tv2d-funnel > .tv2d-band:nth-child(2) > .tv2d-band-head { background: #f4dccd; }
.tv2d-funnel > .tv2d-band:nth-child(3) > .tv2d-band-head { background: #ecc0a3; }
.tv2d-funnel > .tv2d-band:nth-child(4) > .tv2d-band-head { background: #db9367; color: #fff; }
.tv2d-funnel > .tv2d-band:nth-child(5) > .tv2d-band-head { background: #c96f52; color: #fff; }
.tv2d-funnel > .tv2d-band:nth-child(6) > .tv2d-band-head { background: var(--grijs-50, #f3f3f3); }
.tv2d-band-name { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.tv2d-band-name .icon { transition: transform 0.15s ease; }
.tv2d-band[open] > .tv2d-band-head .tv2d-band-name .icon { transform: rotate(180deg); }
.tv2d-band-meta { font-size: 0.78rem; opacity: 0.85; white-space: nowrap; }
.tv2d-band-body { padding: var(--sp-2); display: grid; gap: 6px; }

.tv2d-kw { border: 1px solid var(--divider-soft); border-radius: var(--radius-sm); background: var(--wit); }
.tv2d-kw-dim { opacity: 0.55; }
.tv2d-kw-row { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 8px 10px; }
.tv2d-kw-row::-webkit-details-marker { display: none; }
.tv2d-kw-term { font-weight: 600; color: var(--text-primary); }
.tv2d-kw-clicks { margin-left: auto; font-size: 0.78rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tv2d-kw-detail { padding: 0 10px 10px; font-size: 0.82rem; display: grid; gap: 6px; }
.tv2d-kw-own { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.tv2d-kw-cell { color: var(--text-default); }
.tv2d-kw-lbl { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-tertiary); }
.tv2d-kw-block { display: flex; flex-direction: column; gap: 2px; }
.tv2d-kw-kan { padding: 6px 8px; background: var(--oranje-light, #fdf0e3); border-radius: var(--radius-sm); }

/* Stap 4 — naslag (referentie, dichtgevouwen) */
.tv2d-naslag { border: 1px solid var(--divider-soft); border-radius: var(--radius-lg); background: var(--wit); overflow: hidden; margin-top: var(--sp-2); }
.tv2d-naslag-head { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: var(--sp-3); font-weight: 600; color: var(--text-primary); }
.tv2d-naslag-head::-webkit-details-marker { display: none; }
.tv2d-naslag-head .icon { transition: transform 0.15s ease; }
.tv2d-naslag[open] > .tv2d-naslag-head .icon { transform: rotate(180deg); }
.tv2d-naslag-body { padding: 0 var(--sp-3) var(--sp-3); }
.tv2d-naslag-sub { font-weight: 600; font-size: 0.85rem; margin: var(--sp-2) 0 4px; display: flex; align-items: center; gap: 6px; }
.tv2d-naslag-item { padding: 4px 0; font-size: 0.85rem; }

.test-mini-sub { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-tertiary); margin-top: 4px; }

/* ── Position Tracking (SEMrush-achtig posities-overzicht) ── */
.pt-toolbar { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); flex-wrap: wrap; }
.pt-search { max-width: 320px; }
.pt-filter-chips { display: flex; gap: 4px; }
.pt-chip { border: 1px solid var(--divider-soft); background: var(--wit); color: var(--text-secondary); padding: 6px 14px; border-radius: 999px; cursor: pointer; font-size: 0.85rem; }
.pt-chip.is-active { background: var(--text-primary); color: #fff; border-color: var(--text-primary); }
.pt-table-wrap { overflow-x: auto; padding: 0; }
.pt-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.pt-table th { text-align: left; padding: 12px 14px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-tertiary); border-bottom: 1px solid rgba(80, 45, 30, 0.22); white-space: nowrap; }
.pt-table th.num, .pt-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pt-table td { padding: 12px 14px; border-bottom: 1px solid rgba(80, 45, 30, 0.14); vertical-align: top; }
.pt-table tbody tr { cursor: pointer; }
.pt-table tbody tr:hover { background: var(--grijs-50, #faf8f5); }
.pt-project-name { font-weight: 600; color: var(--accent, #1A73E8); }
.pt-project-domain { font-size: 0.78rem; color: var(--text-secondary); margin-top: 2px; }
.pt-loc { display: inline-flex; align-items: center; gap: 4px; color: var(--accent, #1A73E8); }
.pt-loc-sub { font-size: 0.78rem; color: var(--text-secondary); margin-top: 2px; }
.pt-vis { font-weight: 600; color: var(--accent, #1A73E8); }
.pt-up { color: var(--groen, #2f8a3e); font-weight: 600; }
.pt-down { color: var(--rood, #c0392b); font-weight: 600; }
.pt-empty { text-align: center; padding: 28px 12px; color: var(--text-secondary); }

/* Position Tracking — projectdetail */
.pt-detail-top { margin-bottom: var(--sp-3); }
.pt-back { display: inline-flex; align-items: center; gap: 4px; font-size: 0.82rem; color: var(--text-secondary); text-decoration: none; }
.pt-back:hover { color: var(--accent, #1A73E8); }
.pt-detail-title { margin: 6px 0 2px; }
.pt-detail-sub { display: inline-flex; align-items: center; gap: 4px; font-size: 0.82rem; color: var(--text-secondary); }
.pt-tabs { display: flex; gap: 18px; border-bottom: 1px solid var(--divider-soft); margin-bottom: var(--sp-3); overflow-x: auto; }
.pt-tab { padding: 8px 2px; font-size: 0.85rem; color: var(--text-secondary); white-space: nowrap; border-bottom: 2px solid transparent; cursor: pointer; }
.pt-tab:hover { color: var(--text-primary); }
.pt-tab.is-active { color: var(--accent, #1A73E8); border-bottom-color: var(--accent, #1A73E8); font-weight: 600; }
.pt-chart-card { margin-bottom: var(--sp-3); }
.pt-chart-head { margin-bottom: var(--sp-2); }
.pt-chart-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-tertiary); }
.pt-chart-val { font-size: 1.4rem; font-weight: 700; color: var(--accent, #1A73E8); }
.pt-chart { width: 100%; height: auto; display: block; }
.pt-line { fill: none; stroke: var(--accent, #1A73E8); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.pt-area { fill: rgba(26, 115, 232, 0.08); stroke: none; }
.pt-axis { stroke: var(--divider-soft); stroke-width: 1; }
.pt-grid { stroke: var(--divider-soft); stroke-width: 1; stroke-dasharray: 3 3; }
.pt-axis-lbl { fill: var(--text-tertiary); font-size: 11px; }
.pt-rankings-head { font-weight: 600; padding: var(--sp-3) var(--sp-3) var(--sp-2); }
.pt-rankings tbody tr { cursor: default; }
.pt-rankings tbody tr:hover { background: var(--grijs-50, #faf8f5); }
.pt-rankings td, .pt-rankings th { padding: 9px 12px; }
.pt-kw { font-weight: 600; color: var(--text-primary); max-width: 280px; }
.pt-url { max-width: 260px; }
.pt-url a { color: var(--accent, #1A73E8); text-decoration: none; word-break: break-all; font-size: 0.8rem; }

/* Position Tracking — Landscape kerncijfer-kaarten */
.pt-stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--sp-3); }
.pt-stat-card { background: var(--wit); border: 1px solid var(--divider-soft); border-radius: var(--radius-md, 10px); padding: var(--sp-4) var(--sp-3); box-shadow: var(--shadow-sm); }
.pt-stat-val { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.pt-stat-lbl { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-tertiary); margin-top: 4px; }

/* Position Tracking — Rankings Distribution balken */
.pt-dist { display: grid; gap: 8px; }
.pt-dist-row { display: grid; grid-template-columns: 80px 1fr 60px; align-items: center; gap: var(--sp-3); }
.pt-dist-lbl { font-size: 0.82rem; color: var(--text-secondary); text-align: right; }
.pt-dist-bar { background: var(--grijs-50, #f0ece6); border-radius: 6px; height: 18px; overflow: hidden; }
.pt-dist-fill { display: block; height: 100%; background: var(--accent, #1A73E8); border-radius: 6px; min-width: 2px; }
.pt-dist-val { font-size: 0.82rem; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.pt-dist-foot { margin-top: var(--sp-3); font-size: 0.82rem; }

/* ── Pagina's (site-breed pagina-overzicht, náást Test v2) ── */
.po-head { margin-bottom: var(--sp-3); }
.po-title { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 1.05rem; color: var(--text-primary); }
.po-sub { margin: 2px 0 0; font-size: 0.82rem; color: var(--text-secondary); max-width: 90ch; }
.po-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-3); }
.po-card { background: var(--wit); border: 1px solid var(--divider-soft); border-radius: var(--radius-md, 10px); padding: var(--sp-3); box-shadow: var(--shadow-sm); text-align: center; }
.po-card-val { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.po-card-lbl { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-tertiary); margin-top: 2px; }
.po-filters { display: flex; gap: 4px; margin-bottom: var(--sp-3); }
.po-chip { border: 1px solid var(--divider-soft); background: var(--wit); color: var(--text-secondary); padding: 6px 14px; border-radius: 999px; cursor: pointer; font-size: 0.85rem; }
.po-chip.is-active { background: var(--text-primary); color: #fff; border-color: var(--text-primary); }
.po-group-title { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--text-primary); font-size: 0.95rem; margin: var(--sp-4) 0 var(--sp-2); }
.po-group-muted { color: var(--text-tertiary); }
.po-empty { padding: 28px 12px; text-align: center; color: var(--text-secondary); }

.po-pillar { border: 1px solid var(--divider-soft); border-radius: var(--radius-lg); background: var(--wit); margin-bottom: var(--sp-2); overflow: hidden; }
.po-pillar.is-primair { border-left: 3px solid var(--groen, #2f8a3e); }
.po-pillar.is-dim { opacity: 0.45; }
.po-pillar > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3); }
.po-pillar > summary::-webkit-details-marker { display: none; }
.po-pillar > summary:hover { background: var(--grijs-50, #faf8f5); }
.po-pillar-main { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.po-pillar-main .icon { transition: transform 0.15s ease; }
.po-pillar[open] > summary .po-pillar-main > .icon:first-child { transform: rotate(180deg); }
.po-pillar-url { font-weight: 600; color: var(--text-primary); word-break: break-all; }
.po-pillar-meta { font-size: 0.8rem; color: var(--text-secondary); white-space: nowrap; }
.po-metric { font-variant-numeric: tabular-nums; }
.po-doel { display: inline-flex; align-items: center; gap: 3px; font-size: 0.72rem; padding: 2px 8px; border-radius: 10px; background: var(--groen-light, #eaf6ea); color: var(--groen, #2f6b2e); }
.po-pillar-body { padding: 0 var(--sp-3) var(--sp-3); }
.po-pillar-diensten { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 0.82rem; color: var(--text-secondary); margin-bottom: var(--sp-2); }
.po-link { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--accent, #1A73E8); text-decoration: none; font-size: 0.82rem; }
.po-overload { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 0.82rem; padding: 6px 10px; border-radius: var(--radius-sm); background: var(--oranje-light, #fdf0e3); color: var(--oranje, #b35e1f); margin-bottom: var(--sp-2); }
.po-sup-list { display: grid; gap: 4px; }
.po-sup { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 0.82rem; padding: 6px 8px; border: 1px solid var(--divider-soft); border-radius: var(--radius-sm); background: var(--grijs-50, #faf8f5); }
.po-sup.is-dim { opacity: 0.45; }
.po-sup-empty { border-style: dashed; }
.po-sup-url { color: var(--text-default); word-break: break-all; }
.po-sup-meta { margin-left: auto; white-space: nowrap; }

/* View-toggle + tools */
.test-actions-head-tools { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.test-view-toggle { display: inline-flex; gap: 2px; background: var(--grijs-100); border-radius: var(--radius-sm); padding: 2px; }

/* Stappenplan */
.test-progress { margin-bottom: var(--sp-4); }
.test-progress-bar { height: 8px; background: var(--grijs-200); border-radius: 4px; overflow: hidden; }
.test-progress-bar span { display: block; height: 100%; background: var(--groen); transition: width var(--transition); }
.test-progress-label { font-size: 0.78rem; color: var(--text-secondary); margin-top: 4px; }
.test-steps { display: flex; flex-direction: column; gap: var(--sp-3); }
.test-step { display: flex; gap: var(--sp-3); padding: var(--sp-3); background: var(--wit); border: 1px solid var(--divider-soft); border-left: 4px solid var(--grijs-300); border-radius: var(--radius); }
.test-step.kind-new { border-left-color: var(--groen); }
.test-step.kind-opt { border-left-color: var(--accent); }
.test-step.kind-links { border-left-color: #8b5cf6; }
.test-step.kind-tech { border-left-color: var(--grijs-700); }
.test-step.kind-local { border-left-color: #14b8a6; }
.test-step.kind-offpage { border-left-color: var(--oranje); }
.test-step.kind-cro { border-left-color: #db2777; }
.test-step.kind-review { border-left-color: var(--geel); }
.test-step.is-done { opacity: 0.6; }
.test-step.is-done .test-step-title { text-decoration: line-through; }
.test-step-num { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.85rem; }
.test-step.is-done .test-step-num { background: var(--groen); }
.test-step-body { flex: 1; min-width: 0; }
.test-step-title { font-weight: 600; color: var(--text-primary); }
.test-step-foot { display: flex; align-items: center; gap: 6px; margin-top: var(--sp-2); }

/* Asana-stijl rond "gedaan"-vinkje */
.test-step-titlerow, .test-action-titlerow { display: flex; align-items: center; gap: 8px; }
.test-check-round { flex: none; width: 22px; height: 22px; padding: 0; border-radius: 50%;
    border: 1.5px solid var(--border-color, #cbd1d9); background: transparent;
    color: transparent; display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all .12s ease; line-height: 0; }
.test-check-round :where(svg, .material-icons, [class*="icon"]) { font-size: 14px; width: 14px; height: 14px; }
.test-check-round:hover { border-color: var(--groen, #2e9e5b); color: var(--groen, #2e9e5b); }
.test-check-round.is-done { background: var(--groen, #2e9e5b); border-color: var(--groen, #2e9e5b); color: #fff; }
.test-action-title.is-done, .test-step-title.is-done { text-decoration: line-through; color: var(--text-tertiary); }

/* Diagnose-blok: wat is er nu mis op de site */
.test-diag { margin: var(--sp-3) 0; border-left: 3px solid var(--oranje, #e08a2b); }
.test-diag-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: var(--sp-2); }
.test-diag-head strong { font-size: 0.98rem; }
.test-diag-summary { font-size: 0.9rem; color: var(--text-secondary); margin: 0 0 var(--sp-3); max-width: 90ch; }
.test-diag-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.test-diag-item { border: 1px solid var(--border-color, #e6e8eb); border-left-width: 3px; border-radius: 8px; padding: var(--sp-2) var(--sp-3); }
.test-diag-item.kind-links  { border-left-color: #b07cd6; }
.test-diag-item.kind-new    { border-left-color: #2e9e5b; }
.test-diag-item.kind-opt    { border-left-color: #2f6fed; }
.test-diag-item.kind-tech   { border-left-color: #5a6470; }
.test-diag-item.kind-review { border-left-color: #e08a2b; }
.test-diag-item-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.test-diag-item-title { font-weight: 600; font-size: 0.9rem; }
.test-diag-item-detail { font-size: 0.85rem; color: var(--text-secondary); margin-top: 4px; }

/* Master-plan (brand-breed): hoofd-plan + concrete stappen */
.test-master-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.test-master-cta { margin-top: var(--sp-3); }
.test-master-plan { margin: var(--sp-3) 0; border-left: 4px solid var(--accent, #2f6fed); }
.test-master-plan.is-problem { border-left-color: var(--rood, #d64545); }
.test-master-plan.is-kans { border-left-color: var(--groen, #2e9e5b); }
.test-master-plan-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: var(--sp-2); }
.test-master-plan-title { font-size: 1.1rem; font-weight: 700; }
.test-master-plan-obj { font-size: 0.95rem; margin: 4px 0; }
.test-master-plan-why { font-size: 0.9rem; color: var(--text-secondary); margin: 4px 0; display: flex; gap: 6px; align-items: flex-start; }
.test-master-plan-concerns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-2); }

/* Coach-chat */
.test-coach-wrap { margin-top: var(--sp-5); }
.test-coach-open { }
.test-coach-panel { border: 1px solid var(--divider-soft); border-radius: var(--radius-lg); background: var(--wit); overflow: hidden; }
.test-coach-head { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-3) var(--sp-4); background: var(--accent-light); font-weight: 500; color: var(--accent-hover); }
.test-coach-msgs { max-height: 360px; overflow-y: auto; padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
.test-coach-msg { display: flex; }
.test-coach-user { justify-content: flex-end; }
.test-coach-bubble { max-width: 80%; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius); font-size: 0.88rem; line-height: 1.5; }
.test-coach-user .test-coach-bubble { background: var(--accent); color: #fff; }
.test-coach-ai .test-coach-bubble { background: var(--creme); color: var(--text-default); }
.test-coach-input { display: flex; gap: var(--sp-2); padding: var(--sp-3); border-top: 1px solid var(--divider-soft); }
.test-coach-input textarea { flex: 1; resize: vertical; padding: 8px 10px; border: 1px solid var(--grijs-200); border-radius: var(--radius-sm); font-family: inherit; font-size: 0.88rem; }

@media (max-width: 900px) {
    .test-stats-row { gap: var(--sp-3); }
    .test-step { flex-wrap: nowrap; }
}

/* ── Sub-pagina's (cluster-pagina's onder een pillar) ──────────────── */
.test-subpages-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin: var(--sp-2) 0 var(--sp-3); }
.test-subpages-head h4 { margin: 0; display: flex; align-items: center; gap: 6px; }
.test-subpages-head > div { display: flex; gap: var(--sp-2); }
.test-subpages-empty { padding: var(--sp-4); border: 1px dashed var(--grijs-200); border-radius: var(--radius); }
.test-subpages-count { margin-bottom: var(--sp-2); }
.test-subpages-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-5); }
.test-subpage { display: flex; gap: var(--sp-2); padding: var(--sp-3); background: var(--wit); border: 1px solid var(--divider-soft); border-left: 4px solid var(--grijs-300); border-radius: var(--radius); }
.test-subpage.is-new { border-left-color: var(--groen); }
.test-subpage.is-existing { border-left-color: var(--accent); }
.test-subpage-main { flex: 1; min-width: 0; }
.test-subpage-title { font-weight: 600; color: var(--text-primary); }
.test-subpage-badges { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.test-subpage-kw { font-size: 0.82rem; color: var(--text-secondary); display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.test-subpage-url { font-size: 0.8rem; color: var(--text-tertiary); display: flex; align-items: center; gap: 4px; margin-top: 2px; word-break: break-all; }
.test-subpage-tools { display: flex; flex-direction: column; gap: 2px; flex: none; }

@media (max-width: 900px) {
    .test-subpages-list { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────────────
   SEO Dashboard v2 (Claude Design redesign)
   Geist font · #18181B headings · #2A6FDB accent · borders #ECECEF/#E8E8EC
   ───────────────────────────────────────────────────────────────────── */
.seo2-page {
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    color: #18181B;
}
.seo2-page .mono { font-family: 'Geist Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }

/* Page title row */
.seo2-titlerow { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:20px; gap:16px; flex-wrap:wrap; }
.seo2-title    { margin:0; font-size:21px; font-weight:700; letter-spacing:-.3px; color:#18181B; }
.seo2-subtitle { margin:5px 0 0; font-size:13px; color:#71717A; }
.seo2-titletools { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.seo2-btn {
    display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 12px;
    border:1px solid #E4E4E7; border-radius:8px; background:#fff;
    font-size:13px; color:#3F3F46; cursor:pointer; font-family:inherit;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.seo2-btn:hover { background:#FBFBFC; border-color:#D4D4D8; }
.seo2-btn .seo2-caret { color:#A1A1AA; }
.seo2-btn-primary {
    background:#18181B; color:#fff; border:none; padding:0 14px; font-weight:600;
}
.seo2-btn-primary:hover { background:#27272A; }

/* KPI strip */
.seo2-kpis { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; margin-bottom:22px; }
.seo2-kpi {
    background:#fff; border:1px solid #ECECEF; border-radius:12px; padding:16px 18px;
}
.seo2-kpi-head { display:flex; align-items:center; justify-content:space-between; }
.seo2-kpi-label { font-size:11px; font-weight:600; letter-spacing:.7px; color:#71717A; text-transform:uppercase; }
.seo2-kpi-trend {
    font-size:11.5px; font-weight:600; padding:2px 7px; border-radius:999px;
    background:#F4F4F5; color:#71717A;
}
.seo2-kpi-trend-up   { color:#15803D; background:#ECFDF3; }
.seo2-kpi-trend-down { color:#DC2626; background:#FEF2F2; }
.seo2-kpi-value {
    /* Unified KPI-typografie: gelijkgetrokken met pa-kpi-tile-val
       en pa-kpi-tile__value (1.55rem) zodat alle dashboards dezelfde
       cijferschaal en gewicht delen. */
    font-family:'Geist Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 1.55rem;
    font-weight: 500;
    letter-spacing: -0.4px;
    color: #18181B;
    margin-top: 11px;
    line-height: 1.1;
}
.seo2-kpi-spark { width:100%; height:30px; margin-top:12px; }
.seo2-kpi-progress { height:7px; border-radius:999px; background:#F1F5F9; margin-top:15px; overflow:hidden; }
.seo2-kpi-progress > div { height:100%; background:#2A6FDB; border-radius:999px; }
.seo2-kpi-sub { font-size:11.5px; color:#71717A; margin-top:8px; }
.seo2-kpi-baseline { display:flex; align-items:baseline; gap:8px; margin-top:11px; }
.seo2-kpi-baseline .seo2-kpi-value { margin-top:0; }
.seo2-kpi-baseline-sub { font-size:12px; color:#A1A1AA; }

/* Panel */
.seo2-panel { background:#fff; border:1px solid #E8E8EC; border-radius:12px; overflow:hidden; }

/* Toolbar */
.seo2-toolbar {
    display:flex; align-items:center; gap:10px; padding:14px 16px;
    border-bottom:1px solid #F0F0F2; flex-wrap:wrap;
}
.seo2-search {
    display:flex; align-items:center; gap:8px; flex:1; max-width:300px; min-width:200px;
    height:36px; padding:0 12px;
    border:1px solid #E4E4E7; border-radius:8px; background:#FBFBFC;
}
.seo2-search input {
    border:none; background:transparent; outline:none; flex:1;
    font-size:13px; color:#18181B; font-family:inherit;
}
.seo2-search input::placeholder { color:#A1A1AA; }
.seo2-search-clear { border:none; background:none; color:#A1A1AA; cursor:pointer; padding:0; display:flex; }
.seo2-select {
    display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 12px;
    border:1px solid #E4E4E7; border-radius:8px; background:#fff;
    font-size:13px; color:#3F3F46; cursor:pointer; font-family:inherit;
    appearance:none; -webkit-appearance:none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23A1A1AA' stroke-width='2' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat:no-repeat; background-position:right 10px center;
    padding-right:28px;
}
.seo2-toolbar-spacer { flex:1; }

/* Dienst chips row */
.seo2-chiprow {
    display:flex; align-items:center; flex-wrap:wrap; gap:8px;
    padding:14px 16px 4px;
}
.seo2-chiprow-label { font-size:11px; font-weight:600; letter-spacing:.6px; color:#A1A1AA; margin-right:2px; text-transform:uppercase; }
.seo2-chip {
    display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px;
    border-radius:999px; border:1px solid #E4E4E7; background:#fff;
    font-size:12.5px; color:#3F3F46; cursor:pointer; font-family:inherit;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.seo2-chip:hover { background:#FBFBFC; border-color:#D4D4D8; }
.seo2-chip-active { background:#18181B; color:#fff; border-color:#18181B; font-weight:600; }
.seo2-chip-active .seo2-chip-count { color:#A1A1AA; }
.seo2-chip-count { color:#A1A1AA; font-size:11.5px; font-family:'Geist Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums; }
.seo2-chip-icon { display:inline-flex; }

/* Status row */
.seo2-statusrow {
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:10px 16px 14px; border-bottom:1px solid #F0F0F2; flex-wrap:wrap;
}
.seo2-stat-pills { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.seo2-stat-pill {
    display:inline-flex; align-items:center; gap:6px; height:27px; padding:0 11px;
    border-radius:999px; font-size:12px; font-weight:600;
    background:#F4F4F5; color:#52525B; cursor:pointer; border:none; font-family:inherit;
}
.seo2-stat-pill-amber  { background:#FEF6E7; color:#B45309; }
.seo2-stat-pill-red    { background:#FEF2F2; color:#DC2626; }
.seo2-stat-pill-green  { background:#ECFDF3; color:#15803D; }
.seo2-stat-pill-active { outline:2px solid currentColor; outline-offset:1px; }
.seo2-stat-counts { font-size:12px; color:#A1A1AA; }
.seo2-stat-counts .seo2-spam-link { color:#C2410C; cursor:pointer; }
.seo2-stat-counts .seo2-spam-link:hover { text-decoration:underline; }

/* Tabel */
.seo2-grid-cols {
    grid-template-columns: 34px minmax(180px,1.5fr) 86px 78px 92px 84px 88px 74px 70px 72px minmax(180px,1.2fr);
}
.seo2-thead {
    display:grid; align-items:center; height:38px; padding:0 16px 0 14px;
    background:#FBFBFC; border-bottom:1px solid #F0F0F2;
}
.seo2-th {
    font-size:10.5px; letter-spacing:.7px; color:#A1A1AA; font-weight:600;
    text-transform:uppercase; cursor:pointer; user-select:none;
}
/* Sortable header — GEEN display:inline-flex (overschrijft text-align van
   de grid-cel waardoor labels naar links verschoven en niet uitlijnen met
   de cijfers eronder). Sort-icoon is een inline-span en sluit netjes aan. */
.seo2-th-sort:hover { color:#71717A; }
.seo2-th .seo-sort-icon { display:inline-flex; vertical-align:middle; margin-left:2px; opacity:0.7; }
.seo2-th-active { color:#18181B; }
.seo2-tr {
    display:grid; align-items:center; height:48px; padding:0 16px 0 14px;
    cursor:pointer; border-bottom:1px solid #F4F4F5; background:#fff;
    transition: background var(--transition-fast);
}
.seo2-tr:hover { background:#FBFBFC; }
.seo2-tr-attn { background:#FFFCF7; }
.seo2-tr-attn:hover { background:#FFFAEF; }
.seo2-tr-expanded { background:#F5F8FF; }
.seo2-tr-expanded:hover { background:#EEF3FE; }

.seo2-cell-star { display:flex; align-items:center; }
.seo2-star { background:none; border:none; padding:0; cursor:pointer; color:#D4D4D8; display:flex; }
.seo2-star:hover { color:#A1A1AA; }
.seo2-star-on { color:#F59E0B; }
.seo2-star-on:hover { color:#D97706; }

.seo2-cell-kw { display:flex; align-items:center; gap:8px; min-width:0; padding-right:10px; }
.seo2-chev { color:#B4B4BC; flex:0 0 auto; transition: transform var(--transition-fast); }
.seo2-tr-expanded .seo2-chev { transform: rotate(90deg); }
.seo2-mark {
    display:inline-flex; align-items:center; justify-content:center;
    width:18px; height:18px; border-radius:50%; flex:0 0 auto; border:none;
    cursor:pointer; padding:0;
}
.seo2-mark-on  { background:#ECFDF3; color:#16A34A; }
.seo2-mark-off { background:#F1F5F9; color:#71717A; }
.seo2-mark-on:hover  { background:#D1FAE5; }
.seo2-mark-off:hover { background:#E2E8F0; }
.seo2-kw-text {
    font-size:13.5px; font-weight:500; color:#18181B;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    background:none; border:none; padding:0; text-align:left; font-family:inherit; cursor:pointer;
}
.seo2-kw-text:hover { color:#2A6FDB; }

.seo2-num {
    font-family:'Geist Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums;
    font-size:12.5px; color:#3F3F46; text-align:right;
}
.seo2-num-muted  { color:#A1A1AA; }
.seo2-num-strong { font-size:13px; font-weight:600; color:#18181B; }

/* Comp pill (LAAG/MID/HOOG) */
.seo2-comp {
    display:inline-flex; align-items:center; justify-content:center;
    font-size:10.5px; font-weight:600; letter-spacing:.4px;
    padding:2px 7px; border-radius:6px;
}
.seo2-comp-low  { background:#F1F5F9; color:#475569; }
.seo2-comp-mid  { background:#FEF6E7; color:#B45309; }
.seo2-comp-high { background:#FEF1F2; color:#BE123C; }
.seo2-comp-none { background:transparent; color:#A1A1AA; }

/* Delta pill */
.seo2-delta {
    display:inline-flex; align-items:center; justify-content:center;
    font-family:'Geist Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums;
    font-size:11.5px; font-weight:600; padding:2px 7px; border-radius:6px;
    background:transparent; color:#D4D4D8;
}
.seo2-delta-up   { background:#ECFDF3; color:#15803D; }
.seo2-delta-down { background:#FEF2F2; color:#DC2626; }
.seo2-delta-eq   { background:#F4F4F5; color:#71717A; }

/* Pos value coloring */
.seo2-pos-top    { color:#15803D; font-weight:600; }
.seo2-pos-mid    { color:#B45309; font-weight:600; }
.seo2-pos-low    { color:#DC2626; font-weight:600; }
.seo2-pos-none   { color:#A1A1AA; }

/* Target cell */
.seo2-target { min-width:0; }
.seo2-target-link {
    display:inline-flex; align-items:center; gap:6px; max-width:100%; height:25px;
    padding:0 9px; border-radius:7px; background:#F4F7FE; border:1px solid #E1EAFB;
    text-decoration:none;
}
.seo2-target-link .seo2-target-text {
    font-family:'Geist Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums;
    font-size:11.5px; color:#2A52C9; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.seo2-target-empty {
    display:inline-flex; align-items:center; gap:6px; height:25px; padding:0 10px;
    border-radius:7px; border:1px dashed #D4D4D8; color:#71717A;
    font-size:11.5px; font-weight:500; cursor:pointer; background:none; font-family:inherit;
}
.seo2-target-empty:hover { color:#18181B; border-color:#A1A1AA; }
.seo2-target-none { font-size:13px; color:#D4D4D8; }

/* Expand panel */
.seo2-expand { padding:18px 20px 22px; background:#fff; border-top:1px solid #EFEFF2; }
.seo2-rec {
    display:flex; align-items:flex-start; gap:11px; padding:13px 15px;
    border-radius:10px; background:#F0FAF3; border:1px solid #CBEBD5; margin-bottom:16px;
}
.seo2-rec-icon {
    display:inline-flex; align-items:center; justify-content:center;
    width:24px; height:24px; border-radius:6px; background:#16A34A; color:#fff; flex:0 0 auto;
}
.seo2-rec-title { font-size:13px; color:#14532D; }
.seo2-rec-title strong { font-weight:600; }
.seo2-rec-target { font-family:'Geist Mono', ui-monospace, monospace; color:#15803D; }
.seo2-rec-note { font-size:12px; color:#3F7A52; margin-top:3px; }

.seo2-ptable { border:1px solid #ECECEF; border-radius:10px; overflow:hidden; background:#fff; }
.seo2-pthead-grid { grid-template-columns: minmax(280px,1fr) 104px 90px 70px 88px 132px 132px; }
.seo2-pthead {
    display:grid; align-items:center; padding:10px 14px;
    background:#FBFBFC; border-bottom:1px solid #F0F0F2;
}
.seo2-pth {
    font-size:10.5px; letter-spacing:.6px; color:#A1A1AA; font-weight:600;
    text-transform:uppercase;
}
.seo2-prow {
    display:grid; align-items:center; padding:11px 14px;
    border-bottom:1px solid #F6F6F7;
}
.seo2-prow:last-child { border-bottom:none; }
.seo2-purl {
    font-family:'Geist Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums;
    font-size:12.5px; color:#27272A;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-right:10px;
}
.seo2-pcol-pos { text-align:right; padding-right:18px; }
.seo2-ppos {
    font-family:'Geist Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums;
    font-size:12px; font-weight:600; padding:2px 8px; border-radius:6px; background:#F6F6F7;
}
.seo2-ptag {
    display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 9px;
    border-radius:6px; font-size:11.5px; font-weight:600;
}
.seo2-ptag-rec { background:#ECFDF3; color:#15803D; }
.seo2-ptag-target { background:#EEF3FE; color:#2A52C9; }
.seo2-pactions { display:flex; justify-content:flex-end; gap:6px; }
.seo2-pact {
    display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px;
    border-radius:7px; font-size:12.5px; font-weight:600; cursor:pointer; border:none; font-family:inherit;
}
.seo2-pact-primary { background:#2A6FDB; color:#fff; }
.seo2-pact-primary:hover { background:#1D5BBE; }
.seo2-pact-icon {
    display:inline-flex; align-items:center; justify-content:center;
    width:30px; height:30px; border:1px solid #E4E4E7; border-radius:7px;
    color:#71717A; cursor:pointer; background:#fff;
}
.seo2-pact-icon:hover { background:#FBFBFC; }

.seo2-manual-target {
    display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 13px;
    border:1px solid #E4E4E7; border-radius:8px; background:#fff;
    color:#2A6FDB; font-size:12.5px; font-weight:600; cursor:pointer; margin-top:12px;
    border:none; font-family:inherit;
}
.seo2-manual-target { border:1px solid #E4E4E7; }
.seo2-manual-target:hover { background:#FBFBFC; }
.seo2-manual-target .seo2-manual-hint { color:#A1A1AA; font-weight:400; }

/* Position history table */
.seo2-poshist {
    display:flex; margin-top:24px; background:#fff;
    border:1px solid #ECECEF; border-radius:10px; padding:14px 18px;
}
.seo2-poshist-labels {
    display:flex; flex-direction:column; width:96px; flex:0 0 auto;
}
.seo2-poshist-labels .ph-head { height:20px; }
.seo2-poshist-labels .ph-pos { height:22px; font-size:11.5px; color:#52525B; font-weight:500; }
.seo2-poshist-labels .ph-row { height:22px; font-size:11.5px; color:#A1A1AA; }
.seo2-poshist-months { display:flex; flex:1; min-width:0; }
.seo2-poshist-month { flex:1; min-width:0; display:flex; flex-direction:column; text-align:center; }
.seo2-poshist-month .pm-label {
    height:20px; font-size:10.5px; color:#A1A1AA; font-weight:600; letter-spacing:.3px;
}
.seo2-poshist-month .pm-pos {
    font-family:'Geist Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums;
    height:22px; font-size:12px; font-weight:600;
}
.seo2-poshist-month .pm-num {
    font-family:'Geist Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums;
    height:22px; font-size:11.5px; color:#52525B;
}
.seo2-poshist-month .pm-num-muted { color:#A1A1AA; }

/* Footer pagination */
.seo2-footer {
    display:flex; align-items:center; justify-content:space-between;
    padding:13px 16px; background:#FBFBFC;
}
.seo2-footer-text { font-size:12.5px; color:#A1A1AA; }
.seo2-footer-text .mono { color:#71717A; }
.seo2-pagination { display:flex; gap:6px; }
.seo2-pag-btn {
    display:flex; align-items:center; justify-content:center;
    width:32px; height:32px; border:1px solid #E4E4E7; border-radius:7px;
    color:#3F3F46; cursor:pointer; background:#fff; font-family:inherit;
}
.seo2-pag-btn:hover { background:#FBFBFC; }
.seo2-pag-btn[disabled] { color:#D4D4D8; cursor:not-allowed; }

/* Empty / no results states */
.seo2-empty {
    padding:60px 24px; text-align:center; color:#71717A;
}
.seo2-empty h3 { margin:0 0 8px; font-size:16px; color:#18181B; font-weight:600; }
.seo2-empty p { margin:0 0 16px; font-size:13px; }
.seo2-empty-actions {
    display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;
    margin: 24px 0 16px;
}
.seo2-empty-hint {
    margin: 20px auto 0; max-width: 620px;
    font-size: 12px; color: #71717A; line-height: 1.5;
    padding: 12px 16px; background: #F9FAFB; border: 1px solid #E5E7EB;
    border-radius: 8px;
    display: flex; align-items: start; gap: 6px; text-align: left;
}
.seo2-empty-hint strong { color: #52525B; }

/* Responsive — onder 1100px: kpi cards naar 2 kolommen */
@media (max-width: 1100px) {
    .seo2-kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
    .seo2-kpis { grid-template-columns: 1fr; }
}

/* ─── SEO v2 — expand panel styling (design overrides scoped op .seo2-expand) ─── */
.seo2-expand {
    font-family: 'Geist', system-ui, sans-serif;
    color: #18181B;
}
/* Aanbevolen-doel banner (green) */
.seo2-expand .strategy-recommend-banner {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 13px 15px; border-radius: 10px;
    background: #F0FAF3; border: 1px solid #CBEBD5;
    margin-bottom: 16px;
}
.seo2-expand .strategy-recommend-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 6px;
    background: #16A34A; color: #fff; flex: 0 0 auto;
}
.seo2-expand .strategy-recommend-icon .icon { font-size: 14px; }
.seo2-expand .strategy-recommend-body { font-size: 13px; color: #14532D; }
.seo2-expand .strategy-recommend-body strong { font-weight: 600; }
.seo2-expand .strategy-recommend-body code {
    font-family: 'Geist Mono', ui-monospace, monospace;
    background: transparent; padding: 0; color: #15803D;
}
.seo2-expand .strategy-recommend-reason {
    font-size: 12px; color: #3F7A52; margin-top: 3px;
}

/* Pagina rankings table */
.seo2-expand .strategy-rankings-table-v2 {
    border: 1px solid #ECECEF; border-radius: 10px; overflow: hidden;
    background: #fff; border-collapse: collapse;
}
.seo2-expand .strategy-rankings-table-v2 thead th {
    background: #FBFBFC; border-bottom: 1px solid #F0F0F2;
    font-size: 10.5px; letter-spacing: .6px; color: #A1A1AA; font-weight: 600;
    text-transform: uppercase; padding: 10px 14px;
}
.seo2-expand .strategy-rankings-table-v2 tbody td {
    padding: 11px 14px; border-bottom: 1px solid #F6F6F7;
    font-family: 'Geist Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums;
    font-size: 12.5px; color: #27272A;
}
.seo2-expand .strategy-rankings-table-v2 tbody tr:last-child td { border-bottom: none; }
.seo2-expand .strategy-rankings-table-v2 .is-target-row { background: #F4F7FE; }
.seo2-expand .strategy-rankings-table-v2 .pos-good,
.seo2-expand .strategy-rankings-table-v2 .pos-ok,
.seo2-expand .strategy-rankings-table-v2 .pos-mid,
.seo2-expand .strategy-rankings-table-v2 .pos-bad {
    font-family: 'Geist Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums;
    font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 6px;
    background: #F6F6F7;
}
.seo2-expand .strategy-rankings-table-v2 .pos-good { color: #15803D; }
.seo2-expand .strategy-rankings-table-v2 .pos-ok   { color: #B45309; }
.seo2-expand .strategy-rankings-table-v2 .pos-mid  { color: #B45309; }
.seo2-expand .strategy-rankings-table-v2 .pos-bad  { color: #DC2626; }
/* Tag pills */
.seo2-expand .strategy-doel-pill {
    display: inline-flex; align-items: center; gap: 5px;
    height: 24px; padding: 0 9px; border-radius: 6px;
    background: #EEF3FE; color: #2A52C9;
    font-family: 'Geist', system-ui, sans-serif;
    font-size: 11.5px; font-weight: 600;
}
.seo2-expand .strategy-recommend-pill {
    display: inline-flex; align-items: center; gap: 5px;
    height: 24px; padding: 0 9px; border-radius: 6px;
    background: #ECFDF3; color: #15803D;
    font-family: 'Geist', system-ui, sans-serif;
    font-size: 11.5px; font-weight: 600;
}
/* Pagina-pad cel */
.seo2-expand .strategy-rankings-table-v2 .page-cell,
.seo2-expand .strategy-rankings-table-v2 td.col-page,
.seo2-expand .strategy-rankings-table-v2 td:first-child {
    font-family: 'Geist Mono', ui-monospace, monospace;
    color: #27272A; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
/* Actie-knoppen */
.seo2-expand .strategy-action-btn,
.seo2-expand button[data-action="set-target"] {
    display: inline-flex; align-items: center; gap: 6px;
    height: 30px; padding: 0 12px; border-radius: 7px;
    background: #2A6FDB; color: #fff; border: none;
    font-family: 'Geist', system-ui, sans-serif;
    font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.seo2-expand .strategy-action-btn:hover,
.seo2-expand button[data-action="set-target"]:hover { background: #1D5BBE; }
/* Edit/close kleine icoon-knoppen */
.seo2-expand button[data-action="clear-target"],
.seo2-expand button[data-action="edit-target"] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border: 1px solid #E4E4E7; border-radius: 7px;
    background: #fff; color: #71717A; cursor: pointer; padding: 0;
}
.seo2-expand button[data-action="clear-target"]:hover,
.seo2-expand button[data-action="edit-target"]:hover { background: #FBFBFC; }

/* Doelpagina handmatig wijzigen knop */
.seo2-expand .target-manual-form-toggle {
    display: inline-flex; align-items: center; gap: 7px;
    height: 34px; padding: 0 13px;
    border: 1px solid #E4E4E7; border-radius: 8px;
    background: #fff; color: #2A6FDB;
    font-family: 'Geist', system-ui, sans-serif;
    font-size: 12.5px; font-weight: 600; cursor: pointer; margin-top: 12px;
}
.seo2-expand .target-manual-form-toggle:hover { background: #FBFBFC; }
.seo2-expand .target-manual-form-hint { color: #A1A1AA; font-weight: 400; }

/* Position history container — typografie aligneren met design */
.seo2-expand .seo-history-container {
    font-family: 'Geist', system-ui, sans-serif;
}
.seo2-expand .seo-history-container table {
    background: #fff;
    border: 1px solid #ECECEF;
    border-radius: 10px;
    border-collapse: collapse;
    width: 100%;
    overflow: hidden;
}
.seo2-expand .seo-history-container th,
.seo2-expand .seo-history-container td {
    padding: 10px 8px;
    text-align: center;
    font-size: 11.5px;
}
.seo2-expand .seo-history-container th {
    background: #FBFBFC;
    color: #A1A1AA; font-weight: 600;
    text-transform: lowercase;
    font-size: 10.5px; letter-spacing: .3px;
}
.seo2-expand .seo-history-container td {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    color: #52525B;
}
.seo2-expand .seo-history-container .pos-good { color: #15803D; font-weight: 600; }
.seo2-expand .seo-history-container .pos-ok   { color: #B45309; font-weight: 600; }
.seo2-expand .seo-history-container .pos-low  { color: #DC2626; font-weight: 600; }
.seo2-expand .seo-history-container th:first-child,
.seo2-expand .seo-history-container td:first-child {
    text-align: left; padding-left: 14px;
    color: #52525B; font-family: 'Geist', system-ui, sans-serif;
    font-weight: 500;
}

/* Section titles in expand */
.seo2-expand .seo-detail-section { background: transparent; padding: 0; }
.seo2-expand .seo-detail-section + .seo-detail-section { margin-top: 18px; }
.seo2-expand .seo-detail-section-title {
    font-family: 'Geist', system-ui, sans-serif;
    font-size: 12px; font-weight: 600; color: #18181B;
    letter-spacing: .3px; text-transform: uppercase; margin-bottom: 8px;
    display: flex; align-items: center; gap: 6px;
}

/* ═══════════════════════════════════════════════════════════════
   AI Shimmer — Microsoft Copilot stijl gradient-orbs
   Voor content-pipeline running-state. Drie zacht-bewegende blobs
   met roze/cyaan gradient + grote blur. Pure CSS, geen lib.
   ═══════════════════════════════════════════════════════════════ */

.ai-shimmer {
    position: relative;
    width: 320px;
    height: 320px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-shimmer__blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(36px);
    opacity: 0.7;
    will-change: transform;
}

.ai-shimmer__blob--pink {
    width: 180px; height: 180px;
    background: radial-gradient(circle, #ec4899 0%, rgba(236, 72, 153, 0.5) 35%, transparent 70%);
    top: 20%; left: 20%;
    animation: ai-shimmer-orbit-1 7s ease-in-out infinite;
}

.ai-shimmer__blob--cyan {
    width: 200px; height: 200px;
    background: radial-gradient(circle, #06b6d4 0%, rgba(6, 182, 212, 0.45) 35%, transparent 70%);
    top: 25%; right: 15%;
    animation: ai-shimmer-orbit-2 9s ease-in-out infinite;
}

.ai-shimmer__blob--magenta {
    width: 160px; height: 160px;
    background: radial-gradient(circle, #d946ef 0%, rgba(217, 70, 239, 0.4) 35%, transparent 70%);
    bottom: 15%; left: 35%;
    animation: ai-shimmer-orbit-3 8s ease-in-out infinite;
}

.ai-shimmer__core {
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 16px 28px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.ai-shimmer__label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.7px;
    color: var(--pa-text-meta, #A1A1AA);
    text-transform: uppercase;
    margin-bottom: 6px;
}

.ai-shimmer__step {
    font-size: 22px;
    font-weight: 600;
    color: var(--pa-text-value, #18181B);
    letter-spacing: -0.3px;
    /* Subtiele shimmer over de tekst zelf — sweept van links naar rechts */
    background: linear-gradient(90deg, #18181B 0%, #18181B 40%, #ec4899 50%, #18181B 60%, #18181B 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: ai-shimmer-text 3s linear infinite;
}

@keyframes ai-shimmer-orbit-1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(50px, 30px) scale(1.15); }
    66%      { transform: translate(20px, 60px) scale(0.95); }
}

@keyframes ai-shimmer-orbit-2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(-40px, 50px) scale(0.9); }
    66%      { transform: translate(-60px, 10px) scale(1.2); }
}

@keyframes ai-shimmer-orbit-3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(30px, -40px) scale(1.1); }
    66%      { transform: translate(-30px, -50px) scale(0.85); }
}

@keyframes ai-shimmer-text {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Reduced motion: stop alle animaties */
@media (prefers-reduced-motion: reduce) {
    .ai-shimmer__blob,
    .ai-shimmer__step {
        animation: none;
    }
    .ai-shimmer__step {
        -webkit-text-fill-color: var(--pa-text-value, #18181B);
    }
}

/* ─────────────────────────────────────────────────────────────
   CONTENT RUNS TABLE — strakke lijst-look met blauwe kop-balk,
   consistent met de commercieel-tabel op de Cogoo-tab.
   ───────────────────────────────────────────────────────────── */
/* Blauwe kop-balk boven de groepen (losstaand). */
.content-runs-header {
    margin-top: 14px;
    margin-bottom: 12px;
}
.content-runs-header .pa-data-table__head {
    background: var(--accent, #2A6FDB);
    color: #fff;
    border-radius: 8px;
    padding: 10px 16px;
    border: none;
    gap: 16px;
}
.content-runs-group .pa-data-table__row { gap: 16px; }
.content-runs-header .pa-data-table__head-cell {
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: transparent;
    padding: 0;
    border: none;
}

/* Elk pillar-cluster is een eigen witte kaart met ruimte ertussen. */
.content-runs-group {
    background: #fff;
    border: 1px solid var(--pa-border-card, #E4E4E7);
    border-radius: 10px;
    margin-bottom: 10px;
    overflow: hidden;
}
.content-runs-group .pa-data-table__row {
    padding: 12px 16px;
    border-bottom: 1px solid var(--pa-border-row, #F1F1F3);
    border-radius: 0;
    background: transparent;
}
.content-runs-group .pa-data-table__row:last-child { border-bottom: none; }
.content-runs-group .pa-data-table__row.is-pillar {
    background: #FFFBEB;
}
.content-runs-status-cell {
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}
/* Sublabel onder de status-pill: laatste event van de run. Alleen zichtbaar
   voor running / strategisch_fout zodat het niet de goedgekeurde rijen verpest. */
.content-runs-last-event {
    font-size: 11px;
    color: var(--pa-text-meta);
    line-height: 1.3;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.content-runs-row {
    cursor: pointer;
    transition: background 0.12s ease;
}
.content-runs-row:hover {
    background: #FAFAFB;
}
.content-runs-row.is-child .content-runs-cell-keyword {
    padding-left: 24px;
}
.content-runs-cell-keyword {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.content-runs-child-arrow {
    color: var(--pa-text-meta);
    font-size: 13px;
    line-height: 1;
}
.content-runs-keyword {
    font-weight: 600;
    color: var(--pa-text-value);
    font-size: 13.5px;
    letter-spacing: -0.01em;
}
.content-runs-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1.4;
}
.content-runs-badge--pillar {
    background: #FEF3C7;
    color: #92400E;
}
.content-runs-cost {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 11.5px;
    color: var(--pa-text-meta);
    background: #F4F4F5;
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 500;
}
.content-runs-meta {
    flex-basis: 100%;
    color: var(--pa-text-meta);
    font-size: 11.5px;
    margin-top: 2px;
}
.content-runs-cell-muted {
    font-size: 12.5px;
    color: var(--pa-text-label);
}
.content-runs-cell-upper {
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-size: 11px;
    font-weight: 500;
}
.content-runs-score {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-weight: 600;
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
}
.content-runs-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.2px;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─────────────────────────────────────────────────────────────
   FUNNEL YEAR VIEW — per revenue-mode een groep met per funnel
   een maand-tabel.
   ───────────────────────────────────────────────────────────── */
.funnel-year-group { margin-top: 24px; }
.funnel-year-group-head {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #71717A;
    margin-bottom: 10px;
}
.funnel-year-group-body { display: flex; flex-direction: column; gap: 14px; }

.funnel-monthly-block {
    background: #fff;
    border: 1px solid #E8E8EC;
    border-radius: 12px;
    overflow: hidden;
}
.funnel-monthly-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    cursor: pointer;
    border-bottom: 1px solid #F1F1F3;
    background: #fff;
    transition: background 0.12s;
}
.funnel-monthly-head:hover { background: #FAFAFB; }
.funnel-monthly-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.funnel-monthly-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    line-height: 1.4;
}
.funnel-monthly-name {
    font-size: 15px;
    font-weight: 600;
    color: #18181B;
    letter-spacing: -0.01em;
}
.funnel-monthly-actions { display: inline-flex; gap: 6px; }
.funnel-monthly-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #71717A;
    cursor: pointer;
    padding: 0;
    transition: background 0.12s, color 0.12s;
}
.funnel-monthly-actions button:hover { background: #F4F4F5; color: #18181B; }
.funnel-monthly-actions button[disabled] { opacity: 0.35; cursor: not-allowed; }
.funnel-monthly-actions button[disabled]:hover { background: transparent; color: #71717A; }
.funnel-monthly-lock {
    display: inline-flex;
    align-items: center;
    color: #A1A1AA;
    font-size: 14px;
    margin-left: 4px;
}

/* Detail-view: bij bevroren funnel is de STRUCTUUR vergrendeld — verberg
   toevoegen, verwijderen en herordenen zodat de config van bevroren
   maanden intact blijft. Editen (naam, targets, KPI-instellingen) mag wel. */
/* Huidige periode bevroren: alles blokkeren. Buiten deze CSS-klasse mag
   alles: toevoegen, verwijderen, herordenen. Bevroren maand-snapshots
   bewaren hun eigen kopie van de data, dus live-config wijzigen (in een
   niet-bevroren periode) raakt de historische aggregaties niet. */
.funnel-detail-root.is-frozen [data-delete-step],
.funnel-detail-root.is-frozen [data-delete-lane],
.funnel-detail-root.is-frozen [data-add-step],
.funnel-detail-root.is-frozen [data-add-measurement],
.funnel-detail-root.is-frozen [data-reorder-step],
.funnel-detail-root.is-frozen [data-reorder-lane],
.funnel-detail-root.is-frozen #funnel-add-lane-btn,
.funnel-detail-root.is-frozen .btn-icon-danger { display: none !important; }

.funnel-frozen-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    margin-bottom: 16px;
    background: #FEF3C7;
    border: 1px solid #FDE68A;
    border-radius: 10px;
    color: #78350F;
    font-size: 13px;
    line-height: 1.5;
}
.funnel-frozen-banner .material-symbols-rounded { color: #B45309; flex-shrink: 0; margin-top: 1px; }
.funnel-frozen-banner strong { display: block; color: #78350F; font-weight: 600; margin-bottom: 2px; }
.funnel-monthly-empty {
    padding: 20px 24px;
    text-align: center;
    color: #A1A1AA;
    font-size: 13px;
}
.funnel-monthly-row { cursor: pointer; transition: background 0.12s; }
.funnel-monthly-row:hover { background: #FAFAFB; }

/* Mail-tab: Lijsten links, groei-grafiek rechts. */
.mail-lists-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    margin-top: 18px;
}
.mail-lists-split__lists,
.mail-lists-split__chart { min-width: 0; }
.mail-lists-split__chart > h2.pa-section-label,
.mail-lists-split__chart > .pa-section-label--row { margin-top: 0; }
@media (max-width: 1080px) {
    .mail-lists-split { grid-template-columns: 1fr; }
}
.funnel-monthly-chart-pt .funnel-monthly-chart-hit { cursor: crosshair; }
.funnel-monthly-chart-pt:hover circle:first-of-type {
    r: 4.5;
    stroke-width: 2;
    transition: r 0.12s ease, stroke-width 0.12s ease;
}
/* Twee losse cards naast elkaar: tabel + chart-block, elk eigen border. */
.funnel-monthly-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
}
.funnel-monthly-block--chart {
    display: flex;
    flex-direction: column;
}
.funnel-monthly-chart {
    flex: 1;
    padding: 18px 22px 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    background: #fff;
}
.funnel-monthly-chart-title {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #A1A1AA;
    margin: 0;
}
.funnel-monthly-chart svg { max-width: 100%; }
.funnel-monthly-chart-empty {
    padding: 20px 24px;
    text-align: center;
    color: #A1A1AA;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 1080px) {
    .funnel-monthly-split { grid-template-columns: 1fr; }
}
.funnel-monthly-table {
    border: none;
    border-radius: 0;
    margin: 0;
}
.funnel-monthly-table .pa-data-table__head {
    background: #FAFAFB;
    padding: 10px 20px;
}
.funnel-monthly-table .pa-data-table__row {
    padding: 10px 20px;
    border-bottom: 1px solid #F4F4F5;
}
.funnel-monthly-table .pa-data-table__row:last-child { border-bottom: none; }

/* ─────────────────────────────────────────────────────────────
   SOCIAL — Content Strategy & Planning module (Fase 1)
   Sub-tab in Instellingen: platform-profielen + growth-objectives.
   ───────────────────────────────────────────────────────────── */
.social-settings { display: flex; flex-direction: column; gap: 20px; padding: 4px 0 20px; }
.social-settings-intro {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 14px 18px;
}
.social-section {
    background: #fff;
    border: 1px solid var(--pa-border-card, #E4E4E7);
    border-radius: 12px;
    padding: 18px 22px;
}
.social-section-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.social-section-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #2C6C43;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.social-section-hint { font-size: 12px; color: var(--pa-text-meta); }

.social-platforms-grid { display: flex; flex-direction: column; gap: 10px; }
.social-platform-card {
    border: 1px solid #E4E4E7;
    border-radius: 10px;
    overflow: hidden;
}
.social-platform-card > summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    background: #FAFAFB;
}
.social-platform-card > summary::-webkit-details-marker { display: none; }
.social-platform-card[open] > summary { background: #F4F4F5; }
.social-platform-title {
    font-weight: 600;
    color: var(--pa-text-value);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}
.social-platform-status {
    font-size: 11.5px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    font-weight: 500;
}
.social-platform-status.is-configured { background: #ECFDF5; color: #047857; }
.social-platform-status.is-empty { background: #F4F4F5; color: #71717A; }

.social-platform-form { padding: 16px 18px 20px; }
.social-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 18px;
}
.social-form-grid > label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12.5px;
    color: var(--pa-text-label);
}
.social-form-grid > label > span { font-weight: 500; color: var(--pa-text-value); }
.social-form-hint { font-weight: 400; color: var(--pa-text-meta); font-size: 11.5px; }
.social-form-grid input,
.social-form-grid textarea {
    font-family: inherit;
    font-size: 13px;
    padding: 8px 10px;
    border: 1px solid #E4E4E7;
    border-radius: 6px;
    background: #fff;
    resize: vertical;
    line-height: 1.4;
}
.social-form-grid input:focus,
.social-form-grid textarea:focus {
    outline: 2px solid #DBEAFE;
    border-color: #93C5FD;
}
.social-form-full { grid-column: 1 / -1; }
.social-form-required { color: #DC2626; font-weight: 600; margin-left: 2px; }
.social-form-basic { padding-bottom: 4px; }

.social-purpose-block { margin-bottom: 18px; }
.social-purpose-block + .social-purpose-block { margin-top: -4px; }
.social-secondary-count {
    margin-left: auto;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--pa-text-meta);
    padding: 2px 8px;
    background: #F4F4F5;
    border-radius: 10px;
}
.social-chip.social-chip-radio > input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border: 1.5px solid #C7C7CD;
    border-radius: 50%;
    margin: 0;
    display: inline-block;
    position: relative;
    background: #fff;
    flex: 0 0 auto;
}
.social-chip-radio.is-checked > input[type="radio"] {
    background: #2A6FDB;
    border-color: #2A6FDB;
    box-shadow: inset 0 0 0 3px #fff;
}
.social-chip.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #F4F4F5;
}
.social-chip.is-disabled:hover { background: #F4F4F5; border-color: #E4E4E7; }

/* Doelstelling-modal — steps */
.social-objective-form { display: flex; flex-direction: column; gap: 18px; }
.social-objective-step { display: flex; flex-direction: column; gap: 8px; }
.social-objective-step-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--pa-text-value);
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.social-objective-inline {
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
}
.social-objective-inline > div { flex: 1 1 auto; min-width: 200px; }
.social-objective-numbers {
    flex-direction: row;
    align-items: end;
    gap: 12px;
}
.social-objective-numbers > label {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12.5px;
    color: var(--pa-text-label);
}
.social-objective-numbers > label > span {
    font-weight: 500;
    color: var(--pa-text-value);
}
.social-objective-arrow {
    color: #A1A1AA;
    padding-bottom: 10px;
}
.social-objective-budget {
    max-width: 220px;
}
.social-objective-budget label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12.5px;
    color: var(--pa-text-label);
}
.social-objective-budget label > span {
    font-weight: 500;
    color: var(--pa-text-value);
}
.social-deadline-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.social-deadline-row input[type="date"] { max-width: 220px; }
.social-deadline-quicks { display: flex; gap: 6px; }
.social-quick-btn {
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid #E4E4E7;
    background: #fff;
    font-size: 12px;
    color: #52525B;
    cursor: pointer;
    transition: background .1s, border-color .1s;
}
.social-quick-btn:hover {
    background: #F4F4F5;
    border-color: #C7C7CD;
    color: #18181B;
}

/* Growth-Strategy (Fase 2) */
.social-strategy-empty {
    background: #FAFAFB;
    border: 1px dashed #E4E4E7;
    border-radius: 10px;
    padding: 24px;
    text-align: center;
    color: var(--pa-text-label);
}
.social-strategy-empty-title {
    font-weight: 600;
    color: var(--pa-text-value);
    margin-bottom: 6px;
    font-size: 14px;
}
.social-strategy-empty p {
    margin: 0 0 14px;
    font-size: 13px;
    color: var(--pa-text-meta);
}
.social-strategy-loading {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 22px;
    background: #EFF6FF;
    border: 1px solid #93C5FD;
    border-radius: 10px;
    color: #1E3A8A;
}
.social-strategy-loading-title { font-weight: 600; font-size: 14px; }
.social-strategy-loading-sub { font-size: 12.5px; color: #4B5EAA; margin-top: 2px; }
.social-strategy-spinner {
    width: 22px;
    height: 22px;
    border: 2.5px solid #C6DBFF;
    border-top-color: #2A6FDB;
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
    flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

.social-strategy-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}
.social-strategy-month {
    font-size: 16px;
    font-weight: 600;
    color: var(--pa-text-value);
    text-transform: capitalize;
}
.social-strategy-meta { font-size: 11.5px; color: var(--pa-text-meta); margin-top: 2px; }
.social-strategy-overview {
    padding: 12px 14px;
    background: #F4F7FB;
    border-left: 3px solid #2A6FDB;
    border-radius: 6px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--pa-text-value);
    margin-bottom: 18px;
}
.social-strategy-block { margin-bottom: 18px; }
.social-strategy-block-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pa-text-label);
    margin-bottom: 10px;
}
.social-strategy-pillars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}
.social-pillar-card {
    background: #fff;
    border: 1px solid var(--pa-border-card);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 12.5px;
    line-height: 1.5;
}
.social-pillar-name { font-weight: 600; color: var(--pa-text-value); font-size: 13px; margin-bottom: 4px; }
.social-pillar-desc { color: var(--pa-text-label); margin-bottom: 6px; }
.social-pillar-why { color: var(--pa-text-meta); font-size: 12px; }
.social-pillar-why em { color: #52525B; font-style: normal; font-weight: 500; }

.social-strategy-platforms { display: flex; flex-direction: column; gap: 8px; }
.social-strategy-platform-card {
    border: 1px solid var(--pa-border-card);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}
.social-strategy-platform-card > summary {
    list-style: none;
    cursor: pointer;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    user-select: none;
}
.social-strategy-platform-card > summary::-webkit-details-marker { display: none; }
.social-strategy-platform-card[open] > summary { background: #FAFAFB; border-bottom: 1px solid var(--pa-border-card); }
.social-strategy-platform-title { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--pa-text-value); }
.social-strategy-rhythm {
    margin-left: auto;
    font-size: 11.5px;
    padding: 3px 8px;
    background: #F4F4F5;
    border-radius: 10px;
    color: var(--pa-text-label);
}
.social-strategy-platform-body {
    padding: 12px 14px 14px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--pa-text-value);
}
.social-strategy-platform-body p { margin: 0 0 8px; }
.social-strategy-platform-body strong { color: var(--pa-text-value); }
.social-strategy-focus-list { margin: 6px 0 8px; padding-left: 20px; font-size: 12.5px; }
.social-strategy-focus-list li { margin-bottom: 3px; }
.social-strategy-focus-pct { font-weight: 600; color: #2A6FDB; margin-left: 4px; }
.social-strategy-warnings {
    margin-top: 8px;
    padding: 8px 10px;
    background: #FFF7ED;
    border: 1px solid #FED7AA;
    border-radius: 6px;
    color: #9A3412;
    font-size: 12.5px;
}
.social-strategy-warnings ul { margin: 4px 0 0; padding-left: 18px; }
.social-strategy-risks { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.55; }
.social-strategy-risks li { margin-bottom: 4px; }
.social-strategy-measurement {
    font-size: 13px;
    line-height: 1.55;
    color: var(--pa-text-value);
    padding: 10px 12px;
    background: #FAFAFB;
    border-radius: 8px;
}

/* Planning-kalender (Fase 3) */
.planning-wrap { padding: 16px 20px; }
.planning-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.planning-weeknav { display: flex; align-items: center; gap: 6px; }
.planning-weeklabel {
    padding: 6px 12px;
    background: #FAFAFB;
    border: 1px solid var(--pa-border-card);
    border-radius: 8px;
    font-weight: 500;
    font-size: 13.5px;
    color: var(--pa-text-value);
    min-width: 200px;
    text-align: center;
}
.planning-actions { display: flex; gap: 8px; }

.planning-grid {
    display: grid;
    grid-template-columns: 140px repeat(7, minmax(140px, 1fr));
    gap: 1px;
    background: var(--pa-border-card);
    border: 1px solid var(--pa-border-card);
    border-radius: 10px;
    overflow: hidden;
    min-width: 1100px;
}
#planning-grid { overflow-x: auto; }
.planning-corner { background: #FAFAFB; }
.planning-daycol {
    background: #FAFAFB;
    padding: 10px 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.planning-daycol.is-today { background: #EFF6FF; color: #1E3A8A; }
.planning-dayname {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pa-text-meta);
}
.planning-daycol.is-today .planning-dayname { color: #1E3A8A; }
.planning-daydate {
    font-size: 18px;
    font-weight: 600;
    color: var(--pa-text-value);
}
.planning-daycol.is-today .planning-daydate { color: #1E3A8A; }
.planning-platformcell {
    background: #FAFAFB;
    padding: 12px 14px;
    display: flex;
    align-items: center;
}
.planning-platformlabel {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    font-size: 12.5px;
    color: var(--pa-text-value);
}
.planning-cell {
    background: #fff;
    padding: 6px;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: relative;
}
.planning-cell-add {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border: 1px dashed #C7C7CD;
    background: transparent;
    border-radius: 50%;
    color: #A1A1AA;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0;
    transition: opacity .12s;
}
.planning-cell:hover .planning-cell-add { opacity: 1; }
.planning-cell-add:hover { background: #F4F4F5; color: #52525B; border-style: solid; }

.post-tile {
    background: #fff;
    border: 1px solid #E4E4E7;
    border-left-width: 3px;
    border-radius: 6px;
    padding: 6px 8px;
    cursor: pointer;
    font-size: 11.5px;
    line-height: 1.35;
    transition: transform .1s, box-shadow .1s;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.post-tile:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.post-tile-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
}
.post-tile-time {
    font-weight: 600;
    color: var(--pa-text-value);
    font-family: var(--font-mono, monospace);
    font-size: 10.5px;
}
.post-tile-format {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 10.5px;
    color: var(--pa-text-meta);
}
.post-tile-hook {
    color: var(--pa-text-value);
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.post-tile-foot { display: flex; align-items: center; }
.post-tile-status {
    padding: 1.5px 6px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 500;
}

/* Post-modal */
.post-form { display: flex; flex-direction: column; gap: 12px; }
.post-form-row { display: flex; flex-direction: column; gap: 6px; }
.post-form-two {
    flex-direction: row;
    gap: 14px;
}
.post-form-two > div { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.post-form-label {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--pa-text-value);
}
.post-form-chips-compact .social-chip { padding: 5px 9px; font-size: 11.5px; }
.post-form-chips-compact .social-chip > input { display: none; }

/* Compacte post-modal */
.post-form-compact { gap: 10px; }
.post-form-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #F1F1F3;
    flex-wrap: wrap;
}
.post-form-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
}
.post-form-when {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--pa-text-label);
}
.post-form-when > label { font-weight: 500; color: var(--pa-text-value); }
.form-input-inline {
    height: 32px;
    padding: 0 8px;
    font-size: 12.5px;
    max-width: 200px;
}
.post-form-advanced { margin-top: 4px; }

/* Answerability score-card */
.answ-card {
    background: #fff;
    border: 1px solid var(--pa-border-card);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 18px;
}
.answ-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.answ-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--pa-text-value);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.answ-hint {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    font-size: 12px;
    color: var(--pa-text-meta);
    margin-left: 4px;
}
.answ-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}
.answ-timestamp { font-size: 11px; color: var(--pa-text-meta); }
.answ-empty {
    margin-top: 12px;
    padding: 14px 16px;
    background: #FAFAFB;
    border: 1px dashed #E4E4E7;
    border-radius: 8px;
    color: var(--pa-text-meta);
    font-size: 13px;
    line-height: 1.55;
}
.answ-body {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 18px;
    align-items: start;
}
.answ-score-badge {
    padding: 14px 16px;
    border-radius: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
}
.answ-score-num {
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    font-family: var(--font-mono, monospace);
}
.answ-score-label { font-size: 12.5px; font-weight: 600; }
.answ-score-mini  { font-size: 11px; opacity: 0.85; }
.answ-details {
    background: #FAFAFB;
    border: 1px solid var(--pa-border-card);
    border-radius: 10px;
    overflow: hidden;
}
.answ-details > summary {
    list-style: none;
    cursor: pointer;
    padding: 10px 14px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--pa-text-label);
    display: flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}
.answ-details > summary::-webkit-details-marker { display: none; }
.answ-details[open] > summary { border-bottom: 1px solid var(--pa-border-card); background: #fff; }
.answ-checks { display: flex; flex-direction: column; }
.answ-check {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid #F1F1F3;
    align-items: start;
}
.answ-check:last-child { border-bottom: none; }
.answ-check[data-passed="0"] { background: #FEFAF7; }
.answ-check-icon { padding-top: 1px; }
.answ-check-label {
    font-weight: 600;
    font-size: 13px;
    color: var(--pa-text-value);
    margin-bottom: 3px;
}
.answ-check-reason {
    font-size: 12.5px;
    color: var(--pa-text-label);
    line-height: 1.5;
    margin-bottom: 4px;
}
.answ-check-suggestion {
    font-size: 12px;
    color: #78350F;
    padding: 6px 10px;
    background: #FEF3C7;
    border-radius: 6px;
    line-height: 1.5;
}
.answ-check-suggestion strong { font-weight: 600; }
@media (max-width: 720px) {
    .answ-body { grid-template-columns: 1fr; }
}

/* Campagnes-balk */
.campaigns-bar {
    margin: 0 0 18px;
    background: #fff;
    border: 1px solid var(--pa-border-card);
    border-radius: 10px;
    padding: 14px 16px;
}
.campaigns-bar-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.campaigns-bar-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--pa-text-label);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.campaigns-empty {
    padding: 12px 14px;
    background: #FAFAFB;
    border: 1px dashed #E4E4E7;
    border-radius: 8px;
    color: var(--pa-text-meta);
    font-size: 13px;
    text-align: center;
}
.campaigns-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}
.campaign-chip {
    background: #fff;
    border: 1px solid var(--pa-border-card);
    border-left-width: 3px;
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    transition: transform .1s, box-shadow .1s;
}
.campaign-chip:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,0.06); }
.campaign-chip-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.campaign-chip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.campaign-chip-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--pa-text-value);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.campaign-chip-status {
    padding: 1.5px 7px;
    border-radius: 8px;
    font-size: 10.5px;
    font-weight: 500;
}
.campaign-chip-theme {
    font-size: 12px;
    color: var(--pa-text-label);
    line-height: 1.35;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.campaign-chip-period {
    font-size: 11px;
    color: var(--pa-text-meta);
    margin-top: 3px;
}
.campaign-chip.is-generating {
    background: linear-gradient(90deg, #EFF6FF, #fff, #EFF6FF);
    background-size: 200% 100%;
    animation: campaignChipShimmer 2s linear infinite;
    border-color: #93C5FD;
}
@keyframes campaignChipShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: 0 0; }
}
.campaign-chip-generating {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 500;
    color: #1E3A8A;
    padding: 1.5px 7px;
    background: #DBEAFE;
    border-radius: 8px;
}
.campaign-chip-spinner {
    width: 10px;
    height: 10px;
    border: 1.5px solid #C6DBFF;
    border-top-color: #2A6FDB;
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}
.campaign-chip-substatus {
    margin-top: 4px;
    font-size: 11px;
    color: #1E3A8A;
    font-style: italic;
}

.post-tile-campaign {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 4px;
    padding: 1.5px 6px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 500;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Suggest-wizard */
.campaign-suggest-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.campaign-suggest-card {
    background: #FAFAFB;
    border: 1px solid var(--pa-border-card);
    border-radius: 10px;
    padding: 14px 16px;
}
.campaign-suggest-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.campaign-suggest-name {
    font-weight: 600;
    font-size: 14.5px;
    color: var(--pa-text-value);
}
.campaign-suggest-theme {
    font-size: 13px;
    color: var(--pa-text-label);
    margin-bottom: 8px;
    font-style: italic;
}
.campaign-suggest-desc {
    font-size: 12.5px;
    color: var(--pa-text-value);
    line-height: 1.5;
    margin-bottom: 10px;
}
.campaign-suggest-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 11.5px;
    color: var(--pa-text-meta);
    margin-bottom: 8px;
}
.campaign-suggest-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.campaign-suggest-why {
    font-size: 12px;
    color: var(--pa-text-meta);
    padding-top: 6px;
    border-top: 1px solid #E4E4E7;
}
.campaign-suggest-why em { color: #52525B; font-style: normal; font-weight: 500; }

/* Kleur-picker */
.campaign-color-picker {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.campaign-color-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform .1s;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.campaign-color-swatch:hover { transform: scale(1.1); }
.campaign-color-swatch.is-checked {
    border-color: #18181B;
}
.campaign-color-swatch.is-checked::after {
    content: '';
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
}
.campaign-color-swatch > input { display: none; }
.social-purpose-label {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 13px;
    font-weight: 500;
    color: var(--pa-text-value);
    margin-bottom: 10px;
}
.social-purpose-label .social-form-hint { font-weight: 400; }
.social-purpose-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.social-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid #E4E4E7;
    background: #fff;
    font-size: 12.5px;
    color: #52525B;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
    user-select: none;
    line-height: 1.2;
}
.social-chip:hover { border-color: #C7C7CD; background: #FAFAFA; }
.social-chip > input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border: 1.5px solid #C7C7CD;
    border-radius: 4px;
    margin: 0;
    display: inline-block;
    position: relative;
    background: #fff;
    flex: 0 0 auto;
}
.social-chip.is-checked {
    background: #EFF6FF;
    border-color: #93C5FD;
    color: #1E3A8A;
    font-weight: 500;
}
.social-chip.is-checked > input[type="checkbox"] {
    background: #2A6FDB;
    border-color: #2A6FDB;
}
.social-chip.is-checked > input[type="checkbox"]::after {
    content: '';
    position: absolute;
    left: 3.5px;
    top: 0.5px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.social-purpose-legacy {
    margin-top: 8px;
    padding: 8px 10px;
    background: #FEF9C3;
    border: 1px solid #FDE68A;
    border-radius: 6px;
    color: #92400E;
    font-size: 12px;
    line-height: 1.4;
}

.social-form-advanced {
    margin-top: 16px;
    border: 1px dashed #E4E4E7;
    border-radius: 8px;
    background: #FAFAFA;
}
.social-form-advanced > summary {
    list-style: none;
    cursor: pointer;
    padding: 10px 14px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--pa-text-label);
    display: flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}
.social-form-advanced > summary::-webkit-details-marker { display: none; }
.social-form-advanced > summary::after {
    content: '›';
    margin-left: auto;
    font-size: 18px;
    color: #A1A1AA;
    transition: transform .15s ease;
}
.social-form-advanced[open] > summary::after { transform: rotate(90deg); }
.social-form-advanced > .social-form-grid {
    padding: 4px 14px 16px;
    border-top: 1px solid #F1F1F3;
}

.social-form-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #F1F1F3;
}
@media (max-width: 900px) {
    .social-form-grid { grid-template-columns: 1fr; }
}

.social-empty {
    padding: 24px;
    text-align: center;
    color: #A1A1AA;
    font-size: 13px;
}
.social-objectives-list { display: flex; flex-direction: column; gap: 10px; }
.social-objective-card {
    border: 1px solid #E4E4E7;
    border-radius: 10px;
    padding: 14px 18px;
}
.social-objective-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}
.social-objective-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--pa-text-value);
    margin-bottom: 4px;
}
.social-objective-meta {
    font-size: 12.5px;
    color: var(--pa-text-label);
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}
.social-objective-meta strong {
    font-family: var(--font-mono, ui-monospace, monospace);
    color: var(--pa-text-value);
    font-weight: 600;
}
.social-objective-dot { color: var(--pa-text-meta); }
.social-objective-platforms {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.social-objective-pill {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: 4px;
    background: #EEF2FF;
    color: #4338CA;
    font-size: 11px;
    font-weight: 500;
}
.social-objective-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.social-objective-status {
    display: inline-flex;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: capitalize;
}

/* Sitemap tab (fase 4) */
.sitemap-page { padding: 20px; }
.sitemap-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.sitemap-header h1 { margin: 0; font-size: 22px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.sitemap-header-actions { display: flex; gap: 8px; }

.sitemap-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.sitemap-kpi { background: #fff; border: 1px solid #E5E7EB; border-radius: 8px; padding: 14px 18px; }
.sitemap-kpi-label { font-size: 12px; color: #6B7280; margin-bottom: 4px; }
.sitemap-kpi-value { font-size: 22px; font-weight: 700; color: #18181B; }
.sitemap-kpi-sub { font-size: 11px; color: #9CA3AF; margin-top: 2px; }

.sitemap-controls { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }
.sitemap-search { flex: 1; min-width: 220px; }
.sitemap-filter { max-width: 200px; }
.sitemap-grouping { display: flex; gap: 4px; margin-left: auto; }

.sitemap-groups { display: flex; flex-direction: column; gap: 12px; }
.sitemap-group { }
.sitemap-group-head { font-size: 13px; font-weight: 700; color: #18181B; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.sitemap-group-body { display: flex; flex-direction: column; gap: 1px; }

/* Cluster-groep (Cogoo-pages): visueel ondergeschikt aan branded/losse pages */
.sitemap-group-cluster {
    opacity: 0.85;
    border-left: 3px solid #D1D5DB;
    padding-left: 10px;
    margin-top: 8px;
}
.sitemap-group-cluster .sitemap-group-head { color: #6B7280; font-weight: 600; }
.sitemap-group-loose .sitemap-group-head { color: #18181B; font-weight: 700; }

/* Losse pages: URL-hierarchie per hoofdsegment (bv. /werkwijze/, /projecten/) */
.sitemap-loose-group {
    margin-top: 4px;
    padding-top: 4px;
}
.sitemap-loose-group:first-child { padding-top: 0; margin-top: 0; }
.sitemap-loose-group-head {
    font-size: 11.5px; font-weight: 600; color: #52525B;
    display: flex; align-items: center; gap: 4px;
    margin: 6px 0 3px;
    font-family: 'Geist Mono', ui-monospace, monospace;
}
.sitemap-loose-group-body { display: flex; flex-direction: column; gap: 1px; }
.sitemap-loose-subseg { margin-top: 4px; }
.sitemap-loose-subseg:first-child { margin-top: 0; }
.sitemap-loose-subseg-head {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 10.5px; font-weight: 600; color: #71717A;
    padding: 3px 8px 2px;
    margin-top: 2px;
}

/* Row-layout in Cogoo-stijl: chips + URL bovenaan, klantvraag daaronder */
.sitemap-row {
    display: flex; flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    font-size: 12px;
    transition: background 120ms, border-color 120ms;
}
.sitemap-row:hover { background: #FAFAFA; border-color: #D4D4D8; }
.sitemap-row-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
}
.sitemap-row-chips {
    display: flex; align-items: center; gap: 6px;
    flex: 1; min-width: 0; flex-wrap: wrap;
}
.sitemap-row-path {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 13px; color: #18181B; text-decoration: none; font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 380px;
}
.sitemap-row-path:hover { color: #2563EB; text-decoration: underline; }
.sitemap-row-meta {
    display: flex; align-items: center; gap: 4px;
    flex-shrink: 0;
}

/* Chips in Cogoo-stijl: rounded pills met kleurcode per type */
.sitemap-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px; font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    flex-shrink: 0;
}
.sitemap-chip-aud {
    background: #FAF5FF; color: #6B21A8; border: 1px solid #E9D5FF;
}
.sitemap-chip-primary {
    background: #E8F5E8; color: #1E7A36; border: 1px solid #C8E6CB;
}

/* Klantvraag-box in Cogoo-stijl: lichtblauw voor gevuld, geel voor ontbrekend */
.sitemap-row-cqbox {
    display: flex; align-items: flex-start; gap: 6px;
    padding: 5px 9px;
    background: #F0F9FF;
    border: 1px solid #BAE6FD;
    border-radius: 5px;
    font-size: 11.5px; color: #075985; line-height: 1.4;
}
.sitemap-row-cqbox em { font-style: italic; color: #0C4A6E; }
.sitemap-row-cqbox.sitemap-row-cqbox-missing {
    background: #FFFBEB;
    border-color: #FDE68A;
    color: #78350F; font-weight: 500;
}
.sitemap-badge {
    font-size: 9.5px; padding: 1px 5px; border-radius: 3px; font-weight: 700;
    line-height: 1.4;
}
.sitemap-badge-findability { background: #EFF6FF; color: #1E40AF; border: 1px solid #BFDBFE; }
.sitemap-badge-branded { background: #FDF4FF; color: #86198F; border: 1px solid #F5D0FE; }
.sitemap-badge-funnel { background: #F3F4F6; color: #374151; border: 1px solid #D1D5DB; }
.sitemap-badge-cat { background: #FEF3C7; color: #92400E; border: 1px solid #FDE68A; }
.btn-icon-mini {
    background: transparent; border: 0; cursor: pointer;
    padding: 2px 4px; border-radius: 3px;
    color: #9CA3AF;
    display: flex; align-items: center;
}
.btn-icon-mini:hover { background: #F3F4F6; color: #4B5563; }

/* ============================================
   CMS-KOPPELING (Cogoo pillar-detail)
   Drag-drop mapping tussen Cogoo-outputvelden en Jugoo-CMS slots.
   Palette links (bron-chips), template rechts (drop-zones).
   ============================================ */
.tv2-cms-card { margin-top: var(--sp-4); }
.tv2-cms-details > summary { list-style: none; cursor: pointer; }
.tv2-cms-details > summary::-webkit-details-marker { display: none; }
.tv2-cms-summary {
    display: flex; align-items: center; gap: 12px;
    padding: 6px 0; user-select: none;
}
.tv2-cms-summary::before {
    content: '▸'; color: var(--pa-text-meta, #737373); font-size: 12px;
    transition: transform 0.12s;
    display: inline-block; width: 10px;
}
.tv2-cms-details[open] > .tv2-cms-summary::before { transform: rotate(90deg); }
.tv2-cms-title { font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.tv2-cms-sub { font-size: 12.5px; color: var(--pa-text-meta, #737373); flex: 1; }
.tv2-cms-badge {
    font-size: 11.5px; color: var(--pa-text-meta, #737373);
    background: var(--creme, #F5F0EB);
    padding: 2px 8px; border-radius: 12px;
    font-weight: 500;
}
.tv2-cms-body { padding-top: 12px; }
.tv2-cms-loading {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--pa-text-meta, #737373); font-size: 13px; padding: 8px 0;
}
.tv2-cms-empty {
    padding: 12px 14px;
    background: var(--creme, #F5F0EB);
    border-radius: 8px;
    color: var(--pa-text-label, #4A4A4A);
    font-size: 13px;
    line-height: 1.5;
}
.tv2-cms-empty-title {
    font-weight: 600; margin-bottom: 4px;
    display: inline-flex; align-items: center; gap: 6px;
}

.tv2-cms-picker {
    display: flex; align-items: end; gap: 12px; flex-wrap: wrap;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--divider-soft, #eee);
    margin-bottom: 12px;
}
.tv2-cms-label {
    display: flex; flex-direction: column; gap: 4px;
    font-size: 11.5px; color: var(--pa-text-meta, #737373);
    letter-spacing: 0.03em; text-transform: uppercase;
    min-width: 180px;
}
.tv2-cms-label > select {
    padding: 6px 10px; border-radius: 6px;
    border: 1px solid var(--border-subtle, #E8EAED);
    background: #fff; font-size: 13px;
    text-transform: none; letter-spacing: normal;
    color: var(--zwart, #000);
}
.tv2-cms-label > span { font-weight: 600; }

.tv2-cms-canvas-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 16px;
    align-items: start;
}
@media (max-width: 900px) {
    .tv2-cms-canvas-grid { grid-template-columns: 1fr; }
}
.tv2-cms-col-hd {
    font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--pa-text-meta, #737373);
    margin-bottom: 8px; padding: 0 2px;
    display: flex; align-items: center; gap: 8px;
}
.tv2-cms-hint {
    font-size: 11px; font-weight: 400; letter-spacing: normal;
    text-transform: none; color: var(--pa-text-meta, #737373);
    font-style: italic;
}

/* ── Palette (Cogoo-chips) ── */
.tv2-cms-palette-col {
    position: sticky; top: 12px;
    display: flex; flex-direction: column; gap: 12px;
}
.tv2-cms-palette-group {
    background: var(--wit, #fff);
    border: 1px solid var(--border-subtle, #E8EAED);
    border-radius: 8px; padding: 8px 10px;
}
.tv2-cms-palette-glbl {
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--pa-text-meta, #737373);
    margin-bottom: 6px;
}
.tv2-cms-palette-chips {
    display: flex; flex-direction: column; gap: 4px;
}
.tv2-cms-chip {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 8px;
    background: var(--creme, #F5F0EB);
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: grab;
    font-size: 12px;
    user-select: none;
    transition: background 0.1s, border-color 0.1s;
}
.tv2-cms-chip:hover { background: var(--creme-dark, #E8E0D8); border-color: var(--border-subtle, #E8EAED); }
.tv2-cms-chip:active { cursor: grabbing; }
.tv2-cms-chip-type {
    font-size: 9.5px; font-weight: 700;
    letter-spacing: 0.03em; text-transform: uppercase;
    color: var(--pa-text-meta, #737373);
    background: rgba(0,0,0,0.05);
    padding: 1px 5px; border-radius: 3px;
    flex-shrink: 0;
}
.tv2-cms-chip-lbl { flex: 1; color: var(--zwart, #000); }
.tv2-cms-chip-count {
    font-size: 10px; font-weight: 700;
    background: var(--groen, #7CB77B); color: #fff;
    padding: 1px 6px; border-radius: 10px;
    min-width: 16px; text-align: center;
}

/* ── Template (drop-zones) ── */
.tv2-cms-template-col {
    display: flex; flex-direction: column; gap: 12px;
}
.tv2-cms-region {
    background: var(--wit, #fff);
    border: 1px solid var(--border-subtle, #E8EAED);
    border-radius: 8px;
    padding: 10px 12px;
}
.tv2-cms-region-hd {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 8px;
    font-size: 12px; color: var(--pa-text-label, #4A4A4A);
}
.tv2-cms-region-count {
    font-size: 11px; color: var(--pa-text-meta, #737373);
    margin-left: auto;
}
.tv2-cms-slot {
    margin: 8px 0;
    padding: 8px 10px;
    background: var(--creme, #F5F0EB);
    border-radius: 6px;
}
.tv2-cms-slot.is-locked {
    background: transparent;
    border: 1px dashed var(--border-subtle, #E8EAED);
    opacity: 0.7;
}
.tv2-cms-slot-hd {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 6px; font-size: 12px;
}
.tv2-cms-slot-idx {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px; font-weight: 600;
    background: rgba(0,0,0,0.06);
    padding: 1px 6px; border-radius: 3px;
}
.tv2-cms-slot-note {
    font-size: 11px; color: var(--pa-text-meta, #737373);
    font-style: italic; margin-left: 6px;
}
.tv2-cms-slot-fields {
    display: flex; flex-direction: column; gap: 6px;
    padding-left: 4px;
}

.tv2-cms-fld {
    display: grid; grid-template-columns: 180px 1fr; gap: 8px;
    align-items: center;
    padding: 4px 0;
}
.tv2-cms-fld-lbl {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px;
}
.tv2-cms-fld-type {
    font-size: 9.5px; font-weight: 700;
    letter-spacing: 0.03em; text-transform: uppercase;
    color: var(--pa-text-meta, #737373);
    background: rgba(0,0,0,0.05);
    padding: 1px 5px; border-radius: 3px;
}
.tv2-cms-req {
    color: var(--rood, #D4633A);
    font-weight: 700;
}
.tv2-cms-dropzone {
    min-height: 30px;
    border: 1.5px dashed rgba(0,0,0,0.12);
    border-radius: 6px;
    padding: 4px 8px;
    background: rgba(255,255,255,0.7);
    display: flex; align-items: center;
    font-size: 12px;
    transition: border-color 0.1s, background 0.1s;
}
.tv2-cms-dropzone.is-over {
    border-color: var(--oranje, #E87C2A);
    background: rgba(232,124,42,0.08);
}
.tv2-cms-dropzone.is-filled {
    border-style: solid;
    border-color: transparent;
    background: transparent;
    padding: 0;
}
.tv2-cms-canvas.is-dragging .tv2-cms-dropzone:not(.is-filled) {
    border-color: var(--oranje, #E87C2A);
    background: rgba(232,124,42,0.03);
}
.tv2-cms-dropzone-hint {
    color: var(--pa-text-meta, #737373);
    font-style: italic; font-size: 11.5px;
}
.tv2-cms-mapped {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--groen, #7CB77B); color: #fff;
    padding: 3px 8px; border-radius: 6px;
    font-size: 12px; font-weight: 500;
}
.tv2-cms-mapped-lbl { white-space: nowrap; }
.tv2-cms-mapped-x {
    background: rgba(255,255,255,0.25);
    border: 0; color: #fff; cursor: pointer;
    border-radius: 3px; padding: 1px 2px;
    display: inline-flex; align-items: center;
}
.tv2-cms-mapped-x:hover { background: rgba(255,255,255,0.4); }

/* ============================================
   CMS-PUBLICATIE tab op content-run detail.
   Iframe met demo-pagina links, fillable velden mét demo-waardes
   rechts, plus sticky palette met Cogoo-chips voor drag-drop.
   ============================================ */
.cms-pub-hdr {
    padding: 16px 20px;
    background: #fff;
    border: 1px solid var(--pa-border-card);
    border-radius: 12px;
    margin-bottom: 14px;
}
.cms-pub-title {
    font-size: 15px; font-weight: 600;
    color: var(--pa-text-value);
    display: inline-flex; align-items: center; gap: 8px;
}
.cms-pub-sub {
    font-size: 12.5px; color: var(--pa-text-label);
    line-height: 1.55; margin-top: 4px;
}
.cms-pub-config {
    display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid var(--pa-border-card);
    border-radius: 12px;
    margin-bottom: 8px;
}
/* Info-badge onder de config-strip: 'Gedetecteerd: module X · template Y'.
   Toont dat de backend zelf de module+template heeft afgeleid uit de URL. */
.cms-pub-detected {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    background: #DCFCE7;
    border: 1px solid #86EFAC;
    border-radius: 999px;
    color: #166534;
    font-size: 12px;
    margin-bottom: 14px;
}
.cms-pub-field {
    display: flex; flex-direction: column; gap: 4px;
    font-size: 11px; color: var(--pa-text-meta);
    text-transform: uppercase; letter-spacing: 0.03em;
    min-width: 160px;
}
.cms-pub-field > span { font-weight: 600; }
.cms-pub-field-url { flex: 1; min-width: 260px; }
.cms-pub-field > select,
.cms-pub-field > input {
    padding: 7px 10px;
    border-radius: 6px;
    border: 1px solid var(--pa-border-card);
    background: #fff;
    font-size: 13px;
    letter-spacing: normal;
    text-transform: none;
    font-family: inherit;
    color: var(--pa-text-value);
    width: 100%;
}
.cms-pub-field > input { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; }

.cms-pub-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    /* stretch, geen start: de tekst links loopt door tot onderaan de template
       rechts. Met 'start' hield de linkerkolom op waar de tekst ophield en stond
       er een halve pagina wit naast een sjabloon dat wel doorliep. */
    align-items: stretch;
}
@media (max-width: 1100px) {
    .cms-pub-split { grid-template-columns: 1fr; }
}

/* Iframe kolom */
.cms-pub-preview {
    display: flex; flex-direction: column;
    background: #fff;
    border: 1px solid var(--pa-border-card);
    border-radius: 12px;
    overflow: hidden;
    /* Houd de eigen hoogte: de template rendert op 1440x900 en wordt geschaald.
       Meerekken met de tekstkolom ernaast rekt het venster van de klantsite op en
       dan klopt zijn layout niet meer.

       En blijf staan terwijl je links door de tekst scrolt. Anders scrolt het
       sjabloon uit beeld precies op het moment dat je een blok naar rechts wilt
       slepen -- dan sleep je naar iets wat er niet meer is. */
    align-self: start;
    position: sticky;
    top: var(--sp-3, 12px);
}
.cms-pub-preview-hd {
    padding: 10px 14px;
    font-size: 12px; font-weight: 600;
    color: var(--pa-text-label);
    background: #FAFAFB;
    border-bottom: 1px solid var(--pa-border-card);
    display: flex; align-items: center; gap: 6px;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.cms-pub-iframe-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #fff;
    flex: 1;
    min-height: 320px;
}
.cms-pub-iframe {
    display: block;
    border: 0;
    background: #fff;
    /* width/height/transform worden dynamisch gezet door wireCmsPubSection
       zodat de site z'n desktop-layout rendert (physical 1440x900) en
       CSS transform 'm terugschaalt naar de container-breedte. */
}

/* Fields kolom */
.cms-pub-fields { display: flex; flex-direction: column; gap: 10px; }

/* Final-kolom (links): draggable blokken uit de gerenderde Final. */
.cms-pub-final {
    display: flex; flex-direction: column;
    background: #fff;
    border: 1px solid var(--pa-border-card);
    border-radius: 12px;
    overflow: hidden;
    /* Geen vaste hoogte meer: de kolom volgt de template ernaast. */
    min-height: 0;
}
.cms-pub-split-hd {
    padding: 10px 14px;
    font-size: 12px; font-weight: 600;
    color: var(--pa-text-label);
    background: #FAFAFB;
    border-bottom: 1px solid var(--pa-border-card);
    display: flex; align-items: center; gap: 6px;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.cms-pub-final-body {
    padding: 20px 24px;
    /* De tekst scrolt binnen de kolom; flex:1 met min-height:0 laat hem de
       resterende hoogte pakken in plaats van de kolom op te rekken. */
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto;
    line-height: 1.55;
    font-size: 14px;
    color: var(--pa-text-value);
}
.cms-pub-final-body h1 { font-size: 22px; margin: 12px 0 8px; font-weight: 700; }
.cms-pub-final-body h2 { font-size: 17px; margin: 20px 0 8px; font-weight: 600; }
.cms-pub-final-body h3 { font-size: 15px; margin: 16px 0 6px; font-weight: 600; }
.cms-pub-final-body p  { margin: 8px 0; }
/* Links in de blokken zijn niet klikbaar -- het adres staat als tooltip. Dus geen
   handje, dat belooft een klik die niets doet. */
.cms-pub-final-body a[href] { cursor: default; }
.cms-pub-final-body ul,
.cms-pub-final-body ol { margin: 8px 0 8px 20px; }
.cms-pub-final-body a  { color: var(--oranje, #E87C2A); text-decoration: underline; }

/* Sectie-kaarten: zelfde witte-kaart-look als .final-section op de
   Final-tab. Elke sectie (gesplit op `---` in de Final) is de eenheid
   die je grijpt en naar rechts sleept. */
.cms-pub-final-section {
    position: relative;
    background: #fff;
    border: 1px solid var(--pa-border-card);
    border-radius: 12px;
    padding: 20px 26px;
    margin-bottom: 14px;
    transition: border-color .1s, box-shadow .1s;
}
.cms-pub-final-section::before {
    content: '';
    position: absolute;
    top: 10px; left: -1px;
    bottom: 10px; width: 3px;
    background: transparent;
    border-radius: 0 3px 3px 0;
    transition: background .1s;
}
.cms-pub-final-block:hover.cms-pub-final-section {
    border-color: var(--oranje, #E87C2A);
    box-shadow: 0 6px 20px rgba(0,0,0,.06);
}
.cms-pub-final-block:hover.cms-pub-final-section::before {
    background: var(--oranje, #E87C2A);
}
/* Sectie al ergens rechts geplaatst: groene bar + checkmark-badge
   zodat de user in één oogopslag ziet welke blokken al gebruikt zijn. */
.cms-pub-final-section.is-placed {
    border-color: var(--groen, #7CB77B);
    background: rgba(124, 183, 123, 0.04);
}
.cms-pub-final-section.is-placed::before {
    background: var(--groen, #7CB77B);
}
.cms-pub-final-section.is-placed::after {
    content: '✓ Geplaatst';
    position: absolute;
    top: 10px; right: 12px;
    padding: 2px 8px;
    background: var(--groen, #7CB77B);
    color: #fff;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    pointer-events: none;
}
.cms-pub-final-block:hover.cms-pub-final-section.is-placed::before {
    background: var(--oranje, #E87C2A);
}

/* Als veld gekoppeld in plaats van gesleept: de H1, de belofte, de titel. Die
   gaan wel mee bij publiceren, maar er is niets naar rechts gesleept -- het CMS
   haalt de waarde zelf op. Blauw, want het is een andere soort koppeling. */
.cms-pub-final-section.is-veld {
    border-color: #93C5FD;
    background: rgba(147, 197, 253, 0.06);
}
.cms-pub-final-section.is-veld::before { background: #3B82F6; }
.cms-pub-final-section.is-veld::after {
    content: '✓ Als veld';
    position: absolute;
    top: 10px; right: 12px;
    padding: 2px 8px;
    background: #3B82F6;
    color: #fff;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    pointer-events: none;
}
.cms-pub-final-block:hover.cms-pub-final-section.is-veld::before {
    background: var(--oranje, #E87C2A);
}
/* Legacy alias — bestond in eerdere iteratie */
.cms-pub-final-group {
    background: #fff;
    border: 1px solid var(--pa-border-card);
    border-radius: 12px;
    padding: 20px 26px;
    margin-bottom: 14px;
}
.cms-pub-final-block {
    cursor: grab;
    user-select: none;
}
.cms-pub-final-block:hover {
    background: rgba(232, 124, 42, 0.06);
    border-color: rgba(232, 124, 42, 0.35);
    box-shadow: inset 3px 0 0 var(--oranje, #E87C2A);
}
.cms-pub-final-block:active { cursor: grabbing; }
.cms-pub-final-block > *:first-child { margin-top: 0; }
.cms-pub-final-block > *:last-child  { margin-bottom: 0; }

/* Copy-knop rechtsboven in elk source-blok. Alternatief voor drag/drop:
   klik = HTML naar clipboard; user plakt in dropzone rechts (Cmd+V). */
.cms-pub-final-block { position: relative; }
.cms-pub-copy-btn {
    position: absolute;
    top: 6px; right: 6px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 4px 6px;
    color: #4b5563;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    opacity: 0;
    transition: opacity .15s, background .15s, color .15s;
    z-index: 3;
}
.cms-pub-final-block:hover .cms-pub-copy-btn { opacity: 1; }
.cms-pub-copy-btn:hover {
    background: #E87C2A;
    color: #fff;
    border-color: #E87C2A;
}
.cms-pub-copy-btn.is-copied {
    background: #15803D !important;
    color: #fff !important;
    border-color: #15803D !important;
    opacity: 1 !important;
}

/* Meta-footer: auto-meegezonden velden */
.cms-pub-meta-footer {
    margin-top: 14px;
    padding: 12px 16px;
    background: #FAFAFB;
    border: 1px solid var(--pa-border-card);
    border-radius: 10px;
}
.cms-pub-meta-hd {
    font-size: 11px; font-weight: 600;
    color: var(--pa-text-meta);
    text-transform: uppercase; letter-spacing: 0.04em;
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 8px;
}
.cms-pub-meta-list {
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: 140px 1fr; gap: 4px 12px;
}
.cms-pub-meta-list li {
    display: contents;
    font-size: 12.5px;
}
.cms-pub-meta-k { font-weight: 600; color: var(--pa-text-label); }
.cms-pub-meta-v { color: var(--pa-text-value); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Blok-view: sleepbare cards met echte content uit de Final. */
.cms-pub-blocks-hd {
    font-size: 11px; font-weight: 600;
    color: var(--pa-text-meta);
    text-transform: uppercase; letter-spacing: 0.04em;
    padding: 4px 2px 8px;
    display: flex; align-items: center; gap: 6px;
}
.cms-pub-blocks {
    display: flex; flex-direction: column; gap: 8px;
}
.cms-pub-block {
    display: block; padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--pa-border-card);
    border-radius: 10px;
    cursor: grab;
    transition: border-color .1s, box-shadow .1s, transform .1s;
    user-select: none;
}
.cms-pub-block:hover { border-color: var(--oranje, #E87C2A); box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.cms-pub-block:active { cursor: grabbing; transform: scale(0.99); }
.cms-pub-block.is-empty { opacity: 0.5; cursor: not-allowed; }
.cms-pub-block.is-empty:hover { border-color: var(--pa-border-card); box-shadow: none; }
.cms-pub-block-hd {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 4px;
}
.cms-pub-block-lbl {
    font-size: 12px; font-weight: 600;
    color: var(--pa-text-value);
}
.cms-pub-block-type {
    font-size: 9px; font-weight: 700;
    padding: 1px 5px; border-radius: 3px;
    background: var(--creme-dark, #E8E0D8); color: var(--pa-text-meta);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.cms-pub-block-count {
    font-size: 10px; font-weight: 700;
    background: var(--groen, #7CB77B); color: #fff;
    padding: 1px 6px; border-radius: 10px;
    min-width: 16px; text-align: center;
    margin-left: auto;
}
.cms-pub-block-preview {
    font-size: 11.5px; line-height: 1.5;
    color: var(--pa-text-label);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cms-pub-block-empty {
    font-size: 11.5px; font-style: italic;
    color: var(--pa-text-meta);
}
.cms-pub-rows-fallback {
    margin-top: 12px;
    border-top: 1px solid var(--pa-border-card);
    padding-top: 10px;
}
.cms-pub-rows-fallback > summary {
    cursor: pointer; padding: 4px 2px;
    font-size: 11px; font-weight: 600;
    color: var(--pa-text-meta);
    text-transform: uppercase; letter-spacing: 0.04em;
    display: flex; align-items: center; gap: 6px;
    list-style: none;
}
.cms-pub-rows-fallback > summary::-webkit-details-marker { display: none; }
.cms-pub-rows-fallback[open] > summary { margin-bottom: 8px; }
.cms-pub-palette-sticky {
    position: sticky; top: 12px; z-index: 2;
    background: #fff;
    border: 1px solid var(--pa-border-card);
    border-radius: 12px;
    padding: 10px 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}
.cms-pub-palette-hd {
    font-size: 11px; font-weight: 600;
    color: var(--pa-text-meta);
    text-transform: uppercase; letter-spacing: 0.04em;
    margin-bottom: 6px;
    display: flex; align-items: center; gap: 4px;
}
.cms-pub-palette-chips {
    display: flex; flex-wrap: wrap; gap: 5px;
}
.cms-pub-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 9px;
    background: var(--creme, #F5F0EB);
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: grab;
    font-size: 12px;
    user-select: none;
    transition: background 0.1s, border-color 0.1s;
}
.cms-pub-chip:hover { background: var(--creme-dark, #E8E0D8); border-color: var(--pa-border-card); }
.cms-pub-chip:active { cursor: grabbing; }
.cms-pub-chip-lbl { color: var(--pa-text-value); }
.cms-pub-chip-count {
    font-size: 10px; font-weight: 700;
    background: var(--groen, #7CB77B); color: #fff;
    padding: 1px 6px; border-radius: 10px;
    min-width: 16px; text-align: center;
}

.cms-pub-rows {
    display: flex; flex-direction: column; gap: 6px;
}
.cms-pub-row {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 10px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--pa-border-card);
    border-radius: 10px;
    align-items: start;
}
.cms-pub-row-nm {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px;
}
.cms-pub-row-nm code {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    background: var(--creme, #F5F0EB);
    padding: 1px 6px; border-radius: 3px;
    color: var(--pa-text-value);
}
.cms-pub-row-type {
    font-size: 9.5px; font-weight: 700;
    letter-spacing: 0.03em; text-transform: uppercase;
    color: var(--pa-text-meta);
    border: 1px solid var(--pa-border-card);
    padding: 0 5px; border-radius: 3px;
}
.cms-pub-row-ctx {
    font-size: 11px; color: var(--pa-text-meta);
    margin-top: 2px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.cms-pub-row-val {
    font-size: 12.5px;
    color: var(--pa-text-value);
    line-height: 1.5;
    margin-top: 6px;
    padding: 6px 10px;
    background: #FAFAFB;
    border-left: 3px solid var(--pa-border-card);
    border-radius: 0 6px 6px 0;
    max-height: 96px; overflow: auto;
    white-space: pre-wrap; word-break: break-word;
}
.cms-pub-nodemo { color: var(--pa-text-meta); }
.cms-pub-req { color: var(--rood, #D4633A); font-weight: 700; }

.cms-pub-drop {
    min-height: 40px;
    border: 1.5px dashed rgba(0,0,0,0.12);
    border-radius: 8px;
    padding: 6px 10px;
    background: rgba(255,255,255,0.7);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    transition: border-color 0.1s, background 0.1s;
    align-self: center;
}
.cms-pub-drop.is-over {
    border-color: var(--oranje, #E87C2A);
    background: rgba(232,124,42,0.08);
}
.cms-pub-drop.is-filled {
    border-style: solid;
    border-color: transparent;
    background: transparent;
    padding: 0;
}
.cms-pub-split.is-dragging .cms-pub-drop:not(.is-filled) {
    border-color: var(--oranje, #E87C2A);
    background: rgba(232,124,42,0.03);
}
.cms-pub-drop-hint {
    color: var(--pa-text-meta);
    font-style: italic; font-size: 11.5px;
}
.cms-pub-mapped {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--groen, #7CB77B); color: #fff;
    padding: 4px 10px; border-radius: 8px;
    font-size: 12.5px; font-weight: 500;
}
.cms-pub-mapped-x {
    background: rgba(255,255,255,0.25);
    border: 0; color: #fff; cursor: pointer;
    border-radius: 3px; padding: 1px 2px;
    display: inline-flex; align-items: center;
}
.cms-pub-mapped-x:hover { background: rgba(255,255,255,0.4); }
.cms-pub-empty {
    padding: 20px;
    background: #FAFAFB;
    border: 1px dashed var(--pa-border-card);
    border-radius: 10px;
    color: var(--pa-text-meta);
    font-size: 13px;
    text-align: center;
}

/* ── Merkprofiel (Instellingen) ───────────────────────────────────────────
   Leunt op de opmaak van de autoriteitssignalen ernaast: zelfde kaart, zelfde
   raster. Verschil is dat dit scherm toont in plaats van laat invullen — het
   profiel wordt afgeleid, niet getypt. */
.mp-inhoud {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--text-default);
}
.mp-inhoud p { margin: 0; }

.mp-lijst {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mp-lijst li {
    padding: 5px 0 5px 14px;
    position: relative;
    border-bottom: 1px solid var(--pa-border-row);
}
.mp-lijst li:last-child { border-bottom: 0; }
.mp-lijst li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    width: 6px;
    height: 1px;
    background: var(--pa-text-meta);
}

/* Suggesties staan bovenaan en niet tussen de velden: het zijn geen eigenschappen
   van het merk maar een lijstje voor een mens. */
.mp-suggesties {
    margin: 0 var(--sp-4) var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    background: var(--geel-light);
    border: 1px solid var(--geel);
    border-radius: var(--radius);
}
.mp-suggesties__kop {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    flex-wrap: wrap;
    font-weight: var(--fw-semi);
    font-size: 0.875rem;
    margin-bottom: var(--sp-2);
}

/* Accentbalk als tabelkop.
   Dezelfde vorm als .rap-table thead th en .tv2-table-header — die drie doen
   hetzelfde en zouden op termijn één class moeten zijn. Losgetrokken omdat
   .rap-table vaste kolombreedtes voor een specifiek rapport meebrengt. */
.tabel-kop-accent thead th {
    background: var(--accent);
    color: var(--text-inverse);
    text-align: left;
    padding: var(--sp-2) var(--sp-3);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
/* Afgeronde hoeken werken niet bij border-collapse: collapse — de randen van de
   cellen vallen dan samen en een radius op een th is onzichtbaar. Vandaar
   separate; wie deze class gebruikt krijgt de afronding er meteen bij. */
.tabel-kop-accent { border-collapse: separate; border-spacing: 0; }
.tabel-kop-accent thead th:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.tabel-kop-accent thead th:last-child  { border-radius: 0 var(--radius) var(--radius) 0; }

/* ── Pillar-opbouw ────────────────────────────────────────────────────────
   Stappen onder elkaar en geen wizard: je moet kunnen terugkijken naar de
   onderbouwing terwijl je de structuur beoordeelt. */
/* Elke stap een eigen kader: het zijn vier losse beslissingen met elk een eigen
   knop. Stonden eerst onder elkaar in één kaart met een streepje ertussen, en
   dan lees je het als één lang formulier. */
.pb-stap {
    background: var(--surface);
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius);
    padding: var(--sp-4);
    margin-bottom: var(--sp-3);
}

/* Zelfde grootte als een section-heading h2 elders in het dashboard. Stond
   zonder font-size, dus op de body-grootte — daardoor las een stapkop als
   gewone tekst in plaats van als kop.

   Het genummerde bolletje blijft: dit is een vaste volgorde van vier stappen en
   dan zegt een nummer iets waars. Elders in het dash staat een icoon, want daar
   is de volgorde niet het punt. */
.pb-stap__kop {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 1.1rem;
    font-weight: var(--fw-semi);
    margin-bottom: var(--sp-3);
}
/* De knop die de hele stap wegzet, hoort rechts in de kop -- niet tegen de titel
   aan, want dan leest hij als onderdeel van die titel. Even hoog als de knop
   Instellingen bovenaan het scherm (30px): als btn-sm kreeg hij 40px mee en
   dan drukt hij de kopregel uit elkaar. */
.pb-stap__actie {
    margin-left: auto;
    height: 30px;
    padding: 0 12px;
    font-size: 13px;
}

.pb-stap__nr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 0.75rem;
    font-weight: var(--fw-semi);
    flex-shrink: 0;
}

.pb-keuze {
    background: var(--surface-subtle);
    border: 1px solid var(--pa-border-card);
    border-radius: var(--radius);
    padding: var(--sp-4);
}
/* Het gekozen hoofdzoekwoord in de gewone huisletter.
   Stond in mono, en dat is in dit dashboard de letter voor URL's, code en
   invoervelden — niet voor inhoud. Een zoekwoord is inhoud; .kw-text elders
   heeft dan ook geen eigen lettertype. */
.pb-keuze__kw {
    font-size: 1.25rem;
    font-weight: var(--fw-semi);
    display: block;
}

.weging { margin-top: var(--sp-3); display: grid; gap: 5px; }
.weeg-rij { display: grid; grid-template-columns: 150px 1fr 52px; gap: var(--sp-2); align-items: center; }
.weeg-naam { font-size: 0.8125rem; color: var(--text-secondary); }
/* Zelfde balk als op het overzicht en bij Devices: surface-alt als spoor,
   accent als vulling, volledig afgerond. Stond op border-radius 1px met
   surface-sunken — een eigen keuze die nergens anders voorkomt. */
.weeg-balk {
    background: var(--surface-alt);
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
}
.weeg-vul { background: var(--accent); height: 100%; display: block; border-radius: 999px; }
.weeg-cijfer {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.pb-details { margin-top: var(--sp-3); }
.pb-details > summary {
    cursor: pointer;
    font-size: 0.8125rem;
    color: var(--accent);
    padding: var(--sp-1) 0;
}
.pb-acties { margin-top: var(--sp-3); }

/* Rijen als losse kaartjes, zoals de clusterrijen op het overzicht: elke pagina
   is een eigen regel waar je iets mee doet, niet een rij in een lijst.
   border-spacing zet ze uit elkaar; achtergrond en randen op de cellen maken er
   een kaartje van, met afronding links en rechts.

   Tekst op 0.875rem. Stond op 0.8125rem en dat leest niet prettig naast de rest
   van het dashboard, dat op 14px zit. */
.pb-tabel {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 var(--sp-2);
    font-size: 0.875rem;
}
.pb-tabel tbody td {
    background: var(--surface);
    border-top: 1px solid var(--divider-soft);
    border-bottom: 1px solid var(--divider-soft);
    padding: var(--sp-3);
    vertical-align: middle;
}
.pb-tabel tbody td:first-child {
    border-left: 1px solid var(--divider-soft);
    border-radius: var(--radius) 0 0 var(--radius);
}
.pb-tabel tbody td:last-child {
    border-right: 1px solid var(--divider-soft);
    border-radius: 0 var(--radius) var(--radius) 0;
}

/* Pagina's waar dit cluster geen zeggenschap over heeft: zichtbaar, want ze
   horen in het linkplan, maar niet aan te vinken. De controller weigert ze
   toch al — dit maakt zichtbaar waarom. */
.pb-rij--gesloten > td { background: var(--surface-alt); color: var(--text-secondary); }

.merk--nieuw      { background: var(--bg-info);    color: var(--fg-info); }
.merk--verbeteren { background: var(--geel-light); color: var(--geel); }
.merk--bestaand   { background: var(--groen-light); color: var(--groen-action); }

/* ── Clusterrapport op het overzicht ───────────────────────────────────────
   Zelfde vorm als de rubriektabel in Cogoo: een accentbalk als kop en een grid
   met vaste kolombreedtes, zodat dezelfde informatie op beide plekken hetzelfde
   leest.

   Eén kaart per cluster, en de rij zelf is de knop: klikken klapt de pagina's
   eronder open. Er stond eerst een aparte regel "11 pagina's" tussen de kaarten;
   die zweefde op de achtergrond en leek nergens bij te horen. */
.cluster-kop,
.cluster-rij {
    display: grid;
    grid-template-columns:
        minmax(300px, 2.4fr)   /* cluster: naam en status          */
        90px                   /* aantal pagina's                  */
        130px                  /* impressies met delta             */
        160px                  /* aandeel: percentage plus balk    */
        110px                  /* clicks met delta                 */
        70px                   /* CTR                              */
        70px;                  /* positie                          */
    gap: var(--sp-3);
    align-items: center;
}
.cluster-kop {
    background: var(--accent);
    color: var(--text-inverse);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius);
    margin-bottom: var(--sp-2);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.cluster-kop > span:not(:first-child),
.cluster-rij > .cluster-cel { text-align: right; justify-content: flex-end; }

.cluster-blok {
    background: var(--surface);
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius);
    margin-bottom: var(--sp-2);
    overflow: hidden;
}
.cluster-rij { padding: var(--sp-3); }

/* De rij als summary: geen driehoekje van de browser, wel een aanwijzing dat
   er iets te openen valt. */
details.cluster-blok > summary { list-style: none; cursor: pointer; }
details.cluster-blok > summary::-webkit-details-marker { display: none; }
details.cluster-blok > summary:hover { background: var(--surface-alt); }
details.cluster-blok .cluster-titel::before {
    content: '▸';
    color: var(--pa-text-meta);
    font-size: 11px;
    display: inline-block;
    width: 12px;
    transition: transform 0.12s;
}
details.cluster-blok[open] .cluster-titel::before { transform: rotate(90deg); }

.cluster-naam { min-width: 0; }
.cluster-titel { font-weight: 600; margin-right: var(--sp-2); }
.cluster-cel {
    display: flex; align-items: center; gap: 6px;
    font-variant-numeric: tabular-nums;
}

/* Aandeel: percentage links, balk rechts, op één regel. Volledig afgeronde
   uiteinden — pills krijgen 999px volgens het design system. */
.cluster-balk {
    width: 100px;
    height: 8px;
    background: var(--surface-alt);
    border-radius: 999px;
    overflow: hidden;
    flex-shrink: 0;
}
.cluster-balk > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }

/* De pagina's binnen dezelfde kaart, afgezet met een lijn.
   Op hetzelfde grid als de clusterrij erboven, zodat impressies, clicks en positie
   precies onder hun kop staan. Dit was een losse tabel met vier kolommen die zijn
   eigen breedtes koos, en dan lijnt niets meer. */
.cluster-paginas {
    border-top: 1px solid var(--divider-soft);
    background: var(--surface-alt);
}
.cluster-rij.cluster-pagina {
    padding-top: var(--sp-2);
    padding-bottom: var(--sp-2);
    font-size: 0.8125rem;
}
.cluster-rij.cluster-pagina + .cluster-rij.cluster-pagina { border-top: 1px solid var(--divider-soft); }
.cluster-rij.cluster-pagina.is-kop {
    color: var(--pa-text-meta);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.cluster-pagina .cluster-naam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 1100px) {
    .cluster-kop { display: none; }
    .cluster-rij { grid-template-columns: 1fr 1fr 1fr; }
    .cluster-naam { grid-column: 1 / -1; }
    .cluster-rij.cluster-pagina.is-kop,
    .cluster-pagina > .is-leeg { display: none; }
}

/* URL's in de bevindingenlijst zijn links naar de live pagina — je wilt kunnen
   nakijken wat de agent bedoelt zonder de URL over te typen. Onderstreping pas
   bij hover, anders wordt een rij met zes pagina's een streepjeslijn. */
.auth-signals-hint a {
    color: var(--accent);
    text-decoration: none;
}
.auth-signals-hint a:hover { text-decoration: underline; }

/* Een voorgestelde eigenaar ziet er anders uit dan een gekozen eigenaar.
   Zonder dat verschil wordt een verkeerde standaardwaarde onzichtbaar, en dan
   is een voorstel erger dan geen voorstel. */
.form-input.is-voorstel {
    border-style: dashed;
    color: var(--text-secondary);
}


/* Afvinkbare handelingen op de actielijst.
   Een afgevinkte regel blijft staan maar valt terug -- je moet kunnen zien wat
   je al gedaan hebt zonder dat het de aandacht trekt van wat er nog ligt. */
.zv-handelingen { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: grid; gap: 4px; }
.zv-handelingen label {
    display: flex; align-items: flex-start; gap: var(--sp-2);
    cursor: pointer; font-size: 0.88rem; line-height: 1.5;
}
.zv-handelingen input { margin-top: 4px; flex: 0 0 auto; cursor: pointer; }
.zv-handelingen .zv-gedaan { text-decoration: line-through; color: var(--text-secondary); }

/* Uitkomst van de controle onder een afgevinkte handeling.
   Drie uitkomsten met drie kleuren: aantoonbaar gelukt, aantoonbaar niet, en
   niet te meten. Die derde is grijs en dat is juist -- een controle die alles
   groen maakt is erger dan geen controle. */
.zv-controle { margin: 3px 0 0 26px; font-size: 0.78rem; line-height: 1.4; }
.zv-controle--gelukt { color: var(--groen, #2f7d4f); }
.zv-controle--niet-gelukt { color: var(--rood, #c0392b); }
.zv-controle--onbekend { color: var(--text-secondary); }

/* Regels die de contentketen zelf uitvoert. Geen vinkje: dat zou suggereren dat
   jij ze moet doen. Wel zichtbaar, want je wilt weten wat de knop gaat doen. */
.zv-handelingen--ai li { display: flex; align-items: flex-start; gap: var(--sp-2);
    font-size: 0.88rem; line-height: 1.5; color: var(--text-secondary); }
.zv-handelingen--ai .zv-vink { flex: 0 0 auto; margin-top: 2px; opacity: 0.65; }

/* De afbakening van een pagina: geen taak maar de grens waar de schrijver binnen
   blijft. Daarom een kader en geen vinkjes -- vinkjes suggereren werk dat er niet
   los van de herschrijving bestaat. */
.zv-afbakening {
    background: var(--surface-alt, #f5f1ef); border-radius: var(--radius, 8px);
    padding: 12px 14px; margin-bottom: var(--sp-2, 8px); font-size: 0.88rem;
}
.zv-afbakening b { display: block; margin-bottom: 4px; }

/* Bevindingen: één blokvorm, in de werklijst en per pagina.
   Werkwoord links op vaste breedte, tekst in het midden, wie het doet rechts.
   Eerder stond het besluit in de ene lijst rechts en de soort in de andere
   links -- twee woordenschatten op dezelfde plek, dus je moest per blok
   opnieuw uitzoeken waar je naar keek. */
.zv-bevindingen {
    --zv-inspring: var(--sp-3);        /* de taken hangen onder de tekst */
    list-style: none; margin: var(--sp-3) 0 0; padding: 0;
}

.zv-bev { padding: var(--sp-3) 0; border-top: 1px solid var(--border-subtle); }
.zv-bev:first-child { border-top: 0; padding-top: 0; }

/* Werkwoord en pagina op één regel, de tekst op volle breedte eronder. Het
   werkwoord stond eerder in een kolom ernaast; dan sprong elke zin in en las
   een lange toelichting als een smalle strook naast een etiket. */
.zv-bev__kop {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px var(--sp-2);
    margin-bottom: 4px;
}
.zv-bev__kop .zv-avatar { margin-left: auto; }
.zv-bev__kopcijfers { font-size: 0.75rem; color: var(--text-muted); }
.zv-bev__body { min-width: 0; }
.zv-bev__tekst { font-size: 0.88rem; line-height: 1.5; }
.zv-bev__meta { margin-top: 2px; font-size: 0.75rem; color: var(--text-muted); }

/* Het werkwoord. Vooraan op de kopregel, met de pagina ernaast. */
.zv-besluit {
    display: inline-block; text-align: center;
    padding: 3px 10px; border-radius: var(--radius);
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em;
    text-transform: uppercase; line-height: 1.4;
    background: var(--surface-subtle); color: var(--text-muted);
}
/* Structuurwerk is rood en oranje: dat gaat voor, want daarna verdwijnt een
   deel van de rest vanzelf. Inhoudswerk is blauw en groen. */
.zv-besluit--redirecten   { background: #fde8e6; color: #b3261e; }
.zv-besluit--uit-index    { background: #fde8e6; color: #b3261e; }
.zv-besluit--samenvoegen  { background: #fef0e4; color: #b35f1a; }
.zv-besluit--verbeteren   { background: var(--accent-light); color: var(--accent-hover); }
.zv-besluit--nieuw-maken  { background: #e6f4ea; color: #1e7e34; }
.zv-besluit--behouden     { background: var(--surface-subtle); color: var(--text-muted); }

/* De taken hangen onder de tekst, niet onder het werkwoord. */
.zv-taken { list-style: none; margin: var(--sp-2) 0 0; padding: 0 0 0 var(--zv-inspring); }
.zv-taak {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) 26px;
    column-gap: var(--sp-2);
    align-items: start;
    padding: 3px 0;
    font-size: 0.85rem;
}
/* display: contents laat het label verdwijnen als doos maar niet als klikvlak,
   zodat het vinkje en de tekst allebei in het raster van de regel vallen. */
.zv-taak > label { display: contents; cursor: pointer; }
.zv-taak input[type="checkbox"],
.zv-taak__merk { grid-column: 1; justify-self: center; margin-top: 2px; }
.zv-taak__merk { color: var(--accent); line-height: 1; }
.zv-taak__tekst { grid-column: 2; line-height: 1.5; }
.zv-taak .zv-avatar { grid-column: 3; }
.zv-taak--knop { display: block; padding-top: var(--sp-2); }

/* Doorgehaald en niet verborgen: je wil kunnen zien wat er aan deze pagina is
   opgelost, ook als het al een tijdje terug was. */
.zv-taak.is-gedaan .zv-taak__tekst { text-decoration: line-through; color: var(--text-muted); }
.zv-taak.is-gedaan .zv-taak__merk { color: var(--text-muted); }
.zv-taak.is-gedaan .zv-avatar { opacity: 0.45; }

.zv-bev__voet {
    margin-top: var(--sp-1); padding-left: var(--zv-inspring);
    font-size: 0.76rem; color: var(--text-muted);
}

/* Het avatar zegt wie. Altijd even breed, want anders lezen twee regels naast
   elkaar als twee verschillende soorten dingen. Hier past later de foto van de
   ingelogde gebruiker in: alleen de inhoud verandert dan. */
.zv-avatar {
    width: 26px; height: 26px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.62rem; font-weight: 700; letter-spacing: 0.02em;
    border: 1px solid transparent; box-sizing: border-box; flex: none;
}
.zv-avatar--ai      { background: var(--accent-light); color: var(--accent-hover); }
.zv-avatar--postads { background: #fef0e4; color: #b35f1a; }

@media (max-width: 720px) {
    .zv-bevindingen { --zv-inspring: 0px; }
}

/* Merkpagina's zijn geen dienstpagina's. De regel staat bij de pagina zelf en
   niet in een tooltip: je moet hem zien voordat je gaat zoeken naar een knop
   die er met opzet niet is. */
.zv-merkregel {
    margin-bottom: var(--sp-3); padding: var(--sp-2) var(--sp-3);
    border-left: 3px solid var(--border-strong);
    background: var(--surface-subtle);
    font-size: 0.8rem; line-height: 1.5; color: var(--text-secondary, var(--text-muted));
}

/* Wat er in deze pagina opgaat. Geen waarschuwing: deze pagina wint de
   samenvoeging en mag gewoon geschreven worden. Wel melden, want structurele
   bevindingen staan niet in de actielijst en anders zwijgt het scherm erover. */
.zv-aanwinst {
    margin-bottom: var(--sp-3); padding: var(--sp-2) var(--sp-3);
    border-left: 3px solid var(--accent);
    background: var(--surface-subtle);
    font-size: 0.8rem; line-height: 1.5; color: var(--text-secondary, var(--text-muted));
}
.zv-aanwinst code {
    font-size: 0.78rem; padding: 1px 4px;
    border-radius: 4px; background: var(--surface);
}

/* Paden in de actielijst wijzen naar de live pagina. Om te beoordelen of een
   bevinding nog klopt moet je erheen kunnen; ze overtypen is de reden dat
   niemand het checkt. Onderstreping pas bij hover, anders wordt een zin met
   vier paden een streepjespatroon. */
.zv-pad { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--border-strong); }
.zv-pad:hover { color: var(--accent); border-bottom-color: currentColor; }

/* Vier stapels werk in plaats van één lange lijst. Zonder deze kopjes lees je
   een pagina waar een redirect op wacht als iets wat je nu kunt doen, en dan
   begin je aan werk dat de keten toch weigert. */
.zv-fase { margin: var(--sp-4) 0 var(--sp-2); }
.zv-fase h3 {
    margin: 0; font-size: 0.95rem; font-weight: 600;
    display: flex; align-items: center; gap: var(--sp-2);
}
.zv-fase p { margin: 2px 0 0; font-size: 0.78rem; color: var(--text-muted); }
.zv-fase--nu    h3 { color: var(--accent-hover); }
.zv-fase--wacht h3 { color: var(--text-muted); }

/* Waarom deze pagina op deze plek staat. Een volgorde zonder reden is een
   mening; met de reden erbij kun je hem naast je neerleggen. */
.zv-waarom {
    margin-bottom: var(--sp-2); font-size: 0.78rem; color: var(--text-muted);
}

/* Een regel die vervalt omdat de pagina weg is, ziet er hetzelfde uit als een
   afgevinkte regel: doorgehaald. Het verschil zit in de tooltip -- daar staat
   waarom hij verviel, met de code erbij. */
.zv-taak.is-vervallen .zv-taak__tekst { text-decoration: line-through; color: var(--text-muted); }
.zv-taak.is-vervallen .zv-avatar { opacity: 0.45; }

/* De 5/5-melding is een weg naar Cogoo, geen mededeling. Zonder die stap weet
   je wel wat er mist maar niet waar je het invult, en dan blijft het staan. */
.zv-naar-cogoo { text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.zv-naar-cogoo:hover { filter: brightness(0.94); }

/* De ontbrekende velden invullen waar je ze mist, niet in een andere tab.
   Dezelfde vijf als de 5/5-poort, en hetzelfde endpoint als Cogoo — anders
   ontstaat er een tweede waarheid over dezelfde pagina. */
.zv-vulaan { border: 0; cursor: pointer; font: inherit; }
.zv-inrichten {
    margin: var(--sp-2) 0 var(--sp-3); padding: var(--sp-3);
    border: 1px solid var(--border-subtle); border-radius: var(--radius);
    background: var(--surface-subtle);
    display: flex; flex-direction: column; gap: var(--sp-2);
}
.zv-inrichten p { margin: 0; }
.zv-veld { display: flex; flex-direction: column; gap: 4px; }
.zv-veld > span { font-size: 0.76rem; font-weight: 600; color: var(--text-muted); }
.zv-veld .btn { align-self: flex-start; }

/* De AI geeft meerdere voorstellen; de eerste is niet per se de beste. De rest
   als klikbare alternatieven in plaats van weggooien -- ze zijn al betaald. */
.zv-alternatieven { display: flex; flex-wrap: wrap; gap: var(--sp-1); align-items: baseline; }
.zv-alternatieven > span { font-size: 0.74rem; color: var(--text-muted); }
.zv-alternatieven button {
    border: 1px solid var(--border-subtle); background: var(--surface);
    border-radius: var(--radius); padding: 3px 8px; cursor: pointer;
    font: inherit; font-size: 0.76rem; text-align: left; color: var(--text-secondary, inherit);
}
.zv-alternatieven button:hover { border-color: var(--accent); color: var(--accent); }

/* De 5/5-stand staat altijd bij de pagina, niet alleen als er iets mist.
   Compleet zijn is informatie: je ziet in een oogopslag welke pagina's klaar
   staan om te schrijven en welke nog inrichting nodig hebben. */
.zv-paginakop { display: flex; align-items: center; gap: var(--sp-2); justify-content: space-between; }
.zv-paginakop > :first-child { margin-right: auto; }
.zv-volledig { background: #e6f4ea; color: #1e7e34; display: inline-flex; align-items: center; gap: 3px; }

/* Bewerken waar je leest.
   Er stond een paneel onder de kaart met dezelfde velden nog een keer. Weg:
   elk veld is nu zelf aanklikbaar. Wat je ziet is wat je aanpast. */
.zv-bewerk { cursor: text; position: relative; }
.zv-bewerk:hover { outline: 1px dashed var(--border-strong); outline-offset: 2px; }
.zv-bewerk.is-leeg { color: #b35f1a; font-style: normal; }
.zv-bewerk.is-leeg em { font-style: normal; opacity: 0.85; }
.zv-bewerk.is-bewerken {
    display: block; cursor: default; outline: none;
    background: var(--surface); border-color: var(--accent);
}
.zv-bewerk.is-bewerken:hover { outline: none; }
.zv-bewerk.is-bewerken .form-input { width: 100%; font-size: 0.85rem; }
.zv-bewerk__knoppen { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: 6px; }

/* Eenregelig bewerken: het veld neemt de plaats van de chip in en houdt dezelfde
   maat, zodat de regel niet opspringt zodra je erop klikt. Geen knoppen -- Enter
   bewaart, Escape gaat terug, wegklikken bewaart. */
.zv-bewerk.is-bewerken:has(.zv-bewerk__inline) {
    display: inline-flex; padding: 0; background: none; border: none;
}
.zv-bewerk__inline {
    font: inherit; color: inherit;
    padding: 2px 8px;
    min-width: 12ch;
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--accent);
    border-radius: 999px;
    outline: none;
}

/* De titelregel is context, dus klein en grijs -- maar wel aanklikbaar. */
.zv-titelregel {
    display: flex; align-items: baseline; gap: 6px;
    margin: 4px 0 var(--sp-2); font-size: 0.76rem; color: var(--text-muted);
}
.zv-titelregel em { font-style: normal; }

/* Het autoriteitsanker naast de klantvraag: de twee zinnen die de schrijver het
   meest sturen. Groen tegenover blauw, zodat je ze uit elkaar houdt. */
.zv-anker {
    display: flex; align-items: baseline; gap: 6px;
    margin: 4px 0 var(--sp-2); padding: 6px 10px;
    background: #F0FDF4; border: 1px solid #BBF7D0; border-radius: var(--radius);
    font-size: 0.8rem; line-height: 1.45; color: #14532D;
}
.zv-anker em { font-style: italic; }

.zv-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: var(--sp-2); }
.zv-doelchip {
    display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px;
    background: #EDE9FE; color: #5B21B6; font-size: 11px; font-weight: 600;
}
.zv-kwchip {
    display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius);
    background: var(--surface); border: 1px solid var(--border-subtle);
    font-size: 11px; color: var(--text-muted);
}

/* Geen doel omdat het er niet kan zijn -- een informatieve pagina werkt niet
   naar een conversie toe. Gedempt en zonder cursor, zodat je ziet dat hier
   niets te kiezen valt in plaats van dat je keuze stil terugspringt. */
.zv-doelchip.is-nvt {
    background: var(--surface); color: var(--text-muted);
    border: 1px dashed var(--border-subtle); font-weight: 500;
    gap: 3px; cursor: help;
}
.zv-kwchip.is-vast { cursor: default; }

/* Een chip die je kunt wisselen: ziet eruit als de chip ernaast, gedraagt zich
   als een keuzelijst. Wijzigen bewaart meteen. */
.zv-chipkies {
    appearance: none; -webkit-appearance: none;
    border: 1px solid transparent; cursor: pointer;
    font: inherit; font-size: 11px; font-weight: 600;
    padding: 2px 8px; border-radius: 999px; line-height: 1.6;
}
.zv-chipkies.zv-kwchip { border-radius: var(--radius); font-weight: 500; }
.zv-chipkies:hover { border-color: currentColor; }
.zv-chipkies:disabled { opacity: 0.5; cursor: wait; }

/* Dezelfde pil als in Cogoo, zodat 5/5 daar en hier hetzelfde betekent. */
.zv-volledig, .zv-vulaan {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 600; white-space: nowrap;
    border: 1px solid transparent;
}
.zv-volledig { background: #DCFCE7; color: #14532D; border-color: #86EFAC; }
.zv-vulaan   { background: #FEF3C7; color: #78350F; border-color: #FCD34D; cursor: help; }

/* Een bevinding zonder uitvoerbare regel gaat nergens heen: niet naar de
   schrijver en niet naar een vinkje. Dat hoort op te vallen, want het is werk
   dat blijft liggen tot iemand er een handeling van maakt. */
.zv-taak--geenopdracht { align-items: flex-start; }
.zv-taak--geenopdracht .zv-taak__merk { color: #b35f1a; }
.zv-taak--geenopdracht .zv-taak__tekst {
    grid-column: 2 / -1; font-size: 0.8rem; line-height: 1.5;
    background: #fef8f0; border-left: 2px solid #f0c48a;
    padding: var(--sp-2); border-radius: 0 var(--radius) var(--radius) 0;
}

/* De paginakaart uit Cogoo, hier als leesweergave boven de bevindingen. Zelfde
   klassen en dus dezelfde kleuren: wijzigt daar iets, dan wijzigt het hier mee. */
.zv-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: var(--sp-2); }
.zv-doelchip {
    display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px;
    background: #EDE9FE; color: #5B21B6; font-size: 11px; font-weight: 600;
}
.zv-kwchip {
    display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius);
    background: var(--surface); border: 1px solid var(--border-subtle);
    font-size: 11px; color: var(--text-muted);
}

/* Een chip die je kunt wisselen. Ziet eruit als de chip ernaast, gedraagt zich
   als een keuzelijst: klikken opent de keuzes, wijzigen bewaart meteen. */
.zv-chipkies {
    appearance: none; -webkit-appearance: none;
    border: 1px solid transparent; cursor: pointer;
    font: inherit; font-size: 11px; font-weight: 600;
    padding: 2px 8px; border-radius: 999px; line-height: 1.6;
}
.zv-chipkies:hover { border-color: currentColor; }
.zv-chipkies:disabled { opacity: 0.5; cursor: wait; }

/* Het autoriteitsanker naast de klantvraag: de twee zinnen die de schrijver het
   meest sturen. De klantvraag zegt waarom iemand komt, het anker waarom deze
   klant het antwoord mag geven. Groen, zodat je ze uit elkaar houdt. */
.zv-anker {
    display: flex; align-items: baseline; gap: 6px;
    margin: 4px 0 var(--sp-2); padding: 6px 10px;
    background: #F0FDF4; border: 1px solid #BBF7D0; border-radius: var(--radius);
    font-size: 0.8rem; line-height: 1.45; color: #14532D;
}
.zv-anker em { font-style: italic; }

/* Ook in de voetregel wissel je met een klik. Zelfde vorm als de chips
   erboven, alleen kleiner: dit is context, geen kop. */
.zv-voet label { display: inline-flex; align-items: center; gap: 5px; }
.zv-voet .zv-chipkies { font-weight: 600; }

/* De titel is een zin, geen etiket: die krijgt de ruimte die overblijft. */
.zv-kort .form-input.zv-breed { min-width: 340px; flex: 1 1 340px; }

/* Hoeveel werk er ligt en wanneer er voor het laatst geschreven is: dat hoort
   boven de taken, niet onder de paginanaam. Daar leest het als een bijschrift
   bij de titel; hier als de kop van de lijst eronder. */
.zv-werkregel {
    margin: var(--sp-3) 0 var(--sp-1);
    padding-top: var(--sp-2); border-top: 1px solid var(--border-subtle);
    font-size: 0.76rem; color: var(--text-muted);
}

/* Zoekrichting per dienst: wat de eigenaar over zijn eigen dienst weet, als
   invoer voor het zoeken. Stond nergens -- het zaad kwam uit wat er al was, en
   bij een nieuwe dienst is dat één woord. */
.zv-richtingblok { padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); }
.zv-richtingblok p { margin: 0; }
.zv-richting-knoppen { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.zv-agentvragen {
    padding: var(--sp-2) var(--sp-3); border-left: 3px solid #FCD34D;
    background: #FEF9EC; border-radius: 0 var(--radius) var(--radius) 0; font-size: 0.82rem;
}
.zv-agentvragen ul { margin: 4px 0 6px; padding-left: 18px; }
.zv-termenlijst { display: flex; flex-wrap: wrap; gap: 5px; }
.zv-term {
    display: inline-flex; align-items: baseline; gap: 5px;
    padding: 2px 8px; border-radius: var(--radius);
    background: var(--surface); border: 1px solid var(--border-subtle);
    font-size: 0.76rem; cursor: help;
}
.zv-term b { font-size: 0.68rem; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.02em; }

/* Een poort is geen kapotte knop.
   Er stond een uitgeschakelde blauwe knop waar anders 'Herschrijf deze pagina'
   staat. Die leest als een storing: je drukt, er gebeurt niets, en je gaat
   zoeken naar wat er stuk is. Dit zegt wat er moet gebeuren en waar. */
.zv-poort {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 999px;
    background: var(--surface-subtle); border: 1px dashed var(--border-strong);
    color: var(--text-muted); font-size: 0.78rem; font-weight: 600;
    cursor: help; white-space: nowrap;
}

/* En het veld dat ontbreekt trilt niet, maar valt wel op: dezelfde oranje als
   de andere lege velden, zodat je in één blik ziet waar je moet klikken. */
.zv-ontbreekt {
    border-color: #F0C48A !important;
    background: #FEF9EC !important; color: #92400E !important;
}

/* 'hergeschreven 27 aug' naast de paginakop.
   Deze klasse had geen stijl meer -- verdwenen bij een eerdere opschoning -- en
   erfde dus de grootte van de kop. Zelfde vorm als de andere pillen, zodat de
   rij als één regel leest. */
.zv-gedaan-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 999px;
    background: #DCFCE7; color: #14532D; border: 1px solid #86EFAC;
    font-size: 11px; font-weight: 600; line-height: 1.6; white-space: nowrap;
}

/* 'opnieuw' was platte tekst en zag er niet uit als iets waar je op drukt. Een
   rand en een hover maken er een knop van zonder dat hij aandacht opeist --
   meestal hoef je hem niet. */
.zv-paginakop .btn-ghost {
    border: 1px solid var(--border-subtle);
    font-size: 11px; font-weight: 600; line-height: 1.6;
    padding: 2px 10px; border-radius: 999px;
    color: var(--text-muted); background: var(--surface);
    display: inline-flex; align-items: center; gap: 3px;
}
.zv-paginakop .btn-ghost:hover {
    border-color: var(--accent); color: var(--accent); background: var(--accent-light);
}

/* Een notitie op een paginakaart is context, geen inhoud: één regel, de rest in
   de tooltip. Als alinea las hij als de tekst van de pagina zelf. */
.tv2-pcard-note {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    cursor: help;
}


/* ─── Publiceerpagina ────────────────────────────────────────────────────
   Eigen pagina zonder sidebar en zonder tabs. Het paneel eronder zet de
   tekst en het CMS-template naast elkaar; die twee moet je vergelijken, en
   dat lukt niet in twee halve kolommen. */
.pub-pagina {
    padding: var(--sp-4) var(--sp-5) var(--sp-6);
    max-width: none;
}
.pub-pagina__kop {
    display: flex; align-items: center; gap: var(--sp-3);
    flex-wrap: wrap;
    margin-bottom: var(--sp-4);
}
.pub-pagina__kop h1 {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    font-size: 18px; font-weight: 600; margin: 0;
}
.pub-pagina__sub {
    font-size: 12px; color: var(--pa-text-meta);
}

/* De dienst houdt deze pagina tegen. Oranje, want het is werk dat open staat --
   niet rood, want er is niets kapot. */
.zv-dienstmist {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 600;
    white-space: nowrap;
    background: #FEF3C7; color: #78350F; border: 1px solid #FCD34D;
    font-family: inherit; cursor: pointer;
    transition: filter .12s ease;
}
.zv-dienstmist:hover { filter: brightness(.96); }


/* Structuur ontwerpen staat niet meer bovenaan: je begint bij de actielijst.
   Dit blijft bereikbaar met een klik, voor een dienst die nog geen cluster heeft. */
.pb-ontwerp > summary {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    cursor: pointer; list-style: none;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--pa-border-card, #e5e7eb);
    border-radius: var(--radius, 8px);
    font-weight: 600; font-size: 0.9rem;
    background: var(--surface, #fff);
}
.pb-ontwerp > summary::-webkit-details-marker { display: none; }
.pb-ontwerp > summary:hover { filter: brightness(.97); }
.pb-ontwerp[open] > summary { margin-bottom: var(--sp-2); }


/* Een zoekrichting weghalen. De agent zit er weleens naast, en dan wil je niet
   de hele lijst opnieuw laten bepalen. */
.zv-term { position: relative; }
.zv-term-x {
    border: none; background: none; padding: 0 0 0 4px;
    color: var(--pa-text-meta, #6b7280); cursor: pointer;
    line-height: 1; vertical-align: middle;
}
.zv-term-x:hover { color: var(--accent, #1A73E8); }


/* De vragen van de agent staan boven de knop, want je beantwoordt ze voordat je
   opnieuw laat zoeken. Elk met zijn eigen veld: antwoorden in een blob tekst
   ergens erboven is geen antwoorden geven. */
.zv-agentvraag { margin-top: var(--sp-3); }
.zv-agentvraag__v {
    font-size: 0.85rem; font-weight: 600;
    margin-bottom: 4px;
}
.zv-agentvraag textarea { width: 100%; }


/* De diensten die de keten tegenhouden. Elk een knop naar de plek waar je het
   oplost -- een melding zonder weg erheen is een mededeling. */
.zv-onvolledig {
    display: flex; flex-wrap: wrap; gap: var(--sp-2);
    margin-top: var(--sp-2);
}
.zv-onvolledig__dienst {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 999px;
    font-family: inherit; font-size: 12px;
    background: var(--surface, #fff);
    border: 1px solid #FCD34D; color: #78350F;
    cursor: pointer;
}
.zv-onvolledig__dienst:hover { filter: brightness(.97); }


/* Lege velden op een Cogoo-kaart openen het bewerkscherm. Ze zien eruit als
   voorheen; alleen de cursor verraadt dat je er iets mee kunt. */
button.tv2-funnel-badge { font-family: inherit; cursor: pointer; }
button.tv2-funnel-badge:hover { filter: brightness(.95); }
.tv2-pcard-cq-missing { cursor: pointer; }
.tv2-pcard-cq-missing:hover { filter: brightness(.97); }


/* Chips die je ter plekke kunt wijzigen. Ze zien eruit als de chips ernaast --
   geen keuzelijst-uiterlijk, want dan wordt de regel een formulier. */
.tv2-chipkies {
    -webkit-appearance: none; appearance: none;
    font-family: inherit; cursor: pointer;
    padding-right: 8px;
    border: 1px solid transparent;
}
.tv2-chipkies:hover { filter: brightness(.95); }
.tv2-chipkies:focus-visible { outline: 2px solid var(--accent, #e33b2a); outline-offset: 1px; }
/* Type en schrijfmodus: aanwezig maar stil, zoals op Pillar-opbouw. */
.tv2-chip-stil {
    font-size: 11px; color: var(--pa-text-meta, #6b7280);
    background: none; border: none; padding: 2px 4px;
}


/* Zoekwoord ontbreekt: dezelfde chipvorm, maar oranje -- het is werk, geen stand. */
.tv2-pcard-primary.is-leeg {
    background: #FEF3C7; color: #78350F; border-color: #FCD34D;
    font-style: normal;
}
.tv2-kw-inline {
    font: inherit; font-style: italic;
    padding: 2px 8px; border-radius: 999px;
    min-width: 14ch;
    background: var(--surface, #fff);
    border: 1px solid var(--accent, #e33b2a);
    outline: none;
}


/* Staat deze pagina live? Naast het pad, want het bepaalt wat je ermee kunt. */
.zv-live {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 1px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 600;
    cursor: help;
}
.zv-live.is-live { background: #DCFCE7; color: #14532D; border: 1px solid #86EFAC; }
.zv-live.is-weg  { background: #FEE2E2; color: #7F1D1D; border: 1px solid #FCA5A5; }


/* Staat de geschreven tekst ook werkelijk op de site? Live zijn en bijgewerkt
   zijn is niet hetzelfde -- een pagina kan jaren draaien met de oude tekst. */
.zv-tekst {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 1px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 600;
    margin-left: 6px;
    cursor: help;
}
.zv-tekst.is-gelijk   { background: #DCFCE7; color: #14532D; border: 1px solid #86EFAC; }
.zv-tekst.is-anders   { background: #FEF3C7; color: #78350F; border: 1px solid #FCD34D; }
.zv-tekst.is-concept  { background: #DBEAFE; color: #1E3A8A; border: 1px solid #93C5FD; }
.zv-tekst.is-onbekend { background: #F3F4F6; color: #4B5563; border: 1px solid #D1D5DB; }


/* De tekst is nieuwer dan wat er live staat: publiceren is de volgende stap.
   Oranje, want het is werk -- niet rood, want er is niets kapot. */
.tv2-cr-write.is-achterstallig {
    background: #FEF3C7; color: #78350F; border-color: #FCD34D;
}


/* Publiceerpagina: wat je meestuurt hoort bovenaan de tekst, niet onderaan de
   pagina -- daar lees je pas wat je hebt gedaan nadat je klaar bent. */
.cms-pub-meta-footer {
    margin: 0 0 12px;
    padding: 10px 14px;
    background: var(--surface, #fff);
    border: 1px solid var(--pa-border-card, #e5e7eb);
    border-radius: var(--radius, 8px);
}
.cms-pub-config--acties {
    display: flex; align-items: center; gap: var(--sp-3);
    flex-wrap: wrap;
    margin-bottom: var(--sp-3);
}
/* De demo-URL staat in de rechterkolom en mag daar niet uit lopen. */
.cms-pub-preview .cms-pub-config {
    display: flex; align-items: flex-end; gap: var(--sp-2);
    flex-wrap: wrap;
    margin: 0 0 10px;
}
/* De URL en de knoppen delen een regel zolang dat past, en anders niet.
   ─────────────────────────────────────────────────────────────────────
   Twee eerdere pogingen sloegen de plank mis. Een container query op 760px was
   een gok en zat er net naast (de kolom is ~767px), dus die deed niets. Een
   min-width op het veld hielp ook niet: flex-wrap laat items één voor één
   omslaan, dus kwamen Laden, Ververs en Toon sleepvakken naast het veld en
   zakten Reset en de link eronder -- de rommelige verdeling uit img_13.

   De knoppen zitten daarom in hun eigen doos. Die kan alleen als geheel
   omslaan: alles op één regel, of het veld op een regel met alle knoppen
   eronder. Een tussenvorm bestaat niet meer. */
.cms-pub-preview .cms-pub-field-url { min-width: 380px; }
.cms-pub-config-knoppen {
    display: flex;
    align-items: center;
    gap: var(--sp-2, 8px);
    flex: 0 0 auto;
    /* Binnen de doos niet afbreken: dat zou de verdeling terugbrengen die we
       hier juist uitsluiten. */
    flex-wrap: nowrap;
}


/* Sjabloonkeuze naast de detectie. Het CMS geeft geen sjabloonnummer terug bij
   een pagina, dus de detectie gokt -- dan moet je die gok kunnen corrigeren. */
.cms-pub-tplkies { display: inline-flex; align-items: center; gap: 4px; }
.cms-pub-tplkies select {
    font: inherit; padding: 1px 4px;
    border: 1px solid var(--pa-border-card, #e5e7eb);
    border-radius: 4px; background: #fff;
}
.cms-pub-tplhint { color: var(--pa-text-meta, #6b7280); cursor: help; }

/* ─── Kansen: waar ligt het verkeer ──────────────────────────────────────────
   Een leestabel, geen dashboard. De winstkolom is het enige dat opvalt; de rest
   is context waarmee je die kunt wantrouwen. Daarom staat de aanname ernaast in
   plaats van in een uitklapper. */
.kans-kop {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: var(--sp-4); margin-bottom: var(--sp-3);
}
.kans-kop h3 { margin: 0 0 var(--sp-1); }
.kans-sub { margin: 0; font-size: 13px; color: var(--text-muted); max-width: 62ch; }
.kans-totaal { text-align: right; white-space: nowrap; }
.kans-totaal-getal {
    display: block; font-size: 26px; font-weight: 700; color: var(--accent);
    font-variant-numeric: tabular-nums;
}
.kans-totaal-label { font-size: 12px; color: var(--text-muted); }
.kans-uitleg { font-size: 13px; margin-bottom: var(--sp-3); }

.kans-balk {
    display: flex; flex-wrap: wrap; gap: var(--sp-3);
    align-items: center; justify-content: space-between; margin-bottom: var(--sp-2);
}
.kans-filters { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.kans-filter {
    padding: 4px 10px; border-radius: var(--radius); cursor: pointer;
    background: var(--surface); border: 1px solid var(--border-subtle);
    font-size: 12px; color: var(--text-muted); font-family: inherit;
}
.kans-filter:hover { border-color: var(--accent); color: var(--text); }
.kans-filter.is-aan { background: var(--accent); border-color: var(--accent); color: #fff; }
.kans-min { font-size: 12px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; }
.kans-minsel {
    padding: 3px 6px; border-radius: var(--radius); font-family: inherit;
    border: 1px solid var(--border-subtle); background: var(--surface); font-size: 12px;
}

/* Brede tabel scrollt in zijn eigen bak; de pagina zelf nooit zijwaarts. */
.kans-tabelwrap { overflow-x: auto; }
.kans-tabel { width: 100%; border-collapse: collapse; font-size: 13px; }
.kans-tabel th {
    text-align: left; padding: 6px 10px; font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted);
    border-bottom: 1px solid var(--border-subtle); white-space: nowrap;
}
.kans-tabel td { padding: 8px 10px; border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
.kans-tabel tbody tr:hover { background: var(--surface); }
.kans-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kans-winst { font-weight: 700; color: var(--accent); }
.kans-pad-regel { display: flex; align-items: center; gap: 6px; }
.kans-link { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; }
.kans-titel { font-size: 12px; color: var(--text-muted); margin-top: 2px; max-width: 46ch; }
.kans-aanname { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.kans-vlag { color: var(--text-muted); cursor: help; }

.kans-dienst {
    display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px;
    border-radius: 999px; background: #EDE9FE; color: #5B21B6;
    font-size: 11px; font-weight: 600; white-space: nowrap;
}
.kans-dienst.is-leeg {
    background: var(--surface); color: var(--text-muted);
    border: 1px dashed var(--border-subtle); font-weight: 500; cursor: help;
}
.kans-live { font-size: 11px; font-weight: 600; }
.kans-live.is-live { color: #15803D; }
.kans-live.is-weg { color: var(--accent); }
.kans-live.is-onbekend { color: var(--text-muted); cursor: help; }
.kans-werk {
    display: inline-flex; align-items: center; gap: 2px; padding: 1px 6px;
    border-radius: 999px; background: var(--surface); border: 1px solid var(--border-subtle);
    font-size: 11px; color: var(--text-muted); cursor: help;
}

/* Verhuisd is geen fout: de tekst staat er, alleen onder een ander adres. Daarom
   neutraal in plaats van rood — rood zou zeggen dat er iets stuk is. */
.tv2-pcard-livechip-verhuisd {
    background: var(--surface); color: var(--text-muted);
    border: 1px solid var(--border-subtle);
}

/* Direct doorzetten: een schakelaar met gevolgen, dus zichtbaar als hij aanstaat.
   Het CMS kent geen conceptstand -- alles gaat meteen naar de site van de klant. */
.cms-pub-direct {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; color: var(--text-muted); cursor: pointer;
    padding: 3px 9px; border-radius: 999px;
    border: 1px solid var(--border-subtle); background: var(--surface);
}
.cms-pub-direct:has(input:checked) {
    border-color: var(--accent); color: var(--accent); font-weight: 600;
}
.cms-pub-direct input { accent-color: var(--accent); margin: 0; }

/* Zoekvragen: wat wordt er van je verwacht.
   Vier rubrieken zagen er hetzelfde uit terwijl er maar twee om werk vragen. */
.zv-verwacht {
    display: flex; align-items: flex-start; gap: 6px;
    margin: var(--sp-2) 0 0; padding: 8px 12px;
    background: var(--surface); border-left: 3px solid var(--accent);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: 13px; line-height: 1.5; color: var(--text);
}
.zv-verwacht.is-geen-werk {
    border-left-color: var(--border-subtle); color: var(--text-muted);
}
.zv-geenwerk {
    padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600;
    background: var(--surface); border: 1px dashed var(--border-subtle);
    color: var(--text-muted);
}
/* Geen werk: rustiger, zodat je oog naar de rubrieken gaat die het wel zijn. */
.pb-stap--geen-werk > summary { opacity: .72; }
.pb-stap--geen-werk > summary:hover { opacity: 1; }

/* De checkbox 'direct doorzetten' stond tussen Laden/Ververs/Toon sleepvakken
   in dezelfde flex-rij en duwde die knoppen naar een tweede regel -- met de
   checkbox er dan tussenin. Hij hoort niet bij die knoppenrij maar bij de
   demo-URL eronder, dus krijgt hij een eigen volle regel.

   flex-basis 100% op een wrapper en niet op het label zelf: het label is een
   pil met rand, en die zou over de volle breedte uitrekken. De wrapper pakt de
   regel, het label houdt zijn eigen maat en begint op dezelfde lijn als het
   invoerveld erboven. */
.cms-pub-config-onder {
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Merkprofiel-stappen ──────────────────────────────────────────────────
   Voortgangsstrip boven de instellingen-tabs. De vier schermen die het
   merkprofiel voeden hebben een oorzakelijke volgorde -- werkgebied bepaalt of
   pillars op doelgroep of op locatie worden gebouwd -- maar dat was nergens te
   zien. Deze strip toont die volgorde plus de stand per stap.

   Bouwt voort op .pa-kpi-strip/.pa-kpi-tile uit het design system; alleen de
   kleur per stand en het klikgedrag zijn hier nieuw. */
.mp-stap {
    flex: 1;
    text-align: left;
    background: none;
    border: 0;
    border-right: 1px solid var(--pa-border-divider);
    padding: var(--sp-3) var(--sp-4);
    cursor: pointer;
    font: inherit;
}
.mp-stap:last-child { border-right: 0; }
.mp-stap:hover { background: var(--surface-alt); }
.mp-stap__kop { display: flex; align-items: center; gap: var(--sp-2); }
.mp-stap__nr {
    width: 18px; height: 18px;
    border-radius: var(--radius-pill);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 600; flex: none;
}
.mp-stap__titel { font-weight: 600; font-size: 13px; color: var(--text-primary); }
.mp-stap__bepaalt {
    font-size: 11px; color: var(--pa-text-label);
    margin-top: var(--sp-1); line-height: 1.45;
}
.mp-stap__melding { font-size: 11px; margin-top: var(--sp-1); line-height: 1.45; }

.mp-stap--klaar  .mp-stap__nr { background: var(--groen-light); color: var(--groen-action); }
.mp-stap--leeg   .mp-stap__nr { background: var(--surface-alt);  color: var(--text-tertiary); }
.mp-stap--let_op .mp-stap__nr { background: var(--geel-light);   color: var(--rood); }
.mp-stap--let_op .mp-stap__melding { color: var(--rood); }
.mp-stap--leeg   .mp-stap__melding { color: var(--text-tertiary); }

/* Zoekvraag per locatie. Een locatie is een strategische keuze, geen grens --
   maar die keuze is alleen wat waard als er vraag onder zit. Zie Plaatsvraag. */
.loc-vraag { font-variant-numeric: tabular-nums; }
.loc-vraag--geen    { color: var(--text-tertiary); }
.loc-vraag--weinig  { color: var(--rood); }
.loc-vraag--genoeg  { color: var(--groen-action); font-weight: 600; }
.loc-vraag--onbekend { color: var(--text-tertiary); font-style: italic; }

/* Zoekwoord-voorstellen naast het invoerveld. Verdiend en voorgesteld zijn niet
   even sterk: het eerste is gemeten, het tweede een keuze. Zie Zoekwoordvoorstel. */
.tv2-kw-voorstellen { display: inline-flex; flex-wrap: wrap; gap: var(--sp-1); margin-left: var(--sp-2); }
.tv2-kw-voorstel {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: #fff;
    padding: 2px var(--sp-2);
    font-size: 11px;
    cursor: pointer;
    font: inherit; font-size: 11px;
}
.tv2-kw-voorstel:hover { background: var(--surface-alt); }
.tv2-kw-voorstel--verdiend { border-color: var(--groen); }
.tv2-kw-cijfer { color: var(--pa-text-label); margin-left: var(--sp-1); }

/* De PA/AI-badge is een knop geworden: de agent bepaalt wie een handeling doet
   en is daarin niet altijd consistent, dus je moet het kunnen omzetten. */
button.zv-avatar { border: 0; cursor: pointer; font: inherit; }
button.zv-avatar:hover { filter: brightness(0.94); }
button.zv-avatar:disabled { opacity: 0.5; cursor: default; }

/* Sparren over een structuur (sessiescherm, onder stap 2). Berichten van de strateeg
   rechts, van de sparringpartner links; voorgestelde besluiten als los kaartje erin. */
.pb-gesprek { display: flex; flex-direction: column; gap: var(--sp-3); margin: var(--sp-3) 0; }
.pb-bericht { max-width: 85%; padding: var(--sp-3); border: 1px solid var(--divider-soft); border-radius: var(--radius); }
.pb-bericht--strateeg { align-self: flex-end; background: var(--surface-muted, var(--surface)); }
.pb-bericht--agent { align-self: flex-start; background: var(--surface); }
.pb-voorstel { margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px dashed var(--divider-soft); border-radius: var(--radius); }
.pb-voorstel.is-afgehandeld { opacity: .6; }
.pb-voorstel__knoppen { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }
.pb-gesprek__invoer { display: flex; gap: var(--sp-2); align-items: flex-end; margin-top: var(--sp-3); }
.pb-gesprek__invoer textarea { flex: 1; }
.pb-besluiten { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--divider-soft); }
.pb-besluiten__kop { font-weight: var(--fw-semi); margin-bottom: var(--sp-2); }

/* Volume per nevenzoekwoord op een paginakaart, en een waarschuwing als niemand erop
   zoekt of als het woord bij een merkpagina hoort (Chipcontrole). */
.tv2-tkw-chip-vol { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; padding-right: 2px; }
.tv2-tkw-chip.is-waarschuwing { background: var(--bg-warning); border-color: var(--amber-100); color: var(--fg-warning); }
.tv2-tkw-chip.is-waarschuwing .tv2-tkw-chip-vol { color: inherit; }

/* Volume bij een zoekterm in Zoekvragen, en dezelfde waarschuwing als op een chip in
   Cogoo: niemand zoekt erop, of het woord hoort bij een merkpagina (Chipcontrole). */
.zv-term-vol { margin-left: 6px; font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.zv-term.is-waarschuwing { background: var(--bg-warning); border-color: var(--amber-100); color: var(--fg-warning); }
.zv-term.is-waarschuwing .zv-term-vol { color: inherit; }

/* Een term die de meting heeft ingekort: de stippellijn zegt dat dit niet is wat de
   agent schreef. En wat helemaal wegviel, ingeklapt eronder. */
.zv-term.is-ingekort { border-style: dashed; }
.zv-weglaat { margin-top: var(--sp-2); font-size: 0.78rem; color: var(--text-muted); }
.zv-weglaat summary { cursor: pointer; }
.zv-weglaat ul { margin: var(--sp-2) 0 0; padding-left: var(--sp-4); display: grid; gap: 2px; }
.zv-weglaat b { font-weight: 600; color: var(--text-primary); }

/* Volume achter een zoekwoord op een paginakaart in de actielijst. Zelfde uitleg als
   de chips in Cogoo: geen vraag of een merkwoord kleurt oranje (Chipcontrole). */
.zv-kwchip-vol { margin-left: 5px; font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.zv-kwchip.is-waarschuwing { background: var(--bg-warning); border-color: var(--amber-100); color: var(--fg-warning); }
.zv-kwchip.is-waarschuwing .zv-kwchip-vol,
.tv2-pcard-primary.is-waarschuwing .zv-kwchip-vol { color: inherit; }
.tv2-pcard-primary.is-waarschuwing { background: var(--bg-warning); border-color: var(--amber-100); color: var(--fg-warning); }

/* Actielijst per cluster. Een cluster is één opdracht: de kop draagt de knop en het
   plan, de paginakaarten eronder zijn wat er gedaan wordt. */
.zv-cluster {
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius);
    padding: var(--sp-3);
    margin-bottom: var(--sp-4);
    background: var(--surface-subtle);
}
.zv-cluster__kop {
    display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}
.zv-cluster__kop h3 {
    margin: 0; font-size: 1rem; font-weight: 600;
    display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
}
.zv-cluster__plan { margin-top: 2px; font-size: 0.8rem; color: var(--text-muted); }
.zv-cluster .pb-stap:last-child { margin-bottom: 0; }

.zv-fasechip, .zv-planlabel {
    display: inline-flex; align-items: center;
    margin-left: var(--sp-2); padding: 1px 8px;
    border-radius: 999px; font-size: 0.72rem; font-weight: 500;
    background: var(--surface-subtle); color: var(--text-muted);
    border: 1px solid var(--divider-soft);
}
.zv-planlabel:empty { display: none; }
.zv-fasechip--nu      { background: var(--bg-info);    color: var(--fg-info);    border-color: var(--blue-100); }
.zv-fasechip--maken   { background: var(--bg-warning); color: var(--fg-warning); border-color: var(--amber-100); }
.zv-planlabel--gaat,
.zv-planlabel--in_rij,
.zv-planlabel--wacht   { background: var(--bg-info);    color: var(--fg-info);    border-color: var(--blue-100); }
.zv-planlabel--loopt,
.zv-planlabel--gestart { background: var(--bg-info);    color: var(--fg-info);    border-color: var(--blue-100); font-weight: 600; }
.zv-planlabel--klaar   { background: var(--bg-success); color: var(--fg-success); border-color: var(--green-100); }
.zv-planlabel--niets_nieuw { background: var(--bg-success); color: var(--fg-success); border-color: var(--green-100); }
.zv-planlabel--overgeslagen,
.zv-planlabel--fout    { background: var(--bg-warning); color: var(--fg-warning); border-color: var(--amber-100); }

.zv-wachtrij {
    border: 1px solid var(--divider-soft); border-radius: var(--radius);
    padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3);
    font-size: 0.85rem; background: var(--surface);
}
.zv-wachtrij.is-actief { border-color: var(--blue-100); background: var(--bg-info); }
.zv-wachtrij__kop { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.zv-wachtrij__kop .btn { margin-left: auto; }
.zv-wachtrij details { margin-top: var(--sp-2); }
.zv-wachtrij summary { cursor: pointer; }

/* Een verborgen knop moet ook verborgen zijn. .btn zet display: inline-flex, en dat
   won van het hidden-attribuut: 'Alleen deze pagina' stond zo zichtbaar bij een
   cluster zonder verdeling. */
.btn[hidden] { display: none !important; }

/* De pagina van de sterkste concurrent per dienst, en de woorden die Google erbij vindt. */
.zv-concurrent { display: grid; gap: var(--sp-1); margin-top: var(--sp-3); }
.zv-concurrentwoorden { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1); margin-top: var(--sp-2); }

/* Volume achter het hoofdzoekwoord op een paginakaart in Cogoo. */
.tv2-pcard-primary .tv2-tkw-chip-vol { margin-left: 5px; font-weight: 400; }
.tv2-pcard-primary.is-waarschuwing { background: var(--bg-warning); border-color: var(--amber-100); color: var(--fg-warning); }

/* Een zoekwoord dat ook op een andere pagina staat: rood, want dat is kannibalisatie
   en geen twijfel over volume. Uitleg met de andere pagina in de tooltip. */
.tv2-tkw-chip.is-dubbel, .tv2-pcard-primary.is-dubbel, .zv-kwchip.is-dubbel {
    background: var(--bg-danger); border-color: var(--fg-danger); color: var(--fg-danger);
}
.tv2-tkw-chip.is-dubbel .tv2-tkw-chip-vol, .tv2-pcard-primary.is-dubbel .tv2-tkw-chip-vol,
.zv-kwchip.is-dubbel .zv-kwchip-vol { color: inherit; }

/* Structuurbesluit op een pagina in Cogoo: eerst dit, dan pas schrijven. */
.tv2-pcard-blokkade {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 8px; margin-left: 6px; border-radius: 999px;
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
    white-space: nowrap; text-decoration: none;
    background: var(--bg-danger); color: var(--fg-danger); border: 1px solid var(--fg-danger);
}
.tv2-pcard-blokkade:hover { opacity: .85; }
.tv2-pcard-blokkade:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* De route van vier stappen: ook een stap zonder werk blijft staan.
   Stond alleen wat openstond, dan begon de lijst bij 2 en zag je een volgorde
   zonder begin -- terwijl juist die volgorde het punt is. Een lege stap is
   daarom gedempt en zonder inhoud, niet weg. */
.pb-stap--leeg {
    opacity: 0.55;
}
.pb-stap--leeg .pb-stap__kop { margin-bottom: 0; font-size: 1rem; }
.pb-stap--leeg .pb-stap__nr { background: var(--text-muted); }
.pb-stap--slot .pb-stap__kop { margin-bottom: var(--sp-2); }

/* Springen tussen een stap en het cluster dat erop wacht. Een knop die als tekst
   leest: het is navigatie binnen dezelfde lijst, geen handeling. */
.zv-springnaar {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--accent);
    text-decoration: underline;
    cursor: pointer;
}
.zv-springnaar:hover { opacity: 0.8; }

/* Wat deze bevinding tegenhoudt. */
.zv-bev__blokkeert { color: var(--fg-warning, var(--text-secondary)); }

/* Waarom een cluster wacht, met de paden erbij. Direct onder de planregel, want
   het hoort bij de stand van dat cluster en niet bij een losse pagina. */
.zv-cluster__wacht {
    margin-top: var(--sp-1);
    font-size: 0.8rem;
    color: var(--text-secondary);
    /* Paden zijn lang en hebben geen spaties: laat ze breken in plaats van
       de kaartkop uit te rekken. */
    overflow-wrap: anywhere;
}
.zv-cluster__wacht .mono { font-size: 0.76rem; color: var(--text-muted); }

/* Een tekst die klaarligt is geen mededeling maar werk: die regel krijgt de knop
   ernaast en een rand, zodat hij niet wegvalt tussen de pagina's die ergens op
   wachten. */
.zv-cluster__publiceren {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin-top: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text-secondary);
}
.zv-cluster__publiceren .btn { margin-left: auto; height: 30px; padding: 0 12px; font-size: 13px; }

/* Na het springen: even oplichten, anders weet je niet welk blok je zocht. */
.zv-gemarkeerd {
    animation: zv-oplichten 1.6s ease-out;
}
@keyframes zv-oplichten {
    0%   { background: var(--bg-warning, #FEF3C7); }
    100% { background: transparent; }
}

/* Adviezen die elkaar tegenspreken, bovenaan de actielijst. Eén blok per
   botsing: de paden, wat er botst, en de betrokken bevindingen eronder. */
.zv-conflict {
    margin-top: var(--sp-2);
    padding-top: var(--sp-2);
    border-top: 1px solid var(--divider-soft);
}
.zv-conflict__paden .mono { font-size: 0.8rem; }
.zv-conflict__uitleg { font-size: 0.82rem; margin-top: 2px; }
.zv-conflict__lijst {
    margin: var(--sp-1) 0 0 var(--sp-4);
    font-size: 0.82rem;
}


/* Posities op het overzicht: één balk met de verdeling, legenda eronder.
   Kwam uit Cogoo, waar hij tussen pagina- en clustercijfers stond die er niets
   mee te maken hadden. */
.ov-posities-balk {
    display: flex;
    height: 22px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: var(--sp-2);
    background: var(--surface-alt);
}
.ov-posities-seg {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: var(--fw-semi);
    color: #fff;
    min-width: 2px;
}
.ov-posities-seg.seg-top10 { background: #2e8f5c; }
.ov-posities-seg.seg-mid   { background: #e8b84a; color: #4a3a0a; }
.ov-posities-seg.seg-low   { background: #c7563f; }
.ov-posities-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    font-size: 0.78rem;
    color: var(--text-secondary);
}

/* De positiebalk als onderdeel van een KPI-kaart: dunner, zonder cijfers erin. */
.ov-posities-balk--kpi {
    height: 6px;
    margin: var(--sp-2) 0 6px;
}
.ov-posities-van {
    font-size: 0.72rem;
    font-weight: var(--fw-normal);
    color: var(--text-tertiary);
    margin-left: 6px;
}

/* Ontwikkeling per kanaal op het overzicht: naam, stand nu, lijn erachter.
   Eigen schaal per kanaal -- clicks en profielvertoningen op één as zetten
   drukt de kleinste lijn plat tegen de bodem. */
/* Vier kanalen naast elkaar op een normaal scherm; daaronder vouwen ze om. */
.ov-kanalen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--sp-3);
}
.ov-kanaal {
    background: var(--wit, #fff);
    border: 1px solid var(--divider-soft);
    border-radius: 10px;
    padding: var(--sp-3) var(--sp-4);
}
.ov-kanaal__naam {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: var(--fw-semi);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
}
.ov-kanaal__nu {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    margin: 2px 0 var(--sp-1);
    flex-wrap: wrap;
}
.ov-kanaal__waarde {
    font-size: 1.5rem;
    font-weight: var(--fw-semi);
    font-variant-numeric: tabular-nums;
}
.ov-kanaal__eenheid { font-size: 0.78rem; color: var(--text-muted); }
.ov-kanaal-pil {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.72rem;
    font-weight: var(--fw-semi);
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--surface-alt);
    color: var(--text-secondary);
}
.ov-kanaal-pil.is-up   { background: var(--bg-success, #DCFCE7); color: var(--fg-success, #166534); }
.ov-kanaal-pil.is-down { background: var(--bg-danger, #FEE2E2);  color: var(--fg-danger, #991B1B); }
.ov-kanaal-pil--open   { background: var(--bg-warning, #FEF3C7); color: var(--fg-warning, #78350F); }
.ov-kanaal__lijn {
    width: 100%;
    height: auto;
    display: block;
    margin: var(--sp-1) 0;
}
.ov-kanaal__pad  { fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.ov-kanaal__vlak { fill: var(--accent); opacity: 0.08; stroke: none; }
.ov-kanaal__punt { fill: var(--wit, #fff); stroke: var(--accent); stroke-width: 1.2; }
.ov-kanaal__punt.is-laatste { fill: var(--accent); }

/* Eén meting: geen grafiek maar een regel die zegt wat er nog moet komen. */
.ov-kanaal__eenmeting {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 46px;
    font-size: 0.75rem;
    color: var(--text-muted);
}
/* De maandas onder de lijn: even breed verdeeld als de punten erboven. */
.ov-kanaal__as {
    display: grid;
    margin-top: 2px;
    font-size: 0.68rem;
    color: var(--text-secondary);
    text-align: center;
}
.ov-kanaal__as .is-leeg { color: var(--text-disabled, #C4C4C4); }

.ov-kanaal__periode,
.ov-kanaal__extra {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Wat de keten hiervan kan oppakken, onder een bevinding in stap 3. Knop links,
   jouw deel ernaast -- zodat je in één blik ziet wat je zelf moet doen. */
.zv-bev__doen {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
    margin: var(--sp-2) 0 0 var(--zv-inspring, 0);
}
.zv-bev__handwerk {
    font-size: 0.78rem;
    color: var(--text-secondary);
}
.zv-bev__handwerk .mono { font-size: 0.74rem; }

/* 'Begin hier': één regel die zegt wat er nu ligt. De route eronder geeft de
   volgorde, maar bij vijf stappen waarvan er drie leeg zijn, zoek je het begin
   elke keer opnieuw op. */
.zv-beginhier {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-3);
    background: var(--bg-info, #EFF6FF);
    border: 1px solid var(--blue-100, #BFDBFE);
    border-radius: var(--radius);
}
/* Niets meer te doen: dan is dit geen opdracht maar een uitkomst. Groen in
   plaats van blauw, want de lijst is af. */
.zv-beginhier--klaar { background: #F0FDF4; border-color: #BBF7D0; }
.zv-beginhier--klaar .zv-beginhier__merk { color: #15803D; }

.zv-beginhier__merk {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: var(--fw-semi);
    font-size: 0.82rem;
    color: var(--fg-info, #1E40AF);
    white-space: nowrap;
}
.zv-beginhier__tekst {
    flex: 1;
    min-width: 220px;
    font-size: 0.88rem;
}

/* De tooltip bij een meetpunt. Los van de kaart in de body gehangen, want de
   kaarten hebben overflow en zouden hem afknippen. */
.ov-kanaal__raakvlak {
    fill: transparent;
    cursor: pointer;
}
.ov-tip {
    position: absolute;
    transform: translate(-50%, -100%);
    z-index: 70;
    padding: 5px 9px;
    border-radius: 6px;
    background: var(--text-primary, #1F2937);
    color: #fff;
    font-size: 0.74rem;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: var(--shadow-sm, 0 2px 6px rgba(0,0,0,0.2));
}
.ov-tip[hidden] { display: none; }

/* Wie deze klant doet, in de kop van de cockpit. Zelfde vorm als de
   medewerker-pil in de klantenlijst, zodat je hem herkent. */
.brand-header-wie {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 3px;
    border: 1px solid var(--divider-soft);
    border-radius: 999px;
    background: var(--wit, #fff);
    font-size: 0.82rem;
    white-space: nowrap;
}
.brand-header-wie img,
.brand-header-wie__initialen {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-alt);
    font-size: 0.62rem;
    font-weight: var(--fw-semi);
    color: var(--text-secondary);
}
.brand-header-wie__rol { color: var(--text-muted); }
.brand-header-wie--leeg {
    cursor: pointer;
    color: var(--text-muted);
    padding-left: 10px;
}
.brand-header-wie--leeg:hover { color: var(--accent); border-color: var(--border-accent); }

/* 'tekst': haalt op wat er nu staat en stelt een versie voor. Klein en grijs
   naast de regel, want het is hulp en geen hoofdactie. */
.zv-taak__tekstknop {
    grid-column: 2;
    justify-self: start;
    margin-top: 2px;
    background: none;
    border: 1px solid var(--divider-soft);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 0.7rem;
    color: var(--text-secondary);
    cursor: pointer;
}
.zv-taak__tekstknop:hover { border-color: var(--border-accent); color: var(--accent); }

.zv-voorstel { margin-bottom: var(--sp-3); }
.zv-voorstel__label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
    margin-bottom: 2px;
}
.zv-voorstel__tekst {
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--divider-soft);
    border-radius: var(--radius-sm);
    background: var(--surface-alt);
    font-size: 0.88rem;
    line-height: 1.5;
    margin-bottom: 6px;
}
.zv-voorstel__tekst--oud { color: var(--text-secondary); }

/* Het voorstel regel voor regel. Wat gelijk blijft mag wegvallen; wat verandert
   moet opvallen, met de oude regel er kort boven zodat je het verschil ziet
   zonder twee blokken naast elkaar te leggen. */
.zv-vgl__telling {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-bottom: var(--sp-2);
}
.zv-vgl {
    list-style: none;
    margin: 0 0 var(--sp-3);
    padding: 0;
    counter-reset: vgl;
}
.zv-vgl__regel {
    counter-increment: vgl;
    position: relative;
    padding: var(--sp-2) var(--sp-3) var(--sp-2) calc(var(--sp-3) + 22px);
    border-radius: var(--radius);
    font-size: 0.88rem;
    line-height: 1.5;
}
.zv-vgl__regel + .zv-vgl__regel { margin-top: 4px; }
.zv-vgl__regel::before {
    content: counter(vgl);
    position: absolute;
    left: var(--sp-3);
    top: calc(var(--sp-2) + 1px);
    font-size: 0.72rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* Alleen de regels die veranderen krijgen een vlak; de rest blijft achtergrond,
   anders lijkt alles even belangrijk. */
.zv-vgl__regel.is-anders { background: var(--accent-light); }
.zv-vgl__regel.is-gelijk,
.zv-vgl__regel.is-gelaten { color: var(--text-muted); }

.zv-vgl__nu {
    color: var(--text-muted);
    text-decoration: line-through;
    margin-bottom: 2px;
}
.zv-vgl__reden,
.zv-vgl__stempel {
    margin-top: 2px;
    font-size: 0.74rem;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.zv-vgl__reden { color: #b35f1a; }

/* Wat al gedaan is, op één regel onder de openstaande. Klik klapt het uit.
   Doorgestreepte regels tussen de open regels maakten de lijst lang en onrustig
   terwijl er niets meer te doen was. */
.zv-bev__gedaan {
    margin: var(--sp-1) 0 0 var(--zv-inspring);
    background: none;
    border: 0;
    padding: 0;
    font-size: 0.75rem;
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.zv-bev__gedaan:hover { color: var(--text-secondary); }
.zv-bev__gedaan.is-open { color: var(--text-secondary); font-weight: var(--fw-semi); }

/* De knoppen en 'raakt N clusters' lijnen uit met de tekst erboven. */
.zv-bev__extra:empty { display: none; }
.zv-bev__extra .zv-bev__doen { margin-left: 0; }

/* Suggesties bij 'Pagina toevoegen': welk onderwerp mist er nog in dit cluster?
   Een rij per voorstel, met het volume rechts van de term -- dat getal is de
   reden dat het een voorstel is. */
.tv2-sm-suggestieknop { margin-top: var(--sp-2); }
.tv2-sm-suggesties {
    margin-top: var(--sp-2);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tv2-sm-suggesties.is-bezig { font-size: 0.8rem; color: var(--text-muted); }
.tv2-sm-suggestie-melding { font-size: 0.8rem; color: var(--text-muted); }
.tv2-sm-suggestie {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px var(--sp-3);
    text-align: left;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
    font-family: inherit;
}
.tv2-sm-suggestie:hover { border-color: var(--accent); background: var(--accent-light); }
.tv2-sm-suggestie-term { font-size: 0.88rem; font-weight: var(--fw-semi); }
.tv2-sm-suggestie-vol {
    font-size: 0.75rem; color: var(--text-secondary);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tv2-sm-suggestie-url { grid-column: 1 / -1; font-size: 0.74rem; color: var(--text-muted); }
.tv2-sm-suggestie-waarom { grid-column: 1 / -1; font-size: 0.78rem; color: var(--text-secondary); }
.tv2-sm-suggestie-af { font-size: 0.76rem; color: var(--text-muted); margin-top: 2px; }
.tv2-sm-suggestie-af summary { cursor: pointer; }
.tv2-sm-suggestie-af div { padding: 2px 0 0 var(--sp-3); }

/* Waar haal ik een zoekwoord vandaan? Drie bronnen onder elkaar, met de gemeten
   bovenaan -- dat is de enige die geen aanname is. */
.zv-kwzoek { border-style: dashed; cursor: pointer; }
.zv-kwbron__kop {
    font-size: 0.78rem;
    font-weight: var(--fw-semi);
    color: var(--text-secondary);
    margin: var(--sp-3) 0 var(--sp-1);
}
.zv-kwbron__kop:first-child { margin-top: 0; }
.zv-kwbron__lijst { list-style: none; margin: 0; padding: 0; }
.zv-kwbron__lijst li {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--border-subtle);
}
.zv-kwbron__lijst li:last-child { border-bottom: 0; }
.zv-kwbron__term { font-size: 0.88rem; font-weight: var(--fw-semi); }
.zv-kwbron__cijfer { font-size: 0.75rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.zv-kwbron__lijst li .btn { margin-left: auto; height: 28px; padding: 0 12px; font-size: 12px; }
/* Bezet: te zien, niet te kiezen. Dat is de kannibalisatie zelf. */
.zv-kwbron__lijst li.is-bezet .zv-kwbron__term { color: var(--text-muted); }
.zv-kwbron__bezet { margin-left: auto; font-size: 0.75rem; color: #b35f1a; }

/* Hoe ver een klant is ingericht, in het klantenoverzicht. Eén chip per rij: het
   eerste gat, want de rest hangt eraan en vier etiketten leest niemand. */
.klant-inricht {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    white-space: nowrap;
    background: var(--surface-subtle);
    color: var(--text-secondary);
}
.klant-inricht--klaar { background: #F0FDF4; color: #15803D; }
.klant-inricht--bezig { background: #FEF3C7; color: #92400E; }
.klant-inricht--leeg  { background: var(--surface-subtle); color: var(--text-muted); }

/* De telling erboven, klikbaar als filter. */
.klanten-inricht-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: var(--sp-3);
}
.klanten-inricht__knop {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    background: var(--surface);
    font-size: 0.76rem;
    font-family: inherit;
    color: var(--text-secondary);
    cursor: pointer;
}
.klanten-inricht__knop span {
    font-weight: var(--fw-semi);
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}
.klanten-inricht__knop:hover { border-color: var(--accent); }
.klanten-inricht__knop.is-actief { border-color: var(--accent); background: var(--accent-light); }
.klanten-inricht__knop.is-klaar { color: #15803D; }

/* Het advies naast je neerleggen. Klein en rechts: het is een uitweg, geen
   hoofdhandeling -- die staat erboven in de regels zelf. */
.zv-bev__negeer {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: var(--sp-1);
    padding: 2px 8px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    background: none;
    font-family: inherit;
    font-size: 0.74rem;
    color: var(--text-muted);
    cursor: pointer;
}
.zv-bev__negeer:hover { color: #b3261e; border-color: #b3261e; }

/* Wat we bewust niet doen: dichtgeklapt, want het is geen werk. */
.zv-genegeerd {
    margin-top: var(--sp-4);
    padding: var(--sp-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    background: var(--surface-subtle);
}
.zv-genegeerd summary {
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: var(--fw-semi);
    color: var(--text-secondary);
}
.zv-genegeerd__rij {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px var(--sp-3);
    padding: var(--sp-2) 0;
    border-top: 1px solid var(--border-subtle);
}
.zv-genegeerd__tekst { font-size: 0.85rem; }
.zv-genegeerd__reden {
    grid-column: 1;
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-style: italic;
}
.zv-genegeerd__rij .btn { grid-row: 1 / 3; align-self: center; }

/* Een cluster zonder pagina's. Het stond er als grijze bijzin, terwijl het een
   keuze vraagt: een hoofdpagina, of geen cluster meer. */
.tv2-rubriek-leeg {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: var(--sp-3);
    margin: var(--sp-2) 0;
    border: 1px solid #FDE68A;
    border-radius: var(--radius);
    background: #FFFBEB;
    font-size: 0.82rem;
    color: #92400E;
    line-height: 1.5;
}
.tv2-rubriek-leeg b { display: block; }
.tv2-rubriek-leeg .btn { margin-left: auto; flex-shrink: 0; white-space: nowrap; }

/* ── Feedback op het merkprofiel ──────────────────────────────────────────
   Een blok is van de keten of van jou. Snijd je erin, dan is het van jou en
   laat de volgende ronde het met rust. Zie Merkprofielvastzetting. */
.mp-blok__knoppen { float: right; display: inline-flex; gap: 2px; }
.mp-blok__knop {
    background: none; border: 0; cursor: pointer; padding: 2px 4px;
    color: var(--pa-text-meta); border-radius: 4px; line-height: 1;
}
.mp-blok__knop:hover { background: rgba(0, 0, 0, 0.05); color: var(--pa-text); }
.mp-blok--vast { border-left: 2px solid var(--accent, #1A73E8); }
.mp-blok__vast {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    font-size: 11.5px; color: var(--pa-text-meta); margin: 4px 0 8px;
}
.mp-blok__vrij {
    background: none; border: 0; padding: 0; cursor: pointer;
    color: var(--accent, #1A73E8); font-size: 11.5px; text-decoration: underline;
}
.mp-bewerk { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.mp-bewerk__rijen { display: flex; flex-direction: column; gap: 6px; }
.mp-bewerk__rij { display: flex; gap: 6px; align-items: center; }
.mp-bewerk__rij .form-input { flex: 1; min-width: 0; }
.mp-bewerk__weg {
    background: none; border: 0; cursor: pointer; color: var(--pa-text-meta);
    padding: 2px 4px; line-height: 1;
}
.mp-bewerk__erbij { align-self: flex-start; }
.mp-bewerk__reden { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.mp-bewerk__acties { display: flex; gap: 8px; }

/* Wat iemand ergens van vond. Staat onder het blok, niet erin. */
.mp-opmerking {
    display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
    font-size: 11.5px; color: var(--pa-text-meta);
    padding: 4px 0; border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.mp-opmerking__regel { font-style: italic; }
.mp-opmerking__tekst { color: var(--pa-text); flex: 1; min-width: 120px; }
.mp-opmerking__weg {
    background: none; border: 0; cursor: pointer; color: var(--pa-text-meta);
    padding: 0 2px; line-height: 1;
}
.mp-opmerking-nieuw { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }

/* ── Gesprekken en het dienstenvoorstel ───────────────────────────────────
   Het gesprek is de bron, het gemeten volume het tegenwicht. */
/* Het blok krijgt zijn eigen padding: .card heeft er in deze app geen, de
   andere kaarten op dit scherm zetten hem inline. */
.gesprekken-blok { padding: var(--sp-4); }

.gesprek-lijst { list-style: none; margin: 0 0 var(--sp-4); padding: 0; }
/* Kolommen en geen losse woorden achter elkaar: zo lopen de datums, de omvang
   en de naam onder elkaar door en zie je in een blik wat er ligt. */
.gesprek-regel {
    display: grid;
    grid-template-columns: var(--sp-5) minmax(0, 1fr) auto auto auto var(--sp-5);
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) 0;
    font-size: var(--fs-sm);
    border-bottom: 1px solid var(--border-subtle);
}
.gesprek-icoon { color: var(--text-tertiary); line-height: 0; }
.gesprek-titel {
    justify-self: start; max-width: 100%;
    background: none; border: 0; padding: 0; cursor: pointer;
    font: inherit; font-weight: var(--fw-medium); color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    text-align: left;
}
.gesprek-titel:hover { color: var(--accent); }
.gesprek-datum, .gesprek-tekens, .gesprek-door {
    font-size: var(--fs-xs); color: var(--text-tertiary); white-space: nowrap;
}
.gesprek-datum  { min-width: 90px; text-align: right; }
.gesprek-tekens { min-width: 80px; text-align: right; font-variant-numeric: tabular-nums; }
.gesprek-door   { min-width: 100px; text-align: right; }
.gesprek-actie  { text-align: right; }
.gesprek-weg {
    background: none; border: 0; cursor: pointer;
    color: var(--text-tertiary); padding: 0 2px; line-height: 1;
}
.gesprek-weg:hover { color: var(--text-primary); }

/* De tekst van een gesprek, uitgeklapt onder zijn regel. Je moet kunnen
   nakijken waar een voorstel op rust; anders is het een lijst titels. */
.gesprek-tekst {
    margin: 0 0 var(--sp-2);
    padding: var(--sp-3) var(--sp-3) var(--sp-3) calc(var(--sp-5) + var(--sp-3));
    background: var(--surface-subtle);
    border-radius: var(--radius);
    font-size: var(--fs-sm); line-height: 1.55; color: var(--text-default);
    white-space: pre-wrap; max-height: 320px; overflow-y: auto;
}
.gesprek-tekst--laden { color: var(--text-tertiary); }

@media (max-width: 900px) {
    /* Op smal scherm vallen de kolommen weg; titel en datum blijven. */
    .gesprek-regel { grid-template-columns: var(--sp-5) minmax(0, 1fr) auto var(--sp-5); }
    .gesprek-tekens, .gesprek-door { display: none; }
}
.gesprek-nieuw { display: flex; flex-direction: column; gap: 8px; margin-top: var(--sp-3); }
/* De beoordelingslijst van het dienstenvoorstel.
   Het was een tabel met een alinea in een cel: rijen van vijf regels hoog en
   niets om op te scannen. Nu is elke regel een blok -- naam en oordeel op de
   bovenste regel, de reden eronder op leesbreedte. De oordelen staan rechts
   onder elkaar, zodat je de kolom verticaal kunt aflopen. */
.vst-lijst {
    margin-top: var(--sp-4);
    border-top: 1px solid var(--border-subtle);
}
.vst-regel {
    display: grid;
    grid-template-columns: var(--sp-6) 1fr 190px;
    grid-template-areas:
        "vink kop   oordeel"
        ".    reden oordeel";
    column-gap: var(--sp-3);
    row-gap: var(--sp-1);
    align-items: start;
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--border-subtle);
}
.vst-regel--advies { background: var(--surface-subtle); }
.vst-vink { grid-area: vink; padding-top: 2px; }
.vst-vink input { cursor: pointer; }

.vst-kop {
    grid-area: kop;
    display: flex; align-items: center; flex-wrap: wrap;
    gap: var(--sp-2);
}
.vst-naam {
    font-size: var(--fs-sm); font-weight: var(--fw-semi);
    color: var(--text-primary);
}
label.vst-naam { cursor: pointer; }
/* Kenmerken zijn geen status; een badge zou ze evenveel gewicht geven als het
   oordeel ernaast. Dit is bijschrift. */
.vst-kenmerk { font-size: var(--fs-xs); color: var(--text-tertiary); }
.vst-kenmerk + .vst-kenmerk::before { content: '· '; }

.vst-reden {
    grid-area: reden;
    margin: 0; max-width: 72ch;
    font-size: var(--fs-sm); line-height: 1.5;
    color: var(--text-default);
}
/* De herkomst hoort bij de reden maar is er geen onderdeel van: achter de punt
   las hij als slot van de zin, en hij sprong per regel mee met de afbreking. */
.vst-bron {
    display: block; margin-top: 2px;
    font-size: var(--fs-xs); color: var(--text-tertiary);
}

.vst-oordeel {
    grid-area: oordeel;
    display: flex; flex-direction: column; align-items: flex-end;
    gap: var(--sp-1); text-align: right;
}
.vst-pil {
    display: inline-flex; align-items: center;
    padding: 2px var(--sp-3);
    font-size: var(--fs-xs); font-weight: var(--fw-semi);
    border-radius: var(--radius-pill);
    background: var(--surface-sunken); color: var(--text-secondary);
}
.vst-pil--ja     { background: var(--bg-success); color: var(--fg-success); }
.vst-pil--advies { background: var(--bg-warning); color: var(--fg-warning); }

.vst-volume-blok {
    display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
}
.vst-volume {
    font-size: var(--fs-sm); font-weight: var(--fw-medium);
    color: var(--text-primary); font-variant-numeric: tabular-nums;
}
.vst-volume small { font-size: var(--fs-xs); color: var(--text-tertiary); font-weight: var(--fw-regular); }
.vst-volume--leeg { color: var(--text-disabled); }
/* Een geschat volume draagt zichtbaar dat woord: het is niet hetzelfde als een
   dienst waarvan de zoekwoorden werkelijk gekoppeld zijn. */
.vst-schatting {
    font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .3px;
    color: var(--text-tertiary); background: var(--surface-sunken);
    border-radius: var(--radius-sm); padding: 0 var(--sp-1);
}
.vst-volume-bij { font-size: var(--fs-xs); color: var(--text-tertiary); }
/* Wat een betere positie zou opleveren. Een verwachting op een vaste curve en
   geen belofte -- vandaar de tooltip, en geen nadruk die het als feit leest. */
.vst-winst {
    font-size: var(--fs-xs); font-weight: var(--fw-medium);
    color: var(--fg-success); background: var(--bg-success);
    border-radius: var(--radius-sm); padding: 0 var(--sp-1);
}

/* Wat het vinkje omzet, op de regel zelf. Zonder dat is een vinkje niet te
   wegen: bij Fluisterboot stond "geen wijziging nodig" in de reden terwijl het
   de dienst tot hoofddienst promoveerde. */
.vst-wijziging {
    font-size: var(--fs-xs); font-weight: var(--fw-medium);
    color: var(--fg-info); background: var(--bg-info);
    border-radius: var(--radius-sm); padding: 0 var(--sp-2);
}

/* Wat niets van je vraagt -- al uitgevoerd, of het staat al zo -- klapt weg.
   Anders lees je werk dat er al is als werk dat nog moet gebeuren. */
.vst-dicht { margin-top: var(--sp-3); }
.vst-dicht > summary {
    cursor: pointer; padding: var(--sp-2) 0;
    font-size: var(--fs-sm); color: var(--text-secondary);
}
.vst-dicht > summary::marker { color: var(--text-tertiary); }
.vst-regel--gedaan .vst-naam { color: var(--text-secondary); }
.vst-regel--gedaan .vst-vink { color: var(--fg-success); }

/* Wat jij van een regel vond. Blijft bij de klant hangen en gaat mee naar de
   volgende ronde, zodat die een antwoord is en geen herhaling. */
.vst-opmerking {
    display: inline-flex; align-items: baseline; gap: var(--sp-1);
    margin-top: var(--sp-2); padding: var(--sp-1) var(--sp-2);
    background: var(--bg-info); color: var(--fg-info);
    border-radius: var(--radius-sm); font-size: var(--fs-xs);
}
.vst-opmerking .vst-bron { display: inline; margin-left: var(--sp-1); color: inherit; opacity: .75; }
.vst-opmerking-weg {
    background: none; border: 0; padding: 0; cursor: pointer;
    color: inherit; opacity: .6; line-height: 1;
}
.vst-opmerking-weg:hover { opacity: 1; }
.vst-zegiets {
    display: block; margin-top: var(--sp-2);
    background: none; border: 0; padding: 0; cursor: pointer;
    font-size: var(--fs-xs); color: var(--accent);
}
.vst-zeg { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); max-width: 46ch; }
.vst-zeg .form-input { flex: 1; min-width: 0; }

.vst-voet { margin-top: var(--sp-4); }
.vst-bronnen {
    margin: var(--sp-2) 0 0;
    font-size: var(--fs-xs); color: var(--text-tertiary);
}

@media (max-width: 900px) {
    .vst-regel {
        grid-template-columns: var(--sp-6) 1fr;
        grid-template-areas:
            "vink kop"
            ".    oordeel"
            ".    reden";
    }
    .vst-oordeel { flex-direction: row; align-items: center; gap: var(--sp-2); }
    .vst-volume-blok { flex-direction: row; align-items: baseline; gap: var(--sp-2); }
}

/* ── Sparren over het voorstel ────────────────────────────────────────────
   Een gesprek is geen geheugen; een besluit wel -- vandaar dat een voorgesteld
   besluit een knop draagt en geen zin is. */
.spar {
    margin-top: var(--sp-5);
    border-top: 1px solid var(--border-subtle);
    padding-top: var(--sp-4);
}
.spar-kop {
    display: flex; align-items: center; gap: var(--sp-2);
    font-size: var(--fs-sm); font-weight: var(--fw-semi);
    color: var(--text-primary); margin-bottom: var(--sp-3);
}
.spar-berichten {
    display: flex; flex-direction: column; gap: var(--sp-3);
    max-height: 420px; overflow-y: auto;
}
.spar-bericht { max-width: 76ch; }
.spar-bericht--user { align-self: flex-end; }
.spar-bericht--user .spar-tekst { background: var(--accent-light); color: var(--text-primary); }
.spar-tekst {
    padding: var(--sp-2) var(--sp-3); border-radius: var(--radius);
    background: var(--surface-subtle); font-size: var(--fs-sm);
    line-height: 1.5; white-space: pre-wrap;
}
.spar-besluit {
    display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
    margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3);
    background: var(--bg-success); color: var(--fg-success);
    border-radius: var(--radius); font-size: var(--fs-xs);
}
.spar-besluit .vst-bron { display: inline; color: inherit; opacity: .75; }
.spar-invoer {
    display: flex; gap: var(--sp-2); margin-top: var(--sp-3); align-items: flex-end;
}
.spar-invoer .form-input { flex: 1; min-width: 0; }

/* ── Wat we gedaan hebben, in de klant-update ─────────────────────────────
   Onder de cijfers: die zeggen wat er is gebeurd, deze regels wat wij deden.
   Verbergen gooit niets weg -- de regel blijft hier staan, doorgestreept. */
.cu-acties-blok { margin-top: var(--sp-4); }
.cu-acties-kop {
    display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap;
    font-size: var(--fs-sm); font-weight: var(--fw-semi);
    color: var(--text-primary); margin-bottom: var(--sp-2);
}
.cu-acties-telling {
    font-size: var(--fs-xs); font-weight: var(--fw-regular); color: var(--text-tertiary);
}
.cu-acties { list-style: none; margin: 0 0 var(--sp-3); padding: 0; }
.cu-actie {
    display: grid; grid-template-columns: 84px minmax(0, 1fr) auto auto;
    align-items: baseline; gap: var(--sp-2);
    padding: var(--sp-2) 0; font-size: var(--fs-sm);
    border-bottom: 1px solid var(--border-subtle);
}
.cu-actie-datum {
    font-size: var(--fs-xs); color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
}
.cu-actie--verborgen .cu-actie-zin { text-decoration: line-through; color: var(--text-tertiary); }
.cu-actie--intern { opacity: .75; }
.cu-actie-label {
    font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .3px;
    background: var(--surface-sunken); color: var(--text-tertiary);
    border-radius: var(--radius-sm); padding: 0 var(--sp-1); margin-left: var(--sp-1);
}
.cu-actie-knop {
    background: none; border: 0; cursor: pointer; padding: 0 2px;
    color: var(--text-tertiary); line-height: 1;
}
.cu-actie-knop:hover { color: var(--text-primary); }
.cu-acties-leeg {
    display: flex; align-items: center; gap: var(--sp-2);
    font-size: var(--fs-sm); color: var(--text-tertiary);
}

/* Of de maandelijkse klantupdate eruit is. Een regel die je nergens kunt
   controleren is een voornemen, geen regel. */
.klant-update { line-height: 0; display: inline-flex; }
.klant-update--ja  { color: var(--fg-success); }
.klant-update--nee { color: var(--fg-warning); }

/* Of de klantupdate van de vorige maand eruit is. Amber is geen fout maar een
   herinnering: er staat nog werk open. Het kader gaat over de vorige afgesloten
   maand en niet over de periode die je op het scherm hebt staan. */
.ku-kader {
    display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
    padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3);
    border-radius: var(--radius); font-size: var(--fs-sm);
}
.ku-kader--ja  { background: var(--bg-success); color: var(--fg-success); }
.ku-kader--nee { background: var(--bg-warning); color: var(--fg-warning); }
.ku-kader .btn { margin-left: var(--sp-1); }

/* Het versturen in de voet van de klant-update. Rechts, los van Kopieer HTML:
   dat is de weg eromheen, dit is de weg erdoorheen. */
.cu-verstuur { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
.cu-verstuur .form-input { max-width: 220px; }