/* ============================================================
   Client Portal — visual polish (loads AFTER inline page styles)
   Dark-mode overrides win via cascade — no !important needed
   for surface/bg since the inline block declares them first.
   ============================================================ */

/* ── App shell ── */
#app.on {
  background: var(--color-bg);
  min-height: 100vh;
}

.main {
  max-width: 1140px;
  margin: 0 auto;
  padding: 28px clamp(18px, 4vw, 40px) 52px;
}

.page.active {
  animation: portalFadeIn 0.35s ease;
}

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

/* ── Hero welcome band ── */
.hero-band {
  border-radius: var(--radius-xl);
  padding: clamp(28px, 4vw, 42px) clamp(24px, 4vw, 44px);
  margin-bottom: 28px;
  box-shadow: 0 22px 48px -18px rgba(2, 132, 199, 0.38);
  background: linear-gradient(
    135deg,
    var(--color-brand-navy-dark) 0%,
    var(--color-brand-navy) 42%,
    var(--color-brand-cyan-dark) 100%
  );
}

.hero-band::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 88% 18%, rgba(56, 189, 248, 0.28), transparent 42%),
    radial-gradient(circle at 12% 85%, rgba(139, 92, 246, 0.12), transparent 38%);
  pointer-events: none;
}

.hb-text {
  position: relative;
  z-index: 1;
}

.hb-text h2 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  letter-spacing: -0.02em;
  line-height: 1.35;
}

.hb-text p {
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.78);
  max-width: 440px;
}

.hb-btns {
  gap: 12px;
  margin-top: 18px;
}

.hb-stat {
  border-radius: var(--radius-lg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 22px 30px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.hbs-num {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 2rem;
}

.hbs-lbl {
  font-size: 12px;
  letter-spacing: 0.02em;
}

/* ── Section headers ── */
.sec-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.sec-hdr {
  margin-bottom: 18px;
}

.card-title {
  font-size: 1rem;
  font-weight: 700;
}

/* ── Cards & panels ── */
.card,
.panel,
.booking-wrap,
.booking-wizard {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.card {
  padding: 24px;
}

.card:hover,
.panel:hover {
  box-shadow: var(--shadow-md);
}

/* ── Mini metrics ── */
.mm {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mm:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.mm-lbl {
  font-size: 11px;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

.mm-val {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 2rem;
  color: var(--color-text);
}

.mm-sub {
  margin-top: 6px;
  font-size: 12px;
}

/* ── Session cards ── */
.sess-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  margin-bottom: 12px;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  gap: 16px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.sess-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--color-brand-cyan) 40%, var(--color-border));
}

.sess-date-box {
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-brand-cyan-light) 55%, var(--color-surface));
  border-color: color-mix(in srgb, var(--color-brand-cyan) 18%, var(--color-border));
  min-width: 56px;
  padding: 10px 8px;
}

/* ── Material cards ── */
.mat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.mat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.mat-cover {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* ── Progress ── */
.prog-wrap {
  border-radius: var(--radius-pill);
  height: 10px;
  background: color-mix(in srgb, var(--color-brand-cyan-light) 45%, var(--color-bg));
}

.prog-fill {
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--color-brand-cyan), var(--color-brand-mint));
}

/* ── Buttons ── */
#app .btn {
  border-radius: var(--btn-radius);
  font-weight: 700;
  letter-spacing: 0.02em;
}

#app .btn--sm {
  border-radius: calc(var(--btn-radius) - 2px);
  padding: 9px 16px;
}

/* ── Grids ── */
.g2,
.g3,
.g4 {
  gap: 20px;
}

/* ── Empty states ── */
.empty {
  padding: 48px 24px;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-surface) 80%, var(--color-bg));
  border: 1px dashed var(--color-border);
}

/* ── Auth screen ── */
.auth-card {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
}

.auth-title {
  font-family: var(--font-heading);
  font-weight: 800;
}

.fi {
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--input-radius);
}

.auth-tabs {
  border-radius: var(--radius-md);
  padding: 4px;
}

.auth-tab {
  border-radius: calc(var(--radius-md) - 2px);
}

.auth-tab.active {
  background: var(--color-surface);
}

/* ── Ghost button ── */
.btn--ghost {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1.5px solid var(--color-border);
}

/* ── Homework items ── */
.hw-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

/* ── Session reports ── */
.rpt-hdr {
  background: var(--color-surface);
  color: var(--color-text);
}

