@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --teal-900: #0a4d4d;
  --teal-700: #0f6e6e;
  --teal-600: #128080;
  --teal-500: #17a3a3;
  --green-500: #2e9e6b;
  --ink-900: #14232b;
  --ink-700: #3c5460;
  --ink-500: #6b8089;
  --line: #dde6e6;
  --bg: #f6faf9;
  --white: #ffffff;
  --warn-bg: #fff6e5;
  --warn-border: #f0c869;
  --radius: 12px;
  --shadow: 0 2px 10px rgba(10, 77, 77, 0.08);

  /* Accent palette, matching the GP4U logo's pulse-mark gradient (teal -> blue).
     Gold is kept deliberately separate — used only as a contrast colour for
     attention/urgency spots (notification badges, pending-status highlights),
     never as a primary UI colour. */
  --blue-600: #1d4ed8;
  --blue-500: #3b82f6;
  --teal-bright: #2dd4bf;
  --gold-500: #f0b93c;
  --gold-600: #d99a1f;
  --cream: #fbf3e4;

  --radius-lg: 20px;
  --radius-xl: 28px;
  --shadow-sm: 0 1px 3px rgba(10, 46, 46, 0.06);
  --shadow-md: 0 8px 24px rgba(10, 46, 46, 0.1);
  --shadow-lg: 0 20px 48px rgba(10, 46, 46, 0.16);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  font-size: 16px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Manrope', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink-900);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { letter-spacing: -0.01em; }

a { color: var(--teal-700); }

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Header */
header.site-header {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(10, 46, 46, 0.02);
  position: sticky;
  top: 0;
  z-index: 20;
}
header.site-header::after {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--teal-700), var(--blue-600));
}
.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  max-width: 1120px;
  margin: 0 auto;
  flex-wrap: wrap;
  gap: 10px;
}
.brand {
  font-weight: 800;
  font-size: 1.45rem;
  color: var(--teal-900);
  text-decoration: none;
  letter-spacing: -0.03em;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.brand-badge {
  width: 40px; height: 40px;
  flex: none;
  border-radius: 12px;
  background: radial-gradient(circle at 30% 30%, #0f3d3a, #0a0e14 85%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(10, 14, 20, 0.35);
}
.brand-badge img.brand-mark { height: 24px; width: auto; display: block; }
nav.main-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
nav.main-nav a {
  text-decoration: none;
  color: var(--ink-700);
  font-weight: 600;
  font-size: 0.95rem;
  transition: color 0.15s var(--ease);
}
nav.main-nav a:hover { color: var(--teal-700); }
nav.main-nav a.btn-primary,
nav.main-nav a.btn-primary:hover { color: var(--teal-bright); }
nav.main-nav a.doctor-link {
  color: var(--ink-500);
  font-size: 0.85rem;
  font-weight: 500;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--ink-700);
  cursor: pointer;
  padding: 4px 8px;
}

/* Below this width the full nav wrapped onto multiple stacked rows under the logo, pushing
   real content off the first screen — collapse it into a toggleable dropdown instead. */
@media (max-width: 760px) {
  .nav-wrap { position: relative; flex-wrap: nowrap; }
  .nav-toggle { display: block; }
  nav.main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    background: white;
    padding: 20px 24px;
    box-shadow: 0 12px 24px rgba(10, 46, 46, 0.12);
    border-bottom: 1px solid var(--line);
  }
  nav.main-nav.nav-open { display: flex; }
}

.btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
  font-family: inherit;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), background 0.15s var(--ease);
}
.btn-primary {
  background: linear-gradient(135deg, #0f3d3a, #0a0e14);
  color: var(--teal-bright);
  box-shadow: 0 4px 18px rgba(45, 212, 191, 0.3), 0 2px 10px rgba(59, 130, 246, 0.22);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #0a2e2b, #05070a);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(45, 212, 191, 0.4), 0 4px 16px rgba(59, 130, 246, 0.28);
}
/* On the dark hero itself, a dark button would blend into the background — flip to the bright
   cyan-to-blue fill (with dark text) so it still pops, same accent pairing as the logo. */
.hero .btn-primary {
  background: linear-gradient(120deg, var(--teal-bright), var(--blue-500));
  color: #0a0e14;
  box-shadow: 0 4px 18px rgba(45, 212, 191, 0.4);
}
.hero .btn-primary:hover {
  background: linear-gradient(120deg, #22c3ae, #2f6fe0);
  box-shadow: 0 10px 26px rgba(45, 212, 191, 0.5);
}
.btn-secondary {
  background: var(--white);
  color: var(--teal-700);
  border: 1.5px solid var(--teal-600);
}
.btn-secondary:hover { background: #eefaf9; transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn-block { width: 100%; text-align: center; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none !important; }

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 20% 35%, #0f3d3a 0%, #0a0e14 70%);
  color: white;
  padding: clamp(48px, 10vw, 80px) 24px clamp(56px, 10vw, 96px);
}
/* Soft colour-wash blobs behind the hero content, reusing the existing brand accents
   (teal-bright / blue) rather than introducing new colours — same pairing as the header's
   gradient bar and the logo's pulse-mark. Purely decorative, sits behind .hero .container. */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}
.hero::before {
  width: 420px; height: 420px;
  top: -140px; right: -100px;
  background: radial-gradient(circle, rgba(45, 212, 191, 0.35), transparent 70%);
}
.hero::after {
  width: 380px; height: 380px;
  bottom: -160px; left: -80px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.3), transparent 70%);
}
.hero .container { position: relative; z-index: 1; display: flex; gap: 48px; align-items: center; flex-wrap: wrap; }
.hero-text { flex: 1 1 420px; animation: fadeUp 0.6s var(--ease) both; }
.hero-text h1 { font-size: clamp(2.1rem, 6vw, 3rem); font-weight: 800; line-height: 1.15; margin: 0 0 18px; letter-spacing: -0.03em; }
.hero-text p { font-size: clamp(1rem, 2.6vw, 1.15rem); opacity: 0.94; margin-bottom: 28px; max-width: 520px; }
.hero-badges { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.hero-badge {
  background: rgba(45, 212, 191, 0.1);
  border: 1px solid rgba(45, 212, 191, 0.35);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.82rem;
  font-weight: 600;
  backdrop-filter: blur(6px);
}
.hero-card {
  flex: 1 1 320px;
  background: white;
  color: var(--ink-900);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 32px;
  max-width: 380px;
  animation: fadeUp 0.7s 0.1s var(--ease) both;
}
.hero-card h3 { margin-top: 0; font-size: 1.25rem; }
.hero-card-icon {
  width: 52px; height: 52px;
  border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--teal-bright), var(--blue-500));
  box-shadow: 0 6px 16px rgba(45, 212, 191, 0.35);
  margin-bottom: 16px;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

section { padding: 64px 0; }
h2.section-title { font-size: 2.1rem; font-weight: 800; margin-bottom: 10px; text-align: center; letter-spacing: -0.02em; }
/* Small gradient underline on every section heading, echoing the header's top accent bar —
   an easy way to carry the brand's teal->blue pairing through the rest of the page. */
h2.section-title::after {
  content: "";
  display: block;
  width: 64px; height: 4px;
  margin: 14px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--teal-600), var(--blue-500));
}
p.section-sub { text-align: center; color: var(--ink-500); max-width: 560px; margin: 0 auto 40px; font-size: 1.05rem; }
/* Left-aligned category headings (e.g. repeat-prescription.html, homepage About section) use a
   coloured left border instead of the centred underline. Matches h2.section-title's own
   specificity so these overrides actually win regardless of rule order. */
h2.section-title.section-title-left { text-align: left; margin-bottom: 16px; }
h2.section-title.section-title-left::after { display: none; }

/* Homepage "About" section: photo beside the copy. */
.about-layout { display: flex; gap: 44px; align-items: center; flex-wrap: wrap; }
.about-photo {
  flex: 1 1 260px;
  max-width: 320px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 75% 15%;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}
.about-copy { flex: 2 1 380px; }
.about-copy p { font-size: 1.05rem; }

/* Condition-page hero photo (ed.html, asthma.html, etc.) — same treatment as the homepage's
   hero-card, just an image instead of a text box. */
.hero-photo-wrap { flex: 1 1 300px; max-width: 380px; }
.hero-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

