/* Dark + amber is the default palette — the only things a user's saved
   preference ever overrides are: --theme mode (this block vs the
   [data-theme="light"] block below), --accent/--accent-2/--accent-text (set
   inline on the root by theme.js, so they win over both blocks here), and
   data-pattern (see the pattern layer further down). Shared design system
   with House of Valam's other apps (Browner). */
:root {
  --font-heading: "Cormorant Garamond", Georgia, serif;
  --font-body: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --bg: #16130f;
  --surface: #211c16;
  --surface-alt: #2a2319;
  --border: rgba(255, 235, 205, 0.08);
  --text: #f5efe3;
  --text-muted: #a89a85;
  --pattern-color: rgba(255, 235, 205, 0.05);
  --accent: #ffc93c;
  --accent-2: #ff8a3c;
  --accent-text: #16160f;
  --accent-strong: #ffc93c;
  --success: #34c759;
  --success-bg: rgba(52, 199, 89, 0.15);
  --danger: #ff453a;
  --danger-bg: rgba(255, 69, 58, 0.15);
  --warning: #ffc93c;
  --warning-bg: rgba(255, 201, 60, 0.15);
  --neutral-bg: rgba(255, 235, 205, 0.08);
  --whatsapp: #25d366;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 9px;
  --shadow-sm: 0 2px 6px rgba(20, 10, 0, 0.32);
  --shadow-md: 0 6px 18px rgba(20, 10, 0, 0.42);
  --shadow-lg: 0 14px 34px rgba(20, 10, 0, 0.48);
  --bevel-top: inset 0 1px 0 rgba(255, 245, 225, 0.07);
  --bevel-bottom: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
  /* Pressed-in depth for text inputs / selects / date triggers: a dark
     crease along the top inside edge (as if light can't reach into the
     recess) plus a faint light rim along the bottom (light catching the
     lower lip) — the sunken counterpart to --bevel-top's raised look. Also
     carries its own outer shadow (--shadow-md) so a field reads as a
     pronounced 3D object - raised out of the page via that outer shadow,
     recessed into itself via the inset pair - not just a flat bordered box. */
  --field-shadow: var(--shadow-md), inset 0 2px 4px rgba(0, 0, 0, 0.45), inset 0 -1px 0 rgba(255, 255, 255, 0.08);
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #f7f2e9;
  --surface: #fffcf6;
  --surface-alt: #f1e9d9;
  --border: rgba(70, 50, 20, 0.1);
  --text: #211a10;
  --text-muted: #766a56;
  --accent-strong: #a37918;
  --pattern-color: rgba(70, 50, 20, 0.05);
  --success-bg: rgba(52, 199, 89, 0.12);
  --danger-bg: rgba(255, 69, 58, 0.12);
  --warning-bg: rgba(255, 201, 60, 0.2);
  --neutral-bg: rgba(70, 50, 20, 0.05);
  --shadow-sm: 0 2px 6px rgba(35, 25, 10, 0.07);
  --shadow-md: 0 8px 20px rgba(35, 25, 10, 0.09);
  --shadow-lg: 0 16px 36px rgba(35, 25, 10, 0.12);
  --bevel-top: inset 0 1px 0 rgba(255, 250, 240, 0.7);
  --bevel-bottom: inset 0 -1px 0 rgba(35, 25, 10, 0.04);
  --field-shadow: var(--shadow-md), inset 0 2px 4px rgba(35, 25, 10, 0.18), inset 0 -1px 0 rgba(255, 255, 255, 0.85);
  color-scheme: light;
}

* {
  box-sizing: border-box;
  /* Every tappable element already has its own :active feedback (scale,
     shadow, background shift) — the browser's default blue tap-highlight
     flash on top of that just looks like a rendering glitch. */
  -webkit-tap-highlight-color: transparent;
}

[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

body {
  padding-bottom: calc(64px + env(safe-area-inset-bottom));
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--bg);
}

html[data-pattern="dots"] body::before {
  background-image: radial-gradient(var(--pattern-color) 1.5px, transparent 1.5px);
  background-size: 20px 20px;
}

html[data-pattern="grid"] body::before {
  background-image:
    linear-gradient(var(--pattern-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--pattern-color) 1px, transparent 1px);
  background-size: 24px 24px;
}

html[data-pattern="diagonal"] body::before {
  background-image: repeating-linear-gradient(
    45deg,
    var(--pattern-color) 0,
    var(--pattern-color) 1px,
    transparent 1px,
    transparent 14px
  );
}

html[data-pattern="glow"] body::before {
  background-image:
    radial-gradient(circle at 12% 6%, color-mix(in srgb, var(--accent) 24%, transparent) 0%, transparent 42%),
    radial-gradient(circle at 90% 14%, color-mix(in srgb, var(--accent-2) 18%, transparent) 0%, transparent 40%),
    radial-gradient(circle at 85% 95%, color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 45%);
}

a {
  color: var(--accent-strong);
  text-decoration: none;
}

h1, h2, h3, h4 {
  margin: 0 0 4px;
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 8px;
  color: var(--text-muted);
}

/* ── Layout shell ─────────────────────────────────────────────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px calc(14px + env(safe-area-inset-top)) 16px;
  padding-top: max(14px, env(safe-area-inset-top));
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 18px;
  color: var(--text);
}

.topbar-brand .dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: var(--shadow-sm), var(--bevel-top);
  flex-shrink: 0;
}

.topbar-back {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  font-weight: 600;
  background: none;
  border: none;
  font-size: 15px;
  padding: 6px 4px;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.appearance-popover {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 60px);
  right: 16px;
  left: 16px;
  max-width: 380px;
  margin-left: auto;
  z-index: 60;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), var(--bevel-top);
  animation: cs-pop 140ms ease;
}

.appearance-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px 0;
}

.appearance-popover-header h3 {
  font-size: 16px;
}

.appearance-popover-scroll {
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  box-shadow: var(--shadow-sm), var(--bevel-top);
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.icon-btn:active {
  transform: translateY(1px) scale(0.96);
  box-shadow: var(--bevel-bottom);
}

.icon-btn:disabled {
  background: none;
  border-color: transparent;
  box-shadow: none;
  color: var(--text-muted);
  opacity: 0.5;
  cursor: default;
}

/* A smaller variant for inline row actions (edit/delete on an expense row,
   etc.) where the default 38px circle would dominate a compact list-row. */
