/*  CollegioDx — shared base stylesheet (D-043)
 *  Applies to all four SPAs (doctor / clinic admin / platform admin / patient).
 *  Per-surface accent + gradient overrides live in cdx-{surface}.css and load
 *  after this file.
 *
 *  Design principles:
 *    - Blue → teal → green gradient family (no red / yellow / multicolour).
 *    - Frosted-glass header with backdrop blur for layered depth.
 *    - 16px base on form inputs (iOS no-zoom safe).
 *    - Mobile-first: every layout collapses sensibly at <= 720px,
 *      with a tablet / iPad tier at 721–1024px (§12b).
 *    - Touch ergonomics (>=44px targets, no latching hover lifts) are gated
 *      on (pointer: coarse) so every iPad gets them regardless of width (§12c).
 *    - Safe-area insets honoured on every fixed / sticky surface.
 *    - All component classes are .cdx-* prefixed so legacy class names
 *      (`.btn`, `.card`, `.bar`, `.panel`, …) still work — those are
 *      aliased below to .cdx-btn / .cdx-card / .cdx-bar / .cdx-panel.
 */

/* ============================================================
   0. RESET + TYPOGRAPHY
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
[hidden] { display: none !important; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Noto Sans Devanagari",
               Helvetica, Arial, sans-serif;
  color: var(--cdx-text);
  background: var(--cdx-bg);
  font-size: 14px;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
}

a { color: var(--cdx-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

code, pre, .cdx-mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo,
               Consolas, "Liberation Mono", monospace;
}

/* ============================================================
   1. DESIGN TOKENS — defaults; surfaces override `--cdx-accent`
        + gradient stops in their own sheet.
   ============================================================ */
:root {
  /* Palette — blue → teal → green family. */
  --cdx-blue-50:    #eff6ff;
  --cdx-blue-100:   #dbeafe;
  --cdx-blue-200:   #bfdbfe;
  --cdx-blue-500:   #3b82f6;
  --cdx-blue-600:   #2563eb;
  --cdx-blue-700:   #1d4ed8;
  --cdx-blue-900:   #1e3a8a;

  --cdx-teal-50:    #f0fdfa;
  --cdx-teal-100:   #ccfbf1;
  --cdx-teal-500:   #14b8a6;
  --cdx-teal-600:   #0d9488;
  --cdx-teal-700:   #0f766e;

  --cdx-cyan-500:   #06b6d4;
  --cdx-cyan-600:   #0891b2;

  --cdx-green-50:   #f0fdf4;
  --cdx-green-100:  #d1fae5;
  --cdx-green-500:  #10b981;
  --cdx-green-600:  #059669;
  --cdx-green-700:  #047857;

  /* Status hues (kept because UI semantics need warn/err — but in
     this palette warn is amber-soft and err is brick-soft so they
     don't clash with the cool gradient.) */
  --cdx-warn:   #d97706;
  --cdx-warn-bg:  #fef3c7;
  --cdx-err:    #dc2626;
  --cdx-err-bg:   #fee2e2;
  --cdx-ok:     var(--cdx-green-600);
  --cdx-ok-bg:    var(--cdx-green-100);

  /* Neutral surface colours. */
  --cdx-text:        #0f172a;
  --cdx-text-soft:   #475569;
  --cdx-muted:       #64748b;
  --cdx-border:      #e2e8f0;
  --cdx-border-soft: #f1f5f9;
  --cdx-card:        #ffffff;
  --cdx-bg:          #f8fafc;
  --cdx-code-bg:     #f1f5f9;

  /* Default accent — surface sheets override these three. */
  --cdx-accent:        var(--cdx-blue-600);
  --cdx-accent-hover:  var(--cdx-blue-700);
  --cdx-accent-soft:   var(--cdx-blue-50);
  --cdx-accent-border: var(--cdx-blue-100);

  /* Gradient — default is full blue→teal→green sweep; surfaces tilt
     this by overriding `--cdx-gradient` and the soft variant. */
  --cdx-gradient: linear-gradient(135deg,
                    var(--cdx-blue-600) 0%,
                    var(--cdx-cyan-500) 50%,
                    var(--cdx-green-500) 100%);
  --cdx-gradient-soft: linear-gradient(135deg,
                    var(--cdx-blue-50) 0%,
                    var(--cdx-teal-50) 50%,
                    var(--cdx-green-50) 100%);

  /* Effects. */
  --cdx-radius:     12px;
  --cdx-radius-sm:  8px;
  --cdx-radius-lg:  16px;
  --cdx-radius-pill: 9999px;
  --cdx-shadow-sm:  0 1px 2px rgba(15, 23, 42, 0.04),
                    0 2px 4px rgba(15, 23, 42, 0.03);
  --cdx-shadow:     0 4px 12px rgba(15, 23, 42, 0.06),
                    0 2px 4px rgba(15, 23, 42, 0.03);
  --cdx-shadow-lg:  0 12px 40px rgba(37, 99, 235, 0.10),
                    0 4px 12px rgba(15, 23, 42, 0.05);
  --cdx-shadow-accent: 0 6px 20px rgba(37, 99, 235, 0.18);
  --cdx-transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout. */
  --cdx-container:   1200px;
  --cdx-container-narrow: 980px;
  --cdx-container-mobile: 480px;
  --cdx-safe-bottom: env(safe-area-inset-bottom);
  --cdx-safe-top:    env(safe-area-inset-top);
}

