/**
 * @file
 * Component layer for the JI Bootstrap theme (UI/UX refresh, Phase 1 + 2).
 *
 * Restyles the Bootstrap/Views classes the markup already emits — no new
 * markup, no template changes. Every value here is a var(--ji-*) reference
 * into tokens.css.
 *
 * Cascade rule (has teeth): css/style.css (legacy, 39KB of domain-specific
 * rules) loads AFTER this file and wins any equal-or-lower-specificity
 * conflict purely by source order — and a table cell's own background
 * always paints over its <thead>'s background regardless of specificity.
 * A rule added here does NOTHING if style.css already styles the same
 * thing; superseding a legacy rule means DELETING it from style.css in the
 * same change (done for table-header/.btn-warning/.btn-info background
 * colours as part of this commit — see docs/decisions/ for the record).
 *
 * Phase 1 scope: global chrome (typography, tables, buttons, .label-*
 * restyle, alerts, navbar, panels, pagination, focus states) — restyles
 * classes the app's own code already assigns, no new meaning to any value.
 *
 * Phase 2 scope (bottom of this file): per-status-value colour chips
 * (.jc-status) for the 13 bare-text *_status fields where the colour
 * mapping was explicitly confirmed with the user field-by-field — this
 * DOES assign new meaning (a colour) to specific clinical/workflow
 * values, and was deliberately NOT done in Phase 1 pending that
 * confirmation. See docs/decisions/ and docs/SUBSYSTEMS.md.
 */

/* ============================================================
   Base
   ============================================================ */

body {
  background: var(--ji-n-25);
  color: var(--ji-n-700);
  font-family: var(--ji-font);
  font-size: var(--ji-fs-base);
  line-height: var(--ji-lh);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--ji-n-900);
  font-weight: 600;
  line-height: var(--ji-lh-tight);
}

a { color: var(--ji-p-600); }
a:hover,
a:focus { color: var(--ji-p-700); }

small, .small { font-size: var(--ji-fs-sm); }
.text-muted { color: var(--ji-n-500); }

hr { border-top-color: var(--ji-n-200); }

/* Generic numeric-alignment utility, plus the derived per-field column
   list (Phase 2). Derived by scanning every integer/decimal/float
   field.storage.node.*.yml (122 total) against `id: <field>` usage in
   every views.view.*.yml table-style field list (2026-08-18) — not
   hand-picked. Most of the 122 numeric fields are Centre-configuration
   settings (cost tables, expiry-day thresholds) that never appear as a
   table column and are correctly excluded; the ~35 below are the ones
   actually rendered in a Views table. No field id appears in both the
   MEASURES and IDENTIFIERS lists.

   MEASURES get tabular numerals AND right-alignment — magnitudes
   compared down a column (vitals, money, quantities, counts, estimates).
   IDENTIFIERS (receipt/issue/reference/blood-bag numbers, entity IDs)
   are stored as integers but read as labels — scanned for, not compared
   — so they keep tabular numerals for even digit width but stay
   left-aligned; right-aligning them would fight how they're used. */