.icon-btn-sm {
  width: 28px;
  height: 28px;
}

.icon-btn-sm svg {
  width: 14px;
  height: 14px;
}

/* A deeper, more deliberate red than --danger's alert-banner brightness —
   sits better as a permanent icon color instead of a flash of warning. */
.icon-btn-danger {
  color: color-mix(in srgb, var(--danger) 65%, black);
}

main#content {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px;
  padding-bottom: 32px;
  min-height: calc(100vh - 60px);
}

.page-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Bottom tab nav ───────────────────────────────────────────────────── */

.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  gap: 8px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom)) 8px;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.15);
}

.tabbar a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 7px 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  /* A soft highlight near the top layered over the flat surface color —
     the "glossy bubble" convex look, on top of the usual bevel/shadow. */
  background: radial-gradient(ellipse 90% 70% at 50% 0%, rgba(255, 255, 255, 0.14), transparent 65%), var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-sm), var(--bevel-top);
  transition: color 120ms ease, transform 120ms ease, box-shadow 120ms ease, background 120ms ease, border-color 120ms ease;
}

.tabbar a svg {
  width: 22px;
  height: 22px;
  transition: transform 150ms ease;
}

/* Hover only (a touchscreen tap goes straight to :active below, never gets
   stuck "hovering" after the finger lifts). */
@media (hover: hover) {
  .tabbar a:hover {
    color: var(--text);
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--accent-strong) 30%, var(--border));
    box-shadow: var(--shadow-md), var(--bevel-top), 0 0 14px color-mix(in srgb, var(--accent-strong) 22%, transparent);
  }

  .tabbar a.active:hover {
    transform: translateY(-2px);
  }
}

.tabbar a.active {
  color: var(--accent-strong);
  background: radial-gradient(ellipse 90% 70% at 50% 0%, rgba(255, 255, 255, 0.18), transparent 65%), color-mix(in srgb, var(--accent-strong) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--accent-strong) 35%, var(--border));
  animation: tab-glow-pulse 2.4s ease-in-out infinite;
}

.tabbar a.active svg {
  transform: translateY(-1px);
}

@keyframes tab-glow-pulse {
  0%, 100% { box-shadow: var(--shadow-md), var(--bevel-top), 0 0 8px color-mix(in srgb, var(--accent-strong) 22%, transparent); }
  50% { box-shadow: var(--shadow-md), var(--bevel-top), 0 0 16px color-mix(in srgb, var(--accent-strong) 38%, transparent); }
}

.tabbar a:active {
  transform: translateY(1px) scale(0.94);
  box-shadow: var(--bevel-bottom), 0 0 16px color-mix(in srgb, var(--accent-strong) 32%, transparent);
}

/* Profile stays reachable but deliberately low-key next to the primary
   Dashboard/Appointments/Patients tabs — smaller text/icon and no glow
   pulse when active — while still keeping the same 3D bevel/border/shadow
   as every other tab at rest, and the same width so the bar reads evenly. */
.tabbar a.tabbar-low-key {
  flex: 1;
  padding: 5px 0;
  font-size: 10px;
}

.tabbar a.tabbar-low-key svg {
  width: 16px;
  height: 16px;
}

.tabbar a.tabbar-low-key.active {
  animation: none;
  background: radial-gradient(ellipse 90% 70% at 50% 0%, rgba(255, 255, 255, 0.18), transparent 65%), color-mix(in srgb, var(--accent-strong) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--accent-strong) 35%, var(--border));
  box-shadow: var(--shadow-sm), var(--bevel-top);
}

/* ── Cards / lists ────────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-sm), var(--bevel-top);
}

.list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  cursor: pointer;
  box-shadow: var(--shadow-sm), var(--bevel-top);
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease, border-color 120ms ease;
  /* Some .list-row instances are real <button> elements (e.g. the "Add a
     patient" chooser) — buttons don't inherit font-family from the page by
     default, so without this they'd silently fall back to the browser's own
     UI font instead of the user's chosen palette font. */
  font-family: inherit;
  text-align: left;
}

/* Every record row in the app (patients, admins, centers, appointments,
   expenses, ...) is a .list-row, so this one rule is the "3D bevel + hover
   highlight" treatment everywhere at once — same idea as the tabbar's own
   hover glow. Hover-gated so a touchscreen tap doesn't get stuck "hovering"
   after the finger lifts. */
@media (hover: hover) {
  .list-row:hover {
    transform: translateY(-2px);
    background: color-mix(in srgb, var(--accent-strong) 7%, var(--surface));
    border-color: color-mix(in srgb, var(--accent-strong) 28%, var(--border));
    box-shadow: var(--shadow-md), var(--bevel-top), 0 0 14px color-mix(in srgb, var(--accent-strong) 16%, transparent);
  }
}

.list-row:active {
  background: var(--surface-alt);
  transform: translateY(0) scale(0.995);
  box-shadow: var(--bevel-bottom);
}

.list-row .avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, var(--neutral-bg)), color-mix(in srgb, var(--accent-2) 22%, var(--neutral-bg)));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--accent-strong);
  flex-shrink: 0;
  box-shadow: var(--bevel-top);
}

.list-row .body {
  flex: 1;
  min-width: 0;
}

.list-row .title {
  color: var(--text);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-row .subtitle {
  color: var(--text-muted);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-row .trailing {
  text-align: right;
  flex-shrink: 0;
  font-size: 13px;
  color: var(--text-muted);
}

/* A .list-row that needs real <a>/<button> action elements alongside its
   nav target (e.g. patients.js's recordRow, Call/WhatsApp buttons) can't
   itself be an <a> — nesting anchors is invalid HTML — so the nav link
   wraps just the avatar+name portion instead, sized/laid out exactly like
   the plain-<a>.list-row case did. */
.patient-row-link {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  border-radius: var(--radius-md);
  padding: 12px 18px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}

.btn-primary {
  background: color-mix(in srgb, var(--accent-strong) 10%, var(--surface-alt));
  color: var(--accent-strong);
  border: 1.5px solid var(--accent-strong);
  width: 100%;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent-strong) 25%, transparent),
    0 0 16px color-mix(in srgb, var(--accent-strong) 30%, transparent),
    var(--bevel-top);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.btn-primary:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--accent-strong) 18%, var(--surface-alt));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent-strong) 35%, transparent),
    0 0 22px color-mix(in srgb, var(--accent-strong) 45%, transparent),
    var(--bevel-top);
}

