/* ═══════════════════════════════════════════════════════════════
   HMS DESIGN SYSTEM v8 — UNIFIED WARM GLASS
   Single background theme, single token set, all modules.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,700;0,9..40,800;0,9..40,900;1,9..40,400&family=DM+Mono:wght@400;500&display=swap');

/* ── TOKENS ───────────────────────────────────────────────────── */
:root {
  /* Background */
  --bg-a: #1a1520;
  --bg-b: #261c2c;
  --bg-c: #2e1f14;

  /* Glass */
  --g0: rgba(255,255,255,.06);
  --g1: rgba(255,255,255,.13);
  --g2: rgba(255,255,255,.21);
  --g3: rgba(255,255,255,.32);
  --g4: rgba(255,255,255,.90);

  /* Borders */
  --bl: rgba(255,255,255,.20);
  --bm: rgba(255,255,255,.30);
  --bs: rgba(148,163,184,.22);
  --bd: rgba(148,163,184,.36);

  /* Text */
  --t1: rgba(15,23,42,.96);
  --t2: rgba(15,23,42,.70);
  --t3: rgba(15,23,42,.45);
  --ti: rgba(255,255,255,.92);
  --ti2:rgba(255,255,255,.60);

  /* Palette */
  --blue:   #2563eb;
  --green:  #16a34a;
  --amber:  #d97706;
  --red:    #dc2626;
  --orange: #ea580c;
  --purple: #7c3aed;
  --teal:   #0891b2;
  --slate:  #64748b;

  /* Bronze CTA */
  --br1: #f0d9b8;
  --br2: #c68448;
  --br3: #7d4a1e;
  --brg: rgba(198,132,72,.30);

  /* Semantic pairs */
  --blue-bg:  rgba(37,99,235,.09);  --blue-br:  rgba(37,99,235,.28);  --blue-tx:  #1e3a8a;
  --grn-bg:   rgba(22,163,74,.09);  --grn-br:   rgba(22,163,74,.28);  --grn-tx:   #14532d;
  --amb-bg:   rgba(245,158,11,.10); --amb-br:   rgba(245,158,11,.30); --amb-tx:   #78350f;
  --red-bg:   rgba(220,38,38,.08);  --red-br:   rgba(220,38,38,.26);  --red-tx:   #7f1d1d;
  --pur-bg:   rgba(124,58,237,.08); --pur-br:   rgba(124,58,237,.26); --pur-tx:   #4c1d95;
  --tl-bg:    rgba(8,145,178,.08);  --tl-br:    rgba(8,145,178,.26);  --tl-tx:    #164e63;
  --org-bg:   rgba(234,88,12,.09);  --org-br:   rgba(234,88,12,.28);  --org-tx:   #7c2d12;

  /* Shadows */
  --sh1: 0 4px 12px rgba(0,0,0,.14);
  --sh2: 0 10px 32px rgba(0,0,0,.18);
  --sh3: 0 22px 64px rgba(0,0,0,.22);
  --shg: 0 0 0 3px var(--brg);

  /* Radii */
  --r1: 8px;  --r2: 12px;  --r3: 16px;
  --r4: 22px; --r5: 28px;  --rf: 999px;

  /* Transitions */
  --tf: .10s cubic-bezier(.22,.68,0,1.2);
  --tm: .18s cubic-bezier(.22,.68,0,1.2);

  /* Workspace width
     Compact is the application default. Data-dense screens may opt into
     body.layout-wide before loading shared/ui/shell.php. */
  --hms-workspace-max: 1200px;
  --hms-workspace-gutter: 16px;

  /* ── LEGACY COMPAT (pharmacy phx-* vars) ── */
  --panel:  var(--g1);
  --panel2: var(--g2);
  --glass:  var(--g2);
  --glass2: var(--g3);
  --border: var(--bs);
  --border2:var(--bl);
  --shadow: var(--sh2);
  --shadow2:var(--sh3);
  --text:   var(--t1);
  --muted:  var(--t2);
  --bronze1:var(--br1);
  --bronze2:var(--br2);
  --bronze3:var(--br3);
  --c-blue:  var(--blue);
  --c-green: var(--green);
  --c-amber: var(--amber);
  --c-red:   var(--red);
  --c-orange:var(--orange);
  --c-purple:var(--purple);
  --c-teal:  var(--teal);
  --c-gray:  var(--slate);
  --accent:  var(--br2);
  --good:    var(--green);
  --warn:    var(--amber);
  --bad:     var(--red);
}

