/* ==========================================================================
   GMCH Doctor module (full-page web app)

   Palette is GMCH's OWN brand, sampled from the hospital logo
   (geetanjalihospital.co.in/images/logo.png): deep plum #884189 wordmark,
   mid #904E91, light #C09AC1, tint #E6D7E6/#F4EEF4. Teal is kept as the
   single complementary accent (voice/AI) — purple + teal is the pairing,
   everything else is status colour. Zonov.ai branding appears only on the
   public home page; inside the product the hospital's identity leads.

   Type: Sora display + Mulish body (kept from the Zonov house stack).
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Mulish:wght@400;500;600;700;800&display=swap');

:root {
  /* GMCH brand — sampled from the logo */
  --plum: #884189;          /* wordmark / primary */
  --plum-d: #6E326F;        /* pressed / gradient end */
  --plum-2: #A25FA3;        /* mid — gradient start */
  --plum-3: #C09AC1;        /* light accent */
  --grad: linear-gradient(100deg, #A25FA3 0%, #7A3A7B 100%);
  --grad-hero: linear-gradient(100deg, #884189, #0E8C86);

  /* Complementary accent (voice / AI) */
  --teal: #0E8C86;
  --grad-teal: linear-gradient(135deg, #14A29B 0%, #0B7A75 100%);
  --teal-soft: #E4F6F4;

  /* Aliases kept so existing markup keeps working — now plum-tinted */
  --blue: var(--plum);
  --blue-2: var(--plum-2);
  --blue-soft: #F5EDF6;
  --blue-line: #E6D7E6;

  /* Surfaces — warm plum-tinted neutrals, not flat white.
     The canvas is deliberately a few steps darker than the cards: a near-white
     page under white cards glares and flattens the layout, so the grey does
     double duty — easier on the eyes over a long clinic, and it lets each card
     read as a distinct surface. */
  --canvas: #EAE6EF;
  --surface: #ffffff;
  --surface-2: #F7F4F9;
  --plum-soft: #F5EDF6;
  --plum-line: #E6D7E6;

  /* Text — plum-leaning slate so it sits on the tinted canvas */
  --ink: #241428;
  --ink-2: #402A45;
  --ink-3: #6B5570;
  --muted: #8E7C93;
  --faint: #B4A6B8;

  /* Lines */
  --line: #F0E9F2;
  --line-2: #E4DAE7;
  --field: #DDD0E0;

  /* Status */
  --green: #06A05E;
  --green-soft: #E4F7EE;
  --amber: #C97A12;
  --amber-soft: #FDF3E4;
  --red: #D93A32;
  --red-soft: #FDEEED;

  /* Shape */
  --r-sm: 10px;
  --r: 14px;
  --r-lg: 20px;
  --pill: 163px;

  /* Elevation — plum-tinted shadows */
  --sh-1: 0 1px 2px rgba(52,20,56,.05), 0 2px 8px rgba(52,20,56,.04);
  --sh-2: 0 2px 6px rgba(52,20,56,.07), 0 10px 28px rgba(52,20,56,.08);
  --sh-3: 0 12px 40px rgba(52,20,56,.16);

  --font: 'Mulish', 'Segoe UI', sans-serif;
  --display: 'Sora', 'Mulish', sans-serif;

  --bar-h: 62px;
  --dock-h: 68px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #DCCFE0; border-radius: 9px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #C6B3CC; background-clip: content-box; }

body {
  font-family: var(--font);
  background: var(--canvas);
  color: var(--ink);
  min-height: 100vh;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--display); letter-spacing: -.3px; line-height: 1.25; }
button, input, select, textarea { font-family: var(--font); }

/* ==========================================================================
   Top app bar — full width, sticky
   ========================================================================== */
.appbar {
  position: sticky; top: 0; z-index: 90;
  height: var(--bar-h);
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 18px;
  padding: 0 26px;
}
.appbar .brand { display: flex; align-items: center; gap: 12px; min-width: 0; flex-shrink: 0; }
.appbar .brand .hosp {
  font-size: 14.5px; font-weight: 800; color: var(--ink); line-height: 1.2;
  max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.appbar .brand .hosp small {
  display: block; font-size: 10.5px; font-weight: 700; color: var(--plum);
  text-transform: uppercase; letter-spacing: .7px; margin-top: 2px;
}

/* The hospital logo file is a strip 408×96: the GMCH lockup is the leftmost
   ~95px, followed by NABH accreditation badges. App chrome wants only the
   lockup, so the wrapper crops to it — width is height × (95/96), i.e. very
   nearly square. Change both together if the source image ever changes. */
.logo-crop {
  height: 38px; width: 38px; flex-shrink: 0; overflow: hidden;
  display: block; position: relative;
}
.logo-crop img {
  height: 100%; width: auto; display: block;
  position: absolute; left: 0; top: 0; max-width: none;
}
.brand-divider { width: 1px; height: 26px; background: var(--line-2); flex-shrink: 0; }
.appbar-nav { display: flex; align-items: center; gap: 4px; margin-left: 10px; }
.appbar-nav a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border-radius: var(--pill);
  font-size: 14px; font-weight: 600; color: var(--ink-3);
  transition: background .16s, color .16s;
}
.appbar-nav a svg { width: 16px; height: 16px; }
.appbar-nav a:hover { background: var(--blue-soft); color: var(--blue); }
.appbar-nav a.active { background: var(--blue-soft); color: var(--blue); }
.appbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* The doctor's own block is the way into their profile, so it reads as a
   control: hover lift, a chevron, and an active state when the profile is open. */
.who {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--pill); padding: 5px 10px 5px 6px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
a.who:hover { border-color: var(--plum-3); box-shadow: 0 3px 12px rgba(52,20,56,.10); }
a.who.active { border-color: var(--plum); background: var(--plum-soft); }
.who-chev { display: flex; color: var(--muted); flex-shrink: 0; }
.who-chev svg { width: 15px; height: 15px; }
a.who:hover .who-chev { color: var(--plum); }
.who .av {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: var(--grad); color: #fff;
  display: grid; place-items: center; font-size: 12px; font-weight: 800;
}
.who .wt { line-height: 1.25; min-width: 0; }
.who .wn { display: block; font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.who .ws { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; }

/* ==========================================================================
   Page shell
   ========================================================================== */
.page { max-width: 1360px; margin: 0 auto; padding: 26px; }
.page.narrow { max-width: 1080px; }
.page-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.page-head h1 { font-size: 27px; font-weight: 700; }
.page-head .sub { font-size: 14.5px; color: var(--ink-3); margin-top: 5px; }
.page-head .head-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* ==========================================================================
   Cards / sections
   ========================================================================== */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
.card + .card { margin-top: 16px; }
.card-head {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 22px; border-bottom: 1px solid var(--line);
}
.card-head .ic {
  width: 34px; height: 34px; border-radius: var(--r-sm); flex-shrink: 0;
  display: grid; place-items: center; background: var(--blue-soft); color: var(--blue);
}
.card-head .ic svg { width: 17px; height: 17px; }
.card-head h2 { font-size: 17px; font-weight: 700; }
.card-head .hint { font-size: 12.5px; color: var(--muted); margin-top: 2px; font-family: var(--font); }
.card-head .right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.card-body { padding: 22px; }
.card-body.tight { padding: 14px; }

.count-pill {
  background: var(--grad-teal); color: #fff; border-radius: var(--pill);
  padding: 4px 12px; font-size: 12px; font-weight: 700; min-width: 28px; text-align: center;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 20px; border: none; border-radius: var(--r-sm);
  font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: transform .15s, box-shadow .15s, background .15s, color .15s, opacity .15s;
}
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

.btn-primary { background: var(--grad); color: #fff; box-shadow: 0 4px 14px rgba(36,157,255,.3); }
.btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(36,157,255,.38); }
.btn-teal { background: var(--grad-teal); color: #fff; box-shadow: 0 4px 14px rgba(0,196,189,.3); }
.btn-teal:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0,196,189,.38); }
.btn-ghost { background: var(--surface); color: var(--ink-2); border: 1px solid var(--field); }
.btn-ghost:hover:not(:disabled) { border-color: var(--blue-2); color: var(--blue); background: var(--blue-soft); }
.btn-soft { background: var(--blue-soft); color: var(--blue); }
.btn-soft:hover:not(:disabled) { background: #DCEBFB; }
.btn-danger { background: var(--red-soft); color: var(--red); border: 1px solid #FFD5D2; }
.btn-danger:hover:not(:disabled) { background: #FFE3E1; }
.btn-lg { height: 52px; padding: 0 26px; font-size: 15.5px; border-radius: var(--r); }
.btn-sm { height: 34px; padding: 0 14px; font-size: 13px; }
.btn-block { width: 100%; }

.icon-btn {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--field); cursor: pointer;
  display: grid; place-items: center; color: var(--ink-3); transition: all .15s;
}
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn:hover { border-color: var(--blue-2); color: var(--blue); background: var(--blue-soft); }
.icon-btn.wa:hover { border-color: #25D366; color: #1EA855; background: #E9FBF0; }
.icon-btn.lg { width: 52px; height: 52px; border-radius: var(--r); }

/* ==========================================================================
   Badges / chips
   ========================================================================== */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: var(--pill);
  font-size: 11.5px; font-weight: 800; letter-spacing: .3px; white-space: nowrap;
  background: var(--blue-soft); color: var(--blue);
}
.badge.green { background: var(--green-soft); color: #039A58; }
.badge.amber { background: var(--amber-soft); color: #A9691A; }
.badge.red   { background: var(--red-soft); color: var(--red); }
.badge.gray  { background: #F1F4F8; color: var(--ink-3); }
.badge.teal  { background: var(--teal-soft); color: #048C87; }
.badge i.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.seg { display: inline-flex; background: #EFF3F8; border-radius: var(--r-sm); padding: 3px; gap: 3px; }
.seg button {
  border: none; background: transparent; cursor: pointer;
  padding: 8px 16px; border-radius: 8px;
  font-size: 13.5px; font-weight: 700; color: var(--ink-3); transition: all .15s;
}
.seg button:hover { color: var(--blue); }
.seg button.active { background: var(--surface); color: var(--blue); box-shadow: var(--sh-1); }

.pill-tabs { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.pill-tabs::-webkit-scrollbar { display: none; }
.pill-tab {
  flex-shrink: 0; padding: 7px 15px; border-radius: var(--pill);
  border: 1px solid var(--field); background: var(--surface);
  font-size: 13px; font-weight: 600; color: var(--ink-3);
  cursor: pointer; white-space: nowrap; transition: all .15s;
}
.pill-tab:hover { border-color: var(--blue-2); color: var(--blue); }
.pill-tab.active { background: var(--blue-2); border-color: var(--blue-2); color: #fff; }

/* ==========================================================================
   Inputs
   ========================================================================== */
.f-label {
  display: block; font-size: 13px; font-weight: 700; color: var(--ink-2); margin-bottom: 7px;
}
.f-label .opt { font-weight: 500; color: var(--muted); font-size: 12px; }
/* Matches bare <input> too — several fields intentionally omit a type attribute.
   The negations sit inside :where() so this rule keeps element-level specificity
   and later class-scoped overrides (.ss input, .pass input …) still win. */
input:where(:not([type=checkbox]):not([type=radio]):not([type=range])),
select, textarea, .input {
  width: 100%; padding: 12px 14px;
  border: 1.5px solid var(--field); border-radius: var(--r-sm);
  font-size: 14.5px; color: var(--ink); background: var(--surface);
  outline: none; transition: border-color .16s, box-shadow .16s, background .16s;
}
input:focus, select:focus, textarea:focus, .input:focus {
  border-color: var(--blue); box-shadow: 0 0 0 4px rgba(3,122,218,.1); background: #fff;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
/* Height is managed by autoGrow() (js grows it to fit content), not by the
   user dragging a resize handle or a scrollbar — resize:none + overflow:hidden
   keep those out of the way instead of fighting the script's own height. */
textarea { resize: none; overflow: hidden; min-height: 84px; line-height: 1.65; }
.f-row { display: flex; gap: 14px; flex-wrap: wrap; }
.f-row > * { flex: 1; min-width: 150px; }
.f-block { margin-bottom: 18px; }
.f-hint { font-size: 12.5px; color: var(--muted); margin-top: 6px; }

/* Password with reveal */
.pass { position: relative; }
.pass input { padding-right: 48px; }
.pass .eye {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; color: var(--muted);
  padding: 6px; border-radius: 8px; display: flex; transition: color .15s, background .15s;
}
.pass .eye:hover { color: var(--blue); background: var(--blue-soft); }

/* ==========================================================================
   Searchable select
   ========================================================================== */
.zs { position: relative; }
.zs-trigger {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 13px 15px; border: 1.5px solid var(--field); border-radius: var(--r-sm);
  background: var(--surface); cursor: pointer; user-select: none;
  transition: border-color .16s, box-shadow .16s;
  text-align: left;
}
.zs-trigger:hover { border-color: #C3D0E0; }
.zs-trigger.open { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(3,122,218,.1); }
.zs-trigger .zs-ic {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  display: grid; place-items: center; background: var(--blue-soft); color: var(--blue);
}
.zs-trigger .zs-ic svg { width: 17px; height: 17px; }
.zs-txt { flex: 1; min-width: 0; }
.zs-txt .zs-ph { font-size: 14.5px; color: var(--faint); }
.zs-txt .zs-val { font-size: 14.5px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zs-txt .zs-sub { font-size: 12px; color: var(--muted); margin-top: 1px; }
.zs-caret { color: var(--muted); flex-shrink: 0; transition: transform .2s; }
.zs-trigger.open .zs-caret { transform: rotate(180deg); }
.zs-trigger:disabled { opacity: .5; cursor: not-allowed; }

.zs-panel {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 300;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r); box-shadow: var(--sh-3); overflow: hidden;
  display: none; animation: pop .16s cubic-bezier(.16,1,.3,1);
}
.zs-panel.open { display: block; }
@keyframes pop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.zs-search { padding: 12px; border-bottom: 1px solid var(--line); position: relative; }
.zs-search svg { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); }
.zs-search input { padding-left: 40px; background: var(--surface-2); }
.zs-opts { max-height: 300px; overflow-y: auto; padding: 6px; }
.zs-opt {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px; border-radius: var(--r-sm); cursor: pointer;
  transition: background .12s;
}
.zs-opt:hover, .zs-opt.active { background: var(--blue-soft); }
.zs-opt .oav {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  display: grid; place-items: center; background: #EDF1F6; color: var(--ink-3);
  font-size: 11.5px; font-weight: 800;
}
.zs-opt:hover .oav, .zs-opt.active .oav { background: var(--blue-2); color: #fff; }
.zs-opt .ol { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--ink); }
.zs-opt .or { font-size: 11.5px; font-weight: 700; }
.zs-empty { padding: 26px; text-align: center; color: var(--muted); font-size: 13.5px; }

/* ==========================================================================
   Stepper
   ========================================================================== */
.stepper { display: flex; align-items: center; gap: 0; margin-bottom: 30px; }
.step { display: flex; align-items: center; gap: 10px; }
.step .sn {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-size: 13px; font-weight: 800;
  background: #EFF3F8; color: var(--muted); transition: all .25s;
}
.step .sl { font-size: 13.5px; font-weight: 700; color: var(--muted); transition: color .25s; white-space: nowrap; }
.step.active .sn { background: var(--grad); color: #fff; box-shadow: 0 3px 10px rgba(36,157,255,.35); }
.step.active .sl { color: var(--ink); }
.step.done .sn { background: var(--green-soft); color: #039A58; }
.step.done .sl { color: var(--ink-3); }
.step-bar { flex: 1; height: 2px; background: #E7EDF4; margin: 0 12px; border-radius: 2px; position: relative; overflow: hidden; }
.step-bar i { position: absolute; inset: 0; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.16,1,.3,1); }
.step-bar.filled i { transform: scaleX(1); }

/* ==========================================================================
   Stat tiles
   ========================================================================== */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 17px 19px; box-shadow: var(--sh-1); display: flex; align-items: center; gap: 14px;
  transition: box-shadow .2s, transform .2s;
}
.stat:hover { box-shadow: var(--sh-2); transform: translateY(-1px); }
.stat .si { width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center; }
.stat .si svg { width: 20px; height: 20px; }
.stat .sv { font-family: var(--display); font-size: 25px; font-weight: 700; line-height: 1; letter-spacing: -.6px; }
.stat .sl { font-size: 13px; color: var(--ink-3); margin-top: 4px; font-weight: 600; }

/* ==========================================================================
   Patient list (queue)
   ========================================================================== */
.plist { display: flex; flex-direction: column; gap: 10px; }
.prow {
  display: flex; align-items: center; gap: 16px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 15px 18px; cursor: pointer;
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.prow:hover { border-color: var(--blue-2); box-shadow: var(--sh-2); transform: translateY(-1px); }
.prow .tok {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  background: var(--grad); color: #fff;
  display: grid; place-items: center; font-family: var(--display);
  font-size: 15px; font-weight: 800; box-shadow: 0 3px 10px rgba(36,157,255,.28);
}
.prow.done .tok { background: linear-gradient(135deg,#37C88A,#12A567); box-shadow: 0 3px 10px rgba(6,194,112,.26); }
.prow .pmain { flex: 1; min-width: 0; }
.prow .pn { font-size: 15.5px; font-weight: 700; color: var(--ink); }
.prow .pm { font-size: 13px; color: var(--ink-3); margin-top: 3px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.prow .pm .sep { color: var(--faint); }
.prow .pgo { color: var(--faint); flex-shrink: 0; transition: transform .16s, color .16s; }
.prow:hover .pgo { color: var(--blue); transform: translateX(3px); }

/* ==========================================================================
   Consultation: sticky patient bar + section rail + form
   ========================================================================== */
.pbar {
  position: sticky; top: var(--bar-h); z-index: 80;
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  padding: 13px 26px; display: flex; align-items: center; gap: 15px; flex-wrap: wrap;
}
.pbar .pav {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  background: var(--grad); color: #fff; display: grid; place-items: center;
  font-family: var(--display); font-size: 15px; font-weight: 800;
}
.pbar .pn { font-size: 16.5px; font-weight: 700; }
.pbar .pn small { font-size: 13.5px; font-weight: 600; color: var(--ink-3); }
.pbar .pm { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.pbar .pright { margin-left: auto; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

/* No side-rail anymore, so the pad uses the page's width — but flush full-
   bleed to the edge reads too wide on a large monitor. A small cap (not
   centered — centering would put the old "empty rail" gap back, just split
   across both sides) leaves a little breathing room on the right only. */
.rx-layout { max-width: 1180px; }

/* Field cards */
.fcard {
  border: 1.5px solid var(--line-2); border-radius: var(--r);
  background: var(--surface); transition: border-color .16s, box-shadow .16s;
  overflow: hidden;
}
.fcard:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(3,122,218,.08); }
.fcard.danger { border-color: #FBD5D2; background: #FFFCFC; }
.fcard-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 15px; border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.fcard.danger .fcard-head { background: var(--red-soft); border-bottom-color: #FBD5D2; }
.fcard-head .fl { font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
.fcard.danger .fcard-head .fl { color: var(--red); }
.fcard-head .fr { margin-left: auto; display: flex; align-items: center; gap: 7px; }
.fcard textarea {
  border: none; border-radius: 0; padding: 14px 15px; min-height: 92px; background: transparent;
}
.fcard textarea:focus { box-shadow: none; }

.tpl-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border: none; border-radius: var(--pill);
  background: var(--plum-soft); color: var(--plum);
  font-size: 12px; font-weight: 800; cursor: pointer; transition: background .15s;
}
.tpl-btn:hover { background: var(--plum-line); }
.tpl-btn svg { width: 13px; height: 13px; }

/* Four one-click field-tool icons (clear / save / load / revert-to-last-visit),
   HealthPlix-style — no separate template screen for the common case. */
.fld-tools { display: flex; align-items: center; gap: 5px; }
.fico {
  position: relative;
  display: grid; place-items: center; width: 34px; height: 34px;
  border: none; border-radius: var(--r-sm); background: transparent; color: var(--muted);
  cursor: pointer; transition: background .15s, color .15s;
}
.fico:hover { background: var(--plum-soft); color: var(--plum); }
.fico svg { width: 19px; height: 19px; }
.fico.disabled { opacity: .38; cursor: default; }
.fico.disabled:hover { background: transparent; color: var(--muted); }

/* A custom tooltip instead of the native `title` attribute — the browser's
   own tooltip has an inconsistent, often long hover delay and no styling
   control, which read as "hovering does nothing" even though it works. This
   one appears immediately and every time. */
.fico::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 9px); left: 50%;
  transform: translateX(-50%) translateY(3px);
  background: var(--ink); color: #fff; font-size: 12px; font-weight: 700;
  padding: 6px 10px; border-radius: 7px; white-space: nowrap;
  box-shadow: var(--sh-2); pointer-events: none; z-index: 60;
  opacity: 0; visibility: hidden; transition: opacity .1s, transform .1s;
}
.fico:hover::after, .fico:focus-visible::after {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}

.fld-pop {
  position: fixed; z-index: 500; width: 260px;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r); box-shadow: var(--sh-3); padding: 14px;
  animation: pop .16s cubic-bezier(.16,1,.3,1);
}
.fld-pop-title { font-size: 12.5px; font-weight: 800; color: var(--ink-2); margin-bottom: 10px; }
.fld-pop input { margin-bottom: 10px; }
.fld-pop-row { display: flex; gap: 8px; }
.fld-pop-msg { font-size: 12px; font-weight: 700; color: var(--red); margin-top: 8px; }
.fld-pop-list { max-height: 220px; overflow-y: auto; margin: -2px -2px 8px; padding: 2px; }
.fld-pop-empty { font-size: 12.5px; color: var(--muted); padding: 10px 2px; }
.fld-pop-item {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px; border-radius: var(--r-sm); cursor: pointer; transition: background .12s;
}
.fld-pop-item:hover { background: var(--blue-soft); }
.fld-pop-item .fpi-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--ink); }
.fld-pop-item .fpi-add {
  flex-shrink: 0; width: 22px; height: 22px; border: none; border-radius: 50%;
  background: var(--surface-2); color: var(--ink-3); font-size: 15px; font-weight: 700;
  cursor: pointer; line-height: 1;
}
.fld-pop-item .fpi-add:hover { background: var(--plum-line); color: var(--plum); }
.fld-pop-manage {
  display: block; width: 100%; text-align: center; padding: 8px; border: none; background: transparent;
  border-top: 1px solid var(--line); color: var(--blue); font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.fld-pop-manage:hover { text-decoration: underline; }

/* Clinical notes in two columns on wide screens — halves the page scroll,
   which is the whole point: the doctor should see the consultation at once. */
.notes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.notes-grid > .span2 { grid-column: 1 / -1; }
@media (max-width: 1180px) { .notes-grid { grid-template-columns: 1fr; } .notes-grid > .span2 { grid-column: auto; } }

/* ==========================================================================
   Vitals — compact always-editable row (no big tiles, no Edit/Save round trip).
   Modelled on the reference EMR: label above, input welded to a unit suffix.
   Eight vitals fit in two dense rows instead of ~570px of mostly-empty cards,
   which is what keeps the rest of the consultation above the fold.
   ========================================================================== */
.vrow { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; }
.vf { min-width: 0; }
.vf > label {
  display: block; font-size: 11.5px; font-weight: 800; color: var(--muted);
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 5px; white-space: nowrap;
}
.vin { display: flex; align-items: stretch; }
.vin input {
  width: 74px; text-align: center; font-weight: 700; font-size: 15px;
  padding: 9px 6px; border-radius: var(--r-sm) 0 0 var(--r-sm);
  border: 1.5px solid var(--field); border-right: none;
}
.vin input:focus { box-shadow: none; border-color: var(--plum); z-index: 1; }
/* Spinners crowd these narrow welded inputs and are useless for clinical values. */
.vin input::-webkit-outer-spin-button,
.vin input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.vin input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.vin .u {
  display: grid; place-items: center; padding: 0 10px; white-space: nowrap;
  border: 1.5px solid var(--field); border-left: 1px solid var(--line-2);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--plum-soft);
  font-size: 11.5px; font-weight: 800; color: var(--plum); letter-spacing: .2px;
}
/* BP is two inputs sharing one unit box */
.vin.bp input { width: 56px; }
.vin.bp input:first-of-type { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.vin.bp input + input { border-radius: 0; border-left: none; }
.vin .slash {
  display: grid; place-items: center; padding: 0 7px; background: #fff;
  border-top: 1.5px solid var(--field); border-bottom: 1.5px solid var(--field);
  color: var(--faint); font-weight: 700;
}
/* Derived, read-only */
.vin.derived input {
  background: var(--plum-soft); color: var(--plum); border-color: var(--plum-line); cursor: default;
}
.vin.derived .u { background: var(--plum); color: #fff; border-color: var(--plum); }
.vf.derived > label { color: var(--plum); }

/* BMI verdict chip beside the derived value */
.bmi-chip {
  display: inline-flex; align-items: center; gap: 5px; margin-left: 10px;
  padding: 5px 11px; border-radius: var(--pill);
  font-size: 11.5px; font-weight: 800; letter-spacing: .3px; white-space: nowrap;
}
.bmi-chip i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Voice */
.voice {
  width: 100%; display: flex; align-items: center; gap: 17px;
  padding: 19px 22px; border: none; border-radius: var(--r);
  background: var(--grad-teal); color: #fff; cursor: pointer; text-align: left;
  transition: transform .16s, box-shadow .16s;
  box-shadow: 0 6px 20px rgba(0,196,189,.26);
}
.voice:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(0,196,189,.34); }
.voice.rec {
  background: linear-gradient(135deg,#F0463C,#D32F2F);
  box-shadow: 0 6px 20px rgba(240,70,60,.32);
  animation: recpulse 1.6s ease-in-out infinite;
}
@keyframes recpulse {
  0%,100% { box-shadow: 0 6px 20px rgba(240,70,60,.3); }
  50%     { box-shadow: 0 6px 34px rgba(240,70,60,.6); }
}
.voice .vic {
  width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0;
  background: rgba(255,255,255,.22); display: grid; place-items: center;
}
.voice .vic svg { width: 22px; height: 22px; }
.voice .vtx { flex: 1; min-width: 0; }
.voice .vt { display: block; font-family: var(--display); font-size: 17px; font-weight: 700; }
.voice .vs { display: block; font-size: 12.5px; margin-top: 3px; opacity: .92; }
.voice .vd { font-family: var(--display); font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Tables
   ========================================================================== */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); }
table.dt { width: 100%; border-collapse: collapse; }
table.dt th {
  padding: 11px 14px; text-align: left; white-space: nowrap;
  font-size: 11.5px; font-weight: 800; color: var(--muted);
  text-transform: uppercase; letter-spacing: .6px;
  background: var(--surface-2); border-bottom: 1px solid var(--line);
}
table.dt td {
  padding: 11px 14px; font-size: 14px; color: var(--ink-2);
  border-bottom: 1px solid var(--line); vertical-align: middle;
}
table.dt tbody tr:last-child td { border-bottom: none; }
table.dt tbody tr:hover td { background: #FAFCFF; }
table.dt td input, table.dt td select {
  padding: 7px 9px; font-size: 13px; border-radius: 8px; border: 1.5px solid var(--line-2);
}
table.dt td input:focus, table.dt td select:focus {
  border-color: var(--plum); box-shadow: 0 0 0 3px rgba(136,65,137,.1);
}
/* Composition line under a medicine name, as on the printed sheet. */
.m-comp {
  display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 2px; line-height: 1.45;
  max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
table.dt td .m-ins { margin-top: 6px; font-size: 12px; }
.row-x {
  background: none; border: none; cursor: pointer; color: var(--faint);
  padding: 6px; border-radius: 7px; display: grid; place-items: center; transition: all .15s;
}
.row-x svg { width: 15px; height: 15px; }
.row-x:hover { color: var(--red); background: var(--red-soft); }

/* ==========================================================================
   Smart search
   ========================================================================== */
.ss { position: relative; }
.ss > svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--muted); pointer-events: none;
}
.ss input { padding-left: 42px; }
.ss-panel {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 200;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r); box-shadow: var(--sh-3);
  max-height: 300px; overflow-y: auto; padding: 6px; display: none;
  animation: pop .16s cubic-bezier(.16,1,.3,1);
}
.ss-panel.open { display: block; }
.ss-opt {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px; border-radius: var(--r-sm); cursor: pointer; transition: background .12s;
}
.ss-opt:hover, .ss-opt.active { background: var(--blue-soft); }
.ss-opt .sd { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.ss-opt .sn { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--ink); }
.ss-opt .sm2 { font-size: 12px; color: var(--muted); max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-empty { padding: 22px; text-align: center; color: var(--muted); font-size: 13.5px; }

/* ==========================================================================
   Quick picks — "you order this a lot" suggestions from the doctor's own
   history. Clicking one adds it and removes it from the row, so the list
   shrinks as the prescription fills up.
   ========================================================================== */
.qp { margin-bottom: 14px; }
.qp-head {
  display: flex; align-items: center; gap: 7px; margin-bottom: 9px;
  font-size: 11.5px; font-weight: 800; color: var(--plum);
  text-transform: uppercase; letter-spacing: .5px;
}
.qp-head svg { width: 13px; height: 13px; }
.qp-head .n { color: var(--muted); font-weight: 700; letter-spacing: 0; text-transform: none; }
.qp-list { display: flex; flex-wrap: wrap; gap: 8px; }
.qp-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 13px; border-radius: var(--pill); cursor: pointer;
  border: 1.5px dashed var(--plum-line); background: var(--plum-soft);
  color: var(--plum); font-family: var(--font); font-size: 13.5px; font-weight: 700;
  transition: all .15s;
}
.qp-chip:hover {
  border-style: solid; border-color: var(--plum); background: #fff;
  transform: translateY(-1px); box-shadow: var(--sh-1);
}
.qp-chip .plus { font-size: 15px; line-height: 1; opacity: .7; }
.qp-chip .uses {
  font-size: 10.5px; font-weight: 800; padding: 2px 7px; border-radius: var(--pill);
  background: var(--plum); color: #fff;
}
.qp-chip .sub { font-size: 11px; font-weight: 600; color: var(--muted); }

/* ==========================================================================
   Clinical suggestion banner — "this prescription warrants X, add it?"
   Advisory only: the doctor accepts or ignores; nothing is auto-ordered.
   ========================================================================== */
.sug { display: flex; flex-direction: column; gap: 9px; margin-bottom: 14px; }
.sug-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--amber-soft); border: 1.5px solid #F2DFB6;
  border-radius: var(--r); padding: 12px 14px;
}
.sug-item .si {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  display: grid; place-items: center; background: #fff; color: var(--amber);
  border: 1px solid #F2DFB6;
}
.sug-item .si svg { width: 16px; height: 16px; }
.sug-body { flex: 1; min-width: 0; font-size: 13.5px; color: #6B4A12; line-height: 1.5; }
.sug-body b { color: #4E350B; }
.sug-body .why { display: block; font-size: 12px; color: #8A6A2E; margin-top: 3px; }
.sug-add {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--pill); cursor: pointer;
  border: 1.5px solid var(--plum); background: #fff; color: var(--plum);
  font-family: var(--font); font-size: 13px; font-weight: 800; transition: all .15s;
}
.sug-add:hover { background: var(--plum); color: #fff; }
.sug-dismiss {
  flex-shrink: 0; background: none; border: none; cursor: pointer; color: #B79A62;
  padding: 6px; border-radius: 7px; display: grid; place-items: center;
}
.sug-dismiss svg { width: 14px; height: 14px; }
.sug-dismiss:hover { color: #6B4A12; background: rgba(0,0,0,.05); }

/* Selected chips (complaints / diagnoses already on the prescription) */
/* Label to the LEFT of its field instead of stacked above it, throughout the
   whole pad — Vitals, Chief complaints, Diagnosis, every History/Advice/Diet
   textarea, Follow-up — matching the doctor's existing software exactly. A
   thin rule between rows stands in for the boxed-card borders that pattern
   doesn't use, so consecutive fields still read as separate rows. */
.lr-row {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 16px 0; border-bottom: 1px solid var(--line);
}
.lr-row:first-child { padding-top: 2px; }
.lr-row:last-child { border-bottom: none; padding-bottom: 2px; }
.lr-label {
  flex: 0 0 148px; padding-top: 10px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  font-size: 13.5px; font-weight: 700; color: var(--ink-2);
}
.lr-label label { cursor: default; }
.lr-content { flex: 1; min-width: 0; }
.lr-content textarea { min-height: 88px; }
.lr-row.danger .lr-label label { color: var(--red); }
.lr-row.danger .lr-content textarea { border-color: #FBD5D2; background: #FFFCFC; }
@media (max-width: 640px) {
  .lr-row { flex-direction: column; gap: 8px; }
  .lr-label { flex: none; padding-top: 0; flex-direction: row; align-items: center; }
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* Chip + search-input combined into one field, HealthPlix-style: the chips
   already picked and the box you're typing the next one into are the same
   control, so adding a complaint never moves your cursor out of the flow. */
.chip-input {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  width: 100%; min-height: 46px; padding: 7px 10px;
  border: 1.5px solid var(--field); border-radius: var(--r-sm);
  background: var(--surface); transition: border-color .16s, box-shadow .16s, background .16s;
}
.chip-input:focus-within {
  border-color: var(--blue); box-shadow: 0 0 0 4px rgba(3,122,218,.1); background: #fff;
}
.chip-input .chips { gap: 6px; flex: 0 0 auto; }
.chip-input input {
  flex: 1 1 140px; min-width: 140px; width: auto;
  border: none !important; padding: 5px 4px !important; margin: 0;
  box-shadow: none !important; background: transparent !important;
}
.chip-input input:focus { border: none !important; box-shadow: none !important; background: transparent !important; }
.chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 10px 8px 14px; border-radius: var(--pill);
  background: var(--plum); color: #fff; font-size: 13.5px; font-weight: 700;
}
.chip button {
  background: rgba(255,255,255,.22); border: none; cursor: pointer; color: #fff;
  width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; line-height: 1; padding: 0; transition: background .15s;
}
.chip button:hover { background: rgba(255,255,255,.42); }
.chip .snomed { font-size: 10.5px; font-weight: 700; opacity: .75; }

/* ==========================================================================
   Alerts
   ========================================================================== */
.alert {
  display: flex; align-items: flex-start; gap: 11px;
  border-radius: var(--r); padding: 13px 16px; font-size: 14px; font-weight: 600;
  border: 1.5px solid transparent; line-height: 1.55;
}
.alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.alert.red   { background: var(--red-soft); border-color: #FBD5D2; color: #C2352C; }
.alert.amber { background: var(--amber-soft); border-color: #F7DFB8; color: #90591A; }
.alert.blue  { background: var(--blue-soft); border-color: var(--blue-line); color: #0A5BA8; }
.alert.green { background: var(--green-soft); border-color: #BCEED6; color: #05834C; }
.alert + .alert { margin-top: 10px; }

/* ==========================================================================
   Sticky dock (consultation actions)
   ========================================================================== */
.dock {
  position: sticky; bottom: 0; z-index: 85;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--line);
  padding: 14px 26px; display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  box-shadow: 0 -4px 22px rgba(16,42,73,.06);
}
.dock .dleft { margin-right: auto; display: flex; align-items: center; gap: 11px; }
.dock .saved { font-size: 12.5px; font-weight: 700; color: var(--green); display: flex; align-items: center; gap: 5px; }

/* ==========================================================================
   Auth (full-page split)
   ========================================================================== */
.auth { min-height: 100vh; display: flex; }
.auth-left {
  flex: 0 0 46%; position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; padding: 56px 58px;
  background:
    radial-gradient(880px 540px at 10% 6%, rgba(36,157,255,.14), transparent 60%),
    radial-gradient(740px 500px at 92% 94%, rgba(0,196,189,.14), transparent 56%),
    linear-gradient(165deg, #F4F9FE 0%, #EAF3FC 46%, #E2EEFB 100%);
}
.auth-left::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(3,122,218,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(3,122,218,.05) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at 42% 42%, #000 0%, transparent 74%);
  -webkit-mask-image: radial-gradient(circle at 42% 42%, #000 0%, transparent 74%);
  opacity: .8;
}
.auth-brand {
  position: absolute; top: 42px; left: 58px; z-index: 4;
  display: flex; align-items: center; gap: 13px;
}
.auth-brand img { height: 27px; width: auto; }
.auth-brand .bs {
  font-size: 11.5px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase;
  color: #5B7DA6; padding-left: 13px; border-left: 1px solid rgba(3,122,218,.28);
}
.auth-left .eyebrow {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  background: #fff; border: 1px solid var(--blue-line); color: var(--blue);
  border-radius: var(--pill); padding: 6px 14px; width: fit-content; margin-bottom: 20px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase;
}
.auth-left .eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
.auth-left h1 {
  position: relative; font-size: 36px; font-weight: 800; letter-spacing: -.9px;
  color: var(--ink); max-width: 470px; margin-bottom: 15px;
}
.auth-left h1 b { background: var(--grad-hero); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-left p.lead { position: relative; font-size: 15.5px; color: #46597A; max-width: 420px; line-height: 1.7; }
.auth-feats { position: relative; display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.auth-feat { display: flex; align-items: center; gap: 12px; font-size: 14px; color: #23405F; font-weight: 600; }
.auth-feat .fi {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; display: grid; place-items: center;
  background: #fff; border: 1px solid var(--blue-line); color: var(--blue);
}
.auth-feat .fi svg { width: 15px; height: 15px; }

.auth-right {
  flex: 1; display: flex; align-items: center; justify-content: center; padding: 46px 40px;
  background: linear-gradient(160deg, #FCFDFF 0%, #F6F9FD 55%, #EFF4FB 100%);
  overflow-y: auto;
}
.auth-card { width: 100%; max-width: 460px; }
.auth-card h2 { font-size: 25px; font-weight: 800; margin-bottom: 7px; }
.auth-card .csub { font-size: 14.5px; color: var(--ink-3); margin-bottom: 28px; line-height: 1.6; }
.auth-foot { margin-top: 26px; text-align: center; font-size: 12.5px; color: var(--faint); }
.auth-foot b {
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; font-weight: 800;
}

.who-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--blue-soft); border: 1px solid var(--blue-line);
  border-radius: var(--r); padding: 15px 17px; margin-bottom: 20px;
}
.who-card .wav {
  width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0;
  background: var(--grad); color: #fff; display: grid; place-items: center;
  font-family: var(--display); font-size: 16px; font-weight: 800;
}
.who-card .wl { font-size: 11px; font-weight: 800; color: var(--blue); text-transform: uppercase; letter-spacing: .6px; }
.who-card .wn { font-size: 16px; font-weight: 700; color: var(--ink); margin-top: 2px; }
.who-card .ws { font-size: 12.5px; color: var(--ink-3); }

/* ==========================================================================
   Modal / toast / states
   ========================================================================== */
.backdrop {
  position: fixed; inset: 0; z-index: 500; padding: 22px;
  background: rgba(11,30,51,.46); backdrop-filter: blur(3px);
  display: none; align-items: center; justify-content: center;
}
.backdrop.open { display: flex; animation: fade .18s ease both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: var(--surface); border-radius: var(--r-lg); width: 100%; max-width: 560px;
  max-height: 88vh; overflow-y: auto; box-shadow: var(--sh-3);
  animation: rise .22s cubic-bezier(.16,1,.3,1) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.modal-head { padding: 22px 24px 16px; }
.modal-head h3 { font-size: 19px; font-weight: 700; }
.modal-head p { font-size: 13.5px; color: var(--ink-3); margin-top: 5px; line-height: 1.55; }
.modal-body { padding: 0 24px 20px; }
.modal-foot {
  padding: 16px 24px; border-top: 1px solid var(--line);
  display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
}

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 12px);
  background: var(--ink); color: #fff; padding: 13px 20px; border-radius: var(--r-sm);
  font-size: 14px; font-weight: 600; z-index: 900; box-shadow: var(--sh-3);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  display: flex; align-items: center; gap: 9px; max-width: 90vw;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { background: #C2352C; }

.empty {
  text-align: center; padding: 52px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
}
.empty .ei {
  width: 58px; height: 58px; border-radius: 17px; margin-bottom: 10px;
  display: grid; place-items: center; background: var(--blue-soft); color: var(--blue);
}
.empty .ei svg { width: 26px; height: 26px; }
.empty .et { font-family: var(--display); font-size: 17px; font-weight: 700; color: var(--ink); }
.empty .es { font-size: 14px; color: var(--ink-3); max-width: 400px; line-height: 1.65; }

.skel { background: linear-gradient(90deg,#EEF2F7 25%,#F6F9FC 50%,#EEF2F7 75%); background-size: 200% 100%; animation: shim 1.3s linear infinite; border-radius: 8px; }
@keyframes shim { to { background-position: -200% 0; } }
.spin {
  width: 17px; height: 17px; border: 2.5px solid rgba(255,255,255,.4);
  border-top-color: #fff; border-radius: 50%; animation: sp .7s linear infinite;
}
@keyframes sp { to { transform: rotate(360deg); } }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .auth-left { display: none; }
  .appbar-nav { display: none; }
  .who .wt { display: none; }
  .page { padding: 18px 14px; }
  .pbar { padding: 12px 14px; }
  .dock { padding: 12px 14px; }
}


/* ==========================================================================
   Prescription safety panel — advisory findings on the medicines section.
   Nothing here blocks signing; severity only orders attention.
   ========================================================================== */
.safe-head {
  display: flex; align-items: center; gap: 9px; margin-bottom: 10px;
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
}
.safe-head svg { width: 14px; height: 14px; }
.safe-item {
  display: flex; align-items: flex-start; gap: 11px;
  border-radius: var(--r); padding: 12px 14px; margin-bottom: 9px;
  border: 1.5px solid transparent; font-size: 13.5px; line-height: 1.55;
}
.safe-item .si { flex-shrink: 0; margin-top: 1px; }
.safe-item .si svg { width: 17px; height: 17px; }
.safe-item .st { font-weight: 800; }
.safe-item .sm { display: block; margin-top: 3px; }
.safe-item .sd { display: block; margin-top: 4px; font-weight: 500; }
.safe-item.high   { background: var(--red-soft);   border-color: #F6CFCC; color: #A32B24; }
.safe-item.medium { background: var(--amber-soft); border-color: #F2DFB6; color: #7A5210; }
.safe-item.low    { background: var(--blue-soft);  border-color: var(--plum-line); color: var(--plum); }
.safe-item .tag {
  margin-left: auto; flex-shrink: 0; font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .4px; opacity: .7; white-space: nowrap;
}

/* Pregnancy / lactation context toggles */
.ctx-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ctx-toggle {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 13.5px; font-weight: 700; color: var(--ink-2);
  background: var(--surface-2); border: 1.5px solid var(--line-2);
  border-radius: var(--pill); padding: 8px 14px; transition: all .15s;
}
.ctx-toggle:hover { border-color: var(--plum-3); }
.ctx-toggle input { width: auto; margin: 0; accent-color: var(--plum); }
.ctx-toggle.on { background: var(--plum-soft); border-color: var(--plum); color: var(--plum); }

/* ── Patient lookup inside the "start a consultation" modal ─────────────────
   Rows must carry enough identity to tell two patients of the same name apart —
   age, gender, visit count, last visit and the doctor last seen. A name alone
   is exactly what caused duplicate records in this database. */
.np-split {
  display: flex; align-items: center; gap: 12px; margin: 4px 0 16px;
  font-size: 11.5px; font-weight: 700; color: var(--faint);
  text-transform: uppercase; letter-spacing: .8px;
}
.np-split::before, .np-split::after {
  content: ''; flex: 1; height: 1px; background: var(--line-2);
}
.pfind { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.pfind-row {
  display: flex; align-items: center; gap: 12px; text-align: left; width: 100%;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  padding: 10px 12px; cursor: pointer; font-family: var(--font); transition: .15s;
}
.pfind-row:hover { border-color: var(--plum); background: var(--plum-soft); }
.pfind-av {
  width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0; background: var(--grad);
  color: #fff; display: grid; place-items: center; font-size: 12.5px; font-weight: 800;
}
.pfind-t { flex: 1; min-width: 0; }
.pfind-n { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.pfind-s { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; line-height: 1.5; }
.pfind-b {
  font-size: 11px; font-weight: 800; color: var(--plum); background: var(--plum-soft);
  border: 1px solid var(--plum-line); border-radius: 20px; padding: 4px 10px;
  white-space: nowrap; flex-shrink: 0;
}
.pfind-b.exact { background: var(--teal-soft); color: var(--teal); border-color: #BFE6E3; }
.pfind-none { font-size: 12.5px; color: var(--faint); padding: 9px 2px; }
.pfind-warn {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 9px;
  background: var(--amber-soft); border: 1px solid #F3DCB4; color: #8A5200;
  border-radius: var(--r-sm); padding: 9px 11px; font-size: 12.5px; line-height: 1.55;
}
.pfind-warn b { font-weight: 800; }
.pfind-warn svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; }

/* ── Completed-consultation bar ─────────────────────────────────────────────
   Sits under the patient bar when the record being viewed is already signed.
   Deliberately loud: the doctor must not start typing into a closed record. */
.done-bar {
  display: none; align-items: center; gap: 13px; flex-wrap: wrap;
  max-width: 1360px; margin: 14px auto 0; padding: 13px 20px;
  background: var(--green-soft); border: 1px solid #BFE8D2; border-radius: var(--r);
}
.done-bar.show { display: flex; }
.done-ic { display: flex; color: #06703F; flex-shrink: 0; }
.done-ic svg { width: 20px; height: 20px; }
.done-t { min-width: 0; flex: 1; line-height: 1.5; }
.done-t b { display: block; font-size: 14px; font-weight: 800; color: #06703F; }
.done-t span { font-size: 12.5px; color: #2C7A55; }
.done-act { display: flex; gap: 8px; flex-wrap: wrap; }

/* A locked pad reads as a document, not a form: fields lose their affordances
   but stay perfectly legible, because this is how the record gets reviewed. */
body.rx-locked .card input:disabled,
body.rx-locked .card select:disabled,
body.rx-locked .card textarea:disabled {
  background: var(--surface-2); color: var(--ink-2); opacity: 1;
  border-color: var(--line); cursor: default;
}
body.rx-locked .card button:disabled { opacity: .35; cursor: not-allowed; }

/* ── Previous visits, shown beneath the pad on a repeat visit ───────────────
   Each visit is a collapsible block: the most recent opens by default because
   that is the one the doctor is nearly always comparing against. Read-only —
   this is somebody's signed record, including possibly another doctor's. */
/* Left a date TIMELINE, right the full read-out of whichever date is
   selected — a master/detail layout, not an accordion list. */
.pv-layout { display: flex; gap: 20px; align-items: flex-start; }
.pv-timeline {
  flex: 0 0 96px; display: flex; flex-direction: column; gap: 8px;
  position: sticky; top: calc(var(--bar-h) + 88px);
}
.pv-tab {
  border: 1.5px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface);
  padding: 10px 8px; font-size: 13px; font-weight: 700; color: var(--ink-3);
  cursor: pointer; text-align: center; transition: all .15s; font-family: var(--font);
}
.pv-tab:hover { border-color: var(--plum-line); color: var(--plum); }
.pv-tab.active { background: var(--plum); border-color: var(--plum); color: #fff; box-shadow: var(--sh-1); }
.pv-tab.today { color: var(--blue); border-color: var(--blue-2); }
.pv-tab.today.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.pv-detail { flex: 1; min-width: 0; border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 15px 17px; }
.pv-dhead {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.pv-dhead .icon-btn { width: 34px; height: 34px; }
.pv-dhead .icon-btn svg { width: 15px; height: 15px; }
@media (max-width: 640px) {
  .pv-layout { flex-direction: column; }
  .pv-timeline { flex-direction: row; flex-wrap: wrap; position: static; flex: none; width: 100%; }
  .pv-tab { flex: 1 0 72px; }
}
.pv-when { font-size: 13.5px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.pv-who { font-size: 12px; color: var(--ink-3); margin-left: 8px; }
.pv-line { font-size: 13px; line-height: 1.65; margin-bottom: 6px; }
.pv-line b { color: var(--ink-3); font-weight: 800; }
.pv-vitals {
  font-size: 12.5px; color: var(--ink-2); background: var(--surface-2);
  border-radius: var(--r-sm); padding: 8px 11px; margin-bottom: 10px;
}
.pv-tbl { width: 100%; border-collapse: collapse; margin: 8px 0 4px; }
.pv-tbl th {
  text-align: left; font-size: 10px; font-weight: 800; color: var(--muted);
  text-transform: uppercase; letter-spacing: .6px; padding: 5px 8px;
  border-bottom: 1px solid var(--line-2);
}
.pv-tbl td { font-size: 12.5px; padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.pv-tbl tr:last-child td { border-bottom: none; }
.pv-tbl .m { font-weight: 700; color: var(--ink); }
.pv-tbl .c { font-size: 11px; color: var(--muted); }
.pv-none { font-size: 12.5px; color: var(--faint); padding: 4px 2px; }

/* ── Voice state machine + live preview ─────────────────────────────────────
   Structure follows reference/doctor-ui/doctor-panel.html: a full-width mic
   button with icon box, title, sub-line and duration, a second button for the
   ambient scribe, and a state line beneath. Colours are GMCH's own. */
/* Visually distinct from dictation, as in the reference panel: same family,
   deeper tone, so the two are not mistaken for each other mid-consultation. */
.voice.scribe {
  background: linear-gradient(135deg, #0B6E6A 0%, #06514E 100%);
  margin-top: 10px;
}
.voice.scribe .vic { background: rgba(255,255,255,.18); }

.vstate {
  display: none; align-items: center; gap: 9px; margin-top: 12px;
  padding: 9px 13px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--line-2);
  font-size: 12.5px; color: var(--ink-3);
}
.vstate.on { display: flex; }
.vs-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex-shrink: 0;
}
.vs-txt { font-weight: 700; }
.vs-steps { margin-left: auto; display: flex; gap: 5px; align-items: center; }
.vs-steps i {
  width: 22px; height: 4px; border-radius: 3px; background: var(--line-2); display: block;
}
.vs-steps i.on { background: var(--plum); }
.vs-steps i.done { background: var(--green); }

/* One state per colour, so the doctor can read progress without reading words. */
.vstate.listening { background: #FDEEED; border-color: #F6CFCC; color: #B42318; }
.vstate.listening .vs-dot { background: var(--red); animation: vPulse 1.1s infinite; }
.vstate.working { background: var(--plum-soft); border-color: var(--plum-line); color: var(--plum); }
.vstate.working .vs-dot { background: var(--plum); animation: vPulse 1.1s infinite; }
.vstate.done { background: var(--green-soft); border-color: #BFE8D2; color: #06703F; }
.vstate.done .vs-dot { background: var(--green); }
.vstate.error { background: var(--red-soft); border-color: #F6CFCC; color: #B42318; }
.vstate.error .vs-dot { background: var(--red); }
@keyframes vPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } }

.vlive {
  display: none; margin-top: 10px; padding: 10px 13px; border-radius: var(--r-sm);
  background: var(--teal-soft); border: 1px solid #BFE6E3;
  font-size: 13px; line-height: 1.6; color: var(--ink-2);
  max-height: 88px; overflow-y: auto;
}
.vlive.on { display: block; }
.vlive-l {
  display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .8px;
  text-transform: uppercase; color: var(--teal); margin-right: 8px;
}

/* A field the AI just wrote flashes once, so the doctor sees WHAT changed
   rather than having to diff the pad against memory. */
@keyframes aiFlash {
  0%   { background: #E4F6F4; box-shadow: 0 0 0 3px rgba(14,140,134,.22); }
  100% { background: transparent; box-shadow: 0 0 0 3px rgba(14,140,134,0); }
}
.ai-filled { animation: aiFlash 1.5s ease-out; }

/* ── Load-error state ─────────────────────────────────────────────────────
   Replaces the pad entirely when the appointment/patient in the URL cannot be
   loaded, instead of leaving the page stuck on its "Loading…" skeleton with
   no way forward. */
.load-err { display: none; padding: 70px 20px; }
.load-err.show { display: flex; justify-content: center; }
.load-err-card {
  max-width: 420px; text-align: center; background: var(--surface);
  border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--sh-2);
  padding: 36px 32px;
}
.load-err-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 16px; margin-bottom: 16px;
  background: var(--red-soft); color: var(--red);
}
.load-err-ic svg { width: 26px; height: 26px; }
.load-err-card h2 { font-size: 18px; font-weight: 800; color: var(--ink); margin-bottom: 8px; }
.load-err-card p { font-size: 13.5px; color: var(--ink-3); line-height: 1.6; margin-bottom: 22px; }

/* ── Diagnosis table ────────────────────────────────────────────────────────
   Deliberately NOT wrapped in .tbl-wrap: that has `overflow-x: auto`, which
   clips any absolutely-positioned dropdown inside it — the suggestion lists in
   this table were being cut off at the table edge. The border and radius that
   the wrapper used to provide are applied to the table itself instead. */
.dx-tbl {
  border: 1px solid var(--line); border-radius: var(--r);
  border-collapse: separate; border-spacing: 0; overflow: visible;
}
.dx-tbl thead th:first-child { border-top-left-radius: var(--r); }
.dx-tbl thead th:last-child { border-top-right-radius: var(--r); }
.dx-tbl .dx-n { color: var(--muted); font-size: 12.5px; text-align: center; }
.dx-tbl input { width: 100%; }
.dx-tbl tr:last-child td { border-bottom: none; }

/* Medicine table: same "no .tbl-wrap" fix as the diagnosis table above —
   overflow-x:auto on the wrapper clipped every per-cell dropdown (Dosage,
   Unit, When, Frequency, Duration all got one once they stopped being plain
   inputs/<select>s). Border/radius move onto the table itself instead. */
.med-tbl {
  border: 1px solid var(--line); border-radius: var(--r);
  border-collapse: separate; border-spacing: 0; overflow: visible;
}
.med-tbl thead th:first-child { border-top-left-radius: var(--r); }
.med-tbl thead th:last-child { border-top-right-radius: var(--r); }
.med-tbl tr:last-child td { border-bottom: none; }
.m-cell { position: relative; }
.m-cell .ss-panel { left: 0; right: auto; min-width: 170px; }

/* The add-row's input is the primary control in this table, so it reads as one
   rather than as an empty cell. */
.dx-new #dxAdd { font-weight: 600; }
.dx-new #dxAdd::placeholder { color: var(--muted); font-weight: 600; }

/* Both dropdowns anchor to their own cell — the cell has to be the containing
   block, or they position against the page and drift when it scrolls. */
.dx-cell { position: relative; }
.dx-cell .ss-panel { left: 8px; right: auto; min-width: 320px; top: calc(100% - 6px); }

.dx-sug {
  display: none; position: absolute; z-index: 40; left: 8px; min-width: 132px;
  top: calc(100% - 6px);
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  box-shadow: var(--sh-2); overflow: hidden; padding: 4px;
}
.dx-sug.on { display: block; }
.dx-sug button {
  display: block; width: 100%; text-align: left; border: none; background: none;
  padding: 9px 12px; border-radius: 7px; cursor: pointer;
  font-family: var(--font); font-size: 13.5px; font-weight: 600; color: var(--ink);
  white-space: nowrap;
}
.dx-sug button:hover { background: var(--plum-soft); color: var(--plum); }
/* The first row is what Enter takes, so it is marked as such. */
.dx-sug button:first-child { background: var(--surface-2); }

/* ==========================================================================
   Print preview — an in-page overlay (not a new tab): same tab throughout,
   Cancel/Esc just closes it back to the pad underneath. See the `#btnPrint`
   click handler for why `@page { margin: 0 }` and English-only uppercase.
   ========================================================================== */
@page { margin: 0; size: A4; }
.print-overlay {
  display: none; position: fixed; inset: 0; z-index: 900;
  background: #EAE6EF; overflow-y: auto; padding-top: 62px;
  font-family: 'Mulish', sans-serif;
}
.print-overlay.open { display: block; }
/*
  The sheet is a <table> (not a <div>) specifically so its <thead>/<tfoot>
  repeat on every physical page when printed — the one construct browser
  print engines honour for "run this on every page" (see print.js's
  renderPrescription for why). border-collapse keeps the head/body/foot
  cells' borders from doubling up at the seams.
*/
.print-overlay .rx-sheet {
  width: 100%; max-width: 820px; margin: 20px auto !important; background: #fff;
  border-collapse: collapse; font-family: 'Mulish', sans-serif; color: #111;
  box-shadow: 0 2px 18px rgba(0,0,0,.07);
}
.print-overlay .rx-cell { padding: 0 38px; }
.print-overlay .rx-head-cell { padding-top: 34px; }
.print-overlay .rx-foot-cell { padding-bottom: 34px; }
.print-overlay.caps .rx-sheet, .print-overlay.caps .rx-sheet * { text-transform: uppercase; }

/* Review toolbar. GMCH plum, same shapes as the pad's own action dock. */
.print-overlay .rx-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 62px; z-index: 10;
  display: flex; align-items: center; gap: 12px; padding: 0 22px;
  background: rgba(255,255,255,.94); backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid #E4DAE7;
}
.print-overlay .rx-bar h1 { font-size: 15px; font-weight: 800; color: #241428; letter-spacing: -.2px; }
.print-overlay .rx-bar .rx-sub { font-size: 12px; color: #8E7C93; margin-left: 2px; }
.print-overlay .rx-bar .sp { margin-left: auto; }
.print-overlay .rx-bar button {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: 'Mulish', sans-serif; font-size: 14px; font-weight: 700;
  padding: 10px 18px; border-radius: 163px; border: 1.5px solid #E4DAE7;
  background: #fff; color: #6B5570; transition: .15s;
}
.print-overlay .rx-bar button:hover { border-color: #C09AC1; color: #884189; }
.print-overlay .rx-bar button.go {
  background: linear-gradient(100deg, #A25FA3 0%, #7A3A7B 100%);
  border-color: transparent; color: #fff;
  box-shadow: 0 4px 14px rgba(110,50,111,.28);
}
.print-overlay .rx-bar button.go:hover { filter: brightness(1.06); }
.print-overlay .rx-bar svg { width: 16px; height: 16px; }

@media print {
  /* Only the overlay's own content may reach paper. Everything else on the
     page — sidebar, action dock, the pad underneath — is screen furniture. */
  body.printing-rx > *:not(#printOverlay) { display: none !important; }
  body.printing-rx { background: #fff; }
  .print-overlay { position: static !important; overflow: visible !important; padding-top: 0 !important; }
  .print-overlay .rx-bar { display: none !important; }
  .print-overlay .rx-sheet { box-shadow: none !important; margin: 0 !important; max-width: none !important; }
  .print-overlay .rx-cell { padding-left: 12mm !important; padding-right: 12mm !important; }
  .print-overlay .rx-head-cell { padding-top: 14mm !important; }
  /*
    A4 is 297mm tall; minus the 12mm top/bottom page padding and a rough
    estimate of the letterhead+footer's own height, ~215mm is what's left
    for the body on a single page. Forcing the body cell to at least that
    tall is what pushes a short prescription's footer down to the physical
    bottom of the page instead of sitting right under the signature — a
    prescription long enough to need a 2nd page simply grows past this and
    is unaffected, since min-height never clips real content.
  */
  .print-overlay .rx-body-cell { min-height: 215mm; padding-bottom: 14mm !important; }
  .print-overlay .rx-foot-cell { padding-bottom: 14mm !important; }
}