.btn-primary:active {
  transform: translateY(1px) scale(0.99);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent-strong) 30%, transparent),
    0 0 10px color-mix(in srgb, var(--accent-strong) 30%, transparent),
    var(--bevel-bottom);
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.btn-secondary {
  background: var(--surface-alt);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm), 0 0 8px color-mix(in srgb, var(--accent-strong) 10%, transparent);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.btn-secondary:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent-strong) 45%, var(--border));
  box-shadow: var(--shadow-md), 0 0 16px color-mix(in srgb, var(--accent-strong) 22%, transparent);
}

.btn-secondary:active {
  transform: translateY(1px) scale(0.99);
  box-shadow: var(--bevel-bottom);
}

.btn-danger {
  background: var(--danger-bg);
  color: var(--danger);
}

.btn-danger:active {
  transform: translateY(1px) scale(0.99);
}

/* Branded to match the WhatsApp icon buttons elsewhere (.wa-fab) — icon +
   label, centered like every other .btn (now that it's always full-width,
   centering the icon+label pair together reads better than pinning them
   to the left edge with empty space trailing off to the right). */
.btn-whatsapp {
  background: linear-gradient(145deg, #2fe674, #1da851);
  color: #fff;
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.28),
    inset 0 1px 1px rgba(255, 255, 255, 0.35),
    inset 0 -2px 3px rgba(0, 60, 20, 0.35);
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.btn-whatsapp:hover {
  transform: translateY(-1px);
}

.btn-whatsapp:active {
  transform: translateY(1px) scale(0.99);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.28),
    inset 0 1px 1px rgba(255, 255, 255, 0.25),
    inset 0 -1px 2px rgba(0, 60, 20, 0.35);
}

.btn-sm {
  padding: 8px 12px;
  font-size: 13px;
  border-radius: var(--radius-sm);
}

.btn-block {
  width: 100%;
}

.btn-row {
  display: flex;
  gap: 8px;
}

.btn-row .btn {
  flex: 1;
}

.link-btn {
  background: none;
  border: none;
  color: var(--accent-strong);
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
  font-size: 14px;
  font-family: inherit;
}

/* ── Forms ────────────────────────────────────────────────────────────── */

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.field-row {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.field-row .field {
  flex: 1;
  margin-bottom: 0;
}

input, select, textarea {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  width: 100%;
  box-shadow: var(--field-shadow);
  transition: outline-color 120ms ease, border-color 120ms ease;
}

/* Plain number fields (consultation fee, payment amount) — typing a value
   is all that's needed; the native up/down spinner just adds visual noise
   next to a currency amount. */
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  box-shadow: var(--field-shadow), 0 0 0 4px color-mix(in srgb, var(--accent) 35%, transparent);
}

/* Voice dictation button, injected by voice-input.js next to a text input
   where the browser supports SpeechRecognition. */
.input-with-action {
  position: relative;
}

.input-with-action input {
  padding-right: 44px;
}

.mic-btn {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  font-size: 15px;
  line-height: 1;
  transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}

.mic-btn:active {
  transform: translateY(-50%) scale(0.94);
}

.mic-btn.listening {
  color: #fff;
  background: var(--danger);
  border-color: transparent;
  animation: mic-pulse 1.2s ease-in-out infinite;
}

@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--danger-bg); }
  50% { box-shadow: 0 0 0 6px transparent; }
}

/* Native <select> popups are OS-rendered and normally immune to CSS (sharp
   corners, flat, OS-blue option highlight). This opts supporting browsers
   (Chrome/Edge) into full CSS control of the popup; unsupported browsers
   just keep the ordinary native dropdown — no breakage either way. */
@supports (appearance: base-select) {
  select { appearance: base-select; }
  ::picker(select) {
    appearance: base-select;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
    padding: 4px;
  }
  select option {
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    color: var(--text);
  }
  select option:hover,
  select option:focus,
  select option:checked {
    background: var(--accent);
    color: var(--accent-text);
  }
}

textarea {
  resize: vertical;
  min-height: 72px;
}

.form-section {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: var(--bevel-top);
}

/* Fields normally sit one tone lighter than whatever contains them (card
   -> surface-alt input), which is how they read as recessed. Nested inside
   a .form-section, that container is ITSELF surface-alt, so an ordinary
   field would match its background exactly and disappear into it — drop
   one more tone, to --bg, so it still reads as a distinct, sunken field. */
.form-section input,
.form-section select,
.form-section textarea,
.form-section .cs-trigger,
.form-section .df-trigger {
  background: var(--bg);
}

.form-section .field:last-child,
.form-section .field-row:last-child {
  margin-bottom: 0;
}

.form-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-strong);
}

.form-section-title::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 60%, transparent);
}

.hint {
  font-size: 12px;
  color: var(--text-muted);
}

.error-text {
  font-size: 13px;
  color: var(--danger);
  margin-top: -6px;
  margin-bottom: 10px;
}

.stacked {
  display: flex;
  flex-direction: column;
}

/* ── Badges / pills ───────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.badge-positive { background: var(--success-bg); color: var(--success); }
.badge-negative { background: var(--danger-bg); color: var(--danger); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-neutral { background: var(--neutral-bg); color: var(--text-muted); }

/* ── Stats / dashboard tiles ──────────────────────────────────────────── */

.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.stat-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
  box-shadow: var(--shadow-sm), var(--bevel-top);
  position: relative;
  overflow: hidden;
}

.stat-tile::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  opacity: 0.8;
}

.stat-tile .value {
  font-size: 22px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stat-tile .label {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}

.section-title h3 {
  font-size: 15px;
}

/* ── Key/value rows (clinical details, etc.) ─────────────────────────── */

.kv-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
}

.kv-row:first-child {
  border-top: none;
  padding-top: 0;
}

.kv-row .k {
  color: var(--text-muted);
}

