/* ==========================================================================
   GMCH Hospital Admin design system
   Structure is taken from reference/admin-ui/hospital-admin-panel.html
   (floating sidebar shell, KPI-card dashboard language) — deliberately
   different from the doctor module. The PALETTE is GMCH's own plum, sampled
   from the hospital logo, so admin and doctor read as one hospital product
   while staying structurally distinct. Zonov.ai branding lives only on the
   public home page.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Mulish:wght@400;500;600;700;800&display=swap');

:root {
  --bg: #F7F4F9;
  --sidebar: #fff;
  --accent: #884189;          /* GMCH plum */
  --accent-d: #6E326F;
  --accent2: #0E8C86;         /* complementary teal */
  --accent-soft: #F5EDF6;
  --accent-line: #E6D7E6;
  --card: #fff;
  --border: #E4DAE7;
  --text: #241428;
  --muted: #6B5570;
  --green: #06A05E;
  --red: #D93A32;
  --orange: #C97A12;
  --purple: #884189;
  --line: #F0E9F2;
  --line2: #F7F3F8;
  --faint: #8E7C93;
  --grad-token: linear-gradient(135deg, #A25FA3, #0E8C86);
  --font: 'Mulish', 'Segoe UI', sans-serif;
  --display: 'Sora', 'Mulish', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; scrollbar-width: none; }
*::-webkit-scrollbar { display: none; }

body {
  font-family: var(--font); background: var(--bg); color: var(--text);
  min-height: 100vh; display: flex; font-size: 16px; line-height: 1.7;
}
a { color: inherit; text-decoration: none; }

