/* ── Tokens — GESCOOPT tot .ems-embed (zelfde palet als hoofd-dashboard) ─────── */
.ems-embed *, .ems-embed *::before, .ems-embed *::after { box-sizing: border-box; margin: 0; padding: 0; }

.ems-embed {
  --bg:#0d1117; --bg-card:#161b22; --bg-card2:#1c2128;
  --border:#30363d; --border-h:#484f58;
  --text:#e6edf3; --text-muted:#8b949e; --text-dim:#6e7681;
  --green:#3fb950; --green-dim:#1a4425;
  --orange:#f0883e; --orange-dim:#4a2410;
  --red:#f85149; --red-dim:#3d1a18;
  --blue:#58a6ff; --yellow:#d29922; --yellow-dim:#3d2e0a; --purple:#bc8cff;
  --radius:8px; --radius-lg:12px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --mono:"SF Mono","Fira Code","Fira Mono",monospace;
  background:var(--bg); color:var(--text); font-family:var(--font);
}

/* ── Main grid ───────────────────────────────────────────────────────────────── */
.rm {
  max-width:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:1rem;
}
/* reportbody is geen visueel element: kinderen worden directe grid-items */
.reportbody { display:contents; }
.rm__loading { grid-column:1/-1; text-align:center; color:var(--text-muted); padding:4rem 0; }

/* ── Selectie-panel (eerste card) ────────────────────────────────────────────── */
.selpanel {
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
}
.selpanel__title { margin:0; font-size:1.4rem; font-weight:600; line-height:1.2; display:flex; align-items:center; gap:0.5rem; flex:1; }
.selpanel__title .rm-acc { color:var(--blue); }
.selpanel__nav { display:flex; align-items:center; gap:0.4rem; }
.selpanel__navbtn {
  cursor:pointer; border:1px solid var(--border-h); background:var(--bg-card2);
  color:var(--text); width:34px; height:34px; border-radius:var(--radius);
  font-size:1.3rem; line-height:1; display:flex; align-items:center; justify-content:center;
}
.selpanel__navbtn:hover:not(:disabled) { background:var(--border); }
.selpanel__navbtn:disabled { opacity:0.35; cursor:not-allowed; }
.selpanel__date {
  background:var(--bg-card2); border:1px solid var(--border-h); color:var(--text);
  border-radius:var(--radius); padding:0.4rem 0.6rem; font-size:0.9rem; color-scheme:dark;
}
.card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:1.1rem 1.2rem;
}
.card--wide { grid-column:1/-1; }
.card__title {
  font-size:0.95rem; font-weight:600; margin-bottom:0.9rem;
  display:flex; align-items:center; gap:0.5rem; color:var(--text);
}
.card__title .sub { font-weight:400; color:var(--text-muted); font-size:0.8rem; margin-left:auto; }

/* ── Score-hero ──────────────────────────────────────────────────────────────── */
.hero {
  grid-column:1/-1; display:flex; align-items:center; gap:1.5rem;
  background:linear-gradient(135deg,var(--bg-card),var(--bg-card2));
  border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.3rem 1.5rem;
}
.hero__score { position:relative; flex-shrink:0; width:120px; height:120px; }
.hero__score svg { width:100%; height:100%; transform:rotate(-90deg); }
.hero__score-val {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
}
.hero__score-num { font-size:2.2rem; font-weight:700; line-height:1; }
.hero__score-lbl { font-size:0.65rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; }
.hero__summary { flex:1; }
.hero__summary h2 { font-size:1.05rem; margin-bottom:0.5rem; }
.hero__stats { display:flex; flex-wrap:wrap; gap:1.2rem; margin-top:0.6rem; }
.hero__stat { }
.hero__stat-val { font-size:1.25rem; font-weight:700; }
.hero__stat-lbl { font-size:0.7rem; color:var(--text-muted); }
.v-green { color:var(--green); } .v-red { color:var(--red); }
.v-orange { color:var(--orange); } .v-blue { color:var(--blue); } .v-yellow { color:var(--yellow); }

/* ── KPI mini-tegels ─────────────────────────────────────────────────────────── */
.kpis { grid-column:1/-1; display:grid; grid-template-columns:repeat(4,1fr); gap:0.8rem; }
.kpi { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:0.8rem 0.9rem; }
.kpi__val { font-size:1.4rem; font-weight:700; }
.kpi__lbl { font-size:0.72rem; color:var(--text-muted); margin-top:0.15rem; }
.kpi__hint { font-size:0.66rem; color:var(--text-dim); margin-top:0.3rem; }

/* ── Grafieken ───────────────────────────────────────────────────────────────── */
/* height:auto + scope: de home-style.css zet .chart-wrap op 340px (24u-grafiek);
   die bleedt hierin → grafiek kreeg ~169px lege ruimte eronder. Hier opheffen. */
.ems-embed .chart-wrap { width:100%; position:relative; height:auto; }
.chart-svg { display:block; width:100%; height:auto; }
.chart-svg .hover-strip { fill:transparent; cursor:crosshair; }
.chart-svg .hover-strip.active { fill:rgba(255,255,255,0.05); }