/* A .kv-row holding two short fields side by side (e.g. Age + Gender)
   instead of the usual one — each .kv-pair repeats the plain .kv-row's own
   k/v layout at half width, so short-answer fields don't each burn a full
   row while longer free-text ones (Allergies, History) still get their own. */
.kv-row-pair {
  gap: 16px;
}

.kv-row-pair .kv-pair {
  flex: 1;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.kv-row .v {
  color: var(--text);
  font-weight: 600;
  text-align: right;
}

/* ── Geography report bars (doctor dashboard) ────────────────────────── */

.geo-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.geo-bar-label {
  width: 108px;
  flex-shrink: 0;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.geo-bar-track {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: var(--neutral-bg);
  overflow: hidden;
}

.geo-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

.geo-bar-count {
  width: 24px;
  text-align: right;
  font-weight: 700;
  flex-shrink: 0;
}

/* Money amounts ("₹12,000.00") don't fit the 24px count column sized for
   small geography counts — give them their own width, and pull the bar in
   so the label and amount sit closer together instead of stretching edge
   to edge. */
.geo-bar-row-money .geo-bar-track {
  flex: 0 1 100px;
}

.geo-bar-count-money {
  width: auto;
  min-width: 76px;
}

.geo-bar-list-scroll {
  max-height: 240px;
  overflow-y: auto;
  padding-right: 4px;
}

/* Bounds the logged-expenses list to roughly 5 rows before it scrolls,
   instead of growing the card open-ended as more get logged. */
.expense-list-scroll {
  max-height: 340px;
  overflow-y: auto;
  padding-right: 4px;
}

/* ── Revenue comparison chart (dashboard) ────────────────────────────── */

.chart-mode-toggle {
  display: inline-flex;
  gap: 6px;
  margin: 10px 0;
}

.chart-mode-btn {
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease;
}

.chart-mode-btn.active {
  border-color: var(--accent-strong);
  color: var(--accent-strong);
  box-shadow: 0 0 0 1px var(--accent-strong) inset;
}

.chart-legend {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.chart-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.chart-legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
}

.chart-legend-swatch.prev {
  background: var(--text-muted);
  opacity: 0.6;
}

.chart-legend-swatch.curr {
  background: var(--accent);
}

.comparison-chart {
  width: 100%;
  height: auto;
  display: block;
}

.chart-grid {
  stroke: var(--border);
  stroke-width: 1;
}

.chart-ytick,
.chart-xtick {
  fill: var(--text-muted);
  font-size: 18px;
}

.chart-bar-prev {
  fill: var(--text-muted);
  opacity: 0.5;
}

.chart-bar-curr {
  fill: var(--accent);
}

.chart-line {
  fill: none;
  stroke-width: 2;
}

.chart-line-prev {
  stroke: var(--text-muted);
  opacity: 0.6;
}

.chart-line-curr {
  stroke: var(--accent);
}

.chart-dot-prev {
  fill: var(--text-muted);
  opacity: 0.6;
}

.chart-dot-curr {
  fill: var(--accent);
}

.revenue-breakup {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

/* ── Appointment cards ────────────────────────────────────────────────── */

.appointment-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
}

.appointment-who {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

/* Date/time, status badge, and mode all share one row — smaller and
   alongside the time instead of each stacked as its own line. */
.appointment-when-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 8px;
}

.appointment-when {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
}

/* ── Visits & prescriptions (patient detail) ─────────────────────────────
   A "visit" is a past, accepted appointment; each one gets its own block,
   with whatever prescription was written for it nested inside (.rx-inline)
   — a subtler, borderless variant of .card so it reads as content *within*
   the visit rather than another card stacked on top of it. */

.visit-block {
  padding: 10px 0;
  border-top: 1px solid var(--border);
}

.visit-block:first-child {
  padding-top: 0;
  border-top: none;
}

.rx-inline {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--surface-alt);
}

/* ── Dose / timing chips (prescriptions) ──────────────────────────────── */

.med-summary {
  padding: 8px 0;
  border-top: 1px solid var(--border);
}

.med-summary:first-of-type {
  border-top: none;
  padding-top: 0;
}

.med-summary-name {
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.med-summary-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.timing-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: var(--neutral-bg);
  color: var(--text-muted);
}

.timing-chip.morning { background: var(--warning-bg); color: var(--warning); }
.timing-chip.afternoon { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent-strong); }
.timing-chip.night { background: color-mix(in srgb, var(--accent-2) 20%, transparent); color: var(--accent-strong); }
.timing-chip.food { background: var(--success-bg); color: var(--success); }

/* Mutually-exclusive button groups for medication timing / food relation
   (PRD section 8/11) — a chip-row where exactly one chip is ever "active". */
.choice-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.choice-chip {
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: transform 120ms ease, background 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.choice-chip:active {
  transform: scale(0.96);
}

.choice-chip.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-text);
  border-color: transparent;
  box-shadow: var(--shadow-sm);
}

.medication-row {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm), var(--bevel-top);
}

.medication-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.med-subfield {
  margin-bottom: 10px;
}

.med-subfield:last-child {
  margin-bottom: 0;
}

.med-subfield label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.remove-med-btn {
  color: var(--danger);
  flex-shrink: 0;
}

/* ── WhatsApp button (PRD section 9): circular, 3D-beveled, available to
   either party wherever contextually relevant ─────────────────────────── */

.wa-fab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #2fe674, #1da851);
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.28),
    inset 0 1px 1px rgba(255, 255, 255, 0.35),
    inset 0 -2px 3px rgba(0, 60, 20, 0.35);
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.wa-fab:hover {
  transform: translateY(-1px);
}

.wa-fab:active {
  transform: translateY(1px) scale(0.94);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.28),
    inset 0 1px 1px rgba(255, 255, 255, 0.25),
    inset 0 -1px 2px rgba(0, 60, 20, 0.35);
}

.wa-fab-sm {
  width: 32px;
  height: 32px;
}

.wa-fab-sm svg {
  width: 16px;
  height: 16px;
}

/* ── Call button — same circular 3D-beveled shape as WhatsApp/Pay, in its
   own blue so all three read as a distinct, matched trio (green/blue/gold)
   instead of Call and Pay sharing one color ─────────────────────────────── */