/* ============================================================
   2. LAYOUT — header, container, main
   ============================================================ */
.cdx-app, .app {
  max-width: var(--cdx-container);
  margin: 0 auto;
  padding: 0 16px 32px;
  min-height: 100vh;
}

/* Frosted-glass sticky header. Used by every SPA. */
header,
header.bar,
.cdx-bar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  padding-top: calc(14px + var(--cdx-safe-top));
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
header h1,
header.bar h1,
.cdx-bar h1 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--cdx-text);
}
header h1 .sub,
header.bar h1 .sub,
.cdx-bar h1 .sub {
  font-weight: 400;
  font-size: 13px;
  color: var(--cdx-muted);
  letter-spacing: 0;
}

.cdx-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.02em;
}
.cdx-brand img, .cdx-brand svg { height: 32px; width: auto; }
.cdx-brand .cdx-wordmark {
  background: var(--cdx-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* "Pill" tag next to header title (e.g. "platform admin"). */
.cdx-tag, header .tag, header.bar .tag {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: var(--cdx-radius-pill);
  background: var(--cdx-accent-soft);
  color: var(--cdx-accent);
  border: 1px solid var(--cdx-accent-border);
}

.cdx-bar .who, header .who, header.bar .who {
  font-size: 12px;
  color: var(--cdx-muted);
}

/* Tab strip. Used by patient + platform + admin SPAs. */
nav.tabs, nav.cdx-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  margin: 16px 0;
  background: var(--cdx-card);
  border: 1px solid var(--cdx-border);
  border-radius: var(--cdx-radius);
  box-shadow: var(--cdx-shadow-sm);
}
nav.tabs button, nav.cdx-tabs button {
  flex: 0 0 auto;
  padding: 10px 14px;
  background: none;
  border: none;
  border-radius: var(--cdx-radius-sm);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--cdx-muted);
  cursor: pointer;
  transition: var(--cdx-transition);
  white-space: nowrap;
}
nav.tabs button:hover, nav.cdx-tabs button:hover {
  color: var(--cdx-text);
  background: var(--cdx-bg);
}
nav.tabs button.active, nav.cdx-tabs button.active {
  background: var(--cdx-accent-soft);
  color: var(--cdx-accent);
}

