/* ==========================================================================
   Vital-sign bands: green, amber, red.

   Loaded after vitals.css and vitals_detail.css so it can refine .vr-v-oor
   and the grid cells without either file being patched.

   COLOUR IS NOT THE ONLY SIGNAL
   About one man in twelve has some colour vision deficiency, and red/green is
   the common one. So each band also differs in weight, and critical carries a
   left rule. A nurse who cannot tell amber from red still has to be able to
   work this queue. Every chip's title attribute spells the band out in words
   as well.

   The tokens are the existing SmartCare ones. --go is the green already used
   for "eligible now", --warn the amber used for "due", --stop the red used
   for "denied". Nothing new is invented here.
   ========================================================================== */

/* ---- the queue's value chips ------------------------------------------- */

/* Normal is the quiet state and gets no decoration at all: a screen where
   every chip is coloured is a screen where no colour means anything. The
   green below is deliberately only a left rule, not a fill. */
.vr-v {
  border-left: 3px solid transparent;
  padding-left: 7px;
}
.vr-v:not(.vr-v-oor):not(.vr-v-stale) {
  border-left-color: var(--go);
}

.vr-v-warn {
  background: var(--warn-soft);
  border-left-color: var(--warn);
}
.vr-v-warn .vr-v-n { color: var(--warn); font-weight: 700; }

.vr-v-crit {
  background: var(--stop-soft);
  border-left-color: var(--stop);
  border-left-width: 4px;
}
.vr-v-crit .vr-v-n { color: var(--stop); font-weight: 800; }
.vr-v-crit .vr-v-k { color: var(--stop); }

/* A stale reading is greyed whatever its band: the value is the last one we
   have and the fact that it is old outranks what it said. */
.vr-v-stale, .vr-v-stale .vr-v-n, .vr-v-stale .vr-v-k {
  color: var(--muted) !important;
  background: transparent;
  border-left-color: var(--line) !important;
  font-weight: 500 !important;
}

/* ---- the monthly grid --------------------------------------------------- */

.vd-v-warn { color: var(--warn); font-weight: 700; }
.vd-v-crit { color: var(--stop); font-weight: 800; }

/* The row rule, so a critical instant is findable while scrolling a month of
   readings rather than only when its cell is on screen. */
.vd-table tr.vd-r-warn td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.vd-table tr.vd-r-crit td:first-child { box-shadow: inset 4px 0 0 var(--stop); }

/* ---- the legend --------------------------------------------------------- */

.bd-legend {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  font-size: 12.5px; color: var(--muted); margin: 0 0 12px;
}
.bd-key { display: inline-flex; align-items: center; gap: 6px; }
.bd-dot {
  width: 10px; height: 10px; border-radius: 2px; flex: 0 0 auto;
}
.bd-dot-normal { background: var(--go); }
.bd-dot-warning { background: var(--warn); }
.bd-dot-critical { background: var(--stop); }

/* The unreviewed notice. Loud enough to read, quiet enough not to look like a
   clinical alert: the thresholds are working, nobody has signed them. */
.bd-unreviewed {
  font-size: 12.5px; line-height: 1.5;
  background: var(--accent-soft); color: var(--ink-soft);
  border-radius: var(--radius-sm); padding: 9px 12px; margin: 0 0 12px;
}
.bd-unreviewed strong { color: var(--warn); }