/* Tooltip (zweeft boven de grafiek, volgt de cursor) */
.chart-tip {
  position:absolute; pointer-events:none; z-index:5;
  background:var(--bg); border:1px solid var(--border-h); border-radius:var(--radius);
  padding:0.45rem 0.6rem; font-size:0.75rem; line-height:1.5; color:var(--text);
  box-shadow:0 4px 14px rgba(0,0,0,0.5); white-space:nowrap;
  opacity:0; transition:opacity 0.08s; transform:translate(-50%,-100%);
}
.chart-tip.visible { opacity:1; }
.chart-tip__hd { font-weight:700; margin-bottom:0.2rem; }
.chart-tip__row { display:flex; align-items:center; gap:0.4rem; justify-content:space-between; }
.chart-tip__row i { width:9px; height:9px; border-radius:2px; display:inline-block; flex-shrink:0; }
.chart-tip__k { color:var(--text-muted); display:flex; align-items:center; gap:0.35rem; }
.chart-tip__v { font-weight:600; }
.legend { display:flex; gap:1rem; flex-wrap:wrap; margin-top:0.6rem; font-size:0.75rem; color:var(--text-muted); }
.legend span { display:inline-flex; align-items:center; gap:0.35rem; }
.legend i { width:11px; height:11px; border-radius:2px; display:inline-block; }

/* ── Batterij-tabel ──────────────────────────────────────────────────────────── */
.bat-table { width:100%; border-collapse:collapse; font-size:0.85rem; }
.bat-table th, .bat-table td { text-align:right; padding:0.45rem 0.6rem; border-bottom:1px solid var(--border); }
.bat-table th:first-child, .bat-table td:first-child { text-align:left; }
.bat-table th { color:var(--text-muted); font-weight:500; font-size:0.75rem; }
.bat-table tfoot td { font-weight:700; border-top:2px solid var(--border-h); border-bottom:none; }

/* ── Bron-effect badges ──────────────────────────────────────────────────────── */
.src-eff { font-size: 0.7rem; font-weight: 700; padding: 0.1rem 0.45rem; border-radius: 4px; white-space: nowrap; }
.src-eff--ok   { background: var(--green-dim);  color: var(--green); }
.src-eff--mid  { background: var(--yellow-dim); color: var(--yellow); }
.src-eff--bad  { background: var(--red-dim);    color: var(--red); }
.src-eff--none { color: var(--text-dim); }
.src-legend { margin-top: 0.6rem; font-size: 0.7rem; color: var(--text-muted); line-height: 1.4; }

/* ── Suggesties ──────────────────────────────────────────────────────────────── */
.suggesties { display:flex; flex-direction:column; gap:0.7rem; }
.sug {
  border:1px solid var(--border); border-left-width:4px; border-radius:var(--radius);
  padding:0.7rem 0.9rem; background:var(--bg-card2);
}
.sug--hoog   { border-left-color:var(--red); }
.sug--middel { border-left-color:var(--orange); }
.sug--laag   { border-left-color:var(--yellow); }
.sug--ok     { border-left-color:var(--green); }
.sug__head { display:flex; align-items:center; gap:0.5rem; font-weight:600; font-size:0.9rem; }
.sug__badge { font-size:0.62rem; text-transform:uppercase; letter-spacing:0.5px; padding:0.1rem 0.4rem; border-radius:3px; font-weight:700; }
.sug--hoog   .sug__badge { background:var(--red-dim); color:var(--red); }
.sug--middel .sug__badge { background:var(--orange-dim); color:var(--orange); }
.sug--laag   .sug__badge { background:var(--yellow-dim); color:var(--yellow); }
.sug--ok     .sug__badge { background:var(--green-dim); color:var(--green); }
.sug__uitleg { font-size:0.8rem; color:var(--text-muted); margin-top:0.35rem; line-height:1.45; }
.sug__actie { font-size:0.8rem; margin-top:0.4rem; color:var(--text); }
.sug__actie b { color:var(--blue); }

/* ── Probleem-uren lijst ─────────────────────────────────────────────────────── */
.prob-list { display:flex; flex-direction:column; gap:0.35rem; font-size:0.82rem; }
.prob-row { display:flex; align-items:center; gap:0.6rem; padding:0.35rem 0.5rem; background:var(--bg-card2); border-radius:var(--radius); }
.prob-row__uur { font-family:var(--mono); color:var(--text-muted); flex-shrink:0; }
.prob-row__tag { font-size:0.68rem; padding:0.1rem 0.4rem; border-radius:3px; font-weight:600; flex-shrink:0; }
.tag-exp { background:var(--orange-dim); color:var(--orange); }
.tag-imp { background:var(--red-dim); color:var(--red); }
.prob-row__txt { color:var(--text-muted); }
.empty { color:var(--text-dim); font-style:italic; font-size:0.82rem; padding:0.5rem 0; }

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width:980px) {
  .kpis { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px) {
  html { font-size:14px; }
  .rm { grid-template-columns:1fr; padding:0; gap:0.8rem; }
  .card { grid-column:1 !important; }
  .hero { flex-direction:column; text-align:center; }
  .hero__stats { justify-content:center; }
  .selpanel { gap:0.6rem; }
  .selpanel__title { font-size:1.2rem; order:-1; flex:1 0 100%; }
  .selpanel__nav { margin-left:auto; }
}
@media (max-width:420px) {
  .kpis { grid-template-columns:1fr 1fr; gap:0.5rem; }
  .kpi__val { font-size:1.2rem; }
  .hero__score { width:96px; height:96px; }
  .hero__score-num { font-size:1.8rem; }
  .bat-table th, .bat-table td { padding:0.35rem 0.35rem; font-size:0.78rem; }
}