/* Header nav (doctor SPA uses a horizontal `<nav>` directly, not tabs). */
header nav, header.bar nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 1;
}
header nav button {
  background: none;
  border: 1px solid transparent;
  padding: 7px 14px;
  border-radius: var(--cdx-radius-sm);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--cdx-muted);
  cursor: pointer;
  transition: var(--cdx-transition);
  white-space: nowrap;
}
header nav button:hover { color: var(--cdx-text); background: var(--cdx-bg); }
header nav button.active {
  background: var(--cdx-accent-soft);
  color: var(--cdx-accent);
  border-color: var(--cdx-accent-border);
}

/* ============================================================
   3. CARDS + PANELS
   ============================================================ */
.cdx-card, .card,
.cdx-panel, .panel {
  background: var(--cdx-card);
  border: 1px solid var(--cdx-border);
  border-radius: var(--cdx-radius);
  margin-bottom: 12px;
  box-shadow: var(--cdx-shadow-sm);
}
.cdx-card, .card { padding: 16px; }

.cdx-panel .cdx-panel-h, .panel .panel-h {
  padding: 12px 16px;
  border-bottom: 1px solid var(--cdx-border);
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.cdx-panel .cdx-panel-b, .panel .panel-b { padding: 16px; }

.cdx-card h2, .card h2,
.cdx-panel h2, .panel h2 {
  margin: 0 0 8px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--cdx-text);
  letter-spacing: -0.005em;
}
.cdx-card h3 { margin: 0 0 8px 0; font-size: 13px; font-weight: 600;
               color: var(--cdx-muted); text-transform: uppercase;
               letter-spacing: 0.04em; }

.sub, .cdx-sub {
  color: var(--cdx-muted);
  font-size: 12.5px;
  line-height: 1.5;
}
.muted, .cdx-muted { color: var(--cdx-muted); }

.empty, .cdx-empty {
  color: var(--cdx-muted);
  padding: 28px 16px;
  text-align: center;
  font-size: 13px;
}
.loading, .cdx-loading {
  color: var(--cdx-muted);
  padding: 18px;
  text-align: center;
  font-style: italic;
}

/* ============================================================
   4. FORMS — inputs at 16px to disable iOS focus zoom
   ============================================================ */
label {
  display: block;
  font-size: 12.5px;
  color: var(--cdx-text-soft);
  margin-bottom: 4px;
  font-weight: 500;
}

input[type=text],
input[type=tel],
input[type=email],
input[type=password],
input[type=date],
input[type=datetime-local],
input[type=time],
input[type=number],
input[type=search],
input[type=url],
select,
textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--cdx-border);
  border-radius: var(--cdx-radius-sm);
  font: inherit;
  font-size: 16px;   /* iOS will not zoom in on 16px+ inputs */
  background: var(--cdx-card);
  color: var(--cdx-text);
  transition: border-color 150ms, box-shadow 150ms;
  -webkit-appearance: none;
       appearance: none;
}
select {
  background-image: linear-gradient(45deg, transparent 50%, var(--cdx-muted) 50%),
                    linear-gradient(135deg, var(--cdx-muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 28px;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--cdx-accent);
  box-shadow: 0 0 0 3px var(--cdx-accent-soft);
}
input:disabled, select:disabled, textarea:disabled {
  background: var(--cdx-bg);
  color: var(--cdx-muted);
  cursor: not-allowed;
}

textarea {
  resize: vertical;
  min-height: 80px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
}

/* Checkbox styling. */
input[type=checkbox] {
  width: 18px; height: 18px;
  accent-color: var(--cdx-accent);
  cursor: pointer;
  margin: 0;
}
input[type=checkbox]:disabled { cursor: not-allowed; opacity: 0.55; }

/* ============================================================
   5. BUTTONS
   ============================================================ */
/* Base style for unclassed <button> across all SPAs — clean outline pill.
 * Anything with .primary / .subtle / .danger / .icon / .btn / .cdx-btn overrides
 * via higher specificity. This replaces the ugly OS-default look that plain
 * `<button>Open</button>` rendered with before D-046's polish pass. */
button:not([class]),
button[class=""] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--cdx-accent);
  background: var(--cdx-card);
  border: 1px solid var(--cdx-border);
  border-radius: var(--cdx-radius-sm);
  cursor: pointer;
  transition: var(--cdx-transition);
  line-height: 1.2;
}
button:not([class]):hover,
button[class=""]:hover {
  background: var(--cdx-accent-soft);
  border-color: var(--cdx-accent-border);
  color: var(--cdx-accent-hover);
}
button:not([class]):active,
button[class=""]:active { transform: translateY(0.5px); }
button:not([class]):disabled,
button[class=""]:disabled {
  background: var(--cdx-bg);
  color: var(--cdx-muted);
  border-color: var(--cdx-border);
  cursor: not-allowed;
}

