/* ==========================================================================
   RPM vitals review — existing SmartCare tokens only, no new palette.

   Two things this page has to do that the billing worklist does not:

   1. Put five or six numbers in one cell and keep them scannable down the
      column. Hence tabular-nums on every value and a fixed label width, so
      the digits line up even though the labels differ in length.

   2. Say "this value is outside the range" and "this value is old" at the
      same time without using colour alone. An out-of-range value gets weight
      and a left rule as well as colour; a stale one is lightened AND has its
      label struck through. A nurse with any degree of colour blindness still
      reads both, and the title attribute spells it out on hover.

   styles.css sets width:100% on every input, so the selects here get an
   explicit width back -- same note as billing.css.
   ========================================================================== */

/* ---- topbar controls --------------------------------------------------- */
.vr-ctl { display: inline-flex; align-items: center; gap: 8px; font-size: 13px;
          color: var(--muted); white-space: nowrap; margin-right: 10px; }
.vr-ctl select { width: auto; min-width: 120px; font: inherit; }

/* ---- summary strip ----------------------------------------------------- */
.vr-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
            gap: 12px; margin-bottom: 14px; }
.vr-stat { background: var(--surface); border: 1px solid var(--line);
           border-radius: var(--radius-sm); padding: 13px 15px;
           display: flex; flex-direction: column; gap: 2px; }
.vr-stat-n { font-size: 26px; font-weight: 700; line-height: 1.1;
             font-variant-numeric: tabular-nums; }
.vr-stat-l { font-size: 12.5px; color: var(--muted); text-transform: uppercase;
             letter-spacing: .04em; }

/* ---- filter chips ------------------------------------------------------ */
.vr-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.vr-chip { font: inherit; font-size: 13px; cursor: pointer;
           background: var(--card); color: var(--ink-soft);
           border: 1px solid var(--line); border-radius: 999px;
           padding: 6px 13px; width: auto; }