.call-fab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #4fb1ff, #2d7fd6);
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.28),
    inset 0 1px 1px rgba(255, 255, 255, 0.35),
    inset 0 -2px 3px rgba(0, 30, 70, 0.35);
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.call-fab:hover {
  transform: translateY(-1px);
}

.call-fab:active {
  transform: translateY(1px) scale(0.94);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.28),
    inset 0 1px 1px rgba(255, 255, 255, 0.25),
    inset 0 -1px 2px rgba(0, 30, 70, 0.35);
}

.call-fab-sm {
  width: 32px;
  height: 32px;
}

.call-fab-sm svg {
  width: 14px;
  height: 14px;
}

/* ── Payment quick-action — same filled, bevelled 3D circle treatment as
   Call/WhatsApp, in the app's own golden accent. */
.pay-fab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  border: none;
  background: linear-gradient(145deg, var(--accent), var(--accent-2));
  color: var(--accent-text);
  font-weight: 800;
  font-size: 16px;
  font-family: inherit;
  cursor: pointer;
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.28),
    inset 0 1px 1px rgba(255, 255, 255, 0.35),
    inset 0 -2px 3px rgba(0, 0, 0, 0.2);
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.pay-fab:hover {
  transform: translateY(-1px);
}

.pay-fab:active {
  transform: translateY(1px) scale(0.94);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.28),
    inset 0 1px 1px rgba(255, 255, 255, 0.25),
    inset 0 -1px 2px rgba(0, 0, 0, 0.2);
}

.pay-fab-sm {
  width: 32px;
  height: 32px;
  font-size: 13px;
}

.contact-btn-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.directions-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ── Location / map preview (clinic profile + patient-facing schedule) ─── */

.map-picker {
  margin-top: 10px;
}

.map-picker-canvas {
  width: 100%;
  height: 240px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-alt);
}

/* ── Wheel picker (age / date / time — PRD section 11: native-feeling,
   iOS-style scroll wheels, not typed boxes or a calendar grid) ─────────── */

.wp-wheels {
  position: relative;
  display: flex;
  gap: 4px;
}

.wp-highlight {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-radius: var(--radius-sm);
  pointer-events: none;
}

.wp-col {
  flex: 1;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.wp-col::-webkit-scrollbar {
  display: none;
}

.wp-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  scroll-snap-align: center;
  font-size: 17px;
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
}

.wp-pad {
  pointer-events: none;
}

/* ── Custom hue slider ────────────────────────────────────────────────── */

.hue-picker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

.hue-picker-swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm), var(--bevel-top);
  border: 2px solid var(--surface);
}

.hue-slider {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 14px;
  border-radius: 999px;
  cursor: pointer;
  background: linear-gradient(
    to right,
    hsl(0, 65%, 58%), hsl(60, 65%, 58%), hsl(120, 65%, 58%),
    hsl(180, 65%, 58%), hsl(240, 65%, 58%), hsl(300, 65%, 58%), hsl(360, 65%, 58%)
  );
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

.hue-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface);
  border: 3px solid var(--text);
  box-shadow: var(--shadow-md);
  cursor: pointer;
}

.hue-slider::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface);
  border: 3px solid var(--text);
  box-shadow: var(--shadow-md);
  cursor: pointer;
}

.hue-slider::-moz-range-track {
  height: 14px;
  border-radius: 999px;
  background: transparent;
}

/* ── Appearance / theme picker ────────────────────────────────────────── */

.palette-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 10px;
  margin: 10px 0;
}

.palette-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface-alt);
  cursor: pointer;
  font-family: inherit;
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.palette-swatch:active {
  transform: scale(0.96);
}

.palette-swatch-blob {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sw1), var(--sw2));
  box-shadow: var(--shadow-sm), var(--bevel-top);
}

.palette-swatch-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
}

.palette-swatch.active {
  border-color: var(--sw1);
  box-shadow: 0 0 0 1px var(--sw1);
}

.palette-swatch.active .palette-swatch-name {
  color: var(--text);
}

.font-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin: 10px 0;
}

.font-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface-alt);
  cursor: pointer;
  color: var(--text);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

.font-option:active {
  transform: scale(0.96);
}

.font-option span {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.font-option.active {
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 1px var(--accent-strong);
}

.font-option.active span {
  color: var(--text);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--text);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: transform 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.chip:active {
  transform: scale(0.96);
}

.chip.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-text);
  border-color: transparent;
  box-shadow: var(--shadow-sm);
}

.mode-toggle {
  display: flex;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 4px;
  gap: 4px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

.mode-toggle button {
  flex: 1;
  border: none;
  background: none;
  color: var(--text-muted);
  font-family: inherit;
  font-weight: 600;
  font-size: 13px;
  padding: 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.mode-toggle button.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ── Date-nav weekly schedule (browse by actual date; a row per location —
   the primary address plus every Center — each independently open/closed
   with its own hours, since branches can be open at the same time) ────── */

/* ── Weekly schedule: day-of-week tabs, per-clinic day tiles ─────────────
   The schedule repeats every week — it's keyed by day-of-week, never by a
   specific calendar date — so this browses Mon..Sun directly rather than
   paging through actual dates the way the old date-arrow nav wrongly did. */

.week-daypicker {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 14px;
}

.week-day-pill {
  flex: 0 0 auto;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 600;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  box-shadow: var(--field-shadow);
  transition: background 120ms ease, box-shadow 120ms ease;
}

.week-day-pill.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-text);
  border-color: transparent;
  box-shadow: var(--shadow-sm), var(--bevel-top);
}

.day-tiles {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.day-tile {
  flex: 0 0 auto;
  min-width: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: var(--field-shadow);
  font-family: inherit;
  color: inherit;
}

button.day-tile {
  cursor: pointer;
}

.day-tile-today {
  border-color: var(--accent-strong);
  box-shadow: var(--field-shadow), 0 0 0 1px var(--accent-strong);
}

.day-tile-selected {
  border-color: var(--accent-strong);
  background: color-mix(in srgb, var(--accent-strong) 14%, var(--bg));
}

.day-tile-icon {
  font-size: 11px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.day-tile-open .day-tile-icon {
  background: var(--success);
}

.day-tile-closed .day-tile-icon {
  background: var(--danger);
}

.day-tile-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}

.day-tile-hours {
  font-size: 10px;
  color: var(--text-muted);
  text-align: center;
  white-space: nowrap;
}

.clinic-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm), var(--bevel-top);
}

