/* ============================================================
   HIKMA Design System v2
   Non-invasive: NO global resets, NO body overrides.
   Only defines sidebar, top bar, and opt-in utility classes.
   Pages keep their own CSS — this file is purely additive.
   ============================================================ */

/* ── Shared Tokens (available to all pages, never forced) ──── */
:root {
  --hk-navy:          #1b3a6b;
  --hk-navy-dark:     #122a52;
  --hk-navy-light:    #2a4f8f;
  --hk-accent:        #1d6faf;
  --hk-accent-hover:  #155f97;
  --hk-ok:            #2e7d32;
  --hk-ok-bg:         #e8f5e9;
  --hk-warn:          #b45309;
  --hk-warn-bg:       #fef3c7;
  --hk-breach:        #c62828;
  --hk-breach-bg:     #ffebee;
  --hk-sidebar-w:     240px;
}

/* ── Sidebar ──────────────────────────────────────────────── */
.hk-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--hk-sidebar-w);
  background: var(--hk-navy);
  color: #fff;
  display: flex;
  flex-direction: column;
  z-index: 200;
  overflow-y: auto;
  overflow-x: hidden;
  font-family: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
  transition: transform .25s ease;
}

.hk-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 199;
}
.hk-sidebar-overlay.open { display: block; }

.hk-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  flex-shrink: 0;
}

.hk-sidebar-logo {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(255,255,255,.15);
  border: 2px solid rgba(255,255,255,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
  color: #fff;
  flex-shrink: 0;
}

.hk-sidebar-title {
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 2px;
  color: #fff;
}

.hk-sidebar-section {
  padding: 6px 20px;
  font-size: 10px;
  color: rgba(255,255,255,.4);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
  margin-top: 10px;
}

.hk-sidebar-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hk-sidebar-item {
  display: block;
}

.hk-sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  color: rgba(255,255,255,.65);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: all .15s;
  border-left: 3px solid transparent;
}

.hk-sidebar-link:hover {
  background: rgba(255,255,255,.08);
  color: #fff;
}

.hk-sidebar-link.active {
  background: rgba(255,255,255,.12);
  color: #fff;
  border-left-color: #fff;
  font-weight: 700;
}

.hk-sidebar-link .icon {
  width: 20px;
  text-align: center;
  font-size: 14px;
  flex-shrink: 0;
}

.hk-sidebar-footer {
  margin-top: auto;
  padding: 14px 20px;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: 12px;
  flex-shrink: 0;
}

.hk-sidebar-user {
  margin-bottom: 8px;
  font-size: 12px;
  color: rgba(255,255,255,.7);
}
.hk-sidebar-user strong { color: #fff; }

.hk-sidebar-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hk-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  display: inline-block;
  animation: hk-pulse 2s infinite;
  box-shadow: 0 0 6px #4ade80;
}
@keyframes hk-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