/* Table-row action buttons get a slightly tighter pill so a column of
 * Open / Edit buttons doesn't push row height around. */
tbody button:not([class]),
tbody button[class=""] {
  padding: 4px 12px;
  font-size: 12px;
  border-radius: 999px;
}

.cdx-btn, button.btn, .btn,
button.primary, .primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 18px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-radius: var(--cdx-radius-sm);
  background: var(--cdx-accent);
  color: white;
  cursor: pointer;
  transition: var(--cdx-transition);
  text-decoration: none;
  line-height: 1.2;
}
.cdx-btn:hover, button.btn:hover, .btn:hover,
button.primary:hover, .primary:hover {
  background: var(--cdx-accent-hover);
  box-shadow: var(--cdx-shadow-accent);
  transform: translateY(-1px);
}
.cdx-btn:active, button.btn:active, .btn:active,
button.primary:active, .primary:active { transform: translateY(0); }
.cdx-btn:disabled, button.btn:disabled, .btn:disabled,
button.primary:disabled, .primary:disabled {
  background: #cbd5e1;
  color: #f1f5f9;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Gradient call-to-action (used on landing pages + key flows). Selector
 * specificity is bumped with `button.cdx-btn-gradient` so it beats
 * `button.primary`'s solid background when both classes are applied. */
.cdx-btn-gradient,
button.cdx-btn-gradient,
.primary.cdx-btn-gradient,
button.primary.cdx-btn-gradient {
  background: var(--cdx-gradient);
  background-size: 140% 140%;
  background-position: 0% 50%;
  color: white;
  border: none;
  box-shadow: var(--cdx-shadow-accent);
  transition: background-position 0.4s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.cdx-btn-gradient:hover,
button.cdx-btn-gradient:hover,
.primary.cdx-btn-gradient:hover,
button.primary.cdx-btn-gradient:hover {
  background-position: 100% 50%;
  box-shadow: 0 10px 28px rgba(20, 184, 166, 0.32);
  transform: translateY(-1px);
}

/* Timeline action buttons (Vitals / Exam / Encounter / Upload Report) share
 * one size so the toolbar reads as a single consistent set. */
.cdx-timeline-btn {
  min-height: 38px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* "Subtle" secondary — outline style on white. */
.cdx-btn.subtle, button.subtle, .btn.subtle, .subtle {
  background: var(--cdx-card);
  color: var(--cdx-accent);
  border: 1px solid var(--cdx-border);
  font-weight: 600;
}
.cdx-btn.subtle:hover, button.subtle:hover, .btn.subtle:hover, .subtle:hover {
  background: var(--cdx-accent-soft);
  border-color: var(--cdx-accent-border);
  box-shadow: none;
  transform: none;
}

/* Danger. */
.cdx-btn.danger, button.danger, .btn.danger, .danger {
  background: var(--cdx-card);
  color: var(--cdx-err);
  border: 1px solid #fecaca;
}
.cdx-btn.danger:hover, button.danger:hover, .btn.danger:hover, .danger:hover {
  background: #fef2f2;
  box-shadow: none;
  transform: none;
}

/* Icon button (toolbar etc). */
.cdx-btn.icon, button.icon, .btn.icon, .icon-btn {
  background: var(--cdx-card);
  color: var(--cdx-muted);
  border: 1px solid var(--cdx-border);
  padding: 0;
  width: 34px;
  height: 34px;
  font-size: 14px;
  border-radius: var(--cdx-radius-sm);
}
.cdx-btn.icon:hover, button.icon:hover, .btn.icon:hover, .icon-btn:hover {
  background: var(--cdx-bg);
  color: var(--cdx-text);
  transform: none;
  box-shadow: none;
}

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

/* ============================================================
   6. TABLES — responsive wrapper handles overflow
   ============================================================ */
.cdx-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--cdx-border);
  border-radius: var(--cdx-radius);
  background: var(--cdx-card);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
th, td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--cdx-border-soft);
  vertical-align: top;
}
th {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--cdx-muted);
  font-weight: 600;
  letter-spacing: 0.04em;
  background: var(--cdx-bg);
  border-bottom: 1px solid var(--cdx-border);
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: none; }
tr.tappable { cursor: pointer; transition: background 120ms; }
tr.tappable:hover { background: var(--cdx-accent-soft); }

