/* ------------------------------------------------------------------ *
 *  LAMMPS test status site -- custom styles layered on top of
 *  Bootstrap 5, following the design of the LAMMPS website
 *  (static/css/newsite.css there).  Keep this small; prefer
 *  Bootstrap utility classes in the generator markup.
 * ------------------------------------------------------------------ */

/* ---- Brand palette (from the LAMMPS website) ---------------------- */
:root {
  --lammps-blue: #1f6db5;
  --lammps-blue-rgb: 31, 109, 181;
  --lammps-gold: #f4b41a;
  --lammps-gold-rgb: 244, 180, 26;

  --lammps-accent: var(--lammps-blue);
  --lammps-accent-rgb: var(--lammps-blue-rgb);

  --bs-link-color: var(--lammps-accent);
  --bs-link-color-rgb: var(--lammps-accent-rgb);
  --bs-link-hover-color: #17527f;
  --bs-link-hover-color-rgb: 23, 82, 127;

  /* status colors for test outcomes (not brand colors): one color per
     outcome, used by the chips, the tile numbers and the segments of the
     composition bar alike, so that the tiles read as the legend of the bar.
     desaturated variants of the obvious hues (firebrick, forestgreen), which
     also keeps them apart by hue rather than by shade alone */
  --status-passed: #228b22;
  --status-failed: #b22222;
  --status-error: #a67c00;
  --status-timeout: #3b6fa8;
  /* a run that completed but could not be checked: a teal between the green
     of a pass and the blue of a timeout, and as far from the grey of a skip
     as the two are - it did run */
  --status-runtest: #1f8a7a;
  --status-skipped: #6c757d;

  /* one color per category of the performance benchmarks, in the order
     they are stacked: the first six slots of a categorical palette whose
     order is chosen so that neighbors stay apart for color-blind readers
     too.  they identify a category, not an outcome, and none of them is
     shown next to the outcome colors */
  --cat-gpu: #2a78d6;
  --cat-kokkos-cuda: #eb6834;
  --cat-kokkos-omp: #1baf7a;
  --cat-cpu-mpi: #eda100;
  --cat-cpu-only: #e87ba4;
  --cat-intel: #008300;
}
[data-bs-theme="dark"] {
  --lammps-accent: #6ea8de;
  --lammps-accent-rgb: 110, 168, 222;
  --bs-link-hover-color: #9cc4ea;
  --bs-link-hover-color-rgb: 156, 196, 234;

  /* the same hues lightened: the dark variants do not carry enough contrast
     against the dark surface to be read as small text */
  --status-passed: #4caf50;
  --status-failed: #e06c6c;
  --status-error: #d9a92e;
  --status-timeout: #6fa8dc;
  --status-runtest: #4fbfae;
  --status-skipped: #9a9a9a;

  --cat-gpu: #3987e5;
  --cat-kokkos-cuda: #d95926;
  --cat-kokkos-omp: #199e70;
  --cat-cpu-mpi: #c98500;
  --cat-cpu-only: #d55181;
  --cat-intel: #008300;
}

/* Rebrand Bootstrap's primary buttons to the LAMMPS blue. */
.btn-primary, .btn-outline-primary {
  --bs-btn-color: var(--lammps-accent);
  --bs-btn-border-color: var(--lammps-blue);
  --bs-btn-hover-bg: #1a5c9a;
  --bs-btn-hover-border-color: #185490;
  --bs-btn-active-bg: var(--lammps-blue);
  --bs-btn-active-border-color: #154b80;
}
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--lammps-blue);
  --bs-btn-hover-color: #fff;
}
.btn-outline-primary {
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
}

/* Thin gold brand accent under the (always-dark) navbar. */
.navbar { border-bottom: 3px solid var(--lammps-gold); }

/* Light/dark toggle button: styled to match the navbar links. */
.theme-toggle {
  color: rgba(255, 255, 255, .7);
  background: none;
  border: 0;
  padding: .25rem .5rem;
  line-height: 1;
  font-size: 1.15rem;
}
.theme-toggle:hover, .theme-toggle:focus-visible { color: #fff; }

/* ---- Status site components --------------------------------------- */

/* stat tiles inside the suite cards */
.tile .num { font-size: 1.5rem; font-weight: 600; line-height: 1.2; }
/* secondary line under a tile number, a table cell, or a status chip */
.lbl { color: var(--bs-secondary-color); font-size: .78rem; }

/* test outcome chips: colored icon + regular-ink label */
.status { white-space: nowrap; }
.status .ico { font-weight: 700; }
.st-passed  .ico { color: var(--status-passed); }
.st-failed  .ico { color: var(--status-failed); }
.st-error   .ico { color: var(--status-error); }
.st-timeout .ico { color: var(--status-timeout); }
.st-runtest .ico { color: var(--status-runtest); }
.st-skipped .ico { color: var(--status-skipped); }
.st-pending .ico { color: var(--lammps-accent); }
.st-stale   .ico { color: var(--status-error); }
.st-unknown .ico { color: var(--status-skipped); }

/* the tile numbers carry the outcome color as well: they are what tells
   the reader which segment of the bar below them is which */
.tile.st-passed  .num { color: var(--status-passed); }
.tile.st-failed  .num { color: var(--status-failed); }
.tile.st-error   .num { color: var(--status-error); }
.tile.st-timeout .num { color: var(--status-timeout); }
.tile.st-runtest .num { color: var(--status-runtest); }
.tile.st-skipped .num { color: var(--status-skipped); }

.delta-bad  { color: var(--status-failed); font-weight: 600; }
.delta-good { color: var(--status-passed); font-weight: 600; }
/* nothing changed on that side: stated, but not shouted */
.delta-zero { color: var(--bs-secondary-color); }

/* commit/run info left over from an earlier night because the cron job
   that shares one checkout broke off partway (stale_chain_parts in the
   generator); the tooltip on the element says so */
.stale { color: var(--status-failed); }

/* grouped listings of tests on a run page */
ul.listing { padding-left: 1.2rem; }
ul.listing li { margin-bottom: .25rem; }
/* what a test says about its own input script rather than about the code;
   set apart from the message without borrowing an outcome color */
.attn { color: var(--bs-secondary-color); font-size: .78rem; font-style: italic; }

/* outcome trend in the suite cards: one stacked bar per archived run, the
   whole bar the number of tests of that run.  the colors are the ones the
   tiles above carry, which is what makes the tiles the legend of the chart */
.trend rect.st-passed  { fill: var(--status-passed); }
.trend rect.st-failed  { fill: var(--status-failed); }
.trend rect.st-error   { fill: var(--status-error); }
.trend rect.st-timeout { fill: var(--status-timeout); }
.trend rect.st-runtest { fill: var(--status-runtest); }
.trend rect.st-skipped { fill: var(--status-skipped); }
.trend line { stroke: var(--bs-border-color); stroke-width: 1; }
/* the dates the trends page writes along the bottom of its charts */
.trend text { fill: var(--bs-secondary-color); font-size: .7rem; }

/* numeric table columns */
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }

