/* ===========================================================================
   labs.css — the laboratory screens.

   A separate file rather than more of neoboard.css, because the laboratory is
   the one part of this app where a value's colour carries a decision. Keeping
   it here makes that colour easy to find and change when the unit's own
   reference ranges replace the provisional ones.

   Every colour comes from the existing tokens. Nothing new is invented: a
   second palette would eventually disagree with the first, and the two badges
   a doctor reads side by side would mean different things.
   =========================================================================== */

/* ---- reference range under a field, tinted by where the value sits ---- */
.lab-hint { font-variant-numeric: tabular-nums; transition: color .12s ease; }
.lab-hint.is-idle     { color: var(--muted); }
.lab-hint.is-good     { color: var(--good-ink); }
.lab-hint.is-warning  { color: var(--warning-ink); }
.lab-hint.is-serious  { color: var(--serious-ink); }
.lab-hint.is-critical { color: var(--critical-ink); }

/* ---- values the app computed rather than asked for ---- */
.lab-derived {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 10px 0 2px; min-height: 0;
}

/* ---- the sepsis screen, live while typing and again on the ward round ---- */
.lab-screen { padding-top: 4px; }
.lab-screen__head { margin-bottom: 8px; }
.lab-screen__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 4px;
}
.lab-screen__item {
  font-size: 12.5px; line-height: 1.45; padding-left: 18px; position: relative;
  color: var(--muted);
}
/* A marker per state, so the list is readable without colour - the one place
   in this app where a reader may be scanning under bad ward lighting. */
.lab-screen__item::before {
  position: absolute; left: 0; top: 0; font-weight: 700;
}
.lab-screen__item.is-positive   { color: var(--critical-ink); }
.lab-screen__item.is-positive::before   { content: "+"; }
.lab-screen__item.is-negative   { color: var(--good-ink); }
.lab-screen__item.is-negative::before   { content: "\2212"; }
.lab-screen__item.is-unmeasured { color: var(--muted); }
.lab-screen__item.is-unmeasured::before { content: "\00B7"; }

/* ---- the verdict card a round reads first ---- */
.lab-verdict { border-left: 3px solid var(--line); }
.lab-verdict.is-good     { border-left-color: var(--good); }
.lab-verdict.is-warning  { border-left-color: var(--warning); }
.lab-verdict.is-serious  { border-left-color: var(--serious); }
.lab-verdict.is-critical { border-left-color: var(--critical); }
.lab-verdict__line {
  font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  margin: 4px 0 12px;
}
.lab-verdict.is-critical .lab-verdict__line { color: var(--critical-ink); }

/* ---- culture and sensitivities ---- */
.lab-culture { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.lab-sens__summary { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.lab-sens__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 8px 16px; margin-top: 8px;
}
.lab-sens__row {
  display: grid; grid-template-columns: 1fr 120px; gap: 10px; align-items: center;
}
.lab-sens__drug { font-size: 12.5px; color: var(--ink); }

/* ---- one filed report ---- */
.lab-reports { display: grid; gap: 14px; }
.lab-report .table { min-width: 480px; }
.lab-table td.num, .lab-table th.num {
  text-align: right; font-family: var(--font-data); font-variant-numeric: tabular-nums;
}
/* Tint the row, not just a badge: a doctor scanning twelve rows for the two
   that matter should not have to read the right-hand column to find them. */
.lab-table tr.is-warning  td { background: var(--warning-soft); }
.lab-table tr.is-serious  td { background: var(--serious-soft); }
.lab-table tr.is-critical td { background: var(--critical-soft); }

@media (max-width: 560px) {
  .lab-sens__row { grid-template-columns: 1fr 100px; }
}

/* ---- the soft copy ---- */
.labpaste__filenote { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 0 6px; }
.lab-attach {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 12px; padding: 10px 12px;
  border: 1px dashed var(--rule-sq, var(--line)); border-radius: 6px;
}
.lab-attach__name { font-size: 12.5px; color: var(--muted); word-break: break-all; }
@media (max-width: 480px) { .lab-attach { flex-direction: column; align-items: flex-start; } }