/* ==========================================================================
   St. Aloyce HMIS — interface styles
   --------------------------------------------------------------------------
   Written for a hospital floor: long lists scanned quickly, often on a tablet.
   So the priorities are legibility at a glance, status you can read without
   reading words, and touch targets big enough to hit while standing up.
   ========================================================================== */

:root {
  /* Brand */
  --blue:        #007DCC;
  --blue-dark:   #0063a3;
  --blue-wash:   #eaf4fc;
  --blue-line:   #b9dcf3;

  /* Ink */
  --ink:         #0f1923;
  --ink-2:       #2d3a46;
  --ink-3:       #5a6a7a;
  --ink-4:       #8494a4;
  --ink-faint:   #c3ced9;

  /* Surface */
  --bg:          #eef1f6;
  --surface:     #ffffff; /*FFF8F8*/
  --surface-2:   #f8fafc;
  --line:        #dde3ea;
  --line-soft:   #eef1f6;

  /* Clinical status — consistent everywhere so colour alone carries meaning */
  --ok:          #0f766e;   --ok-bg:   #e6f4f1;  --ok-line:   #99d5cd;
  --wait:        #92400e;   --wait-bg: #fef3c7;  --wait-line: #f3c98b;
  --urgent:      #9b2424;   --urgent-bg:#fdecea; --urgent-line:#f5c6c2;
  --idle:        #5a6a7a;   --idle-bg: #f1f5f9;  --idle-line: #dde3ea;

  --radius:      10px;
  --radius-sm:   6px;
  --shadow:      0 1px 2px rgba(15,25,35,.04);
  --shadow-pop:  0 18px 45px rgba(0,0,0,.18);

  --side-w:      224px;
  --topbar-h:    56px;

  /* Legacy top bar. staloyce renders its masthead as
     .menu-w.color-scheme-dark.color-style-bright.menu-position-top; the rule at
     css/main.css:14675 (.menu-position-top.menu-w.color-style-bright) is both
     later and more specific than the #293145 one, and its opaque
     "gradient" #1c4cc3 -> #1c4cc3 covers the background-color entirely.
     So the colour staff actually see on the old system is a flat #1c4cc3. */
  --topbar-bg:   #1c4cc3;
  --topbar-line: #163c9c;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'K2D', system-ui, sans-serif; }

body {
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

.tftable1 {font-size:12px;color:#333333;width:100%;border-width: 1px; border-color:#5DADE2;border-collapse: collapse; border-top:none;}
.tftable1 th {font-size:12px;  background-color:#34495E;border-width: 1px; color:#fff;padding: 5px;border-style: solid;border-color: #729ea5; 
 text-transform:uppercase;}
.tftable1 tr {background-color:#FFFBEC;}
.tftable1 td {font-size:12px;border-width: 1px;padding: 3px;border-style: solid;border-color: #729ea5;}


a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #c1cdd8; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #a9b8c6; }
::-webkit-scrollbar-track { background: transparent; }

/* --- Top bar -------------------------------------------------------------- */
.topbar {
  display: flex; align-items: center; gap: 12px;
  height: var(--topbar-h); padding: 0 16px;
  background: var(--topbar-bg); border-bottom: 2px solid var(--topbar-line);
  position: sticky; top: 0; z-index: 300;
}
.topbar .mark {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  background: rgba(255,255,255,.94); color: var(--topbar-bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; letter-spacing: -.4px;
}
.topbar .brand { color: #fff; font-size: 14px; font-weight: 700; line-height: 1.15; }
.topbar .brand small {
  display: block; font-size: 10px; font-weight: 400;
  color: rgba(255,255,255,.78); letter-spacing: .3px;
}
.topbar .spacer { margin-left: auto; }
.topbar .who {
  display: flex; align-items: center; gap: 9px;
  color: #fff; font-size: 12px;
}
.topbar .avatar {
  width: 29px; height: 29px; border-radius: 50%;
  background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff;
}
.topbar .who .name { font-weight: 600; line-height: 1.2; }
.topbar .who .role { font-size: 10px; color: rgba(255,255,255,.78); letter-spacing: .3px; }
.topbar .signout {
  color: #fff; font-size: 12px; font-weight: 600;
  padding: 5px 11px; border-radius: 20px;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3);
}
.topbar .signout:hover { background: rgba(255,255,255,.26); text-decoration: none; }

/* --- Layout ---------------------------------------------------------------
   Horizontal navigation: a scrollable tab strip under the top bar, so the full
   width of the screen is available to the work itself. Tabs are the modules
   this user was granted; nothing is hardcoded.
   -------------------------------------------------------------------------- */
.tabs {
  background: var(--surface); border-bottom: 1px solid var(--line);
  padding: 0 18px; display: flex; gap: 2px;
  overflow-x: auto; overflow-y: hidden;
  position: sticky; top: var(--topbar-h); z-index: 190;
  scrollbar-width: thin;
}
.tabs::-webkit-scrollbar { height: 3px; }

.tab {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 12px 14px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px;
  color: var(--ink-3); border-bottom: 3px solid transparent;
}
.tab:hover { color: var(--ink); text-decoration: none; background: var(--surface-2); }
.tab.on { color: var(--blue); border-bottom-color: var(--blue); }

.tab .badge {
  min-width: 18px; text-align: center;
  font-size: 10px; font-weight: 700; letter-spacing: 0;
  color: var(--blue-dark); background: var(--blue-wash);
  border: 1px solid var(--blue-line); border-radius: 10px; padding: 0 5px;
}

/* A thin separator between module groups (Clinical / Finance / …) */
.tab-sep { width: 1px; margin: 10px 6px; background: var(--line); flex-shrink: 0; }

.tabs .none { padding: 12px 14px; font-size: 12px; color: var(--ink-4); }

.main { padding: 18px 22px 48px; min-width: 0; max-width: 1600px; margin: 0 auto; }

/* --- Page header ---------------------------------------------------------- */
.page-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.page-head h1 { font-size: 21px; font-weight: 700; letter-spacing: -.3px; line-height: 1.2; }
.page-head p { font-size: 13px; color: var(--ink-4); margin-top: 2px; }
.page-head .actions { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* --- Card ----------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid #d5d6d7;
  border-radius: 6px;
  box-shadow: 0px 2px 4px rgba(169, 170, 171, 0.12);
  overflow: hidden;
}
.card + .card { margin-top: 14px; }
.card-hd {
  padding: 13px 16px; border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.card-hd h2 { font-size: 14px; font-weight: 700; letter-spacing: -.1px; }
.card-hd .sub { font-size: 12px; color: var(--ink-4); }
.card-bd { padding: 14px 16px; }

/* --- Filter bar ----------------------------------------------------------- */
.filters {
  padding: 11px 16px;
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  /* The frame every filter box wears (RECEPTION.md) — deliberately literal
     colours, not theme tokens: the spec is a fixed visual identity. */
  margin: 10px 12px;
  
  border-radius: 6px;
  background-color: #fff;
 
}
.filters .grow { flex: 1; min-width: 170px; }

/* --- Form controls -------------------------------------------------------- */
.inp {
  padding: 8px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 13px; color: var(--ink); background: #fff; outline: none; min-height: 36px;
}
.inp:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,125,204,.15); }
select.inp { cursor: pointer; }
label.lbl {
  display: block; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .7px; color: var(--ink-3); margin-bottom: 5px;
}

.btn {
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
  padding: 8px 14px; min-height: 36px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; color: var(--ink-2);
  font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--surface-2); border-color: #c3ced9; text-decoration: none; }
/* Service-fees: a restricted item's scheme cells — the item bills as cash
   whatever the cover, and the price a claimant would read is dead. */
td.cell-restricted { background: var(--urgent) !important; }
td.cell-restricted .price-cell,
td.cell-restricted .price-cell .muted { color: #fff !important; }

/* The service modal's row states.
   A restricted medicine reads RED from the moment it lands on the form —
   the prescriber decides with the fact, instead of the claim bouncing
   later. A row that failed validation turns red WHERE the fix goes. */
#serviceModal tr.svc-restricted > td:first-child { color: var(--urgent); font-weight: 700; }
#serviceModal tr.svc-row-bad > td {
  background: var(--urgent-bg);
}
#serviceModal tr.svc-row-bad > td:first-child {
  box-shadow: inset 3px 0 0 var(--urgent);
}
.svc-row-msg { color: var(--urgent); font-size: 11.5px; margin-top: 3px; }
.svc-restrict-chip {
  display: inline-block; background: var(--urgent); color: #fff;
  border-radius: 4px; padding: 1px 7px; font-size: 10.5px; font-weight: 800;
  letter-spacing: .4px; margin-left: 7px; vertical-align: 1px;
}

/* State buttons named the way the team asks for them (bootstrap idiom).
   Warning = a state still open; success = finished. */
.btn-warning {
  background: #f0a20c; border-color: #f0a20c; color: #fff;
}
.btn-warning:hover { background: #d68f08; border-color: #d68f08; color: #fff; }
.btn-success {
  background: #1a9e57; border-color: #1a9e57; color: #fff;
}
.btn-success:hover { background: #158549; border-color: #158549; color: #fff; }

.btn-primary { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 700; }
.btn-primary:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.btn-sm { padding: 5px 10px; min-height: 30px; font-size: 12px; }

/* --- Table utilities (used outside tables too) ----------------------------- */
.num  { color: var(--ink-4); font-size: 12px; }
.nm   { font-weight: 600; color: var(--ink); }
.muted{ color: var(--ink-4); }
td.right, th.right { text-align: right; }

/* ==========================================================================
   HMIS data table
   Reception / cashier / report listings — matches the St. Aloyce layout.

   Markup:
     <div class="table-wrap">
       <table class="data-table">
         <thead>
           <tr>
             <th class="col-no">NO.</th><th>NAME</th><th class="col-num">VISITS</th>
             <th>BIMA</th><th>FILENO</th><th>STREET</th><th>AGE</th>
             <th class="col-sex">SEX</th><th>TIME</th><th>SUBMITTED BY</th><th>DOCTOR</th>
           </tr>
         </thead>
         <tbody>
           <tr><td class="col-no">1</td><td>MERINA MICHAEL BULABO</td>...</tr>
           <tr class="is-bima"><td class="col-no">9</td>...</tr>   <!-- insurance row -->
         </tbody>
       </table>
     </div>

   Modifiers:
     .table-wrap--scroll   fixed height + sticky header
     .data-table--compact  tighter rows for long print-outs
     .data-table--plain    no zebra striping
     tr.is-bima            insurance patient (salmon highlight)
     tr.is-flagged         needs attention (amber highlight)
   ========================================================================== */

:root {
  --dt-head-bg:    #2f3e4d;
  --dt-head-fg:    #ffffff;
  --dt-head-line:  #1e2a35;

  --dt-row-bg:     #ffffff;
  --dt-row-alt:    #fdfaf0;
  --dt-row-hover:  #eaf2fb;

  --dt-border:     #729ea5;
  --dt-border-out: #d7dbe0;
  --dt-text:       #333333;
  --dt-text-mute:  #6b7681;

  --dt-bima-bg:    #fce9e6;
  --dt-bima-fg:    #c0392b;
  --dt-flag-bg:    #fdf3d8;
  --dt-flag-fg:    #8a6100;

  --dt-radius:     6px;
  --dt-pad-y:      8px;
  --dt-pad-x:      10px;
  --dt-font:       12px;
}

/* --- Wrapper: rounded frame + horizontal scroll on narrow screens --------- */

.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--dt-row-bg);
  border: 1px solid var(--dt-border-out);
  border-radius: var(--dt-radius);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}

.table-wrap--scroll {
  max-height: 70vh;
  overflow-y: auto;
}

/* --- Table base ---------------------------------------------------------- */

.data-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-family: "Segoe UI", Roboto, Arial, Helvetica, sans-serif;
  font-size: var(--dt-font);
  line-height: 1.35;
  color: var(--dt-text);
  background: var(--dt-row-bg);
  border-width: 1px; border-color:#5DADE2; border-top:none;
}

/* --- Header -------------------------------------------------------------- */

.data-table thead th {
  padding: var(--dt-pad-y) var(--dt-pad-x);
  background: var(--dt-head-bg);
  color: var(--dt-head-fg);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  border-right: 1px solid var(--dt-head-line);
  vertical-align: middle;
}

.data-table thead th:last-child { border-right: 0; }

/* Sticky header — only bites inside .table-wrap--scroll */
.table-wrap--scroll .data-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

/* --- Body cells ---------------------------------------------------------- */

.data-table tbody td {
  /*padding: var(--dt-pad-y) var(--dt-pad-x);*/
  border-bottom: 1px solid var(--dt-border);
  border-right: 1px solid var(--dt-border);
  vertical-align: middle;
  border-width: 1px;
  padding: 2px;
  border-style: solid;

}

.data-table tbody td:last-child { border-right: 0; }
.data-table tbody tr:last-child td { border-bottom: 0; }

/* --- Zebra + hover ------------------------------------------------------- */

.data-table tbody tr:nth-child(even) { background: var(--dt-row-alt); }
.data-table--plain tbody tr:nth-child(even) { background: var(--dt-row-bg); }

.data-table tbody tr:hover { background: var(--dt-row-hover); }

/* --- Row states ---------------------------------------------------------- */

.data-table tbody tr.is-bima,
.data-table tbody tr.is-bima:hover {
  background: var(--dt-bima-bg);
  color: var(--dt-bima-fg);
}

.data-table tbody tr.is-bima td { font-weight: 500; }

.data-table tbody tr.is-flagged,
.data-table tbody tr.is-flagged:hover {
  background: var(--dt-flag-bg);
  color: var(--dt-flag-fg);
}

/* --- Column helpers ------------------------------------------------------ */

.data-table .col-no {
  width: 42px;
  text-align: center;
  color: var(--dt-text-mute);
}

.data-table thead .col-no,
.data-table thead .col-num,
.data-table thead .col-sex { text-align: center; }

.data-table .col-num { width: 60px; text-align: center; }
.data-table .col-sex { width: 46px; text-align: center; }
.data-table .col-time,
.data-table .col-file { white-space: nowrap; }

.data-table .nowrap { white-space: nowrap; }
.data-table .num    { text-align: right; font-variant-numeric: tabular-nums; }

/* --- Density ------------------------------------------------------------- */

.data-table--compact { --dt-pad-y: 5px; --dt-pad-x: 8px; --dt-font: 11px; }

/* --- Empty state --------------------------------------------------------- */

.data-table tbody .is-empty td {
  padding: 28px 12px;
  text-align: center;
  color: var(--dt-text-mute);
  font-style: italic;
}

/* --- Summary strip (Total Patients / Visits / Average Age) ---------------- */

.table-summary {
  margin-top: 10px;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--dt-text);
  background: var(--dt-row-alt);
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-radius);
}

.table-summary strong { font-weight: 600; }

/* --- Small screens --------------------------------------------------------- */

@media (max-width: 768px) {
  .data-table { --dt-font: 11px; --dt-pad-y: 6px; --dt-pad-x: 7px; }
  .data-table thead th { font-size: 10px; letter-spacing: .2px; }
}

/* --- Print (data table) ---------------------------------------------------- */

@media print {
  .table-wrap {
    overflow: visible;
    max-height: none;
    border: 0;
    box-shadow: none;
  }

  .data-table {
    font-size: 10px;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .data-table thead { display: table-header-group; }   /* repeat on every page */
  .data-table tbody tr { page-break-inside: avoid; }
  .data-table tbody tr:hover { background: inherit; }
}

/* --- Status pills --------------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; border-radius: 20px;
  padding: 2px 9px; white-space: nowrap; border: 1px solid transparent;
}
.pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
/* Admitted patients in every list: green name plus an IPD badge. The
   badge is bordered and bold so it reads in greyscale and to anyone who
   cannot tell the green from the black. */
.pt-ipd    { color: #15803d; font-weight: 700; }
.ipd-badge { display: inline-block; margin-left: 4px; padding: 0 6px; line-height: 16px;
             border: 1.5px solid #15803d; border-radius: 4px; color: #15803d;
             font-size: 10.5px; font-weight: 800; letter-spacing: .04em; vertical-align: middle; }
/* Walk-in service visit today (injection, BP, dressing — no doctor): the
   same shape as the IPD mark, in blue, so a list reads the kind of visit
   at a glance. */
.pt-walkin    { color: #0063a3; font-weight: 700; }
.walkin-badge { display: inline-block; margin-left: 4px; padding: 0 6px; line-height: 16px;
                border: 1.5px solid #0063a3; border-radius: 4px; color: #0063a3;
                font-size: 10.5px; font-weight: 800; letter-spacing: .04em; vertical-align: middle; }

.pill.ok     { background: var(--ok-bg);     border-color: var(--ok-line);     color: var(--ok); }
.pill.wait   { background: var(--wait-bg);   border-color: var(--wait-line);   color: var(--wait); }
.pill.urgent { background: var(--urgent-bg); border-color: var(--urgent-line); color: var(--urgent); }
.pill.idle   { background: var(--idle-bg);   border-color: var(--idle-line);   color: var(--idle); }
.pill.flat::before { display: none; }

.chip {
  display: inline-block; font-size: 11px; font-weight: 600;
  color: var(--blue-dark); background: var(--blue-wash);
  border: 1px solid var(--blue-line); border-radius: 4px; padding: 1px 6px;
}
a.chip:hover { background: var(--blue); color: #fff; text-decoration: none; }

/* Sample ID — the request number the technician types into the analyzer.
   Large, monospaced and copyable; the analyzer's own tests get the blue. */
.data-table .col-sample { width: 118px; white-space: nowrap; }
.sample-id {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 17px; font-weight: 700; letter-spacing: .5px; line-height: 1.2;
  color: var(--ink); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; cursor: pointer;
}
.sample-id.analyzer { color: var(--blue-dark); background: var(--blue-wash); border-color: var(--blue-line); }
.sample-id:hover { border-color: var(--blue); }
.sample-id.copied { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.sample-id.lg { font-size: 22px; padding: 6px 12px; }

/* --- Stat strip ----------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 1px; background: var(--line-soft); }
.stat { background: var(--surface); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.stat .k { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: var(--ink-4); }
.stat .v { font-size: 24px; font-weight: 700; color: var(--blue); line-height: 1.15; }
.stat .v.zero { color: var(--ink-faint); }
.stat .n { font-size: 11px; color: var(--ink-4); }
a.stat:hover { background: var(--surface-2); text-decoration: none; }

/* --- Empty state ---------------------------------------------------------- */
.empty { padding: 44px 20px; text-align: center; color: var(--ink-4); font-size: 14px; line-height: 1.7; }
.empty strong { color: var(--ink-2); }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 860px) {
  .main { padding: 14px 14px 40px; }
  .tabs { padding: 0 10px; }
  .tab { padding: 11px 11px; }
  .topbar .who .name, .topbar .who .role { display: none; }
  .page-head h1 { font-size: 19px; }
}

@media print {
  .topbar, .tabs, .filters, .btn, .page-head .actions { display: none !important; }
  .card { border: none; box-shadow: none; }
  body { background: #fff; }
}

/* --- Patient avatar ------------------------------------------------------- */
.avatar-img, .avatar-ini {
  border-radius: 50%; flex-shrink: 0; object-fit: cover;
  display: inline-flex; align-items: center; justify-content: center;
}
.avatar-img { border: 1px solid var(--line); background: var(--surface-2); }
.avatar-ini {
  font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
  /* Hue comes from the patient id so the same person is always the same colour */
  color:            hsl(var(--h, 210) 42% 32%);
  background:       hsl(var(--h, 210) 58% 93%);
  border: 1px solid hsl(var(--h, 210) 46% 82%);
}
.person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.person .who-name { min-width: 0; }

/* Compact key/value pairs (patient detail header) */
.kv { width: 100%; font-size: 13px; }
.kv td { padding: 4px 0; vertical-align: top; border: none; }
.kv td.k { color: var(--ink-4); font-weight: 600; width: 108px; padding-right: 10px; white-space: nowrap; }

/* --- Modal ---------------------------------------------------------------- */
.modal {
  display: none; position: fixed; inset: 0; z-index: 500;
  background: rgba(15,25,35,.45); padding: 20px; overflow-y: auto;
}
.modal.open { display: flex; align-items: flex-start; justify-content: center; }
.modal-card {
  background: var(--surface); border-radius: var(--radius); width: 100%;
  max-width: 880px; margin: auto; box-shadow: var(--shadow-pop); overflow: hidden;
}
.modal-card.sm { max-width: 420px; }
/* Panels that carry two or three tables — batches, packs and the ledger for
   one item — need more room than a form modal. */
.modal-card.lg { max-width: 1020px; }
.modal-card.lg .modal-bd h3 { font-size: 13px; margin: 0 0 8px; }
.modal-hd {
  padding: 14px 18px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px;
}
.modal-hd h2 { font-size: 15px; font-weight: 700; }
.modal-x {
  margin-left: auto; border: none; background: none; cursor: pointer;
  font-size: 24px; line-height: 1; color: var(--ink-4); padding: 0 4px;
}
.modal-x:hover { color: var(--ink); }
.modal-bd { padding: 16px 18px; max-height: calc(100vh - 220px); overflow-y: auto; }
.modal-ft {
  padding: 12px 18px; border-top: 1px solid var(--line); background: var(--surface-2);
  display: flex; gap: 9px; justify-content: flex-end;
}

/* Registration form grid */
.form-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px 14px; }
.form-grid .fld { display: flex; flex-direction: column; min-width: 0; }
.form-grid .fld .inp { width: 100%; }
.form-grid .span2 { grid-column: span 2; }
.form-grid .span4 { grid-column: 1 / -1; }
.form-grid .sect {
  grid-column: 1 / -1; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .9px; color: var(--blue); padding-bottom: 5px;
  border-bottom: 1px solid var(--line); margin-top: 6px;
}
@media (max-width: 720px) {
  .form-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .form-grid .span2 { grid-column: span 2; }
}

/* Patient-name typeahead (registration form) */
.search-wrap { position: relative; }
/* First / middle / last on one line; stacked on a phone. */
.name-parts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 560px) { .name-parts { grid-template-columns: 1fr; } }
.search-results {
  position: absolute; top: 100%; left: 0; right: 0; margin-top: 3px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-pop); max-height: 260px; overflow-y: auto; z-index: 50;
}
.search-results .pick { padding: 8px 12px; border-bottom: 1px solid var(--line-soft); }
.search-results .pick:last-child { border-bottom: none; }
.search-results .pick .nm { font-weight: 700; font-size: 13px; }
.search-results .pick .num { font-size: 11px; color: var(--ink-4); }
/* Keyboard highlight on any search list (static/js/app.js): the row ↓/↑
   landed on, picked with Enter. */
.search-results .kb-on, .typeahead-list .kb-on, .mg-results .kb-on, .kb-on {
  background: var(--blue-wash) !important; outline: 2px solid var(--blue); outline-offset: -2px;
}
.search-results.q-suggest { max-height: 300px; }
.search-results.q-suggest .pick { display: block; width: 100%; text-align: left; border: 0; background: var(--surface); cursor: pointer; }
.search-results.q-suggest .pick:hover { background: var(--blue-wash); }

/* Clinician picker */
.pick-list { max-height: 50vh; overflow-y: auto; }
.pick {
  display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left;
  padding: 10px 18px; border: none; background: var(--surface); cursor: pointer;
  border-bottom: 1px solid var(--line-soft);
}
.pick:hover { background: var(--blue-wash); }

/* Row-level clinician trigger */
.clin-btn {
  border: none; background: none; padding: 0; cursor: pointer; text-align: left;
  color: var(--ink-3); font-size: 12px; font-weight: 600; text-decoration: underline dotted;
}
.clin-btn:hover { color: var(--blue); }

.flash {
  background: var(--ok-bg); border: 1px solid var(--ok-line); color: var(--ok);
  padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13px;
  font-weight: 600; margin-bottom: 14px;
}

/* ==========================================================================
   Shared page furniture
   ==========================================================================
   Added after the consultation page proved out a layout worth reusing: a
   patient identity header, a back-and-breadcrumb bar, and a date control that
   behaves like the legacy `input.single-daterange`.
   ========================================================================== */

/* --- Tabs inside a card --------------------------------------------------
   The global navigation strip is sticky under the top bar. In-card tab strips
   reuse the same class but must NOT be sticky: they sat on top of the table
   they belong to and covered its header as soon as the page scrolled.
   -------------------------------------------------------------------------- */
.card .tabs {
  position: static;
  z-index: auto;
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  padding: 0 12px;
}
.card .tabs .tab { padding: 11px 13px; }
.card .tabs + .filters,
.card .tabs + .table-wrap,
.card .tabs + .stats { border-top: 0; }

/* --- Back bar ------------------------------------------------------------- */
.backbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.backbar .crumb { font-size: 12px; color: var(--ink-3); letter-spacing: .3px; }
.backbar .crumb b { color: var(--ink); font-weight: 600; }
.backbar .right { margin-left: auto; font-size: 12px; color: var(--ink-4); }

/* --- Patient identity header ---------------------------------------------
   Four panels: who they are, how they pay, their authorisation, and where
   they are in the visit. Lifted off the consultation page so every page that
   works on one patient shows the same thing in the same place.
   -------------------------------------------------------------------------- */
.phead {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; margin-bottom: 14px;
}
.phead-grid {
  display: grid; grid-template-columns: 1.05fr 1fr 1fr 210px;
}
@media (max-width: 1100px) {
  .phead-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .phead-grid { grid-template-columns: 1fr; }
}
.phead-cell {
  padding: 16px 18px; border-right: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
}
/* The status column is tinted, as on the consultation page it came from — it
   carries state rather than identity, and the shade says so. */
.phead-cell:last-child {
  border-right: 0; background: var(--surface-2); align-items: flex-start;
}
.phead-flag {
  margin-top: auto; padding: 8px 14px; border-radius: 6px;
  border: 1px solid var(--wait-line); background: var(--wait-bg);
  color: var(--wait); font-size: 12px; font-weight: 700;
  letter-spacing: .3px; text-transform: uppercase;
}
.phead-name {
  font-size: 21px; font-weight: 700; letter-spacing: -.3px; line-height: 1.2;
  color: var(--ink);
}
.phead-tags { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.phead-file {
  font-size: 12px; font-weight: 600; color: var(--blue-dark);
  background: var(--blue-wash); border: 1px solid var(--blue-line);
  border-radius: 4px; padding: 2px 7px;
}
.phead-sub { font-size: 12px; color: var(--ink-3); }
.phead-kv {
  display: grid; grid-template-columns: 92px minmax(0, 1fr);
  gap: 7px 12px; align-items: baseline;
}
.phead-kv dt, .phead-kv .k {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .7px; color: var(--ink-4);
}
.phead-kv dd, .phead-kv .v { font-size: 14px; color: var(--ink); margin: 0; }
.phead-kv .v.empty-v { color: var(--ink-faint); }
.phead-sect {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .8px; color: var(--ink-3);
}
.phead-chip {
  font-size: 11px; font-weight: 600; border-radius: 4px; padding: 2px 7px;
  color: var(--ink-3); background: var(--surface-2);
}
.phead-chip.ins { color: var(--blue-dark); background: var(--blue-wash); }
.phead-state {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 20px;
  background: var(--ok-bg); border: 1px solid var(--ok-line); color: var(--ok);
}
.phead-state::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
.phead-state.wait { background: var(--wait-bg); border-color: var(--wait-line); color: var(--wait); }
.phead-state.idle { background: var(--idle-bg); border-color: var(--idle-line); color: var(--idle); }

/* --- Date control ---------------------------------------------------------
   The legacy pages use `input.single-daterange`, a jQuery daterangepicker in
   single-date mode. pacare_v4 carries no jQuery, so this is the same idea
   built on the native date input: legacy look, quick presets, and — for the
   range variants that legacy handled with two boxes — a from/to pair that
   moves together.
   -------------------------------------------------------------------------- */
/* --- Date range picker ------------------------------------------------------
   The pill itself: one visible text input, styled to match every other filter
   control. The library repaints this input's value on apply; the two hidden
   inputs beside it (see partials/daterange.html) are what actually gets
   submitted.
   -------------------------------------------------------------------------- */
.single-daterange, .daterange {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); overflow: hidden;
}
.single-daterange:focus-within, .daterange:focus-within {
  border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,125,204,.15);
}
.drp-display {
  border: 0; background: transparent; padding: 8px 10px;
  font: inherit; font-size: 13px; color: var(--ink); min-height: 36px;
  outline: none; min-width: 172px; cursor: pointer;
}
.drp-display::before {
  content: "\1F4C5\FE0E  "; /* small calendar glyph, affordance that this opens a picker */
  opacity: .55; font-size: 11px;
}

/* --- The popup calendar itself ----------------------------------------------
   daterangepicker.css ships its own look (Bootstrap-blue, Helvetica); this
   restates the parts that show through so the popup reads as part of the app
   rather than an imported widget. Selectors match the library's own markup
   (see static/vendor/daterangepicker.css) — .drp-selected, .ranges, td.active,
   .applyBtn are the library's class names, not ours.
   -------------------------------------------------------------------------- */
.daterangepicker {
  font-family: inherit; font-size: 13px; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-pop, 0 8px 24px rgba(0,0,0,.12));
}
.daterangepicker .calendar-table { border-color: var(--line-soft); background: var(--surface); }
.daterangepicker td.available:hover, .daterangepicker th.available:hover { background: var(--blue-wash, #eaf4fc); }
.daterangepicker td.in-range { background: var(--blue-wash, #eaf4fc); color: var(--ink); }
.daterangepicker td.active, .daterangepicker td.active:hover {
  background: var(--blue); border-color: var(--blue); color: #fff;
}
.daterangepicker td.today.active { background: var(--blue); }
.daterangepicker .ranges li { color: var(--ink-3); }
.daterangepicker .ranges li:hover { background: var(--blue-wash, #eaf4fc); color: var(--blue); }
.daterangepicker .ranges li.active { background: var(--blue); color: #fff; }
.daterangepicker .drp-buttons { border-color: var(--line-soft); }
.daterangepicker .drp-selected { color: var(--ink-4); font-size: 12px; }
.daterangepicker .applyBtn {
  background: var(--blue); border-color: var(--blue);
  border-radius: var(--radius-sm); box-shadow: none;
}
.daterangepicker .applyBtn:hover { background: var(--blue-dark, #005a94); }
.daterangepicker .cancelBtn {
  background: var(--surface-2); border-color: var(--line);
  color: var(--ink-3); border-radius: var(--radius-sm); box-shadow: none;
}

/* --- Tables: readability fixes -------------------------------------------
   `.nm` was rendering at the muted colour, so patient names — the thing the
   eye goes to first — were fainter than the data beside them. Names now read
   at full strength; only genuinely secondary text stays muted.
   -------------------------------------------------------------------------- */
.data-table td.nm, .data-table .nm { color: var(--dt-text); font-weight: 600; }
.data-table td.nm a { color: var(--blue-dark); font-weight: 600; }
.data-table td.nm .num,
.data-table td.nm div { font-weight: 400; }

/* A totals row is a conclusion, not another row of data — so it reads as a
   solid band closing the table, the way the paper reports it replaces did.
   Deliberately literal colours, matching the legacy total bar. */
.data-table tfoot td,
.data-table tfoot th {
  font-weight: 700;
  color: #fff;
  background: #34495E;
  border-top: 2px solid #2c3e50;
  border-bottom: 0;
  padding-top: 11px; padding-bottom: 11px;
}
/* Everything inside the band is white — .num, .muted and anything else
   carry their own colours, and a dimmed figure in a dark bar is unreadable. */
.data-table tfoot td *,
.data-table tfoot th *,
.data-table tfoot .num,
.data-table tfoot strong { color: #ffffff; font-weight: 700; }
/* Rounded off at the bottom, so the band finishes the card cleanly. */
.data-table tfoot tr:last-child td:first-child { border-bottom-left-radius: 4px; }
.data-table tfoot tr:last-child td:last-child { border-bottom-right-radius: 4px; }

@media print {
  /* The band must survive a print, where backgrounds are dropped by default. */
  .data-table tfoot td, .data-table tfoot th {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}

/* --- Typeahead list inside a modal ---------------------------------------
   Results stay hidden until the field has focus, and close again on a click
   outside — a permanently open list pushed the rest of the form off screen.

   DELIBERATELY NOT called .pick / .pick-list. Those names were already taken by
   the static clinician and diagnosis lists further up this file, and because
   this block comes later it won the cascade and set display:none on them — the
   "Assign clinician" list and both diagnosis lists rendered but were invisible.
   Two different widgets must not share a class name.
   -------------------------------------------------------------------------- */
.typeahead { position: relative; }
.typeahead-list {
  display: none; position: absolute; left: 0; right: 0; top: calc(100% + 3px);
  z-index: 40; max-height: 240px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-pop);
}
.typeahead-list.open { display: block; }
.typeahead-list .row {
  padding: 8px 11px; font-size: 13px; cursor: pointer;
  border-bottom: 1px solid var(--line-soft); display: flex; gap: 8px;
  align-items: baseline;
}
.typeahead-list .row:last-child { border-bottom: 0; }
.typeahead-list .row:hover, .typeahead-list .row.on { background: var(--blue-wash); }
.typeahead-list .row .n { font-weight: 600; }
.typeahead-list .row .m { margin-left: auto; font-size: 11px; color: var(--ink-4); }
.typeahead-list .none { padding: 10px 11px; font-size: 12px; color: var(--ink-4); }

/* --- Blocked-by-payment notice -------------------------------------------- */
.locked {
  display: flex; gap: 8px; align-items: flex-start;
  background: var(--wait-bg); border: 1px solid var(--wait-line);
  color: var(--wait); border-radius: var(--radius-sm);
  padding: 10px 12px; font-size: 12px; line-height: 1.55;
}
.locked strong { display: block; }

/* --- Laboratory panel ------------------------------------------------------
   A multi-analyte result (FBP, U&E, LFT) read as one run-on paragraph before
   this: thirteen values, units, ranges and flags on a single wrapped line. A
   doctor scanning a panel is looking for the values OUTSIDE range, so those are
   what the layout has to make findable — everything else can recede.

   Ranges and units are deliberately quiet; the value and the flag are not.
   -------------------------------------------------------------------------- */
.lab-panel {
  width: 100%; border-collapse: collapse; font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.lab-panel thead th {
  font-size: 10px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase;
  color: var(--ink-4); text-align: left; padding: 0 8px 4px 0;
  border-bottom: 1px solid var(--line);
}
.lab-panel thead th.v { text-align: right; }
.lab-panel td {
  padding: 4px 8px 4px 0; border-bottom: 1px solid var(--line-soft);
  vertical-align: baseline;
}
.lab-panel tr:last-child td { border-bottom: 0; }
.lab-panel td.an { color: var(--ink); font-weight: 600; }
.lab-panel td.v  { text-align: right; font-weight: 700; color: var(--ink);
                   white-space: nowrap; }
.lab-panel td.u  { color: var(--ink-3); white-space: nowrap; }
.lab-panel td.r  { color: var(--ink-4); white-space: nowrap; }
.lab-panel td.f  { white-space: nowrap; text-align: right; width: 1%; }

/* An out-of-range row is tinted across its whole width, so it is visible
   peripherally rather than only when the eye reaches the flag column. */
.lab-panel tr.high td, .lab-panel tr.abnormal td { background: var(--urgent-bg); }
.lab-panel tr.low td { background: var(--wait-bg); }
.lab-panel tr.high td.v, .lab-panel tr.abnormal td.v { color: var(--urgent); }
.lab-panel tr.low td.v { color: var(--wait); }

.lab-panel .hi, .lab-panel .ab {
  font-size: 10px; font-weight: 800; letter-spacing: .5px; color: var(--urgent);
}
.lab-panel .lo {
  font-size: 10px; font-weight: 800; letter-spacing: .5px; color: var(--wait);
}

@media print {
  /* Tints do not survive a mono laser printer; the flag column carries it. */
  .lab-panel tr.high td, .lab-panel tr.low td, .lab-panel tr.abnormal td {
    background: none;
  }
  .lab-panel tr.high td.v, .lab-panel tr.low td.v,
  .lab-panel tr.abnormal td.v { text-decoration: underline; }
}

/* --- Application footer ----------------------------------------------------
   Support contact and build marker, on every page after login. Quiet by
   default; the number itself is given full contrast because it is the one
   thing anyone reads down here.
   -------------------------------------------------------------------------- */
.appfoot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
  padding: 10px 22px 14px;
  font-size: 11.5px; color: var(--ink-4);
  border-top: 1px solid var(--line-soft);
  margin-top: 18px;
}
.appfoot a { color: var(--blue); font-weight: 700; text-decoration: none; }
.appfoot a:hover { text-decoration: underline; }
.appfoot .ver { letter-spacing: .4px; }
.appfoot .ver a { color: var(--ink-4); font-weight: 600; }
.appfoot .ver a:hover { color: var(--blue); }

@media print { .appfoot { display: none; } }

/* --- NHIF authorization countdown ------------------------------------------
   An NHIF authorization expires. Colour carries the urgency at a glance, and
   the state is decided server-side — the browser only ticks the display.
   -------------------------------------------------------------------------- */
.authbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
  padding: 9px 14px; margin-bottom: 12px;
  border: 1px solid var(--line); border-left-width: 4px;
  border-radius: var(--radius-sm); background: var(--surface-2);
  font-size: 12.5px;
}
.authbar .k { color: var(--ink-4); margin-right: 6px; }
.authbar .n { color: var(--ink-4); margin-left: 8px; font-size: 11.5px; }
.authbar .right { display: flex; align-items: baseline; gap: 10px; }
.authbar .lbl { font-size: 11.5px; color: var(--ink-3); }
.authbar .clock {
  font-family: var(--mono, "Courier New", monospace);
  font-size: 17px; font-weight: 800; letter-spacing: .5px;
  font-variant-numeric: tabular-nums;
}

.authbar.auth-valid    { border-left-color: var(--ok);     background: var(--ok-bg); }
.authbar.auth-valid    .clock { color: var(--ok); }
.authbar.auth-warning  { border-left-color: var(--wait);   background: var(--wait-bg); }
.authbar.auth-warning  .clock { color: var(--wait); }
.authbar.auth-critical { border-left-color: var(--urgent); background: var(--urgent-bg); }
.authbar.auth-critical .clock { color: var(--urgent); }
.authbar.auth-expired  { border-left-color: var(--urgent); background: var(--urgent-bg); }
.authbar.auth-expired  .clock { color: var(--urgent); text-decoration: line-through; }
.authbar.auth-none, .authbar.auth-unknown { border-left-color: var(--ink-4); }
.authbar.auth-none .clock, .authbar.auth-unknown .clock { color: var(--ink-4); }

@media print { .authbar { display: none; } }

/* --- Allergy strip on the patient header -----------------------------------
   Three states, three volumes: allergies shout, NKDA is a quiet positive,
   never-asked is a visible gap rather than a blank.
   -------------------------------------------------------------------------- */
.allergy-strip { padding: 6px 14px; font-size: 12.5px; border-radius: var(--radius-sm);
                 margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px 10px;
                 align-items: baseline; }
.allergy-strip.has { background: var(--urgent-bg); border: 1px solid var(--urgent-line);
                     color: var(--urgent); font-weight: 600; }
.allergy-strip.has .al { background: #fff; border: 1px solid var(--urgent-line);
                         border-radius: 4px; padding: 1px 7px; }
.allergy-strip.has .al.sev { background: var(--urgent); color: #fff; }
.allergy-strip.nkda { background: var(--ok-bg); border: 1px solid var(--ok-line);
                      color: var(--ok); }
.allergy-strip.unknown { background: var(--surface-2); border: 1px dashed var(--line);
                         color: var(--ink-4); }
@media print { .allergy-strip.unknown { display: none; } }

/* ---- Reception filter frame + charts (RECEPTION.md) -------------------- */
.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; padding: 14px 16px; }
.chart-hd { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: var(--ink-4); margin-bottom: 8px; }
.hbar-row { display: grid; grid-template-columns: 110px 1fr 34px; gap: 8px; align-items: center; margin: 4px 0; font-size: 12px; }
.hbar-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-track { background: var(--line-soft, #eef1f6); border-radius: 4px; height: 12px; overflow: hidden; }
.hbar-fill { display: block; height: 100%; background: #34495E; border-radius: 4px; min-width: 2px; }
.hbar-val { text-align: right; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.colchart { display: flex; align-items: flex-end; gap: 6px; height: 130px; overflow-x: auto; padding-top: 14px; }
.colc { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 30px; height: 100%; }
.colc-bar { display: block; width: 22px; background: #34495E; border-radius: 3px 3px 0 0; }
.colc-val { font-size: 10px; color: var(--ink-4); margin-bottom: 2px; font-variant-numeric: tabular-nums; }
.colc-lbl { font-size: 10px; color: var(--ink-4); margin-top: 4px; white-space: nowrap; }
.data-table tbody tr.rowlink { cursor: pointer; }
.data-table tbody tr.rowlink:hover td { background: var(--row-hover, #f5f7fb); }

/* ---- Legacy letterhead + table design (reception screenshot) ----------- */
.letterhead {
  display: flex; gap: 18px; align-items: center;
  border: 1px solid #1f2937; border-bottom: 0;
  background: #fff; color: #333;
  padding: 10px 16px;
}
.lh-logo { width: 128px; height: 128px; object-fit: contain; flex: 0 0 auto; }
.lh-lines { font-size: 15px; line-height: 1.55; }
.lh-lines .lh-name { font-size: 16px; }

/* ---- Triage / vital signs (TRIAGE_SCREEN_SPEC.md) -----------------------
   Built for a nurse expert at vitals and beginner at computers: one column,
   48px+ targets, feedback as an icon AND a sentence, one primary button. */
/* Full page width, like the consultation screen: the three steps sit side
   by side (danger signs · vitals · result), still read left to right in the
   order the work happens. Collapses back to one column on small screens. */
.triage-wrap { display: flex; flex-direction: column; gap: 14px; }
.triage-wrap .tri-tabs { margin-bottom: 0; }

.tri-grid {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr) minmax(300px, 360px);
  gap: 14px; align-items: start;
}
.tri-grid[hidden] { display: none; }
.tri-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tri-col .tri-step { margin-bottom: 0; }
/* The result column stays in view while the nurse works down the vitals. */
.tri-side { position: sticky; top: 14px; }

/* Vitals laid out horizontally inside the middle column. */
.tri-vitals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0 26px;
}
.tri-vitals-grid .vital.wide { grid-column: 1 / -1; }

@media (max-width: 1180px) {
  .tri-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, 340px); }
  .tri-grid .tri-col:first-child { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .tri-grid { grid-template-columns: 1fr; }
  .tri-side { position: static; }
}

.tri-step {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); margin-bottom: 14px; overflow: hidden;
}
.tri-step-hd {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--line-soft);
  background: var(--surface-2);
}
.tri-step-hd .n {
  width: 26px; height: 26px; border-radius: 50%; background: var(--blue);
  color: #fff; font-weight: 800; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.tri-step-hd h2 { font-size: 15px; letter-spacing: .3px; }
.tri-step-hd .sw { font-size: 12px; color: var(--ink-4); font-weight: 400; }
.tri-step-bd { padding: 14px 16px; }

/* Danger signs: whole row is the tap target. */
.dsign {
  display: flex; align-items: center; gap: 12px;
  min-height: 52px; padding: 6px 12px; margin: 6px 0;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  cursor: pointer; user-select: none; background: var(--surface);
}
.dsign input { width: 24px; height: 24px; accent-color: var(--urgent); flex: 0 0 auto; }
.dsign .en { font-weight: 600; }
.dsign .sw { display: block; font-size: 12px; color: var(--ink-4); }
.dsign.on { border-color: var(--urgent); background: var(--urgent-bg); }
.dsign.none-opt input { accent-color: var(--ok); }
.dsign.none-opt.on { border-color: var(--ok-line); background: var(--ok-bg); }

/* One vital = label, big input, feedback sentence. */
.vital { padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.vital:last-child { border-bottom: 0; }
.vital .vlbl { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.vital .vlbl .en { font-weight: 700; font-size: 15px; }
.vital .vlbl .sw { font-size: 12.5px; color: var(--ink-4); }
.vital .vlbl .unit { margin-left: auto; font-size: 13px; color: var(--ink-3); font-weight: 600; }
.vital .vhint { font-size: 12px; color: var(--ink-4); margin: -2px 0 6px; }
.tri-inp {
  height: 38px; width: 130px; padding: 0 9px;
  font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
}
.tri-inp:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-wash); }
.tri-inp.bad { border-color: var(--urgent); background: var(--urgent-bg); }
.vrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vrow .slash { font-size: 26px; color: var(--ink-4); }

/* The sentence next to the value — icon AND words, never colour alone. */
.vfb { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; }
.vfb .ico { font-size: 15px; }
.vfb.green  { color: var(--ok); }
.vfb.orange { color: var(--wait); }
.vfb.red    { color: var(--urgent); }
.vfb.bad    { color: var(--urgent); }
.vfb.quiet  { color: var(--ink-4); font-weight: 400; }

.tri-derived {
  display: flex; align-items: baseline; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px dashed var(--line);
  font-size: 14px;
}
.tri-derived .k { font-weight: 700; }
.tri-derived .v { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* Result banner */
.tri-result { border-radius: var(--radius-sm); border: 2px solid; padding: 14px 16px; }
.tri-result .verdict { font-size: 18px; font-weight: 800; display: flex; gap: 10px; align-items: center; }
.tri-result .verdict .sw { font-size: 13px; font-weight: 600; opacity: .85; }
.tri-result .because { margin: 8px 0 0 2px; font-size: 14px; }
.tri-result .because li { margin: 3px 0 3px 18px; }
.tri-result.EMERGENCY { border-color: var(--urgent-line); background: var(--urgent-bg); color: var(--urgent); }
.tri-result.PRIORITY  { border-color: var(--wait-line); background: var(--wait-bg); color: var(--wait); }
.tri-result.ROUTINE   { border-color: var(--ok-line); background: var(--ok-bg); color: var(--ok); }
.tri-result.pending   { border-color: var(--line); background: var(--surface-2); color: var(--ink-4); }

.tri-override { margin-top: 10px; }
.tri-override .choices { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.tri-acuity-btn {
  min-height: 48px; padding: 8px 18px; font-size: 15px; font-weight: 700;
  border-radius: var(--radius-sm); border: 2px solid var(--line);
  background: var(--surface); cursor: pointer;
}
.tri-acuity-btn.EMERGENCY.on { border-color: var(--urgent); background: var(--urgent-bg); color: var(--urgent); }
.tri-acuity-btn.PRIORITY.on  { border-color: var(--wait); background: var(--wait-bg); color: var(--wait); }
.tri-acuity-btn.ROUTINE.on   { border-color: var(--ok); background: var(--ok-bg); color: var(--ok); }

/* Send to — radios as big buttons */
.tri-sendto { display: flex; gap: 10px; flex-wrap: wrap; }
.tri-sendto label {
  flex: 1 1 140px; min-height: 52px; display: flex; align-items: center; gap: 10px;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  padding: 8px 14px; cursor: pointer; font-weight: 700;
}
.tri-sendto label .sw { display: block; font-size: 12px; color: var(--ink-4); font-weight: 400; }
.tri-sendto input { width: 22px; height: 22px; accent-color: var(--blue); }
.tri-sendto label.on { border-color: var(--blue); background: var(--blue-wash); }

/* One primary button, always visible — it lives in the sticky result
   column on wide screens, and pins to the bottom when that column stacks. */
.tri-savebar { padding: 2px 0; }
@media (max-width: 860px) {
  .tri-savebar {
    position: sticky; bottom: 0; z-index: 25;
    background: linear-gradient(to top, var(--bg) 75%, transparent);
    padding: 12px 0 8px;
  }
}
.tri-save {
  width: 100%; min-height: 58px; font-size: 19px; font-weight: 800;
  letter-spacing: .5px; border: 0; border-radius: var(--radius);
  background: var(--ok); color: #fff; cursor: pointer; box-shadow: var(--shadow);
}
.tri-save:hover { filter: brightness(1.06); }
.tri-save:disabled { background: var(--ink-faint); cursor: not-allowed; }
.tri-save-msg { text-align: center; font-size: 14px; font-weight: 600; margin-top: 8px; }
.tri-save-msg.err { color: var(--urgent); }
.tri-save-msg.ok { color: var(--ok); }

/* History tab — five columns, acuity-tinted, tap to open the rest. */
.tri-hist tr.h-row { cursor: pointer; }
.tri-hist tr.h-EMERGENCY td { box-shadow: inset 3px 0 0 var(--urgent); background: var(--urgent-bg); }
.tri-hist tr.h-PRIORITY  td { box-shadow: inset 3px 0 0 var(--wait); background: var(--wait-bg); }
.tri-hist tr.h-ROUTINE   td { box-shadow: inset 3px 0 0 var(--ok); }
.tri-hist .h-detail td { background: var(--surface-2); font-size: 13px; padding: 10px 14px; }
.tri-hist .h-detail .kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 6px 18px; }
.tri-hist .h-detail .kv .k { color: var(--ink-4); font-size: 11px; text-transform: uppercase; letter-spacing: .6px; }
.tri-trend-down { color: var(--urgent); font-weight: 700; }
.tri-trend-up { color: var(--ok); font-weight: 700; }

.tri-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.tri-tab {
  min-height: 46px; padding: 8px 22px; font-size: 15px; font-weight: 700;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); cursor: pointer; color: var(--ink-3);
}
.tri-tab.on { background: var(--blue); border-color: var(--blue); color: #fff; }

/* ---- Imaging: upload area and thumbnail wall --------------------------- */
.img-drop {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  border: 2px dashed var(--line); border-radius: 8px;
  padding: 16px; background: var(--surface-2);
  transition: border-color .12s, background .12s;
}
.img-drop.over { border-color: var(--blue); background: var(--blue-wash); }
.img-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.img-tile { margin: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #000; }
.img-tile img { display: block; width: 100%; height: 140px; object-fit: contain; background: #000; }
.img-tile .img-file {
  display: flex; align-items: center; justify-content: center; height: 140px;
  color: #fff; font-weight: 700; letter-spacing: .5px; text-decoration: none;
}
.img-tile figcaption {
  background: var(--surface); color: var(--ink-4);
  font-size: 11px; padding: 6px 8px; display: flex; flex-direction: column; gap: 4px;
}

/* ---- Imaging report layout --------------------------------------------- */
.irep { padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.irep:last-child { border-bottom: 0; }
.irep-hd { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-bottom: 8px; }
.irep-title { font-size: 14px; }
.irep-sect {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .9px;
  color: var(--ink-4); margin: 12px 0 4px;
}
.irep-body { font-size: 13px; line-height: 1.6; margin: 0; white-space: pre-wrap; }
/* The impression is the sentence the clinician acts on, so it is the one
   part of the report that is set apart rather than run together. */
.irep-impression {
  font-weight: 600; background: var(--blue-wash); border-left: 3px solid var(--blue);
  padding: 8px 11px; border-radius: 0 5px 5px 0;
}
.irep-meta { display: grid; grid-template-columns: 130px 1fr; gap: 3px 12px; margin: 0; font-size: 13px; }
.irep-meta dt { color: var(--ink-4); font-size: 12px; }
.irep-meta dd { margin: 0; }
.irep-facts { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; }
.irep-facts .k {
  display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .7px;
  color: var(--ink-4); font-weight: 700;
}
.irep-biometry { margin-top: 6px; }
.irep-sig { margin-top: 10px; font-size: 12px; color: var(--ink-4); }

/* ---- Image viewer ------------------------------------------------------ */
.iv { position: fixed; inset: 0; z-index: 200; background: rgba(8, 12, 18, .94);
      display: flex; flex-direction: column; }
.iv[hidden] { display: none; }
.iv-bar {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 10px 14px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 13px;
}
.iv-caption { font-weight: 700; }
.iv-count { color: #b9c6d4; font-size: 12px; }
.iv-btn {
  border: 1px solid rgba(255,255,255,.35); background: transparent; color: #fff;
  border-radius: 5px; padding: 5px 11px; font-size: 13px; font-weight: 600;
  cursor: pointer; text-decoration: none; line-height: 1.4;
}
.iv-btn:hover { background: rgba(255,255,255,.14); }
.iv-stage { flex: 1; display: flex; align-items: center; justify-content: center;
            overflow: hidden; }
.iv-stage img {
  max-width: 96%; max-height: 100%; transform-origin: center center;
  cursor: grab; user-select: none; -webkit-user-drag: none;
}
.iv-stage img:active { cursor: grabbing; }
.iv-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  border: 0; background: rgba(0,0,0,.45); color: #fff;
  font-size: 34px; line-height: 1; padding: 10px 16px; cursor: pointer;
}
.iv-nav:hover { background: rgba(0,0,0,.7); }
.iv-prev { left: 0; border-radius: 0 6px 6px 0; }
.iv-next { right: 0; border-radius: 6px 0 0 6px; }
.img-tile a { cursor: zoom-in; }
@media print { .iv { display: none !important; } }

/* ---- NHIF folio: submission steps -------------------------------------- */
.submit-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.submit-steps li {
  counter-increment: step;
  display: flex; gap: 12px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--line-soft);
}
.submit-steps li:last-child { border-bottom: 0; }
.submit-steps li::before {
  content: counter(step);
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--line); color: var(--ink-4);
  font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.submit-steps li > div { flex: 1 1 auto; min-width: 0; }
.submit-steps li > button { flex: 0 0 auto; }

/* ---- Reports overview: KPI cards --------------------------------------- */
.kpi-grid {
  display: grid; gap: 1px; background: var(--line-soft);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  border-top: 1px solid var(--line-soft);
}
.kpi { background: var(--surface); padding: 12px 16px 13px; }
.kpi-k { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase;
         letter-spacing: .8px; color: var(--ink-4); }
.kpi-v { display: block; font-size: 24px; font-weight: 700; color: var(--ink);
         line-height: 1.25; margin: 2px 0 1px; font-variant-numeric: tabular-nums; }
.kpi-grid--small .kpi-v { font-size: 19px; }
.kpi-n { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
         font-size: 11px; color: var(--ink-4); }
/* The comparison is the point of the card, so it is coloured by whether the
   movement is good — which is not the same as whether it went up. */
.kpi-delta { font-weight: 700; font-size: 11px; }
.kpi-delta.up   { color: var(--ok); }
.kpi-delta.down { color: var(--urgent); }
.kpi-delta.flat, .kpi-delta.new { color: var(--ink-4); }

.two-up { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }

.report-links { display: grid; gap: 18px;
                grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.report-link {
  display: block; padding: 9px 11px; margin-bottom: 6px; text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
}
.report-link:hover { border-color: var(--blue); background: var(--blue-wash); }
.report-link strong { display: block; font-size: 13px; }
.report-link .num { font-size: 11px; }

/* ---- Pager ------------------------------------------------------------- */
.pager {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 11px 16px; border-top: 1px solid var(--line-soft);
}
.pager-nums { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.pager .is-off { opacity: .45; pointer-events: none; }
@media print { .pager { display: none; } }

/* ---- Consultation layout and side rail ---------------------------------
   The rail is sticky AND bounded. Sticky alone creates no scroll container,
   so a rail taller than the viewport simply had nowhere to put its overflow
   and the bottom of it was unreachable. */
.consultation-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 14px;
  /* Not stretch: a stretched child is already as tall as the row, which
     leaves sticky nothing to do. This is the line that makes it work. */
  align-items: start;
}

.side-panel {
  display: flex; flex-direction: column; gap: 14px;
  position: sticky;
  top: var(--header-height, 114px);
  max-height: calc(100vh - var(--header-height, 114px) - 16px);
  overflow-y: auto;
  overscroll-behavior: contain;   /* the page must not scroll at the ends */
  scrollbar-gutter: stable;       /* the bar never shifts the content */
  padding-right: 4px;
}
/* A card inside the rail: a FIXED height, always the same, with its
   scrollbar always drawn.

   The cap this replaces was invisible on a card that happened to fit, so
   the panel looked different from patient to patient and a doctor could
   not tell a short list from a truncated one. A fixed frame is honest in
   both directions: the rail is the same shape on every record, and a
   scrollbar that is always present says "this is a window onto a list"
   whether or not there is more today. */
.side-scroll {
  height: 240px;                  /* the frame, not a ceiling */
  overflow-y: scroll;             /* scroll, not auto — the bar always shows */
  overscroll-behavior: contain;   /* the rail must not jump when it ends */
}
/* The order buttons are a grid, not a list: they need the whole set in
   view, because a half-visible row of buttons reads as broken. */
.side-scroll--tall { height: 330px; }

/* Always visible — verified against a screenshot, because the first
   attempt (light grey on near-white) could not be seen in one. The track
   is drawn even when the content fits, so an empty card still reads as a
   window onto a list. Chrome honours scrollbar-color and then ignores the
   ::-webkit rules; both are kept in agreement for the engines that don't. */
.side-scroll { scrollbar-width: thin; scrollbar-color: #97a6b6 #e3e9f0; }
.side-scroll::-webkit-scrollbar { width: 10px; }
.side-scroll::-webkit-scrollbar-track {
  background: #e3e9f0; border-radius: 5px;
}
.side-scroll::-webkit-scrollbar-thumb {
  background: #97a6b6; border-radius: 5px;
  border: 2px solid #e3e9f0; background-clip: content-box;
}
.side-scroll::-webkit-scrollbar-thumb:hover {
  background: #6d7f91; background-clip: content-box;
}

/* A shadow at whichever edge still has content beyond it. Pure CSS: the
   `local` layers scroll with the content and cover the fixed ones once
   that end is reached, so a card that fits draws none. */
.side-scroll {
  background:
    linear-gradient(var(--surface) 30%, transparent) top    / 100% 18px no-repeat local,
    linear-gradient(transparent, var(--surface) 70%) bottom / 100% 18px no-repeat local,
    radial-gradient(farthest-side at 50% 0,
                    rgba(15,25,35,.14), transparent) top    / 100% 7px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%,
                    rgba(15,25,35,.14), transparent) bottom / 100% 7px no-repeat scroll;
  background-color: var(--surface);
}

.side-panel { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.side-panel::-webkit-scrollbar { width: 9px; }
.side-panel::-webkit-scrollbar-track { background: transparent; }
.side-panel::-webkit-scrollbar-thumb {
  background: var(--line); border-radius: 5px;
  border: 2px solid transparent; background-clip: content-box;
}
.side-panel::-webkit-scrollbar-thumb:hover {
  background: var(--ink-faint); background-clip: content-box;
}

/* A sticky side rail is wrong on a narrow screen: below the breakpoint it
   becomes an ordinary block under the record. 900px, not 1024: a 1366px
   laptop zoomed to 125-150%% is 910-1093px of effective viewport, and at
   1024 those real desktops were losing the rail and the card frames —
   which read as "the scroll cards do not work". */
@media (max-width: 900px) {
  .consultation-layout { grid-template-columns: 1fr; }
  .side-panel {
    position: static; max-height: none; overflow: visible; padding-right: 0;
  }
  /* The cards KEEP their 240px frames when stacked — a released card
     with forty doses would make the stacked page three screens long
     before the notes even start. Only paper releases them. */
}
@media print {
  .consultation-layout { display: block; }
  .side-panel { position: static; max-height: none; overflow: visible; }
  /* On paper a scroll area clips — there is no bar to drag. */
  .side-scroll, .side-scroll--tall { height: auto; overflow: visible; }
}