.rpt-body {
  background: var(--color-surface);
  color: var(--color-text);
}

/* ── Treatment plan body ── */
.plan-body {
  background: var(--color-surface);
  color: var(--color-text);
}

.plan-card {
  border-color: var(--color-border);
}

/* ── Chat shell ── */
.chat-shell {
  background: var(--color-surface);
  border-color: var(--color-border);
}

.chat-hdr {
  background: var(--color-surface);
  border-bottom-color: var(--color-border);
}

.chat-context {
  background: color-mix(in srgb, var(--color-surface) 70%, var(--color-bg));
  border-bottom-color: var(--color-border);
}

/* ── Booking / doc cards ── */
.doc-card {
  background: var(--color-surface);
  border-color: var(--color-border);
}

.doc-card-name {
  color: var(--color-text);
}

/* ── Modal ── */
.modal-box {
  background: var(--color-surface);
  color: var(--color-text);
}

.modal-body {
  background: var(--color-surface);
  color: var(--color-text);
}

/* ── Navbar container ── */
#nav-target .navbar {
  box-shadow: 0 4px 24px rgba(2, 132, 199, 0.06);
}

/* ── Table defaults ── */
tbody td {
  border-bottom-color: var(--color-border);
}

tbody tr:hover {
  background: color-mix(in srgb, var(--color-brand-cyan-light) 20%, transparent);
}

/* ── Review box row text ── */
.rv-row strong {
  color: var(--color-text);
}

/* ── Goal item dividers ── */
.goal-item {
  border-bottom-color: var(--color-border);
}

/* ── Milestone ── */
.milestone-lbl,
.milestone-val {
  color: var(--color-text);
}

/* ── B-gray badge ── */
.b-gray {
  background: var(--color-brand-navy-light);
  color: var(--color-text-muted);
}

/* ── Search-box focus ── */
.search-box input:focus {
  background: var(--color-surface);
}

/* ═══════════════════════════════════════════════
   DARK MODE — COMPLETE OVERRIDE
   Every component that has a hardcoded light value
   in the inline <style> block gets corrected here.
   ═══════════════════════════════════════════════ */

/* ── Page background ── */
html[data-theme="dark"] #app.on,
html[data-theme="soft-dark"] #app.on {
  background: var(--color-bg);
}

/* ── Body text ── */
html[data-theme="dark"] body,
html[data-theme="soft-dark"] body {
  background: var(--color-bg);
  color: var(--color-text);
}

/* ── Top navigation ── */
html[data-theme="dark"] .topnav,
html[data-theme="soft-dark"] .topnav {
  background: rgba(11, 17, 32, 0.9);
  border-bottom-color: rgba(43, 158, 217, 0.12);
}