.clinic-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
}

.clinic-card-head .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, var(--neutral-bg)), color-mix(in srgb, var(--accent-2) 22%, var(--neutral-bg)));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--accent-strong);
  flex-shrink: 0;
  box-shadow: var(--bevel-top);
}

.clinic-card-head .body {
  flex: 1;
  min-width: 0;
}

.clinic-card-head .title {
  font-weight: 600;
}

.clinic-card-chevron {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform 160ms ease;
}

.clinic-card.collapsed .clinic-card-chevron {
  transform: rotate(-90deg);
}

.chevron-icon-btn svg {
  transition: transform 160ms ease;
}

.chevron-icon-btn[aria-expanded="false"] svg {
  transform: rotate(-90deg);
}

.clinic-card-body {
  margin-top: 12px;
}

.clinic-card.collapsed .clinic-card-body {
  display: none;
}

.loc-day-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm), var(--bevel-top);
  padding: 14px;
}

.loc-day-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

/* The admin/doctor's editable weekly-schedule row — the whole row is the
   open/closed toggle (icon + day name), except the time summary at the
   right, its own live button (opens js/date-field.js's
   openTimeRangeSheet) while open, or inert text reading "Closed"
   otherwise. Never a raw native <input type="time"> here — its own
   unstyled OS popup looks nothing like the rest of the app. */
.loc-day-row-compact {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

@media (hover: hover) {
  .loc-day-row-compact:hover {
    background: color-mix(in srgb, var(--accent-strong) 10%, transparent);
    transform: translateX(2px);
    box-shadow: var(--shadow-sm);
  }
}

.loc-day-row-compact:active {
  background: color-mix(in srgb, var(--accent-strong) 14%, transparent);
  transform: translateX(0);
}

.loc-day-row-compact.loc-day-row-busy {
  pointer-events: none;
  opacity: 0.6;
}

.loc-day-name {
  flex: 1;
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
}

/* Plain state text ("Open"/"Closed", or the set hours once there are any) —
   the actual edit action lives in the dedicated clock icon button next to
   it, not on this label. */
.loc-day-hours {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Switch (true Yes/No fields) ─────────────────────────────────────── */

.switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  font-family: inherit;
}

.switch-track {
  position: relative;
  width: 44px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: background 160ms ease, border-color 160ms ease;
}

.switch-blob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--text);
  box-shadow: var(--shadow-sm);
  transition: transform 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

.switch[aria-pressed="true"] .switch-track {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
}

.switch[aria-pressed="true"] .switch-blob {
  transform: translateX(18px);
  background: var(--accent-text);
}

.switch:active .switch-blob {
  width: 22px;
}

.switch-state {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  min-width: 26px;
}

.switch[aria-pressed="true"] .switch-state {
  color: var(--text);
}

/* ── Custom select (native <select> popups can't be styled) ─────────────── */

.cs-wrap {
  position: relative;
}

.cs-native {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.cs-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
  box-shadow: var(--field-shadow);
  transition: outline-color 120ms ease, box-shadow 120ms ease;
}

.cs-wrap.cs-open .cs-trigger,
.cs-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

/* The Revenue/Expenses period pickers sit inline in a card next to other
   compact controls — the default field height (sized for a spacious form)
   reads as oversized there. */
.range-select-field select,
.range-select-field .cs-trigger {
  padding: 8px 12px;
  font-size: 14px;
}

.cs-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.cs-chevron {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform 160ms ease, color 160ms ease;
}

.cs-wrap.cs-open .cs-chevron {
  transform: rotate(180deg);
  color: var(--accent);
}

.cs-listbox {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 50;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg), var(--bevel-top);
  padding: 6px;
  max-height: 260px;
  overflow-y: auto;
  transform-origin: top center;
  animation: cs-pop 140ms ease;
}

@keyframes cs-pop {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.cs-option {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 100ms ease, color 100ms ease;
}

.cs-option:hover,
.cs-option:focus-visible {
  background: color-mix(in srgb, var(--accent-strong) 16%, transparent);
  color: var(--accent-strong);
  outline: none;
}

.cs-option.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-text);
  font-weight: 700;
}

.cs-disabled .cs-trigger {
  opacity: 0.5;
  cursor: not-allowed;
}

.cs-label.df-placeholder {
  color: var(--text-muted);
}

/* ── Searchable, grouped multi-select (specialization-picker.js) — reuses
   .cs-wrap/.cs-trigger/.cs-listbox above for the outer shell; these are
   just the tree/checkbox-specific bits ─────────────────────────────────── */

.ms-listbox {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 380px;
  overflow: hidden;
}

.ms-search-input {
  flex-shrink: 0;
}

.ms-tree {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.ms-group + .ms-group {
  border-top: 1px solid var(--border);
  margin-top: 4px;
  padding-top: 4px;
}

.ms-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14px;
  color: var(--text);
  transition: background 100ms ease;
}

.ms-option:hover,
.ms-option:focus-visible {
  background: color-mix(in srgb, var(--accent-strong) 12%, transparent);
  outline: none;
}

.ms-group-header {
  font-weight: 700;
}

.ms-group-label {
  flex: 1;
}

.ms-expand-icon {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform 160ms ease;
}

.ms-group.expanded .ms-expand-icon {
  transform: rotate(90deg);
}

.ms-children {
  overflow: hidden;
  max-height: 0;
  transition: max-height 220ms ease;
  padding-left: 14px;
  margin-left: 19px;
  border-left: 1px solid var(--border);
}

.ms-group.expanded .ms-children {
  max-height: 600px;
}

.ms-checkbox {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-text);
  transition: background 120ms ease, border-color 120ms ease;
}

.ms-checkbox svg {
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 120ms ease, transform 120ms ease;
}

.ms-option.checked .ms-checkbox {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
}

.ms-option.checked .ms-checkbox svg {
  opacity: 1;
  transform: scale(1);
}

.ms-empty {
  padding: 14px 8px;
  text-align: center;
}