.ji-num,
td.views-field-field-age,
th.views-field-field-age,
td.views-field-field-bic-discount-perc,
th.views-field-field-bic-discount-perc,
td.views-field-field-bic-tax-percentage,
th.views-field-field-bic-tax-percentage,
td.views-field-field-bp-diastolic,
th.views-field-field-bp-diastolic,
td.views-field-field-bp-systolic,
th.views-field-field-bp-systolic,
td.views-field-field-centre-component-volume,
th.views-field-field-centre-component-volume,
td.views-field-field-dc-invoice-advance-amount,
th.views-field-field-dc-invoice-advance-amount,
td.views-field-field-dc-invoice-discount-amount,
th.views-field-field-dc-invoice-discount-amount,
td.views-field-field-development-estimate,
th.views-field-field-development-estimate,
td.views-field-field-donor-hct,
th.views-field-field-donor-hct,
td.views-field-field-donor-height,
th.views-field-field-donor-height,
td.views-field-field-donor-platelet-count,
th.views-field-field-donor-platelet-count,
td.views-field-field-expense-amount,
th.views-field-field-expense-amount,
td.views-field-field-haemoglobin,
th.views-field-field-haemoglobin,
td.views-field-field-item-quantity,
th.views-field-field-item-quantity,
td.views-field-field-lj-charts-mean,
th.views-field-field-lj-charts-mean,
td.views-field-field-lj-charts-sd,
th.views-field-field-lj-charts-sd,
td.views-field-field-neutrophil-count,
th.views-field-field-neutrophil-count,
td.views-field-field-patient-bill-amount,
th.views-field-field-patient-bill-amount,
td.views-field-field-payments-fc-amount,
th.views-field-field-payments-fc-amount,
td.views-field-field-pulse,
th.views-field-field-pulse,
td.views-field-field-quantity,
th.views-field-field-quantity,
td.views-field-field-test-automation-estimate,
th.views-field-field-test-automation-estimate,
td.views-field-field-testing-estimate,
th.views-field-field-testing-estimate,
td.views-field-field-threshold,
th.views-field-field-threshold,
td.views-field-field-total-test-failed-count,
th.views-field-field-total-test-failed-count,
td.views-field-field-trform-number-of-units,
th.views-field-field-trform-number-of-units,
td.views-field-field-volume,
th.views-field-field-volume,
td.views-field-field-wbc-differential-count,
th.views-field-field-wbc-differential-count,
td.views-field-field-weight,
th.views-field-field-weight {
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

td.views-field-field-don-rec-bb-number,
th.views-field-field-don-rec-bb-number,
td.views-field-field-fr-receipt-number,
th.views-field-field-fr-receipt-number,
td.views-field-field-int-issue-no,
th.views-field-field-int-issue-no,
td.views-field-field-internal-reference-number,
th.views-field-field-internal-reference-number,
td.views-field-field-entity-id,
th.views-field-field-entity-id,
td.views-field-field-utilisation-number,
th.views-field-field-utilisation-number {
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Focus visibility (global) — a real gap in the current theme.
   ============================================================ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  box-shadow: var(--ji-focus-ring);
  outline: 2px solid var(--ji-p-600);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* ============================================================
   Data tables
   Supersedes 3 legacy colour-only rules deleted from style.css in this
   commit (table.table > thead background, .btn-warning, .btn-info) —
   folded into tokens so the visual identity (brand teal header) is kept,
   not reset to generic grey.
   ============================================================ */

.table {
  background: var(--ji-n-0);
  font-size: var(--ji-fs-base);
  margin-bottom: var(--ji-s-6);
}

.table > thead > tr > th {
  background: var(--ji-p-600);
  border-bottom: 2px solid var(--ji-p-700);
  color: var(--ji-n-0);
  font-size: var(--ji-fs-xs);
  font-weight: 600;
  letter-spacing: .04em;
  padding: var(--ji-s-3) var(--ji-s-5);
  text-align: center;
  text-transform: uppercase;
  vertical-align: middle;
}

.table > thead > tr > th a { color: var(--ji-n-0); }

.table > tbody > tr > td {
  border-top: 1px solid var(--ji-n-100);
  padding: var(--ji-s-3) var(--ji-s-5);
  vertical-align: middle;
}

.table-striped > tbody > tr:nth-of-type(odd) { background: var(--ji-p-50); }

.table-hover > tbody > tr:hover { background: var(--ji-n-50); }

.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td { border-color: var(--ji-n-200); }

.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > td { padding: var(--ji-s-2) var(--ji-s-4); }

/* ============================================================
   Status chips
   Restyles Bootstrap's .label-* classes in place. Every view that already
   emits them inherits this with no markup change. Colour SEMANTICS
   (which field value maps to which class) are unchanged — this only
   changes how an already-assigned class renders.

   Each chip carries colour AND its own text label, never colour alone.
   ============================================================ */

.label {
  background: var(--ji-none-bg);
  border-radius: var(--ji-r-pill);
  color: var(--ji-none);
  display: inline-block;
  font-size: var(--ji-fs-xs);
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.6;
  padding: var(--ji-s-1) var(--ji-s-4);
  text-shadow: none;
  white-space: nowrap;
}

.label-success { background: var(--ji-ok-bg);   color: var(--ji-ok); }
.label-warning { background: var(--ji-warn-bg); color: var(--ji-warn); }
.label-danger  { background: var(--ji-bad-bg);  color: var(--ji-bad); }
.label-default { background: var(--ji-none-bg); color: var(--ji-none); }
.label-info,
.label-primary { background: var(--ji-info-bg); color: var(--ji-info); }

/* ============================================================
   Alerts / Drupal messages
   ============================================================ */

.alert {
  border: 1px solid var(--ji-n-200);
  border-radius: var(--ji-r-md);
  box-shadow: var(--ji-sh-xs);
  font-size: var(--ji-fs-base);
  padding: var(--ji-s-5) var(--ji-s-6);
}

.alert-success { background: var(--ji-ok-bg);   border-left: 4px solid var(--ji-ok);   color: #14603F; }
.alert-info    { background: var(--ji-info-bg); border-left: 4px solid var(--ji-info); color: var(--ji-p-900); }
.alert-warning { background: var(--ji-warn-bg); border-left: 4px solid var(--ji-warn); color: #7A3A06; }
.alert-danger  { background: var(--ji-bad-bg);  border-left: 4px solid var(--ji-bad);  color: #8C1B12; }

/* ============================================================
   Buttons
   ============================================================ */

.btn {
  background-image: none;
  border: 1px solid transparent;
  border-radius: var(--ji-r-md);
  box-shadow: none;
  font-weight: 600;
  text-shadow: none;
  transition: background-color var(--ji-t), border-color var(--ji-t);
}

.btn-primary { background: var(--ji-p-600); border-color: var(--ji-p-600); color: var(--ji-n-0); }
.btn-primary:hover,
.btn-primary:focus { background: var(--ji-p-700); border-color: var(--ji-p-700); color: var(--ji-n-0); }

.btn-default { background: var(--ji-n-0); border-color: var(--ji-n-300); color: var(--ji-n-700); }
.btn-default:hover,
.btn-default:focus { background: var(--ji-n-50); border-color: var(--ji-n-400); color: var(--ji-n-900); }

.btn-info { background: var(--ji-p-700); border-color: var(--ji-p-700); color: var(--ji-n-0); }
.btn-info:hover,
.btn-info:focus { background: var(--ji-p-900); border-color: var(--ji-p-900); color: var(--ji-n-0); }

.btn-success { background: var(--ji-ok);   border-color: var(--ji-ok);   color: var(--ji-n-0); }
.btn-success:hover, .btn-success:focus { background: var(--ji-ok-700);   border-color: var(--ji-ok-700);   color: var(--ji-n-0); }
.btn-warning { background: var(--ji-warn); border-color: var(--ji-warn); color: var(--ji-n-0); }
.btn-warning:hover, .btn-warning:focus { background: var(--ji-warn-700); border-color: var(--ji-warn-700); color: var(--ji-n-0); }
.btn-danger  { background: var(--ji-bad);  border-color: var(--ji-bad);  color: var(--ji-n-0); }
.btn-danger:hover,  .btn-danger:focus  { background: var(--ji-bad-700);  border-color: var(--ji-bad-700);  color: var(--ji-n-0); }

.btn-link { color: var(--ji-p-600); font-weight: 600; }

.btn:focus,
.btn:focus-visible,
.btn.focus {
  box-shadow: var(--ji-focus-ring);
  outline: 2px solid var(--ji-p-600);
  outline-offset: 2px;
}

/* ============================================================
   Forms — focus ring only. The legacy `form .form-control` rule
   (style.css) already controls sizing at higher specificity; this file
   does not fight that in Phase 1. Focus visibility has no legacy
   competition and is a real accessibility gap on this theme.
   ============================================================ */

.form-control:focus {
  border-color: var(--ji-p-600);
  box-shadow: var(--ji-focus-ring);
  outline: 2px solid var(--ji-p-600);
  outline-offset: 2px;
}

.has-error .form-control { border-color: var(--ji-bad); }
.has-error .control-label,
.has-error .help-block { color: var(--ji-bad); }

.form-required::after { color: var(--ji-bad); }

/* ============================================================
   Cards / panels (generic only — .views-exposed-form panels already
   have dense legacy overrides and are out of scope for this phase)
   ============================================================ */

.panel {
  background: var(--ji-n-0);
  border: 1px solid var(--ji-n-200);
  border-radius: var(--ji-r-md);
  box-shadow: var(--ji-sh-xs);
}

.panel-default > .panel-heading {
  background: var(--ji-n-50);
  border-bottom: 1px solid var(--ji-n-200);
  border-radius: var(--ji-r-md) var(--ji-r-md) 0 0;
  color: var(--ji-n-900);
  font-weight: 600;
}

.panel-title { font-size: var(--ji-fs-md); font-weight: 600; }

.well {
  background: var(--ji-n-50);
  border: 1px solid var(--ji-n-200);
  border-radius: var(--ji-r-md);
  box-shadow: none;
}

/* ============================================================
   Pagination
   ============================================================ */

.pagination > li > a,
.pagination > li > span {
  color: var(--ji-p-600);
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
  background-color: var(--ji-p-600);
  border-color: var(--ji-p-600);
}

/* ============================================================
   Navbar — the LIVE markup is `.navbar-default` (confirmed via rendered
   DOM: #navbar carries "navbar navbar-default container", computed
   background rgb(248,248,248)). The theme's own `.navbar-inverse` rules
   in style.css target a class that is never actually in the DOM on this
   site — dead CSS, same class of bug as the typo'd `--background`
   custom properties above. Restyling the real thing: white chrome with
   a hairline, brand-teal active/hover state.
   ============================================================ */

#navbar.navbar-default {
  background-color: var(--ji-n-0);
  border: 0;
  border-bottom: 1px solid var(--ji-n-200);
  box-shadow: var(--ji-sh-xs);
}

.navbar-default .navbar-nav > li > a {
  color: var(--ji-n-600);
  font-weight: 600;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  background-color: var(--ji-p-50);
  color: var(--ji-p-700);
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  background-color: var(--ji-p-50);
  box-shadow: inset 0 -2px 0 var(--ji-p-600);
  color: var(--ji-p-700);
}

/* ============================================================
   Status chips for bare-text Views status fields (Phase 2)
   Views' list field plugin renders these with no wrapper markup at all
   (<td class="views-field views-field-*">plain text</td>) — confirmed on
   the rendered DOM, same pattern as the labs/bmt-sankalp sibling apps.
   The templates/views/views-view-field--<field>.html.twig overrides wrap
   the value in .jc-status with a jc-status--<field> modifier class, so
   colour is scoped per-field: the same word in two different status
   fields' vocabularies is never accidentally coloured the same way.

   Colour mapping was decided per-field with the user (2026-08-18), not
   inferred from value labels — see docs/decisions/ and
   docs/SUBSYSTEMS.md "Frontend / theme". Fields deliberately left
   UNCOLOURED (chips still render neutral via the base .jc-status rule,
   just carry no semantic colour): field_note_status (confirmed shared
   across unrelated bundles — dev-workflow and clinical vocabularies mixed
   in one field, ambiguous without per-bundle disambiguation) and
   field_component_volume_status (High/Low is a measurement flag, not a
   good/bad judgment). The raw serology reaction-grade fields
   (field_anti_*_status, field_cell_*_status, field_rh_ctrl_status) are
   plain `string` fields, not `list_string` — they hold hemagglutination
   grades (e.g. "2", "3", "4"), not status values, and were never in scope
   for this chip treatment.
   ============================================================ */

.jc-status {
  background: var(--ji-none-bg);
  border-radius: var(--ji-r-pill);
  border: 1px solid var(--ji-none-bg);
  color: var(--ji-none);
  display: inline-block;
  font-size: var(--ji-fs-xs);
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.6;
  padding: var(--ji-s-1) var(--ji-s-4);
  white-space: nowrap;
}

/* Positive / cleared / satisfied. */
.jc-status--field-quality-control-status[data-status="Pass"],
.jc-status--field-eligibility-status[data-status="Eligible"],
.jc-status--field-sterility-status[data-status="Negative"],
.jc-status--field-deferral-status[data-status="Fit"],
.jc-status--field-document-report-status[data-status="Completed"],
.jc-status--field-organisation-status[data-status="Active"],
.jc-status--field-followup-status[data-status="closed"],
.jc-status--field-support-ticket-status[data-status="Completed"],
.jc-status--field-request-status[data-status="Need Satisfied"],
.jc-status--field-donor-blood-coll-status[data-status="Yes"],
.jc-status--field-donor-med-exam-status[data-status="Yes"] {
  background: var(--ji-ok-bg);
  border-color: var(--ji-ok-bg);
  color: var(--ji-ok);
}

/* Needs attention but not yet a critical problem. */
.jc-status--field-deferral-status[data-status="Temporarily Deferred"],
.jc-status--field-followup-status[data-status="needed"],
.jc-status--field-support-ticket-status[data-status="On hold"],
.jc-status--field-request-status[data-status="Partial Need Satisfied"],
.jc-status--field-donor-blood-coll-status[data-status="No"],
.jc-status--field-donor-med-exam-status[data-status="No"] {
  background: var(--ji-warn-bg);
  border-color: var(--ji-warn-bg);
  color: var(--ji-warn);
}

/* Informational / in-progress — neither good nor bad, just a live stage. */
.jc-status--field-deferral-status[data-status="DHQ Review"],
.jc-status--field-document-report-status[data-status="Ongoing"],
.jc-status--field-organisation-status[data-status="New"],
.jc-status--field-support-ticket-status[data-status="In Progress"] {
  background: var(--ji-info-bg);
  border-color: var(--ji-info-bg);
  color: var(--ji-info);
}

/* Negative / rejected / dropped. */
.jc-status--field-quality-control-status[data-status="Fail"],
.jc-status--field-eligibility-status[data-status="Ineligible"],
.jc-status--field-request-status[data-status="Dropped"],
.jc-status--field-component-status[data-status="Discard"] {
  background: var(--ji-bad-bg);
  border-color: var(--ji-bad-bg);
  color: var(--ji-bad);
}

/* Critical — outranks a plain "bad": a serious clinical-safety signal, not
   just a routine rejection. Stronger border, not just a redder fill, per
   the "overdue/failed must look distinct" principle from the design spec
   this refresh is modelled on. */
.jc-status--field-sterility-status[data-status="Positive"],
.jc-status--field-mismatch-status[data-status="Mismatch"] {
  background: var(--ji-bad-bg);
  border-color: var(--ji-bad-700);
  border-width: 2px;
  color: var(--ji-bad-700);
}

.jc-status--field-mismatch-status[data-status="Partial"] {
  background: var(--ji-warn-bg);
  border-color: var(--ji-warn-bg);
  color: var(--ji-warn);
}

/* field_note_status — the ji_mcp internal ticket-triage sub-status field
   (support_ticket bundle only), not clinical. Added after confirming it
   is a single-bundle field, correcting an earlier assumption — see the
   Twig template's header comment and docs/decisions/. */
.jc-status--field-note-status[data-status="Completed"],
.jc-status--field-note-status[data-status="Documentation"] {
  background: var(--ji-ok-bg);
  border-color: var(--ji-ok-bg);
  color: var(--ji-ok);
}

.jc-status--field-note-status[data-status="Just Reported"],
.jc-status--field-note-status[data-status="Query"],
.jc-status--field-note-status[data-status="Queued for Implementation"],
.jc-status--field-note-status[data-status="Under Development"],
.jc-status--field-note-status[data-status="Code Review"] {
  background: var(--ji-info-bg);
  border-color: var(--ji-info-bg);
  color: var(--ji-info);
}

.jc-status--field-note-status[data-status="On Hold"] {
  background: var(--ji-warn-bg);
  border-color: var(--ji-warn-bg);
  color: var(--ji-warn);
}

.jc-status--field-note-status[data-status="Test Failed"] {
  background: var(--ji-bad-bg);
  border-color: var(--ji-bad-bg);
  color: var(--ji-bad);
}