/* ── Cards & panels (inline block overrides) ── */
html[data-theme="dark"] .card,
html[data-theme="soft-dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="soft-dark"] .panel {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}

/* ── Mini metrics ── */
html[data-theme="dark"] .mm,
html[data-theme="soft-dark"] .mm {
  background: var(--color-surface);
  border-color: var(--color-border);
}

/* ── Session cards ── */
html[data-theme="dark"] .sess-card,
html[data-theme="soft-dark"] .sess-card {
  background: var(--color-surface);
  border-color: var(--color-border);
}

html[data-theme="dark"] .sess-date-box,
html[data-theme="soft-dark"] .sess-date-box {
  background: color-mix(in srgb, var(--color-brand-cyan-light) 55%, var(--color-surface));
  border-color: var(--color-border);
}

/* ── Material cards ── */
html[data-theme="dark"] .mat-card,
html[data-theme="soft-dark"] .mat-card {
  background: var(--color-surface);
  border-color: var(--color-border);
}

/* ── Auth card ── */
html[data-theme="dark"] .auth-card,
html[data-theme="soft-dark"] .auth-card {
  background: var(--color-surface);
  border-color: var(--color-border);
}

/* ── Auth tab active ── */
html[data-theme="dark"] .auth-tab.active,
html[data-theme="soft-dark"] .auth-tab.active {
  background: color-mix(in srgb, var(--color-surface) 80%, var(--color-brand-cyan));
  color: var(--color-text);
}

/* ── Auth tabs container ── */
html[data-theme="dark"] .auth-tabs,
html[data-theme="soft-dark"] .auth-tabs {
  background: color-mix(in srgb, var(--color-bg) 80%, var(--color-surface));
}

/* ── Form inputs ── */
html[data-theme="dark"] .fi,
html[data-theme="soft-dark"] .fi {
  background: color-mix(in srgb, var(--color-surface) 60%, var(--color-bg));
  border-color: var(--color-border);
  color: var(--color-text);
}

html[data-theme="dark"] .fi::placeholder,
html[data-theme="soft-dark"] .fi::placeholder {
  color: var(--color-text-muted);
  opacity: 0.55;
}

html[data-theme="dark"] .fi:focus,
html[data-theme="soft-dark"] .fi:focus {
  border-color: var(--color-brand-cyan);
  background: var(--color-surface);
}

/* ── Ghost button ── */
html[data-theme="dark"] .btn--ghost,
html[data-theme="soft-dark"] .btn--ghost {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}

html[data-theme="dark"] .btn--ghost:hover,
html[data-theme="soft-dark"] .btn--ghost:hover {
  border-color: var(--color-brand-cyan);
  color: var(--color-brand-cyan);
}

/* ── White button (hero band / CTAs) ── */
html[data-theme="dark"] .btn--white,
html[data-theme="soft-dark"] .btn--white {
  background: color-mix(in srgb, var(--color-surface) 85%, var(--color-brand-cyan));
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

html[data-theme="dark"] .btn--white:hover,
html[data-theme="soft-dark"] .btn--white:hover {
  background: var(--color-surface);
  color: var(--color-brand-cyan);
  border-color: var(--color-brand-cyan);
}

/* ── Vault action button ── */
html[data-theme="dark"] .vc-btn,
html[data-theme="soft-dark"] .vc-btn {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

html[data-theme="dark"] .vc-btn:hover,
html[data-theme="soft-dark"] .vc-btn:hover {
  background: color-mix(in srgb, var(--color-brand-cyan-light) 40%, var(--color-surface));
  color: var(--color-brand-cyan);
  border-color: var(--color-brand-cyan);
}

/* ── Homework items ── */
html[data-theme="dark"] .hw-item,
html[data-theme="soft-dark"] .hw-item {
  background: var(--color-surface);
  border-color: var(--color-border);
}

html[data-theme="dark"] .hw-item:hover,
html[data-theme="soft-dark"] .hw-item:hover {
  border-color: var(--color-brand-cyan);
}

/* ── Session reports ── */
html[data-theme="dark"] .rpt-hdr,
html[data-theme="soft-dark"] .rpt-hdr {
  background: var(--color-surface);
  color: var(--color-text);
}

html[data-theme="dark"] .rpt-hdr:hover,
html[data-theme="soft-dark"] .rpt-hdr:hover {
  background: color-mix(in srgb, var(--color-brand-navy-light) 40%, var(--color-surface));
}

html[data-theme="dark"] .rpt-body,
html[data-theme="soft-dark"] .rpt-body {
  background: var(--color-surface);
  border-top-color: var(--color-border);
  color: var(--color-text);
}

html[data-theme="dark"] .rpt-card,
html[data-theme="soft-dark"] .rpt-card {
  border-color: var(--color-border);
}

/* ── Treatment plan ── */
html[data-theme="dark"] .plan-body,
html[data-theme="soft-dark"] .plan-body {
  background: var(--color-surface);
  color: var(--color-text);
}

html[data-theme="dark"] .plan-card,
html[data-theme="soft-dark"] .plan-card {
  border-color: color-mix(in srgb, var(--color-brand-cyan) 25%, var(--color-border));
}

html[data-theme="dark"] .goal-item,
html[data-theme="soft-dark"] .goal-item {
  border-bottom-color: var(--color-border);
  color: var(--color-text);
}

html[data-theme="dark"] .milestone-box,
html[data-theme="soft-dark"] .milestone-box {
  background: color-mix(in srgb, var(--color-brand-navy-light) 60%, var(--color-surface));
}

html[data-theme="dark"] .milestone-lbl,
html[data-theme="soft-dark"] .milestone-lbl,
html[data-theme="dark"] .milestone-val,
html[data-theme="soft-dark"] .milestone-val {
  color: var(--color-text);
}

/* ── Chat shell ── */
html[data-theme="dark"] .chat-shell,
html[data-theme="soft-dark"] .chat-shell {
  background: var(--color-surface);
  border-color: var(--color-border);
}

html[data-theme="dark"] .chat-hdr,
html[data-theme="soft-dark"] .chat-hdr {
  background: linear-gradient(
    180deg,
    var(--color-surface),
    color-mix(in srgb, var(--color-surface) 70%, var(--color-bg))
  );
  border-bottom-color: var(--color-border);
}

html[data-theme="dark"] .chat-hdr-title,
html[data-theme="soft-dark"] .chat-hdr-title {
  color: var(--color-text);
}

html[data-theme="dark"] .chat-context,
html[data-theme="soft-dark"] .chat-context {
  background: color-mix(in srgb, var(--color-surface) 60%, var(--color-bg));
  border-bottom-color: var(--color-border);
}

html[data-theme="dark"] .chat-context-title,
html[data-theme="soft-dark"] .chat-context-title {
  color: var(--color-text);
}

/* Online indicator dot border — matches dark surface */
html[data-theme="dark"] .chat-online,
html[data-theme="soft-dark"] .chat-online {
  border-color: var(--color-surface);
}

/* ── Booking wizard & doctor cards ── */
html[data-theme="dark"] .booking-wrap,
html[data-theme="soft-dark"] .booking-wrap,
html[data-theme="dark"] .booking-wizard,
html[data-theme="soft-dark"] .booking-wizard {
  background: var(--color-surface);
  border-color: var(--color-border);
}

html[data-theme="dark"] .doc-card,
html[data-theme="soft-dark"] .doc-card {
  background: var(--color-surface);
  border-color: var(--color-border);
}

html[data-theme="dark"] .doc-card:hover,
html[data-theme="soft-dark"] .doc-card:hover {
  border-color: var(--color-brand-cyan);
}

html[data-theme="dark"] .doc-card-name,
html[data-theme="soft-dark"] .doc-card-name {
  color: var(--color-text);
}

html[data-theme="dark"] .rv-row strong,
html[data-theme="soft-dark"] .rv-row strong {
  color: var(--color-text);
}

/* Search box focus background */
html[data-theme="dark"] .search-box input:focus,
html[data-theme="soft-dark"] .search-box input:focus {
  background: var(--color-surface);
}

/* ── Modal ── */
html[data-theme="dark"] .modal-box,
html[data-theme="soft-dark"] .modal-box {
  background: var(--color-surface);
  color: var(--color-text);
}

html[data-theme="dark"] .modal-body,
html[data-theme="soft-dark"] .modal-body {
  background: var(--color-surface);
  color: var(--color-text);
}

/* ── Tables ── */
html[data-theme="dark"] tbody td,
html[data-theme="soft-dark"] tbody td {
  border-bottom-color: var(--color-border);
  color: var(--color-text);
}

html[data-theme="dark"] tbody tr:hover,
html[data-theme="soft-dark"] tbody tr:hover {
  background: color-mix(in srgb, var(--color-brand-navy-light) 30%, transparent);
}

html[data-theme="dark"] thead th,
html[data-theme="soft-dark"] thead th {
  background: color-mix(in srgb, var(--color-bg) 80%, var(--color-surface));
  border-bottom-color: var(--color-border);
  color: var(--color-text-muted);
}

/* ── Badge-dot border on nav links ── */
html[data-theme="dark"] .tnav-link .badge-dot,
html[data-theme="soft-dark"] .tnav-link .badge-dot {
  border-color: var(--color-surface);
}

/* ── Gray badge ── */
html[data-theme="dark"] .b-gray,
html[data-theme="soft-dark"] .b-gray {
  background: color-mix(in srgb, var(--color-brand-navy-light) 50%, var(--color-surface));
  color: var(--color-text-muted);
}

/* ── Empty state ── */
html[data-theme="dark"] .empty,
html[data-theme="soft-dark"] .empty {
  background: color-mix(in srgb, var(--color-surface) 70%, var(--color-bg));
  border-color: var(--color-border);
}

/* ── User pill ── */
html[data-theme="dark"] .user-pill,
html[data-theme="soft-dark"] .user-pill {
  background: var(--color-surface);
}

/* ── Topnav scrolled ── */
html[data-theme="dark"] .topnav.scrolled,
html[data-theme="soft-dark"] .topnav.scrolled {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* ─── Responsive ─── */
@media (max-width: 900px) {
  .hero-band {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .hb-stat {
    align-self: stretch;
    text-align: center;
  }

  .g4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .main {
    padding: 20px 16px 40px;
  }

  .g2,
  .g3,
  .g4 {
    grid-template-columns: 1fr;
  }
}