/* ============================================================
   DoctorLive — design tokens
   The ink-blue token board is the hero; everything else stays quiet.
   ============================================================ */
:root {
  --ink:      #123a5a;   /* token board, primary */
  --ink-2:    #0d2c45;
  --paper:    #eef2f5;   /* page background */
  --surface:  #ffffff;
  --line:     #d6dee5;
  --text:     #15222e;
  --muted:    #5d6e7d;
  --live:     #15835a;
  --break:    #b97d06;
  --off:      #8593a0;
  --danger:   #b43d36;
  --glow:     #e8f3ff;   /* token numeral colour */

  --font-body: "Public Sans", "Hind Siliguri", "Noto Sans Bengali", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-num:  "Barlow Condensed", "Hind Siliguri", "Noto Sans Bengali", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;

  --r-lg: 14px;
  --r-sm: 8px;
  color-scheme: light;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #7fb4e0; --ink-2: #0b1f30;
    --paper: #0f1720; --surface: #16212c; --line: #26394a;
    --text: #e3ebf2; --muted: #93a4b3;
    --live: #3fbf87; --break: #e0a531; --off: #6f7f8d; --danger: #e0706a;
    --glow: #e8f3ff;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: inherit; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--text);
  font: 16px/1.6 var(--font-body);
}
a { color: var(--ink); }
h1, h2 { font-family: var(--font-num); font-weight: 650; line-height: 1.25; margin: 0; }
h1 { font-size: clamp(1.45rem, 3.4vw, 2rem); }
h2 { font-size: 1.3rem; }
p { margin: .25rem 0; }
.muted { color: var(--muted); }
.small { font-size: .88rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
code { background: var(--paper); padding: 0 .3em; border-radius: 4px; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--ink) 55%, transparent); outline-offset: 2px; }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 1000;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .6rem clamp(1rem, 3vw, 2rem);
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.brand { font-family: var(--font-num); font-weight: 700; font-size: 1.1rem; text-decoration: none; color: var(--text); }
.topnav { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.navlink { text-decoration: none; font-weight: 500; }
.who { color: var(--muted); font-size: .9rem; }
.conn { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--muted); }
.conn i { width: 8px; height: 8px; border-radius: 50%; background: var(--live); }
.conn.bad i { background: var(--danger); }
.conn.bad { color: var(--danger); }

.wrap { max-width: 1180px; margin: 0 auto; padding: 1.25rem clamp(1rem, 3vw, 2rem) 3rem; }
.hello { margin-bottom: 1rem; }

/* ---------- Panels & grid ---------- */
.panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.1rem 1.2rem; margin-bottom: 1rem; min-width: 0;
}
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: .8rem; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 1rem; }
.assist-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 1rem; align-items: start; }
.assist-layout .col { min-width: 0; }
@media (max-width: 860px) { .assist-layout { grid-template-columns: 1fr; } }

