/* Insights (#/insights, src/insights.js): tiles, chart cards and the tools table. Charts are uPlot
   (assets/uplot.css is its own sheet); everything here reads the app's tokens from search.css, so
   the incognito tint and any later palette change reach the charts' frame too. The chart lines
   themselves take their colours from insightsplan.js (one colour per host, fixed). */

.ins-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 4px 0 0; }
.ins-controls .gfilters { margin: 0; }
.ins-unzoom { cursor: pointer; color: var(--ai); }
.ins-note { min-height: 16px; margin: 8px 2px 12px; color: var(--ink-3); font-size: 12px; }

.ins-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 760px) { .ins-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.ins-tile { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
.ins-k { color: var(--ink-2); font-size: 11.5px; font-weight: 560; line-height: 1.3; }
.ins-v { color: var(--ink); font-size: 20px; font-weight: 680; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ins-d { min-height: 15px; color: var(--ink-3); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.ins-d.good { color: #15803d; }
.ins-d.bad { color: #b91c1c; }

.ins-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 760px) { .ins-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ins-wide { grid-column: 1 / -1; }
.ins-card { min-width: 0; margin: 0; padding: 12px 12px 6px; border: 1px solid var(--line); border-radius: 15px;
  background: var(--surface); }
.ins-card figcaption { margin: 0 2px 8px; }
.ins-card figcaption b { display: block; color: var(--ink); font-size: 13.5px; font-weight: 640; }
.ins-card figcaption span { display: block; margin-top: 2px; color: var(--ink-3); font-size: 11.5px; }
.ins-plot { width: 100%; min-height: 190px; }
.ins-empty { display: flex; align-items: center; justify-content: center; min-height: 170px; padding: 0 24px;
  border-radius: 10px; background: var(--surface-2); color: var(--ink-3); font-size: 12.5px; text-align: center; }

/* uPlot's legend, quieted to the app's type: the live values under each chart. */
.ins-card .uplot { font-family: inherit; }
.ins-card .u-legend { margin-top: 2px; color: var(--ink-2); font-size: 11.5px; text-align: left; }
.ins-card .u-legend th { font-weight: 500; }
.ins-card .u-legend .u-series > * { padding: 2px 5px; }
.ins-card .u-legend .u-value { font-variant-numeric: tabular-nums; color: var(--ink); }
.ins-card .u-legend .u-off > * { opacity: .35; }
.ins-card .u-select { background: color-mix(in srgb, var(--ai) 10%, transparent); }

/* the deploy / restart key in the Models heading */
.ins-marks { margin-left: auto; color: var(--ink-3); font-size: 10.5px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.ins-marks i { display: inline-block; width: 14px; margin: 0 4px 3px 10px; vertical-align: middle; border-top: 2px dashed; }
.ins-marks i.deploy { border-color: rgba(37, 99, 235, .7); }
.ins-marks i.restart { border-color: rgba(220, 38, 38, .7); }

/* the tools table: one row per tool, a bar for its share of calls behind its name */
.ins-tools { overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
.ins-trow { display: grid; grid-template-columns: minmax(0, 1fr) 54px 54px 44px 62px; gap: 8px; align-items: center;
  width: 100%; padding: 8px 12px; border: 0; border-top: 1px solid var(--line); background: none;
  color: var(--ink); font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; cursor: pointer; }
.ins-trow:hover { background: var(--surface-2); }
.ins-trow.on { background: color-mix(in srgb, var(--ai) 7%, var(--surface)); }
.ins-thead { border-top: 0; color: var(--ink-3); font-size: 10.5px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; cursor: default; }
.ins-thead:hover { background: none; }
.ins-thead span:first-child { text-align: left; }
.ins-tname { position: relative; min-width: 0; text-align: left; }
.ins-tname i { position: absolute; left: 0; top: 50%; height: 22px; transform: translateY(-50%); border-radius: 6px;
  background: color-mix(in srgb, var(--ai) 11%, transparent); }
.ins-tname em { position: relative; display: block; overflow: hidden; padding-left: 7px; font-style: normal;
  text-overflow: ellipsis; white-space: nowrap; }
.ins-trow .bad { color: #b91c1c; font-weight: 600; }
.ins-trow .ins-muted { color: var(--ink-2); }
.ins-tools + .ins-card { margin-top: 12px; }

/* the services' tables: read-only rows (the commonest warnings, the busiest ops) */
.ins-tools.ins-tab-err, .ins-tools.ins-tab-ops { margin-top: 12px; }
.ins-tab-err .ins-trow { grid-template-columns: minmax(0, 1fr) 96px 52px; }
.ins-tab-ops .ins-trow { grid-template-columns: minmax(0, 1fr) 52px 60px 60px 48px; }
.ins-static { cursor: default; }
.ins-static:hover { background: none; }
.ins-msg { overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.ins-msg.bad { color: #b91c1c; }
@media (max-width: 480px) {
  .ins-trow { grid-template-columns: minmax(0, 1fr) 40px 44px 36px 52px; gap: 6px; font-size: 12px; }
  .ins-tab-err .ins-trow { grid-template-columns: minmax(0, 1fr) 72px 44px; font-size: 12px; }
  .ins-tab-ops .ins-trow { grid-template-columns: minmax(0, 1fr) 44px 52px 52px 40px; font-size: 12px; }
}