/* per-test details column */
td .msg { color: var(--bs-secondary-color); font-size: .85rem; }
tr.hidden { display: none; }

/* documentation build table: tight rows, no cell padding at the card edge */
.docs td { padding: .3rem 0; vertical-align: top; }
.docs code { font-size: .78rem; }

/* spellchecker findings: the quoted context is what the flagged word sits
   in, so it is set back and the word itself is what carries the emphasis */
.spell td.ctx { font-size: .85rem; color: var(--bs-secondary-color); }
.spell td.src { white-space: nowrap; }
.spell code { font-size: .8rem; }

/* repository activity bar chart */
.actbar rect { fill: var(--lammps-accent); }
.actbar line { stroke: var(--bs-border-color); stroke-width: 1; }

/* core developer activity: one small line chart per member and metric.  each
   chart is scaled to its own peak, so the shapes may be compared but the
   heights may not - the printed sum and peak are what carry the magnitude */
.teamgrid {
  display: grid; gap: .9rem 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
}
.spark { display: block; max-width: 100%; }
.spark .ln {
  fill: none; stroke: var(--lammps-accent); stroke-width: 1.5;
  stroke-linejoin: round; stroke-linecap: round;
}
.spark .base { stroke: var(--bs-border-color); stroke-width: 1; }
.spark circle { fill: var(--lammps-accent); }
/* the invisible hover target around each point.  "transparent" rather than
   "none" is what makes it catch the pointer at all, and pointer-events says
   so outright rather than relying on that */
.spark circle.hit { fill: transparent; stroke: none; pointer-events: all; }
/* the month still running is drawn hollow: its value is not comparable to
   the completed ones next to it */
.spark circle.open {
  fill: var(--bs-body-bg); stroke: var(--lammps-accent); stroke-width: 1.2;
}
.team-head img { border-radius: 50%; }
/* the two summed rows are set apart from the members they sum */
.team tfoot td { border-top: 2px solid var(--bs-border-color); font-weight: 600; }
.team tfoot tr + tr td { border-top-width: 1px; font-weight: 400; }

/* performance benchmarks: the stacked bars of all categories and below them
   one strip per category, in a grid that puts the names on the left, the
   latest percentage on the right, and the charts of both on the same
   columns in between.  small print, so that the card is no taller than the
   others in its row */
.perf {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 2px .5rem; align-items: center; margin-top: .5rem;
}
.perf .lbl { font-size: .7rem; line-height: 1.1; white-space: nowrap; }
.perf svg { display: block; }
.perf line, .perf-strip line { stroke: var(--bs-border-color); stroke-width: 1; }
/* a deviation beyond the scale of a strip is capped at its edge */
.perf rect.cap { fill: var(--bs-body-color); }
.sw {
  display: inline-block; width: .6rem; height: .6rem; border-radius: 2px;
  margin-right: .3rem; vertical-align: -1px;
}
.cat-gpu         { fill: var(--cat-gpu);         background-color: var(--cat-gpu); }
.cat-kokkos-cuda { fill: var(--cat-kokkos-cuda); background-color: var(--cat-kokkos-cuda); }
.cat-kokkos-omp  { fill: var(--cat-kokkos-omp);  background-color: var(--cat-kokkos-omp); }
.cat-cpu-mpi     { fill: var(--cat-cpu-mpi);     background-color: var(--cat-cpu-mpi); }
.cat-cpu-only    { fill: var(--cat-cpu-only);    background-color: var(--cat-cpu-only); }
.cat-intel       { fill: var(--cat-intel);       background-color: var(--cat-intel); }
/* a night that kept the results of an earlier run, because the machine had
   nothing new to run */
rect.old { opacity: .4; }
.perf-table td { padding-top: .1rem; padding-bottom: .1rem; }
.perf .n { text-align: right; font-variant-numeric: tabular-nums; }