/* e8b.css -- verbruik, budget, trace, netwerk. Tokens uit core.css, geen eigen hex. */

/* DE ENE USAGE-TAB (DEC-0000-0140): een rij sectieknoppen, daaronder een van de drie */
.e8b-usage { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.e8b-usagetabs {
  flex: none; display: flex; gap: 14px; padding: 0 14px; height: var(--row-h);
  align-items: center; border-bottom: 1px solid var(--rule);
}
.e8b-usagetab {
  font-size: calc(var(--ui-fs) * 11 / 13); text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-dim); height: 100%; border-bottom: 1px solid transparent;
}
.e8b-usagetab.on { color: var(--text); border-bottom-color: var(--focus); }
.e8b-usage > [hidden] { display: none; }
.e8b-netpanel { flex: 1; min-height: 0; overflow: auto; padding: 6px 14px; }
.e8b-side { display: flex; flex-direction: column; padding: 10px 14px; gap: 14px; overflow: auto; flex: 1; min-height: 0; }
.e8b-blok { display: flex; flex-direction: column; gap: 4px; }
.e8b-blok-grow { flex: 1; min-height: 0; }
.e8b-koplabel {
  font-size: calc(var(--ui-fs) * 10 / 13); text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-dim);
}

.e8b-budkop { color: var(--text-strong); font-size: calc(var(--ui-fs) * 13 / 13); }
.e8b-budsub { color: var(--text-dim); font-size: calc(var(--ui-fs) * 11 / 13); }
.e8b-budpct {
  height: 4px; border-radius: 2px; background: var(--surface2); overflow: hidden;
}
.e8b-budpct .fill { height: 100%; background: var(--accent-hi); }
/* S-0000-0248: de budgetkop is nu klikbaar -- zelfde hover/focus-taal als een e8b-gebrow */
.e8b-budblok { cursor: pointer; border-radius: 3px; padding: 2px 4px; margin: -2px -4px; }
.e8b-budblok:hover, .e8b-budblok:focus-visible { background: var(--hover); }