/* ── Trigger button shared by the wheel picker (age/date/time) — same
   "custom control replacing a native input" visual as custom-select ────── */

.df-wrap {
  position: relative;
}

.df-native {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.df-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
  box-shadow: var(--field-shadow);
  transition: outline-color 120ms ease;
}

.df-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

.df-trigger-label.df-placeholder {
  color: var(--text-muted);
}

.df-icon {
  flex-shrink: 0;
  color: var(--text-muted);
}

/* ── Date / time picker panel (see js/date-field.js) — a calendar grid for
   dates, day/month/year zoom so a birthdate decades back is a few taps
   instead of months of prev-month clicking, plus a stepper/typed time-of-
   day control. Emulates D:\Codes\sarathi's shared/js/datepicker.js, opened
   in this app's own bottom sheet instead of an anchored dropdown. ────── */

.dt-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.dt-cal-title {
  font-weight: 700;
  font-family: var(--font-heading);
  font-size: 17px;
  color: var(--text);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: background 120ms ease;
}

.dt-cal-title:hover {
  background: var(--surface-alt);
}

.dt-nav-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm), var(--bevel-top);
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.dt-nav-btn:active {
  transform: scale(0.92);
}

.dt-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  padding-bottom: 6px;
}

.dt-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.dt-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 14px;
  color: var(--text);
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

.dt-day:hover {
  background: color-mix(in srgb, var(--accent-strong) 16%, transparent);
  color: var(--accent-strong);
}

.dt-day.dt-selected {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-text);
  font-weight: 700;
}

.dt-day.dt-today:not(.dt-selected) {
  border: 1.5px solid var(--accent-strong);
}

.dt-day.dt-other-month {
  color: var(--text-muted);
  opacity: 0.4;
  cursor: default;
}

.dt-day.dt-other-month:hover {
  background: none;
  color: var(--text-muted);
}

.dt-day:disabled {
  color: var(--text-muted);
  opacity: 0.3;
  cursor: not-allowed;
  background: none;
}

.dt-months,
.dt-years {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.dt-month,
.dt-year {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0;
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--text);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  font-family: inherit;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

.dt-month:hover,
.dt-year:hover {
  background: color-mix(in srgb, var(--accent-strong) 16%, transparent);
  color: var(--accent-strong);
}

.dt-month.dt-selected,
.dt-year.dt-selected {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-text);
  border-color: transparent;
  font-weight: 700;
}

.dt-month:disabled,
.dt-year:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  color: var(--text-muted);
}

/* ── Time row: steppers + typed value + AM/PM, shared by the date+time
   sheet and the time-only picker ────────────────────────────────────── */

.dt-time-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.dt-time-row.dt-time-only {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* From/To rows in openTimeRangeSheet — label sits inline to the left of
   the compact time row instead of stacked above it, so two of these take
   noticeably less vertical space than two full labeled sections would. */
.dt-range-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.dt-range-row:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.dt-range-label {
  width: 34px;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
}

.dt-time-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.dt-time-step {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  width: 32px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 120ms ease, background 120ms ease;
}

.dt-time-step:hover {
  color: var(--accent-strong);
  background: color-mix(in srgb, var(--accent-strong) 14%, var(--surface-alt));
}

.dt-time-val {
  width: 52px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  background: var(--bg);
  font-family: inherit;
  box-shadow: var(--field-shadow);
}

.dt-time-val:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

.dt-time-colon {
  font-weight: 700;
  font-size: 20px;
  color: var(--text-muted);
  align-self: center;
  margin-top: 18px;
}

.dt-ampm {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-left: 4px;
}

.dt-ampm-btn {
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.dt-ampm-btn.dt-selected {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-text);
  border-color: transparent;
}

@media (pointer: coarse) {
  .dt-time-step {
    width: 38px;
    height: 32px;
  }
}

/* ── Profile hero ─────────────────────────────────────────────────────── */

.profile-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 16px;
}

.profile-avatar-placeholder {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  box-shadow: var(--shadow-md), var(--bevel-top);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-text);
  font-size: 30px;
  font-weight: 800;
  font-family: var(--font-heading);
  flex-shrink: 0;
}

.avatar-img {
  object-fit: cover;
}

.avatar-preset {
  overflow: hidden;
  background: none !important;
}

.avatar-preset svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Clinic header (cover-photo band, doctor photo inset + centered over
   it, Title+Name centered below, specializations below that) ───────────── */

.clinic-header {
  margin-bottom: 18px;
}

.clinic-photo-band {
  position: relative;
  width: 100%;
  height: 130px;
  border-radius: var(--radius-md);
  background: var(--surface-alt) center / cover no-repeat;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.clinic-photo-edit-btn {
  margin: 8px;
  border: none;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  cursor: pointer;
}

.clinic-header-avatar-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  /* Pulls the avatar up to overlap the band by roughly half its height —
     a tight seam rather than a gap of plain card background showing
     between the photo and the avatar. */
  margin-top: -48px;
}

.clinic-header-avatar-wrap .profile-avatar-placeholder,
.clinic-header-avatar-wrap .avatar-img,
.clinic-header-avatar-wrap .avatar-preset {
  width: 92px;
  height: 92px;
  font-size: 34px;
}

.avatar-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 240px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg), var(--bevel-top);
  padding: 6px;
  animation: cs-pop 140ms ease;
}

.avatar-tap-btn {
  position: relative;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
}

.avatar-tap-btn:active {
  transform: scale(0.96);
}

.avatar-edit-badge {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  box-shadow: var(--shadow-sm);
}

.clinic-header-name-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 0 8px;
}

/* Title uses the app's progressively-enhanced custom-select (see
   custom-select.js) — it wraps the <select> in a new .cs-wrap/.cs-trigger/
   .cs-listbox and the original select is hidden, so sizing has to target
   those generated elements via this wrapper rather than the <select>
   itself (a class on the <select> only ever reached the hidden native
   control). Fixed-width trigger for a compact "Dr." pill, but the listbox
   is deliberately NOT clamped to that width — it needs room for
   "Therapist" — so it's left-anchored and grows to fit its content
   instead of matching the trigger's width. */
.title-field-wrap {
  flex-shrink: 0;
}

.title-field-wrap .cs-wrap {
  width: 106px;
}

