/* Rails UI Charts Pro
 *
 * Builds on the variables the open gem defines, so a theme set there carries
 * through here without being restated.
 */

:root {
  --rui-cohort-hue: var(--rui-chart-primary, #6366f1);

  /* The ramp stops short of full strength so one ink stays legible on every
     step. Flipping the text partway down instead put two neighbouring values
     — 54% and 55% — in opposite colours, which read as a rendering fault
     rather than as a scale. */
  --rui-cohort-ceiling: 55%;
  --rui-bar-list-fill: 0.16;

  /* Up and down borrow the open gem's positive and negative, which already
     flip with the theme. Only the middle state needs its own pair: there is no
     "partly good" in that palette. */
  --rui-tracker-degraded: #d97706;
  --rui-tracker-none: color-mix(in srgb, var(--rui-chart-muted, #94a3b8) 26%, transparent);

  /* Declared rather than left to the fallbacks in the rules below, so the
     knobs are discoverable by reading the stylesheet. Type is not restated
     here at all: everything follows the open gem's scale, which is what keeps
     a pro table from looking like it came from a different library. */
  --rui-tracker-height: 2rem;
  --rui-tracker-radius: 2px;

  --rui-financial-up: #0f766e;
  --rui-financial-down: #be123c;
  --rui-financial-overlay: #475569;
  --rui-financial-outline: rgb(71 85 105 / 0.64);
  --rui-financial-volume: #64748b;
  --rui-box-plot-upper: #818cf8;
  --rui-box-plot-lower: #bae6fd;
  --rui-box-plot-stroke: rgb(71 85 105 / 0.72);
  --rui-heatmap-color: #2563eb;
  --rui-forecast-actual: #4f46e5;
  --rui-forecast-line: #0f766e;
  --rui-forecast-band: #818cf8;
}

/* On a dark surface the mix runs toward the surface rather than toward white,
   so the same weights land far heavier. The ceiling comes down to compensate,
   and the bar track comes up to stay visible against near-black.

   Both strategies are answered, matching the open gem: it honours a `dark`
   class as well as `data-theme`, and a stylesheet that only listened to the
   media query left every class-based theme with no dark mode at all. */
@media (prefers-color-scheme: dark) {
  :root {
    --rui-cohort-ceiling: 72%;
    --rui-bar-list-fill: 0.3;
    --rui-tracker-degraded: #fbbf24;
    --rui-financial-up: #5eead4;
    --rui-financial-down: #fb7185;
    --rui-financial-overlay: #cbd5e1;
    --rui-financial-outline: rgb(203 213 225 / 0.72);
    --rui-financial-volume: rgb(148 163 184 / 0.38);
    --rui-box-plot-upper: #a5b4fc;
    --rui-box-plot-lower: #7dd3fc;
    --rui-box-plot-stroke: rgb(203 213 225 / 0.72);
    --rui-heatmap-color: #60a5fa;
    --rui-forecast-actual: #a5b4fc;
    --rui-forecast-line: #5eead4;
    --rui-forecast-band: #818cf8;
  }
}

.dark,
[data-theme="dark"] {
  --rui-cohort-ceiling: 72%;
  --rui-bar-list-fill: 0.3;
  --rui-tracker-degraded: #fbbf24;
  --rui-financial-up: #5eead4;
  --rui-financial-down: #fb7185;
  --rui-financial-overlay: #cbd5e1;
  --rui-financial-outline: rgb(203 213 225 / 0.72);
  --rui-financial-volume: rgb(148 163 184 / 0.38);
  --rui-box-plot-upper: #a5b4fc;
  --rui-box-plot-lower: #7dd3fc;
  --rui-box-plot-stroke: rgb(203 213 225 / 0.72);
  --rui-heatmap-color: #60a5fa;
  --rui-forecast-actual: #a5b4fc;
  --rui-forecast-line: #5eead4;
  --rui-forecast-band: #818cf8;
}

/* ---------------------------------------------------------------- bar list */

.railsui-bar-list {
  width: 100%;
  border-collapse: collapse;
  font-family: inherit;
  font-size: var(--rui-chart-text-size);
  line-height: 1.25rem;
}

.railsui-bar-list__row + .railsui-bar-list__row th,
.railsui-bar-list__row + .railsui-bar-list__row td {
  padding-top: 0.375rem;
}

.railsui-bar-list th {
  width: 100%;
  padding: 0;
  font-weight: 400;
  text-align: left;
}

/* The bar sits behind the label rather than beside it, so a long name never
   competes with the bar for width. */
.railsui-bar-list__track {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0 0.625rem;
  border-radius: 0.25rem;
  overflow: hidden;
}

.railsui-bar-list__bar {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 0.25rem;
  background-color: var(--rui-chart-primary, #6366f1);
  opacity: var(--rui-bar-list-fill, 0.16);
}

.railsui-bar-list__label {
  position: relative;
  color: var(--rui-chart-metric-value, #111827);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.railsui-bar-list__link {
  color: inherit;
  text-decoration: none;
}

.railsui-bar-list__link:hover {
  text-decoration: underline;
}

.railsui-bar-list__value {
  padding: 0 0 0 1rem;
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--rui-chart-metric-value, #111827);
}

/* ------------------------------------------------------------------ cohort */

.railsui-cohort {
  border-collapse: separate;
  border-spacing: 2px;
  font-family: inherit;
  font-size: var(--rui-chart-text-size-sm);
  line-height: 1rem;
}

.railsui-cohort th {
  font-weight: 500;
  color: var(--rui-chart-metric-muted, #6b7280);
  white-space: nowrap;
}

.railsui-cohort thead th {
  padding: 0 0.25rem 0.25rem;
  text-align: center;
}

.railsui-cohort thead th:first-child {
  text-align: left;
}

.railsui-cohort__label {
  padding-right: 0.75rem;
  text-align: left;
}

/* One hue, stepped by the weight the helper works out. Text flips to white
   once the cell is dark enough to need it. */
.railsui-cohort__cell {
  min-width: 3rem;
  padding: 0.375rem 0.5rem;
  border-radius: 0.25rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--rui-chart-metric-value, #111827);
  background-color: color-mix(
    in srgb,
    var(--rui-cohort-hue) calc(var(--rui-cohort-weight, 0) * var(--rui-cohort-ceiling, 55%)),
    transparent
  );
}

/* A cohort from three months ago has three months of history. The gap is the
   shape of the data, so it is drawn as absence rather than as zero. */
.railsui-cohort__cell--empty {
  background-color: transparent;
}

/* ----------------------------------------------------------------- treemap */

/* Apex writes stroke="#ffffff" onto each rectangle, which draws a light
   lattice over a dark card. It has to be corrected here rather than in the
   options: Apex sets it as a presentation attribute, and an attribute does not
   resolve a CSS variable — only the property does. */
.railsui-chart .apexcharts-treemap-rect {
  stroke: var(--rui-chart-surface, #ffffff);
  stroke-width: 2;
}

/* Financial and distribution charts use Apex SVG primitives that default to
   heavy black outlines. Keep the edge, but make it read like chart ink rather
   than illustration chrome. */
.railsui-chart .apexcharts-candlestick-area {
  stroke: var(--rui-financial-outline, rgb(71 85 105 / 0.64));
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.railsui-chart .apexcharts-candlestick-series line,
.railsui-chart .apexcharts-candlestick-series path,
.railsui-chart .apexcharts-boxPlot-series line,
.railsui-chart .apexcharts-boxPlot-series path {
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.railsui-chart .apexcharts-candlestick-series line,
.railsui-chart .apexcharts-candlestick-series path {
  stroke: var(--rui-financial-outline, rgb(71 85 105 / 0.64));
}

.railsui-chart:has(.apexcharts-candlestick-series) .apexcharts-legend-marker {
  width: 10px !important;
  min-width: 10px !important;
  height: 10px !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}

.railsui-chart:has(.apexcharts-candlestick-series) .apexcharts-legend-series:first-child .apexcharts-legend-marker {
  background: linear-gradient(90deg, var(--rui-financial-up, #0f766e) 0 50%, var(--rui-financial-down, #be123c) 50% 100%) !important;
}

.railsui-chart:has(.apexcharts-candlestick-series) .apexcharts-legend-series:nth-child(2) .apexcharts-legend-marker {
  opacity: 0.38 !important;
}

.railsui-chart:has(.apexcharts-candlestick-series) .apexcharts-legend-series:nth-child(n + 3) .apexcharts-legend-marker {
  height: 2px !important;
  margin-top: 3px;
}

.railsui-chart .apexcharts-boxPlot-area {
  stroke: var(--rui-box-plot-stroke, rgb(71 85 105 / 0.72));
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.railsui-chart .apexcharts-heatmap-rect {
  stroke: var(--rui-chart-surface, #ffffff);
  stroke-width: 2;
}

/* ------------------------------------------------------------- metric suite */

.railsui-metric-suite {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.railsui-metric-suite__grid {
  display: grid;
  grid-template-columns: repeat(var(--rui-metric-suite-columns, 3), minmax(0, 1fr));
  gap: 1rem;
}

.railsui-metric-suite__item {
  min-width: 0;
}

.railsui-metric-suite__item .railsui-metric-card {
  height: 100%;
}

.railsui-metric-suite__item .railsui-chart-export {
  display: flex;
  height: 100%;
  flex-direction: column;
}

.railsui-metric-suite__item .railsui-chart-export .railsui-metric-card {
  flex: 1 1 auto;
}

.railsui-metric-suite__context {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.railsui-metric-suite__panel {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--rui-chart-border, rgba(17, 24, 39, 0.14));
  border-radius: 0.5rem;
  background-color: var(--rui-chart-surface, #ffffff);
}

.railsui-metric-suite__panel-title {
  margin: 0 0 0.75rem;
  color: var(--rui-chart-metric-label, #111827);
  font-size: var(--rui-chart-text-size, 0.875rem);
  font-weight: 600;
  line-height: 1.25rem;
}

@media (max-width: 760px) {
  .railsui-metric-suite__grid,
  .railsui-metric-suite__context {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------------------------------------------------------- sparkline table */

.railsui-spark-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--rui-chart-text-size);
  color: var(--rui-chart-metric-value, #111827);
}

.railsui-spark-table__row + .railsui-spark-table__row th,
.railsui-spark-table__row + .railsui-spark-table__row td {
  border-top: 1px solid var(--rui-chart-border, rgba(17, 24, 39, 0.14));
}

.railsui-spark-table th,
.railsui-spark-table td {
  padding: 0.5rem 0;
  text-align: left;
  font-weight: 400;
  vertical-align: middle;
}

.railsui-spark-table__label {
  font-weight: 500;
  color: var(--rui-chart-metric-label, #111827);
}

/* The line column is the one that gives: the label and the numbers each need
   their own width, and the trend reads at any of them. */
.railsui-spark-table__spark {
  width: 40%;
  padding-left: 1rem;
  padding-right: 1rem;
}

.railsui-spark-table__line {
  display: block;
  width: 100%;
  height: 1.5rem;
  stroke: var(--rui-chart-primary, #6366f1);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.railsui-spark-table__line--empty {
  display: block;
  height: 1px;
  background-color: var(--rui-chart-grid, rgba(148, 163, 184, 0.22));
}

.railsui-spark-table__value,
.railsui-spark-table__delta {
  text-align: right;
  white-space: nowrap;
  /* Figures in a column have to line up on the decimal to be compared down the
     page, which is the only reason to put them in a table at all. */
  font-variant-numeric: tabular-nums;
}

.railsui-spark-table__value {
  font-weight: 600;
}

.railsui-spark-table__delta {
  padding-left: 0.75rem;
}

.railsui-spark-table__link {
  color: inherit;
  text-decoration: none;
}

.railsui-spark-table__link:hover {
  text-decoration: underline;
}

/* ----------------------------------------------------------------- tracker */

.railsui-tracker {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.railsui-tracker__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.railsui-tracker__label {
  font-size: var(--rui-chart-text-size);
  font-weight: 600;
  color: var(--rui-chart-metric-label, #111827);
}

.railsui-tracker__summary {
  font-size: var(--rui-chart-text-size-sm);
  /* An uptime figure that is watched over time should not jitter as its digits
     change width. */
  font-variant-numeric: tabular-nums;
  color: var(--rui-chart-metric-muted, #6b7280);
}

.railsui-tracker__track {
  display: flex;
  align-items: stretch;
  gap: 2px;
  height: var(--rui-tracker-height, 2rem);
}

/* Marks divide the width evenly and shrink together, so ninety fit a card the
   same way thirty do. `min-width: 0` is what allows it — without it each mark
   holds its own width and the row overflows the card instead of compressing. */
.railsui-tracker__mark {
  flex: 1 1 0;
  min-width: 0;
  border-radius: var(--rui-tracker-radius, 2px);
  background-color: var(--rui-tracker-none);
}

.railsui-tracker__mark--up {
  background-color: var(--rui-chart-positive, #047857);
}

.railsui-tracker__mark--degraded {
  background-color: var(--rui-tracker-degraded);
}

.railsui-tracker__mark--down {
  background-color: var(--rui-chart-negative, #b91c1c);
}

/* Finding which mark the tooltip belongs to is otherwise guesswork, since the
   pointer covers most of a mark this narrow. */
.railsui-tracker__mark:hover {
  outline: 1px solid var(--rui-chart-border, rgba(17, 24, 39, 0.14));
  outline-offset: 1px;
}

/* On a phone the gaps take more room than the marks do. */
@media (max-width: 480px) {
  .railsui-tracker__track {
    gap: 1px;
  }
}

/* ------------------------------------------------------------------ export */

.railsui-chart-export__toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 0.375rem;
  margin-bottom: 0.5rem;
}

.railsui-chart-export__button {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--rui-chart-border, rgba(17, 24, 39, 0.14));
  border-radius: 0.375rem;
  background-color: transparent;
  color: var(--rui-chart-text, #64748b);
  font-family: inherit;
  font-size: var(--rui-chart-text-size-sm);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: color 150ms ease, background-color 150ms ease;
}

.railsui-chart-export__button:hover {
  background-color: var(--rui-chart-hover, rgba(17, 24, 39, 0.06));
  color: var(--rui-chart-metric-value, #111827);
}

.railsui-chart-export__button:focus-visible {
  outline: 2px solid var(--rui-chart-primary, #6366f1);
  outline-offset: 2px;
}

.railsui-chart-export__icon {
  width: 0.875rem;
  height: 0.875rem;
}

@media (prefers-reduced-motion: reduce) {
  .railsui-chart-export__button {
    transition: none;
  }
}