/* =====================================================================
   analyse.css — module 5.7 · Analyse-suite (BI, AI, conversie,
   rapportages, CO₂). Uitsluitend tokens; AI/BI-paars uit het
   prototype gemapt op terra. Module-wortel-marge volgens de norm.
===================================================================== */

.an { max-width: 1280px; margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 16px; }

.an-kop h1 { margin: 2px 0 6px; font-size: 1.45rem; letter-spacing: -.01em; }
.an-kop p { margin: 0; max-width: 74ch; color: var(--c-ink-2); font-size: .82rem; line-height: 1.5; }
.an-voetnoot { font-size: .74rem; color: var(--c-ink-2); line-height: 1.55; }
.an-hint { font-size: .72rem; color: var(--c-ink-3); }
.an-balk { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.an-rek { flex: 1; }
.is-groen { color: var(--c-groen-d); }
.is-rood { color: var(--c-rood); }
.is-goud { color: var(--c-terra-d); }

.an-knop {
  padding: 9px 14px; border-radius: 10px; cursor: pointer; white-space: nowrap;
  border: var(--lijndikte) solid var(--c-lijn-2);
  background: #fff; color: var(--c-ink); font: 700 .78rem var(--font-ui);
}
.an-knop:hover { border-color: var(--c-ink-3); }
.an-knop--primair { background: var(--c-groen); border-color: var(--c-groen); color: #fff; }
.an-knop--klein { padding: 6px 11px; font-size: .72rem; border-radius: 8px; }
.an-knop.is-klaar { border-color: var(--c-groen); background: var(--c-groen-t); color: var(--c-groen-d); cursor: default; }
.an-knop[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.an-link { border: 0; background: none; padding: 0; cursor: pointer; font: 700 .74rem var(--font-ui); color: var(--c-terra-d); }

.an-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.an-tab {
  padding: 9px 15px; border-radius: 10px; cursor: pointer; white-space: nowrap;
  border: var(--lijndikte) solid var(--c-lijn); background: #fff;
  font: 600 .78rem var(--font-ui); color: var(--c-ink-2);
}
.an-tab.is-actief { background: var(--c-ink); border-color: var(--c-ink); color: #fff; font-weight: 700; }
.an-flt {
  padding: 8px 14px; border-radius: 9px; cursor: pointer;
  border: 0; background: none; font: 600 .74rem var(--font-ui); color: var(--c-ink-2);
}
.an-flt.is-actief { background: #fff; color: var(--c-ink); font-weight: 700; }
.an-perwissel { display: flex; gap: 4px; padding: 4px; background: var(--c-paneel); border-radius: 11px; }
.an-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.an-chip {
  padding: 6px 12px; border-radius: 8px; cursor: pointer;
  border: var(--lijndikte) solid var(--c-lijn); background: #fff;
  font: 600 .7rem var(--font-ui); color: var(--c-ink-2);
}
.an-chip.is-actief { background: var(--c-terra); border-color: var(--c-terra); color: #fff; font-weight: 700; }
.an-chip.is-lock { opacity: .55; }
.an-zoek {
  padding: 9px 13px; border-radius: 10px; min-width: 220px;
  border: var(--lijndikte) solid var(--c-lijn-2); background: #fff;
  font: 500 .78rem var(--font-ui); color: var(--c-ink);
}

/* ---- BI ---- */
.an-personas { display: flex; gap: 10px; flex-wrap: wrap; }
.an-persona {
  flex: 1; min-width: 220px; text-align: left; cursor: pointer;
  padding: 13px 16px; border-radius: 13px; border: var(--lijndikte) solid var(--c-lijn); background: #fff;
  display: flex; flex-direction: column; gap: 3px;
}
.an-persona.is-actief { border-color: var(--c-terra); background: var(--c-terra-t); }
.an-persona strong { font-size: .84rem; }
.an-persona em { font-style: normal; font-size: .62rem; color: var(--c-terra-d); }
.an-persona span { font-size: .68rem; color: var(--c-ink-3); line-height: 1.4; }

.an-bigrid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: start; }
.an-bizij { display: flex; flex-direction: column; gap: 14px; }
.an-biblok { padding: 15px 16px; display: flex; flex-direction: column; gap: 10px; }
.an-legendanote { font-style: normal; font-size: .64rem; color: var(--c-ink-3); }
.an-metricgroep { display: flex; flex-direction: column; gap: 7px; }
.an-bicanvas { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.an-governance {
  display: flex; gap: 11px; align-items: flex-start; padding: 13px 16px;
  border-radius: 13px; background: var(--c-terra-t); border: var(--lijndikte) solid var(--c-terra);
}
.an-governance i { font-style: normal; font-weight: 700; color: var(--c-terra-d); }
.an-governance strong { display: block; font-size: .78rem; color: var(--c-terra-d); margin-bottom: 2px; }
.an-governance span { font-size: .74rem; color: var(--c-ink-2); line-height: 1.5; }
.an-governance em { display: block; font-style: normal; font-size: .62rem; color: var(--c-ink-3); margin-top: 4px; }
.an-chart { padding: 20px 22px; min-height: 320px; display: flex; flex-direction: column; gap: 12px; }
.an-chart__kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.an-chart__kop strong { font-size: 1rem; }
.an-chart__totaal { font-size: .72rem; color: var(--c-ink-3); }
.an-lock {
  padding: 40px 30px; text-align: center; border: 1px dashed var(--c-rood);
  border-radius: 13px; background: var(--c-rood-t);
}
.an-lock strong { display: block; font-size: .9rem; color: var(--c-rood); margin-bottom: 6px; }
.an-lock p { margin: 0 auto; font-size: .78rem; color: var(--c-ink-2); max-width: 420px; line-height: 1.5; }
.an-rowlevel {
  padding: 9px 13px; border-radius: 9px; font: 600 .72rem var(--font-ui); color: var(--c-groen-d);
  background: var(--c-groen-t); border: var(--lijndikte) solid var(--c-groen);
}
.an-birijen { display: flex; flex-direction: column; gap: 9px; }
.an-birij {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; cursor: pointer;
  border: var(--lijndikte) solid var(--c-lijn); border-radius: 10px; background: #fff;
  font: 600 .78rem var(--font-ui); color: var(--c-ink); text-align: left;
}
.an-birij.is-actief { border-color: var(--c-terra); background: var(--c-terra-t); }
.an-birij > span { min-width: 130px; }
.an-bibalk { flex: 1; height: 12px; border-radius: 99px; background: var(--c-creme); overflow: hidden; font-style: normal; }
.an-bibalk b { display: block; height: 100%; border-radius: 99px; background: var(--c-terra); }
.an-birij strong { min-width: 80px; text-align: right; }
.an-drill { padding: 14px 16px; border-radius: 12px; background: var(--c-creme); }
.an-drill__kop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: .78rem; }
.an-drillrij {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; border-radius: 8px; background: #fff; margin-bottom: 6px;
  font: 600 .76rem var(--font-ui);
}
.an-cattitel { font-size: .95rem; display: block; }
.an-catgroep { display: flex; flex-direction: column; gap: 10px; }
.an-catgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 11px; }
.an-catkaart { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.an-catkaart__kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.an-catkaart strong { font-size: .82rem; }
.an-catkaart p { margin: 0; font-size: .72rem; color: var(--c-ink-2); line-height: 1.5; }
.an-catkaart em { font-style: normal; font-size: .62rem; color: var(--c-ink-3); }
.an-levgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.an-levgrid > div { display: flex; flex-direction: column; gap: 10px; }
.an-schedule { padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.an-schedule__kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; }
.an-schedule strong { font-size: .8rem; }
.an-schedule span:not(.chip) { font-size: .72rem; color: var(--c-ink-2); }
.an-schedule em { font-style: normal; font-size: .68rem; color: var(--c-ink-3); }
.an-schedule .mono { font-size: .62rem; }

/* ---- AI ---- */
.an-aibanner {
  display: flex; align-items: center; gap: 9px; padding: 10px 14px;
  border-radius: 10px; background: var(--c-terra-t); border: var(--lijndikte) solid var(--c-terra);
  font: 600 .76rem var(--font-ui); color: var(--c-ink-2);
}
.an-aibanner i { font-style: normal; color: var(--c-terra-d); }
.an-aigrid { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 18px; align-items: start; }
.an-aileads { display: flex; flex-direction: column; gap: 8px; }
.an-ailead {
  display: flex; align-items: center; gap: 11px; padding: 11px 13px; cursor: pointer; text-align: left;
  border: var(--lijndikte) solid var(--c-lijn); border-radius: 12px; background: #fff;
}
.an-ailead.is-actief { border-color: var(--c-terra); background: var(--c-terra-t); }
.an-aiscore {
  width: 38px; height: 38px; flex: none; border-radius: 10px; font-style: normal;
  display: flex; align-items: center; justify-content: center; font: 800 .8rem var(--font-mono);
}
.an-aiscore.is-groen { background: var(--c-groen-t); color: var(--c-groen-d); }
.an-aiscore.is-amber { background: var(--c-amber-t); color: var(--c-amber); }
.an-aiscore.is-stil { background: var(--c-paneel); color: var(--c-ink-2); }
.an-ailead span { min-width: 0; }
.an-ailead strong { display: block; font-size: .8rem; }
.an-ailead em { font-style: normal; font-size: .66rem; color: var(--c-ink-3); }
.an-aidetail { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.an-aikop { padding: 18px 20px; display: flex; align-items: center; gap: 20px; }
.an-aikop__score strong { font-size: 2.2rem; letter-spacing: -.02em; display: block; text-align: center; }
.an-aikop__wie { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.an-aikop__wie strong { font-size: .95rem; }
.an-aikop__wie em { font-style: normal; font-size: .74rem; color: var(--c-ink-3); }
.an-waarom { align-self: flex-start; }
.an-drivers { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; background: var(--c-creme); }
.an-driver__kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; font: 600 .74rem var(--font-ui); color: var(--c-ink-2); }
.an-driver__balk { height: 5px; border-radius: 99px; background: #fff; overflow: hidden; font-style: normal; display: block; }
.an-driver__balk b { display: block; height: 100%; border-radius: 99px; }
.an-driver__balk b.is-groen { background: var(--c-groen); }
.an-driver__balk b.is-rood { background: var(--c-rood); }
.an-nbagrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.an-nba { padding: 16px 17px; display: flex; flex-direction: column; gap: 7px; align-items: flex-start; border-color: var(--c-terra); }
.an-nba--groen { border-color: var(--c-groen); }
.an-nba strong { font-size: .88rem; }
.an-nba p { margin: 0; font-size: .74rem; color: var(--c-ink-2); line-height: 1.5; }
.an-forecast { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.an-forecast__kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.an-forecast__kop strong { font-size: .88rem; }
.an-fcbalken { display: flex; align-items: flex-end; gap: 18px; padding: 0 6px; }
.an-fcbalk { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.an-fcbalk__staaf { width: 100%; max-width: 56px; display: flex; flex-direction: column; justify-content: flex-end; }
.an-fcbalk__staaf i { display: block; background: var(--c-terra-t); border-radius: 6px 6px 0 0; }
.an-fcbalk__staaf b { display: block; background: var(--c-terra); border-radius: 0 0 4px 4px; }
.an-fcbalk strong { font-size: .72rem; }
.an-fcbalk em { font-style: normal; font-size: .66rem; color: var(--c-ink-3); }
.an-fclegenda { display: flex; align-items: center; gap: 14px; padding-top: 10px; border-top: var(--lijndikte) solid var(--c-lijn); font: 600 .66rem var(--font-ui); color: var(--c-ink-2); flex-wrap: wrap; }
.an-fclegenda b { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.an-fclegenda .is-vol { background: var(--c-terra); }
.an-fclegenda .is-band { background: var(--c-terra-t); }
.an-fclegenda em { font-style: normal; color: var(--c-ink-3); }

/* ---- advconv ---- */
.an-convrij {
  display: grid; grid-template-columns: 1.5fr .7fr .7fr 1.1fr .9fr .7fr;
  gap: 12px; align-items: center; padding: 12px 18px; font-size: .78rem;
  border-bottom: var(--lijndikte) solid var(--c-lijn);
}
.an-convrij:last-child { border-bottom: 0; }
.an-uitvrij--kort { grid-template-columns: 1.4fr .6fr 2fr !important; }
.an-convrij--kop { font-size: .6rem; letter-spacing: .05em; text-transform: uppercase; color: var(--c-ink-3); background: var(--c-creme); }
.an-convwie { display: flex; align-items: center; gap: 10px; }
.an-convwie i {
  width: 32px; height: 32px; flex: none; border-radius: 9px; font-style: normal;
  background: var(--c-terra-t); color: var(--c-terra-d);
  display: flex; align-items: center; justify-content: center; font: 700 .7rem var(--font-ui);
}
.an-convwie strong { display: block; font-size: .8rem; }
.an-convwie em { font-style: normal; font-size: .64rem; color: var(--c-ink-3); }
.an-convbalk strong { display: block; margin-bottom: 4px; }
.an-convbalk i { display: block; height: 6px; border-radius: 99px; background: var(--c-creme); overflow: hidden; font-style: normal; }
.an-convbalk b { display: block; height: 100%; border-radius: 99px; background: var(--c-groen); }

/* ---- rapportages ---- */
.an-tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.an-tegel { padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.an-tegel span { font-size: .7rem; color: var(--c-ink-3); }
.an-tegel strong { font-size: 1.25rem; }
.an-tegel.is-groen { border-color: var(--c-groen); background: var(--c-groen-t); }
.an-tegel.is-groen strong, .an-tegel.is-groen span { color: var(--c-groen-d); }
.an-tegel.is-amber { border-color: var(--c-oker); background: var(--c-amber-t); }
.an-tegel.is-amber strong, .an-tegel.is-amber span { color: var(--c-amber); }
.an-repgrid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; align-items: start; }
.an-repblok { padding: 18px 20px; display: flex; flex-direction: column; gap: 11px; }
.an-repblok > strong { font-size: .9rem; }
.an-blokkop { padding: 14px 18px; font: 700 .9rem var(--font-ui); border-bottom: var(--lijndikte) solid var(--c-lijn); }
.an-staafjes { display: flex; align-items: flex-end; gap: 12px; height: 130px; padding-top: 8px; }
.an-staafjes--klein { height: 92px; }
.an-staafje { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; }
.an-staafje i { display: block; width: 100%; max-width: 42px; border-radius: 7px 7px 3px 3px; background: var(--c-groen); font-style: normal; }
.an-staafje em { font-style: normal; font-size: .6rem; color: var(--c-ink-3); }
.an-staafje--duo span { display: flex; align-items: flex-end; gap: 3px; height: 100%; }
.an-staafje--duo i { width: 14px; }
.an-staafje--duo i.is-cap { background: var(--c-sage-t); }
.an-bronrij { display: grid; grid-template-columns: auto minmax(0, 1fr) 44px 90px; gap: 8px; align-items: center; font: 500 .76rem var(--font-ui); }
.an-bronrij > span { color: var(--c-ink-2); }
.an-bronrij strong { text-align: right; }
.an-dot { width: 9px; height: 9px; border-radius: 3px; }
.an-dot.is-groen { background: var(--c-groen); } .an-dot.is-sage { background: var(--c-sage); }
.an-dot.is-terra { background: var(--c-terra); } .an-dot.is-oker { background: var(--c-oker); }
.an-bronbalk { grid-column: 1 / -1; height: 8px; border-radius: 99px; background: var(--c-creme); overflow: hidden; font-style: normal; display: block; }
.an-bronbalk b { display: block; height: 100%; border-radius: 99px; }
.an-bronbalk b.is-groen { background: var(--c-groen); } .an-bronbalk b.is-sage { background: var(--c-sage); }
.an-bronbalk b.is-terra { background: var(--c-terra); } .an-bronbalk b.is-oker { background: var(--c-oker); }
.an-funnelrij { display: grid; grid-template-columns: 96px minmax(0, 1fr) 44px; gap: 10px; align-items: center; font: 500 .76rem var(--font-ui); }
.an-funnelbalk { height: 22px; border-radius: 6px; background: var(--c-creme); overflow: hidden; font-style: normal; display: block; }
.an-funnelbalk b {
  display: flex; align-items: center; padding-left: 8px; height: 100%;
  border-radius: 6px; background: var(--c-groen); color: #fff; font: 700 .68rem var(--font-mono);
}
.an-funnelrij em { font-style: normal; font-size: .66rem; color: var(--c-ink-3); }
.an-dlrij { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .78rem; }
.an-dlrij i {
  width: 36px; height: 36px; flex: none; border-radius: 9px; font-style: normal;
  background: var(--c-groen-t); color: var(--c-groen-d);
  display: flex; align-items: center; justify-content: center; font-size: .58rem; font-weight: 700;
}
.an-dlrij > div { flex: 1; min-width: 0; }
.an-dlrij strong { display: block; font-size: .8rem; }
.an-dlrij em { font-style: normal; font-size: .68rem; color: var(--c-ink-3); }
.an-uitvrij {
  display: grid; grid-template-columns: 1.6fr .7fr .8fr 1fr .7fr .9fr;
  gap: 10px; align-items: center; padding: 12px 18px; font-size: .78rem;
  border-top: var(--lijndikte) solid var(--c-lijn);
}
.an-uitvrij--kop { font-size: .6rem; letter-spacing: .05em; text-transform: uppercase; color: var(--c-ink-3); border-top: 0; }

/* ---- co2 ---- */
.an-co2heros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.an-co2hero { padding: 18px 22px; border-color: var(--c-groen); display: flex; flex-direction: column; gap: 5px; }
.an-co2hero strong { font-size: 1.6rem; color: var(--c-groen-d); }
.an-co2hero em { font-style: normal; font-size: .7rem; color: var(--c-ink-3); }
.an-co2rij { display: flex; flex-direction: column; gap: 4px; }
.an-co2rij__kop { display: flex; align-items: center; justify-content: space-between; font: 600 .78rem var(--font-ui); }
.an-co2rij em { font-style: normal; font-size: .64rem; color: var(--c-ink-3); }
.an-detzij { display: flex; flex-direction: column; gap: 14px; }
.an-methodiek {
  display: flex; align-items: center; gap: 9px; padding: 12px 16px;
  border-radius: 11px; background: var(--c-groen-t); border: var(--lijndikte) solid var(--c-groen);
  font: 500 .76rem var(--font-ui); color: var(--c-ink-2);
}
.an-methodiek i { font-style: normal; color: var(--c-groen-d); font-weight: 700; }
.an-partnerblok { max-width: 720px; }
.an-klantvenster { max-width: 460px; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.an-klantkaart {
  border-radius: 16px; padding: 18px 20px;
  background: linear-gradient(135deg, var(--c-groen-t), var(--c-sage-t));
  border: var(--lijndikte) solid var(--c-groen);
  display: flex; flex-direction: column; gap: 6px;
}
.an-klantkaart > span { font: 600 .7rem var(--font-ui); color: var(--c-groen-d); }
.an-klantkaart strong { font: 800 1.5rem var(--font-ui); color: var(--c-groen-d); }
.an-klantkaart strong em { font-style: normal; font-size: .84rem; }
.an-klantkaart p { margin: 0; font-size: .76rem; color: var(--c-ink-2); line-height: 1.55; }

/* ---- responsief ---- */
@media (max-width: 1080px) {
  .an-bigrid, .an-aigrid, .an-repgrid, .an-levgrid, .an-nbagrid { grid-template-columns: 1fr; }
  .an-co2heros { grid-template-columns: 1fr; }
  .an-convrij, .an-uitvrij { grid-template-columns: 1fr; gap: 4px; }
  .an-convrij--kop, .an-uitvrij--kop { display: none; }
}

/* Scenario-vergelijk (E4c) */
.an-scenario { display: flex; flex-direction: column; gap: 4px; }
.an-scrij { display: grid; grid-template-columns: 70px 1.3fr 1.3fr 1.3fr 1fr; gap: 12px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--c-lijn); font-size: 12.5px; }
.an-scrij--kop { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-2); border-bottom: 0; }
.an-scbar { position: relative; display: flex; align-items: center; gap: 6px; height: 16px; }
.an-scbar b { display: block; height: 9px; border-radius: 99px; }
.an-scbar em { font-size: 10.5px; color: var(--c-ink-2); white-space: nowrap; }
.an-scbar b.is-budget, .an-sclegenda b.is-budget { background: var(--c-ink-3); }
.an-scbar b.is-forecast, .an-sclegenda b.is-forecast { background: var(--c-amber); }
.an-scbar b.is-real, .an-sclegenda b.is-real { background: var(--c-groen-d); }
.an-scleeg { color: var(--c-ink-3); font-size: 11px; }
.an-sclegenda { display: flex; gap: 16px; margin-top: 8px; font-size: 11.5px; color: var(--c-ink-2); }
.an-sclegenda b { display: inline-block; width: 20px; height: 8px; border-radius: 99px; margin-right: 5px; vertical-align: middle; }

/* Reviewronde Tim 23-07 · punt 12a: kruistabel + filterlat in de BI-bouwer */
.an-chart__acties { margin-left: auto; }
.an-kruiswrap { overflow-x: auto; }
.an-kruis { width: 100%; border-collapse: collapse; font-size: .76rem; }
.an-kruis th, .an-kruis td { padding: 7px 10px; border-bottom: 1px solid var(--c-lijn); text-align: right; white-space: nowrap; }
.an-kruis thead th { font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: var(--c-ink-3); }
.an-kruis tbody th, .an-kruis thead th:first-child { text-align: left; font-weight: 700; }
.an-kruis td { background: linear-gradient(to left, var(--c-groen-t) var(--vul, 0%), transparent var(--vul, 0%)); }
.an-kruis__tot { font-weight: 800; border-left: 1px solid var(--c-lijn); background: none !important; }