:root {
  color-scheme: light;
  --surface-1: #ffffff;
  --page: #f2f9fa;
  --ink: #12333a;
  --ink-2: #46626a;
  --muted: #7e979d;
  --hairline: #dcebee;
  --border: rgba(18,51,58,0.08);
  --accent: #0d96a5;          /* fresh teal */
  --accent-2: #17b2c1;
  --accent-soft: #e2f5f7;
  --good: #16a34a;
  --good-text: #15803d;
  --warning: #f59e0b;
  --critical: #e05252;
  --blue: #3b82f6;
  --wa: #25d366;
  --wa-dark: #128c7e;
  --sidebar-bg: linear-gradient(168deg, #14a9b9 0%, #0a6c78 100%);
  --sidebar-ink: #f0fbfc;
  --shadow: 0 6px 22px rgba(10,108,120,.09);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: var(--font);
  background: linear-gradient(180deg, #eaf6f7 0%, #f7fbfc 55%, #f2f9fa 100%) fixed;
  color: var(--ink);
  display: flex; min-height: 100vh; font-size: 14px; line-height:1.45;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, .logo, .t-value, .qd-token, .tok-big, .tv-token, .r-amt, .dn-center { font-family: var(--font-head); letter-spacing:-.01em; }

/* ---------- Sidebar ---------- */
aside {
  width: 224px; background: var(--sidebar-bg); color: var(--sidebar-ink);
  padding: 20px 12px; flex-shrink: 0; display:flex; flex-direction:column; gap:2px;
  position: sticky; top: 0; height: 100vh;
}
.logo { font-size: 18px; font-weight: 800; padding: 4px 12px 18px; }
.logo span { color:#ffe08a; }
.logo small { display:block; font-weight:500; font-size:11px; opacity:.6; margin-top:2px; font-family:var(--font); letter-spacing:0; }
.logo a { color:inherit; text-decoration:none; }
a.nav-btn {
  display:flex; align-items:center; gap:10px; width:100%;
  color:inherit; text-decoration:none; font-weight:500;
  padding: 9px 12px; border-radius: 9px; cursor:pointer; opacity:.9; transition:background .15s;
}
a.nav-btn:hover { background: rgba(255,255,255,.14); opacity:1; }
a.nav-btn.active { background:#ffffff; color:#0b6d79; opacity:1; font-weight:700; box-shadow:0 4px 14px rgba(0,0,0,.12); }
a.nav-btn .ico { width:18px; text-align:center; }
a.nav-btn.tv { margin-top:10px; border:1px dashed rgba(255,255,255,.35); font-size:13px; }
a.nav-btn.site { margin-top:6px; font-size:13px; opacity:.8; }
.tv-logo em span { color:#ffe08a; }
/* appointments booked on the patient website */
.badge-online { margin-left:4px; display:inline-flex; align-items:center; gap:3px; font-size:10.5px; font-weight:600; line-height:1; padding:3px 7px; border-radius:99px; white-space:nowrap; vertical-align:middle;
  color:#0b6d79; background:color-mix(in srgb, var(--accent, #0d96a5) 10%, #fff); border:1px solid color-mix(in srgb, var(--accent, #0d96a5) 30%, #fff); }
.sidebar-foot { margin-top:auto; padding: 12px; font-size: 11px; opacity:.75; line-height:1.5; }
.sidebar-foot button { background:none; border:1px solid rgba(255,255,255,.3); color:inherit; font:inherit; font-size:11px; border-radius:6px; padding:3px 8px; cursor:pointer; margin-top:6px;}
.sidebar-foot button:hover { border-color:#ffe08a; }

/* ---------- Main ---------- */
main { flex:1; padding: 24px 28px; max-width: 1280px; min-width:0; }
.page-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; gap:12px; flex-wrap:wrap;}
h1 { font-size: 22px; font-weight: 800; }
.sub { color: var(--ink-2); font-size: 13px; margin-top:3px; }
.h-note { font-weight:500; font-size:11.5px; color:var(--muted); }

/* ---------- Cards / tiles ---------- */
.tiles { display:grid; grid-template-columns: repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin-bottom:20px; }
.tile {
  background: var(--surface-1); border-radius:14px; padding:14px 16px; box-shadow: var(--shadow);
  position:relative; overflow:hidden;
}
.tile::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--tile, var(--accent)); }
.tile .t-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.tile .t-label { font-size:12px; color:#3f6169; font-weight:500; }
.tile .t-ico { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; font-size:15px; background: color-mix(in srgb, var(--tile, var(--accent)) 12%, #fff); }
.tile .t-value { font-size:27px; font-weight:800; line-height:1.1; font-variant-numeric: tabular-nums; }
.tile .t-note { font-size:11.5px; color: var(--muted); margin-top:6px; }
.t-delta { font-weight:700; font-size:11.5px; }
.t-delta.up { color:var(--good-text); }
.t-delta.down { color:var(--critical); }
.t-delta.flat { color:var(--muted); }
.t-vs { color:var(--muted); }

.card { background: var(--surface-1); border-radius:14px; padding:16px; margin-bottom:16px; box-shadow: var(--shadow); }
.card h3 { font-size:14.5px; font-weight:700; margin-bottom:12px; display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;}
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.grid-2 > * { min-width:0; }
@media (max-width: 900px){ .grid-2{grid-template-columns:1fr;} }

/* ---------- Tables ---------- */
table { width:100%; border-collapse:collapse; }
th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); padding:8px 10px; border-bottom:1px solid var(--hairline); font-weight:600;}
td { padding:10px; border-bottom:1px solid var(--hairline); vertical-align:middle; }
tr:last-child td { border-bottom:none; }
td.num, th.num { text-align:right; font-variant-numeric: tabular-nums; }
.empty { color:var(--muted); padding:18px 10px; text-align:center; font-size:13px; }
.rowlink { cursor:pointer; }
.rowlink:hover td { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.who { display:flex; align-items:center; gap:10px; }
.who > div { min-width:0; }

/* ---------- Empty states ---------- */
.empty-state { text-align:center; padding:26px 12px; color:var(--muted); }
.empty-state .es-ico { font-size:30px; line-height:1; margin-bottom:8px; filter: grayscale(.2); }
.empty-state .es-text { font-size:13px; font-weight:500; color:var(--ink-2); }
.empty-state .es-act { margin-top:10px; font-size:12px; }

/* ---------- Avatars ---------- */
.avatar {
  --av: var(--accent);
  display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%; flex-shrink:0;
  background: color-mix(in srgb, var(--av) 16%, #fff); color: var(--av);
  font-weight:700; font-size:12px; letter-spacing:.3px; vertical-align:middle; font-family:var(--font-head);
  border:1.5px solid color-mix(in srgb, var(--av) 35%, #fff);
}
.avatar.xs { width:24px; height:24px; font-size:10px; }
.avatar.lg { width:44px; height:44px; font-size:15px; }

/* ---------- Chips / status ---------- */
.chip { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; padding:3px 9px 3px 7px; border-radius:99px; border:1px solid var(--border); white-space:nowrap;}
.chip i { font-style:normal; font-size:11px; line-height:1; }
.c-booked   { color:var(--blue); background: color-mix(in srgb, var(--blue) 10%, transparent); }
.c-arrived  { color:#8a6d00; background: color-mix(in srgb, var(--warning) 16%, transparent); }
.c-inconsult{ color:var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.c-done     { color:var(--good-text); background: color-mix(in srgb, var(--good) 10%, transparent); }
.c-noshow   { color:var(--critical); background: color-mix(in srgb, var(--critical) 8%, transparent); }
.c-cancel   { color:var(--ink-2); background: transparent; }
.qpos { color:var(--ink-2); font-weight:600; }
.doc-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--doc, var(--accent)); margin-right:6px; vertical-align:middle; }
.tok-big { display:inline-block; font-weight:800; font-size:15px; color:var(--doc, var(--accent)); background: color-mix(in srgb, var(--doc, var(--accent)) 12%, #fff); padding:2px 9px; border-radius:8px; font-variant-numeric:tabular-nums; }

.badge-allergy {
  display:inline-block; background: color-mix(in srgb, var(--critical) 12%, transparent);
  color:var(--critical); border:1px solid color-mix(in srgb, var(--critical) 40%, transparent);
  font-size:11.5px; font-weight:700; padding:2px 9px; border-radius:99px; margin:2px 3px 2px 0;
}
.badge-cond {
  display:inline-block; background: color-mix(in srgb, var(--blue) 10%, transparent);
  color:var(--blue); font-size:11.5px; font-weight:600; padding:2px 9px; border-radius:99px; margin:2px 3px 2px 0;
}

/* ---------- Buttons ---------- */
.btn { font:inherit; font-size:12.5px; font-weight:600; border-radius:9px; padding:7px 12px; cursor:pointer; border:1px solid var(--border); background:var(--surface-1); color:var(--ink); text-decoration:none; display:inline-flex; align-items:center; gap:5px; line-height:1.3; transition: box-shadow .15s, transform .1s; }
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: linear-gradient(135deg, var(--accent-2), var(--accent)); border:none; color:#fff; box-shadow:0 3px 10px rgba(13,150,165,.28); }
.btn.primary:hover { filter: brightness(1.06); color:#fff; }
.btn.wa { background:#e9fbf0; border-color:#bfead0; color:var(--wa-dark); }
.btn.wa:hover { border-color:var(--wa); color:var(--wa-dark); }
.btn.ghost { border:none; background:none; color:var(--accent); padding:6px 8px; box-shadow:none; }
.btn.ghost.wa { background:none; color:var(--wa-dark); }
.btn.sm { padding:5px 10px; font-size:12px; }
.btn.danger { color:var(--critical); }
.btn.danger:hover { border-color: var(--critical); }
.btn.danger-solid { background:var(--critical); border-color:var(--critical); color:#fff; }
.btn.danger-solid:hover { filter:brightness(1.06); color:#fff; }
.btn:disabled { opacity:.45; cursor:not-allowed; }

/* ---------- Token queue cards ---------- */
.queue-strip { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; margin-bottom:12px; }
.strip-title { font-size:14.5px; font-weight:700; margin:0 0 10px; }
.queue-doc { --doc: var(--accent); background:var(--surface-1); border-radius:14px; padding:14px 16px; box-shadow:var(--shadow); border-top:4px solid var(--doc); }
.qd-top { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.qd-name { font-weight:700; font-size:13.5px; }
.qd-spec { font-size:11.5px; color:var(--muted); }
.qd-body { display:grid; grid-template-columns:1.2fr 1fr; gap:10px; }
.qd-body > div:last-child { border-left:1px solid var(--hairline); padding-left:12px; }
.qd-now { font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); font-weight:600; }
.qd-token { font-size:30px; font-weight:800; color:var(--doc); line-height:1.15; font-variant-numeric:tabular-nums; }
.qd-token.sm { font-size:22px; color:var(--ink-2); }
.qd-who { font-size:12px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.qd-wait { font-size:11.5px; color:var(--muted); margin-top:10px; padding-top:8px; border-top:1px dashed var(--hairline); display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
.qd-wait .tok { font-style:normal; font-weight:700; color:var(--doc); background: color-mix(in srgb, var(--doc) 10%, #fff); padding:1px 7px; border-radius:6px; font-size:11.5px; }

/* ---------- Forms & modal ---------- */
label { display:block; font-size:12px; font-weight:600; color:var(--ink-2); margin:10px 0 4px; }
input, select, textarea {
  font:inherit; width:100%; padding:8px 10px; border-radius:9px; border:1px solid var(--hairline);
  background:var(--page); color:var(--ink);
}
textarea { resize:vertical; }
input:focus, select:focus, textarea:focus { outline:2px solid color-mix(in srgb, var(--accent) 40%, transparent); border-color:var(--accent); }
.row { display:flex; gap:10px; } .row > * { flex:1; }
.search { max-width:260px; }

.overlay {
  display:none; position:fixed; inset:0; background:rgba(9,40,46,.5); z-index:50;
  align-items:flex-start; justify-content:center; padding:5vh 16px;
  backdrop-filter: blur(2px);
}
.overlay.open { display:flex; animation: fade .18s ease; }
.modal {
  background:var(--surface-1); border-radius:16px; width:100%; max-width:500px;
  padding:22px; max-height:88vh; overflow:auto; box-shadow:0 24px 60px rgba(9,40,46,.28);
}
.overlay.open .modal { animation: pop .22s cubic-bezier(.2,.9,.3,1.2); }
@keyframes pop { from { opacity:0; transform: translateY(14px) scale(.97); } to { opacity:1; transform:none; } }
@keyframes fade { from { opacity:0; } to { opacity:1; } }
.modal.wide { max-width:720px; }
.modal h2 { font-size:17px; font-weight:800; margin-bottom:4px; }
.modal .m-sub { font-size:12.5px; color:var(--ink-2); margin-bottom:8px; }
.modal-head { display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.modal-head .m-sub { margin-bottom:0; }
.m-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; flex-wrap:wrap; }

.overlay.confirm { z-index:90; align-items:center; }
.confirm-box { max-width:420px; text-align:center; }
.confirm-box .cf-ico { width:52px; height:52px; border-radius:50%; margin:0 auto 10px; display:grid; place-items:center; font-size:24px; font-weight:800; background:var(--accent-soft); color:var(--accent); }
.confirm-box .cf-ico.danger { background: color-mix(in srgb, var(--critical) 12%, #fff); color:var(--critical); }
.confirm-box .m-sub { text-align:left; line-height:1.55; }
.confirm-box .m-actions { justify-content:center; }

.alert-box {
  border:1px solid color-mix(in srgb, var(--critical) 40%, transparent);
  background: color-mix(in srgb, var(--critical) 8%, transparent);
  color: var(--critical); border-radius:10px; padding:9px 12px; font-size:12.5px; font-weight:600; margin-top:10px;
}
.free-box { border:1px solid #bfead0; background:#e9fbf0; color:var(--good-text); border-radius:10px; padding:9px 12px; font-size:12.5px; font-weight:600; margin-top:10px; }
.slot-hint { border:1px solid #f5d9a4; background:#fdf3e4; color:#8a6d00; border-radius:10px; padding:9px 12px; font-size:12.5px; margin-top:8px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.hint { font-size:11.5px; color:var(--muted); margin-top:4px; }

.opt-list { display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.opt {
  display:flex; align-items:center; gap:11px; border:1px solid var(--hairline); border-radius:10px;
  padding:9px 12px; cursor:pointer; margin:0; font-weight:400;
}
.opt:hover { border-color: var(--accent); }
.opt.sel { border-color: var(--accent); background: var(--accent-soft); }
.opt input { width:auto; accent-color: var(--accent); }

/* segmented payment-mode control */
.seg { display:flex; gap:6px; }
.seg-btn { flex:1; font:inherit; font-size:13px; font-weight:600; padding:9px; border-radius:10px; border:1px solid var(--hairline); background:var(--page); color:var(--ink-2); cursor:pointer; }
.seg-btn.on { background:var(--accent-soft); border-color:var(--accent); color:var(--accent); }
.chg { font-size:20px; font-weight:800; padding:6px 0; font-family:var(--font-head); }

/* ---------- Rx builder ---------- */
.rx-med { display:grid; grid-template-columns: 1.8fr .9fr .6fr 1fr auto; gap:8px; align-items:center; margin-bottom:8px; }
.rx-med input, .rx-med select { padding:7px 9px; font-size:13px; }
.rx-med.conflict input:first-child { border-color:var(--critical); background: color-mix(in srgb, var(--critical) 7%, #fff); color:var(--critical); font-weight:600; }
.rx-clash { grid-column: 1 / -1; font-size:11.5px; color:var(--critical); font-weight:600; margin-top:-3px; }
.rx-head { display:grid; grid-template-columns: 1.8fr .9fr .6fr 1fr auto; gap:8px; font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); font-weight:600; margin:10px 0 5px; }
@media (max-width: 640px){
  .rx-med, .rx-head { grid-template-columns: 1.4fr .9fr .6fr auto; }
  .rx-med select.rx-food, .rx-head .rx-food { display:none; }
}

/* ---------- Invoice box ---------- */
.inv-box { border:1px dashed var(--hairline); border-radius:10px; padding:12px 14px; margin-top:12px; font-variant-numeric: tabular-nums;}
.inv-line { display:flex; justify-content:space-between; padding:4px 0; font-size:13.5px; gap:10px; align-items:center; }
.inv-line.total { border-top:1px solid var(--hairline); margin-top:6px; padding-top:8px; font-weight:700; font-size:15px; }
.inv-line.pend { color:#8a6d00; }
.dot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:7px; vertical-align:middle; }
.amt-hint { color:var(--muted); font-variant-numeric:tabular-nums; margin-right:4px; }

/* ---------- UPI QR ---------- */
.upi-qr { display:flex; gap:14px; align-items:center; border:1px solid var(--hairline); border-radius:12px; padding:12px; margin-top:10px; background:#fff; }
.upi-qr.compact { padding:8px; gap:10px; margin-top:0; }
.qr-img svg { display:block; }
.qr-meta { display:flex; flex-direction:column; gap:2px; font-size:12.5px; }
.qr-meta small { color:var(--muted); font-size:11.5px; }
.qr-fallback { width:120px; font-size:11px; color:var(--muted); text-align:center; border:1px dashed var(--hairline); border-radius:8px; padding:12px 6px; word-break:break-all; }

/* ---------- Printable documents (prescription / receipt / certificate) ---------- */
.sheet { border:1px solid var(--hairline); border-radius:12px; padding:18px 20px; background:#fff; }
.sheet-head { display:flex; justify-content:space-between; gap:10px; border-bottom:2px solid var(--accent); padding-bottom:10px; margin-bottom:12px; flex-wrap:wrap; }
.lh-brand { display:flex; gap:10px; align-items:center; }
.lh-logo { width:38px; height:38px; border-radius:10px; background:linear-gradient(135deg, var(--accent-2), var(--accent)); color:#fff; display:grid; place-items:center; font-size:26px; font-weight:800; font-family:var(--font-head); }
.sheet-head h4 { font-size:16px; color:var(--accent); font-weight:800; }
.sheet-head small { color:var(--muted); display:block; font-size:11.5px; }
.sheet-doc { text-align:right; font-size:12.5px; }
.sheet-doc small { color:var(--muted); font-size:11.5px; }
.doc-meta { display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px; font-size:13px; align-items:center; }
.doc-meta .avatar { margin-right:6px; }
.doc-allergy { color:var(--critical); font-weight:700; font-size:12px; margin-top:6px; }
.doc-title { text-align:center; margin:10px 0 14px; letter-spacing:1px; font-size:14px; color:var(--ink-2); }
.sheet .rx-sym { font-size:12.5px; color:var(--ink-2); margin:6px 0 8px; line-height:1.55; }
.doc-table { margin-top:6px; }
.doc-table th { font-size:10.5px; }
.doc-table td { padding:7px 8px; font-size:13px; }
.doc-table tr.tot td { border-top:2px solid var(--hairline); font-weight:800; font-size:14px; }
.rc-grid { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:8px; flex-wrap:wrap; }
.stamp { display:inline-block; border:2.5px solid; border-radius:8px; padding:4px 12px; font-weight:800; letter-spacing:2px; font-size:14px; transform:rotate(-4deg); margin-top:6px; }
.stamp.paid { color:var(--good-text); border-color:var(--good-text); }
.stamp.pend { color:#b45309; border-color:#b45309; }
.doc-foot { display:flex; justify-content:space-between; align-items:flex-end; gap:12px; margin-top:22px; flex-wrap:wrap; }
.doc-foot > small { color:var(--muted); font-size:11px; max-width:60%; }
.sig-block { text-align:center; font-size:12.5px; }
.sig-block .sig-line { width:170px; border-top:1px solid var(--ink); margin:26px auto 4px; }
.sig-block small { display:block; color:var(--muted); font-size:11px; }

/* ---------- Reminder rows ---------- */
.rem-row .opt { padding:7px 10px; }
.rem-row .opt small { font-size:11.5px; }

/* ---------- Tabs ---------- */
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--hairline); margin-bottom:14px; flex-wrap:wrap; }
.tab { border:none; background:none; font:inherit; font-size:13px; font-weight:600; color:var(--ink-2); padding:8px 14px; cursor:pointer; border-bottom:2px solid transparent; }
.tab.active { color:var(--accent); border-bottom-color:var(--accent); }

/* ---------- Slot grid (Appointments) ---------- */
/* the grid scrolls inside its own box: sticky doctor header (top) + sticky time column (left) */
.sg-scroll { overflow:auto; max-height:calc(100vh - 230px); min-height:380px; overscroll-behavior:contain; border-radius:10px; }
.slot-grid { display:flex; flex-direction:column; gap:6px; min-width: calc(84px + 166px * var(--cols, 3)); padding-bottom:4px; }
.sg-row { display:grid; grid-template-columns: 84px repeat(var(--cols, 3), minmax(160px, 1fr)); gap:6px; align-items:stretch; }
.sg-head { position:sticky; top:0; background:var(--surface-1); z-index:3; padding-bottom:6px; border-bottom:1px solid var(--hairline); margin-bottom:2px; box-shadow:0 6px 0 var(--surface-1); }
.sg-time { font-size:12px; font-weight:700; color:var(--ink-2); display:flex; align-items:center; font-variant-numeric:tabular-nums;
  position:sticky; left:0; z-index:2; background:var(--surface-1); box-shadow:6px 0 0 var(--surface-1), 7px 0 0 var(--hairline); }
.sg-head .sg-time { z-index:4; }
.sg-head .sg-time { font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); }
.sg-doc { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:10px; border-top:3px solid var(--doc); background: color-mix(in srgb, var(--doc) 6%, #fff); min-width:0; }
.sg-doc b { font-size:12.5px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sg-doc small { font-size:11px; color:var(--muted); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sg-doc > div { min-width:0; }
.sg-doc .sg-meta { color:var(--ink-2); font-weight:600; }
.sg-doc.off { border-top-color:#c3cfd2; background:#f1f4f5; }
.sg-doc.off .avatar { filter:grayscale(1); opacity:.6; }
.sg-doc.off b { color:var(--muted); }
.sg-doc.off .sg-meta { color:#8a6d00; }
.sg-cell.off { background:repeating-linear-gradient(135deg, #f1f4f5 0 6px, #e9eef0 6px 12px); border:1px solid var(--hairline); opacity:.75; }
.sg-cell { min-height:46px; border-radius:10px; padding:6px 9px; font-size:12px; border:1px solid transparent; text-align:left; font:inherit; min-width:0; }
.sg-cell.free { background:var(--page); border:1px dashed var(--hairline); color:var(--muted); cursor:pointer; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:12px; transition:.15s; }
.sg-cell.free span { opacity:.55; }
.sg-cell.free:hover { border-color:var(--accent); background:var(--accent-soft); color:var(--accent); }
.sg-cell.free:hover span { opacity:1; }
.sg-cell.past { background:repeating-linear-gradient(135deg, #f4f8f9 0 6px, #eef4f5 6px 12px); border:1px solid var(--hairline); }
.sg-cell.st-BOOKED     { background: color-mix(in srgb, var(--blue) 12%, #fff); border-color: color-mix(in srgb, var(--blue) 35%, #fff); cursor:pointer; }
.sg-cell.st-ARRIVED    { background: color-mix(in srgb, var(--warning) 18%, #fff); border-color: color-mix(in srgb, var(--warning) 50%, #fff); cursor:pointer; }
.sg-cell.st-IN_CONSULT { background: color-mix(in srgb, var(--accent) 16%, #fff); border-color: var(--accent); cursor:pointer; box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
.sg-cell.st-DONE       { background: color-mix(in srgb, var(--good) 11%, #fff); border-color: color-mix(in srgb, var(--good) 35%, #fff); cursor:pointer; }
.sg-cell.st-NO_SHOW    { background: color-mix(in srgb, var(--critical) 9%, #fff); border-color: color-mix(in srgb, var(--critical) 35%, #fff); cursor:pointer; opacity:.85; }
.sg-cell .sg-name { display:flex; align-items:center; gap:6px; min-width:0; }
.sg-cell .sg-name b { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:12.5px; }
.sg-cell small { display:block; color:var(--ink-2); font-size:11px; margin-top:2px; }
.sg-break { font-size:11px; color:var(--muted); padding:4px 0; border-top:1px dashed var(--hairline); border-bottom:1px dashed var(--hairline); margin:2px 0; letter-spacing:.3px; }
.sg-break span { position:sticky; left:0; display:inline-block; padding:0 12px; }
.sg-legend { display:flex; gap:14px; flex-wrap:wrap; margin-top:12px; font-size:11.5px; color:var(--ink-2); }
.sg-legend .lg { display:inline-block; width:12px; height:12px; border-radius:4px; margin-right:5px; vertical-align:-2px; border:1px solid transparent; }
.sg-legend .lg.free { border:1px dashed var(--muted); background:var(--page); }
.sg-legend .lg.off { background:repeating-linear-gradient(135deg, #f1f4f5 0 3px, #dfe6e8 3px 6px); border-color:var(--hairline); }

/* ---------- SVG charts ---------- */
.chart { width:100%; }
.chart-svg { width:100%; height:auto; display:block; font-family:var(--font); }
.ch-grid { stroke: var(--hairline); stroke-width:1; }
.ch-axis { font-size:11px; fill: var(--muted); }
.ch-val { font-size:11px; font-weight:700; fill: var(--ink); }
.ch-bar rect { transition: opacity .15s; } .ch-bar:hover rect { opacity:.8; }
.donut { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.donut-svg { width:150px; height:150px; flex-shrink:0; }
.dn-center { font-size:17px; font-weight:800; fill:var(--ink); }
.dn-sub { font-size:9.5px; fill:var(--muted); text-transform:uppercase; letter-spacing:.5px; }
.dn-legend { flex:1; min-width:150px; display:flex; flex-direction:column; gap:6px; }
.dn-item { display:grid; grid-template-columns:auto 1fr auto auto; gap:8px; align-items:center; font-size:13px; }
.dn-item i { width:10px; height:10px; border-radius:3px; display:inline-block; }
.dn-item small { color:var(--muted); min-width:34px; text-align:right; }
.closeout { display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap; }
.closeout .donut { flex:1; min-width:220px; }
.co-table { flex:1; min-width:200px; }
.hbar { display:grid; grid-template-columns: 160px 1fr 30px; gap:10px; align-items:center; font-size:13px; padding:5px 0; }
.hb-lab { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hb-track { height:10px; background:var(--page); border-radius:99px; overflow:hidden; }
.hb-track i { display:block; height:100%; background:linear-gradient(90deg, var(--accent-2), var(--accent)); border-radius:99px; }
.hbar b { text-align:right; font-variant-numeric:tabular-nums; }

/* ---------- Toast ---------- */
.toast {
  position:fixed; bottom:22px; right:22px; background:var(--ink); color:#fff;
  padding:11px 16px; border-radius:11px; font-size:13px; font-weight:600; z-index:99; max-width:420px;
  opacity:0; transform:translateY(8px); transition:.25s; box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.toast.show { opacity:1; transform:none; }

/* ---------- Now Serving TV display ---------- */
body.tv { display:flex; flex-direction:column; background:#07242a; color:#eefafc; min-height:100vh; }
body.tv .tv-main { flex:1 0 auto; align-content:start; }
.tv-head { display:flex; justify-content:space-between; align-items:center; padding:18px 32px; border-bottom:1px solid rgba(255,255,255,.1); gap:12px; flex-wrap:wrap; }
.tv-logo { font-family:var(--font-head); font-size:24px; font-weight:800; }
.tv-logo span { color:#ffe08a; }
.tv-logo em { font-style:normal; font-weight:500; font-size:14px; opacity:.7; margin-left:6px; }
.tv-title { font-family:var(--font-head); font-size:20px; letter-spacing:5px; font-weight:800; color:#5fd0d9; }
.tv-clock { text-align:right; }
.tv-clock b { display:block; font-size:26px; font-family:var(--font-head); font-variant-numeric:tabular-nums; }
.tv-clock small { opacity:.65; font-size:12px; }
.tv-main { display:grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap:22px; padding:28px 32px; }
.tv-doc { --doc:#0d96a5; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-top:6px solid var(--doc); border-radius:20px; padding:22px 24px; }
.tv-doc.flash { animation: flash 1.2s ease 2; }
@keyframes flash { 0%,100% { background:rgba(255,255,255,.05); } 50% { background: color-mix(in srgb, var(--doc) 35%, transparent); } }
.tv-doc-head { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.tv-doc-head h2 { font-size:20px; font-weight:800; }
.tv-doc-head small { opacity:.65; font-size:13px; }
.tv-doc .avatar { background: color-mix(in srgb, var(--av) 30%, #000); color:#fff; border-color: var(--av); }
.tv-now small, .tv-next small { display:block; text-transform:uppercase; letter-spacing:2px; font-size:11px; opacity:.6; font-weight:600; }
.tv-token { font-size:104px; font-weight:800; line-height:1; color:var(--doc); filter:brightness(1.35); font-variant-numeric:tabular-nums; margin:6px 0 2px; }
.tv-name { font-size:20px; font-weight:600; margin-bottom:16px; }
.tv-list { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.tv-list span { font-family:var(--font-head); font-size:22px; font-weight:700; padding:6px 14px; border-radius:10px; background:rgba(255,255,255,.08); font-variant-numeric:tabular-nums; }
.tv-list span.up { background: color-mix(in srgb, var(--doc) 45%, transparent); }
.tv-list span.none { font-size:14px; font-weight:500; opacity:.6; font-family:var(--font); }
.tv-foot { display:flex; justify-content:space-between; gap:12px; padding:14px 32px; font-size:13px; opacity:.6; border-top:1px solid rgba(255,255,255,.1); flex-wrap:wrap; }

/* ---------- Print ---------- */
.doc-a5 { page: a5; }
.doc-receipt { page: receipt; }
@page a5 { size: A5; margin: 10mm; }
@page receipt { size: A5; margin: 10mm; }
@media print {
  body { display:block; background:#fff; color:#000; }
  .toast, .m-topbar, .m-backdrop, aside, #confirm-overlay { display:none !important; }
  /* a document is open: print only that document */
  body[data-print] > *:not(#overlay) { display:none !important; }
  body[data-print] #overlay { position:static; display:block !important; padding:0; background:none; backdrop-filter:none; }
  body[data-print] #overlay .modal { border:none; max-width:100%; max-height:none; box-shadow:none; padding:0; animation:none; }
  body[data-print] .modal > *:not(.sheet) { display:none !important; }
  .sheet { border:none; border-radius:0; padding:0; }
  /* no document open (e.g. Reports): print the page itself */
  body:not([data-print]) #overlay { display:none !important; }
  body:not([data-print]) main { max-width:100%; padding:0; }
  .card, .tile { box-shadow:none; border:1px solid #ddd; break-inside:avoid; }
  .page-head .btn, .m-actions { display:none !important; }
}

/* ---------- Multispeciality additions (18 doctors, video consults, pre-visit intake) ---------- */
.doc-spec { color:var(--muted); font-size:11px; padding-left:14px; }
.t-of { font-size:14px; font-weight:600; color:var(--muted); }
.badge-video, .badge-intake { margin-left:4px; display:inline-flex; align-items:center; gap:3px; font-size:10.5px; font-weight:600; line-height:1; padding:3px 7px; border-radius:99px; white-space:nowrap; vertical-align:middle; }
.badge-video  { color:#5b21b6; background:#f3effe; border:1px solid #ddd2fb; }
.badge-intake { color:#8a5a00; background:#fdf6e7; border:1px solid #f1dfb4; }
.tok-big.vid { font-size:13px; padding:3px 7px; }

/* compact live-queue cards on the dashboard (wrap nicely for ~13 doctors) */
.queue-doc.compact { padding:10px 12px; border-radius:12px; border-top-width:3px; min-width:0; }
.queue-doc.compact .qd-top { gap:8px; margin-bottom:6px; min-width:0; }
.queue-doc.compact .qd-top > div { min-width:0; }
.queue-doc.compact .qd-name { font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.queue-doc.compact .qd-spec { font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.queue-doc.compact .qd-body { gap:8px; grid-template-columns:1fr 1fr; }
.queue-doc.compact .qd-body > div { min-width:0; }
.queue-doc.compact .qd-body > div:last-child { padding-left:8px; }
.queue-doc.compact .qd-now { font-size:10px; }
.queue-doc.compact .qd-token { font-size:22px; }
.queue-doc.compact .qd-token.sm { font-size:18px; }
.queue-doc.compact .qd-who { font-size:11.5px; }
.queue-doc.compact .qd-wait { margin-top:6px; padding-top:6px; font-size:11px; }
.queue-doc.compact .qd-wait b { color:var(--ink); }
.off-today { background:var(--surface-1); border-radius:12px; box-shadow:var(--shadow); padding:10px 14px; margin-bottom:20px; font-size:12.5px; color:var(--ink-2); display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; }
.off-today > b { color:var(--ink); }
.off-doc { white-space:nowrap; }
.off-doc small { color:var(--muted); }

/* pre-visit intake card (patient-entered, shown to the doctor) */
.intake-card { border:1px solid #f1dfb4; background:#fffaf0; border-radius:12px; padding:11px 13px; margin-top:10px; }
.ik-head { display:flex; justify-content:space-between; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.ik-head b { font-size:13px; color:#7a5200; }
.ik-head small { font-size:11px; color:var(--muted); }
.ik-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:8px 14px; }
.ik-grid > div { min-width:0; }
.ik-grid .wide { grid-column:1 / -1; }
.ik-grid span { display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); font-weight:600; }
.ik-grid b { display:block; font-size:13px; font-weight:600; color:var(--ink); overflow-wrap:anywhere; }
.ik-sev { display:inline-block; width:70px; height:7px; border-radius:99px; background:#efe6d2; vertical-align:middle; overflow:hidden; margin-right:4px; }
.ik-sev > i { display:block; height:100%; border-radius:99px; background:var(--good); }
.ik-sev.mid > i { background:var(--warning); }
.ik-sev.hi > i { background:var(--critical); }
.ik-warn { margin-top:9px; padding-top:8px; border-top:1px dashed #f1dfb4; font-size:12.5px; color:var(--critical); font-weight:600; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.ik-ok { margin-top:9px; padding-top:8px; border-top:1px dashed #f1dfb4; font-size:12.5px; color:var(--good-text); font-weight:600; }
.video-box { border:1px solid #ddd2fb; background:#f7f4ff; color:#4c1d95; border-radius:10px; padding:9px 12px; font-size:12.5px; margin-top:10px; line-height:1.5; }
.video-box a { color:#6d28d9; font-weight:600; }
.slot-hint.off { border-color:#f3c4c4; background:#fdf0f0; color:#a33a3a; }

/* reports: per-doctor horizontal bars, two columns on wide screens */
.hbar-cols { columns:2 420px; column-gap:28px; }
.hbar.doc { grid-template-columns: 170px 1fr 74px 40px; break-inside:avoid; padding:4px 0; }
.hbar.doc .hb-lab b { display:block; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hbar.doc .hb-lab small { display:block; font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hbar.doc .hb-track i { opacity:.85; }
.hbar.doc > b { font-size:12.5px; }
.hb-n { color:var(--muted); font-size:11px; text-align:right; }

/* TV: many doctors on one 1080p screen */
.tv-main.dense { grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:16px; padding:18px 24px; }
.tv-main.dense .tv-doc { padding:14px 18px 16px; border-top-width:5px; border-radius:16px; min-width:0; }
.tv-main.dense .tv-doc-head { margin-bottom:8px; gap:10px; }
.tv-main.dense .tv-doc-head > div { min-width:0; }
.tv-main.dense .tv-doc-head h2 { font-size:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tv-main.dense .tv-doc-head small { font-size:12.5px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tv-main.dense .tv-body { display:grid; grid-template-columns:1.05fr 1fr; gap:12px; align-items:start; }
.tv-main.dense .tv-body > div { min-width:0; }
.tv-main.dense .tv-token { font-size:74px; margin:2px 0 0; }
.tv-main.dense .tv-name { font-size:15px; margin-bottom:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tv-main.dense .tv-next { padding-top:4px; }
.tv-main.dense .tv-list { gap:6px; margin-top:6px; }
.tv-main.dense .tv-list span { font-size:18px; padding:4px 10px; border-radius:8px; }
.tv-main.dense .tv-list span.none { font-size:13px; }
.tv-closed { grid-column:1 / -1; text-align:center; padding:12vh 20px; opacity:.85; }
.tv-closed h2 { font-family:var(--font-head); font-size:42px; margin-bottom:8px; }
#tv-off { max-width:75%; }

/* ---------- Mobile ---------- */
.m-topbar { display:none; }
.m-backdrop { display:none; }

@media (max-width: 860px){
  body { display:block; }

  .m-topbar {
    display:flex; align-items:center; gap:10px;
    position:sticky; top:0; z-index:60;
    background: var(--sidebar-bg); color: var(--sidebar-ink);
    padding: 12px 14px;
  }
  .m-topbar .m-title { font-size:16px; font-weight:800; font-family:var(--font-head); }
  .m-topbar .m-title span { color:#ffe08a; }
  .m-menu-btn {
    background:none; border:1px solid rgba(255,255,255,.25); color:inherit;
    font-size:18px; line-height:1; border-radius:8px; padding:6px 10px; cursor:pointer;
  }

  aside {
    position:fixed; top:0; left:0; bottom:0; height:100dvh; z-index:80;
    width:min(260px, 82vw);
    transform:translateX(-100%); transition:transform .25s ease;
    box-shadow:4px 0 24px rgba(0,0,0,.35);
    overflow-y:auto;
  }
  aside.open { transform:translateX(0); }
  .m-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:70; }
  .m-backdrop.show { display:block; }

  main { max-width:100%; padding:16px 14px 40px; }
  h1 { font-size:19px; }

  .card { overflow-x:auto; }
  .card table { min-width:560px; }
  .card .chart, .card .donut, .card .closeout { min-width:0; }
  #ap-grid { overflow-x:auto; }

  .row { flex-wrap:wrap; }
  .row > * { flex:1 1 140px; }
  .search { max-width:100%; }
  .qd-body { grid-template-columns:1fr 1fr; }
  .hbar { grid-template-columns: 110px 1fr 30px; }
  .hbar.doc { grid-template-columns: 120px 1fr 64px; }
  .hbar.doc .hb-n { display:none; }
  .sg-scroll { max-height:70vh; }

  .overlay { padding:3vh 10px; }
  .modal { padding:16px; }
  .toast { left:14px; right:14px; bottom:14px; text-align:center; max-width:none; }
  .tv-token { font-size:72px; }
  .tv-head, .tv-main, .tv-foot { padding-left:16px; padding-right:16px; }
}

@media (max-width: 420px){
  .tiles { grid-template-columns:repeat(2, 1fr); gap:9px; }
  .tile { padding:12px; }
  .tile .t-value { font-size:22px; }
  .upi-qr { flex-direction:column; align-items:flex-start; }
}

/* legend swatches (reuse the slot-cell status colours) */
.sg-legend .lg.st-BOOKED     { background: color-mix(in srgb, var(--blue) 12%, #fff); border-color: color-mix(in srgb, var(--blue) 35%, #fff); }
.sg-legend .lg.st-ARRIVED    { background: color-mix(in srgb, var(--warning) 18%, #fff); border-color: color-mix(in srgb, var(--warning) 50%, #fff); }
.sg-legend .lg.st-IN_CONSULT { background: color-mix(in srgb, var(--accent) 16%, #fff); border-color: var(--accent); }
.sg-legend .lg.st-DONE       { background: color-mix(in srgb, var(--good) 11%, #fff); border-color: color-mix(in srgb, var(--good) 35%, #fff); }
.sg-legend .lg.st-NO_SHOW    { background: color-mix(in srgb, var(--critical) 9%, #fff); border-color: color-mix(in srgb, var(--critical) 35%, #fff); }
.more-row td { text-align:center; padding:8px; }
body.tv main.tv-main { max-width:none; min-width:0; }
@media (min-width: 1600px) and (min-height: 900px){
  .tv-main.dense .tv-doc { padding:18px 20px 20px; }
  .tv-main.dense .tv-doc-head h2 { font-size:21px; }
  .tv-main.dense .tv-token { font-size:92px; }
  .tv-main.dense .tv-name { font-size:17px; }
  .tv-main.dense .tv-list span { font-size:21px; }
}
.hbar.doc .hb-lab b { text-align:left; }
.sg-doc.off .sg-meta { white-space:normal; }