/*
 * Gauge / KPI / status renderers for latest-value custom graphs.
 *
 * Self-contained so it does not depend on which utilities happen to be compiled
 * into the frozen nexus.css build (which omits .radial-progress and several
 * color-opacity utilities). Visuals are driven by --gauge-color, set per item by
 * a .gauge--<severity> class, and resolved against the theme's --color-* vars so
 * everything stays theme-aware. Layout (flex/grid/text) still uses utilities that
 * are present in nexus.css.
 */

/* Severity drives a single color variable that the pieces below consume. */
.gauge--ok        { --gauge-color: var(--color-success); }
.gauge--info      { --gauge-color: var(--color-info); }
.gauge--warning   { --gauge-color: var(--color-warning); }
.gauge--error     { --gauge-color: var(--color-error); }
.gauge--critical  { --gauge-color: var(--color-error); }
/* No thresholds configured: a real value, but neutral — not a green "all good". */
.gauge--untracked { --gauge-color: var(--color-base-content); }
.gauge--no_data   { --gauge-color: var(--color-base-300); }

/*
 * Readable on-surface shade of the state color, biased toward the theme's ink.
 * Raw --color-warning is a light amber that fails contrast as text/thin lines on
 * a light card; pulling it toward --color-base-content darkens it on light themes
 * and lightens it on dark themes, so value text and the radial ring stay legible
 * everywhere. Mixed in SRGB, not oklch: the theme neutrals carry a faint blue hue
 * (~h253), and oklch hue-interpolation would swing amber toward green on the way.
 * sRGB blends channels and keeps the hue. Foreground only (text, ring, borders).
 */
[class*="gauge--"] {
  --gauge-ink: color-mix(in srgb, var(--gauge-color) 52%, var(--color-base-content));
}

/* Grids / stacks per render type. */
.gauge-grid { display: grid; gap: 1rem; }
.gauge-stack { display: flex; flex-direction: column; gap: 1rem; }

.gauge-grid--radial { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gauge-grid--vertical { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gauge-grid--cards { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 640px) {
  .gauge-grid--radial { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gauge-grid--vertical { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gauge-grid--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .gauge-grid--radial { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Radial dial: a conic-gradient ring with a punched-out center. */
.gauge-radial {
  --value: 0;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 9999px;
  display: grid;
  place-items: center;
  position: relative;
  background: conic-gradient(var(--gauge-ink) calc(var(--value) * 1%), var(--color-base-200) 0);
}
.gauge-radial::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 9999px;
  background: var(--color-base-100);
}
.gauge-radial > * { position: relative; z-index: 1; }

/* Linear (horizontal) and vertical (tank) tracks. */
.gauge-track {
  position: relative;
  background: var(--color-base-200);
  overflow: hidden;
}
.gauge-track--h { height: 0.75rem; width: 100%; border-radius: 9999px; }
.gauge-track--v { width: 2.5rem; height: 8rem; border-radius: 0.375rem; }

.gauge-zone { position: absolute; }
.gauge-zone--h { top: 0; height: 100%; }
.gauge-zone--v { left: 0; width: 100%; }

/*
 * Zone fills are a hue (--zone-color) at partial alpha (--zone-alpha) over the
 * track. Mixing with transparent keeps the hue exact (transparent has no hue to
 * interpolate toward, unlike the faintly-blue theme neutrals). The old fault was
 * only weight: 30% let the dark track swallow amber into brown. Higher alpha keeps
 * it amber on dark and calm on light, and the scale escalates ok → critical so a
 * multi-band gauge reads as a severity ramp at a glance.
 *
 * --zone-color defaults to the severity hue; a per-graph override sets it inline
 * (style="--zone-color:#hex") while data-sev still supplies the matching alpha.
 */
.gauge-zone { background: color-mix(in oklch, var(--zone-color, var(--color-base-content)) var(--zone-alpha, 45%), transparent); }
.gauge-zone[data-sev="ok"]        { --zone-color: var(--color-success);      --zone-alpha: 45%; }
.gauge-zone[data-sev="info"]      { --zone-color: var(--color-info);         --zone-alpha: 45%; }
.gauge-zone[data-sev="warning"]   { --zone-color: var(--color-warning);      --zone-alpha: 58%; }
.gauge-zone[data-sev="error"]     { --zone-color: var(--color-error);        --zone-alpha: 62%; }
.gauge-zone[data-sev="critical"]  { --zone-color: var(--color-error);        --zone-alpha: 78%; }
.gauge-zone[data-sev="untracked"] { --zone-color: var(--color-base-content);  --zone-alpha: 16%; }
.gauge-zone[data-sev="no_data"]   { background: var(--color-base-300); }

/* Latest-value marker line across a track. */
.gauge-marker { position: absolute; background: var(--color-base-content); }
.gauge-marker--h { top: 0; height: 100%; width: 2px; transform: translateX(-1px); }

/*
 * Vertical (tank) gauge: zone-painted track + the latest reading shown three ways.
 * The track keeps the threshold zones (so the layout is still readable); on top of
 * it a translucent fill rises from the floor to the level, a bold pill sits on the
 * level line, and an external caret points in at it. A min/max scale flanks the bar
 * so the level carries numeric context. The fill/pill/caret use --gauge-color and
 * its derived --gauge-ink, so they track the live status color.
 */
.gauge-vrow { display: flex; align-items: stretch; justify-content: center; gap: 0.35rem; height: 8rem; }
.gauge-vscale {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  padding: 1px 0;
  font-size: 0.625rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.55;
}
.gauge-vbar { position: relative; }

/* Translucent level shade, floor → reading. Sits above the zones in DOM order. */
.gauge-vfill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: color-mix(in oklch, var(--gauge-color) 20%, transparent);
}

/* Bold level pill, centered on the reading line; ring keeps it off busy zones. */
.gauge-marker--pill {
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 999px;
  background: var(--gauge-ink);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-base-100) 75%, transparent);
  transform: translateY(2px);
}

/* External caret to the right of the bar, pointing in at the reading line. */
.gauge-caret {
  position: absolute;
  right: -7px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 7px solid var(--gauge-ink);
  transform: translateY(50%);
}

/* Value text + card borders use the contrast-safe ink; soft tint stays subtle. */
.gauge-value { color: var(--gauge-ink); }
.gauge-card-soft {
  background: color-mix(in srgb, var(--gauge-color) 12%, var(--color-base-100));
  border-color: var(--gauge-ink);
}
.gauge-card-accent { border-color: var(--gauge-ink); }