/* 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); }
/* #0000-0619: 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); }

/* #0000-0619: 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; }

/* #0000-0617: 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); }

/* #0000-0770: 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; }

/* #0000-1220: Cost & usage > Jev -- the doubt per place beside its threshold, then the last decisions */
.e8b-jev { display: flex; flex-direction: column; gap: 12px; padding: 8px; overflow: auto; }
.e8b-jevkinds { display: flex; flex-direction: column; }
.e8b-jevkind { display: grid; grid-template-columns: minmax(180px, 2fr) repeat(4, minmax(70px, 1fr)) minmax(170px, 1.4fr); gap: 10px; align-items: center; padding: 3px 8px; font-size: calc(var(--ui-fs) * 12 / 13); }
.e8b-jevhead { color: var(--text-muted); border-bottom: 1px solid var(--rule); }
.e8b-jevdoubt { color: var(--attn); font-weight: 600; }
.e8b-jevthr { display: flex; align-items: center; gap: 4px; }
.e8b-jevinp { width: 4.5em; }
.e8b-jevsave { padding: 1px 8px; }
.e8b-jevrow .e8b-jevtime { width: 7.5em; color: var(--text-muted); flex: none; }
.e8b-jevrow .e8b-jevplace { width: 16em; flex: none; }
.e8b-jevrow .e8b-jevq { width: 12em; flex: none; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.e8b-jevrow .e8b-jeva { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.e8b-jevsure { width: 8em; flex: none; display: flex; align-items: center; gap: 6px; position: relative; }
.e8b-jevbar { display: inline-block; height: 6px; background: var(--accent); border-radius: 3px; max-width: 4em; }

/* #0000-2708: What The Role Did -- per ticket the turns of a role */
.e8b-beurtenview { overflow: auto; padding: 8px 12px; }
.e8b-beurten { display: flex; flex-direction: column; gap: 14px; max-width: 70rem; }
.e8b-beurtrow { flex-wrap: wrap; cursor: pointer; }
.e8b-beurtrow:hover { background: var(--hover); }
.e8b-beurtrow .e8b-jevtime { width: 7.5em; color: var(--text-muted); flex: none; }
.e8b-beurtrol { width: 4.5em; flex: none; }
.e8b-beurtrow .e8b-ond { flex: 1 1 14em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* #0000-2669: Usage Overview -- cost per role, model, engine, day and ticket */
.e8b-ovbar { display: flex; gap: 6px; padding: 4px 0 10px; }
.e8b-ovper { padding: 3px 10px; border: 1px solid var(--rule); border-radius: 4px; background: transparent; color: inherit; cursor: pointer; }
.e8b-ovper.on { border-color: var(--accent); font-weight: 700; }
.e8b-ovname { flex: 1 1 10em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.e8b-ovtotal { font-weight: 600; }

/* #0000-2951: Cost & Usage as a screen in the work area (Organisation menu); the sections are the old tab's, large */
.e8b-costhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.e8b-costh { margin: 0 0 8px; font-size: 1.3em; }
.e8b-costcard .e8b-usage { height: auto; min-height: 60vh; }
.e8b-costcard .e8b-usagetabs { flex-wrap: wrap; height: auto; min-height: var(--row-h); row-gap: 2px; padding: 0; }
.e8b-costcard .e8b-usagetab { padding: 6px 0; height: auto; }
.e8b-costcard .e8b-side, .e8b-costcard .e8b-netpanel, .e8b-costcard .e8b-tokenwrap, .e8b-costcard .e8b-jev { overflow: visible; padding-left: 0; padding-right: 0; }
.e8b-costcard .e8b-ailog { min-height: 50vh; }
body.mob .e8b-costcard .e8b-usagetabs { gap: 10px; }
body.mob .e8b-costcard { overflow-x: hidden; }
body.mob .e8b-costcard .e8b-regrow, body.mob .e8b-costcard .e8b-jevkind, body.mob .e8b-costcard .e8b-tokengroep { flex-wrap: wrap; }