/* ── Floating sidebar ───────────────────────────────────────────────────── */
.sidebar {
  width: 256px; background: #fff; height: calc(100vh - 60px);
  position: fixed; top: 30px; left: 30px;
  display: flex; flex-direction: column; z-index: 100; border-radius: 16px;
}
.sidebar-brand { padding: 16px 20px; border-bottom: 1px solid var(--line); border-radius: 16px 16px 0 0; }
.brand-logo-card {
  width: 100%; height: 84px; display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 12px;
  padding: 10px; overflow: hidden;
}
.brand-logo { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
/* logo.png is a 408×96 strip (GMCH lockup + NABH badges) — crop to the lockup,
   which is the leftmost ~95px, so the width is height × (95/96). */
.brand-logo-crop { display: block; height: 60px; width: 60px; overflow: hidden; position: relative; }
.brand-logo-crop img { height: 100%; width: auto; max-width: none; position: absolute; left: 0; top: 0; }
.brand-tag {
  display: inline-block; margin-top: 8px; font-size: 9px; font-weight: 700; color: var(--accent);
  text-transform: uppercase; letter-spacing: .5px; background: var(--accent-soft);
  padding: 2px 6px; border-radius: 4px; border: 1px solid var(--accent-line);
}

.nav { flex: 1; padding: 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.nav-group {
  font-size: 9px; font-weight: 700; color: var(--faint);
  text-transform: uppercase; letter-spacing: 1.5px; padding: 8px 0 2px;
}
.nav-link {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; cursor: pointer;
  font-size: 16px; font-weight: 400; color: var(--text);
  transition: all .15s; border-radius: 8px;
}
.nav-link:hover { background: var(--accent-soft); color: var(--accent); }
.nav-link.active { background: var(--accent); color: var(--accent-soft); }
.nav-icon { width: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.nav-icon svg { width: 16px; height: 16px; flex-shrink: 0; }
.nav-badge {
  margin-left: auto; background: #fef2f2; color: var(--red);
  border-radius: 8px; padding: 1px 6px; font-size: 10px; font-weight: 700;
}
.nav-badge.blue { background: var(--accent-soft); color: var(--accent); }
.nav-link.active .nav-badge { background: rgba(255,255,255,.22); color: #fff; }
.sidebar-footer { padding: 16px 24px; border-top: 1px solid var(--line); font-size: 10px; color: var(--faint); }

/* ── Main column ────────────────────────────────────────────────────────── */
.main {
  margin-left: 316px; flex: 1; display: flex; flex-direction: column;
  min-height: 100vh; background: var(--bg); min-width: 0;
}
.topbar {
  background: #fff; padding: 0 24px; height: 80px; display: flex; align-items: center;
  justify-content: space-between; border-radius: 16px; margin: 30px 30px 16px 0; gap: 16px;
}
.topbar-left h1 { font-size: 28px; font-weight: 600; color: var(--accent); font-family: var(--font); }
.topbar-left p { font-size: 14px; color: var(--muted); margin-top: 1px; font-weight: 400; line-height: 1.7; }
.topbar-right { display: flex; align-items: center; gap: 8px; }
.hosp-pill {
  background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 20px;
  padding: 3px 10px; font-size: 11px; font-weight: 700; color: var(--accent);
}
.btn-logout {
  background: transparent; color: var(--muted); border: 1.5px solid var(--border);
  border-radius: 8px; padding: 5px 12px; font-size: 11px; font-weight: 600;
  cursor: pointer; transition: .15s; font-family: var(--font);
}
.btn-logout:hover { background: #fef2f2; color: var(--red); border-color: #fecaca; }
.refresh-btn {
  background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent);
  border-radius: 8px; padding: 5px 11px; font-size: 11px; cursor: pointer;
  font-weight: 600; font-family: var(--font);
}
.refresh-btn:hover { background: var(--accent-line); }

.content { padding: 24px 30px 30px 0; flex: 1; }
.page { display: none; }
.page.active { display: block; }

/* ── KPI cards ──────────────────────────────────────────────────────────── */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.kpi-card {
  background: #fff; border-radius: 16px; padding: 16px 18px; border: 1px solid var(--border);
  box-shadow: 0 2px 10px rgba(30,41,59,.05); position: relative; overflow: hidden; transition: .2s;
}
.kpi-card:hover { box-shadow: 0 6px 18px rgba(30,41,59,.09); }
.kpi-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; }
.kpi-icon {
  width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; margin-left: auto;
}
.kpi-icon svg { width: 22px; height: 22px; }
.kpi-val {
  font-size: 36px; font-weight: 600; color: var(--text);
  letter-spacing: -1px; line-height: 1; font-family: var(--font);
}
.kpi-label { font-size: 16px; color: var(--muted); margin-top: 3px; font-weight: 400; line-height: 1.7; }
.kpi-tag {
  font-size: 10px; background: #f1f5f9; color: #64748b;
  padding: 2px 8px; border-radius: 10px; font-weight: 700;
}

/* ── Section panel ──────────────────────────────────────────────────────── */
.sec {
  background: #fff; border-radius: 16px; border: 1px solid var(--border);
  box-shadow: 0 2px 10px rgba(30,41,59,.05); overflow: hidden; margin-bottom: 16px;
}
.sec-head {
  padding: 12px 18px; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line); flex-wrap: wrap; gap: 8px;
}
.sec-head h2 { font-size: 24px; font-weight: 600; color: var(--text); font-family: var(--font); }
.sec-head-r { display: flex; align-items: center; gap: 8px; }
.sec-tag { font-size: 10px; color: var(--muted); background: var(--line2); padding: 2px 9px; border-radius: 20px; }
.sec-body { padding: 16px 18px; }
.two-col { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr); gap: 16px; align-items: start; }
.two-col .sec-head h2 { font-size: 16px; }

/* ── Table ──────────────────────────────────────────────────────────────── */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
  padding: 8px 14px; text-align: left; font-size: 14px; font-weight: 400; color: var(--muted);
  text-transform: uppercase; letter-spacing: .7px; background: var(--line2);
  border-bottom: 1px solid var(--border); white-space: nowrap; font-family: var(--font);
}
.tbl td {
  padding: 10px 14px; font-size: 14px; color: var(--text);
  border-bottom: 1px solid var(--line); vertical-align: middle; font-family: var(--font);
}
.tbl tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover td { background: var(--line2); }
.tbl-wrap { overflow-x: auto; }
.empty-row td, .loading-row td { text-align: center; color: var(--muted); padding: 28px; font-size: 14px; }