.vr-chip:hover { background: var(--line-soft); }
.vr-chip.on { background: var(--accent); border-color: var(--accent);
              color: #fff; font-weight: 600; }
.vr-chip-n { font-variant-numeric: tabular-nums; opacity: .8;
             margin-left: 2px; }
.vr-chip.on .vr-chip-n { opacity: .95; }

/* ---- poller banner ------------------------------------------------------
   Deliberately the loudest thing on the page. Every other warning here is
   about one patient; this one means the device column is wrong for all of
   them, in the same direction. */
.vr-poller { background: var(--stop-soft); border: 1px solid var(--stop);
             border-left-width: 4px; border-radius: var(--radius-sm);
             padding: 12px 15px; margin-bottom: 14px;
             font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.vr-poller strong { color: var(--stop); }
.vr-poller-err { margin-top: 6px; font-family: ui-monospace, Consolas, monospace;
                 font-size: 12px; color: var(--ink-soft);
                 background: var(--card); border: 1px solid var(--line);
                 border-radius: 4px; padding: 6px 8px;
                 overflow-x: auto; white-space: pre-wrap; }

/* ---- notices ----------------------------------------------------------- */
.vr-notes { background: var(--warn-soft); border: 1px solid var(--line);
            border-left: 3px solid var(--warn); border-radius: var(--radius-sm);
            padding: 10px 14px; margin-bottom: 14px; }
.vr-notes p { margin: 4px 0; font-size: 13.5px; line-height: 1.5;
              color: var(--ink-soft); }
.vr-notes code { background: var(--card); border: 1px solid var(--line);
                 border-radius: 4px; padding: 1px 5px; font-size: 12.5px; }

/* ---- table ------------------------------------------------------------- */
.vr-table td, .vr-table th { vertical-align: top; }

/* Triage shows as a rule on the row, matching the bw-table convention. The
   rank the server computed decides the order; this only names it. */
.vr-table tr.vr-tr-critical td:first-child { box-shadow: inset 3px 0 0 var(--brand-red); }
.vr-table tr.vr-tr-warning  td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.vr-table tr.vr-tr-watch    td:first-child { box-shadow: inset 3px 0 0 var(--accent-soft); }
.vr-table tr.vr-tr-ok       td:first-child { box-shadow: inset 3px 0 0 var(--go); }

/* A name that wraps mid-column costs a line on every row and makes the table
   twice as tall as it needs to be. The column gets enough room for a long
   one instead, and a genuinely huge name ellipsises rather than wrapping. */
.vr-table th:first-child, .vr-table td:first-child { min-width: 165px; }
.vr-name { font: inherit; font-weight: 650; color: var(--ink);
           background: none; border: 0; padding: 0; width: auto;
           cursor: pointer; text-align: left;
           white-space: nowrap; max-width: 220px;
           overflow: hidden; text-overflow: ellipsis; }
.vr-name:hover { color: var(--accent); text-decoration: underline; }

/* "Device-days" otherwise breaks across two lines in the header. */
.vr-table th:nth-child(5) { white-space: nowrap; }
.vr-days-line { white-space: nowrap; }

.vr-action { font-size: 13.5px; line-height: 1.5; color: var(--ink-soft);
             min-width: 210px; max-width: 420px; }

/* ---- vital chips ------------------------------------------------------- */
.vr-vitals { min-width: 190px; }
.vr-v { display: inline-flex; align-items: baseline; gap: 5px;
        margin: 0 7px 4px 0; padding: 2px 8px 2px 7px;
        border-radius: var(--radius-sm); background: var(--surface);
        border: 1px solid var(--line-soft); white-space: nowrap; }
.vr-v-k { font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
          color: var(--muted); }
.vr-v-n { font-size: 14.5px; font-weight: 650;
          font-variant-numeric: tabular-nums; }

/* Out of range: colour, weight AND a rule, so it does not depend on colour
   vision. The value is the thing that has to be noticed. */
.vr-v-oor { background: var(--stop-soft); border-color: var(--stop);
            border-left-width: 3px; }
.vr-v-oor .vr-v-n { color: var(--stop); font-weight: 750; }
.vr-v-oor .vr-v-k { color: var(--stop); }

/* Stale: the newest value we hold, but older than the review window. Shown,
   not hidden -- a nurse needs to know the last BP was 162/98 and that it was
   eleven days ago. The strike-through on the label carries that without
   relying on the lighter colour. */
.vr-v-stale { opacity: .62; }
.vr-v-stale .vr-v-k { text-decoration: line-through; }

.vr-manual { font-size: 11px; color: var(--muted); }
.vr-none { color: var(--muted); font-size: 13px; }

.vr-wt { font-size: 12.5px; line-height: 1.45; margin-top: 3px;
         max-width: 260px; }

/* ---- alerts ------------------------------------------------------------ */
.vr-al { display: inline-block; font-size: 12px; font-weight: 650;
         padding: 2px 7px; border-radius: 999px; white-space: nowrap;
         margin: 0 4px 3px 0; }
.vr-al-crit { background: var(--stop-soft); color: var(--stop); }
.vr-al-warn { background: var(--warn-soft); color: var(--warn); }
.vr-al-info { background: var(--accent-soft); color: var(--ink-soft); }
/* NOT clamped. This was -webkit-line-clamp: 2, which cut
   "Device reported an irregular heartbeat with the blood_pressure reading
   taken ..." off mid-sentence -- and the clinically interesting half is the
   end. An alert nobody can read is an alert nobody acts on, and the column
   can afford the lines. */
.vr-al-msg { font-size: 12.5px; color: var(--ink-soft); line-height: 1.45;
             margin-top: 4px; max-width: 250px; }

/* ---- device / tier ----------------------------------------------------- */
.vr-owner { display: inline-block; font-size: 11px; text-transform: uppercase;
            letter-spacing: .04em; color: var(--muted); margin-top: 3px;
            border: 1px solid var(--line); border-radius: 999px;
            padding: 1px 7px; }
.vr-days { font-size: 18px; font-weight: 700;
           font-variant-numeric: tabular-nums; }
.vr-tier-note { font-size: 12.5px; line-height: 1.4; max-width: 170px; }

/* ---- shared verdict colours -------------------------------------------- */
.vr-ok   { color: var(--go); font-weight: 600; }
.vr-warn { color: var(--warn); font-weight: 600; }
.vr-bad  { color: var(--brand-red); font-weight: 600; }

/* ---- footer ------------------------------------------------------------ */
.vr-foot { font-size: 12.5px; color: var(--muted); line-height: 1.6;
           margin-top: 14px; }

/* ---- modal ------------------------------------------------------------- */
.vr-h { font-size: 13px; font-weight: 650; text-transform: uppercase;
        letter-spacing: .04em; color: var(--muted); margin: 18px 0 8px; }
.vr-headline { background: var(--surface); border-left: 3px solid var(--accent-soft);
               padding: 10px 13px; border-radius: var(--radius-sm);
               margin: 0 0 14px; font-size: 14.5px; line-height: 1.5; }
.vr-mini { font-size: 13.5px; }
.vr-mini thead th { padding: 6px 10px; }
.vr-mini tbody td { padding: 7px 10px; }
.vr-mini tbody td:nth-child(2) { font-variant-numeric: tabular-nums; }
/* "bp cuff" and "weight scale" are two words and should stay on one line, and
   a model plus its IMEI tail ("LS802-GA ...1005") must not break mid-token. */
.vr-mini tbody td:first-child,
.vr-mini tbody td:nth-child(2) { white-space: nowrap; }

/* ---- narrow screens ---------------------------------------------------- */
@media (max-width: 1100px) {
  .vr-table thead th:nth-child(3),
  .vr-table tbody td:nth-child(3) { display: none; }   /* alerts fold into the row action */
  .vr-action { min-width: 160px; }
}