/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Number input spinners inherit the dark color-scheme so they render correctly in dark mode */
.dark input[type=number] {
  color-scheme: dark;
}

/* Keyboard-highlighted item in the description library panel */
.panel-item-active {
  background-color: rgb(199 210 254); /* indigo-200 */
  outline: 2px solid rgb(99 102 241); /* indigo-500 */
  outline-offset: -2px;
  border-radius: 2px;
}
.dark .panel-item-active {
  background-color: rgb(55 48 163 / 0.7); /* indigo-800 semi-transparent */
  outline-color: rgb(129 140 248); /* indigo-400 */
  color: #fff;
}

/* ── Data visualisation palette ──────────────────────────────────────────────
 * The money waterfall's stages split across two hue families, because that is
 * the split the money actually makes: blue is the commitment side (what is
 * budgeted, then ordered) and green the certified side (what has been billed,
 * then signed off). The trade bars below the chart use the same two anchors —
 * --viz-committed and --viz-claimed ARE stage 2 and stage 4 — so a section
 * carries one colour wherever it is drawn. Within each family the lighter step
 * is the larger, earlier figure.
 *
 * Checked against the card surfaces these render on — #ffffff in light,
 * gray-800 #1f2937 in dark — for lightness banding, chroma, contrast and
 * colour-vision separation (blue vs green survives deuteranopia; red/green
 * would not, which is why severity red only ever appears with a word beside
 * it). Re-run that check before changing a step; don't hand-tune them.
 *
 * Each fill carries its own -ink, the colour a value label printed inside that
 * bar has to be to clear 4.5:1 against it — which is why stage 4's green takes
 * dark ink while stage 2's blue takes white.
 */
:root {
  --viz-stage-1: #86b6ef;  --viz-stage-1-ink: #0b1220;
  --viz-stage-2: #256abf;  --viz-stage-2-ink: #ffffff;
  --viz-stage-3: #7fd9b8;  --viz-stage-3-ink: #0b1220;
  --viz-stage-4: #0f9f74;  --viz-stage-4-ink: #0b1220;
  --viz-committed: #256abf;
  --viz-certified: #eb6834;
  --viz-claimed: #0f9f74;
  --viz-surface: #ffffff;
  --viz-track: #eef2f7;
  --viz-grid: #e5e7eb;
  --viz-axis: #cbd5e1;
  --viz-connector: #94a3b8;
}

.dark {
  --viz-stage-1: #a3c8f2;  --viz-stage-1-ink: #0b1220;
  --viz-stage-2: #3987e5;  --viz-stage-2-ink: #0b1220;
  --viz-stage-3: #c3f2e0;  --viz-stage-3-ink: #0b1220;
  --viz-stage-4: #34d399;  --viz-stage-4-ink: #0b1220;
  --viz-committed: #3987e5;
  --viz-certified: #d95926;
  --viz-claimed: #34d399;
  --viz-surface: #1f2937;
  --viz-track: #374151;
  --viz-grid: #374151;
  --viz-axis: #4b5563;
  --viz-connector: #6b7280;
}

/* Status colours are fixed in both modes and never carry meaning alone — every
 * use is paired with an icon or a word. */
:root {
  --viz-good: #0ca30c;      --viz-good-ink: #0b1220;
  --viz-warning: #fab219;   --viz-warning-ink: #0b1220;
  --viz-critical: #d03b3b;  --viz-critical-ink: #ffffff;
}

/* S-curve hover: the crosshair and readout are progressive enhancement, so the
 * plot stays readable with the controller disconnected. */
.s-curve-hit { fill: transparent; }
.s-curve[data-active] .s-curve-crosshair { opacity: 1; }
.s-curve-crosshair { opacity: 0; transition: opacity 120ms ease; }

/* Sticky table header. The offset is whatever the frozen bars above it add up
 * to, measured by the sticky-table controller; the sticky lives on the cells
 * rather than the row because a background painted on <thead>/<tr> doesn't
 * follow a stuck header in every browser. */
.sticky-table-head th {
  position: sticky;
  top: var(--sticky-table-top, 0px);
  z-index: 20;
}