/* ── Badges ─────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 3px; padding: 3px 9px;
  border-radius: 20px; font-size: 10px; font-weight: 700; border: none; white-space: nowrap;
}
.badge-green  { background: #e3f9ee; color: #0a8a53; }
.badge-red    { background: #fde8e8; color: #e53939; }
.badge-blue   { background: var(--accent-soft); color: var(--accent); }
.badge-orange { background: #fef1e2; color: #c2762c; }
.badge-gray   { background: #eef0f3; color: #5b6472; }
.badge-teal   { background: #E4F6F4; color: #0B7A75; }
.badge-purple { background: #f2e9fd; color: #7c3aed; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px;
  border-radius: 8px; font-size: 11px; font-weight: 600; cursor: pointer;
  border: none; transition: .15s; font-family: var(--font);
}
.btn:hover:not(:disabled) { opacity: .88; transform: translateY(-1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn svg { width: 13px; height: 13px; }
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 2px 7px rgba(136,65,137,.25); }
.btn-sm { padding: 4px 9px; font-size: 10px; border-radius: 5px; }
.btn-outline { background: #fff; color: #475569; border: 1.5px solid var(--border); }
.btn-outline:hover { border-color: #94a3b8; background: var(--line2); }
.btn-danger  { background: #fef2f2; color: var(--red); border: 1px solid #fecaca; }
.btn-warn    { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
.btn-success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.btn-purple  { background: #faf5ff; color: #7c3aed; border: 1px solid #e9d5ff; }

/* ── Filter bar / tabs ──────────────────────────────────────────────────── */
.filter-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: #fff;
  border: 1px solid var(--border); border-radius: 9px; padding: 9px 13px;
  margin-bottom: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.filter-bar label { font-size: 11px; font-weight: 600; color: #374151; }
.filter-bar input, .filter-bar select {
  background: var(--line2); border: 1.5px solid var(--border); border-radius: 7px;
  padding: 5px 9px; font-size: 11px; outline: none; font-family: var(--font); transition: .15s;
}
.filter-bar input:focus, .filter-bar select:focus { border-color: var(--accent); background: #fff; }
.filter-search { flex: 1; min-width: 180px; }

.tabs { display: flex; gap: 2px; background: var(--line2); border-radius: 8px; padding: 2px; width: fit-content; margin-bottom: 14px; }
.tab-btn {
  padding: 5px 14px; border-radius: 6px; border: none; background: transparent;
  font-size: 11px; font-weight: 600; color: var(--muted); cursor: pointer;
  transition: .15s; font-family: var(--font);
}
.tab-btn.active { background: #fff; color: var(--accent); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* ── Queue token / bars / dots ──────────────────────────────────────────── */
.token-card {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 9px; background: var(--grad-token);
  color: #fff; font-size: 13px; font-weight: 800; flex-shrink: 0;
}
.token-card.completed { background: linear-gradient(135deg, #16a34a, #166534); }
.token-card.no-show { background: linear-gradient(135deg, #94a3b8, #64748b); opacity: .7; }
tr.row-done td { background: #f0fdf4; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px; flex-shrink: 0; }
.bar-wrap { background: #e5e7eb; border-radius: 4px; height: 5px; overflow: hidden; min-width: 60px; }
.bar-fill { height: 100%; border-radius: 4px; background: var(--grad-token); }
.bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.bar-row .bl { width: 190px; font-size: 13px; font-weight: 600; flex-shrink: 0; }
.bar-row .bv { width: 34px; text-align: right; font-size: 12.5px; font-weight: 800; color: var(--accent); }

/* ── Recon cards ────────────────────────────────────────────────────────── */
.recon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.recon-card { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.recon-card .rc-label { font-size: 11px; color: #64748b; margin-bottom: 4px; font-weight: 600; }
.recon-card .rc-val { font-size: 22px; font-weight: 700; color: var(--text); letter-spacing: -.5px; }
.recon-card .rc-sub { font-size: 11px; color: #94a3b8; margin-top: 2px; }

/* ── Modal / forms ──────────────────────────────────────────────────────── */
.overlay {
  display: none; position: fixed; inset: 0; background: rgba(15,23,42,.5); z-index: 200;
  align-items: center; justify-content: center; backdrop-filter: blur(4px); padding: 20px;
}
.overlay.show { display: flex; }
.modal {
  background: #fff; border-radius: 16px; padding: 24px; width: 500px; max-width: 95vw;
  box-shadow: 0 20px 50px rgba(0,0,0,.18); max-height: 90vh; overflow-y: auto;
}
.modal-title { font-size: 15px; font-weight: 700; margin-bottom: 3px; }
.modal-sub { font-size: 11px; color: var(--muted); margin-bottom: 18px; }
.form-row { margin-bottom: 11px; }
.form-row label {
  display: block; font-size: 10px; font-weight: 700; color: #374151;
  margin-bottom: 4px; text-transform: uppercase; letter-spacing: .5px;
}
.form-row input, .form-row select, .form-row textarea {
  width: 100%; background: var(--line2); border: 1.5px solid var(--border); color: var(--text);
  padding: 8px 11px; border-radius: 8px; font-size: 12px; outline: none;
  font-family: var(--font); transition: .15s;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px rgba(136,65,137,.09);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.modal-actions {
  display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px;
  padding-top: 12px; border-top: 1px solid var(--line);
}

/* ── Login (split screen, per reference) ────────────────────────────────── */
#login-screen { position: fixed; inset: 0; display: flex; z-index: 9999; background: #fff; font-family: var(--font); }
.login-left {
  flex: 0 0 54%; position: relative; overflow: hidden; display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center; padding: 56px 64px; color: #241428;
  background:
    radial-gradient(900px 560px at 14% 8%, rgba(136,65,137,.12), transparent 60%),
    radial-gradient(760px 520px at 88% 92%, rgba(14,140,134,.10), transparent 55%),
    linear-gradient(165deg, #F3F8FE 0%, #EAF3FC 45%, #E3EFFC 100%);
}
.login-left::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(136,65,137,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(136,65,137,.055) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 72%);
  opacity: .7;
}
.login-brandmark {
  position: absolute; top: 44px; left: 60px; z-index: 4;
  display: flex; align-items: center; gap: 12px;
  animation: loginRise .6s cubic-bezier(.16,1,.3,1) both;
}
.login-brandmark img { height: 26px; width: auto; }
.login-brand-sub {
  font-size: 12px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase;
  color: #8E7C93; padding-left: 12px; border-left: 1px solid rgba(136,65,137,.3);
}
.login-headline {
  position: relative; font-size: 30px; font-weight: 800; line-height: 1.28;
  max-width: 430px; margin-bottom: 14px; color: #241428;
  animation: loginRise .6s cubic-bezier(.16,1,.3,1) .14s both;
}
.login-headline b {
  background: linear-gradient(100deg, #884189, #0E8C86);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.login-sub {
  position: relative; font-size: 14.5px; color: #6B5570; max-width: 390px; line-height: 1.65;
  animation: loginRise .6s cubic-bezier(.16,1,.3,1) .2s both;
}
.login-stats { position: relative; display: flex; gap: 26px; margin-top: 30px; animation: loginRise .6s cubic-bezier(.16,1,.3,1) .26s both; }
.login-stat .ls-val { font-size: 24px; font-weight: 800; color: #241428; letter-spacing: -.5px; }
.login-stat .ls-lbl { font-size: 11.5px; font-weight: 700; color: #8E7C93; text-transform: uppercase; letter-spacing: .6px; }
@keyframes loginRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

.login-right {
  flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px;
  background: linear-gradient(160deg, #FBFDFF 0%, #F2F7FD 55%, #EAF2FC 100%);
}
.login-card { width: 100%; max-width: 400px; animation: loginRise .6s cubic-bezier(.16,1,.3,1) .1s both; }
.login-card h2 { font-size: 23px; font-weight: 800; margin-bottom: 6px; color: #241428; letter-spacing: -.2px; }
.login-card-sub { font-size: 13.5px; color: var(--muted); margin-bottom: 28px; line-height: 1.6; }
.login-label {
  display: block; font-size: 10.5px; font-weight: 700; color: #374151;
  margin-bottom: 6px; text-transform: uppercase; letter-spacing: .6px;
}
.login-input-wrap { position: relative; margin-bottom: 22px; }
.login-input-lock {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  color: #93A3B8; display: flex; pointer-events: none; transition: color .15s;
}
.login-input {
  width: 100%; background: #F7F8FA; border: 1.5px solid #E5E9F0; color: var(--text);
  padding: 15px 46px 15px 42px; border-radius: 13px; font-size: 14px; outline: none;
  font-family: var(--font); height: 56px; transition: border-color .18s, box-shadow .18s, background .18s;
}
.login-input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(136,65,137,.14); background: #fff; }
.login-eye-btn {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; padding: 4px; color: var(--faint);
  display: flex; align-items: center; border-radius: 6px; transition: color .15s;
}
.login-eye-btn:hover { color: var(--accent); }
.login-btn {
  width: 100%; height: 56px; padding: 0 16px;
  background: linear-gradient(115deg, #0E8C86, #A25FA3 52%, #6E326F);
  color: #fff; border: none; border-radius: 13px; font-size: 14.5px; font-weight: 700;
  cursor: pointer; font-family: var(--font); box-shadow: 0 6px 18px rgba(110,50,111,.28);
  transition: transform .15s, box-shadow .15s, filter .15s;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.login-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(110,50,111,.36); filter: brightness(1.04); }
.login-btn:disabled { cursor: default; opacity: .85; }
#login-err {
  display: none; align-items: flex-start; gap: 8px; background: #fef2f2; color: #B42318;
  border: 1px solid #fecaca; border-radius: 10px; padding: 10px 12px; font-size: 12.5px;
  margin-bottom: 16px; line-height: 1.5;
}
#login-err.show { display: flex; }

/* ==========================================================================
   ANALYTICS DASHBOARD
   A report-canvas layout in the Power BI idiom: a dense grid of titled panels
   over one shared time filter, so the whole page describes a single window and
   the eye can move between panels without re-reading a header each time.
   ========================================================================== */

/* ── Report toolbar: window filter + live stamp ─────────────────────────── */
.rpt-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  padding: 10px 14px; margin-bottom: 14px; box-shadow: 0 2px 10px rgba(30,41,59,.05);
}
.rpt-bar-l { font-size: 11px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: 1px; }
.seg { display: flex; gap: 2px; background: var(--line2); border-radius: 9px; padding: 3px; }
.seg button {
  border: none; background: transparent; cursor: pointer; font-family: var(--font);
  font-size: 12px; font-weight: 700; color: var(--muted); padding: 5px 13px; border-radius: 7px; transition: .15s;
}
.seg button:hover { color: var(--accent); }
.seg button.on { background: #fff; color: var(--accent); box-shadow: 0 1px 4px rgba(0,0,0,.09); }
.rpt-stamp { margin-left: auto; font-size: 11.5px; color: var(--faint); display: flex; align-items: center; gap: 7px; }
.rpt-live { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(6,160,94,.16); }

/* ── KPI strip. Sparkline sits inside the card so the number carries its own
      recent shape — a bare figure on a hospital dashboard tells you nothing
      about direction. ─────────────────────────────────────────────────────── */
.kstrip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.kcard {
  background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 13px 15px 9px;
  box-shadow: 0 2px 10px rgba(30,41,59,.05); position: relative; overflow: hidden; transition: .18s;
}
.kcard:hover { box-shadow: 0 8px 22px rgba(30,41,59,.10); transform: translateY(-1px); }
.kcard-clickable { cursor: pointer; }
.kcard-clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kcard::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent);
}
.kcard.teal::after   { background: var(--accent2); }
.kcard.amber::after  { background: var(--orange); }
.kcard.green::after  { background: var(--green); }
.kcard.blue::after   { background: #4C6FBF; }
.kc-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.kc-lab { font-size: 11.5px; font-weight: 700; color: var(--muted); letter-spacing: .2px; }
.kc-val { font-size: 32px; font-weight: 700; letter-spacing: -1.2px; line-height: 1.05; margin-top: 4px; font-family: var(--display); }
.kc-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 2px; }
.kc-sub { font-size: 11px; color: var(--faint); line-height: 1.45; }
.kc-delta { font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 20px; white-space: nowrap; }
.kc-delta.up   { background: #e3f9ee; color: #0a8a53; }
.kc-delta.down { background: #fde8e8; color: #d0342c; }
.kc-delta.flat { background: #eef0f3; color: #5b6472; }
.ch-spark { width: 92px; height: 30px; display: block; flex-shrink: 0; }

/* ── Panel grid. Named spans keep the canvas from turning into a wall of
      equal boxes — the trend chart earns twice the width of a donut. ──────── */
.pgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; align-items: start; }
.span3 { grid-column: span 3; } .span4 { grid-column: span 4; }
.span5 { grid-column: span 5; } .span6 { grid-column: span 6; }
.span7 { grid-column: span 7; } .span8 { grid-column: span 8; } .span12 { grid-column: span 12; }

.pnl {
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 2px 10px rgba(30,41,59,.05); overflow: hidden; min-width: 0;
}
.pnl-h {
  display: flex; align-items: center; gap: 9px; padding: 11px 15px 9px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
}
.pnl-h h3 { font-size: 13.5px; font-weight: 700; letter-spacing: -.1px; font-family: var(--display); }
.pnl-h .pnl-sub { font-size: 11px; color: var(--faint); font-weight: 500; }
.pnl-h .pnl-tag {
  margin-left: auto; font-size: 10px; font-weight: 700; color: var(--accent);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  padding: 2px 8px; border-radius: 20px; white-space: nowrap;
}
.pnl-b { padding: 13px 15px; }
.pnl-b.tight { padding: 9px 12px; }
.pnl-scroll { max-height: 300px; overflow-y: auto; }

/* Chart primitives now live in css/charts.css, shared with the doctor profile. */

/* ==========================================================================
   AI ASSISTANT — a docked right-hand panel, opened from the toolbar.
   It is a conversation about the same window the charts show, so it lives on
   the report canvas rather than on a page of its own.
   ========================================================================== */
.ai-fab {
  position: fixed; right: 26px; bottom: 26px; z-index: 300;
  display: flex; align-items: center; gap: 9px; border: none; cursor: pointer;
  padding: 13px 19px; border-radius: 40px; font-family: var(--font);
  font-size: 13.5px; font-weight: 700; color: #fff;
  background: linear-gradient(115deg, #0E8C86, #A25FA3 55%, #6E326F);
  box-shadow: 0 10px 28px rgba(110,50,111,.34); transition: transform .16s, box-shadow .16s;
}
.ai-fab:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(110,50,111,.42); }
.ai-fab svg { width: 18px; height: 18px; }
.ai-fab.hide { display: none; }

.ai-dock {
  position: fixed; top: 0; right: 0; bottom: 0; width: 460px; max-width: 94vw; z-index: 320;
  background: #fff; border-left: 1px solid var(--border); box-shadow: -18px 0 46px rgba(36,20,40,.16);
  display: flex; flex-direction: column; transform: translateX(102%);
  transition: transform .3s cubic-bezier(.16,1,.3,1);
}
.ai-dock.open { transform: translateX(0); }
.ai-head {
  padding: 15px 17px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 11px; flex-shrink: 0;
}
.ai-avatar {
  width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0;
  background: linear-gradient(135deg, #A25FA3, #0E8C86); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.ai-avatar svg { width: 19px; height: 19px; }
.ai-head h3 { font-size: 15px; font-weight: 800; font-family: var(--display); letter-spacing: -.2px; }
.ai-head p { font-size: 11.5px; color: var(--faint); line-height: 1.4; }
.ai-x {
  margin-left: auto; background: var(--line2); border: 1px solid var(--border); border-radius: 9px;
  width: 30px; height: 30px; cursor: pointer; color: var(--muted); font-size: 15px; line-height: 1;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ai-x:hover { background: #fef2f2; color: var(--red); border-color: #fecaca; }

.ai-body { flex: 1; overflow-y: auto; padding: 15px 17px; display: flex; flex-direction: column; gap: 12px; }
.ai-msg { max-width: 92%; font-size: 13.5px; line-height: 1.62; white-space: pre-wrap; word-break: break-word; }
.ai-msg.me {
  align-self: flex-end; background: var(--accent); color: #fff;
  padding: 9px 13px; border-radius: 14px 14px 4px 14px;
}
.ai-msg.bot {
  align-self: flex-start; background: var(--line2); border: 1px solid var(--border);
  padding: 11px 14px; border-radius: 14px 14px 14px 4px; color: var(--text);
}
.ai-msg.bot b { font-weight: 800; }
.ai-hl { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
.ai-hl-chip {
  background: #fff; border: 1px solid var(--accent-line); border-radius: 9px; padding: 5px 9px;
}
.ai-hl-chip .h-l { display: block; font-size: 9.5px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .6px; }
.ai-hl-chip .h-v { font-size: 14px; font-weight: 800; color: var(--accent); letter-spacing: -.3px; }
.ai-used { font-size: 10.5px; color: var(--faint); margin-top: 8px; font-style: italic; }
.ai-typing { display: flex; gap: 4px; align-items: center; padding: 12px 14px; }
.ai-typing span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .35;
  animation: aiBlink 1.1s infinite;
}
.ai-typing span:nth-child(2) { animation-delay: .16s; }
.ai-typing span:nth-child(3) { animation-delay: .32s; }
@keyframes aiBlink { 0%, 60%, 100% { opacity: .28; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.ai-starters { display: flex; flex-direction: column; gap: 6px; }
.ai-starter {
  text-align: left; background: #fff; border: 1px solid var(--border); border-radius: 11px;
  padding: 9px 12px; font-family: var(--font); font-size: 12.5px; color: var(--text);
  cursor: pointer; transition: .15s; line-height: 1.45;
}
.ai-starter:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

.ai-foot { padding: 12px 15px 14px; border-top: 1px solid var(--line); flex-shrink: 0; }
.ai-inwrap { display: flex; gap: 8px; align-items: flex-end; }
.ai-in {
  flex: 1; resize: none; max-height: 120px; min-height: 44px;
  background: var(--line2); border: 1.5px solid var(--border); border-radius: 12px;
  padding: 11px 13px; font-family: var(--font); font-size: 13.5px; color: var(--text);
  outline: none; line-height: 1.5; transition: .15s;
}
.ai-in:focus { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px rgba(136,65,137,.10); }
.ai-send {
  width: 44px; height: 44px; border-radius: 12px; border: none; cursor: pointer; flex-shrink: 0;
  background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center;
  transition: .15s;
}
.ai-send:hover:not(:disabled) { background: var(--accent-d); }
.ai-send:disabled { opacity: .45; cursor: not-allowed; }
.ai-send svg { width: 18px; height: 18px; }
.ai-note { font-size: 10.5px; color: var(--faint); margin-top: 8px; line-height: 1.5; }
.ai-scrim {
  position: fixed; inset: 0; background: rgba(36,20,40,.34); z-index: 310;
  opacity: 0; pointer-events: none; transition: opacity .3s; backdrop-filter: blur(2px);
}
.ai-scrim.open { opacity: 1; pointer-events: auto; }

@media (max-width: 1400px) {
  .kstrip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .span3, .span4, .span5 { grid-column: span 6; }
  .span7, .span8 { grid-column: span 12; }
}
@media (max-width: 1000px) {
  .kstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .span3, .span4, .span5, .span6, .span7, .span8 { grid-column: span 12; }
  .ai-dock { width: 100%; }
}

/* ── Toast ──────────────────────────────────────────────────────────────── */
#toast, .toast {
  position: fixed; bottom: 20px; right: 20px; padding: 11px 16px; border-radius: 9px;
  font-size: 12px; font-weight: 600; z-index: 999; box-shadow: 0 8px 24px rgba(0,0,0,.14);
  min-width: 180px; background: #1e293b; color: #fff;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.toast.show { opacity: 1; }
.toast.error { background: #dc2626; }

@media (max-width: 1100px) {
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .recon-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .sidebar { width: 56px; left: 10px; top: 10px; height: calc(100vh - 20px); }
  .sidebar-brand .brand-tag, .nav-group, .nav-link span, .nav-badge, .sidebar-footer { display: none; }
  .nav-link { justify-content: center; padding: 10px; }
  .main { margin-left: 80px; }
  .topbar { margin: 10px 10px 12px 0; height: auto; padding: 14px 16px; flex-wrap: wrap; }
  .content { padding: 12px 10px 20px 0; }
  .login-left { display: none; }
}

/* ==========================================================================
   Report-bar controls: custom range + comparison toggle
   Same tokens and shapes as the existing segmented control — these are new
   controls, not a new visual language.
   ========================================================================== */
.rng { display: none; align-items: center; gap: 6px; }
.rng.on { display: flex; }
.rng input {
  background: var(--line2); border: 1.5px solid var(--border); border-radius: 8px;
  padding: 5px 9px; font-size: 12px; font-family: var(--font); color: var(--text); outline: none;
}
.rng input:focus { border-color: var(--accent); background: #fff; }
.rng-to { font-size: 11.5px; color: var(--faint); font-weight: 700; }
.rng-go {
  background: var(--accent); color: #fff; border: none; border-radius: 8px;
  padding: 6px 13px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: var(--font);
}
.rng-go:hover { background: var(--accent-d); }

.cmp { display: flex; align-items: center; gap: 7px; cursor: pointer; user-select: none; }
.cmp input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
.cmp span { font-size: 12px; font-weight: 600; color: var(--muted); }
.cmp:hover span { color: var(--accent); }

/* Inline filter inside a panel header */
.pnl-find {
  margin-left: auto; background: var(--line2); border: 1.5px solid var(--border);
  border-radius: 8px; padding: 5px 10px; font-size: 12px; font-family: var(--font);
  color: var(--text); outline: none; width: 190px; max-width: 45%;
}
.pnl-find:focus { border-color: var(--accent); background: #fff; }

/* Sortable table: the header states which column is driving the order, because
   a table that silently re-sorts is worse than one that does not sort at all. */
.tbl.srt th[data-sort] { cursor: pointer; user-select: none; white-space: nowrap; }
.tbl.srt th[data-sort]:hover { color: var(--accent); }
.tbl.srt th.sorted::after { content: ' ▾'; color: var(--accent); font-size: 10px; }
.tbl.srt th.sorted.asc::after { content: ' ▴'; }
.tbl th.num, .tbl td.num { text-align: center; }
.tbl tbody tr.rowlink { cursor: pointer; }
.tbl tbody tr.rowlink:hover td { background: var(--accent-soft); }

/* ==========================================================================
   Drill-down drawer — the rows behind one chart element
   ========================================================================== */
.dd {
  position: fixed; top: 0; right: 0; bottom: 0; width: 620px; max-width: 96vw; z-index: 340;
  background: #fff; border-left: 1px solid var(--border); box-shadow: -18px 0 46px rgba(36,20,40,.16);
  display: flex; flex-direction: column; transform: translateX(102%);
  transition: transform .3s cubic-bezier(.16,1,.3,1);
}
.dd.open { transform: translateX(0); }
.dd-head { padding: 16px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; gap: 12px; }
.dd-kicker {
  font-size: 10px; font-weight: 800; color: var(--accent); text-transform: uppercase;
  letter-spacing: 1px; margin-bottom: 3px;
}
.dd-head h3 { font-family: var(--display); font-size: 18px; font-weight: 800; letter-spacing: -.3px; line-height: 1.3; }
.dd-head p { font-size: 12px; color: var(--faint); margin-top: 3px; }
.dd-body { flex: 1; overflow-y: auto; padding: 0; }
.dd-body .tbl th { position: sticky; top: 0; z-index: 2; }
.dd-cap {
  margin: 12px 16px; background: var(--accent-soft); border: 1px solid var(--accent-line);
  border-radius: 10px; padding: 9px 12px; font-size: 12px; color: var(--accent); line-height: 1.55;
}
.dd-empty { padding: 34px 20px; text-align: center; color: var(--faint); font-size: 13.5px; line-height: 1.6; }
.dd-scrim {
  position: fixed; inset: 0; background: rgba(36,20,40,.34); z-index: 330;
  opacity: 0; pointer-events: none; transition: opacity .3s; backdrop-filter: blur(2px);
}
.dd-scrim.open { opacity: 1; pointer-events: auto; }

@media (max-width: 900px) { .dd { width: 100%; } }


/* ── Prescriptions module ─────────────────────────────────────────────── */
.rxdoc-wrap { position: relative; min-width: 260px; }
.rxdoc-in, #rxFrom, #rxTo, #rxQ {
  padding: 8px 11px; border: 1.5px solid var(--border); border-radius: 8px;
  font-size: 13px; background: #f8fafc; outline: none; font-family: inherit;
}
.rxdoc-in { width: 100%; }
.rxdoc-in:focus, #rxFrom:focus, #rxTo:focus, #rxQ:focus { border-color: var(--accent); background: #fff; }
.rxdoc-list {
  display: none; position: absolute; z-index: 30; left: 0; right: 0; top: 100%; margin-top: 4px;
  max-height: 260px; overflow-y: auto; background: #fff; border: 1.5px solid var(--border);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(15,23,42,.12);
}
.rxdoc-list.open { display: block; }
.rxdoc-opt, .rxdoc-none { padding: 8px 12px; font-size: 13px; }
.rxdoc-opt { cursor: pointer; }
.rxdoc-opt:hover { background: var(--accent-soft); color: var(--accent); }
.rxdoc-none { color: var(--muted); }
.rxchips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.rxchip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 12px; font-size: 12.5px; font-weight: 600;
  background: var(--accent-soft); color: var(--accent); border-radius: 999px;
}
.rxchip button { border: 0; background: rgba(0,0,0,.08); color: inherit; width: 18px; height: 18px; border-radius: 50%; cursor: pointer; font-size: 9px; line-height: 1; }
.rxchip button:hover { background: rgba(0,0,0,.18); }
.rxchip-none { font-size: 12px; color: var(--muted); }
.rx-drafts { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding-bottom: 9px; }
.rx-uuid { font-size: 11px; color: #5b6472; background: #f1f4f8; padding: 2px 6px; border-radius: 5px; user-select: all; }
.rx-pager { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 12px 4px 0; font-size: 12px; color: var(--muted); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
/* Wrapper html2pdf renders for "Download PDF" (never attached to the page). Two classes
   beat doctor.css's `.print-overlay { position: fixed; inset: 0; display: none }`. */
.print-overlay.pdf-sheet {
  display: block; position: static; inset: auto; width: 794px; padding: 0; background: #fff; overflow: visible;
}
.print-overlay.pdf-sheet .rx-sheet { margin: 0 !important; box-shadow: none !important; max-width: none !important; }
#rxFilterPnl, #rxFilterPnl .pnl-b { overflow: visible; }

/* Calling-feed consent switch */
.feed-row { display: flex; align-items: center; gap: 16px; }
.feed-title { font-size: 14px; }
.feed-sub { font-size: 12px; color: var(--muted); margin-top: 3px; max-width: 640px; line-height: 1.5; }
.switch { position: relative; display: inline-block; width: 52px; height: 28px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; inset: 0; cursor: pointer; background: #cbd5e1; border-radius: 28px; transition: .2s; }
.switch .slider::before { content: ''; position: absolute; width: 22px; height: 22px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.switch input:checked + .slider { background: var(--accent); }
.switch input:checked + .slider::before { transform: translateX(24px); }
.switch input:disabled + .slider { opacity: .6; cursor: wait; }