/* Cards / grid */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 22px;
}
.card {
  background: white;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  padding: 24px;
  transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
/* Doctor dashboard's Tasks tab — the whole card opens the patient's chart. */
.task-card { cursor: pointer; }
.task-card:hover { background: #f2fbfa; box-shadow: var(--shadow-md); }
/* Older previous-visit cards on the doctor chart — collapsed by default so a long-standing
   patient's history isn't one very long fully-expanded scroll (see chart-review notes). */
.prev-visit summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.prev-visit summary::-webkit-details-marker { display: none; }
.prev-visit summary > span:first-child::before {
  content: "▸";
  color: var(--ink-500);
  margin-right: 8px;
  transition: transform 0.15s var(--ease);
  display: inline-block;
}
.prev-visit[open] summary > span:first-child::before { transform: rotate(90deg); }
.prev-visit .prev-visit-counts { color: var(--ink-500); font-size: 0.82rem; font-weight: 400; }
.prev-visit[open] summary { margin-bottom: 4px; }
/* A thin colour-coded top edge on the trust-signal cards — small touch of variety instead of
   three identical white boxes in a row. */
#trust .card { position: relative; overflow: hidden; }
#trust .card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 5px;
}
#trust .card:nth-child(1)::before { background: linear-gradient(90deg, var(--teal-600), var(--teal-bright)); }
#trust .card:nth-child(2)::before { background: linear-gradient(90deg, var(--blue-600), var(--blue-500)); }
#trust .card:nth-child(3)::before { background: linear-gradient(90deg, var(--green-500), var(--teal-bright)); }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.stat-card { padding: 18px; text-align: center; }
.stat-value { font-size: 1.6rem; font-weight: 800; color: var(--teal-700); }
.stat-label { color: var(--ink-500); font-size: 0.82rem; margin-top: 4px; }

.service-card { cursor: pointer; }
.service-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.service-card h3 { margin: 8px 0 6px; font-size: 1.12rem; }
.service-price { font-weight: 800; color: var(--teal-700); font-size: 1.2rem; margin-bottom: 10px; }

/* Full-tile photo background — only the homepage "Our Services" grid cards get this (they carry
   both .service-card and .service-card-photo). The repeat-prescription category tiles reuse plain
   .service-card without a photo and must stay as ordinary white cards. */
.service-card-photo {
  position: relative;
  overflow: hidden;
  padding: 0;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.service-card-bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Dark gradient over the photo so the white title/price/button stay readable regardless of
   how light or busy the underlying photo is. */
.service-card-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 30, 30, 0.05) 0%, rgba(8, 24, 26, 0.55) 55%, rgba(6, 18, 20, 0.88) 100%);
  z-index: 1;
}
.service-card-body { position: relative; z-index: 2; padding: 20px; }
.service-card-photo h3 { color: #fff; }
.service-card-photo .service-price { color: #fff; margin-bottom: 4px; }
.service-card-body p { color: rgba(255, 255, 255, 0.82) !important; }
.service-card-body .btn-secondary {
  background: rgba(255, 255, 255, 0.95);
  color: var(--teal-700);
  border-color: transparent;
}
.service-card-body .btn-secondary:hover { background: #fff; }

.steps { counter-reset: step; }
.step { display: flex; gap: 18px; margin-bottom: 28px; align-items: flex-start; }
.step-num {
  flex: none;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal-700), var(--teal-500));
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  box-shadow: 0 4px 10px rgba(15, 110, 110, 0.28);
}
/* A different brand colour per step, so the four-step list isn't a single flat colour. */
.step:nth-child(2) .step-num { background: linear-gradient(135deg, var(--blue-600), var(--blue-500)); box-shadow: 0 4px 10px rgba(29, 78, 216, 0.28); }
.step:nth-child(3) .step-num { background: linear-gradient(135deg, var(--green-500), #1c7a4b); box-shadow: 0 4px 10px rgba(46, 158, 107, 0.28); }
.step:nth-child(4) .step-num { background: linear-gradient(135deg, var(--teal-bright), var(--blue-500)); box-shadow: 0 4px 10px rgba(45, 212, 191, 0.3); }

footer.site-footer {
  background: linear-gradient(180deg, var(--teal-900) 0%, #0a0e14 100%);
  color: rgba(255,255,255,0.85);
  padding: 48px 0 28px;
  margin-top: 40px;
  font-size: 0.9rem;
}
footer.site-footer a { color: white; }
footer.site-footer a:hover { color: var(--teal-bright); }
.footer-cols { display: flex; gap: 44px; flex-wrap: wrap; margin-bottom: 28px; }
.footer-cols h4 { color: white; margin-bottom: 12px; font-size: 0.95rem; }
.footer-cols ul { list-style: none; padding: 0; margin: 0; }
.footer-cols li { margin-bottom: 8px; }
.footer-legal { border-top: 1px solid rgba(255,255,255,0.15); padding-top: 18px; font-size: 0.8rem; opacity: 0.75; }

/* Forms */
.form-row { margin-bottom: 18px; }
.form-row label { display: block; font-weight: 700; margin-bottom: 7px; font-size: 0.92rem; }
.form-row input, .form-row select, .form-row textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  font-size: 1rem;
  font-family: inherit;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: none;
  border-color: var(--teal-600);
  box-shadow: 0 0 0 4px rgba(18, 128, 128, 0.12);
}
.form-row textarea { min-height: 90px; resize: vertical; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

.notice {
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: 14px;
  padding: 16px 18px;
  font-size: 0.9rem;
  margin-bottom: 22px;
}
.notice strong { display: block; margin-bottom: 4px; }

/* Allergy reminder on the doctor dashboard's Prescription tab — deliberately louder (red, not
   the amber .notice) than the informational notices on the same tab, since this is the one
   safety-critical thing a doctor needs to see before issuing a script. */
.allergy-banner {
  background: #fbeae8;
  border: 1.5px solid #c0392b;
  border-radius: 14px;
  padding: 14px 18px;
  font-size: 0.92rem;
  margin-bottom: 22px;
  color: #7a251c;
}
.allergy-banner strong { display: block; margin-bottom: 3px; color: #c0392b; text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.03em; }
.allergy-banner .source-label { font-weight: 700; }
.allergy-banner.none { background: var(--bg-soft, #f6f9f9); border-color: var(--line); color: var(--ink-500); }
.allergy-banner.none strong { color: var(--ink-500); }

.wizard-steps { display: flex; gap: 8px; margin-bottom: 32px; flex-wrap: wrap; }
.wizard-steps span {
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--line);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-500);
  transition: all 0.2s var(--ease);
}
.wizard-steps span.active { background: var(--teal-700); color: white; border-color: var(--teal-700); box-shadow: 0 4px 12px rgba(15, 110, 110, 0.3); }

.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; max-height: 360px; overflow-y: auto; padding: 4px; }
/* Below this width, a small internally-scrolling box fights the page's own touch-scroll —
   flicking to move the whole page instead scrolls just this little grid. Let it flow with
   the page on phones instead. */
@media (max-width: 640px) {
  .slot-grid { max-height: none; overflow-y: visible; }
}
.slot-btn {
  padding: 13px 8px;
  min-height: 44px;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  background: white;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  transition: all 0.15s var(--ease);
}
.slot-btn:hover { border-color: var(--teal-600); transform: translateY(-1px); }
.slot-btn.selected { background: var(--teal-700); color: white; border-color: var(--teal-700); box-shadow: 0 4px 12px rgba(15, 110, 110, 0.3); }
.slot-day-label { font-weight: 800; margin: 16px 0 6px; color: var(--teal-900); }

.page-shell { max-width: 720px; margin: 0 auto; padding: 48px 24px 88px; }
.wide-shell { max-width: 980px; margin: 0 auto; padding: 48px 24px 88px; }

.message-thread { border: 1px solid var(--line); border-radius: 14px; padding: 16px; max-height: 260px; overflow-y: auto; background: #fbfefe; margin-bottom: 12px; }
.msg { margin-bottom: 10px; padding: 9px 14px; border-radius: 12px; max-width: 80%; }
.msg.patient { background: #e6f5f2; margin-left: auto; text-align: right; }
.msg.doctor { background: #eef2f7; }
.msg small { display: block; color: var(--ink-500); font-size: 0.72rem; margin-top: 2px; }

.table-scroll { overflow-x: auto; }
table.bookings-table { width: 100%; border-collapse: collapse; }
table.bookings-table th, table.bookings-table td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
table.bookings-table th { font-weight: 700; color: var(--ink-500); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }
table.bookings-table tr:hover { background: #f2fbfa; cursor: pointer; }

.badge { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; }
.badge-green { background: #e2f5ea; color: #1c7a4b; }
.badge-amber { background: #fdf1dc; color: #a9720b; }

/* "Which doctor is online" indicator in the admin Doctors table — a plain grey dot until a
   recent heartbeat (see requireDoctor in routes/doctor.js) makes it green. */
.online-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--ink-500); margin-right: 6px; }
.online-dot.online { background: var(--green-500); box-shadow: 0 0 0 3px rgba(46, 158, 107, 0.18); }

/* Internal admin/doctor chat bubbles — deliberately separate from .msg.patient/.msg.doctor
   (patient-facing messaging) even though the visual treatment is similar, so nothing here reads
   as if a patient were involved. */
.msg.staff-mine { background: #e6f5f2; margin-left: auto; text-align: right; }
.msg.staff-other { background: #fdf1dc; }

.video-room { background: #0e1b1e; min-height: calc(100vh - 0px); display: flex; flex-direction: column; color: white; }
.video-stage { flex: 1; display: flex; gap: 12px; padding: 16px; flex-wrap: wrap; align-items: center; justify-content: center; }
.video-stage video { width: 100%; max-width: 640px; border-radius: 16px; background: #000; }
#localVideo { max-width: 220px; position: fixed; bottom: 90px; right: 24px; border: 2px solid white; border-radius: 12px; z-index: 10; }
/* padding-bottom includes iOS safe-area so buttons never sit under the home-indicator/notch gesture area */
.video-controls { display: flex; justify-content: center; gap: 14px; padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); background: #0a1416; }
.round-btn {
  width: 54px; height: 54px; border-radius: 50%;
  border: none; background: #26383c; color: white; font-size: 1.2rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s var(--ease), background 0.15s var(--ease);
}
.round-btn:hover { transform: translateY(-2px); background: #324a4f; }
.round-btn.end { background: #d3453f; }
.round-btn.end:hover { background: #e85850; }

/* Doctor dashboard: tabs + notifications + schedule */
.tab-bar { display: flex; gap: 6px; border-bottom: 2px solid var(--line); margin-bottom: 26px; flex-wrap: wrap; }

/* Patient chart: opened as its own full page (list + tab-bar hidden behind it, see closeChart()
   in dashboard.js) rather than an inline panel, and given more width than the rest of the
   dashboard so the chart's own side-nav + two-column tabs (Notes, Prescription, Referral) have
   real room — a cramped 980px chart was the main complaint driving this. */
#dashboardBox.chart-open { max-width: 1320px; }
/* Pinned for the whole time a chart is open — patient identity (name, DOB, address) needs to
   stay visible no matter which chart tab (Notes, Prescription, ...) or scroll position the doctor
   is at, not just on Overview. */
.chart-view-header {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 0 12px; margin-bottom: 6px;
  border-bottom: 2px solid var(--line);
  position: sticky; top: 96px; z-index: 15;
  background: var(--bg);
}
.chart-view-header-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.chart-view-header-row h2 { margin: 0; flex: 1; min-width: 220px; }
.chart-patient-meta { margin: 0; padding-left: 2px; color: var(--ink-500); font-size: 0.85rem; font-weight: 600; }
/* The chart's own side-nav is sticky too (see .side-nav) by default, which would land it at the
   same top:96px as the chart header above and fight it over z-index. The header's height varies
   with content (patient meta can wrap), so rather than chase that with a matching pixel offset,
   the side-nav simply scrolls with the page here — only the header needs to stay pinned. */
.chart-view .side-nav { position: static; top: auto; }
.tab-btn {
  padding: 11px 20px; border: none; background: none; cursor: pointer;
  font-weight: 700; font-size: 0.95rem; color: var(--ink-500); font-family: inherit;
  border-bottom: 3px solid transparent; margin-bottom: -2px;
  transition: color 0.15s var(--ease);
}
.tab-btn:hover { color: var(--teal-700); }
.tab-btn.active { color: var(--teal-700); border-bottom-color: var(--blue-600); }

.notif-wrap { position: relative; }
.notif-bell { background: none; border: none; font-size: 1.3rem; cursor: pointer; position: relative; padding: 4px 8px; transition: transform 0.15s var(--ease); }
.notif-bell:hover { transform: scale(1.08); }
.notif-count {
  position: absolute; top: -2px; right: 0; background: var(--gold-600); color: white;
  border-radius: 999px; font-size: 0.65rem; padding: 1px 6px; font-weight: 700;
}
.notif-dropdown {
  position: absolute; right: 0; top: 40px; width: 320px; max-height: 400px; overflow-y: auto;
  background: white; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  z-index: 30; display: none;
}
.notif-dropdown.open { display: block; }
.notif-item { padding: 13px 16px; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 0.88rem; transition: background 0.12s var(--ease); }
.notif-item:hover { background: #f2fbfa; }
.notif-item.unread { background: #eefaf9; font-weight: 700; }
.notif-item small { display: block; color: var(--ink-500); font-weight: 400; margin-top: 3px; }

.schedule-nav { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.schedule-nav h3 { margin: 0; min-width: 220px; text-align: center; font-weight: 800; }

.schedule-grid {
  display: grid;
  grid-template-columns: 70px 1fr;
  grid-auto-rows: 34px;
  max-width: 480px;
  max-height: 640px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow-y: auto;
  overflow-x: hidden;
  background: white;
  box-shadow: var(--shadow-sm);
  position: relative;
}
/* Current-time indicator — only rendered when viewing today, positioned in JS via inline "top".
   Spans both grid columns so it reads as one continuous line across the time labels and the
   bookings column, the way a live clock line does in most calendar apps. */
.schedule-now-line {
  position: absolute;
  left: 0; right: 0;
  grid-column: 1 / -1;
  height: 0;
  border-top: 2px solid #c0392b;
  z-index: 3;
  pointer-events: none;
}
.schedule-now-line::before {
  content: "";
  position: absolute;
  left: 4px; top: -4px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #c0392b;
}
.schedule-now-line::after {
  content: "Now";
  position: absolute;
  left: 16px; top: -8px;
  font-size: 0.65rem;
  font-weight: 700;
  color: #c0392b;
  background: white;
  padding: 0 4px;
}
.slot-time-label {
  grid-column: 1;
  font-size: 0.72rem;
  color: var(--ink-500);
  padding: 4px 8px;
  border-bottom: 1px solid rgba(221, 230, 230, 0.5);
  border-right: 1px solid var(--line);
  display: flex;
  align-items: flex-start;
}
.slot-time-label.hour {
  font-weight: 700;
  color: var(--ink-700);
  border-bottom-color: var(--line);
}
.schedule-row-line {
  grid-column: 2;
  border-bottom: 1px solid rgba(221, 230, 230, 0.5);
}
.schedule-row-line.hour { border-bottom-color: var(--line); }
.schedule-empty {
  grid-column: 2;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  color: var(--ink-500);
  font-size: 0.85rem;
  padding-top: 24px;
}
.schedule-booking {
  grid-column: 2;
  margin: 2px 8px;
  padding: 6px 10px;
  border-radius: 9px;
  color: white;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.schedule-booking.completed { background: linear-gradient(135deg, #2e9e6b, #1c7a4b); }
.schedule-booking:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: var(--shadow-sm); }

/* Sidebar layout used by the patient portal and the doctor chart view */
.side-layout { display: flex; gap: 28px; align-items: flex-start; }
.side-nav { flex: none; width: 220px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 96px; }
.side-nav button {
  text-align: left; padding: 12px 16px; border: none; background: none; cursor: pointer;
  border-radius: 10px; font-weight: 700; font-size: 0.92rem; color: var(--ink-700); font-family: inherit;
  display: flex; justify-content: space-between; align-items: center;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.side-nav button:hover { background: #f2fbfa; }
.side-nav button.active { background: var(--teal-700); color: white; box-shadow: 0 4px 12px rgba(15, 110, 110, 0.28); }
/* Not scoped to .side-nav — also used as the pending-count pill on the dashboard's top-level
   "Tasks" tab button (#taskCount), which isn't inside a .side-nav. */
.side-badge {
  background: var(--gold-600); color: white; border-radius: 999px; font-size: 0.72rem;
  padding: 1px 7px; font-weight: 700; margin-left: 4px;
}
.side-nav button.active .side-badge { background: white; color: var(--gold-600); }
.side-content { flex: 1; min-width: 0; }
@media (max-width: 720px) {
  .side-layout { flex-direction: column; }
  .side-nav { width: 100%; flex-direction: row; flex-wrap: wrap; position: static; }
}

@media print {
  header, footer, .no-print { display: none !important; }
}