.hk-logout-btn {
  background: rgba(185,28,28,.85);
  border: 1px solid #b91c1c;
  color: #fff;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s;
}
.hk-logout-btn:hover { background: #b91c1c; }

/* ── Hamburger Button (hidden on desktop) ─────────────────── */
.hk-hamburger {
  display: none;
  background: none;
  border: none;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  padding: 6px 10px;
  line-height: 1;
}

/* ── Desktop: push body content right ─────────────────────── */
@media (min-width: 1025px) {
  body.hk-has-sidebar {
    margin-left: var(--hk-sidebar-w) !important;
  }
  .hk-hamburger { display: none !important; }
}

/* ── Mobile/Tablet: sidebar slides in as overlay ──────────── */
@media (max-width: 1024px) {
  .hk-sidebar {
    transform: translateX(-100%);
  }
  .hk-sidebar.open {
    transform: translateX(0);
  }
  .hk-hamburger {
    display: inline-block;
  }
  body.hk-has-sidebar {
    margin-left: 0 !important;
  }
}

/* ── RTL Support ──────────────────────────────────────────── */
[dir="rtl"] .hk-sidebar {
  left: auto;
  right: 0;
}
[dir="rtl"] .hk-sidebar-link {
  border-left: none;
  border-right: 3px solid transparent;
}
[dir="rtl"] .hk-sidebar-link.active {
  border-right-color: #fff;
}
@media (min-width: 1025px) {
  [dir="rtl"] body.hk-has-sidebar {
    margin-left: 0 !important;
    margin-right: var(--hk-sidebar-w) !important;
  }
}
@media (max-width: 1024px) {
  [dir="rtl"] .hk-sidebar {
    transform: translateX(100%);
  }
  [dir="rtl"] .hk-sidebar.open {
    transform: translateX(0);
  }
}

/* ── Print: hide sidebar ──────────────────────────────────── */
@media print {
  .hk-sidebar, .hk-sidebar-overlay, .hk-hamburger { display: none !important; }
  body.hk-has-sidebar { margin-left: 0 !important; margin-right: 0 !important; }
}

/* ── Hide old portal button (sidebar replaces it) ─────────── */
#hikma-portal-btn { display: none !important; }

/* ── Scrollable header nav on tablet/narrow screens ───────── */
@media (max-width: 1200px) {
  .header-right,
  .topbar-right {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
  }
  .header-right::-webkit-scrollbar,
  .topbar-right::-webkit-scrollbar { display: none; }

  .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs .tab, .tabs-bar .tab, .tab-btn { white-space: nowrap; }
}

/* ── Sticky Patient Banner (Epic/Cerner-style Storyboard) ──── */
/* Rendered by hikma-patient-banner.js when a patient is selected.
   Sits above the page topbar so the selected patient follows the
   user across intake → clinical → discharge → billing, etc.      */

:root {
  --hk-pb-h: 48px;
}

.hk-patient-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--hk-pb-h);
  background: linear-gradient(180deg, #0f2550 0%, #1b3a6b 100%);
  color: #fff;
  z-index: 250;                 /* above sidebar (200) and all page headers */
  display: flex;
  align-items: stretch;
  font-family: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
  cursor: pointer;              /* clickable → /clinical.html?enc={id} */
  transition: background .15s;
}
.hk-patient-banner:hover {
  background: linear-gradient(180deg, #13306a 0%, #224a8a 100%);
}

/* On desktop, banner respects the sidebar width */
@media (min-width: 1025px) {
  .hk-patient-banner { left: var(--hk-sidebar-w); }
  [dir="rtl"] .hk-patient-banner { left: 0; right: var(--hk-sidebar-w); }
}

.hk-pb-inner {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 16px;
  min-width: 0;
}

.hk-pb-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
}

.hk-pb-name {
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}

.hk-pb-meta {
  font-size: 12px;
  color: rgba(255,255,255,.78);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

.hk-pb-sep {
  color: rgba(255,255,255,.3);
  font-size: 12px;
  flex-shrink: 0;
}

.hk-pb-chip {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
  flex-shrink: 0;
}
.hk-pb-chip-allergy {
  background: var(--hk-breach);
  color: #fff;
  border: 1px solid #ff6b6b;
}
.hk-pb-chip-state {
  background: rgba(255,255,255,.15);
  color: #fff;
  border: 1px solid rgba(255,255,255,.25);
}

.hk-pb-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  flex-shrink: 0;
}

.hk-pb-close {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
.hk-pb-close:hover { background: rgba(220,38,38,.85); border-color: #b91c1c; }

/* When banner is present, shift body content down and nudge any
   existing page-level sticky header below the banner.            */
body.hk-has-patient-banner {
  padding-top: var(--hk-pb-h) !important;
}
body.hk-has-patient-banner > header,
body.hk-has-patient-banner .topbar {
  top: var(--hk-pb-h) !important;
}

/* Mobile: sidebar is overlay so banner spans full width; slim the meta */
@media (max-width: 1024px) {
  .hk-pb-name { max-width: 140px; font-size: 13px; }
  .hk-pb-meta { font-size: 11px; }
  .hk-pb-inner { gap: 10px; padding: 0 12px; }
  .hk-pb-chip { font-size: 10px; padding: 1px 6px; }
}

/* Print: hide the banner (charts print without it) */
@media print {
  .hk-patient-banner { display: none !important; }
  body.hk-has-patient-banner { padding-top: 0 !important; }
}

/* ============================================================================
   Phase 2 — Critical-result red banner + acknowledgment modal
   ============================================================================
   Docks immediately beneath the patient banner. Requires action-taken entry;
   cannot be silently dismissed. Used by /hikma-critical-banner.js.
*/

:root {
  --hk-cb-h: 40px;
  --hk-cb-red: #b42318;
  --hk-cb-red-deep: #7f1d1d;
}

.hk-critical-banner {
  position: fixed;
  top: var(--hk-pb-h);                 /* dock below patient banner (48px) */
  left: 0; right: 0;
  height: var(--hk-cb-h);
  background: linear-gradient(180deg, var(--hk-cb-red) 0%, var(--hk-cb-red-deep) 100%);
  color: #fff;
  z-index: 249;                         /* one below patient banner */
  display: flex;
  align-items: center;
  box-shadow: 0 2px 8px rgba(127,29,29,.35);
  animation: hk-cb-slide-in .28s cubic-bezier(.22,.61,.36,1);
  font: 500 13px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@keyframes hk-cb-slide-in {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);      opacity: 1; }
}

/* Desktop: keep banner within the main column (respect sidebar) */
@media (min-width: 1025px) {
  .hk-critical-banner { left: var(--hk-sidebar-w, 240px); }
  [dir="rtl"] .hk-critical-banner { left: 0; right: var(--hk-sidebar-w, 240px); }
}

.hk-cb-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  width: 100%;
  max-width: 100%;
}