/* S-0000-0248: verbruiksregels-paneel (achter de budgetkop) */
.e8b-reglijst { display: flex; flex-direction: column; overflow: auto; }
.e8b-regrow { display: flex; align-items: center; gap: 10px; padding: 3px 8px; font-size: calc(var(--ui-fs) * 12 / 13); }
.e8b-regsoort { min-width: 64px; text-transform: uppercase; font-size: calc(var(--ui-fs) * 10 / 13); letter-spacing: .03em; color: var(--text-dim); }
.e8b-regsoort.fout { color: var(--danger-tx); }
.e8b-regsoort.afgebroken { color: var(--attn); }
.e8b-regsoort.ok { color: var(--ok); }
.e8b-regmodel { color: var(--text); min-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.e8b-regtok { color: var(--text-dim); min-width: 130px; }
.e8b-regms { color: var(--text-dim); margin-left: auto; }

/* S-0000-0246: tokenverbruik-paneel (tokens_uur/tokens_sessies/tokens_kosten) */
.e8b-tokenwrap { display: flex; flex-direction: column; gap: 16px; padding: 10px; overflow: auto; flex: 1; min-height: 0; }
.e8b-tokenkosten { display: flex; gap: 18px; flex-wrap: wrap; }
.e8b-tokenkosten .cel { display: flex; flex-direction: column; gap: 2px; }
.e8b-tokenkosten .lbl { font-size: calc(var(--ui-fs) * 10 / 13); text-transform: uppercase; letter-spacing: .03em; color: var(--text-dim); }
.e8b-tokenkosten .val { font-size: calc(var(--ui-fs) * 15 / 13); color: var(--text-strong); }
.e8b-tokenuur, .e8b-tokensessie {
  display: flex; align-items: center; gap: 8px; padding: 2px 4px; font-size: calc(var(--ui-fs) * 12 / 13);
}
.e8b-tokenuur .k, .e8b-tokensessie .k { min-width: 110px; color: var(--text-dim); }
.e8b-tokenuur .v, .e8b-tokensessie .v { color: var(--text); }
.e8b-tokenuur .cr, .e8b-tokensessie .cr { color: var(--text-dim); margin-left: auto; font-size: calc(var(--ui-fs) * 11 / 13); }

/* S-0000-0367: BY PROVIDER / MODEL -- verbruik_groepen, same row language as e8b-regrow */
.e8b-groeplijst { display: flex; flex-direction: column; overflow: auto; }
.e8b-tokengroep { display: flex; align-items: center; gap: 10px; padding: 3px 8px; font-size: calc(var(--ui-fs) * 12 / 13); }
.e8b-tokengroep .prov { min-width: 72px; text-transform: uppercase; font-size: calc(var(--ui-fs) * 10 / 13); letter-spacing: .03em; color: var(--text-dim); }
.e8b-tokengroep .model { color: var(--text); min-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.e8b-tokengroep .calls { color: var(--text-dim); min-width: 90px; }
.e8b-tokengroep .tok { color: var(--text-dim); min-width: 170px; }
.e8b-tokengroep .bytes { color: var(--text-dim); min-width: 150px; }
.e8b-tokengroep .kosten { color: var(--text-strong); margin-left: auto; }
.e8b-tokengroep-tot { border-top: 1px solid var(--surface2); margin-top: 2px; padding-top: 5px; font-weight: 600; }

.e8b-tempowrap svg.e8b-tempo { width: 100%; height: 60px; display: block; }
.e8b-tempo .klaar { fill: none; stroke: var(--ok); stroke-width: 1.4; }
.e8b-tempo .fout  { fill: none; stroke: var(--danger); stroke-width: 1.4; }
.e8b-tempo .tok   { fill: none; stroke: var(--text-dim); stroke-width: 1; stroke-dasharray: 2 2; }

.e8b-geblijst { display: flex; flex-direction: column; overflow: auto; min-height: 0; }
.e8b-gebrow {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 4px; border-radius: 3px; cursor: pointer;
}
.e8b-gebrow:hover, .e8b-gebrow:focus-visible { background: var(--hover); }
.e8b-soort {
  font-size: calc(var(--ui-fs) * 10 / 13); text-transform: uppercase; letter-spacing: .03em;
  color: var(--text-dim); min-width: 56px;
}
.e8b-soort.err  { color: var(--danger-tx); }
.e8b-soort.attn { color: var(--attn); }
.e8b-soort.ok   { color: var(--ok); }
.e8b-ond { color: var(--text); font-size: calc(var(--ui-fs) * 12 / 13); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.e8b-leeg { color: var(--text-dim); font-size: calc(var(--ui-fs) * 12 / 13); padding: 10px 4px; }
.e8b-warn { color: var(--attn); font-size: calc(var(--ui-fs) * 11 / 13); padding: 4px; }

/* ---- tracepaneel ------------------------------------------------------------------ */
.e8b-tracetitel {
  padding: 6px 10px; color: var(--text-dim); font-size: calc(var(--ui-fs) * 11 / 13);
  border-bottom: 1px solid var(--rule);
}
.e8b-tracelijst { flex: 1; overflow: auto; padding: 4px 0; }
.e8b-tracerow {
  display: flex; align-items: center; gap: 8px;
  padding: 2px 10px; font-size: calc(var(--ui-fs) * 12 / 13); font-family: var(--font-code);
}
.e8b-tracerow:hover { background: var(--hover); }
.e8b-status { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--text-muted); }
.e8b-status.ok   { background: var(--ok); }
.e8b-status.err  { background: var(--danger); }
.e8b-status.run  { background: var(--accent-hi); }
.e8b-status.attn { background: var(--attn); }
.e8b-trsoort { width: 80px; color: var(--text-dim); flex: none; }
.e8b-trnaam  { width: 220px; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: none; }
.e8b-trkern  { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }