/* BI insights tab: report-driven usage analysis and its diagrams. */

.biBar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:14px 22px; background:var(--surface); border-bottom:1px solid var(--border);
}
.biBar select{
  font-family:inherit; font-size:12.5px; padding:7px 10px;
  border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--text); min-width:230px;
}
.biBar label{ font-size:12px; color:var(--muted); display:flex; align-items:center; gap:6px; }
.biStatus{ font-size:12px; color:var(--muted); }
.biStatus.err{ color:var(--critical); }

.biBody{ padding:20px 22px 40px; overflow-y:auto; }
.biIdle{ color:var(--muted); font-size:13px; max-width:760px; line-height:1.6; }

/* ---- headline numbers ---- */
.biStats{ display:flex; gap:34px; flex-wrap:wrap; margin-bottom:20px; }
.biStat .v{ font-family:var(--mono); font-size:26px; font-weight:700; color:var(--dark-teal); line-height:1.1; }
.biStat .l{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-top:3px; }
.biStat.alert .v{ color:var(--critical); }

/* ---- card grid ---- */
.biGrid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(430px, 1fr)); gap:16px; }
.biCard{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:16px 18px; box-shadow:var(--shadow-sm);
  min-width:0;
}
.biCard.wide{ grid-column:1 / -1; }
.biCard h3{
  margin:0 0 3px; font-size:11.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); font-weight:700;
}
.biCard .hint{ margin:0 0 12px; font-size:11.5px; color:var(--muted); line-height:1.5; }
/* max-width, never width: these diagrams are laid out in real pixels, and
   stretching one to the card's width blows its height up with it. */
.biCard svg{ display:block; max-width:100%; height:auto; overflow:visible; }

/* Wide diagrams keep their natural size and scroll inside their own card
   rather than shrinking to illegibility or stretching the page. */
.biScroll{ overflow-x:auto; }
.biScroll svg{ max-width:none; }

/* ---- shared svg text ---- */
.biSvgLabel{ font-size:10px; fill:var(--text); font-family:inherit; }
.biSvgMuted{ font-size:9.5px; fill:var(--muted); font-family:inherit; }
.biSvgValue{ font-size:10px; fill:var(--dark-teal); font-family:var(--mono); font-weight:700; }
/* Text sitting on a dark fill. Must come after the classes above: a CSS `fill`
   beats a `fill="#fff"` presentation attribute, so setting the attribute alone
   left these labels dark-on-dark and invisible. */
.biOnDark{ fill:#ffffff; }
.biOnDarkSoft{ fill:#CFE9EA; }

/* ---- legend ---- */
.biLegend{ display:flex; gap:14px; flex-wrap:wrap; margin-top:10px; font-size:11px; color:var(--muted); }
.biLegend span{ display:flex; align-items:center; gap:5px; }
.biLegend i{ width:10px; height:10px; border-radius:2px; display:inline-block; }

/* ---- tables ---- */
.biTable{ width:100%; border-collapse:collapse; font-size:12px; }
.biTable th{
  text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--muted); padding:6px 8px; border-bottom:1px solid var(--border);
  position:sticky; top:0; background:var(--surface);
}
.biTable td{ padding:6px 8px; border-bottom:1px solid var(--border-soft); vertical-align:top; }
.biTable tr:last-child td{ border-bottom:none; }
.biTable code{ font-family:var(--mono); font-size:11px; color:var(--dark-teal); }
.biTableWrap{ max-height:320px; overflow-y:auto; }

.biTag{
  display:inline-block; font-size:10px; padding:1px 7px; border-radius:20px;
  font-weight:600; letter-spacing:.02em;
}
.biTag.ok{ background:var(--good-wash); color:var(--good); }
.biTag.warn{ background:var(--warn-wash); color:var(--warn); }
.biTag.bad{ background:var(--critical-wash); color:var(--critical); }
.biTag.info{ background:var(--info-wash); color:var(--info); }
.biTag.muted{ background:var(--border-soft); color:var(--muted); }

.biEmpty{ font-size:12px; color:var(--muted); padding:10px 2px; }

/* Hover highlight shared by the flow and matrix diagrams. */
.biNode, .biLink, .biCell, .biArc{ transition:opacity .12s ease; }
.biFaded{ opacity:.12; }
.biHot{ opacity:1; }