/* =====================================================================
   AFAS Competitor Intelligence — Stylesheet
   AFAS brand: #005FAA (blue) · #F59F39 (orange) · #3CC658 (green)
               #1A1F24 (black) · #41474D (dark gray) · #C3CBD3 (light gray)
               #D7EAFF (extra light blue) · #F2F5F8 (background)
   Fonts: Roboto 900/300 headings · Open Sans 400/300 body
   ===================================================================== */

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Open Sans', Arial, sans-serif; background: #F2F5F8; color: #41474D; }

/* ── TOP BAR ── */
.topbar {
  background: #005FAA; color: white; padding: 14px 28px;
  display: flex; align-items: center; justify-content: space-between;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2); position: sticky; top: 0; z-index: 100;
}
.topbar .logo { font-family: 'Roboto', Arial, sans-serif; font-size: 1.2rem; font-weight: 900; letter-spacing: 0.5px; }
.topbar .logo span { color: #F59F39; font-weight: 300; }
.topbar .updated { font-size: 0.8rem; opacity: 0.8; font-weight: 300; }

/* ── LAYOUT ── */
.layout { display: flex; min-height: calc(100vh - 54px); }

/* ── SIDEBAR ── */
.sidebar {
  width: 240px; background: white; padding: 20px 16px;
  border-right: 1px solid #C3CBD3; flex-shrink: 0;
  position: sticky; top: 54px; height: calc(100vh - 54px); overflow-y: auto;
}
.sidebar h3 {
  font-family: 'Roboto', Arial, sans-serif; font-size: 0.68rem;
  text-transform: uppercase; letter-spacing: 1.2px;
  color: #C3CBD3; margin-bottom: 10px; margin-top: 22px; font-weight: 700;
}
.sidebar h3:first-child { margin-top: 0; }
.sidebar-hint { cursor: help; color: #C3CBD3; font-weight: 400; }
.filter-chip {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px; border-radius: 8px; cursor: pointer; font-size: 0.84rem;
  margin-bottom: 3px; transition: background 0.15s;
}
.filter-chip:hover { background: #D7EAFF; }
.filter-chip.active { background: #D7EAFF; color: #005FAA; font-weight: 600; }
.filter-chip-left { display: flex; align-items: center; gap: 8px; }
.chip-count { font-size: 0.7rem; color: #C3CBD3; font-weight: 400; }
.filter-chip.active .chip-count { color: #0074D0; }
/* Self-audit telling: aantal gevolgde pagina's i.p.v. een misleidende '0'. */
.chip-count.chip-audit { color: #005FAA; font-weight: 700; font-size: 0.66rem; }

/* AFAS (wijzelf) — apart gemarkeerd bovenaan de zijbalk: lichte AFAS-blauwe
   achtergrond + linkerrand zodat de zelf-audit duidelijk losstaat van de
   echte concurrenten. */
.filter-chip.is-self {
  background: #EAF3FB; border-left: 3px solid #005FAA; font-weight: 600;
  margin-bottom: 10px;
}
.filter-chip.is-self:hover { background: #D7EAFF; }
.filter-chip.is-self.active { background: #D7EAFF; }
.self-tag {
  font-size: 0.62rem; font-weight: 700; color: #fff; background: #005FAA;
  padding: 1px 6px; border-radius: 999px; letter-spacing: 0.02em;
}

.dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.dot-all      { background: #C3CBD3; }
.dot-exact    { background: #e74c3c; }
.dot-unit4    { background: #3498db; }
.dot-visma    { background: #2ecc71; }
.dot-nmbrs    { background: #9b59b6; }
.dot-loket    { background: #f39c12; }
.dot-personio { background: #1abc9c; }
.dot-youforce { background: #e67e22; }

.type-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px;
  border-radius: 6px; font-size: 0.78rem; cursor: pointer; margin: 2px;
  border: 1.5px solid #C3CBD3; background: white; transition: all 0.15s; color: #41474D;
}
.type-chip.active { border-color: #005FAA; background: #D7EAFF; color: #005FAA; font-weight: 600; }
/* Lege bron: nog geen data → niet klikbaar, uitgegrijsd met 'binnenkort'-label. */
.type-chip.is-empty { cursor: default; opacity: 0.55; border-style: dashed; color: #8A929A; background: #F6F8FA; }
.type-count {
  font-size: 0.68rem; font-weight: 700; min-width: 15px; text-align: center;
  padding: 0 5px; border-radius: 999px; background: #E4E9EE; color: #41474D;
}
.type-chip.active .type-count { background: #005FAA; color: #fff; }
.type-soon {
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 999px; background: #E4E9EE; color: #8A929A;
}

.date-select {
  padding: 6px 10px; border-radius: 6px; border: 1px solid #C3CBD3;
  font-size: 0.82rem; color: #41474D; background: white;
  font-family: 'Open Sans', Arial, sans-serif; width: 100%;
}
.date-select:focus { outline: 2px solid #005FAA; border-color: #005FAA; }

/* ── MAIN ── */
.main { flex: 1; padding: 24px; overflow-y: auto; }

/* ── INSIGHT BANNER ── */
.insight-banner {
  background: #D7EAFF; border-left: 4px solid #005FAA; border-radius: 0 8px 8px 0;
  padding: 12px 16px; margin-bottom: 20px; font-size: 0.83rem; color: #1A1F24; line-height: 1.6;
}
.insight-banner strong { color: #005FAA; font-family: 'Roboto', Arial, sans-serif; }
.insight-sep { color: #0074D0; margin: 0 8px; }

/* AI-recap variant (backend/recap.py) */
.insight-banner.has-recap { background: #EAF3FF; padding: 14px 18px; }
.insight-recap { display: block; }
.insight-recap-label {
  display: inline-block; font-family: 'Roboto', Arial, sans-serif; font-weight: 700;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.4px;
  color: #005FAA; margin-bottom: 4px;
}
.insight-recap-text { display: block; font-size: 0.9rem; line-height: 1.55; color: #1A1F24; }
.insight-highlights {
  margin: 10px 0 0; padding-left: 0; list-style: none;
  display: flex; flex-direction: column; gap: 5px;
}
.insight-highlights li {
  position: relative; padding-left: 18px; font-size: 0.83rem; line-height: 1.45; color: #2A3640;
}
.insight-highlights li::before {
  content: '▸'; position: absolute; left: 2px; color: #0074D0; font-weight: 700;
}

/* ── KPI CARDS ── */
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.kpi-card {
  background: white; border-radius: 12px; padding: 18px 20px;
  box-shadow: 0 1px 4px rgba(0,95,170,0.08); border-left: 4px solid;
}
.kpi-card.blue   { border-color: #0074D0; }
.kpi-card.green  { border-color: #3CC658; }
.kpi-card.purple { border-color: #9b59b6; }
.kpi-card.orange { border-color: #F59F39; }
.kpi-label { font-size: 0.72rem; color: #C3CBD3; text-transform: uppercase; letter-spacing: 0.8px; font-weight: 600; }
.kpi-value { font-family: 'Roboto', Arial, sans-serif; font-size: 2.2rem; font-weight: 900; margin: 5px 0 3px; color: #1A1F24; }
.kpi-sub { font-size: 0.78rem; color: #3CC658; font-weight: 600; }
.kpi-sub.warn { color: #F59F39; }

/* ── TABS ── */
.tabs { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 2px solid #C3CBD3; }
.tab {
  padding: 10px 20px; cursor: pointer; font-size: 0.88rem; font-weight: 400;
  color: #C3CBD3; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: all 0.15s;
}
.tab:hover { color: #005FAA; }
.tab.active { color: #005FAA; border-bottom-color: #005FAA; font-weight: 700; }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ── EVENT CARDS ── */
.event-card {
  background: white; border-radius: 10px; padding: 16px 20px;
  margin-bottom: 12px; box-shadow: 0 1px 3px rgba(0,95,170,0.07);
  display: flex; gap: 16px; align-items: flex-start; border-left: 4px solid #C3CBD3;
}
.event-card.website { border-color: #0074D0; }
.event-card.landing { border-color: #3CC658; }
.event-card.ad      { border-color: #9b59b6; }
.event-card.news    { border-color: #F59F39; }

.event-icon  { font-size: 1.4rem; flex-shrink: 0; margin-top: 2px; }
.event-body  { flex: 1; }
.event-header { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; flex-wrap: wrap; }
.event-title { font-family: 'Roboto', Arial, sans-serif; font-size: 0.92rem; font-weight: 700; color: #1A1F24; margin-bottom: 4px; }
.event-desc  { font-size: 0.83rem; color: #41474D; line-height: 1.6; }
.event-time  { font-size: 0.75rem; color: #C3CBD3; flex-shrink: 0; white-space: nowrap; }

/* ── BADGES & LABELS ── */
.competitor-badge {
  font-family: 'Roboto', Arial, sans-serif; font-size: 0.7rem; font-weight: 700;
  padding: 2px 9px; border-radius: 20px; color: white;
  text-transform: uppercase; letter-spacing: 0.8px;
}
.bg-exact    { background: #e74c3c; }
.bg-unit4    { background: #3498db; }
.bg-visma    { background: #2ecc71; color: #1A1F24 !important; }
.bg-nmbrs    { background: #9b59b6; }
.bg-loket    { background: #f39c12; color: #1A1F24 !important; }
.bg-personio { background: #1abc9c; color: #1A1F24 !important; }
.bg-youforce  { background: #e67e22; }

.source-label { font-size: 0.72rem; padding: 2px 8px; border-radius: 20px; font-weight: 600; }
.source-label.website { background: #D7EAFF; color: #005FAA; }
.source-label.landing { background: #e8f8f5; color: #1a9b7b; }
.source-label.ad      { background: #f5eef8; color: #7d3c98; }
.source-label.news    { background: #fef9e7; color: #b7770d; }

/* ── KEYWORD TAGS ── */
.keyword-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.keyword-tag {
  font-size: 0.72rem; padding: 2px 8px; background: #F2F5F8;
  border-radius: 12px; color: #41474D; border: 1px solid #C3CBD3;
}

/* ── LANDING PAGE TABLE ── */
table { width: 100%; border-collapse: collapse; background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,95,170,0.07); }
th {
  background: #F2F5F8; font-family: 'Roboto', Arial, sans-serif;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.8px;
  color: #C3CBD3; padding: 12px 16px; text-align: left;
  border-bottom: 1px solid #C3CBD3; font-weight: 700;
}
td { padding: 12px 16px; font-size: 0.85rem; border-bottom: 1px solid #F2F5F8; vertical-align: top; color: #41474D; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: #F2F5F8; }
.url-cell { color: #0074D0; text-decoration: none; font-size: 0.8rem; }
.url-cell:hover { text-decoration: underline; }

/* ── AD CARDS ── */
.ad-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.ad-card { background: white; border-radius: 10px; padding: 18px; box-shadow: 0 1px 4px rgba(0,95,170,0.07); }
.ad-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.ad-status { font-size: 0.72rem; padding: 3px 10px; border-radius: 12px; font-weight: 600; }
.ad-status.active  { background: #eafaf1; color: #1e8449; }
.ad-status.new     { background: #fef9e7; color: #b7770d; animation: pulse-new 2s ease-in-out infinite; }
.ad-status.stopped { background: #fdecea; color: #c0392b; }
@keyframes pulse-new {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,159,57,0.4); }
  50%       { box-shadow: 0 0 0 5px rgba(245,159,57,0); }
}
.ad-copy {
  font-size: 0.85rem; color: #41474D; line-height: 1.6; background: #F2F5F8;
  padding: 12px; border-radius: 8px; margin-bottom: 10px;
  font-style: italic; border-left: 3px solid #D7EAFF;
}
.ad-meta { font-size: 0.75rem; color: #C3CBD3; display: flex; gap: 14px; }

/* ── TOPIC HEATMAP ── */
.heatmap-wrapper { background: white; border-radius: 12px; padding: 24px; box-shadow: 0 1px 4px rgba(0,95,170,0.07); }
.heatmap-grid {
  display: grid; grid-template-columns: 130px repeat(8, 1fr); gap: 5px; margin-top: 16px;
}
.hm-header {
  font-family: 'Roboto', Arial, sans-serif; font-size: 0.65rem; text-align: center;
  color: #41474D; font-weight: 700; padding: 4px 2px; line-height: 1.3;
  text-transform: uppercase; letter-spacing: 0.5px; transition: color 0.2s;
}
.hm-header.highlighted { color: #005FAA; }
.hm-col-highlight { outline: 2px solid #005FAA; border-radius: 4px; }
.hm-label { font-size: 0.8rem; color: #1A1F24; font-weight: 600; display: flex; align-items: center; }
.hm-cell {
  height: 50px; border-radius: 6px; cursor: default;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Roboto', Arial, sans-serif; font-size: 0.88rem; font-weight: 700;
  transition: transform 0.12s, box-shadow 0.12s; position: relative;
}
.hm-cell:hover { transform: scale(1.1); box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 2; }

/* Schaal = aantal strategische pagina's per topic · 5 bands + "geen data" */
.hm-0 { background: #F2F5F8; color: #C3CBD3; }          /* 0        */
.hm-1 { background: #D7EAFF; color: #005FAA; }          /* 1–3      */
.hm-2 { background: #0074D0; color: white; }            /* 4–7      */
.hm-3 { background: #005FAA; color: white; }            /* 8–11     */
.hm-4 { background: #1A1F24; color: white; }            /* 12+      */
.hm-nodata { background: repeating-linear-gradient(45deg, #EEF1F4, #EEF1F4 5px, #E4E8EC 5px, #E4E8EC 10px); color: #9AA5AF; border: 1px dashed #C3CBD3; }  /* niet gemeten */

.heatmap-legend { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 0.75rem; flex-wrap: wrap; }
.leg-swatch { width: 20px; height: 14px; border-radius: 3px; flex-shrink: 0; }
.leg-label { color: #41474D; }
.leg-range { font-size: 0.68rem; color: #C3CBD3; }

/* ── HOT TOPICS BANNER ── */
.hot-topics-banner {
  display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
  flex-wrap: wrap; padding: 14px 18px; background: white;
  border-radius: 10px; box-shadow: 0 1px 4px rgba(0,95,170,0.07);
}
.hot-topics-label {
  font-family: 'Roboto', Arial, sans-serif; font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.9px; color: #41474D; white-space: nowrap;
}
.hot-topics-sub { font-size: 0.75rem; color: #C3CBD3; margin-right: 4px; }
.hot-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px;
  border-radius: 20px; font-size: 0.78rem; font-weight: 600; cursor: pointer;
  transition: all 0.15s; border: 1.5px solid transparent;
}
.hot-pill.fire      { background: #fef4e7; color: #c0560a; border-color: #F59F39; }
.hot-pill.fire:hover { background: #F59F39; color: white; }
.hot-pill.new-topic  { background: #D7EAFF; color: #005FAA; border-color: #0074D0; }
.hot-pill.new-topic:hover { background: #005FAA; color: white; }
.hot-count { font-size: 0.68rem; background: rgba(0,0,0,0.1); border-radius: 10px; padding: 1px 5px; }

/* ── CHART ── */
.chart-card { background: white; border-radius: 12px; padding: 20px; box-shadow: 0 1px 4px rgba(0,95,170,0.07); margin-bottom: 20px; }
.chart-card h3 { font-family: 'Roboto', Arial, sans-serif; font-size: 0.88rem; font-weight: 700; margin-bottom: 4px; color: #1A1F24; }
.chart-subtitle { font-size: 0.78rem; color: #C3CBD3; margin-bottom: 14px; }

/* ── DETAIL VIEW ── */
#view-detail { display: none; }

.detail-back {
  display: inline-flex; align-items: center; gap: 6px; font-size: 0.83rem;
  color: #0074D0; cursor: pointer; margin-bottom: 20px; font-weight: 600; transition: color 0.15s;
}
.detail-back:hover { color: #005FAA; }

.detail-header {
  display: flex; align-items: center; gap: 14px; margin-bottom: 24px;
  padding-bottom: 16px; border-bottom: 2px solid #F2F5F8;
}
.detail-dot  { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.detail-name { font-family: 'Roboto', Arial, sans-serif; font-size: 1.6rem; font-weight: 900; color: #1A1F24; }
.detail-meta { font-size: 0.82rem; color: #C3CBD3; margin-left: auto; }
.detail-meta strong { color: #005FAA; font-family: 'Roboto', Arial, sans-serif; }

.detail-section { margin-bottom: 32px; }
.detail-section-title {
  font-family: 'Roboto', Arial, sans-serif; font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px; color: #C3CBD3;
  margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}
.detail-section-count {
  background: #F2F5F8; border-radius: 10px; padding: 1px 8px; font-size: 0.72rem; color: #41474D;
}

/* ── DIFF CARDS ── */
.diff-card {
  background: white; border-radius: 10px; padding: 18px 20px; margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0,95,170,0.07); border-left: 4px solid #0074D0;
}
.diff-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.diff-page { font-family: 'Roboto', Arial, sans-serif; font-size: 0.88rem; font-weight: 700; color: #1A1F24; }
.diff-page a { color: #0074D0; text-decoration: none; font-weight: 400; font-size: 0.78rem; margin-left: 8px; }
.diff-page a:hover { text-decoration: underline; }
.diff-time  { font-size: 0.75rem; color: #C3CBD3; }
.diff-block {
  background: #F2F5F8; border-radius: 8px; padding: 14px;
  font-size: 0.83rem; line-height: 1.9; font-family: monospace;
}
.diff-del { background: #fdecea; color: #c0392b; text-decoration: line-through; border-radius: 3px; padding: 0 3px; margin: 0 1px; }
.diff-add { background: #eafaf1; color: #1e8449; border-radius: 3px; padding: 0 3px; margin: 0 1px; }

/* ── DETAIL LANDING PAGES ── */
.detail-lp-list { display: flex; flex-direction: column; gap: 8px; }
.detail-lp-item {
  background: white; border-radius: 8px; padding: 12px 16px;
  box-shadow: 0 1px 3px rgba(0,95,170,0.07);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.detail-lp-url   { color: #0074D0; font-size: 0.85rem; text-decoration: none; font-weight: 600; }
.detail-lp-url:hover { text-decoration: underline; }
.detail-lp-title { font-size: 0.8rem; color: #41474D; }
.detail-lp-date  { font-size: 0.72rem; color: #C3CBD3; margin-left: auto; white-space: nowrap; }
.topic-badge     { font-size: 0.68rem; padding: 2px 8px; border-radius: 10px; background: #D7EAFF; color: #005FAA; font-weight: 600; white-space: nowrap; }

/* ── PLACEHOLDER ── */
.detail-placeholder { text-align: center; padding: 60px 20px; color: #C3CBD3; }
.detail-placeholder .placeholder-icon { font-size: 3rem; margin-bottom: 12px; }
.detail-placeholder p { font-size: 0.9rem; }
.detail-placeholder strong { color: #005FAA; }

/* =====================================================================
   v2 — BELGIË REBUILD (segmenten, nieuwe signaaltypes, data-driven)
   ===================================================================== */

/* ── TOPBAR RIGHT + SEGMENT SWITCH ── */
.topbar .logo em { color: #D7EAFF; font-style: normal; font-weight: 300; font-size: 0.95rem; }
.topbar-right { display: flex; align-items: center; gap: 18px; }
.segment-switch { display: inline-flex; background: rgba(255,255,255,0.15); border-radius: 8px; padding: 3px; }
.seg-btn {
  border: none; background: transparent; color: #D7EAFF; cursor: pointer;
  font-family: 'Roboto', Arial, sans-serif; font-size: 0.8rem; font-weight: 700;
  padding: 6px 14px; border-radius: 6px; transition: all 0.15s; white-space: nowrap;
}
.seg-btn:hover { color: white; }
.seg-btn.active { background: white; color: #005FAA; }

/* ── SIDEBAR EXTRAS ── */
.seg-tag {
  font-family: 'Open Sans', Arial, sans-serif; font-size: 0.62rem; font-weight: 700;
  background: #D7EAFF; color: #005FAA; border-radius: 8px; padding: 1px 7px;
  text-transform: none; letter-spacing: 0; margin-left: 6px; vertical-align: middle;
}
.be-flag { font-size: 0.78rem; margin-left: 2px; }
.global-flag { font-size: 0.74rem; margin-left: 3px; color: #6B7686; font-weight: 700; }
.rank-1 {
  font-family: 'Roboto', Arial, sans-serif; font-size: 0.6rem; font-weight: 900;
  background: #F59F39; color: white; border-radius: 6px; padding: 1px 5px; margin-left: 4px;
}
.detail-name .rank-1 { font-size: 0.7rem; vertical-align: middle; }

/* ── SOURCE FILTER CHIPS ── */
#source-filters { display: flex; flex-wrap: wrap; gap: 5px; }
.type-chip.is-high { border-style: solid; }
.type-chip.is-high.active { box-shadow: 0 0 0 1px #005FAA inset; }

/* ── SIGNAL CARD priority accents ── */
.event-card.prio-high  { box-shadow: 0 1px 3px rgba(0,95,170,0.07), -3px 0 0 -1px rgba(0,95,170,0.0); }
.event-card .source-label.src-high   { background: #D7EAFF; color: #005FAA; }
.event-card .source-label.src-medium { background: #F2F5F8; color: #41474D; }
.event-card .source-label.src-low    { background: #f5eef8; color: #7d3c98; }
.topic-chip { font-size: 0.68rem; padding: 2px 8px; border-radius: 10px; background: #eef7ff; color: #0074D0; border: 1px solid #D7EAFF; white-space: nowrap; }
.fresh-dot { color: #F59F39; font-size: 0.7rem; margin-left: auto; animation: pulse-fresh 1.8s ease-in-out infinite; }
@keyframes pulse-fresh { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ── "NIEUW SINDS VORIGE CHECK" ──
   Markeert signalen die ná de vorige run zijn gedetecteerd. PREV_RUN-gedreven
   (zie main.js isNewSignal) — verschijnt automatisch, verdwijnt zodra een
   volgende check draait. */
.new-badge {
  margin-left: auto;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 2px 9px;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(135deg, #F59F39, #E8741A);
  box-shadow: 0 1px 4px rgba(232, 116, 26, 0.35);
  white-space: nowrap;
  animation: pulse-fresh 2.2s ease-in-out infinite;
}

/* ── INLINE DIFF BLOCK (in feed cards) ── */
.event-card .diff-block { margin-top: 10px; line-height: 1.6; }
.diff-block .diff-page { font-family: 'Roboto', Arial, sans-serif; font-size: 0.8rem; font-weight: 700; color: #1A1F24; margin-bottom: 6px; }
.diff-block .diff-page a { color: #0074D0; text-decoration: none; font-weight: 400; font-size: 0.74rem; margin-left: 6px; }
.diff-block .diff-page a:hover { text-decoration: underline; }
.diff-text { font-family: monospace; font-size: 0.8rem; }
.diff-arrow { color: #C3CBD3; margin: 0 8px; }

/* ── AD / LINKEDIN BLOCK ── */
.ad-block { margin-top: 10px; background: #F2F5F8; border-radius: 8px; padding: 12px; border-left: 3px solid #C3CBD3; display: flex; gap: 12px; align-items: flex-start; }
.ad-block.new    { border-left-color: #F59F39; }
.ad-block.active { border-left-color: #3CC658; }
.ad-block.inactive { border-left-color: #C3CBD3; }
.ad-block.stopped { border-left-color: #c0392b; }
.ad-block .ad-thumb { width: 72px; height: 96px; object-fit: cover; border-radius: 6px; flex-shrink: 0; background: #E3E8ED; border: 1px solid #DCE2E8; cursor: zoom-in; transition: transform .12s ease, box-shadow .12s ease; }
.ad-block .ad-thumb:hover { transform: scale(1.04); box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.ad-block .ad-body { flex: 1; min-width: 0; }
.ad-block .ad-copy { font-size: 0.84rem; color: #41474D; font-style: italic; line-height: 1.6; margin-bottom: 8px; }
.ad-block .ad-meta { font-size: 0.73rem; color: #C3CBD3; display: flex; gap: 14px; flex-wrap: wrap; }
.ad-media { font-weight: 600; color: #6B7480; }
/* LinkedIn-intel (impressies · BE-aandeel · targeting): iets prominenter dan de
   gewone ad-meta omdat het waardevolle B2B-data is die Meta niet geeft. */
.ad-block .ad-meta-li { margin-top: 5px; color: #4A5560; }
.ad-block .ad-meta-li span { background: #EAF2FA; border: 1px solid #D4E4F2; border-radius: 4px; padding: 1px 6px; }

/* ── AD LIGHTBOX ── */
.ad-lightbox { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; background: rgba(20,24,28,.82); backdrop-filter: blur(2px); cursor: zoom-out; }
.ad-lightbox.open { display: flex; }
.ad-lightbox-fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 92vw; max-height: 92vh; }
.ad-lightbox-img { max-width: 90vw; max-height: 82vh; border-radius: 10px; box-shadow: 0 12px 48px rgba(0,0,0,.5); cursor: pointer; background: #fff; }
.ad-lightbox-cap { color: #F2F5F8; font-size: .82rem; background: rgba(0,0,0,.4); padding: 6px 14px; border-radius: 20px; }
.ad-lightbox-close { position: fixed; top: 20px; right: 26px; width: 42px; height: 42px; border: none; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 1.2rem; cursor: pointer; line-height: 1; }
.ad-lightbox-close:hover { background: rgba(255,255,255,.28); }

/* ── TOOL BLOCK (configurator etc.) ── */
.tool-block {
  margin-top: 10px; background: #fff7ed; border: 1px solid #F59F39; border-radius: 8px;
  padding: 10px 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.tool-block .tool-kind {
  font-family: 'Roboto', Arial, sans-serif; font-size: 0.66rem; font-weight: 700;
  background: #F59F39; color: white; border-radius: 6px; padding: 2px 8px; text-transform: uppercase; letter-spacing: 0.5px;
}
.tool-block a { color: #b7770d; font-size: 0.8rem; text-decoration: none; font-weight: 600; }
.tool-block a:hover { text-decoration: underline; }

/* ── HEATMAP TITLE ── */
.hm-title { font-family: 'Roboto', Arial, sans-serif; font-size: 0.95rem; font-weight: 700; color: #1A1F24; margin-bottom: 4px; }
.hm-sub { font-size: 0.8rem; color: #C3CBD3; margin-bottom: 4px; }

/* ── DETAIL NOTE + MINI HEATMAP ── */
.detail-note { font-size: 0.85rem; color: #41474D; line-height: 1.6; margin-bottom: 18px; background: #F2F5F8; border-radius: 8px; padding: 12px 16px; }
.detail-mini-heatmap { display: flex; gap: 6px; margin-bottom: 28px; flex-wrap: wrap; }
.dm-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 64px; height: 56px; border-radius: 8px; font-size: 1rem;
}
.dm-cell span { font-family: 'Roboto', Arial, sans-serif; font-size: 0.78rem; font-weight: 700; }

/* ── EMPTY STATE ── */
.empty-state { text-align: center; padding: 40px 20px; color: #C3CBD3; font-size: 0.9rem; }

/* =====================================================================
   v3 — DATA-MODEL UPGRADE
   AFAS-actie strip · impact-badges · markt/regelgeving · baseline · profiel
   ===================================================================== */

/* ── AFAS-ACTIE STRIP (afasAngle) ── */
.afas-angle {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 12px; padding: 10px 12px;
  background: #FFF6EC; border-left: 3px solid #F59F39; border-radius: 6px;
}
.afas-angle-label {
  flex-shrink: 0; font-family: 'Roboto', Arial, sans-serif; font-weight: 700;
  font-size: 0.62rem; letter-spacing: 0.6px; text-transform: uppercase;
  color: #B45C00; background: #FBE3C6; padding: 3px 8px; border-radius: 4px; margin-top: 1px;
}
.afas-angle-text { font-size: 0.82rem; line-height: 1.5; color: #6B4A1E; }

/* ── IMPACT BADGES ── */
.impact-badge {
  font-family: 'Roboto', Arial, sans-serif; font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.4px; text-transform: uppercase; padding: 3px 8px; border-radius: 20px;
}
.impact-high   { background: #FDE2E2; color: #C0392B; }
.impact-medium { background: #FFF1D6; color: #B45C00; }
.impact-low    { background: #E7ECF1; color: #6B7680; }

/* ── SORT CONTROL ── */
.feed-controls { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.feed-controls-label { font-size: 0.78rem; color: #6B7680; font-weight: 600; }
.sort-select {
  font-family: 'Open Sans', Arial, sans-serif; font-size: 0.8rem; color: #41474D;
  padding: 6px 10px; border: 1px solid #C3CBD3; border-radius: 6px; background: white; cursor: pointer;
}

/* ── NOISE TOGGLE + KAART-RUISUITLEG ── */
.noise-toggle {
  display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
  font-size: 0.78rem; color: #41474D; cursor: pointer; user-select: none;
  background: white; border: 1px solid #C3CBD3; border-radius: 6px; padding: 5px 10px;
}
.noise-toggle input { cursor: pointer; accent-color: #005FAA; }
.noise-toggle .noise-count { color: #98A4AE; font-size: 0.72rem; }
.noise-badge {
  font-family: 'Roboto', Arial, sans-serif; font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.3px; text-transform: uppercase; padding: 3px 8px; border-radius: 20px;
  background: #EFE7DA; color: #8A6D3B;
}
.event-card.is-noise { opacity: 0.92; border-left-style: dashed; }
.noise-hint {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 12px; padding: 10px 12px;
  background: #F4F1EC; border-left: 3px solid #B9A98C; border-radius: 6px;
}
.noise-hint-label {
  flex-shrink: 0; font-family: 'Roboto', Arial, sans-serif; font-weight: 700;
  font-size: 0.62rem; letter-spacing: 0.5px; text-transform: uppercase;
  color: #6E5E3E; background: #E4DBC9; padding: 3px 8px; border-radius: 4px; margin-top: 1px;
}
.noise-hint-text { font-size: 0.82rem; line-height: 1.5; color: #5E5340; }

/* ── AI-DUIDING (waarom dit signaal er wél toe doet) ── */
.ai-insight {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 12px; padding: 10px 12px;
  background: #EAF3FC; border-left: 3px solid #0074D0; border-radius: 6px;
}
.ai-insight-label {
  flex-shrink: 0; font-family: 'Roboto', Arial, sans-serif; font-weight: 700;
  font-size: 0.62rem; letter-spacing: 0.5px; text-transform: uppercase;
  color: #005FAA; background: #D7EAFF; padding: 3px 8px; border-radius: 4px; margin-top: 1px;
}
.ai-insight-text { font-size: 0.82rem; line-height: 1.5; color: #2C4A66; }

/* ── COMPETITOR PROFILE HEADER ── */
#competitor-profile { display: none; }
#competitor-profile.visible { display: block; margin-bottom: 22px; }
.profile-card {
  display: flex; background: white; border-radius: 12px; overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06); border: 1px solid #E2E8EE;
}
.profile-accent { width: 8px; background: var(--brand); flex-shrink: 0; }
.profile-main { padding: 18px 22px; flex: 1; }
.profile-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.profile-back {
  font-family: 'Open Sans', Arial, sans-serif; font-size: 0.8rem; font-weight: 600;
  color: #005FAA; background: none; border: none; cursor: pointer; padding: 0;
}
.profile-back:hover { text-decoration: underline; }
.profile-name {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Roboto', Arial, sans-serif; font-size: 1.5rem; font-weight: 900; color: #1A1F24;
}
.profile-dot { width: 14px; height: 14px; border-radius: 50%; }
.profile-note { font-size: 0.88rem; color: #41474D; line-height: 1.55; margin: 8px 0 14px; max-width: 720px; }
.profile-stats { display: flex; gap: 26px; flex-wrap: wrap; margin-bottom: 16px; }
.profile-stat { font-size: 0.82rem; color: #6B7680; }
.profile-stat strong { font-family: 'Roboto', Arial, sans-serif; font-size: 1.3rem; color: #005FAA; display: block; }
.profile-heatmap-label {
  display: block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: #C3CBD3; margin-bottom: 8px;
}

/* ── HEATMAP BASELINE ROW ── */
.hm-label.hm-baseline {
  font-weight: 900; color: #005FAA;
  border-left: 3px solid #F59F39; padding-left: 8px; background: #FFF6EC;
}
.hm-cell.hm-baseline-cell { outline: 2px solid #F59F39; outline-offset: -2px; }

/* ── MARKT & REGELGEVING ── */
.market-intro {
  background: #EAF3FC; border: 1px solid #CFE3F6; border-radius: 10px;
  padding: 14px 18px; font-size: 0.86rem; color: #2C4A66; line-height: 1.55; margin-bottom: 18px;
}
.market-list { display: flex; flex-direction: column; gap: 16px; }
.market-card {
  background: white; border-radius: 12px; padding: 18px 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05); border: 1px solid #E2E8EE; border-left: 5px solid #C3CBD3;
}
.market-card.impact-border-high   { border-left-color: #C0392B; }
.market-card.impact-border-medium { border-left-color: #F59F39; }
.market-card.impact-border-low    { border-left-color: #C3CBD3; }
.market-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.market-status {
  font-family: 'Roboto', Arial, sans-serif; font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.4px; text-transform: uppercase; padding: 3px 9px; border-radius: 20px;
  background: #E7ECF1; color: #41474D;
}
.market-status.status-aanstaand { background: #FDEBD0; color: #B45C00; }
.market-status.status-in-werking { background: #DEF3E3; color: #1E7A3D; }
.market-status.status-verwacht { background: #E3ECFB; color: #2C4A8A; }
.market-date { font-size: 0.78rem; color: #98A4AE; }
.market-title { font-family: 'Roboto', Arial, sans-serif; font-size: 1.05rem; font-weight: 700; color: #1A1F24; margin-bottom: 6px; }
.market-desc { font-size: 0.86rem; line-height: 1.6; color: #41474D; margin-bottom: 12px; }
.market-affects { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.market-affects-label { font-size: 0.76rem; font-weight: 700; color: #6B7680; margin-right: 4px; }
.market-comp {
  color: white; font-size: 0.72rem; font-weight: 600; padding: 3px 9px; border-radius: 20px;
}

/* ── STRATEGISCH PROFIEL ── */
.prof-list { display: flex; flex-direction: column; gap: 18px; }
.prof-card {
  position: relative; background: white; border-radius: 12px; overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05); border: 1px solid #E2E8EE;
}
.prof-accent { position: absolute; top: 0; left: 0; bottom: 0; width: 5px; background: var(--brand, #005FAA); }
.prof-body { padding: 18px 22px 18px 24px; }
.prof-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.prof-name { font-family: 'Roboto', Arial, sans-serif; font-size: 1.25rem; font-weight: 900; color: #1A1F24; }
.profile-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.prof-summary { font-size: 0.9rem; line-height: 1.55; color: #41474D; margin-bottom: 16px; font-weight: 600; }
.prof-section { margin-bottom: 16px; }
.prof-section:last-child { margin-bottom: 0; }
.prof-section-label {
  font-family: 'Roboto', Arial, sans-serif; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.6px; text-transform: uppercase; color: #6B7680; margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px;
}
.prof-section-auto {
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.3px; text-transform: none;
  padding: 1px 7px; border-radius: 20px; background: #E8F6EE; color: #1E7D46; border: 1px solid #C8EAD5;
}
.prof-stamp {
  display: inline-block; margin-left: 8px; font-size: 0.74rem; font-weight: 700;
  padding: 2px 9px; border-radius: 20px; background: #E8F6EE; color: #1E7D46; border: 1px solid #C8EAD5;
}
.prof-pages-tag {
  margin-left: auto; font-size: 0.68rem; font-weight: 700; padding: 2px 9px; border-radius: 20px;
  background: #F0F4F8; color: #50606E; border: 1px solid #DDE5EC;
}

/* Globale speler — geen Belgische marktbewerking (SAP, Dynamics) */
.prof-scope-tag {
  display: inline-block; margin-left: 8px; font-size: 0.68rem; font-weight: 800;
  padding: 2px 9px; border-radius: 20px; background: #EEF1F6; color: #5A6472; border: 1px solid #D7DEE8;
}
.prof-scope-note {
  margin-top: 8px; display: flex; flex-direction: column; gap: 3px;
  background: #F6F7FA; border: 1px solid #E1E6EE; border-left: 3px solid #9AA6B6;
  border-radius: 8px; padding: 9px 12px;
}

/* ── AFAS-ACTIES ── */
.tab-afas { font-weight: 700; color: #1E7D46; }
.tab-afas:hover { color: #14693A; }
.tab-afas.active { color: #14693A; border-bottom-color: #3CC658; }

.afas-intro {
  background: #EAF7EE; border-color: #C8EAD5; color: #1F5C39;
}

/* ── AFAS ZELF-AUDIT-PANEEL (in AFAS-blauw: dit zijn WIJ) ── */
.audit-panel {
  background: #F4F9FE; border: 1px solid #CFE3F5; border-left: 4px solid #005FAA;
  border-radius: 12px; padding: 16px 18px; margin-bottom: 24px;
}
.audit-compact { margin-top: 28px; }
.audit-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.audit-tag {
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.3px; padding: 3px 10px;
  border-radius: 20px; background: #E2F0FB; color: #005FAA; border: 1px solid #CFE3F5; white-space: nowrap;
}
.audit-sub { font-size: 0.82rem; line-height: 1.5; color: #41607A; flex: 1; min-width: 220px; }
.audit-sub strong { color: #00457D; }

.audit-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 16px; }
.audit-kpi {
  background: white; border: 1px solid #DCE7F1; border-radius: 10px; padding: 12px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center;
}
.audit-kpi-icon { font-size: 1.1rem; }
.audit-kpi-num { font-size: 1.5rem; font-weight: 800; color: #005FAA; line-height: 1.1; }
.audit-kpi-label { font-size: 0.7rem; color: #6B7680; font-weight: 600; }

.audit-block { margin-bottom: 18px; }
.audit-block:last-child { margin-bottom: 0; }
.audit-block-label {
  font-family: 'Roboto', Arial, sans-serif; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.5px; text-transform: uppercase; color: #41474D; margin-bottom: 8px;
}

.audit-sources { display: flex; flex-direction: column; gap: 6px; }
.audit-src {
  display: grid; grid-template-columns: 24px 160px 90px 1fr; align-items: center; gap: 8px;
  background: white; border: 1px solid #E2E8EE; border-radius: 8px; padding: 8px 12px; font-size: 0.82rem;
}
.audit-src-icon { text-align: center; }
.audit-src-label { font-weight: 700; color: #2A3138; }
.audit-src-state { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.2px; }
.audit-src.is-on  .audit-src-state { color: #1E7D46; }
.audit-src.is-off .audit-src-state { color: #B0762B; }
.audit-src.is-on  { border-left: 3px solid #3CC658; }
.audit-src.is-off { border-left: 3px solid #E8B765; }
.audit-src-detail { color: #6B7680; font-size: 0.78rem; }

.audit-block .feed { display: flex; flex-direction: column; gap: 10px; }
.audit-block .empty-state { padding: 22px 16px; }
.audit-block .empty-state code {
  background: #E2F0FB; color: #00457D; padding: 1px 6px; border-radius: 5px; font-size: 0.85em;
}

@media (max-width: 720px) {
  .audit-src { grid-template-columns: 24px 1fr; grid-auto-rows: auto; }
  .audit-src-state, .audit-src-detail { grid-column: 2; }
}

.afas-block { margin-bottom: 22px; }
.afas-block:last-child { margin-bottom: 0; }
.afas-block-label {
  font-family: 'Roboto', Arial, sans-serif; font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.6px; text-transform: uppercase; color: #41474D; margin-bottom: 6px;
  display: flex; align-items: center; gap: 8px;
}
.afas-block-sub { font-size: 0.82rem; line-height: 1.5; color: #6B7680; margin-bottom: 12px; }

/* AI-duiding */
.afas-ai-intro {
  background: white; border: 1px solid #E2E8EE; border-left: 4px solid #3CC658; border-radius: 10px;
  padding: 13px 16px; font-size: 0.88rem; line-height: 1.6; color: #2A3A2F; margin-bottom: 14px;
}
.afas-ai-tag {
  display: inline-block; margin-right: 8px; font-size: 0.66rem; font-weight: 800;
  letter-spacing: 0.3px; padding: 2px 9px; border-radius: 20px;
  background: #E8F6EE; color: #1E7D46; border: 1px solid #C8EAD5; vertical-align: middle;
}

/* Actiekaarten */
.afas-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.afas-card {
  background: white; border: 1px solid #E2E8EE; border-top: 4px solid #C3CBD3; border-radius: 12px;
  padding: 16px 18px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); display: flex; flex-direction: column; gap: 8px;
}
.afas-card.afas-prio-high   { border-top-color: #C0392B; }
.afas-card.afas-prio-medium { border-top-color: #F59F39; }
.afas-card.afas-prio-low    { border-top-color: #3CC658; }
.afas-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.afas-prio-badge {
  font-size: 0.64rem; font-weight: 800; letter-spacing: 0.3px; text-transform: uppercase;
  padding: 3px 9px; border-radius: 20px;
}
.afas-prio-high   .afas-prio-badge { background: #FBE7E3; color: #B03124; }
.afas-prio-medium .afas-prio-badge { background: #FDEBD0; color: #B45C00; }
.afas-prio-low    .afas-prio-badge { background: #E8F6EE; color: #1E7D46; }
.afas-card-title {
  font-family: 'Roboto', Arial, sans-serif; font-size: 1rem; font-weight: 800; color: #1A1F24; line-height: 1.35;
}
.afas-card-rationale { font-size: 0.86rem; line-height: 1.55; color: #41474D; }
.afas-card-evidence { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.afas-card-evidence li {
  font-size: 0.78rem; line-height: 1.45; color: #50606E; padding-left: 16px; position: relative;
}
.afas-card-evidence li::before { content: '▸'; position: absolute; left: 2px; color: #3CC658; font-weight: 700; }

/* Convergentietabel */
.afas-table {
  width: 100%; border-collapse: collapse; background: white; border-radius: 10px; overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05); font-size: 0.84rem;
}
.afas-table thead th {
  background: #F0F4F8; color: #50606E; font-family: 'Roboto', Arial, sans-serif; font-size: 0.7rem;
  font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; text-align: center;
  padding: 9px 8px; border-bottom: 1px solid #E1E6EE;
}
.afas-table thead th:first-child { text-align: left; }
.afas-table tbody td { padding: 9px 8px; border-bottom: 1px solid #EEF1F5; text-align: center; color: #41474D; }
.afas-table tbody tr:last-child td { border-bottom: none; }
.afas-tcol-topic { text-align: left !important; font-weight: 700; color: #1A1F24; white-space: nowrap; }
.afas-tcol-num { font-weight: 700; }
.afas-tcol-bar { width: 130px; }
.afas-breadth-bar {
  display: block; height: 8px; background: #EEF1F5; border-radius: 5px; overflow: hidden;
}
.afas-breadth-bar > span { display: block; height: 100%; background: #3CC658; border-radius: 5px; }

.prof-scope-note-label {
  font-size: 0.64rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; color: #6B7686;
}
.prof-scope-note-text { font-size: 0.82rem; line-height: 1.5; color: #4A535F; }

/* Secties & productlijnen — live paginatelling per URL-sectie */
.prof-clusters { display: flex; flex-direction: column; gap: 8px; }
.prof-cluster { background: #F7F9FB; border: 1px solid #E2E8EE; border-radius: 8px; padding: 10px 12px; }
.prof-cluster-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; }
.prof-cluster-name { font-weight: 700; font-size: 0.88rem; color: #1A1F24; }
.prof-cluster-count {
  font-size: 0.7rem; font-weight: 800; padding: 2px 9px; border-radius: 20px;
  background: var(--brand, #005FAA); color: white;
}
.prof-cluster-reason { font-size: 0.8rem; line-height: 1.5; color: #555E66; }
.prof-hub-badge {
  font-size: 0.64rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.3px;
  padding: 2px 8px; border-radius: 20px; background: #FFF1E0; color: #B5651D; border: 1px solid #F4DCBE;
}

/* Topic-focus — verdeling van pagina's over topics */
.prof-topics { display: flex; flex-direction: column; gap: 6px; }
.prof-topic-row { display: grid; grid-template-columns: 150px 1fr 28px; align-items: center; gap: 10px; }
.prof-topic-label { font-size: 0.8rem; font-weight: 600; color: #41474D; }
.prof-topic-bar { height: 8px; background: #EDF1F5; border-radius: 6px; overflow: hidden; }
.prof-topic-bar > span { display: block; height: 100%; border-radius: 6px; }
.prof-topic-num { font-size: 0.78rem; font-weight: 800; color: #50606E; text-align: right; }

/* Recente structuurwijzigingen */
.prof-recent { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.prof-recent li { font-size: 0.82rem; line-height: 1.45; color: #41474D; }
.prof-recent-kind { font-weight: 800; font-size: 0.72rem; margin-right: 6px; }
.prof-recent-new_page .prof-recent-kind { color: #1E7D46; }
.prof-recent-removed_page .prof-recent-kind { color: #B23A2E; }

/* Gat t.o.v. AFAS — auto-gedetecteerde topics zonder dekking */
.prof-gap-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.prof-gap-chip {
  font-size: 0.78rem; font-weight: 700; padding: 4px 11px; border-radius: 20px;
  background: #FBF1F0; color: #B23A2E; border: 1px solid #F3D8D4;
}
.prof-auto-tag { font-size: 0.72rem; color: #1E7D46; font-style: normal; font-weight: 700; }

/* ── CONTENTRADAR (bovenaan Nieuws & Wins) ──
   AI clustert ál het geoogste concurrentie-nieuws tot thema's met een concreet
   contentidee voor AFAS. Opvallende banner i.p.v. losse kaart, zodat het de
   nieuwsstroom 'samenvat' tot actie. Volledig auto-gegenereerd per run. */
.content-radar {
  background: linear-gradient(135deg, #F4FBF6 0%, #EAF7EE 100%);
  border: 1px solid #C8EAD5; border-radius: 14px; padding: 18px 20px; margin-bottom: 26px;
  box-shadow: 0 2px 10px rgba(30,125,70,0.07);
}
.radar-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 4px; }
.radar-icon { font-size: 1.2rem; }
.radar-title {
  font-family: 'Roboto', Arial, sans-serif; font-size: 1.05rem; font-weight: 800;
  color: #14693A; letter-spacing: 0.2px;
}
.radar-sub { font-size: 0.8rem; color: #4A6B57; line-height: 1.4; flex: 1 1 260px; }
.content-radar .prof-stamp { margin-left: auto; }
.radar-ai-intro {
  background: white; border: 1px solid #D4EBDD; border-left: 4px solid #3CC658; border-radius: 10px;
  padding: 12px 15px; font-size: 0.87rem; line-height: 1.6; color: #2A3A2F; margin: 12px 0 16px;
}
.radar-ai-tag {
  display: inline-block; margin-right: 8px; font-size: 0.66rem; font-weight: 800;
  letter-spacing: 0.3px; padding: 2px 9px; border-radius: 20px;
  background: #E8F6EE; color: #1E7D46; border: 1px solid #C8EAD5; vertical-align: middle;
}
.radar-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 13px; margin-top: 12px; }
.radar-card {
  background: white; border: 1px solid #DCE7E0; border-left: 4px solid #C3CBD3; border-radius: 11px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 1px 5px rgba(0,0,0,0.04);
}
.radar-card.radar-prio-high   { border-left-color: #C0392B; }
.radar-card.radar-prio-medium { border-left-color: #F59F39; }
.radar-card.radar-prio-low    { border-left-color: #3CC658; }
.radar-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.radar-prio-badge {
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.3px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 20px;
}
.radar-prio-high   .radar-prio-badge { background: #FBE7E3; color: #B03124; }
.radar-prio-medium .radar-prio-badge { background: #FDEBD0; color: #B45C00; }
.radar-prio-low    .radar-prio-badge { background: #E8F6EE; color: #1E7D46; }
.radar-theme {
  font-family: 'Roboto', Arial, sans-serif; font-size: 0.96rem; font-weight: 800; color: #1A1F24; line-height: 1.3;
}
.radar-why { font-size: 0.83rem; line-height: 1.5; color: #50606E; }
.radar-angle {
  background: #F4FBF6; border: 1px solid #D4EBDD; border-radius: 8px; padding: 8px 11px;
  display: flex; flex-direction: column; gap: 3px;
}
.radar-angle-label {
  font-family: 'Roboto', Arial, sans-serif; font-size: 0.66rem; font-weight: 800;
  letter-spacing: 0.4px; text-transform: uppercase; color: #1E7D46;
}
.radar-angle-text { font-size: 0.83rem; line-height: 1.5; color: #2A3A2F; }
.radar-comps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.radar-comps-label { font-size: 0.72rem; color: #6B7680; font-weight: 600; }
.radar-comp {
  font-size: 0.68rem; font-weight: 700; color: white; padding: 2px 9px; border-radius: 20px;
  text-shadow: 0 1px 1px rgba(0,0,0,0.18);
}
.radar-comp-unknown { background: #8A97A3; }
.radar-examples { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.radar-examples li {
  font-size: 0.76rem; line-height: 1.45; color: #5A6B78; padding-left: 15px; position: relative; font-style: italic;
}
.radar-examples li::before { content: '“'; position: absolute; left: 2px; color: #3CC658; font-weight: 800; font-style: normal; }

/* ── NIEUWS & WINS-TAB ──
   Gegroepeerde inhoudssignalen (📰 Nieuws & M&A · 🏆 Klantwins · 💼 Vacatures).
   Elke groep een eigen kop met teller + uitleg; nette lege-staat als er nog
   geen content-signalen zijn. */
.news-group { margin-bottom: 22px; }
.news-group:last-child { margin-bottom: 0; }
.news-group-head {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 8px 4px 10px; margin-bottom: 10px;
  border-bottom: 2px solid #EAEFF4;
}
.news-group-icon { font-size: 1.15rem; }
.news-group-title {
  font-family: 'Roboto', Arial, sans-serif; font-weight: 900;
  font-size: 1rem; color: #1A1F24;
}
.news-group-count {
  font-size: 0.72rem; font-weight: 800; padding: 2px 10px; border-radius: 20px;
  background: #005FAA; color: #fff;
}
.news-group-hint {
  flex: 1 1 260px; min-width: 200px;
  font-size: 0.78rem; line-height: 1.4; color: #7A848E;
}
.news-group-body { display: flex; flex-direction: column; gap: 12px; }

/* Lege staat — uitleggend i.p.v. een kale regel. */
.news-empty { padding: 48px 24px; color: #41474D; }
.news-empty-icon { font-size: 2.4rem; margin-bottom: 10px; opacity: 0.7; }
.news-empty-title {
  font-family: 'Roboto', Arial, sans-serif; font-weight: 900;
  font-size: 1.05rem; color: #1A1F24; margin-bottom: 8px;
}
.news-empty-text {
  max-width: 480px; margin: 0 auto; font-size: 0.86rem; line-height: 1.55; color: #6B757F;
}

/* Artikel-blok in een nieuws-/case-kaart: klikbare link + publicatiedatum. */
.article-block {
  margin-top: 10px; background: #eef5fb; border: 1px solid #B9D4EA; border-radius: 8px;
  padding: 9px 12px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.article-link {
  color: #005FAA; font-size: 0.82rem; text-decoration: none; font-weight: 700;
}
.article-link:hover { text-decoration: underline; }
.article-date {
  font-size: 0.74rem; font-weight: 700; color: #41474D;
  background: #fff; border: 1px solid #C3CBD3; border-radius: 6px; padding: 2px 8px;
}

/* ── GOOGLE ADS-TAB ──
   Per concurrent een kaart met de Google-advertentie-intel uit de BigQuery
   transparency-dataset: aantallen actief/totaal, formaat-verdeling (tekst/beeld/
   video), looptijd, thema's en recente creatives. Banner bovenaan vat de selectie
   samen; 'bewust leeg'-concurrenten krijgen een ingetogen intel-kaart. */
.gads-banner {
  background: linear-gradient(135deg, #005FAA 0%, #0A4E86 100%); color: #fff;
  border-radius: 12px; padding: 16px 20px; margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0,95,170,0.18);
}
.gads-banner-title {
  font-family: 'Roboto', Arial, sans-serif; font-weight: 900; font-size: 1.05rem;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.gads-banner-src { font-size: 0.7rem; font-weight: 600; opacity: 0.75; }
.gads-banner-sub { margin-top: 6px; font-size: 0.86rem; line-height: 1.5; opacity: 0.95; }

/* AI-duiding bovenaan de Google Ads-tab (focus dit jaar + onderlinge vergelijking). */
.gads-recap {
  background: #F2F5F8; border: 1px solid #D7E2EC; border-left: 4px solid #005FAA;
  border-radius: 12px; padding: 14px 18px; margin-bottom: 16px;
}
.gads-recap-comp { border-left-width: 5px; }
.gads-recap-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.gads-recap-tag {
  background: #005FAA; color: #fff; font-size: 0.66rem; font-weight: 800;
  letter-spacing: 0.04em; padding: 2px 8px; border-radius: 20px; text-transform: uppercase;
}
.gads-recap-title { font-family: 'Roboto', Arial, sans-serif; font-weight: 900; font-size: 1rem; color: #005FAA; }
.gads-recap-sum { margin: 0 0 8px; font-size: 0.9rem; line-height: 1.55; color: #2A323A; }
.gads-recap-highs { margin: 0 0 8px; padding-left: 18px; font-size: 0.86rem; line-height: 1.5; color: #41474D; }
.gads-recap-highs li { margin-bottom: 3px; }
.gads-recap-afas {
  background: #D7EAFF; border-radius: 8px; padding: 8px 12px; font-size: 0.86rem;
  line-height: 1.5; color: #003E70; display: flex; gap: 8px; align-items: baseline;
}
.gads-recap-afas-tag { font-weight: 800; white-space: nowrap; color: #005FAA; }

/* Vergelijkingstabel — AFAS als gemarkeerde rij. */
.gads-table-wrap { overflow-x: auto; margin-bottom: 18px; border: 1px solid #DCE7E0; border-radius: 12px; }
.gads-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; background: #fff; }
.gads-table thead th {
  text-align: left; padding: 10px 12px; background: #F2F5F8; color: #41474D;
  font-weight: 800; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.03em;
  border-bottom: 1px solid #DCE7E0; white-space: nowrap;
}
.gads-table tbody td { padding: 9px 12px; border-bottom: 1px solid #EEF2F5; vertical-align: middle; }
.gads-table tbody tr:last-child td { border-bottom: none; }
.gads-td-name { font-weight: 600; color: #2A323A; white-space: nowrap; }
.gads-td-num { font-variant-numeric: tabular-nums; font-weight: 700; color: #2A323A; }
.gads-td-fmt, .gads-td-reach { white-space: nowrap; }
.gads-row-self { background: #D7EAFF; }
.gads-row-self td { border-bottom-color: #B8D6F5; }
.gads-row-self .gads-td-name { color: #003E70; font-weight: 800; }
.gads-self-star { font-size: 0.9rem; }
.gads-self-tag {
  margin-left: 6px; background: #005FAA; color: #fff; font-size: 0.62rem; font-weight: 800;
  padding: 1px 6px; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.04em;
}
.gads-tr { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gads-tr-up { color: #2E9E45; }
.gads-tr-down { color: #C0392B; }
.gads-tr-flat { color: #7A828A; }
.gads-tr-new { color: #005FAA; }
.gads-tr-none { color: #AAB2BA; }
.gads-fm { font-size: 0.74rem; font-weight: 700; padding: 1px 6px; border-radius: 6px; white-space: nowrap; }
.gads-fm-text { background: #E3EEF8; color: #005FAA; }
.gads-fm-image { background: #E3F6E8; color: #2E9E45; }
.gads-fm-video { background: #FDF0DF; color: #C77F1E; }

.gads-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.gads-card {
  background: #fff; border: 1px solid #DCE7E0; border-radius: 12px;
  padding: 15px 17px; display: flex; flex-direction: column; gap: 11px;
  box-shadow: 0 1px 5px rgba(0,0,0,0.04);
}
.gads-card-empty { background: #F7F9FB; border-style: dashed; }
.gads-card-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.gads-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.gads-name {
  font-family: 'Roboto', Arial, sans-serif; font-weight: 800; font-size: 0.98rem; color: #1A1F24;
}
.gads-badge {
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.3px; text-transform: uppercase;
  padding: 3px 9px; border-radius: 20px;
}
.gads-badge-new     { background: #E8F6EE; color: #1E7D46; }
.gads-badge-stopped { background: #FDEBD0; color: #B45C00; }
.gads-badge-none    { background: #ECEFF2; color: #6B757F; }

.gads-stats { display: flex; gap: 22px; }
.gads-stat { display: flex; flex-direction: column; line-height: 1.1; }
.gads-stat-num {
  font-family: 'Roboto', Arial, sans-serif; font-weight: 900; font-size: 1.5rem; color: #005FAA;
}
.gads-stat-year { color: #1E7D46; }
.gads-stat-muted { color: #8A949E; }
.gads-stat-lbl { font-size: 0.68rem; color: #7A848E; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; }

.gads-fmt-bar { display: flex; height: 9px; border-radius: 6px; overflow: hidden; background: #EAEFF4; }
.gads-fmt-seg { height: 100%; }
.gads-fmt-text  { background: #005FAA; }
.gads-fmt-image { background: #3CC658; }
.gads-fmt-video { background: #F59F39; }
.gads-fmt-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: -3px; }
.gads-fmt-leg { font-size: 0.72rem; color: #50606E; font-weight: 600; display: flex; align-items: center; gap: 5px; }
.gads-fmt-dot { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }

.gads-period { font-size: 0.78rem; color: #50606E; }

/* Jaar-over-jaar: nieuwe ads per jaar; het lopende jaar gemarkeerd (groen, vet). */
.gads-years { display: flex; flex-direction: column; gap: 4px; }
.gads-years-cap {
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.3px; text-transform: uppercase;
  color: #7A848E; margin-bottom: 2px;
}
.gads-yr-row { display: flex; align-items: center; gap: 8px; }
.gads-yr-lbl { font-size: 0.72rem; font-weight: 700; color: #6B757F; width: 46px; flex-shrink: 0; }
.gads-yr-track { flex: 1 1 auto; height: 8px; background: #EAEFF4; border-radius: 5px; overflow: hidden; }
.gads-yr-fill { display: block; height: 100%; background: #B7C2CC; border-radius: 5px; }
.gads-yr-num { font-size: 0.74rem; font-weight: 700; color: #50606E; width: 34px; text-align: right; flex-shrink: 0; }
.gads-yr-cur .gads-yr-lbl { color: #1E7D46; }
.gads-yr-cur .gads-yr-fill { background: #3CC658; }
.gads-yr-cur .gads-yr-num { color: #1E7D46; }

.gads-source-note, .gads-empty-note {
  font-size: 0.8rem; line-height: 1.5; color: #50606E;
  background: #F4FBF6; border: 1px solid #D4EBDD; border-radius: 8px; padding: 8px 11px;
}
.gads-empty-note { background: #F0F3F6; border-color: #DCE2E8; color: #5A6570; }

.gads-creatives { font-size: 0.82rem; }
.gads-creatives > summary {
  cursor: pointer; font-weight: 700; color: #005FAA; font-size: 0.8rem;
  padding: 4px 0; outline: none;
}
.gads-creatives > summary:hover { text-decoration: underline; }
.gads-cr-list {
  list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px;
  max-height: 320px; overflow-y: auto;
}
.gads-cr {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 6px 9px; background: #F7F9FB; border: 1px solid #E4E9EE; border-radius: 7px;
}
.gads-cr-fmt {
  font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.3px;
  color: #fff; padding: 2px 7px; border-radius: 5px; flex-shrink: 0;
}
.gads-cr-reach {
  font-size: 0.72rem; font-weight: 800; color: #005FAA;
  background: #E7F0FA; border: 1px solid #C5DBF0; border-radius: 5px; padding: 1px 7px; flex-shrink: 0;
}
.gads-cr-dates { font-size: 0.72rem; color: #6B757F; flex: 1 1 auto; }
.gads-cr-link { font-size: 0.74rem; font-weight: 700; color: #005FAA; text-decoration: none; }
.gads-cr-link:hover { text-decoration: underline; }

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .topbar { flex-direction: column; align-items: flex-start; gap: 10px; }
  .topbar-right { width: 100%; justify-content: space-between; }
  .layout { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; border-right: none; border-bottom: 1px solid #C3CBD3; }
  .heatmap-grid { overflow-x: auto; }
}
@media (max-width: 560px) {
  .kpi-row { grid-template-columns: 1fr; }
  .tabs { overflow-x: auto; }
  .seg-btn { padding: 6px 9px; font-size: 0.72rem; }
}