/* ── BASE ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  color: var(--t1);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(ellipse 1400px 700px at 5% -5%,   rgba(198,132,72,.28), transparent 65%),
    radial-gradient(ellipse 1000px 600px at 95% 105%, rgba(124,58,237,.22), transparent 65%),
    radial-gradient(ellipse 800px 500px at 80% 0%,    rgba(255,255,255,.05), transparent 60%),
    linear-gradient(145deg, var(--bg-c) 0%, var(--bg-a) 45%, var(--bg-b) 100%);
  min-height: 100vh;
}

/* ── SHELL ────────────────────────────────────────────────────── */
body.layout-wide  { --hms-workspace-max: 1460px; }
body.layout-fluid { --hms-workspace-max: 1920px; }

.shell {
  width: calc(100% - var(--hms-workspace-gutter) - var(--hms-workspace-gutter));
  max-width: var(--hms-workspace-max);
  margin: 16px auto 40px;
  padding: 18px 20px 26px;
  border-radius: var(--r5);
  border: 1px solid var(--bm);
  border-right-color: rgba(148,163,184,.20);
  border-bottom-color: rgba(148,163,184,.22);
  background: var(--g1);
  box-shadow: var(--sh3), inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  position: relative; overflow: hidden;
}
.shell::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(160deg, rgba(255,255,255,.07) 0%, transparent 55%);
  pointer-events: none;
}
.shell > * { position: relative; min-width: 0; }

/* ── TOPBAR ───────────────────────────────────────────────────── */
.topbar, .rx-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--r4);
  background: var(--g2);
  border: 1px solid var(--bm);
  border-right-color:  rgba(148,163,184,.18);
  border-bottom-color: rgba(148,163,184,.20);
  box-shadow: var(--sh1);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  flex-wrap: wrap;
  position: sticky; top: 10px; z-index: 20;
}
.brand, .rx-brand {
  font-weight: 900; font-size: 12px;
  letter-spacing: .6px; text-transform: uppercase;
  color: var(--ti); opacity: .85; white-space: nowrap;
}
.rx-left { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

/* ── TABS ─────────────────────────────────────────────────────── */
.tabs, .rx-tabs { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.tab, .rx-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: var(--r2);
  text-decoration: none;
  font-weight: 700; font-size: 12.5px; letter-spacing: .08px;
  color: rgba(255,255,255,.75);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  transition: background var(--tf), color var(--tf), transform var(--tf), box-shadow var(--tf);
  white-space: nowrap;
}
.tab:hover, .rx-tab:hover {
  background: rgba(255,255,255,.14); color: rgba(255,255,255,.95);
  transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.tab.active, .rx-tab.active {
  background: linear-gradient(160deg, var(--br1) 0%, var(--br2) 55%, var(--br3) 100%);
  color: #2a1200; border-color: rgba(0,0,0,.12);
  box-shadow: 0 8px 22px var(--brg), 0 2px 6px rgba(0,0,0,.20);
  font-weight: 800;
}
/* Reception sub-nav */
.rx-subtabs { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; padding: 4px 0; }

/* ── SUBBAR ───────────────────────────────────────────────────── */
.subbar {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: var(--r2);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
}

/* ── BUTTONS ──────────────────────────────────────────────────── */
.btn, .phx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--r2);
  border: 1px solid var(--bd);
  background: var(--g4);
  color: var(--t1); font-family: inherit; font-weight: 700; font-size: 12.5px;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: transform var(--tf), box-shadow var(--tf), background var(--tf);
  box-shadow: var(--sh1);
}
.btn:hover, .phx-btn:hover { transform: translateY(-1px); box-shadow: var(--sh2); }
.btn:active, .phx-btn:active { transform: translateY(0); box-shadow: var(--sh1); }
.btn.primary, .phx-btn.primary, .btn.bronze {
  background: linear-gradient(160deg, var(--br1) 0%, var(--br2) 55%, var(--br3) 100%);
  border-color: rgba(0,0,0,.14); color: #1e0e00; font-weight: 800;
  box-shadow: 0 6px 20px var(--brg), var(--sh1);
}
.btn.primary:hover, .phx-btn.primary:hover, .btn.bronze:hover {
  box-shadow: 0 12px 32px var(--brg), var(--sh2);
}
.btn.blue    { background: var(--blue-bg);  border-color: var(--blue-br); color: var(--blue-tx); }
.btn.success { background: var(--grn-bg);   border-color: var(--grn-br);  color: var(--grn-tx);  }
.btn.danger, .btn.bad { background: var(--red-bg); border-color: var(--red-br); color: var(--red-tx); }
.btn.ghost   { background: rgba(255,255,255,.34); border-color: var(--bs); color: var(--t2); }
.btn.good    { background: var(--grn-bg);   border-color: var(--grn-br);  color: var(--grn-tx);  }
.btn.warn    { background: var(--amb-bg);   border-color: var(--amb-br);  color: var(--amb-tx);  }
.btn-xs      { padding: 3px 9px; border-radius: var(--r1); font-size: 11px; }
.btn.btnSm   { padding: 5px 10px; font-size: 11.5px; border-radius: var(--r1); }