.title-field-wrap .cs-trigger {
  height: 44px;
  padding: 0 8px;
  font-size: 16px;
  font-family: var(--font-heading);
  font-weight: 800;
}

.title-field-wrap .cs-listbox {
  left: 0;
  right: auto;
  width: max-content;
  min-width: 100%;
}

/* "Dr." + name read as one title, not two half-finished form fields — both
   sit borderless/transparent at rest (this is the doctor's own settled
   profile header, not a form they're mid-way through filling in) and only
   pick up the normal field chrome — background, border, inset depth — on
   hover/focus, when they're actually being edited. */
.title-field-wrap .cs-trigger,
.name-input-header {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.title-field-wrap .cs-trigger:hover,
.title-field-wrap .cs-trigger:focus-visible,
.title-field-wrap .cs-wrap.cs-open .cs-trigger,
.name-input-header:hover {
  background: var(--surface-alt);
  border-color: var(--border);
  box-shadow: var(--field-shadow);
}

.name-input-header {
  width: auto;
  max-width: 60%;
  min-width: 130px;
  height: 44px;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 800;
  padding: 0 10px;
  text-align: center;
}

.name-input-header:focus {
  background: var(--surface-alt);
  border-color: var(--border);
}

.clinic-header-specializations {
  margin-top: 14px;
}

/* ── Avatar-choice sheet (Upload / Male avatar / Female avatar) ──────────── */

.avatar-preset-thumb {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.avatar-preset-thumb svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Clinic photo banner (read-only — admin/patient-facing clinic cards) ── */

.clinic-photo-banner {
  display: block;
  width: 100%;
  max-height: 140px;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: 12px;
}

.profile-hero-info {
  min-width: 0;
  flex: 1;
}

.profile-name {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 8px;
  overflow-wrap: break-word;
}

.profile-hero .chip {
  cursor: default;
}

.person-summary {
  text-align: center;
  padding: 20px 16px;
}

.person-summary .profile-avatar-placeholder {
  width: 64px;
  height: 64px;
  font-size: 26px;
  margin: 0 auto 10px;
}

.person-summary .profile-name {
  font-size: 22px;
  margin-bottom: 4px;
}

/* ── Empty / loading ──────────────────────────────────────────────────── */

.empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
}

/* A "no items yet" message nested inside an already-titled card (Leave
   days, Centers, Admins, ...) doesn't need the same generous padding as a
   whole-page empty state — the card's title above it already establishes
   context, so the big gap just reads as wasted space. */
.card .empty {
  padding: 16px 0;
}

.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
}

.spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Toast ────────────────────────────────────────────────────────────── */

#toast-root {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(76px + env(safe-area-inset-bottom));
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 14px;
  box-shadow: var(--shadow-lg);
}

.toast.toast-error {
  border-color: var(--danger);
  color: var(--danger);
}

/* ── Bottom sheet / modal ─────────────────────────────────────────────── */

.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 40;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.sheet {
  width: 100%;
  max-width: 720px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--surface);
  border-radius: 22px 22px 0 0;
  padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
  border: 1px solid var(--border);
  border-bottom: none;
  box-shadow: 0 -14px 34px rgba(0, 0, 0, 0.35);
}

.sheet-handle {
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: var(--border);
  margin: 0 auto 14px;
}

.sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.sheet-header h3 {
  font-size: 17px;
}

/* The sheet's own × close button — bolder and smaller than the generic
   .icon-btn it's based on, with a bit of glow so it reads as the obvious
   "get me out of here" control. Shared with the Appearance popover's close
   button below (same [data-close] hook, same treatment). */
[data-close].icon-btn {
  width: 30px;
  height: 30px;
  font-size: 16px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--surface-alt), var(--surface));
  border-color: color-mix(in srgb, var(--accent-strong) 34%, var(--border));
  box-shadow: var(--shadow-sm), var(--bevel-top), 0 0 8px color-mix(in srgb, var(--accent-strong) 22%, transparent);
}

@media (hover: hover) {
  [data-close].icon-btn:hover {
    box-shadow: var(--shadow-md), var(--bevel-top), 0 0 14px color-mix(in srgb, var(--accent-strong) 34%, transparent);
  }
}

[data-close].icon-btn:active {
  transform: translateY(1px) scale(0.94);
  box-shadow: var(--bevel-bottom);
}

/* On a phone, sheets belong glued to the bottom edge, thumb-reachable and
   swipe-to-dismiss. On a wider viewport there's no thumb to reach for and a
   short sheet (e.g. "Invite an admin") ends up pinned to the bottom with a
   tall dead gap of backdrop above it — so instead it opens centered, like
   any other desktop dialog, right where the screen has room for it. */
@media (min-width: 720px) {
  .sheet-backdrop {
    align-items: center;
    padding: 24px;
  }

  .sheet {
    border-radius: 22px;
    border-bottom: 1px solid var(--border);
    animation: sheet-pop 160ms ease;
  }

  .sheet-handle {
    display: none;
  }
}

@keyframes sheet-pop {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Auth screens ─────────────────────────────────────────────────────── */

.auth-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px;
  max-width: 420px;
  margin: 0 auto;
}

.auth-logo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 40%, transparent), var(--bevel-top);
  margin-bottom: 20px;
}

.auth-shell h1 {
  font-size: 26px;
}

.auth-shell .subtitle {
  margin-bottom: 24px;
}

.role-toggle {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.role-toggle label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-alt);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease, transform 120ms ease;
}

.role-toggle label:active {
  transform: scale(0.98);
}

.role-toggle input {
  width: auto;
}

.role-toggle label:has(input:checked) {
  border-color: var(--accent-strong);
  color: var(--accent-strong);
  box-shadow: 0 0 0 1px var(--accent-strong) inset;
}

.or-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0;
  color: var(--text-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.or-divider::before,
.or-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.google-btn-slot {
  display: flex;
  justify-content: center;
  min-height: 40px;
}

/* ── Misc ─────────────────────────────────────────────────────────────── */

.muted {
  color: var(--text-muted);
  font-size: 13px;
}

.divider {
  height: 1px;
  background: var(--border);
  margin: 12px 0;
}

.qr-box {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 720px) {
  main#content {
    padding: 24px;
  }
}