/* ---------- Buttons ---------- */
.btn {
  font: inherit; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .55rem 1rem; min-height: 42px;
  border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--surface); color: var(--text);
  transition: background .15s, border-color .15s, transform .08s;
}
.btn:hover:not(:disabled) { border-color: var(--ink); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn.primary:hover:not(:disabled) { background: var(--ink-2); }
@media (prefers-color-scheme: dark) { .btn.primary { color: #0b1f30; } .btn.primary:hover:not(:disabled) { background: #a9cdea; } }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.ghost { background: transparent; }
.btn.sm { min-height: 32px; padding: .2rem .65rem; font-size: .88rem; }
.btn.lg { min-height: 48px; font-size: 1.05rem; }
.btn.xl { min-height: 64px; font-size: 1.25rem; }
.btn.wait { pointer-events: none; opacity: .7; }
kbd { font: 600 .72rem var(--font-body); padding: 0 .35em; border: 1px solid currentColor; border-radius: 4px; opacity: .6; }

/* ---------- Status badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .2rem .7rem; border-radius: 999px; font-weight: 600; font-size: .9rem;
  background: color-mix(in srgb, var(--off) 14%, transparent); color: var(--off);
}
.badge i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.badge.live  { background: color-mix(in srgb, var(--live) 14%, transparent); color: var(--live); }
.badge.live i { animation: pulse 1.8s infinite; }
.badge.break { background: color-mix(in srgb, var(--break) 16%, transparent); color: var(--break); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 60%, transparent); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .badge.live i { animation: none; } }

.arrival { font-weight: 500; color: var(--muted); }
.arrival[data-state="arrived"], .arrival[data-state="in_chamber"] { color: var(--live); }
.arrival[data-state="on_the_way"] { color: var(--ink); }

/* ---------- Token board: the page's centrepiece ---------- */
.token {
  display: grid; justify-items: center; text-align: center;
  padding: 1rem 1rem 1.2rem; margin-bottom: 1rem;
  background: var(--ink-2); color: var(--glow);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 -18px 40px rgba(0,0,0,.25);
}
.token-label { font-size: .95rem; opacity: .75; }
.token-num {
  font-family: var(--font-num); font-weight: 800;
  font-size: clamp(5rem, 16vw, 8.5rem); line-height: .95; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 22px rgba(160, 205, 255, .35);
}
.token-sub { font-size: 1rem; opacity: .85; min-height: 1.6em; }
.token-sm .token-num { font-size: clamp(3.5rem, 10vw, 5rem); }

/* ---------- Segmented chamber control ---------- */
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.seg-btn.on.s-live    { background: var(--live);  border-color: var(--live);  color: #fff; }
.seg-btn.on.s-break   { background: var(--break); border-color: var(--break); color: #fff; }
.seg-btn.on.s-offline { background: var(--off);   border-color: var(--off);   color: #fff; }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin: 0 0 .9rem; }
.stats.three { grid-template-columns: repeat(3, 1fr); }
.stats > div { border: 1px solid var(--line); border-radius: var(--r-sm); padding: .55rem .75rem; }
.stats dt { color: var(--muted); font-size: .85rem; }
.stats dd { margin: 0; font: 700 1.9rem/1.1 var(--font-num); font-variant-numeric: tabular-nums; }
.progress { height: 8px; border-radius: 99px; background: var(--paper); overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; background: var(--live); transition: width .4s; }

/* ---------- Assistant controls ---------- */
.controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.controls [data-act="next"] { grid-column: 1 / -1; }
.controls .btn { white-space: nowrap; padding-inline: .6rem; }
.hint { color: var(--muted); font-size: .9rem; margin: .7rem 0 .3rem; }
.check { display: flex; align-items: center; gap: .5rem; font-size: .92rem; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--ink); }

/* ---------- Map ---------- */
.map { height: 340px; border-radius: 10px; border: 1px solid var(--line); z-index: 0; }
.gps-line { color: var(--muted); font-size: .92rem; margin-bottom: .7rem; }
.gps-line.on { color: var(--live); }
.pin span {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: #fff; border: 2px solid var(--ink); font-size: 20px; box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.pin-doctor span { border-color: var(--live); }
.pin.stale span { filter: grayscale(1); opacity: .6; }
.leaflet-container .route { stroke: #123a5a; }
.leaflet-container .acc { stroke: #15835a; fill: #15835a; }

/* ---------- Forms ---------- */
input {
  font: inherit; width: 100%; min-height: 44px; padding: .5rem .75rem;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--text);
}
input:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 20%, transparent); }
label { display: grid; gap: .3rem; font-weight: 500; }
.stack { display: grid; gap: .7rem; }
.err { color: var(--danger); min-height: 1.4em; margin: 0; }
.walkin { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: .5rem; margin-bottom: .8rem; }
@media (max-width: 520px) { .walkin { grid-template-columns: 1fr; } }
.lookup { display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: center; margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--line); }
.lookup .muted { grid-column: 1 / -1; }

/* ---------- Queue table ---------- */
.filters { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .6rem; }
.chip { font: inherit; font-size: .88rem; padding: .2rem .8rem; border-radius: 99px; border: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer; }
.chip.on { background: var(--ink); border-color: var(--ink); color: #fff; }
@media (prefers-color-scheme: dark) { .chip.on { color: #0b1f30; } }
.table-scroll { overflow-x: auto; }
.queue { width: 100%; border-collapse: collapse; }
.queue th { text-align: left; font-weight: 500; color: var(--muted); font-size: .85rem; padding: .4rem .5rem; border-bottom: 1px solid var(--line); }
.queue td { padding: .55rem .5rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.queue .sn { font: 700 1.35rem var(--font-num); width: 3.2rem; font-variant-numeric: tabular-nums; }
.queue .sub { display: block; color: var(--muted); font-size: .82rem; }
.queue .row-act { text-align: right; white-space: nowrap; }
.queue tr.st-called { background: color-mix(in srgb, var(--live) 9%, transparent); }
.queue tr.st-done td, .queue tr.st-cancelled td { color: var(--muted); }
.qs { font-size: .82rem; font-weight: 600; padding: .1rem .5rem; border-radius: 99px; background: var(--paper); white-space: nowrap; }
.qs-called  { background: var(--live); color: #fff; }
.qs-hold    { background: color-mix(in srgb, var(--break) 20%, transparent); color: var(--break); }
.qs-skipped { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.empty { text-align: center; color: var(--muted); padding: 1.5rem .5rem; }

/* ---------- Patient: search ---------- */
.search-hero { max-width: 44rem; margin: 1.5rem 0 1.5rem; }
.search-hero h1 { font-size: clamp(1.7rem, 4.5vw, 2.6rem); letter-spacing: -.01em; }
.searchbox { margin-top: 1rem; }
.searchbox input { min-height: 54px; font-size: 1.1rem; }
.results { display: grid; gap: .6rem; }
.doc-card {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 1rem 1.2rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  text-decoration: none; color: inherit;
}
.doc-card:hover { border-color: var(--ink); }
.doc-card h2 { font-size: 1.2rem; }
.spec { color: var(--ink); font-weight: 500; }
.doc-live { display: grid; justify-items: end; gap: .3rem; text-align: right; }
.mini-token { background: var(--ink-2); color: var(--glow); border-radius: 6px; padding: .1rem .6rem; font-size: .88rem; }
.mini-token b { font: 800 1.3rem var(--font-num); margin-right: .2rem; }
@media (max-width: 520px) { .doc-live { justify-items: start; text-align: left; } }

/* ---------- Patient: profile ---------- */
.profile { display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.avatar {
  flex: none; width: 72px; height: 72px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; background: var(--ink); color: #fff; font: 700 1.8rem var(--font-num);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.live-strip { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }

.mine { display: flex; gap: 1rem; align-items: center; }
.mine-num {
  flex: none; min-width: 5.5rem; text-align: center; padding: .2rem .6rem;
  font: 800 3.4rem/1.1 var(--font-num);
  border: 3px solid var(--ink); border-radius: 10px; color: var(--ink);
}
.mine-status { font-weight: 600; font-size: 1.08rem; }
#minePanel[data-state="soon"]   { border-color: var(--break); }
#minePanel[data-state="called"] { border-color: var(--live); box-shadow: 0 0 0 3px color-mix(in srgb, var(--live) 25%, transparent); }
#minePanel[data-state="called"] .mine-num { border-color: var(--live); color: var(--live); }

.board { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: .4rem; }
.cell {
  display: grid; place-items: center; height: 44px; border-radius: 6px;
  font: 700 1.05rem var(--font-num); font-variant-numeric: tabular-nums;
  border: 1px solid var(--line); background: var(--surface);
}
.cell.c-done, .cell.c-skipped { color: var(--muted); background: var(--paper); text-decoration: line-through; text-decoration-thickness: 1px; }
.cell.c-hold   { border-color: var(--break); color: var(--break); }
.cell.c-called { background: var(--live); border-color: var(--live); color: #fff; }
.cell.mine     { outline: 3px solid var(--ink); outline-offset: 1px; }
.legend { display: flex; gap: .35rem .8rem; flex-wrap: wrap; align-items: center; font-size: .82rem; color: var(--muted); }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: -.4rem; vertical-align: -1px; border: 1px solid var(--line); }
.lg-called { background: var(--live); } .lg-done { background: var(--paper); } .lg-waiting { background: var(--surface); } .lg-mine { outline: 2px solid var(--ink); }

/* ---------- Called overlay ---------- */
.callout { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; background: rgba(8, 20, 32, .7); padding: 1rem; }
.callout[hidden] { display: none; }
.callout-box { background: var(--surface); border-radius: var(--r-lg); padding: 1.5rem 2rem; text-align: center; max-width: 360px; width: 100%; }
.callout-title { font: 700 1.3rem var(--font-num); color: var(--live); }
.callout-num { font: 800 6rem/1 var(--font-num); color: var(--ink); margin: .3rem 0; }

/* ---------- Login ---------- */
.login-card { max-width: 400px; margin: 3rem auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.6rem; }
.login-card h1 { font-size: 1.5rem; }
.login-card form { margin-top: 1.2rem; }
.demo { margin-top: .5rem; font-size: .9rem; color: var(--muted); }
.demo summary { cursor: pointer; }

/* ---------- Toasts ---------- */
#toasts { position: fixed; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 3000; display: grid; gap: .4rem; width: min(92vw, 420px); }
.toast { padding: .7rem 1rem; border-radius: var(--r-sm); background: var(--text); color: var(--surface); box-shadow: 0 6px 20px rgba(0,0,0,.2); transition: opacity .4s, transform .4s; }
.toast.ok { background: var(--live); color: #fff; }
.toast.error { background: var(--danger); color: #fff; }
.toast.out { opacity: 0; transform: translateY(8px); }

/* ============================================================
   Admin panel
   ============================================================ */
select, textarea {
  font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: .45rem .6rem; min-height: 40px;
}
textarea { width: 100%; resize: vertical; min-height: 64px; }
select:focus, textarea:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 20%, transparent); }
.row-gap { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.row-gap input { width: auto; min-width: 12rem; }
.nowrap { white-space: nowrap; }

.admin-hello { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }

.tabs { display: flex; gap: .25rem; overflow-x: auto; margin-bottom: 1rem; border-bottom: 1px solid var(--line); }
.tab {
  font: 600 .98rem var(--font-body); color: var(--muted); background: none; border: 0; cursor: pointer;
  padding: .6rem .9rem; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.tab:hover { color: var(--text); }
.tab.on { color: var(--ink); border-bottom-color: var(--ink); }

.kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 1rem; }
.kpis > div { background: var(--surface); }
.kpis dd small { font-size: 1rem; color: var(--muted); font-weight: 600; }

.sys-warn, .sys-ok {
  display: flex; gap: .75rem; align-items: center; flex-wrap: wrap;
  padding: .7rem 1rem; border-radius: var(--r-sm); margin-bottom: 1rem; font-size: .95rem;
}
.sys-warn { background: color-mix(in srgb, var(--break) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--break) 45%, transparent); }
.sys-ok   { background: color-mix(in srgb, var(--live) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--live) 35%, transparent); color: var(--live); }

/* Toggle switch */
.switch { display: inline-flex; align-items: center; cursor: pointer; position: relative; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .track {
  width: 46px; height: 26px; border-radius: 99px; background: var(--off); position: relative; transition: background .18s;
}
.switch .thumb {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .18s;
}
.switch input:checked + .track { background: var(--live); }
.switch input:checked + .track .thumb { transform: translateX(20px); }
.switch input:focus-visible + .track { outline: 3px solid color-mix(in srgb, var(--ink) 55%, transparent); outline-offset: 2px; }
.switch input:disabled + .track { opacity: .4; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .switch .track, .switch .thumb { transition: none; } }

.switch-list { display: grid; }
.switch-row {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .85rem 0; border-top: 1px solid var(--line);
}
.switch-row:first-child { border-top: 0; padding-top: 0; }
.switch-text { display: grid; gap: .1rem; max-width: 40rem; }
.switch-row.is-off .switch-text strong { color: var(--danger); }
.switch-ctl { display: flex; gap: .4rem; align-items: center; flex: none; }
.switch-ctl input[type="time"] { width: auto; }
.notice-edit { display: grid; gap: .4rem; justify-items: end; width: min(26rem, 60vw); }
@media (max-width: 600px) {
  .switch-row { flex-direction: column; align-items: flex-start; }
  .notice-edit { width: 100%; }
}

.admin-table td { vertical-align: middle; }
.admin-table select { min-height: 34px; padding: .2rem .4rem; font-size: .9rem; }
.row-off td { opacity: .55; }
.row-off td:has(.switch) { opacity: 1; }
.tag { display: inline-block; font-size: .78rem; font-weight: 600; padding: .05rem .5rem; border-radius: 99px; background: var(--paper); color: var(--muted); margin-left: .25rem; }
.tag.ok  { background: color-mix(in srgb, var(--live) 14%, transparent); color: var(--live); margin: 0; }
.tag.off { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); margin: 0; }
.role { font-size: .82rem; font-weight: 600; padding: .1rem .55rem; border-radius: 99px; background: var(--paper); }
.role-admin  { background: var(--ink); color: #fff; }
.role-doctor { background: color-mix(in srgb, var(--live) 14%, transparent); color: var(--live); }
@media (prefers-color-scheme: dark) { .role-admin { color: #0b1f30; } }

.queue-tools { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .8rem; }
.btn.danger-outline { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 50%, transparent); }
.btn.danger-outline:hover:not(:disabled) { background: var(--danger); color: #fff; border-color: var(--danger); }

/* Dialogs */
.dlg {
  border: 0; border-radius: var(--r-lg); padding: 0; width: min(680px, 94vw); max-height: 92vh;
  background: var(--surface); color: var(--text); box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.dlg::backdrop { background: rgba(8, 20, 32, .55); }
.dlg-form { padding: 1.3rem 1.4rem; display: grid; gap: .9rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.form-grid .span2 { grid-column: 1 / -1; }
.form-grid label { font-size: .92rem; }
.form-grid select { width: 100%; }
.latlng { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }
.map-sm { height: 240px; }
.dlg-actions { display: flex; justify-content: flex-end; gap: .5rem; }
[hidden] { display: none !important; }

/* Patient-facing bits controlled by admin */
.notice-banner {
  background: color-mix(in srgb, var(--break) 14%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--break) 45%, transparent);
  border-radius: var(--r-sm); padding: .7rem 1rem; margin-bottom: 1rem; font-weight: 500;
}
.closed-note { background: var(--paper); border-radius: var(--r-sm); padding: .8rem 1rem; color: var(--muted); }
.maint { max-width: 36rem; margin: 3rem auto; text-align: center; }
.check.disabled { opacity: .5; }

/* ---------- Doctor photos ---------- */
.avatar-sm { width: 56px; height: 56px; font-size: 1.4rem; }
.avatar-xs { width: 38px; height: 38px; font-size: 1rem; flex: none; }
.doc-card { justify-content: flex-start; }
.doc-card .doc-main { flex: 1; min-width: 12rem; }
.doc-cell { display: flex; gap: .65rem; align-items: center; }
.hello-photo { display: flex; gap: 1.1rem; align-items: center; flex-wrap: wrap; }
.photo-edit { display: flex; gap: .8rem; align-items: center; }
.photo-actions { display: grid; gap: .35rem; justify-items: start; }
.photo-actions label.btn { cursor: pointer; }
.dlg .photo-edit { padding-bottom: .4rem; border-bottom: 1px solid var(--line); }
@media (prefers-color-scheme: dark) { .avatar { color: #0b1f30; } }

/* ---------- Accounts: login links, reset, registration ---------- */
.login-links { display: flex; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .95rem; }
.info-note, .ok-note { border-radius: var(--r-sm); padding: .75rem 1rem; }
.info-note { background: color-mix(in srgb, var(--ink) 8%, var(--surface)); }
.ok-note   { background: color-mix(in srgb, var(--live) 12%, var(--surface)); color: var(--live); font-weight: 500; }
.code-input { font: 700 1.6rem var(--font-num); letter-spacing: .35em; text-align: center; }
.tab .count { display: inline-grid; place-items: center; min-width: 1.4em; height: 1.4em; padding: 0 .35em; margin-left: .25rem;
  border-radius: 99px; background: var(--danger); color: #fff; font-size: .75rem; }
.sys-warn.danger { background: color-mix(in srgb, var(--danger) 10%, var(--surface)); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.register { max-width: 760px; margin: 0 auto; }
.register > h1 { margin-top: .5rem; }
.register form h2 { margin-top: .6rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.register form h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.dlg-sm { width: min(440px, 94vw); }
.dlg-sm .dlg-form label { display: grid; gap: .3rem; }
a.who { text-decoration: none; color: var(--muted); }
a.who:hover { color: var(--ink); text-decoration: underline; }

/* ---------- System check ---------- */
.check-list { display: grid; }
.check-row { display: flex; gap: .75rem; align-items: flex-start; padding: .6rem 0; border-top: 1px solid var(--line); }
.check-row:first-child { border-top: 0; padding-top: 0; }
.check-row .sub { display: block; color: var(--muted); font-size: .85rem; word-break: break-word; }
.check-ico { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-weight: 700; font-size: .85rem; color: #fff; }
.check-row.ok   .check-ico { background: var(--live); }
.check-row.warn .check-ico { background: var(--break); }
.check-row.bad  .check-ico { background: var(--danger); }
.check-row.bad strong { color: var(--danger); }
form.sys-warn { margin-bottom: 1rem; }

/* ============================================================
   Doctor navigation, profile, prescriptions
   ============================================================ */
.navlink.on { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.grow { flex: 1; min-width: 14rem; }
.center { text-align: center; margin-top: .8rem; }
.align-start { align-items: start; }
.mt { margin-top: .7rem; }
.panel h3 { font: 600 1rem var(--font-body); margin: .4rem 0 0; color: var(--muted); }
.rx-now { width: 100%; margin-bottom: .6rem; }
.form-grid.g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 700px) { .form-grid.g4 { grid-template-columns: 1fr 1fr; } }

.chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
.chips button { font: inherit; font-size: .82rem; padding: .2rem .65rem; border-radius: 99px; border: 1px dashed var(--line); background: transparent; color: var(--muted); cursor: pointer; }
.chips button:hover { border-color: var(--ink); color: var(--ink); }

/* Editor + preview */
.rx-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.rx-top select { width: auto; }
.rx-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 1100px) { .rx-layout { grid-template-columns: 1fr; } }
.rx-preview { position: sticky; top: calc(64px + env(safe-area-inset-top, 0px)); max-height: calc(100vh - 80px); overflow: auto;
  background: color-mix(in srgb, var(--text) 8%, var(--paper)); border-radius: var(--r-lg); padding: 1rem; }
@media (max-width: 1100px) { .rx-preview { position: static; max-height: none; } }

.med-search { position: relative; margin-bottom: .7rem; }
.med-results { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: .3rem; list-style: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: 0 10px 30px rgba(0,0,0,.18); max-height: 320px; overflow: auto; }
.med-results li { padding: .45rem .6rem; border-radius: 6px; cursor: pointer; }
.med-results li.on, .med-results li:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); }
.med-results .sub { display: block; font-size: .8rem; color: var(--muted); }
.med-results .custom { color: var(--ink); font-weight: 600; border-top: 1px solid var(--line); margin-top: .2rem; }
.med-list { display: grid; gap: .5rem; }
.med-row { border: 1px solid var(--line); border-radius: var(--r-sm); padding: .5rem; display: grid; gap: .4rem; }
.med-line { display: flex; gap: .35rem; align-items: center; }
.med-line input, .med-line select { min-height: 36px; padding: .3rem .5rem; font-size: .92rem; }
.med-n { font-weight: 700; width: 1.4rem; flex: none; }
.w-form { width: 4.5rem !important; flex: none; }
.w-name { flex: 2; font-weight: 600; }
.w-str { flex: 1; }
.sub-line { padding-left: 1.75rem; flex-wrap: wrap; }
.sub-line > * { flex: 1 1 7rem; }
.sub-line .w-note { flex: 2 1 10rem; }
.med-act { display: flex; gap: .2rem; flex: none; }
.med-act button { font: inherit; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--text); cursor: pointer; }
.med-act button:disabled { opacity: .35; cursor: default; }
.med-act [data-rm]:hover { background: var(--danger); color: #fff; border-color: var(--danger); }
.empty-meds { padding: .5rem 0; }
#historyBox { margin-top: .8rem; padding-top: .8rem; border-top: 1px dashed var(--line); }
.hist { display: flex; justify-content: space-between; gap: .75rem; align-items: center; padding: .45rem 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.hist .sub { display: block; color: var(--muted); font-size: .82rem; }

/* ---------- The prescription sheet (screen + print) ---------- */
.rx-sheet {
  --rx-ink: #0f2a44;
  width: 100%; max-width: 794px; min-height: 1060px; margin: 0 auto; background: #fff; color: #111;
  padding: 34px 38px; box-shadow: 0 4px 24px rgba(0,0,0,.18); display: flex; flex-direction: column;
  font: 13.5px/1.5 var(--font-body);
}
.rx-sheet[data-paper="A5"] { max-width: 560px; min-height: 790px; padding: 24px 26px; font-size: 12px; }
.rx-head { display: flex; justify-content: space-between; gap: 1.5rem; padding-bottom: 12px; border-bottom: 3px double var(--rx-ink); }
.rx-head p { margin: 0; }
.rx-doc h2 { font: 700 1.55em/1.15 var(--font-num); color: var(--rx-ink); margin: 0 0 2px; }
.rx-doc .deg { font-weight: 600; }
.rx-doc .reg { font-size: .9em; color: #444; }
.rx-chamber { text-align: right; max-width: 45%; }
.rx-chamber .lbl { font-size: .78em; letter-spacing: .08em; text-transform: uppercase; color: #666; }
.rx-patient { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; padding: 8px 0; border-bottom: 1px solid #bbb; }
.rx-patient b { color: var(--rx-ink); }
.rx-body { flex: 1; display: grid; grid-template-columns: 34% 1fr; min-height: 520px; }
.rx-left { border-right: 1px solid #bbb; padding: 12px 14px 12px 0; }
.rx-left section + section { margin-top: 12px; }
.rx-sheet h4 { font: 700 .82em var(--font-body); text-transform: uppercase; letter-spacing: .05em; color: var(--rx-ink); margin: 0 0 3px; }
.rx-sheet ul { margin: 0; padding-left: 1.1em; }
.rx-right { padding: 10px 0 12px 18px; }
.rx-symbol { font: 700 2.2em/1 Georgia, 'Times New Roman', serif; color: var(--rx-ink); margin-bottom: 6px; }
.rx-meds { margin: 0 0 14px; padding-left: 1.3em; }
.rx-meds li { margin-bottom: 9px; }
.rx-meds .m-gen { font-size: .85em; color: #555; font-style: italic; }
.rx-meds .m-dose { font-weight: 500; }
.rx-meds .m-note { font-size: .9em; color: #333; }
.rx-advice { margin-top: 10px; }
.rx-follow { margin-top: 10px; }
.rx-foot { margin-top: auto; padding-top: 10px; border-top: 1px solid #bbb; display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; font-size: .88em; color: #444; }
.rx-foot p { margin: 0; }
.rx-sign { order: 2; margin-left: auto; min-width: 160px; text-align: center; padding-top: 34px; }
.rx-sign span { display: block; border-top: 1px solid #333; padding-top: 2px; }

@media print {
  body { background: #fff !important; }
  .topbar, .no-print, #toasts, .notice-banner { display: none !important; }
  .wrap { padding: 0 !important; max-width: none !important; }
  .rx-layout { display: block !important; }
  .rx-preview { position: static !important; max-height: none !important; overflow: visible !important; padding: 0 !important; background: none !important; }
  .rx-sheet { box-shadow: none !important; max-width: none !important; width: 100% !important; min-height: calc(100vh - 2px) !important; padding: 0 !important; }
  :root { padding: 0 !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- Fixes: empty states ---------- */
.board > .empty { grid-column: 1 / -1; }
.token-num.idle { font: 600 clamp(1.15rem, 4.5vw, 1.6rem)/1.3 var(--font-body); letter-spacing: 0; text-shadow: none; opacity: .85; padding: 1.4rem 0 1rem; }

/* ============================================================
   Responsive layer (phones ≤ 600 px, tablets ≤ 900 px)
   ============================================================ */
.toplinks { display: flex; gap: 1rem; margin-left: auto; }
.topbar .topnav { margin-left: 1rem; }
.toplinks + .topnav { margin-left: 1.25rem; }
.topbar:not(:has(.toplinks)) .topnav { margin-left: auto; }
.preview-label { display: none; font-size: .85rem; color: var(--muted); margin: 0 0 .6rem; }
.jump-preview { display: none; }

@media (max-width: 1100px) {
  .jump-preview { display: inline-flex; }
  .preview-label { display: flex; justify-content: space-between; gap: .5rem; }
}

@media (max-width: 900px) {
  .wrap { padding: 1rem .9rem 2.5rem; }
  .panel { padding: 1rem; }
}

@media (max-width: 600px) {
  body { font-size: 15.5px; }
  /* Top bar: brand + status on row 1, page links scroll on row 2 */
  .topbar { padding: .5rem .9rem; gap: .35rem .75rem; }
  .brand { font-size: 1.05rem; }
  .topbar .topnav { margin-left: auto; gap: .5rem; }
  .conn span { display: none; }                       /* dot only */
  .who { max-width: 8.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; }
  .toplinks { order: 5; flex-basis: 100%; margin: 0 -.9rem; padding: .35rem .9rem 0; gap: 1.1rem;
              overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--line); white-space: nowrap; }
  .toplinks::-webkit-scrollbar { display: none; }
  .toplinks + .topnav { margin-left: auto; }

  h1 { font-size: 1.45rem; }
  .hello { margin-bottom: .75rem; }
  .admin-hello { align-items: stretch; }
  .admin-hello .row-gap { width: 100%; }
  .admin-hello .row-gap .btn { flex: 1; }

  /* Keyboard hints mean nothing on a phone */
  kbd { display: none; }
  .controls { gap: .4rem; }
  .controls .btn { padding-inline: .35rem; min-height: 46px; }
  .btn.xl { min-height: 58px; font-size: 1.15rem; }
  .seg .btn { padding-inline: .3rem; font-size: .92rem; }

  .stats dd { font-size: 1.6rem; }
  .stats > div { padding: .45rem .6rem; }
  .token-num { font-size: clamp(4.2rem, 24vw, 6rem); }
  .map { height: 260px; }

  /* Tables: wide data tables scroll sideways inside their card instead of squashing */
  .admin-table { min-width: 640px; }
  .table-scroll { margin: 0 -1rem; padding: 0 1rem; }
  .queue td, .queue th { padding: .5rem .35rem; }

  /* Assistant/patient queue table: actions drop under the patient on small screens */
  .queue:not(.admin-table) tr { display: grid; grid-template-columns: 2.6rem 1fr auto; align-items: center; border-bottom: 1px solid var(--line); }
  .queue:not(.admin-table) thead { display: none; }
  .queue:not(.admin-table) td { border: 0; }
  .queue:not(.admin-table) td.row-act { grid-column: 2 / -1; text-align: left; padding-top: 0; white-space: normal; }
  .queue:not(.admin-table) td.row-act:empty { display: none; }
  .queue:not(.admin-table) td[colspan] { grid-column: 1 / -1; }

  /* Forms */
  .form-grid { grid-template-columns: 1fr; }
  .form-grid.g4 { grid-template-columns: 1fr 1fr; }
  .form-grid.g4 .span2 { grid-column: 1 / -1; }
  .walkin { grid-template-columns: 1fr; }
  .dlg-form { padding: 1rem; }
  .dlg { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; margin: 0; }
  .dlg-actions { position: sticky; bottom: 0; background: var(--surface); padding-top: .5rem; }
  .dlg-actions .btn { flex: 1; }

  /* Patient pages */
  .profile { gap: .8rem; align-items: flex-start; }
  .profile .avatar { width: 58px; height: 58px; font-size: 1.5rem; }
  .doc-card { padding: .85rem; gap: .75rem; }
  .doc-live { flex-basis: 100%; flex-direction: row; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; justify-items: start; }
  .mine-num { font-size: 2.7rem; min-width: 4.5rem; }

  /* Admin switches */
  .switch-row { flex-direction: row; align-items: center; }
  .switch-row:has(.notice-edit), .switch-row:has(input[type=time]) { flex-direction: column; align-items: stretch; }
  .tabs { margin: 0 -.9rem 1rem; padding: 0 .9rem; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { padding: .55rem .7rem; }
  .row-gap input { min-width: 0; flex: 1 1 100%; }
  .queue-tools .row-gap .btn { flex: 1; }

  /* Prescription editor */
  .rx-top { flex-direction: column; align-items: stretch; gap: .6rem; }
  .rx-top .row-gap { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
  .rx-top .row-gap #printBtn { grid-column: 1 / -1; min-height: 48px; }
  .rx-top .row-gap .btn, .rx-top select { padding-inline: .3rem; font-size: .9rem; }
  .med-line { flex-wrap: wrap; }
  .w-form { width: 3.6rem !important; }
  .w-name { flex: 1 1 8rem; }
  .w-str { flex: 1 1 5rem; }
  .med-act { margin-left: auto; }
  .sub-line { padding-left: 0; }
  .sub-line > * { flex: 1 1 45%; }
  .rx-preview { padding: .5rem; margin: 0 -.9rem; border-radius: 0; }
  .hist { flex-direction: column; align-items: stretch; }
}

/* The preview is always drawn at real A4/A5 size and scaled to fit (rx.js sets --fit),
   so what you see on any screen is exactly what prints */
.rx-sheet { width: 794px; max-width: none; zoom: var(--fit, 1); }
.rx-sheet[data-paper="A5"] { width: 560px; max-width: none; }
@media print { .rx-sheet { zoom: 1 !important; width: 100% !important; } }

@media (max-width: 600px) {
  /* keep brand, status and logout on one row */
  .topbar .topnav { flex: 1 1 0; min-width: 0; justify-content: flex-end; flex-wrap: nowrap; }
  .who { min-width: 0; max-width: 7rem; }
  .topnav .btn.sm { padding-inline: .55rem; flex: none; }
  .jump-preview, .rx-top .btn { white-space: nowrap; }
  .admin-table { min-width: 760px; }
  .admin-hello .row-gap .btn { white-space: nowrap; font-size: .9rem; }
}
.admin-table td:first-child { min-width: 220px; }
.admin-table .row-act { white-space: nowrap; }

/* ============================================================
   Wide screens: working pages use the space (patient pages stay readable)
   ============================================================ */
.page-rx .wrap        { max-width: 1760px; }
.page-admin .wrap,
.page-assistant .wrap { max-width: 1500px; }
.page-doctor .wrap    { max-width: 1400px; }

/* Prescription: give the preview its real A4 width when the screen allows it */
@media (min-width: 1500px) {
  .page-rx .rx-layout { grid-template-columns: minmax(560px, 1fr) 842px; gap: 1.25rem; }
  .page-rx .rx-editor .form-grid.g4 { grid-template-columns: repeat(6, 1fr); }
  .page-rx .rx-editor .form-grid.g4 .span2 { grid-column: span 2; }
}
@media (min-width: 1500px) and (max-height: 1000px) {
  .page-rx .rx-preview { max-height: calc(100vh - 76px); }
}

/* ---------- Diagnosis / investigation chip pickers ---------- */
.chipbox { position: relative; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; min-height: 46px;
  padding: .35rem .45rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); cursor: text; }
.chipbox:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 20%, transparent); }
.chip-list { display: contents; }
.chip-item { display: inline-flex; align-items: center; gap: .25rem; padding: .2rem .25rem .2rem .65rem; border-radius: 99px;
  background: color-mix(in srgb, var(--ink) 12%, var(--surface)); color: var(--text); font-size: .9rem; font-weight: 500; cursor: default; }
.chip-item button { font: inherit; width: 22px; height: 22px; border-radius: 50%; border: 0; background: transparent; color: var(--muted); cursor: pointer; line-height: 1; }
.chip-item button:hover { background: var(--danger); color: #fff; }
.chip-input { flex: 1 1 10rem; border: 0 !important; box-shadow: none !important; min-height: 32px !important; padding: .2rem .3rem !important; background: transparent; }
.picker .med-results { top: calc(100% + 4px); }
.quick-picks { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-top: .5rem; }
.quick-picks button { font: inherit; font-size: .82rem; padding: .2rem .65rem; border-radius: 99px; border: 1px dashed color-mix(in srgb, var(--ink) 40%, var(--line));
  background: transparent; color: var(--ink); cursor: pointer; }
.quick-picks button:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); }
.seg-inline { display: inline-grid; grid-template-columns: auto auto; gap: 0; }
.seg-inline .seg-btn { border-radius: 0; }
.seg-inline .seg-btn:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.seg-inline .seg-btn:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; margin-left: -1px; }
.seg-inline .seg-btn.on { background: var(--ink); border-color: var(--ink); color: #fff; }
@media (prefers-color-scheme: dark) { .seg-inline .seg-btn.on { color: #0b1f30; } }
pre.example { margin: 0; padding: .6rem .8rem; background: var(--paper); border-radius: var(--r-sm); font-size: .82rem; overflow-x: auto; white-space: pre; }

/* ---------- Print layout bar (letterhead on/off) ---------- */
.print-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; padding: .7rem 1rem; margin-bottom: 1rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.pb-item { display: flex; align-items: center; gap: .55rem; cursor: pointer; font-weight: 400; }
.pb-mm { display: flex; align-items: center; gap: .4rem; font-size: .9rem; font-weight: 400; }
.pb-mm input { width: 4.5rem; min-height: 34px; padding: .2rem .4rem; }
.pb-note { margin-left: auto; }
@media (max-width: 600px) { .pb-note { margin-left: 0; flex-basis: 100%; } .print-bar { gap: .6rem; } }

.rx-pad-space { position: relative; flex: none; border: 2px dashed #c9d3dc; border-radius: 6px; display: grid; place-items: center;
  color: #8a97a3; font-size: .85em; margin-bottom: 6px; }
.rx-pad-space.foot { margin: 6px 0 0; }
.rx-sheet.no-head .rx-patient { border-top: 1px solid #bbb; }
@media print {
  .rx-pad-space { border: 0 !important; }
  .rx-pad-space span { display: none !important; }
}

/* ---------- Tighter patient line (normal layout) ---------- */
.rx-patient { gap: .15rem 1rem; padding: 5px 0; font-size: .95em; }
.rx-sheet.no-head .rx-patient { padding-top: 4px; }
.rx-pad-space { margin-bottom: 0; }
.rx-left { padding-top: 8px; }
.rx-right { padding-top: 6px; }
.rx-left section + section { margin-top: 8px; }
.rx-meds li { margin-bottom: 6px; }

/* ============================================================
   "Match my pad": every block placed in mm from the paper's top-left corner
   ============================================================ */
.rx-sheet.pad-fit {
  position: relative; display: block; padding: 0; overflow: hidden;
  width: 210mm; height: 297mm; min-height: 0; font-size: var(--pad-font, 10pt); line-height: 1.35;
}
.rx-sheet.pad-fit[data-paper="A5"] { width: 148mm; height: 210mm; }
.pad-fit .pf { position: absolute; }
.pad-fit .pf-name, .pad-fit .pf-age, .pad-fit .pf-sex, .pad-fit .pf-date, .pad-fit .pf-rxno { white-space: nowrap; }
.pad-fit .pf-left, .pad-fit .pf-rx { overflow: hidden; }
.pad-fit .pf-left section + section { margin-top: 2.5mm; }
.pad-fit .rx-symbol { font-size: 1.8em; margin-bottom: 1.5mm; }
.pad-fit .rx-meds { margin: 0 0 3mm; }
.pad-fit .rx-meds li { margin-bottom: 2mm; }
.pad-fit.pad-lines .pf-left { border-right: 1px solid #999; padding-right: 3mm; }
.pad-fit .pf-foot { display: flex; justify-content: space-between; align-items: flex-end; font-size: .85em; color: #444; }
.pad-fit .pf-hint { display: none; }
.pf-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; opacity: var(--pad-img, .35); pointer-events: none; }

/* Editing: dashed blue boxes you can drag */
.pad-edit .pf[data-drag] { outline: 1.5px dashed #2f7de1; outline-offset: 1mm; background: rgba(47, 125, 225, .06); cursor: move; touch-action: none; min-width: 12mm; min-height: 4mm; }
.pad-edit .pf[data-drag]::before { content: attr(data-label); position: absolute; top: -4.2mm; left: -1mm; font: 600 2.6mm/1 var(--font-body);
  color: #fff; background: #2f7de1; padding: .4mm 1.2mm; border-radius: 1mm; white-space: nowrap; }
.pad-edit .pf.dragging { outline-style: solid; background: rgba(47, 125, 225, .14); z-index: 5; }
.pad-edit .pf-hint { display: inline; color: #8a97a3; font-style: italic; }
.pad-gridlines::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(to right, rgba(47,125,225,.22) 1px, transparent 1px), linear-gradient(to bottom, rgba(47,125,225,.22) 1px, transparent 1px),
                    linear-gradient(to right, rgba(47,125,225,.08) 1px, transparent 1px), linear-gradient(to bottom, rgba(47,125,225,.08) 1px, transparent 1px);
  background-size: 10mm 10mm, 10mm 10mm, 5mm 5mm, 5mm 5mm; }

/* Pad editor panel */
.pad-panel { background: var(--surface); border: 2px solid #2f7de1; border-radius: var(--r-lg); padding: 1rem 1.2rem; margin-bottom: 1rem; }
.pad-panel-head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: flex-start; margin-bottom: .8rem; }
.pad-panel-head p { max-width: 52rem; }
.pad-panel .pad-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .8rem; }
.pad-panel fieldset { border: 1px solid var(--line); border-radius: var(--r-sm); padding: .6rem .8rem; margin: 0; display: grid; gap: .4rem; align-content: start; }
.pad-panel legend { font-weight: 600; padding: 0 .3rem; }
.pad-table { border-collapse: collapse; width: 100%; font-size: .88rem; }
.pad-table th { text-align: left; font-weight: 500; color: var(--muted); padding: .15rem .3rem; }
.pad-table td { padding: .15rem .2rem; }
.pad-table input { width: 4.6rem; min-height: 32px; padding: .15rem .35rem; }
.pad-panel input[type=range] { width: 8rem; padding: 0; min-height: 0; }

@media print {
  .pad-fit { width: 100% !important; height: 100vh !important; }
  .pad-edit .pf[data-drag] { outline: 0 !important; background: none !important; }
  .pad-edit .pf[data-drag]::before, .pf-photo, .pf-hint { display: none !important; }
  .rx-sheet.pad-fit:not(.grid-print)::after { content: none !important; }
}

/* Locked print customisation */
.print-locked { display: flex; justify-content: space-between; align-items: center; gap: .6rem 1rem; flex-wrap: wrap;
  padding: .7rem 1rem; margin-bottom: 1rem; border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--break) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--break) 40%, transparent); }
.print-locked .muted { display: block; }
#profPrintFields input:disabled { opacity: .5; }

/* ---------- Patient line: evenly spread across the page, clear gaps ----------
   Inline-blocks + justify spread the items across the full width while copy/paste
   still gives one clean line: "Name: … · Age: … · Sex: … · Date: …" */
.rx-patient { display: block; text-align: justify; text-align-last: justify; padding: 8px 2px; font-size: 1em; line-height: 1.6; }
.rx-patient .pi { display: inline-block; text-align: left; text-align-last: left; white-space: nowrap; }
.rx-patient .pi-name { white-space: normal; max-width: 35%; vertical-align: top; }
.rx-patient .pi b { color: var(--rx-ink); font-weight: 700; margin-right: 3px; }
.rx-patient .pv { font-weight: 500; }
.rx-patient .pi-sep { display: inline-block; color: #9aa6b1; font-weight: 700; padding: 0 6px; text-align-last: left; }
.rx-sheet[data-paper="A5"] .rx-patient .pi-sep { padding: 0 3px; }
@media print { .rx-patient .pi-sep { color: #999 !important; } }

/* ---------- Page layout (manual) : the same mm values for screen and print ---------- */
.rx-sheet.styled:not(.pad-fit) {
  padding: var(--st-top) var(--st-right) var(--st-bottom) var(--st-left);
  font-size: var(--st-font); line-height: var(--st-line);
}
.rx-sheet.styled:not(.pad-fit) .rx-doc h2 { font-size: var(--st-name); }
.rx-sheet.styled:not(.pad-fit) .rx-patient { margin-top: var(--st-gap); }
.rx-sheet.styled:not(.pad-fit) .rx-body { grid-template-columns: var(--st-left-col) 1fr; }
.rx-sheet.styled:not(.pad-fit) .rx-meds li { margin-bottom: calc(.35em * var(--st-line)); }
@media print {
  /* page margins come from @page (set from the same values), so the sheet itself has none */
  .rx-sheet.styled:not(.pad-fit) { padding: 0 !important; min-height: calc(100vh - 1px) !important; }
}

.st-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: .3rem 1.5rem; }
.st-row { display: grid; grid-template-columns: minmax(9rem, 1.2fr) minmax(6rem, 1fr) auto; align-items: center; gap: .6rem;
  font-weight: 400; font-size: .92rem; padding: .25rem 0; border-bottom: 1px dashed var(--line); }
.st-row input[type=range] { width: 100%; min-height: 0; padding: 0; accent-color: var(--ink); }
.st-num { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; color: var(--muted); font-size: .85rem; }
.st-num input { width: 4.4rem; min-height: 32px; padding: .15rem .35rem; }
@media (max-width: 600px) { .st-row { grid-template-columns: 1fr auto; } .st-row > span:first-child { grid-column: 1 / -1; } }
.searchbox-row { display: flex; gap: .6rem; margin-top: 1rem; flex-wrap: wrap; }
.searchbox-row .searchbox { flex: 1 1 18rem; margin: 0; }
.searchbox-row select { min-height: 54px; font-size: 1rem; flex: 0 1 14rem; }
.scope-tag { display: inline-block; vertical-align: middle; margin-left: .5rem; font: 600 .8rem var(--font-body); padding: .2rem .7rem;
  border-radius: 99px; background: color-mix(in srgb, var(--live) 14%, transparent); color: var(--live); }
.scope-tag.main { background: var(--ink); color: #fff; }
@media (prefers-color-scheme: dark) { .scope-tag.main { color: #0b1f30; } }

/* ============================================================
   Serial reports
   ============================================================ */
.report-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .7rem 1rem; }
.rc-field { display: grid; gap: .25rem; font-size: .88rem; font-weight: 500; }
.rc-field input, .rc-field select { min-height: 40px; width: auto; min-width: 10rem; }
.rc-actions { margin-left: auto; }
.report { background: #fff; color: #111; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.4rem 1.6rem; }
.rp-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; padding-bottom: .8rem; border-bottom: 3px double #123a5a; }
.rp-head h2 { color: #123a5a; font-size: 1.45rem; margin: 0; }
.rp-head p { margin: .2rem 0 0; color: #444; }
.rp-meta { text-align: right; font-size: .82rem; color: #666 !important; }
.rp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: .5rem; margin: 1rem 0; }
.rp-kpis > div { border: 1px solid #d6dee5; border-radius: 8px; padding: .45rem .7rem; }
.rp-kpis dt { font-size: .78rem; color: #5d6e7d; }
.rp-kpis dd { margin: 0; font: 700 1.5rem/1.15 var(--font-num); color: #123a5a; font-variant-numeric: tabular-nums; }
.report h3 { font-size: 1.05rem; color: #123a5a; margin: 1.1rem 0 .4rem; }
.rp-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.rp-table th { text-align: left; font-weight: 600; font-size: .8rem; color: #5d6e7d; padding: .4rem .45rem; border-bottom: 2px solid #123a5a; white-space: nowrap; }
.rp-table td { padding: .4rem .45rem; border-bottom: 1px solid #e3e8ed; vertical-align: top; }
.rp-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rp-table .sub { display: block; font-size: .78rem; color: #6b7a88; }
.rp-table tfoot td { font-weight: 700; border-top: 2px solid #123a5a; border-bottom: 0; background: #f3f6f9; }
.rp-table tbody tr:nth-child(even) td { background: #fafbfc; }
.rp-daily tr.zero td { color: #9aa6b1; }
.rp-daily .bar-col { width: 22%; min-width: 80px; }
.rp-daily .bar { display: block; height: 10px; border-radius: 3px; background: #2d6a9a; min-width: 1px; }
.rp-note { margin-top: 1rem; font-size: .78rem; color: #6b7a88; }

@media print {
  body.printing-report .topbar, body.printing-report .hello, body.printing-report .tabs,
  body.printing-report .tabpane:not(#tab-reports), body.printing-report .no-print,
  body.printing-report #toasts, body.printing-report #sysBanner, body.printing-report dialog { display: none !important; }
  body.printing-report #tab-reports { display: block !important; }
  body.printing-report .wrap { max-width: none !important; padding: 0 !important; }
  body.printing-report .report { border: 0; padding: 0; border-radius: 0; }
  body.printing-report .table-scroll { overflow: visible !important; margin: 0 !important; padding: 0 !important; }
  .rp-table thead { display: table-header-group; }          /* repeat headers on every page */
  .rp-table tr { break-inside: avoid; }
  .rp-break { break-before: page; }                         /* day-by-day starts on its own page */
  .rp-table tfoot { display: table-row-group; }             /* total only once, at the end */
  .rp-daily .bar { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
@page { margin: 12mm; }

/* Report: searchable doctor picker + table filter */
.doc-pick { position: relative; min-width: 16rem; }
.doc-pick input { min-width: 16rem; }
.doc-pick .med-results { min-width: 100%; width: max-content; max-width: 28rem; }
.rp-section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.rp-section-head input { width: min(20rem, 100%); min-height: 36px; margin: .6rem 0 .4rem; }
@media print { .rp-table tr[hidden] { display: none !important; } }

/* Patient list report */
.report-type { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; margin-bottom: .9rem; padding-bottom: .9rem; border-bottom: 1px dashed var(--line); }
.pl-filter { width: min(22rem, 100%); margin: .9rem 0 0; min-height: 38px; }
.pl-doc { margin-top: 1.1rem; }
.pl-table .pl-cap th { border-bottom: 2px solid #123a5a; padding: .2rem 0 .3rem; text-transform: none; }
.pl-doc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.pl-name { font-size: 1.08rem; color: #123a5a; font-weight: 700; margin-right: .4rem; }
.pl-count { font-weight: 700; color: #123a5a; white-space: nowrap; }
.pl-table th { border-bottom-width: 1px; }
.pl-table tr.st-cancelled td { color: #9aa6b1; text-decoration: line-through; }
.pl-table tr.st-waiting td:nth-last-child(2), .pl-table tr.st-skipped td:nth-last-child(2) { color: #b43d36; }
@media print {
  .plist.break-doctors .pl-doc + .pl-doc { break-before: page; }
  .pl-doc-head { break-after: avoid; }
  .pl-doc[hidden], .pl-table tr[hidden] { display: none !important; }
}

/* Login history */
.mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .86rem; }
.ip-link { font: inherit; background: none; border: 0; padding: 0; color: var(--ink); cursor: pointer; text-decoration: underline dotted; }
.ip-link:hover { text-decoration: underline; }
tr.ev-failed td, tr.ev-blocked td { background: color-mix(in srgb, var(--danger) 5%, transparent); }
.kpi-warn dd { color: var(--danger); }
#lgKpis { margin: .2rem 0 .8rem; }

/* ============================================================
   Medicine Finder BD
   ============================================================ */
.page-meds .wrap { max-width: 1240px; }
.mf-hero h1 { display: flex; align-items: center; gap: .5rem; }
.bd-tag { font: 700 .9rem var(--font-body); background: #006a4e; color: #fff; padding: .15rem .55rem; border-radius: 6px; position: relative; }
.bd-tag::after { content: ''; position: absolute; width: .5rem; height: .5rem; border-radius: 50%; background: #f42a41; right: -.2rem; top: -.2rem; }
.mf-forms { margin-top: .7rem; }
.mf-forms button.on { background: var(--ink); color: #fff; border-style: solid; border-color: var(--ink); }
@media (prefers-color-scheme: dark) { .mf-forms button.on { color: #0b1f30; } }
.mf-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1rem; align-items: start; margin-top: 1rem; }
.mf-layout:has(#mfDetail[hidden]) { grid-template-columns: 1fr; }
@media (max-width: 900px) { .mf-layout { grid-template-columns: 1fr; } }
.mf-hint { padding: 1rem 0; }
.mf-generics { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: .7rem; }
.gen-chip { font: inherit; font-size: .88rem; padding: .3rem .7rem; border-radius: 99px; border: 1px solid color-mix(in srgb, #006a4e 45%, var(--line));
  background: color-mix(in srgb, #006a4e 8%, var(--surface)); color: var(--text); cursor: pointer; }
.gen-chip span { color: var(--muted); font-size: .8rem; }
.mf-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.mf-item { width: 100%; text-align: left; font: inherit; display: grid; grid-template-columns: 1fr auto; gap: .1rem 1rem; align-items: center;
  padding: .7rem .9rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--text); cursor: pointer; }
.mf-item:hover, .mf-item:focus-visible { border-color: var(--ink); }
.mf-name { grid-column: 1; }
.mf-sub { grid-column: 1; color: var(--muted); font-size: .88rem; }
.mf-price { grid-column: 2; grid-row: 1 / span 2; font: 700 1.05rem var(--font-num); color: #006a4e; }
.mf-formtag { font-size: .75rem; font-weight: 600; padding: .05rem .4rem; border-radius: 4px; background: var(--paper); color: var(--muted); margin-left: .2rem; }
.mf-detail { position: sticky; top: calc(64px + env(safe-area-inset-top, 0px)); }
@media (max-width: 900px) { .mf-detail { position: static; } }
.med-card h2 { font-size: 1.7rem; margin: 0 0 .6rem; }
.med-form { margin: 0; font-weight: 700; color: #006a4e; text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; }
.med-str { font-weight: 500; color: var(--muted); font-size: .7em; }
.med-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .5rem; margin: 0 0 1rem; }
.med-facts > div { border: 1px solid var(--line); border-radius: var(--r-sm); padding: .45rem .7rem; }
.med-facts dt { font-size: .78rem; color: var(--muted); }
.med-facts dd { margin: 0; font-weight: 600; }
.med-card h3 { font-size: 1.05rem; margin: 1rem 0 .4rem; }
.mf-alt tr.cheapest td { background: color-mix(in srgb, #006a4e 8%, transparent); }
.mf-alt .num { text-align: right; white-space: nowrap; }
.mf-save { background: color-mix(in srgb, #006a4e 10%, var(--surface)); border-radius: var(--r-sm); padding: .6rem .8rem; }
.link-btn { font: inherit; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; text-decoration: underline; text-underline-offset: 3px; }
.alt-list { padding-left: 1.1rem; }
.alt-list li { margin-bottom: .3rem; }
.mf-share { margin-top: 1rem; word-break: break-all; }
.mf-disclaimer { margin: 1.4rem 0 0; padding: .9rem 1.1rem; border-radius: var(--r-lg); font-size: .9rem;
  background: color-mix(in srgb, var(--break) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--break) 35%, transparent); }

/* Pharmacies on Medicine Finder */
.ph-list { list-style: none; margin: .4rem 0 .8rem; padding: 0; display: grid; gap: .45rem; }
.ph-card { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap;
  padding: .65rem .8rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.ph-card .sub { display: block; color: var(--muted); font-size: .85rem; }
.ph-card .ok-txt { color: #006a4e; font-weight: 600; }
.ph-actions { display: flex; gap: .35rem; flex: none; }
.ph-tools { margin-bottom: .2rem; }
.mf-none { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1rem 1.1rem; }
.mf-ask { margin-top: .4rem; }
.row-dim td { opacity: .6; }
.role-pharmacy { background: color-mix(in srgb, #006a4e 14%, transparent); color: #006a4e; }
@media (max-width: 600px) {
  .mf-alt td:first-child { min-width: 8.5rem; }
  .mf-alt .sub { white-space: nowrap; }
  .ph-actions { width: 100%; }
  .ph-actions .btn { flex: 1; }
}

/* ============================================================
   Emergency beds
   ============================================================ */
.emergency-link { color: #c62828 !important; font-weight: 700; }
.sos-banner { display: flex; align-items: center; gap: .9rem; text-decoration: none; color: #fff; background: #c62828;
  border-radius: var(--r-lg); padding: .85rem 1.1rem; margin: .4rem 0 1rem; box-shadow: 0 4px 14px rgba(198,40,40,.3); }
.sos-banner:hover { background: #b71c1c; }
.sos-icon { font-size: 2rem; line-height: 1; }
.sos-call { margin-left: auto; background: #fff; color: #c62828; font: 800 1.15rem var(--font-num); padding: .5rem .9rem; border-radius: 8px; white-space: nowrap; }
.em-head h1 { margin-bottom: .2rem; }
.em-tools { display: flex; justify-content: space-between; align-items: center; gap: .6rem 1rem; flex-wrap: wrap; margin-top: .7rem; }
.em-tools .row-gap input { min-width: 14rem; }
.em-filter button.on { background: #c62828; color: #fff; border-style: solid; border-color: #c62828; }
.em-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: .9rem; margin-top: .6rem; }
.em-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1rem 1.1rem; display: grid; gap: .7rem; }
.em-card.closed { opacity: .82; }
.em-card header { display: flex; justify-content: space-between; gap: .8rem; align-items: flex-start; }
.em-card h2 { font-size: 1.2rem; margin: 0; }
.em-card p { margin: .15rem 0 0; }
.em-badge { flex: none; font-weight: 700; font-size: .85rem; padding: .25rem .65rem; border-radius: 99px; white-space: nowrap; }
.em-badge.open { background: #e6f4ea; color: #137333; }
.em-badge.shut { background: #fde7e7; color: #c62828; }
.beds { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: .45rem; }
.bed { border-radius: 10px; padding: .45rem .4rem .4rem; text-align: center; display: grid; gap: 0; border: 2px solid transparent; }
.bed.free { background: #e6f4ea; color: #0d652d; }
.bed.full { background: #fde7e7; color: #b3261e; }
.bed.hl { border-color: currentColor; }
.bed-name { font-weight: 700; font-size: .8rem; letter-spacing: .03em; }
.bed-num { font: 800 1.7rem/1.1 var(--font-num); font-variant-numeric: tabular-nums; }
.bed.full .bed-num { font-size: 1.15rem; line-height: 1.7; }
.bed-of { font-size: .72rem; opacity: .8; }
.em-note { background: var(--paper); border-radius: var(--r-sm); padding: .45rem .7rem; font-size: .9rem; }
.em-card footer { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; }
.em-upd { font-size: .82rem; font-weight: 600; }
.em-upd.fresh { color: #137333; } .em-upd.ok { color: var(--muted); } .em-upd.old { color: #b3261e; }
.em-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.em-call { background: #c62828; border-color: #c62828; color: #fff !important; font-weight: 700; }
@media (max-width: 600px) {
  .sos-banner { flex-wrap: wrap; } .sos-call { margin-left: 0; width: 100%; text-align: center; }
  .em-tools .row-gap, .em-tools .row-gap input { width: 100%; min-width: 0; }
  .em-actions { width: 100%; } .em-actions .btn { flex: 1; }
}
@media (prefers-color-scheme: dark) {
  .bed.free, .em-badge.open { background: #12351f; color: #8fdca6; }
  .bed.full, .em-badge.shut { background: #3d1717; color: #ff9b94; }
}

/* Hospital bed desk */
.em-desk-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.em-toggle { grid-template-columns: 1fr 1fr; min-width: 16rem; }
.em-toggle .seg-btn.on.s-live { background: var(--live); border-color: var(--live); color: #fff; }
.em-toggle .seg-btn.on.s-offline { background: #c62828; border-color: #c62828; color: #fff; }
.desk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .8rem; }
.desk-ward { border: 2px solid var(--line); border-radius: var(--r-lg); padding: .8rem; text-align: center; display: grid; gap: .4rem; }
.desk-ward.free { border-color: #81c995; } .desk-ward.full { border-color: #f28b82; }
.dw-name { font-weight: 700; }
.dw-ctl { display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; gap: .4rem; }
.dw-btn { min-height: 64px; font-size: 2rem; font-weight: 700; padding: 0; }
.dw-num b { display: block; font: 800 2.6rem/1 var(--font-num); }
.dw-num span { font-size: .8rem; color: var(--muted); }
.warn-txt { color: #b3261e; font-weight: 600; }
.ward-set { border: 1px solid var(--line); border-radius: var(--r-sm); padding: .6rem .8rem; }
.ward-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .5rem; }
.ward-grid input { width: 100%; }
.role-hospital { background: #fde7e7; color: #c62828; }
.check-row > div { min-width: 0; }
.check-row strong { overflow-wrap: anywhere; }
body.cat-diag .price-col { display: none; }

/* ============================================================
   Entry counter — billing
   ============================================================ */
.page-billing .wrap { max-width: 1400px; }
.bill-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 900px) { .bill-layout { grid-template-columns: 1fr; } }
.bill-pay { position: sticky; top: calc(64px + env(safe-area-inset-top, 0px)); display: grid; gap: .6rem; }
.pay-lines { margin: 0; display: grid; gap: .35rem; }
.pay-lines > div { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .6rem; }
.pay-lines dt { color: var(--muted); }
.pay-lines dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.pay-lines .total { border-top: 2px solid var(--line); padding-top: .4rem; }
.pay-lines .total dd, .pay-lines .total dt { font: 800 1.6rem var(--font-num); color: var(--ink); }
.disc-in { display: inline-flex; gap: .3rem; } .disc-in input { width: 6rem; text-align: right; } .disc-in select { width: 4rem; }
#discReasonRow dd input { width: 100%; }
.pay-methods button.on { background: var(--ink); color: #fff; border-style: solid; border-color: var(--ink); }
@media (prefers-color-scheme: dark) { .pay-methods button.on { color: #0b1f30; } }
.due-line { margin: 0; min-height: 1.2em; font-weight: 600; }
.ok-txt { color: #137333; }
.cart td { padding: .45rem .4rem; } .cart .num { text-align: right; white-space: nowrap; font-weight: 600; }
.med-results li .r-price { margin-left: auto; color: #006a4e; }
.med-results li { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; }
.med-results li.no-price { opacity: .55; }
.ref-pick input { width: 100%; }
.hc-list { display: grid; gap: .7rem; }
.hc-card { border: 1px solid var(--line); border-left: 5px solid var(--line); border-radius: var(--r-sm); padding: .7rem .9rem; display: grid; gap: .5rem; background: var(--surface); }
.hc-card.st-new { border-left-color: #c62828; } .hc-card.st-assigned, .hc-card.st-on_the_way { border-left-color: #f9a825; } .hc-card.st-collected { border-left-color: #137333; }
.hc-card header { display: flex; justify-content: space-between; gap: .8rem; align-items: flex-start; }
.hc-card .sub { display: block; color: var(--muted); font-size: .86rem; }
.hc-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .5rem 1rem; font-size: .92rem; }
.hc-note { grid-column: 1 / -1; background: var(--paper); border-radius: 6px; padding: .3rem .6rem; }

/* Money receipt — only the receipt prints */
.receipt { display: none; }
@media print {
  body.printing-receipt .wrap > *:not(#receipt) { display: none !important; }
  body.printing-receipt .topbar, body.printing-receipt #toasts, body.printing-receipt dialog { display: none !important; }
  body.printing-receipt .wrap { padding: 0 !important; max-width: none !important; }
  body.printing-receipt #receipt { display: block !important; }
}
.receipt { color: #000; font: 12px/1.35 Arial, sans-serif; }
.receipt.r-thermal { width: 74mm; }
.receipt.r-a5 { font-size: 13px; }
.receipt table { width: 100%; border-collapse: collapse; }
.receipt .num { text-align: right; white-space: nowrap; }
.r-head { text-align: center; border-bottom: 1px dashed #000; padding-bottom: 4px; margin-bottom: 4px; }
.r-org { font-size: 1.3em; font-weight: 700; }
.r-title { margin-top: 4px; font-weight: 700; letter-spacing: .08em; border: 1px solid #000; display: inline-block; padding: 1px 8px; }
.r-small { font-size: .88em; }
.r-meta td { padding: 1px 0; vertical-align: top; } .r-meta td:first-child { width: 28%; color: #333; }
.r-items { margin-top: 4px; border-top: 1px dashed #000; } .r-items th { text-align: left; border-bottom: 1px solid #000; font-size: .9em; }
.r-items td { padding: 2px 0; vertical-align: top; } .r-items td:first-child, .r-items th:first-child { width: 6%; }
.r-tot { border-top: 1px dashed #000; margin-top: 3px; } .r-tot td { padding: 1px 0; }
.r-big td { font-weight: 700; font-size: 1.15em; }
.r-report { margin: 5px 0; padding: 3px; border: 1px solid #000; text-align: center; }
.r-foot { text-align: center; margin-top: 5px; font-size: .9em; }

/* Home collection — patient, collector */
.hc-map { height: 320px; }
.hc-chosen { margin: .5rem 0; } .hc-chosen button { border-style: solid; }
.hc-sum { display: grid; gap: .5rem; } .hc-sum .big { font-size: 1.4rem; color: var(--ink); }
.steps { list-style: none; padding: 0; margin: 1rem 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.steps li { text-align: center; font-size: .85rem; color: var(--muted); display: grid; justify-items: center; gap: .3rem; }
.steps li span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--paper); border: 2px solid var(--line); }
.steps li.done span { background: #137333; border-color: #137333; color: #fff; }
.steps li.now span { background: var(--ink); border-color: var(--ink); color: #fff; } .steps li.now { color: var(--text); font-weight: 700; }
.hc-collector { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .6rem .8rem; background: var(--paper); border-radius: var(--r-sm); margin-bottom: .8rem; }
.hc-done-box { border: 2px solid #137333; border-radius: var(--r-lg); padding: .8rem 1rem; display: grid; gap: .5rem; }
.jobs { display: grid; gap: .9rem; max-width: 640px; }
.job { background: var(--surface); border: 1px solid var(--line); border-left: 5px solid #f9a825; border-radius: var(--r-lg); padding: .9rem 1rem; display: grid; gap: .6rem; }
.job.st-collected { border-left-color: #137333; opacity: .85; }
.job header { display: flex; justify-content: space-between; gap: .6rem; } .job h2 { margin: 0; font-size: 1.2rem; }
.job-addr { margin: 0; font-weight: 600; }
.job-map { height: 170px; border-radius: var(--r-sm); }
.job-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.job-info { margin: 0; display: grid; gap: .3rem; } .job-info dt { font-size: .78rem; color: var(--muted); } .job-info dd { margin: 0; }
@media (max-width: 600px) { .job-actions { grid-template-columns: 1fr; } .steps li { font-size: .74rem; } }
.rp-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 1.2rem; }
@media print {
  body.printing-billing .topbar, body.printing-billing .hello, body.printing-billing .tabs, body.printing-billing .tabpane:not(#tab-billing),
  body.printing-billing .no-print, body.printing-billing #toasts, body.printing-billing #sysBanner { display: none !important; }
  body.printing-billing #tab-billing { display: block !important; }
  body.printing-report #btab-close { display: block !important; }
  body.printing-report .page-billing .btab:not(#btab-close) { display: none !important; }
}

/* ============================================================
   RIS — radiology reports
   ============================================================ */
.page-ris .wrap { max-width: 1800px; }
.ris-layout { display: grid; grid-template-columns: 300px minmax(380px, 1fr) minmax(420px, 1.05fr); gap: 1rem; align-items: start; }
@media (max-width: 1300px) { .ris-layout { grid-template-columns: 280px 1fr; } .ris-preview { grid-column: 1 / -1; } }
@media (max-width: 800px) { .ris-layout { grid-template-columns: 1fr; } }
.ris-list { display: grid; gap: .6rem; position: sticky; top: calc(64px + env(safe-area-inset-top, 0px)); max-height: calc(100vh - 90px); overflow: auto; }
.ris-status button.on { background: var(--ink); color: #fff; border-style: solid; border-color: var(--ink); }
.ris-items { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.ris-items button { width: 100%; text-align: left; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: .5rem .6rem; display: grid; gap: .1rem; cursor: pointer; }
.ris-items button.on { border-color: var(--ink); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ink) 25%, transparent); }
.ri-top { display: flex; justify-content: space-between; gap: .4rem; } .ri-sub { font-size: .8rem; color: var(--muted); }
.ris-items .tag { justify-self: start; margin-top: .15rem; }
.mod-tag { font: 700 .7rem var(--font-body); padding: .1rem .4rem; border-radius: 4px; color: #fff; background: #607d8b; white-space: nowrap; }
.mod-tag.m-USG { background: #00897b; } .mod-tag.m-XRAY { background: #5e35b1; } .mod-tag.m-CT { background: #e65100; } .mod-tag.m-MRI { background: #1565c0; }
.ris-editor { display: grid; gap: .6rem; }
.ris-editor textarea { font: 14px/1.55 ui-monospace, Consolas, monospace; }
.ris-ed-head { display: flex; justify-content: space-between; gap: .8rem; align-items: flex-start; } .ris-ed-head h2 { margin: 0; font-size: 1.15rem; }
.ed-rad { display: flex; align-items: center; gap: .4rem; font-size: .9rem; }
.ris-preview { background: #d9dee3; border-radius: var(--r-lg); padding: 14px; max-height: calc(100vh - 90px); overflow: auto; position: sticky; top: calc(64px + env(safe-area-inset-top, 0px)); }
.sign-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.sign-prev { height: 110px; border: 1px dashed var(--line); border-radius: var(--r-sm); display: grid; place-items: center; margin: .3rem 0 .5rem; color: var(--muted); font-size: .85rem;
  background: repeating-conic-gradient(#f2f2f2 0% 25%, #fff 0% 50%) 50% / 16px 16px; }
.sign-prev img { max-height: 100px; max-width: 100%; }

/* The report sheet (screen preview, patient page and print) */
.ris-report { position: relative; background: #fff; color: #111; font: 13.5px/1.55 Georgia, 'Times New Roman', serif; padding: 28px 34px; min-height: 900px;
  display: flex; flex-direction: column; box-shadow: 0 2px 10px rgba(0,0,0,.12); max-width: 794px; margin: 0 auto; }
.ris-watermark { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; font: 800 64px Arial, sans-serif;
  color: rgba(200, 40, 40, .12); transform: rotate(-28deg); }
.ris-head { text-align: center; border-bottom: 3px double #123a5a; padding-bottom: 8px; font-family: Arial, sans-serif; }
.ris-org { font-size: 22px; font-weight: 700; color: #123a5a; }
.ris-dept { margin-top: 6px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 12px; color: #123a5a; }
.ris-small { font-size: 11.5px; color: #444; }
.ris-pt { width: 100%; border-collapse: collapse; margin: 10px 0; font: 13px Arial, sans-serif; }
.ris-pt td { padding: 3px 6px; border: 1px solid #c9d1d9; } .ris-pt td:nth-child(odd) { background: #f3f6f9; width: 13%; color: #333; }
.ris-title { text-align: center; font: 700 17px Arial, sans-serif; text-decoration: underline; margin: 10px 0 8px; text-transform: uppercase; }
.ris-body p, .ris-imp p { margin: 0 0 4px; }
.ris-imp { margin-top: 12px; } .ris-imp h3 { font: 700 14px Arial, sans-serif; text-decoration: underline; margin: 0 0 4px; text-transform: uppercase; }
.ris-sign { margin-top: auto; padding-top: 24px; display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; }
.ris-signbox { position: relative; margin-left: auto; text-align: center; min-width: 230px; font-family: Arial, sans-serif; }
.ris-sigimg { display: block; max-height: 60px; max-width: 220px; margin: 0 auto -4px; }
.ris-seal { position: absolute; left: -95px; bottom: 8px; max-height: 95px; max-width: 110px; opacity: .9; }
.ris-signname { border-top: 1px solid #333; padding-top: 3px; }
.ris-unsigned { color: #b3261e; border: 1px dashed #b3261e; padding: 10px; font-weight: 700; }
.ris-typed { align-self: flex-end; }
@media print {
  body.printing-ris > *:not(#risPrint), body.printing-ris .wrap, body.printing-ris .topbar { display: none !important; }
  body.printing-ris #risPrint { display: block !important; }
  body.printing-ris .ris-report { box-shadow: none; padding: 0; min-height: calc(100vh - 2px); max-width: none; }
  body.printing-ris .ris-watermark { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}
#risPrint { display: none; }

/* Patient: my reports */
.rp-find { display: grid; grid-template-columns: 1fr 1fr auto; gap: .6rem; align-items: end; margin-top: .8rem; }
@media (max-width: 640px) { .rp-find { grid-template-columns: 1fr; } }
.rp-list { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; gap: .45rem; }
.rp-list li { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; border: 1px solid var(--line); border-radius: var(--r-sm); padding: .6rem .8rem; }
.rp-list .sub { display: block; color: var(--muted); font-size: .85rem; }
.rp-paper { background: #d9dee3; border-radius: var(--r-lg); padding: 12px; margin-top: 1rem; overflow-x: auto; }

/* LIS */
.mod-tag.m-LAB { background: #ad1457; }
.lis-entry td { padding: .3rem .4rem; vertical-align: middle; }
.lis-entry .res-in { width: 7.5rem; min-height: 34px; padding: .2rem .45rem; font-weight: 600; }
.flag-live { display: inline-block; width: 1.4rem; text-align: center; font-weight: 800; }
.flag-live.on { color: #c62828; }
.lis-table { width: 100%; border-collapse: collapse; font: 13px Arial, sans-serif; margin: 4px 0 8px; }
.lis-table th { text-align: left; border-bottom: 1.5px solid #123a5a; padding: 4px 6px; font-size: 12px; color: #123a5a; text-transform: uppercase; }
.lis-table td { padding: 4px 6px; border-bottom: 1px solid #e3e8ed; }
.lis-table tr.abn td { background: #fff4f4; } .lis-table .res { white-space: nowrap; }
.lis-table .flag { color: #c62828; font-weight: 800; }
.lis-comment { margin: 6px 0; font: 13px Arial, sans-serif; }

/* IPD */
.page-ipd .wrap { max-width: 1500px; }
.ipd-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 900px) { .ipd-layout { grid-template-columns: 1fr; } }
#ipdDetail { display: grid; gap: .9rem; }
#ipdDetail h3 { margin: 0 0 .4rem; }
.ipd-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.ipd-kpis dd { font-size: 1.3rem; }
.add-charge { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; align-items: center; }
.add-charge input[name=description] { flex: 1 1 14rem; } .add-charge .w-qty { width: 4.5rem; } .add-charge .w-rate { width: 8rem; }
.pay-list { margin: 0; padding-left: 1.1rem; }
.ipd-tot { margin-left: auto; margin-top: 8px; border-collapse: collapse; font: 13px Arial, sans-serif; min-width: 280px; }
.ipd-tot td { padding: 3px 6px; } .ipd-tot td:last-child { text-align: right; } .ipd-tot tr.big td { font-weight: 700; font-size: 15px; border-top: 1px solid #333; }
.lis-table .num { text-align: right; white-space: nowrap; }
#ipdPrint { display: none; }
@media print {
  body.printing-ipd .topbar, body.printing-ipd .wrap > *:not(#ipdPrint), body.printing-ipd #toasts { display: none !important; }
  body.printing-ipd #ipdPrint { display: block !important; }
  body.printing-ipd .ris-report { box-shadow: none; padding: 0; min-height: auto; max-width: none; }
}
@media print {
  body.printing-center .topbar, body.printing-center .hello, body.printing-center .tabs, body.printing-center .tabpane:not(#tab-center),
  body.printing-center .no-print, body.printing-center #toasts, body.printing-center #sysBanner { display: none !important; }
  body.printing-center #tab-center { display: block !important; }
}
.kpi-refund dd { color: #1565c0; }
/* address → map */
.addr-help #addrStatus { margin: .2rem 0 0; min-height: 1.2em; }
.addr-sug { list-style: none; margin: .3rem 0 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.addr-sug li + li { border-top: 1px solid var(--line); }
.addr-sug button { width: 100%; text-align: left; font: inherit; font-size: .9rem; padding: .5rem .7rem; background: var(--surface); color: var(--text); border: 0; cursor: pointer; }
.addr-sug button:hover { background: var(--paper); }

/* ============================================================
   Top menu — one menu for every page, ☰ on small screens
   ============================================================ */
.topbar { position: sticky; }
.menu-btn { display: none; }
.m-only { display: none; }
.toplinks .navlink { white-space: nowrap; }
.toplinks .nav-login { font-weight: 600; }
.toplinks .nav-ext { color: var(--muted); }
.toplinks .nav-home { font-weight: 700; }

@media (max-width: 900px) {
  .topbar { flex-wrap: nowrap !important; padding: .5rem .8rem !important; gap: .5rem !important; }
  .topbar .brand { margin-right: auto; }
  .menu-btn { display: inline-flex; align-items: center; gap: .45rem; order: 3; font: 600 .95rem var(--font-body); color: var(--ink);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: .45rem .7rem; min-height: 40px; cursor: pointer; }
  .mb-bars, .mb-bars::before, .mb-bars::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: relative; transition: transform .2s, opacity .2s; }
  .mb-bars::before, .mb-bars::after { content: ''; position: absolute; left: 0; }
  .mb-bars::before { top: -6px; } .mb-bars::after { top: 6px; }
  .menu-open .mb-bars { background: transparent; }
  .menu-open .mb-bars::before { transform: translateY(6px) rotate(45deg); }
  .menu-open .mb-bars::after { transform: translateY(-6px) rotate(-45deg); }
  .topbar .topnav { order: 2; margin-left: 0 !important; flex: none !important; }
  .topbar .topnav .d-only { display: none !important; }

  /* the menu panel drops down under the bar */
  .topbar .toplinks { display: none !important; }
  .topbar.menu-open .toplinks {
    display: flex !important; flex-direction: column; align-items: stretch; gap: 0 !important;
    position: absolute; top: 100%; left: 0; right: 0; margin: 0 !important; padding: .4rem .8rem .9rem !important;
    background: var(--surface); border-top: 1px solid var(--line) !important; border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 28px rgba(0,0,0,.14); max-height: calc(100dvh - 60px); overflow-y: auto; z-index: 60; white-space: normal;
  }
  .topbar.menu-open .toplinks .navlink { padding: .8rem .4rem; border-bottom: 1px solid var(--line); font-size: 1.02rem; text-decoration: none; }
  .topbar.menu-open .toplinks .navlink.on { color: var(--ink); font-weight: 700; box-shadow: inset 4px 0 0 var(--ink); padding-left: .8rem; }
  .menu-open .m-only { display: grid; gap: .5rem; padding-top: .8rem; }
  .menu-account .navlink { border-bottom: 0 !important; padding: .4rem .4rem !important; }
  .menu-account .btn { width: 100%; min-height: 44px; }
}
@media (min-width: 901px) {
  .topbar .d-only { display: inline-flex; }
}
/* mid-size screens (small laptops): keep the bar on one line */
@media (min-width: 901px) and (max-width: 1200px) {
  .topbar { flex-wrap: nowrap !important; gap: .6rem !important; }
  .topbar .toplinks { gap: .85rem !important; margin-left: auto; }
  .topbar .toplinks .navlink { font-size: .93rem; }
  .topbar .conn span, .topbar .who { display: none !important; }
  .topbar .topnav { margin-left: .6rem !important; flex: none !important; }
}
/* prescription photos */
.hc-photos { display: grid; gap: .5rem; margin-top: .6rem; }
.thumbs { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .3rem; }
.thumb { position: relative; display: block; width: 96px; height: 96px; margin: 0; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--line); background: var(--paper); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb button { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(0,0,0,.65); color: #fff; cursor: pointer; font-size: 13px; }

/* ============================================================
   Patient doctor search — text, department, branch
   ============================================================ */
.page-search .wrap { max-width: 1240px; }
.find-bar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: .6rem; margin-top: 1rem; }
.find-bar:not(:has(.find-branch)) { grid-template-columns: 1fr; }
.find-q, .find-branch { position: relative; display: block; margin: 0; }
.find-icon { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); pointer-events: none; font-size: 1.05rem; opacity: .7; }
.find-q input, .find-branch select { width: 100%; min-height: 54px; padding-left: 2.6rem !important; font-size: 1.02rem; border-radius: var(--r-lg); }
.dept-wrap { position: relative; margin-top: .8rem; }
.dept-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.dept-chips button { font: inherit; font-size: .92rem; display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .8rem; border-radius: 99px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; white-space: nowrap; min-height: 40px; }
.dept-chips button:hover { border-color: var(--ink); }
.dept-chips button.on { background: var(--ink); border-color: var(--ink); color: #fff; }
@media (prefers-color-scheme: dark) { .dept-chips button.on { color: #0b1f30; } }
.dept-chips .n { font-size: .78rem; font-weight: 700; padding: .05rem .45rem; border-radius: 99px; background: var(--paper); color: var(--muted); }
.dept-chips button.on .n { background: rgba(255,255,255,.22); color: inherit; }
.result-line { margin: .9rem 0 .4rem; color: var(--muted); }
.result-line b { color: var(--text); }
.results { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); gap: .7rem; }
.results > .empty { grid-column: 1 / -1; }
.results .doc-card { margin: 0; height: 100%; }
.doc-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin: .25rem 0 .15rem; }
.doc-tags .tag { font-size: .78rem; }
.doc-tags .tag.dept { background: color-mix(in srgb, var(--ink) 12%, var(--surface)); color: var(--ink); }
.doc-main { min-width: 0; }
.doc-main h2, .doc-place { overflow: hidden; text-overflow: ellipsis; }
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

@media (max-width: 700px) {
  .find-bar { grid-template-columns: 1fr; }
  /* department chips scroll sideways on phones, with a fade hinting there is more */
  .dept-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -.9rem; padding: 0 .9rem .2rem; scroll-snap-type: x proximity; }
  .dept-chips::-webkit-scrollbar { display: none; }
  .dept-chips button { scroll-snap-align: start; }
  .dept-wrap::after { content: ''; position: absolute; top: 0; right: -.9rem; bottom: .2rem; width: 2rem; pointer-events: none;
    background: linear-gradient(to right, transparent, var(--bg)); }
  .results { grid-template-columns: 1fr; }
  .page-search h1 { font-size: 1.55rem; }
}
/* the search area uses the full page width on desktop (the heading stays readable) */
.page-search .search-hero { max-width: none; }
.page-search .search-hero > h1, .page-search .search-hero > p.muted { max-width: 760px; }
@media (min-width: 701px) { .dept-chips button { min-height: 36px; padding: .35rem .75rem; } }
/* branch picker with search */
.combo { position: relative; }
.combo input[type=text] { width: 100%; min-height: 54px; padding-left: 2.6rem !important; padding-right: 2.4rem; font-size: 1.02rem; border-radius: var(--r-lg); }
.combo-clear { position: absolute; right: .55rem; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; border: 0;
  background: var(--paper); color: var(--muted); cursor: pointer; font-size: .85rem; }
.combo-list { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: .3rem 0; list-style: none; max-height: min(60vh, 380px); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: 0 12px 28px rgba(0,0,0,.14); }
.combo-list li { display: flex; justify-content: space-between; gap: .8rem; padding: .55rem .85rem; cursor: pointer; font-size: .95rem; }
.combo-list li.on, .combo-list li:hover { background: var(--paper); }
.combo-list li.zero { color: var(--muted); }
.combo-list li .n { font-size: .78rem; font-weight: 700; color: var(--muted); }
.combo-list li.none { color: var(--muted); cursor: default; }
.combo-list li:first-child { font-weight: 600; border-bottom: 1px solid var(--line); }

/* Department picker: phones only (desktop keeps the chips) */
.find-dept { display: none; }
.combo input[type=text] { text-overflow: ellipsis; }
@media (max-width: 700px) {
  .find-bar { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .find-bar .find-q { grid-column: 1 / -1; }
  .find-dept { display: block; }
  .find-bar:not(:has(.find-branch)) .find-dept { grid-column: 1 / -1; }
  .dept-wrap { display: none; }
  .find-bar .combo input[type=text] { min-height: 50px; font-size: .95rem; padding-left: 2.2rem !important; padding-right: 2rem; }
  .find-bar .combo .find-icon { left: .7rem; font-size: .95rem; }
  .find-bar .combo-clear { right: .35rem; width: 26px; height: 26px; }
  /* the open list uses the full width of both columns so long names fit */
  .find-dept .combo-list { left: 0; right: auto; width: calc(200% + .5rem); }
  .find-branch .combo-list { right: 0; left: auto; width: calc(200% + .5rem); }
  .find-bar:not(:has(.find-branch)) .find-dept .combo-list { width: 100%; }
  .combo-list li { padding: .7rem .85rem; }
}

/* ============================================================
   TOP Doctor + clearer card colours
   ============================================================ */
:root { --gold: #c8901a; --gold-ink: #6b4a00; --gold-bg: #fff7e2; --gold-line: #e9c46a;
        --dept-bg: #e3f4f1; --dept-ink: #00695c; --branch-bg: #edf1f6; --branch-ink: #3d4f66; }
@media (prefers-color-scheme: dark) {
  :root { --gold: #e7b545; --gold-ink: #ffe2a3; --gold-bg: #33290f; --gold-line: #9c7a2a;
          --dept-bg: #10332e; --dept-ink: #7fd8c8; --branch-bg: #1e2836; --branch-ink: #b6c4d6; }
}
.top-badge { display: inline-flex; align-items: center; gap: .3rem; font: 800 .74rem/1 var(--font-body); letter-spacing: .04em; text-transform: uppercase;
  color: var(--gold-ink); background: linear-gradient(135deg, #ffe7a3, #f6c453); border: 1px solid var(--gold-line);
  padding: .3rem .55rem; border-radius: 99px; margin-bottom: .3rem; box-shadow: 0 1px 0 rgba(255,255,255,.6) inset; }
@media (prefers-color-scheme: dark) { .top-badge { background: linear-gradient(135deg, #5a4513, #7a5d16); } }
.top-badge.sm { font-size: .64rem; padding: .18rem .4rem; margin: 0 0 0 .3rem; vertical-align: middle; }

/* cards */
.doc-card { border: 1px solid var(--line); transition: border-color .15s, box-shadow .15s, transform .15s; }
.doc-card:hover { border-color: var(--ink); box-shadow: 0 6px 18px rgba(18,58,90,.10); transform: translateY(-1px); }
.doc-card.is-top { border: 2px solid var(--gold-line); background: linear-gradient(135deg, var(--gold-bg) 0%, var(--surface) 60%); }
.doc-card.is-top:hover { border-color: var(--gold); box-shadow: 0 8px 22px rgba(200,144,26,.18); }
.doc-card.is-top .avatar { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--gold); }
.doc-card .doc-main h2 { color: var(--text); }
.doc-card .spec { color: var(--ink); font-weight: 500; }
.doc-tags .tag { background: var(--branch-bg); color: var(--branch-ink); border: 0; }
.doc-tags .tag.dept { background: var(--dept-bg); color: var(--dept-ink); }

/* the ⭐ chip */
.dept-chips .chip-top { border-color: var(--gold-line); color: var(--gold-ink); background: var(--gold-bg); font-weight: 600; }
.dept-chips .chip-top.on { background: linear-gradient(135deg, #f6c453, #e0a526); border-color: var(--gold); color: #3b2a00; }
.dept-chips .chip-top .n { background: rgba(255,255,255,.55); color: var(--gold-ink); }

/* doctor page */
.profile.is-top .avatar { box-shadow: 0 0 0 4px var(--surface), 0 0 0 7px var(--gold); }
.profile .doc-tags { margin: .2rem 0 .3rem; }

/* admin */
.top-cell { white-space: nowrap; }
.top-rank { width: 4.2rem; min-height: 32px; padding: .15rem .4rem; margin-left: .35rem; vertical-align: middle; }

/* 🔔 "Turn on alerts" card (push notifications) */
.push-card { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin: .8rem 0; padding: .75rem .9rem;
  border: 1px solid var(--line, #dde); border-left: 5px solid #e0a526; border-radius: 10px; background: var(--surface, #fff); }
.push-card .push-ico { font-size: 1.6rem; line-height: 1; }
.push-card .push-txt { flex: 1 1 220px; min-width: 0; }
.push-card .push-btns { display: flex; gap: .4rem; flex-wrap: wrap; }
.push-card .btn { min-height: 40px; }

/* 🚑 "Your ambulance" bar (shown on every page while the patient's request is running) */
.my-amb { display: flex; align-items: center; gap: .7rem; margin: .6rem 0 .8rem; padding: .7rem .9rem; border-radius: 12px;
  background: #c62828; color: #fff !important; text-decoration: none !important; box-shadow: 0 3px 12px rgba(198,40,40,.3); }
.my-amb-ico { font-size: 1.7rem; line-height: 1; animation: my-amb-pulse 1.6s infinite; }
.my-amb-txt { flex: 1; min-width: 0; display: grid; gap: .1rem; } .my-amb-txt span { font-size: .9rem; opacity: .92; }
.my-amb-go { font-size: 1.8rem; line-height: 1; }
@keyframes my-amb-pulse { 50% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .my-amb-ico { animation: none; } }

/* 🛏️ bed reservation */
.my-amb.my-bed { background: #1565c0; box-shadow: 0 3px 12px rgba(21,101,192,.3); }
.em-reserve { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin: .6rem 0 .2rem; padding: .6rem .7rem;
  border-radius: 10px; background: #eaf3fe; border: 1px solid #c8defa; }
.em-res-btns { display: flex; flex-wrap: wrap; gap: .4rem; }
.res-dlg { border: 0; border-radius: 16px; padding: 0; width: min(440px, calc(100vw - 32px)); box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.res-dlg::backdrop { background: rgba(10,25,40,.55); }
.res-form { display: grid; gap: .7rem; padding: 1.1rem 1.1rem 1rem; }
.res-form h2 { margin: 0; } .res-form p { margin: 0; } .res-form label { display: grid; gap: .25rem; }
.res-info { background: #f2f7f2; border-radius: 8px; padding: .55rem .7rem; color: #24452c; }
.res-form .err:empty { display: none; }
.bed-box { max-width: 560px; margin: 0 auto; }
.bed-card { display: grid; gap: .8rem; } .bed-card > * { margin: 0; }
.bed-head { font-size: 1.45rem; } .bed-card.st-held .bed-head { color: #137333; }
.bed-code, .bed-timer { display: grid; justify-items: center; text-align: center; gap: .1rem; padding: .8rem; border-radius: 12px; }
.bed-code { background: #123a5a; color: #fff; } .bed-code span { font-size: .9rem; opacity: .85; }
.bed-code b { font: 800 2.6rem/1.1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .25em; padding-left: .25em; }
.bed-timer { background: #fff6e0; border: 1px solid #f1d9a0; } .bed-timer b { font-size: 2rem; font-variant-numeric: tabular-nums; color: #8a5a00; }
.bed-timer span { font-size: .88rem; color: #6b5a33; }
.bed-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; } .bed-actions .btn, .bed-amb { justify-content: center; text-align: center; min-height: 48px; }
.bed-ask { background: #eaf3fe; border-radius: 10px; padding: .8rem; display: grid; gap: .5rem; } .bed-ask p { margin: 0; }
.res-month { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; padding: .55rem .7rem; border-radius: 8px; background: #f3f6f9; margin-bottom: .6rem; font-size: .92rem; }
.res-row { display: grid; grid-template-columns: auto 1fr; gap: .3rem .8rem; align-items: start; padding: .6rem .2rem; border-bottom: 1px solid var(--line, #e3e8ee); }
.res-row.st-held { background: #f2f9f3; border-radius: 8px; padding: .6rem; border-bottom: 0; margin-bottom: .4rem; }
.res-row.hl { outline: 3px solid #e0a526; }
.res-code { font: 800 1.15rem ui-monospace, Menlo, Consolas, monospace; letter-spacing: .12em; background: #123a5a; color: #fff; padding: .3rem .5rem; border-radius: 6px; }
.res-btns { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .4rem; } .res-btns:empty { display: none; }
.page-bedc .kpis .bc-earn dd { color: #137333; } .page-bedc .kpis .bc-check { border-color: #e0a526; background: #fff8e6; }
.bc-row-check td { background: #fff8e6; }
.bc-partners { display: grid; gap: .7rem; }
.bc-partner { border: 1px solid var(--line, #dde); border-left: 5px solid #c5ced8; border-radius: 10px; padding: .7rem .8rem; display: grid; gap: .6rem; }
.bc-partner.on { border-left-color: #137333; }
.bc-p-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; flex-wrap: wrap; }
.bc-fees { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .5rem; }
.bc-fees label { display: grid; gap: .2rem; font-size: .85rem; } .bc-fees input { min-width: 0; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .08em; }

.bed-wait { background: #eaf3fe; border-color: #c8defa; } .bed-wait b { color: #123a5a; } .bed-wait span { color: #3c4a57; }
.em-gated { align-self: center; }
.res-row.st-pending { background: #eaf3fe; border-radius: 8px; padding: .6rem; border-bottom: 0; margin-bottom: .4rem; }
.bed-timer span b { font-size: inherit; color: inherit; }

/* 🤝 partners strip (footer of patient pages) */
.partners { margin: 2rem 0 0; padding: 1.1rem 0 1.3rem; background: var(--surface, #fff); border-top: 1px solid var(--line, #e3e8ee); }
.partners-title { text-align: center; font-size: 1.05rem; margin: 0 0 .8rem; color: var(--ink, #123a5a); }
.partners-title span { font-weight: 500; color: var(--muted, #5c6b7a); font-size: .92rem; }
.pt-viewport { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.pt-viewport:not(.moving) { justify-content: center; }
.pt-track { display: flex; flex-shrink: 0; min-width: 100%; justify-content: space-around; gap: 1rem; list-style: none; margin: 0; padding: 0 .5rem; }
.pt-viewport.moving .pt-track { animation: pt-scroll var(--pt-secs, 30s) linear infinite; }
.pt-viewport.moving:hover .pt-track, .pt-viewport.moving:focus-within .pt-track { animation-play-state: paused; }
@keyframes pt-scroll { to { transform: translateX(-100%); } }
.pt-track li { flex: none; }
.pt-track a, .pt-card { display: flex; align-items: center; gap: .6rem; padding: .5rem .9rem; border: 1px solid var(--line, #e3e8ee); border-radius: 12px;
  background: var(--paper, #f7f9fb); color: inherit; text-decoration: none; min-height: 60px; }
.pt-track a:hover { border-color: var(--ink, #123a5a); }
.pt-track img { height: 40px; width: auto; max-width: 120px; object-fit: contain; }
.pt-ini { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: #123a5a; color: #fff; font-weight: 800; font-size: 1.15rem; }
.pt-txt { display: grid; line-height: 1.2; white-space: nowrap; } .pt-txt b { font-size: .95rem; } .pt-txt span { font-size: .78rem; color: var(--muted, #5c6b7a); }
@media (prefers-reduced-motion: reduce) {
  .pt-viewport.moving .pt-track { animation: none; flex-wrap: wrap; justify-content: center; }
  .pt-viewport.moving .pt-track[aria-hidden] { display: none; }
  .pt-viewport { -webkit-mask-image: none; mask-image: none; }
}
@media print { .partners { display: none; } }
.pt-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .7rem; }
.pt-form label { display: grid; gap: .25rem; } .pt-form .err:empty { display: none; }
.pt-form-end { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: center; justify-content: space-between; }
.pt-row { display: flex; align-items: center; gap: .8rem; padding: .6rem 0; border-bottom: 1px solid var(--line, #e3e8ee); flex-wrap: wrap; }
.pt-row.off { opacity: .6; } .pt-row img { height: 44px; width: 88px; object-fit: contain; } .pt-row .pt-ini { flex: none; }
.pt-row-main { flex: 1; min-width: 180px; }
.pt-form label.check { display: inline-flex; align-items: center; gap: .45rem; }

/* ℹ️ About us */
.ab-hero { border-radius: 16px; margin-bottom: 1rem; padding: 3.2rem 1.4rem; text-align: center; color: #fff; overflow: hidden;
  background: linear-gradient(135deg, #123a5a, #1f6f8b); }
.ab-hero.has-cover { background: linear-gradient(rgba(10,30,50,.55), rgba(10,30,50,.65)), var(--ab-cover) center / cover no-repeat; padding: 5rem 1.4rem; }
.ab-hero h1 { margin: 0; font-size: clamp(1.9rem, 5vw, 3rem); color: #fff; }
.ab-hero p { margin: .5rem auto 0; max-width: 40rem; font-size: 1.1rem; opacity: .95; }
.ab-intro p, .ab-mv p { line-height: 1.65; }
.ab-mv { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.ab-mv .panel { margin: 0; }
.ab-services { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .5rem; }
.ab-services li { padding: .55rem .8rem .55rem 2rem; border-radius: 10px; background: var(--paper, #f3f6f9); position: relative; }
.ab-services li::before { content: '✓'; position: absolute; left: .75rem; color: #137333; font-weight: 800; }
.ab-gallery-wrap, .ab-team-wrap { margin: 1.4rem 0; }
.ab-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .7rem; }
.ab-gallery figure { margin: 0; } .ab-gallery button { display: block; width: 100%; padding: 0; border: 0; border-radius: 12px; overflow: hidden; cursor: zoom-in; background: #dde3ea; }
.ab-gallery img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .25s; }
.ab-gallery button:hover img { transform: scale(1.04); }
.ab-gallery figcaption { font-size: .88rem; color: var(--muted, #5c6b7a); margin-top: .3rem; }
.ab-depts { margin-bottom: .8rem; }
.ab-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; }
.ab-person { background: var(--surface, #fff); border: 1px solid var(--line, #e3e8ee); border-radius: 14px; padding: 1.1rem .9rem; text-align: center; display: grid; justify-items: center; gap: .25rem; align-content: start; }
.ab-person[hidden] { display: none; }
.ab-person img, .ab-ini { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin-bottom: .4rem; box-shadow: 0 0 0 4px #eaf1f7; }
.ab-ini { display: grid; place-items: center; background: #123a5a; color: #fff; font: 800 2.6rem/1 system-ui; }
.ab-person h3 { margin: 0; font-size: 1.08rem; } .ab-person p { margin: 0; }
.ab-role { color: var(--ink, #123a5a); font-weight: 600; } .ab-dept { font-size: .85rem; color: var(--muted, #5c6b7a); }
.ab-bio { font-size: .9rem; color: #3c4a57; margin-top: .3rem !important; } .ab-person .btn { margin-top: .4rem; }
.ab-contact dl { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1rem; margin: 0 0 .8rem; } .ab-contact dt { color: var(--muted, #5c6b7a); } .ab-contact dd { margin: 0; }
.ab-lightbox { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 96vh; overflow: visible; }
.ab-lightbox::backdrop { background: rgba(5,12,20,.88); }
.ab-lightbox figure { margin: 0; } .ab-lightbox img { display: block; max-width: 92vw; max-height: 82vh; border-radius: 8px; margin: 0 auto; }
.ab-lightbox figcaption { color: #fff; text-align: center; margin-top: .5rem; }
.ab-x, .ab-nav { position: fixed; border: 0; background: rgba(255,255,255,.15); color: #fff; border-radius: 50%; width: 48px; height: 48px; font-size: 1.6rem; cursor: pointer; }
.ab-x { top: 14px; right: 14px; font-size: 1.2rem; } .ab-prev { left: 10px; top: 50%; } .ab-next { right: 10px; top: 50%; }
.ab-x:hover, .ab-nav:hover { background: rgba(255,255,255,.3); }
.site-foot { text-align: center; padding: 1rem 1rem 1.4rem; font-size: .9rem; color: var(--muted, #5c6b7a); }
.site-foot a { color: inherit; margin: 0 .4rem; }
.ab-cover-row { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-bottom: .4rem; }
.ab-cover-prev { width: 260px; max-width: 100%; aspect-ratio: 16 / 7; border-radius: 10px; background: #e7edf3; display: grid; place-items: center; overflow: hidden; }
.ab-cover-prev img { width: 100%; height: 100%; object-fit: cover; }
.ab-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .7rem; margin-bottom: .8rem; }
.ab-fields label { display: grid; gap: .25rem; } .ab-fields label.wide { grid-column: 1 / -1; } .ab-fields textarea { width: 100%; resize: vertical; }
.ab-text-form .panel-head { margin-top: 1rem; }
.ab-pics { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .8rem; }
.ab-pic { border: 1px solid var(--line, #e3e8ee); border-radius: 10px; padding: .5rem; display: grid; gap: .4rem; } .ab-pic.off { opacity: .55; }
.ab-pic img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; } .ab-cap { width: 100%; min-width: 0; }
.ab-staff-form { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.ab-staff-photo { display: grid; justify-items: center; gap: .4rem; }
.ab-staff-photo img, .ab-staff-photo .ab-ini { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; margin: 0; }
.ab-staff-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .6rem; }
.ab-staff-fields label { display: grid; gap: .25rem; } .ab-staff-fields label.check { display: inline-flex; align-items: center; gap: .4rem; }
.ab-bio-l, .ab-staff-end, .ab-staff-fields .err { grid-column: 1 / -1; } .ab-staff-fields .err:empty { display: none; }
.ab-staff-end { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; align-items: center; justify-content: space-between; }
.ab-list-h { margin: 1.4rem 0 .4rem; }
.ab-trow { display: flex; align-items: center; gap: .8rem; padding: .55rem 0; border-bottom: 1px solid var(--line, #e3e8ee); flex-wrap: wrap; } .ab-trow.off { opacity: .55; }
.ab-trow img, .ab-ini.sm { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; margin: 0; font-size: 1.3rem; box-shadow: none; }
.ab-trow-main { flex: 1; min-width: 180px; }
@media (max-width: 560px) { .ab-staff-form { grid-template-columns: 1fr; } }
/* ✏️ page texts editor */
.tx-item { display: grid; gap: .3rem; padding: .7rem 0; border-bottom: 1px solid var(--line, #e3e8ee); } .tx-item:last-child { border-bottom: 0; }
.tx-item textarea { width: 100%; resize: vertical; font: 1rem/1.5 var(--font-body); }
.tx-meta { display: flex; justify-content: space-between; gap: .6rem; flex-wrap: wrap; align-items: baseline; }
.tx-prev { background: var(--paper, #f3f6f9); border-radius: 8px; padding: .45rem .7rem; } .tx-prev::before { content: 'Preview: '; color: var(--muted, #5c6b7a); }
.tx-save { position: sticky; bottom: 0; padding: .8rem 0; background: linear-gradient(transparent, var(--bg, #eef2f5) 30%); text-align: right; }
.foot-note { display: inline-block; margin-top: .3rem; }
.web-tabs .tab { text-decoration: none; }
/* 📍 branch locations */
.bg-map { height: 420px; border-radius: 12px; border: 1px solid var(--line, #dde); z-index: 0; }
.bg-row { display: flex; gap: .7rem; align-items: center; padding: .55rem 0; border-bottom: 1px solid var(--line, #e3e8ee); flex-wrap: wrap; } .bg-row.off { opacity: .55; }
.bg-main { flex: 1; min-width: 200px; } .bg-dot { width: 12px; height: 12px; border-radius: 50%; background: #c5ced8; flex: none; }
.bg-dot.ok { background: #137333; } .bg-dot.bad { background: #c62828; }

/* nearest-branch picker */
.br-pick { display: grid; gap: .4rem; } .br-pick > label { font-weight: 500; }
.br-chosen { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; padding: .6rem .75rem; border: 2px solid #137333; border-radius: 10px; background: #f2f9f3; }
.br-list { list-style: none; margin: 0; padding: .25rem; border: 1px solid var(--line, #dde); border-radius: 10px; max-height: 300px; overflow-y: auto; background: var(--surface, #fff); }
.br-list[hidden], .br-pick input[hidden] { display: none; }
.br-list button { display: flex; justify-content: space-between; align-items: center; gap: .6rem; width: 100%; text-align: left; font: inherit; color: inherit;
  padding: .5rem .6rem; border: 0; border-radius: 8px; background: none; cursor: pointer; }
.br-list button:hover, .br-list button.on { background: var(--paper, #f3f6f9); } .br-more { padding: .45rem .6rem; }
.br-km { flex: none; font-size: .8rem; font-weight: 700; color: #123a5a; background: #eaf1f7; border-radius: 99px; padding: .1rem .5rem; white-space: nowrap; }
.tx-find { margin: 0 0 1rem; } .tx-find input { width: 100%; } .tx-item[hidden], .tx-group[hidden] { display: none; }
/* ✏️ on-page text editor (main admin) */
.txe-bar { position: fixed; left: 14px; bottom: 14px; z-index: 900; display: flex; gap: .4rem; flex-wrap: wrap; }
.txe-bar .btn { box-shadow: 0 4px 14px rgba(0,0,0,.2); }
body.txt-editing .txt-e { outline: 2px dashed #e0a526; outline-offset: 2px; border-radius: 3px; cursor: pointer; background: rgba(224,165,38,.08); }
body.txt-editing .txt-e:hover { background: rgba(224,165,38,.22); }
.txe-dlg { border: 0; border-radius: 14px; padding: 0; width: min(520px, calc(100vw - 32px)); box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.txe-dlg::backdrop { background: rgba(10,25,40,.5); }
.txe-form { display: grid; gap: .6rem; padding: 1rem 1.1rem; } .txe-form h2 { margin: 0; font-size: 1.15rem; } .txe-form p { margin: 0; }
.txe-form textarea { width: 100%; font: 1rem/1.5 var(--font-body); resize: vertical; } .txe-form .err:empty { display: none; }
.txe-list { list-style: none; margin: 0; padding: 0; max-height: 60vh; overflow-y: auto; display: grid; gap: .3rem; }
.txe-list button { width: 100%; text-align: left; font: inherit; color: inherit; background: var(--paper, #f3f6f9); border: 0; border-radius: 8px; padding: .5rem .7rem; cursor: pointer; }
@media print { .txe-bar { display: none; } }
body.txt-editing .txt-e { justify-self: start; align-self: start; width: fit-content; max-width: 100%; }

/* 📱 services home (app start screen) */
.page-app main { max-width: 760px; }
.app-hello { padding: .6rem 0 1rem; } .app-hello h1 { font-size: clamp(1.6rem, 6vw, 2.2rem); margin: 0; }
.app-hello p { margin: .3rem 0 0; color: var(--muted, #5c6b7a); font-size: 1.05rem; }
.svc-grid { display: grid; gap: .8rem; }
.svc { display: flex; align-items: center; gap: .9rem; padding: 1rem 1rem 1rem .9rem; border-radius: 18px; text-decoration: none !important;
  color: #fff !important; min-height: 92px; box-shadow: 0 6px 18px rgba(18,58,90,.16); position: relative; overflow: hidden; transition: transform .12s; }
.svc:active { transform: scale(.98); }
.svc::after { content: ''; position: absolute; right: -30px; top: -30px; width: 130px; height: 130px; border-radius: 50%; background: rgba(255,255,255,.1); }
.svc-ico { flex: none; width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center; font-size: 2rem; background: rgba(255,255,255,.18); }
.svc-txt { flex: 1; display: grid; gap: .15rem; min-width: 0; } .svc-txt b { font-size: 1.25rem; line-height: 1.2; }
.svc-txt > span { font-size: .9rem; opacity: .92; line-height: 1.35; }
.svc-go { font-size: 2rem; line-height: 1; opacity: .8; position: relative; z-index: 1; }
.svc-doc { background: linear-gradient(135deg, #123a5a, #1f6f8b); }
.svc-test { background: linear-gradient(135deg, #8e1d3a, #c2185b); }
.svc-amb { background: linear-gradient(135deg, #b71c1c, #e53935); }
.svc-bed { background: linear-gradient(135deg, #0d5c46, #1f8a5f); }
.svc-med { background: linear-gradient(135deg, #4a3592, #6c4fc4); }
@media (min-width: 700px) { .svc-grid { grid-template-columns: 1fr 1fr; } .svc-doc { grid-column: 1 / -1; } }
.app-more { margin: 1.2rem 0 .5rem; display: grid; gap: .8rem; }
.app-sos { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .8rem; border-radius: 14px; border: 2px solid #c62828;
  color: #c62828 !important; text-decoration: none !important; font-size: 1.05rem; background: #fff5f5; }
.app-links { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.app-links a { padding: .5rem .9rem; border-radius: 99px; background: var(--surface, #fff); border: 1px solid var(--line, #dde); color: inherit; text-decoration: none; font-size: .92rem; }

/* 📱 bottom button bar inside the app */
.app-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 800; display: grid; grid-template-columns: repeat(var(--tabs, 6), 1fr);
  background: var(--surface, #fff); border-top: 1px solid var(--line, #dde); box-shadow: 0 -4px 14px rgba(0,0,0,.06); padding-bottom: env(safe-area-inset-bottom); }
.app-tabs a { display: grid; justify-items: center; gap: 1px; padding: .45rem .1rem .4rem; text-decoration: none; color: var(--muted, #5c6b7a); font-size: .68rem; line-height: 1.15; text-align: center; }
.app-tabs a span { font-size: 1.35rem; line-height: 1.1; filter: grayscale(.4); }
.app-tabs a.on { color: var(--ink, #123a5a); font-weight: 700; } .app-tabs a.on span { filter: none; }
.app-tabs a.on::before { content: ''; width: 26px; height: 3px; border-radius: 2px; background: var(--ink, #123a5a); margin: -.45rem 0 .25rem; }
body.has-app-tabs { padding-bottom: 66px; } body.has-app-tabs .txe-bar { bottom: 78px; }
@media print { .app-tabs { display: none; } }