/* ============================================================
   7. BADGES + STATUS PILLS
   ============================================================ */
.badge, .cdx-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--cdx-radius-pill);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}
.badge-ok, .cdx-badge-ok       { background: var(--cdx-ok-bg);   color: var(--cdx-ok); }
.badge-warn, .cdx-badge-warn   { background: var(--cdx-warn-bg); color: var(--cdx-warn); }
.badge-err, .cdx-badge-err     { background: var(--cdx-err-bg);  color: var(--cdx-err); }
.badge-pending                 { background: var(--cdx-warn-bg); color: var(--cdx-warn); }
.badge-platform                { background: var(--cdx-accent-soft); color: var(--cdx-accent); }
.badge-doctor                  { background: var(--cdx-blue-100); color: var(--cdx-blue-900); }
.badge-admin                   { background: var(--cdx-teal-100); color: var(--cdx-teal-700); }
.badge-domain                  { background: var(--cdx-blue-100); color: var(--cdx-blue-900); margin-right: 4px; }
.badge-unread                  { background: var(--cdx-err);     color: white; }

/* ============================================================
   8. STAT TILES (overview dashboard)
   ============================================================ */
.stats, .cdx-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.stat, .cdx-stat {
  background: var(--cdx-card);
  border: 1px solid var(--cdx-border);
  border-radius: var(--cdx-radius);
  padding: 14px 16px;
  box-shadow: var(--cdx-shadow-sm);
  transition: var(--cdx-transition);
}
.stat:hover, .cdx-stat:hover {
  box-shadow: var(--cdx-shadow);
  border-color: var(--cdx-accent-border);
}
.stat .num, .cdx-stat .num {
  font-size: 26px;
  font-weight: 800;
  background: var(--cdx-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.stat .lbl, .cdx-stat .lbl {
  font-size: 11px;
  color: var(--cdx-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
}

/* ============================================================
   9. MESSAGES — error / success banners
   ============================================================ */
.err-banner, .err-msg, .cdx-err-banner {
  background: var(--cdx-err-bg);
  border: 1px solid #fecaca;
  color: #7f1d1d;
  padding: 10px 14px;
  border-radius: var(--cdx-radius-sm);
  font-size: 13px;
  margin-bottom: 10px;
}
.ok-msg, .cdx-ok-banner {
  background: var(--cdx-ok-bg);
  border: 1px solid #a7f3d0;
  color: #065f46;
  padding: 10px 14px;
  border-radius: var(--cdx-radius-sm);
  font-size: 13px;
  margin-bottom: 10px;
}
.warn-banner, .cdx-warn-banner {
  background: var(--cdx-warn-bg);
  border: 1px solid #fde68a;
  color: #92400e;
  padding: 10px 14px;
  border-radius: var(--cdx-radius-sm);
  font-size: 13px;
  margin-bottom: 10px;
}
.hint, .cdx-hint {
  background: var(--cdx-accent-soft);
  border: 1px solid var(--cdx-accent-border);
  color: var(--cdx-blue-900);
  padding: 10px 14px;
  border-radius: var(--cdx-radius-sm);
  font-size: 13px;
  margin-bottom: 10px;
}

/* ============================================================
   10. MODAL + LIGHTBOX (image / PDF viewer)
   ============================================================ */
.modal, .cdx-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px;
  padding-bottom: calc(16px + var(--cdx-safe-bottom));
}
.modal.show, .cdx-modal.show { display: flex; }
.modal-c, .cdx-modal-c {
  background: var(--cdx-card);
  border-radius: var(--cdx-radius-lg);
  max-width: 800px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 20px 24px;
  box-shadow: var(--cdx-shadow-lg);
}
.cdx-modal-c pre, .modal-c pre {
  background: var(--cdx-code-bg);
  padding: 12px;
  border-radius: var(--cdx-radius-sm);
  font-size: 12px;
  overflow-x: auto;
  white-space: pre-wrap;
}

/* Lightbox — full-bleed for images / iframes. */
.cdx-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.92);
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.cdx-lightbox[hidden] { display: none !important; }
.cdx-lightbox-content {
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.cdx-lightbox-content img,
.cdx-lightbox-content iframe {
  max-width: 100%;
  max-height: 80vh;
  border-radius: var(--cdx-radius);
  box-shadow: 0 16px 40px rgba(0,0,0,0.4);
  background: var(--cdx-card);
}
.cdx-lightbox-content iframe { width: 90vw; height: 80vh; border: 0; }
.cdx-lightbox-close {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  color: white;
  border: 1px solid rgba(255,255,255,0.3);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cdx-lightbox-close:hover { background: rgba(255,255,255,0.25); }

/* Thumbnail strip — gallery / multi-page PDF preview. */
.cdx-thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0;
  scrollbar-width: thin;
}
.cdx-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 80px;
  height: 80px;
  border-radius: var(--cdx-radius-sm);
  overflow: hidden;
  background: var(--cdx-bg);
  border: 2px solid transparent;
  cursor: pointer;
  transition: var(--cdx-transition);
}
.cdx-thumb img {
  width: 100%; height: 100%; object-fit: cover;
}
.cdx-thumb:hover { transform: scale(1.05); }
.cdx-thumb.active { border-color: var(--cdx-accent);
                    box-shadow: 0 0 0 2px var(--cdx-accent-soft); }
.cdx-thumb-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: rgba(15,23,42,0.65);
  color: white;
  font-size: 9px;
  padding: 2px 4px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* PDF icon for non-image documents. */
.cdx-thumb.pdf {
  background: linear-gradient(135deg, var(--cdx-blue-100), var(--cdx-teal-100));
  color: var(--cdx-blue-900);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.cdx-thumb.pdf::before {
  content: "📄";
  display: block;
  font-size: 26px;
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
}
.cdx-thumb.pdf .cdx-thumb-label { background: rgba(30, 58, 138, 0.85); }

/* Featured image (large-view above the thumb strip). */
.cdx-featured {
  width: 100%;
  text-align: center;
  margin-bottom: 12px;
}
.cdx-featured img,
.cdx-featured iframe {
  max-width: 100%;
  max-height: 60vh;
  border-radius: var(--cdx-radius);
  border: 1px solid var(--cdx-border);
}
.cdx-featured iframe { width: 100%; height: 60vh; border: 0; }

/* ============================================================
   11. UTILITY ROWS / GRIDS
   ============================================================ */
.row, .cdx-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.row > *, .cdx-row > * { flex: 1; min-width: 0; }
.row > .grow0, .cdx-row > .grow0 { flex: 0; }

.cdx-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cdx-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cdx-grid-auto { display: grid;
                 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
                 gap: 12px; }

footer {
  text-align: center;
  padding: 24px 16px;
  padding-bottom: calc(24px + var(--cdx-safe-bottom));
  color: var(--cdx-muted);
  font-size: 12px;
  border-top: 1px solid var(--cdx-border-soft);
  margin-top: 28px;
}

/* ============================================================
   12. MOBILE — tightens density, switches grids, prevents overflow.
        Triggered at <= 720px (covers all phones in portrait).
   ============================================================ */
@media (max-width: 720px) {
  .cdx-app, .app {
    padding: 0 12px 24px;
  }
  header, header.bar, .cdx-bar {
    padding: 12px 14px;
    padding-top: calc(12px + var(--cdx-safe-top));
    gap: 8px;
    flex-wrap: wrap;
  }
  header h1, header.bar h1, .cdx-bar h1 { font-size: 15px; }

  /* Tabs become horizontally scrollable instead of squashing. */
  nav.tabs, nav.cdx-tabs { margin: 12px 0; }

  /* Stat grid → 2 across on phones. */
  .stats, .cdx-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .stat .num, .cdx-stat .num { font-size: 22px; }

  /* Tables stay readable: smaller padding + scrollable on overflow. */
  th, td { padding: 8px 10px; font-size: 12px; }
  th { font-size: 10px; }

  /* Safety net for data tables that aren't wrapped in .cdx-table-wrap:
     turn the table itself into a horizontally-scrollable block so a wide
     table scrolls within its column instead of forcing the whole page
     wider than the viewport. Tables already inside .cdx-table-wrap just
     fill it normally. */
  table { display: block; width: 100%; overflow-x: auto;
          -webkit-overflow-scrolling: touch; }
  .cdx-table-wrap > table { display: table; }

  /* Modal becomes full-bleed-ish. */
  .modal, .cdx-modal { padding: 8px;
                       padding-bottom: calc(8px + var(--cdx-safe-bottom)); }
  .modal-c, .cdx-modal-c {
    max-height: calc(100vh - 16px - var(--cdx-safe-bottom));
    padding: 16px;
    border-radius: var(--cdx-radius);
  }

  /* Grid-2 / grid-3 collapse to single column. */
  .cdx-grid-2, .cdx-grid-3 { grid-template-columns: 1fr; }

  /* Buttons grow tap target a hair. */
  .cdx-btn, button.btn, .btn,
  button.primary, .primary,
  .cdx-btn.subtle, button.subtle, .btn.subtle, .subtle {
    padding: 11px 16px;
    min-height: 44px;
  }
  .cdx-btn-row, .btn-row { gap: 8px; }

  /* Lightbox iframe scales down. */
  .cdx-lightbox-content iframe { width: 100vw; height: 70vh; }

  /* Featured viewer also smaller. */
  .cdx-featured iframe { height: 50vh; }
}

/* Very small screens (≤ 380px). */
@media (max-width: 380px) {
  .stats, .cdx-stats { grid-template-columns: 1fr; }
  .stat .num, .cdx-stat .num { font-size: 20px; }
}

/* ============================================================
   12b. TABLET / iPAD  (721–1024px)
        The phone sweep above stops at 720px, so iPad portrait
        (768) and landscape (1024) would otherwise inherit the
        full desktop layout. Soften the densest shared grids here;
        per-surface sheets layer their own tablet rules on top.
   ============================================================ */
@media (min-width: 721px) and (max-width: 1024px) {
  /* 3-up card grids are cramped on a tablet — drop to 2-up. */
  .cdx-grid-3 { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   12c. TOUCH DEVICES  (phones + tablets, incl. every iPad)
        Gated on the input device, not the viewport width, so even
        a 1366px iPad Pro gets finger-friendly targets — this is the
        coverage width media queries miss on large touch screens.
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
  /* >=44px tap targets on the real action buttons + nav strips. */
  .cdx-btn, button.btn, .btn,
  button.primary, .primary,
  .cdx-btn.subtle, button.subtle, .btn.subtle, .subtle,
  .cdx-btn.danger, button.danger, .btn.danger, .danger,
  nav.tabs button, nav.cdx-tabs button,
  header nav button {
    min-height: 44px;
  }
  .cdx-btn.icon, button.icon, .btn.icon, .icon-btn { width: 44px; height: 44px; }
  /* Compact row-action pills keep a smaller floor so tables stay tidy. */
  tbody button:not([class]), tbody button[class=""] { min-height: 36px; }
  /* Bigger modal close + checkboxes for fingertips. */
  .cdx-modal-close { width: 40px; height: 40px; font-size: 22px; }
  input[type=checkbox] { width: 22px; height: 22px; }
  /* Hover lift / scale latches after a tap on touch — switch it off. */
  .cdx-btn:hover, button.btn:hover, .btn:hover,
  button.primary:hover, .primary:hover,
  .cdx-btn-gradient:hover, button.cdx-btn-gradient:hover,
  .stat:hover, .cdx-stat:hover,
  .cdx-thumb:hover { transform: none; }
}

/* Print — strip backdrop blur etc. */
@media print {
  header, header.bar, .cdx-bar { position: static;
                                   background: white;
                                   backdrop-filter: none; }
  .cdx-card, .card { box-shadow: none; border-color: #ddd; }
  .cdx-btn, button.btn, .btn { display: none; }
}

/* ============================================================
   13. PHONE ROW — +91 prefix badge joined to digit input.
       Pairs a non-editable country-code badge with an input
       that accepts only the 10-digit subscriber number.
       Add oninput="this.value=this.value.replace(/\D/g,'').slice(0,10)"
       to the input for client-side digit-only enforcement.
   ============================================================ */
.cdx-phone-row,
.phone-row {
  display: flex;
  border: 1px solid var(--cdx-border);
  border-radius: var(--cdx-radius-sm);
  overflow: hidden;
  transition: border-color 150ms, box-shadow 150ms;
  background: var(--cdx-card);
}
.cdx-phone-row:focus-within,
.phone-row:focus-within {
  border-color: var(--cdx-accent);
  box-shadow: 0 0 0 3px var(--cdx-accent-soft);
}
.cdx-phone-row .prefix,
.phone-row .prefix {
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: var(--cdx-bg);
  border-right: 1px solid var(--cdx-border);
  color: var(--cdx-text-soft);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  user-select: none;
  flex-shrink: 0;
  letter-spacing: 0.01em;
}
.cdx-phone-row input,
.phone-row input {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  flex: 1;
  min-width: 0;
  background: transparent !important;
}
.cdx-phone-row input:focus,
.phone-row input:focus {
  outline: none;
  border: none !important;
  box-shadow: none !important;
}
.cdx-phone-row input[readonly],
.phone-row input[readonly] {
  color: var(--cdx-muted);
  cursor: default;
}

/* ============================================================
   14. BTN-REMOVE — polished circular × for inline list items
       (remove diagnosis, medication, analyte row, etc.)
   ============================================================ */
button.btn-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  min-width: 26px;
  max-width: 26px;
  padding: 0;
  font-size: 15px;
  line-height: 1;
  border-radius: 50%;
  background: var(--cdx-err-bg);
  color: var(--cdx-err);
  border: 1px solid #fecaca;
  cursor: pointer;
  transition: var(--cdx-transition);
  flex: none;
  font-weight: 400;
}
button.btn-remove:hover {
  background: var(--cdx-err);
  color: white;
  border-color: var(--cdx-err);
  transform: scale(1.08);
}
button.btn-remove:active { transform: scale(0.95); }

/* ============================================================
   15. MODAL TITLE ROW — header bar inside .modal-c with a
       flush × close button aligned to the title.
   ============================================================ */
.cdx-modal-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 16px;
}
.cdx-modal-title-row h2 {
  margin: 0 !important;
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--cdx-text);
}
.cdx-modal-close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid transparent;
  width: 30px;
  height: 30px;
  padding: 0;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: var(--cdx-muted);
  border-radius: var(--cdx-radius-sm);
  transition: var(--cdx-transition);
  margin-top: -2px;
}
.cdx-modal-close:hover {
  background: var(--cdx-bg);
  border-color: var(--cdx-border);
  color: var(--cdx-text);
}