/* ── CARDS ────────────────────────────────────────────────────── */
.card, .phx-card, .phx-wrap {
  background: var(--g2);
  border: 1px solid var(--bm);
  border-right-color:  rgba(148,163,184,.18);
  border-bottom-color: rgba(148,163,184,.20);
  border-radius: var(--r4);
  padding: 16px;
  box-shadow: var(--sh2);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  position: relative; overflow: hidden;
}
.card::before, .phx-card::before {
  content: '';
  position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.08) 0%, transparent 50%);
  pointer-events: none;
}
.card > *, .phx-card > * { position: relative; }
.card h3 { margin: 0 0 10px; font-size: 13.5px; color: var(--t2); font-weight: 800; }

/* ── TABLES ───────────────────────────────────────────────────── */
.table, table.phx-table, table.intel-table, table.cm-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: rgba(255,255,255,.85);
  border: 1px solid var(--bs); border-radius: var(--r3); overflow: hidden;
}
.table th, table.phx-table th, table.intel-table th, table.cm-table th {
  padding: 9px 11px; font-size: 10px; font-weight: 800;
  letter-spacing: .55px; text-transform: uppercase; color: var(--t3);
  background: rgba(248,250,252,.94);
  border-bottom: 1px solid var(--bs);
  white-space: nowrap; text-align: left;
}
.table td, table.phx-table td, table.intel-table td, table.cm-table td {
  padding: 9px 11px; font-size: 12.5px; color: var(--t1);
  border-top: 1px solid rgba(148,163,184,.10); vertical-align: middle;
}
.table tbody tr, table.phx-table tbody tr { transition: background var(--tf); }
.table tbody tr:hover td, table.phx-table tbody tr:hover td { background: rgba(37,99,235,.03); }
.tbl-wrap { overflow-x: auto; border-radius: var(--r3); }

/* ── BADGE SYSTEM ─────────────────────────────────────────────── */
.badge, [class^="badge-"], [class*=" badge-"],
.pill, .phx-pill, .phx-badge, .stateChip, .waitChip, .s-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: var(--rf);
  font-size: 11px; font-weight: 700; white-space: nowrap;
  border: 1px solid var(--bs);
  background: rgba(255,255,255,.60); color: var(--t2);
}
.badge::before, .pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; background: var(--slate); }

/* Semantic badge colors */
.badge.good,.badge.done   { background: var(--grn-bg); border-color: var(--grn-br); color: var(--grn-tx); }
.badge.good::before,.badge.done::before { background: var(--green); }
.badge.warn   { background: var(--amb-bg); border-color: var(--amb-br); color: var(--amb-tx); }
.badge.warn::before { background: var(--amber); }
.badge.blue   { background: var(--blue-bg); border-color: var(--blue-br); color: var(--blue-tx); }
.badge.blue::before { background: var(--blue); }
.badge.bad    { background: var(--red-bg); border-color: var(--red-br); color: var(--red-tx); }
.badge.bad::before  { background: var(--red); }