.hk-cb-icon {
  font-size: 16px;
  line-height: 1;
  opacity: .95;
}
.hk-cb-label {
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.35);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hk-cb-test     { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.hk-cb-value    { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.hk-cb-time     { opacity: .82; font-size: 12px; white-space: nowrap; }
.hk-cb-spacer   { flex: 1 1 auto; }
.hk-cb-counter  {
  background: rgba(0,0,0,.22);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.hk-cb-ack-btn {
  background: #fff;
  color: var(--hk-cb-red-deep);
  border: none;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: .02em;
  white-space: nowrap;
  transition: background .12s, transform .08s;
}
.hk-cb-ack-btn:hover  { background: #fee2e2; }
.hk-cb-ack-btn:active { transform: translateY(1px); }

.hk-cb-chime-toggle {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.3);
  width: 28px; height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  padding: 0;
  transition: background .12s;
}
.hk-cb-chime-toggle:hover { background: rgba(255,255,255,.14); }

/* Push content down when critical banner is present (in addition to patient banner) */
body.hk-has-critical-banner { padding-top: calc(var(--hk-pb-h) + var(--hk-cb-h)) !important; }
body.hk-has-critical-banner > header,
body.hk-has-critical-banner .topbar { top: calc(var(--hk-pb-h) + var(--hk-cb-h)) !important; }

/* If patient banner is not present, critical banner docks at the very top */
body:not(.hk-has-patient-banner) .hk-critical-banner { top: 0; }
body:not(.hk-has-patient-banner).hk-has-critical-banner { padding-top: var(--hk-cb-h) !important; }

/* Mobile */
@media (max-width: 1024px) {
  .hk-cb-test   { max-width: 120px; font-size: 12px; }
  .hk-cb-value  { font-size: 12px; }
  .hk-cb-time   { display: none; }
  .hk-cb-inner  { gap: 8px; padding: 0 10px; }
  .hk-cb-ack-btn { padding: 5px 9px; font-size: 11px; }
}

/* Print: never print critical banner or modal */
@media print {
  .hk-critical-banner,
  .hk-critical-modal-backdrop,
  .hk-critical-toast { display: none !important; }
  body.hk-has-critical-banner { padding-top: 0 !important; }
}

/* ── Acknowledgment modal ──────────────────────────────────────────────────── */

.hk-critical-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(2px);
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  animation: hk-cm-fade-in .18s ease-out;
  padding: 16px;
}
@keyframes hk-cm-fade-in { from { opacity: 0; } to { opacity: 1; } }

.hk-critical-modal {
  background: #fff;
  border-radius: 10px;
  max-width: 520px;
  width: 100%;
  box-shadow: 0 18px 50px rgba(0,0,0,.28), 0 0 0 1px rgba(180,35,24,.25);
  overflow: hidden;
  animation: hk-cm-pop-in .22s cubic-bezier(.2,.8,.3,1.1);
}
@keyframes hk-cm-pop-in {
  from { transform: translateY(12px) scale(.97); opacity: 0; }
  to   { transform: translateY(0)    scale(1);   opacity: 1; }
}

.hk-critical-modal-header {
  background: linear-gradient(180deg, var(--hk-cb-red) 0%, var(--hk-cb-red-deep) 100%);
  color: #fff;
  padding: 16px 20px 14px;
  display: flex; align-items: center; gap: 10px;
}
.hk-critical-modal-header h2 {
  margin: 0; font-size: 17px; font-weight: 600; line-height: 1.25;
}
.hk-cm-pill {
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.35);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}

.hk-critical-modal-meta {
  padding: 14px 20px;
  background: #fef2f2;
  border-bottom: 1px solid #fee2e2;
  font-size: 13px;
}
.hk-critical-modal-meta > div { margin-bottom: 4px; }
.hk-cm-value  { font-variant-numeric: tabular-nums; color: var(--hk-cb-red-deep); font-weight: 700; }
.hk-cm-narr   { color: #4b5563; margin-top: 6px !important; font-style: italic; line-height: 1.45; }

.hk-cm-body {
  padding: 14px 20px 0;
  font-size: 13px;
  color: #374151;
  margin: 0;
}

.hk-cm-form { padding: 12px 20px 18px; }
.hk-cm-label { display: block; margin-top: 12px; font-size: 12px; color: #374151; font-weight: 600; }
.hk-cm-label > span { display: block; margin-bottom: 4px; }
.hk-cm-label input,
.hk-cm-label textarea {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  background: #fff;
  color: #111827;
  box-sizing: border-box;
  transition: border-color .12s, box-shadow .12s;
}
.hk-cm-label input:focus,
.hk-cm-label textarea:focus {
  outline: none;
  border-color: var(--hk-cb-red);
  box-shadow: 0 0 0 3px rgba(180,35,24,.15);
}
.hk-cm-label textarea { resize: vertical; min-height: 80px; }

.hk-cm-error {
  margin-top: 10px;
  color: var(--hk-cb-red-deep);
  font-size: 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  padding: 6px 10px;
  border-radius: 6px;
}

.hk-cm-buttons {
  display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px;
}
.hk-cm-cancel,
.hk-cm-submit {
  border: none; border-radius: 6px; padding: 9px 16px;
  font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit;
  transition: background .12s, opacity .12s;
}
.hk-cm-cancel { background: #f3f4f6; color: #374151; }
.hk-cm-cancel:hover { background: #e5e7eb; }
.hk-cm-submit { background: var(--hk-cb-red); color: #fff; }
.hk-cm-submit:hover { background: var(--hk-cb-red-deep); }
.hk-cm-submit:disabled,
.hk-cm-cancel:disabled { opacity: .6; cursor: wait; }

/* RTL alignment for modal buttons */
[dir="rtl"] .hk-cm-buttons { justify-content: flex-start; }

/* ── Toast confirmation after acknowledgment ────────────────────────────────*/

.hk-critical-toast {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(14px);
  background: #064e3b;
  color: #ecfdf5;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13px; font-weight: 600;
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
  z-index: 1001;
  opacity: 0;
  transition: transform .3s cubic-bezier(.2,.8,.3,1), opacity .3s;
  max-width: 90vw;
}
.hk-critical-toast--in {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============================================================================
   Phase 3 — Tabular numerics for lab, vital, and dose columns
   ============================================================================
   Makes stacked numeric values digit-aligned so "6.8", "145", "2.45" share
   the same column width. Adds opt-in utilities plus lab-flag coloring.
   Reference: Epic/Cerner clinical-display conventions.

   Safe by default: only targets data-display surfaces (tables, cards, inputs,
   meters, and elements that explicitly opt in via .hk-tnum). Prose remains
   untouched.
*/

/* ── Global baseline ──────────────────────────────────────────────────────── */

/* Every table cell in HIKMA pages is a candidate for numerics. Applying
   tabular-nums here is a no-op on text content and a visual win on numbers. */
table td,
table th {
  font-variant-numeric: tabular-nums slashed-zero;
}

/* Form number inputs should always align */
input[type="number"],
input[type="tel"] {
  font-variant-numeric: tabular-nums slashed-zero;
}

/* Time elements and explicit time-like widgets */
time,
.hk-time,
.hk-clock {
  font-variant-numeric: tabular-nums;
}

/* ── Opt-in utility classes ───────────────────────────────────────────────── */

/* Primary utility — apply anywhere tabular digits are wanted */
.hk-tnum,
.tabular-nums {
  font-variant-numeric: tabular-nums slashed-zero !important;
}

/* Numeric column — right-aligned, tabular, decimal-friendly. Apply on td/th
   or inline values stacked in a column. */
.hk-num-col {
  font-variant-numeric: tabular-nums slashed-zero;
  text-align: right;
  font-feature-settings: "tnum" 1, "zero" 1;
  white-space: nowrap;
  font-variant-ligatures: none;
}
[dir="rtl"] .hk-num-col {
  /* In RTL we still want the digits to read LTR and stack right on the visual
     right edge; numerics are logically a unit so keep text-align: right. */
  text-align: left;
  direction: ltr;
  unicode-bidi: embed;
}

/* Pair a numeric value with its unit — unit gets muted weight and a thin gap */
.hk-num-col .hk-unit,
.hk-num .hk-unit {
  color: #6b7280;
  font-weight: 400;
  margin-left: 3px;
  font-size: .88em;
}
[dir="rtl"] .hk-num-col .hk-unit,
[dir="rtl"] .hk-num .hk-unit { margin-left: 0; margin-right: 3px; }

/* Compact inline numeric display */
.hk-num {
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: "tnum" 1, "zero" 1;
  white-space: nowrap;
}

/* ── Lab result flag colouring (pairs with tabular-nums) ──────────────────── */

.hk-flag-normal   { color: #065f46; }                 /* green-800 */
.hk-flag-abnormal { color: #b45309; font-weight: 600; } /* amber-700 */
.hk-flag-critical { color: #b42318; font-weight: 700; } /* red-700 */
.hk-flag-low::after   { content: " ↓"; font-weight: 600; }
.hk-flag-high::after  { content: " ↑"; font-weight: 600; }
.hk-flag-panic::after { content: " ‼"; font-weight: 700; margin-left: 2px; }

/* Inline chip variant for use in banners, cards, headers */
.hk-flag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.hk-flag-chip.hk-flag-normal   { background: #d1fae5; color: #065f46; }
.hk-flag-chip.hk-flag-abnormal { background: #fef3c7; color: #b45309; }
.hk-flag-chip.hk-flag-critical { background: #fee2e2; color: #b42318; }

/* ── Negative numbers, deltas ─────────────────────────────────────────────── */

.hk-num-col.neg,
.hk-num.neg        { color: #b42318; }
.hk-num-col.pos,
.hk-num.pos        { color: #065f46; }
.hk-num-col.muted,
.hk-num.muted      { color: #9ca3af; }

/* Delta arrows — use on KPI tiles and trend displays */
.hk-delta {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: .9em;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.hk-delta.up::before   { content: "▲"; font-size: .75em; }
.hk-delta.down::before { content: "▼"; font-size: .75em; }
.hk-delta.flat::before { content: "—"; font-size: .85em; }
.hk-delta.up   { color: #065f46; }
.hk-delta.down { color: #b42318; }
.hk-delta.flat { color: #6b7280; }

/* ── Pattern-match auto-apply (opportunistic) ─────────────────────────────── */

/* Any element whose class name strongly implies "this is a number" gets
   tabular-nums without needing a manual class. Intentionally conservative —
   only matches class names that are almost always numeric displays. */
.stat-value, .stat-number, .stat-num,
.kpi-value, .kpi-number, .kpi-num,
.metric-value, .metric-number, .metric-num,
.lab-value, .vital-value, .dose-value,
.result-value,
.value-num, .number-value,
.count-value, .amount-value, .currency-value,
.card-value, .card-number,
.big-number, .big-value,
.percent-value, .percentage {
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: "tnum" 1, "zero" 1;
}

/* Numeric cells in any HIKMA-branded table class */
.hk-table td, .hk-table th,
.data-table td, .data-table th,
.lab-table td, .lab-table th,
.vitals-table td, .vitals-table th,
.orders-table td, .orders-table th {
  font-variant-numeric: tabular-nums slashed-zero;
}

/* Align any td whose class says "numeric" */
td.num, td.number, td.numeric, td.value,
th.num, th.number, th.numeric, th.value,
td.hk-num-col, th.hk-num-col {
  text-align: right;
  font-variant-numeric: tabular-nums slashed-zero;
  white-space: nowrap;
}
[dir="rtl"] td.num, [dir="rtl"] td.number, [dir="rtl"] td.numeric, [dir="rtl"] td.value,
[dir="rtl"] th.num, [dir="rtl"] th.number, [dir="rtl"] th.numeric, [dir="rtl"] th.value {
  text-align: left;
  direction: ltr;
}

/* Time columns (charted timestamps, shift schedules) */
td.time, th.time,
td.timestamp, th.timestamp {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Currency rows — keep the symbol tight, digits tabular */
.hk-currency {
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: "tnum" 1, "zero" 1;
  white-space: nowrap;
}
.hk-currency .hk-cur-symbol {
  margin-right: 2px;
  color: #6b7280;
  font-weight: 400;
}
[dir="rtl"] .hk-currency .hk-cur-symbol { margin-right: 0; margin-left: 2px; }

/* ── Print: tabular remains (charts still need to align) ──────────────────── */
@media print {
  table td, table th,
  .hk-num-col, .hk-tnum, .hk-num {
    font-variant-numeric: tabular-nums slashed-zero;
  }
}

/* ============================================================
   Density toggle — Standard vs Compact (Phase 6)

   Managed by hikma-density.js. When the user clicks the FAB,
   <html data-density="compact"> gets set and these rules kick
   in globally. Standard stays untouched (the default everyone
   is already used to).

   Rules target both the design-system classes AND the per-page
   class names we've standardized on (card-header, card-meta,
   card-tasks, task-item, kpi-tile, kanban-col, etc). Pages that
   don't use those names simply won't compact — which is the
   safe failure mode.
   ============================================================ */

/* ── Density FAB (floating toggle button) ─────────────────────────────────── */
.hk-density-fab {
  position: fixed;
  bottom: 16px;
  inset-inline-end: 16px;
  z-index: 240;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--hk-navy, #1b3a6b);
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 2px 8px rgba(0,0,0,.20);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  opacity: .88;
  transition: opacity .15s, transform .15s, background .15s;
}
.hk-density-fab:hover  { opacity: 1; transform: translateY(-1px); background: var(--hk-navy-dark, #122a52); }
.hk-density-fab:active { transform: translateY(0); }
.hk-density-fab[data-active="1"] { background: var(--hk-accent, #1d6faf); }
.hk-density-fab .hk-density-ico { font-size: 14px; line-height: 1; }
.hk-density-fab .hk-density-txt { font-size: 11px; letter-spacing: .02em; }
.hk-density-fab .hk-density-txt b { font-weight: 700; }

@media print {
  .hk-density-fab { display: none !important; }
}

/* ── Compact mode overrides ────────────────────────────────────────────────
   Roughly 25-30% vertical compression. Typography stays the same so nothing
   becomes unreadable — we only tighten whitespace and row heights. */

html[data-density="compact"] {
  /* Tables: nursing/coordinator scan density */
  th, td {
    padding-top:    4px !important;
    padding-bottom: 4px !important;
  }

  /* Kanban cards (discharge page + generic) */
  .patient-card .card-header  { padding: 7px 10px 5px !important; }
  .patient-card .card-meta    { padding: 4px 10px !important; }
  .patient-card .card-eta     { padding: 4px 10px !important; }
  .patient-card .card-clinical{ padding: 4px 10px !important; }
  .patient-card .card-tasks   { padding: 7px 10px !important; }
  .patient-card .card-deps    { padding: 6px 10px !important; }
  .patient-card .card-ai      { padding: 7px 10px !important; }
  .patient-card .card-action  { padding: 7px 10px !important; }

  .task-item { padding: 3px 0 !important; }
  .dep-item  { padding: 1px 0 !important; }

  /* KPI tiles */
  .kpi-tile { padding: 10px 14px !important; }
  .kpi-val  { font-size: 26px !important; line-height: 1.05 !important; }

  /* Kanban column gaps */
  .kanban     { gap: 10px !important; }
  .kanban-col { padding: 10px !important; }
  .col-header { margin-bottom: 9px !important; }
  .col-cards  { gap: 7px !important; }

  /* Section headings */
  .section-heading { margin-bottom: 8px !important; }

  /* Patient banner (Storyboard) — a bit thinner */
  --hk-pb-h: 48px;
}

/* Compact mode — hint the FAB itself is the active control */
html[data-density="compact"] .hk-density-fab {
  background: var(--hk-accent, #1d6faf);
}