/* status class badges */
.badge-waiting,.badge-in_queue   { background:var(--amb-bg); border-color:var(--amb-br); color:var(--amb-tx); }
.badge-ready,.badge-ready_for_pharmacy { background:var(--blue-bg); border-color:var(--blue-br); color:var(--blue-tx); }
.badge-doctor_editing             { background:var(--pur-bg); border-color:var(--pur-br); color:var(--pur-tx); }
.badge-pharmacy_editing           { background:var(--tl-bg);  border-color:var(--tl-br);  color:var(--tl-tx);  }
.badge-billing_in_progress        { background:var(--org-bg); border-color:var(--org-br); color:var(--org-tx); }
.badge-billing_done,.badge-completed { background:var(--grn-bg); border-color:var(--grn-br); color:var(--grn-tx); }
.badge-cancelled                  { background:var(--red-bg); border-color:var(--red-br); color:var(--red-tx); }
.badge-billing_reopened_doctor,.badge-billing_reopened_pharmacy,
.badge-billing_reopened_billed,.badge-reopened { background:var(--org-bg); border-color:var(--org-br); color:var(--org-tx); }
.badge-new,.badge-vs-pending      { background:rgba(100,116,139,.07); border-color:rgba(100,116,139,.20); color:#334155; }
.badge-vs-done                    { background:var(--grn-bg); border-color:var(--grn-br); color:var(--grn-tx); }

/* s-pill */
.s-pill::before { content:''; width:6px; height:6px; border-radius:50%; flex-shrink:0; background:var(--slate); }
.s-pill.s-new   { background:var(--amb-bg); border-color:var(--amb-br); color:var(--amb-tx); }
.s-pill.s-new::before { background:var(--amber); }
.s-pill.s-done  { background:var(--grn-bg); border-color:var(--grn-br); color:var(--grn-tx); }
.s-pill.s-done::before { background:var(--green); }
.s-pill.s-bad   { background:var(--red-bg); border-color:var(--red-br); color:var(--red-tx); }
.s-pill.s-bad::before  { background:var(--red); }
.s-pill.s-blue  { background:var(--blue-bg); border-color:var(--blue-br); color:var(--blue-tx); }
.s-pill.s-blue::before { background:var(--blue); }
.s-pill.s-gray  { background:rgba(100,116,139,.08); border-color:rgba(100,116,139,.20); color:#334155; }

/* Wait chips */
.waitChip        { background:rgba(100,116,139,.08); border-color:rgba(100,116,139,.20); color:#334155; }
.waitChip.w-green  { background:var(--grn-bg); border-color:var(--grn-br); color:var(--grn-tx); }
.waitChip.w-amber  { background:var(--amb-bg); border-color:var(--amb-br); color:var(--amb-tx); }
.waitChip.w-orange { background:var(--org-bg); border-color:var(--org-br); color:var(--org-tx); }
.waitChip.w-red    { background:var(--red-bg); border-color:var(--red-br); color:var(--red-tx); }
/* Wait column td alignment */
.wait-td {
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}
.stateChip.live    { background:var(--blue-bg); border-color:var(--blue-br); color:var(--blue-tx); }
.stateChip.final   { background:rgba(100,116,139,.08); border-color:rgba(100,116,139,.20); color:#334155; }

/* ── KPI CARDS ────────────────────────────────────────────────── */
.kpiGrid  { display: grid; gap: 12px; }
.kpiCols3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.kpiCols4 { grid-template-columns: repeat(4,minmax(0,1fr)); }
.kpiCols5 { grid-template-columns: repeat(5,minmax(0,1fr)); }
.kpiCols7 { grid-template-columns: repeat(7,minmax(0,1fr)); }
@media(max-width:1200px){.kpiCols7,.kpiCols5{grid-template-columns:repeat(3,1fr);}}
@media(max-width:900px) {.kpiCols3,.kpiCols4,.kpiCols5,.kpiCols7{grid-template-columns:1fr 1fr;}}

.kpiCard {
  position: relative; overflow: hidden;
  border-radius: var(--r3);
  background: rgba(255,255,255,.92);
  border: 1px solid var(--bs); border-left: 4px solid var(--blue);
  padding: 14px 14px 12px 16px;
  box-shadow: 0 4px 16px rgba(15,23,42,.07);
  transition: box-shadow var(--tm), transform var(--tm);
}
.kpiCard:hover { box-shadow: 0 12px 32px rgba(15,23,42,.13); transform: translateY(-2px); }
.kpiBlue   { border-left-color: var(--blue); }
.kpiGreen  { border-left-color: var(--green); }
.kpiOrange { border-left-color: var(--amber); }
.kpiRed    { border-left-color: var(--red); }
.kpiTop  { display:flex; align-items:center; gap:9px; }
.kpiIcon { width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:10px; border:1px solid var(--bs); background:rgba(255,255,255,.70); font-size:16px; }
.kpiLabel{ font-weight:800; font-size:11.5px; color:var(--t3); letter-spacing:.2px; text-transform:uppercase; }
.kpiValue{ font-weight:900; font-size:22px; margin-top:7px; letter-spacing:.15px; color:var(--t1); line-height:1.1; }
.kpiSub  { font-size:11.5px; color:var(--t3); font-weight:600; margin-top:3px; }
.kpiLink { text-decoration:none; border-bottom:1px dashed var(--bd); color:inherit; }

/* ── WAIT COLUMN (doctor dashboard) ──────────────────────────── */
td.td-wait, .td-wait {
  text-align: center;
  vertical-align: middle;
}
td.td-wait > * { margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; }

/* ── INPUTS ───────────────────────────────────────────────────── */
.input, .phx-input, .phx-in,
.shell input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]),
.shell select,
.shell textarea {
  background: rgba(255,255,255,.88);
  border: 1px solid var(--bd);
  color: var(--t1); padding: 9px 12px;
  border-radius: var(--r2);
  font-family: inherit; font-weight: 600; font-size: 13px; width: 100%;
  transition: border-color var(--tf), box-shadow var(--tf);
}
.shell input:focus, .shell select:focus, .shell textarea:focus,
.input:focus, .phx-input:focus, .phx-in:focus {
  outline: none; border-color: var(--br2); box-shadow: 0 0 0 3px var(--brg);
}
.shell input::placeholder, .shell textarea::placeholder { color: var(--t3); font-weight: 500; }
input[type=checkbox] { accent-color: var(--blue); width:14px; height:14px; cursor:pointer; }
/* Phone input — reasonable max width */
input[type=tel], input[name=phone], input[id=phone] { max-width: 260px; width: 100%; }

/* ── MODALS ───────────────────────────────────────────────────── */
.modal { position:fixed; inset:0; background:rgba(10,8,16,.65); display:none; align-items:center; justify-content:center; padding:18px; z-index:999; backdrop-filter:blur(6px); }
.modal.show { display:flex; }
.modal .box, .cm-box2 { max-width:980px; width:100%; background:rgba(248,248,252,.97); border:1px solid var(--bs); border-radius:var(--r5); padding:20px; box-shadow:var(--sh3); max-height:90vh; overflow-y:auto; }
hr.sep { border:none; border-top:1px solid var(--bs); margin:12px 0; }

/* ── SECTION PANELS ───────────────────────────────────────────── */
.sec-panel, .tablePanel {
  background: rgba(255,255,255,.92);
  border: 1px solid var(--bs); border-left: 4px solid var(--blue);
  border-radius: var(--r3); padding: 14px 16px; margin-top: 14px;
  box-shadow: 0 3px 12px rgba(15,23,42,.05);
}
.tpBlue   { border-left-color: var(--blue);  }
.tpGreen  { border-left-color: var(--green); }
.tpOrange { border-left-color: var(--amber); }
.tpRed    { border-left-color: var(--red);   }
.sec-panel-hd { display:flex; align-items:center; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
.sec-panel-hd h2 { margin:0; font-size:14px; font-weight:900; color:var(--t1); }
.sec-panel-hd .cnt { font-size:11.5px; color:var(--t3); font-weight:700; padding:2px 8px; border-radius:var(--rf); border:1px solid var(--bs); background:rgba(255,255,255,.60); }

/* ── FILTER BAR ───────────────────────────────────────────────── */
.filter-bar {
  display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end;
  padding:12px 14px;
  background:rgba(255,255,255,.88); border:1px solid var(--bs); border-radius:var(--r3);
  margin-bottom:12px; box-shadow:var(--sh1);
}
.filter-bar .field { display:flex; flex-direction:column; gap:4px; }
.filter-bar .field label { font-size:10.5px; font-weight:800; color:var(--t3); text-transform:uppercase; letter-spacing:.4px; }
.filter-bar input, .filter-bar select { height:36px; border-radius:var(--r1); border:1px solid var(--bd); background:rgba(255,255,255,.92); padding:0 10px; font-size:13px; font-weight:600; min-width:170px; }

/* ── PAGINATION ───────────────────────────────────────────────── */
.tablePager,.pager2 { display:flex; gap:8px; align-items:center; justify-content:flex-end; margin-top:10px; flex-wrap:wrap; }
.tablePager .btn { padding:6px 10px; }
.tablePager .small,.pager2 .page-info { font-size:11.5px; color:var(--t3); font-weight:700; min-width:80px; text-align:center; }

/* ── TASK HISTORY CHIPS ───────────────────────────────────────── */
.th-wrap { margin-top:10px; }
.th-hd { font-size:10px; font-weight:800; letter-spacing:.55px; text-transform:uppercase; color:var(--t3); margin-bottom:8px; }
.th-scroll { max-height:240px; overflow-y:auto; border-radius:var(--r2); border:1px solid rgba(148,163,184,.18); background:rgba(255,255,255,.60); }
.th-table { width:100%; border-collapse:collapse; }
.th-table th { font-size:9.5px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--t3); padding:6px 9px; background:rgba(255,255,255,.75); border-bottom:1px solid rgba(148,163,184,.13); white-space:nowrap; text-align:left; }
.th-table td { font-size:12px; padding:7px 9px; border-top:1px solid rgba(148,163,184,.09); vertical-align:top; color:var(--t1); }
.th-table tr:hover td { background:rgba(37,99,235,.03); }
.th-time   { font-size:11px; color:var(--t3); font-weight:600; white-space:nowrap; }
.th-type   { font-size:11px; color:var(--t3); font-weight:600; }
.th-note   { white-space:pre-wrap; max-width:240px; font-size:12px; line-height:1.45; }
.th-empty  { font-size:12px; color:var(--t3); padding:8px 0; font-weight:600; }
.th-chip   { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:var(--rf); font-size:10px; font-weight:700; white-space:nowrap; border:1px solid rgba(148,163,184,.22); background:rgba(255,255,255,.60); }
.th-chip--doctor    { background:var(--blue-bg); border-color:var(--blue-br); color:var(--blue-tx); }
.th-chip--reception { background:var(--amb-bg);  border-color:var(--amb-br);  color:var(--amb-tx);  }
.th-chip--pharmacy  { background:var(--grn-bg);  border-color:var(--grn-br);  color:var(--grn-tx);  }
.th-status { display:inline-flex; padding:2px 7px; border-radius:var(--rf); font-size:10px; font-weight:700; border:1px solid rgba(148,163,184,.18); background:rgba(255,255,255,.40); color:var(--t3); }

/* ── STOCK NAV ────────────────────────────────────────────────── */
.phx-stockNav {
  display:flex; flex-wrap:wrap; gap:14px; align-items:flex-start;
  margin-bottom:16px;
  background: var(--g1);
  border: 1px solid var(--bs);
  border-radius: var(--r3);
  padding: 12px 16px;
}
.phx-stockNav h2 { font-size:15px; font-weight:900; margin:0 0 2px 0; color:var(--t1); }
.phx-stockGroup-label { font-size:10px; font-weight:800; letter-spacing:.55px; text-transform:uppercase; color:var(--t3); margin-bottom:6px; }
.phx-stockGroup { min-width:0; }
.phx-stockBtns { display:flex; gap:7px; flex-wrap:wrap; }
/* phx-wrap inside shell: lighter to avoid double-glass */
.shell > .phx-wrap, .shell .phx-wrap {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.phx-stockTabs { display:flex; gap:16px; flex-wrap:wrap; flex:1; }

/* ── PHARMACY COMMENT BOX ─────────────────────────────────────── */
.phx-comment-box { margin-top:14px; padding:14px; background:rgba(255,255,255,.88); border:1px solid var(--bs); border-radius:var(--r3); box-shadow:var(--sh1); }
.phx-comment-box label { display:block; font-size:10.5px; font-weight:800; letter-spacing:.45px; text-transform:uppercase; color:var(--t3); margin-bottom:7px; }
.phx-comment-box textarea { width:100%; border-radius:var(--r1); border:1px solid var(--bd); background:rgba(255,255,255,.92); padding:9px 12px; font-size:13px; font-weight:600; font-family:inherit; resize:vertical; min-height:68px; box-sizing:border-box; }
.phx-comment-box textarea:focus { outline:none; border-color:var(--br2); box-shadow:0 0 0 3px var(--brg); }

/* ── PHARMACY/STOCK LAYOUT ────────────────────────────────────── */
.phx-wrap  { padding:16px; border-radius:var(--r4); }
.phx-row   { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.phx-note  { font-size:12px; color:var(--t2); }
.phx-grid  { display:grid; gap:12px; align-items:start; }
.phx-grid > * { min-width:0; }
.phx-kpis  { grid-template-columns:repeat(5,minmax(0,1fr)); }
@media(max-width:1100px){.phx-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}}
.phx-h     { font-size:13px; color:var(--t2); margin:0 0 6px; }
.phx-v     { font-size:20px; font-weight:700; margin:0; color:var(--t1); }
.phx-kpi   { position:relative; overflow:hidden; }
.phx-kpi:before { content:''; position:absolute; left:0; top:0; bottom:0; width:6px; background:rgba(37,99,235,.65); }
.phx-kpi .phx-ico { width:34px; height:34px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; font-weight:800; border:1px solid var(--bs); background:rgba(255,255,255,.40); }
.phx-kpi.blue:before  { background:rgba(37,99,235,.75); }
.phx-kpi.blue .phx-ico{ background:rgba(37,99,235,.12); }
.phx-kpi.green:before { background:rgba(22,163,74,.75); }
.phx-kpi.green .phx-ico{background:rgba(22,163,74,.12); }
.phx-kpi.orange:before{ background:rgba(245,158,11,.85);}
.phx-kpi.orange .phx-ico{background:rgba(245,158,11,.14);}
.phx-kpi .phx-kpiTop{ display:flex; align-items:center; gap:10px; }
.medGrid { display:grid; grid-template-columns:minmax(320px,1fr) 90px 110px 170px 80px; gap:10px; align-items:center; }
.medGrid.head { opacity:.9; font-size:13px; }
.medGrid .phx-btn { justify-self:end; }
@media(max-width:900px){ .medGrid{grid-template-columns:1fr 100px 100px;} .medGrid .phx-btn{justify-self:start;} }

/* ── MISC ─────────────────────────────────────────────────────── */
.small, .phx-note      { font-size:12px; color:var(--t2); }
/* Form field labels — higher contrast than .small for glare-prone screens (reception/pharmacy) */
.form-label { font-size:11.5px; font-weight:800; color:var(--t2); opacity:1; letter-spacing:.03em; }
.muted                 { color:var(--t3); }
.mono                  { font-family:'DM Mono',monospace; }
.empty-state           { text-align:center; padding:24px; color:var(--t3); font-size:13px; font-weight:600; }
.row-actions           { display:flex; gap:6px; align-items:center; white-space:nowrap; }
.row                   { display:flex; gap:14px; flex-wrap:wrap; }
.grid                  { display:grid; gap:14px; }
.formGrid              { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; align-items:start; }
@media(max-width:980px){.formGrid{grid-template-columns:1fr;}}
.day-badge { display:inline-flex; align-items:center; padding:2px 9px; border-radius:var(--r1); font-size:11px; font-weight:800; letter-spacing:.3px; border:1px solid; }
.day-badge.d1 { background:var(--blue-bg); border-color:var(--blue-br); color:var(--blue-tx); }
.day-badge.d3 { background:var(--pur-bg);  border-color:var(--pur-br);  color:var(--pur-tx);  }
.day-badge.fu { background:var(--amb-bg);  border-color:var(--amb-br);  color:var(--amb-tx);  }
.due-cell      { font-weight:700; font-size:12px; white-space:nowrap; }
.due-cell.overdue { color:var(--red); font-weight:800; }
.due-cell.today   { color:var(--green); font-weight:800; }

/* ── RECEPTION SPECIFIC ───────────────────────────────────────── */
.kv { display:flex; gap:10px; align-items:flex-start; background:rgba(255,255,255,.70); border:1px solid var(--bs); border-radius:var(--r1); padding:9px 12px; }
.kv .k { min-width:160px; font-weight:800; color:var(--t2); }
.kv .v { font-weight:700; color:var(--t1); }
.tileRow,.tileGrid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
@media(max-width:980px){.tileRow,.tileGrid{grid-template-columns:1fr 1fr;}}
.tile { border-radius:var(--r2); padding:14px; border:1px solid rgba(24,32,52,.12); box-shadow:var(--sh1); font-weight:900; }
.tile.green  { background:linear-gradient(160deg,rgba(22,163,74,.13),rgba(22,163,74,.06));   border-color:rgba(22,163,74,.22);  }
.tile.blue   { background:linear-gradient(160deg,rgba(37,99,235,.13),rgba(37,99,235,.06));   border-color:rgba(37,99,235,.20);  }
.tile.yellow { background:linear-gradient(160deg,rgba(245,158,11,.13),rgba(245,158,11,.06)); border-color:rgba(245,158,11,.22); }
.tile.red    { background:linear-gradient(160deg,rgba(220,38,38,.13),rgba(220,38,38,.06));   border-color:rgba(220,38,38,.22);  }
.tile .big   { font-size:24px; font-weight:900; line-height:1.1; }

/* ── PRINT ────────────────────────────────────────────────────── */
@media print {
  body { background:#fff !important; }
  .shell,.card,.phx-card { background:#fff !important; border:1px solid #ddd !important; box-shadow:none !important; backdrop-filter:none !important; }
}
/* ── RESPONSIVE ───────────────────────────────────────────────── */
@media(max-width:640px){
  .filter-bar { flex-direction:column; }
  .filter-bar input,.filter-bar select { min-width:100%; }
  .shell { width:auto; margin:8px; padding:12px 12px 18px; border-radius:var(--r4); }
}


/* ── CONTEXTUAL HELP SYSTEM ───────────────────────────────────── */
.hms-helper-hidden{display:none !important}
.hms-help-inline{display:inline-flex;align-items:center}
.hms-help-trigger{font-family:inherit}
[data-helper-ignore] .hms-help-trigger{display:none !important}

/* ── CONTEXTUAL HELPER SYSTEM ───────────────────────────────── */
.hms-help-pop{
  position:fixed;max-width:380px;min-width:240px;padding:12px 14px;border-radius:16px;
  border:1px solid rgba(148,163,184,.26);background:rgba(15,23,42,.96);color:#f8fafc;
  box-shadow:0 22px 44px rgba(15,23,42,.30);font-size:12.5px;line-height:1.58;z-index:4000;
  opacity:0;pointer-events:none;transform:translateY(4px);transition:opacity .12s ease, transform .12s ease;
}
.hms-help-pop.open{opacity:1;transform:translateY(0);pointer-events:auto}
.hms-help-pop::after{
  content:'';position:absolute;left:var(--arrow-left,24px);top:var(--arrow-top,-6px);width:10px;height:10px;
  background:inherit;border-right:1px solid rgba(148,163,184,.26);border-bottom:1px solid rgba(148,163,184,.26);
  transform:var(--arrow-transform, rotate(45deg));
}
.hms-help-trigger{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;padding:0;
  margin-left:6px;border-radius:999px;border:1px solid rgba(148,163,184,.34);background:rgba(255,255,255,.92);
  color:#475569;font-size:11px;font-weight:900;line-height:1;cursor:pointer;box-shadow:0 3px 10px rgba(15,23,42,.08);
  vertical-align:middle}
.hms-help-target{cursor:inherit}
button.hms-help-target,a.hms-help-target,.tab.hms-help-target,.btn.hms-help-target{position:relative}
button.hms-help-target::after,a.hms-help-target::after,.tab.hms-help-target::after,.btn.hms-help-target::after,
label.hms-help-target::after,h1.hms-help-target::after,h2.hms-help-target::after,h3.hms-help-target::after,h4.hms-help-target::after{
  content:'';position:absolute;left:8px;right:8px;bottom:3px;border-bottom:1px dashed rgba(37,99,235,.20);pointer-events:none;
}
label.hms-help-target,.tab.hms-help-target,.btn.hms-help-target{padding-bottom:2px}
.hms-help-trigger:hover,.hms-help-trigger:focus-visible,.hms-help-target:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.hms-helper-hidden{display:none !important}