/* Centre Rx portal — base styles */

:root {
  --primary: #7B3F9D;
  --secondary: #0047BB;
  --accent-pink: #E91E8C;
  --accent-gradient: linear-gradient(135deg, #E91E8C 0%, #7B3F9D 50%, #0047BB 100%);
  --bg: #f5f6fa;
  --bg-soft: #f8f7fb;
  --bg-white: #ffffff;
  --text: #1a1a2e;
  --text-secondary: #6b7280;
  --text-muted: #9ca3af;
  --border: #e8eaef;
  --border-light: #f0f1f5;
  --error: #c81e1e;
  --success: #1e8c4e;

  /* Dashboard palette */
  --sidebar-bg: #1a1432;
  --sidebar-active: rgba(255, 255, 255, 0.08);
  --sidebar-hover: rgba(255, 255, 255, 0.05);
  --sidebar-text: rgba(255, 255, 255, 0.6);
  --sidebar-text-active: #ffffff;
  --purple: #7B3F9D;
  --purple-light: #f3eaf8;
  --blue: #0047BB;
  --blue-light: #e8f0fe;
  --pink: #E91E8C;
  --pink-light: #fce8f4;
  --green: #10b981;
  --green-light: #ecfdf5;
  --amber: #f59e0b;
  --amber-light: #fffbeb;
  --red: #ef4444;
  --red-light: #fef2f2;
  --teal: #14b8a6;
  --teal-light: #f0fdfa;
  --cyan: #0ea5e9;
  --cyan-light: #f0f9ff;

  --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 40px rgba(123, 63, 157, 0.12);
  --radius: 12px;
  --radius-sm: 8px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
}

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

a:hover {
  text-decoration: underline;
}

/* ============================================================================
   LOGIN PAGE
   ============================================================================ */

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(180deg, #f8f7fb 0%, #efeaf5 100%);
}

.login-card {
  width: 100%;
  max-width: 440px;
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 48px 40px;
}

.login-brand {
  text-align: center;
  margin-bottom: 32px;
}

.login-brand-mark {
  display: inline-block;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--accent-gradient);
  margin-bottom: 16px;
}

.login-brand-title {
  font-size: 28px;
  margin-bottom: 4px;
}

.login-brand-subtitle {
  font-size: 14px;
  color: var(--text-muted);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

.form-input {
  font-family: inherit;
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: white;
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.form-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(123, 63, 157, 0.12);
}

.form-input:disabled {
  background: #f5f5f8;
  color: var(--text-muted);
  cursor: not-allowed;
}

.btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 10px 20px;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: opacity 0.15s, transform 0.05s, background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--accent-gradient);
  color: white;
  font-size: 15px;
  padding: 13px 20px;
}

.btn-primary:hover:not(:disabled) {
  opacity: 0.92;
}

.btn-primary:active:not(:disabled) {
  transform: translateY(1px);
}

.btn-outline {
  background: var(--bg-white);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.btn-outline:hover:not(:disabled) {
  border-color: var(--purple);
  color: var(--purple);
}

.alert {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  display: none;
}

.alert.is-visible {
  display: block;
}

.alert-error {
  background: #fdecec;
  color: var(--error);
  border: 1px solid #f5c4c4;
}

.alert-success {
  background: #eaf5ee;
  color: var(--success);
  border: 1px solid #c5e3cf;
}

.alert-warning {
  background: var(--amber-light);
  color: #92400e;
  border: 1px solid #fde68a;
}

.login-footer {
  margin-top: 28px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}

/* ============================================================================
   DASHBOARD LAYOUT — sidebar + main column
   ============================================================================ */

body.app {
  display: flex;
  min-height: 100vh;
}

/* ---- Sidebar ---- */

.sidebar {
  width: 240px;
  min-height: 100vh;
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 100;
}

.sidebar-brand {
  padding: 24px 20px 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.sidebar-brand h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 26px;
  font-weight: 600;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.5px;
  color: transparent;
}

.sidebar-brand-sub {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding: 0 20px;
  margin-bottom: 24px;
}

.sidebar-nav {
  flex: 1;
  padding: 0 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  color: var(--sidebar-text);
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  position: relative;
}

.nav-item:hover {
  background: var(--sidebar-hover);
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}

.nav-item.active {
  background: var(--sidebar-active);
  color: var(--sidebar-text-active);
  font-weight: 500;
}

.nav-item.disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.nav-item.disabled:hover {
  background: transparent;
  color: var(--sidebar-text);
}

.nav-item i {
  width: 18px;
  text-align: center;
  font-size: 15px;
}

.nav-badge {
  margin-left: auto;
  background: var(--pink);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  min-width: 22px;
  text-align: center;
}

.nav-badge.amber {
  background: var(--amber);
}

.nav-badge.muted {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
}

.sidebar-footer {
  padding: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.3px;
}

/* ---- Main column ---- */

.main {
  margin-left: 240px;
  flex: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.topbar {
  height: 64px;
  background: var(--bg-white);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  position: sticky;
  top: 0;
  z-index: 50;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.topbar-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

.platform-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.platform-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--border);
  background: var(--bg-white);
  color: var(--text);
}

.platform-pill .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--purple);
}

.platform-pill.unavailable {
  opacity: 0.6;
}

.platform-pill.unavailable .dot {
  background: var(--text-muted);
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.topbar-btn {
  white-space: nowrap;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 15px;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}

.topbar-btn:hover {
  background: var(--bg);
  border-color: var(--purple);
  color: var(--purple);
}

.topbar-btn.is-spinning i {
  animation: spin 0.6s linear infinite;
}

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

.topbar-logout {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-white);
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: border-color 0.15s, color 0.15s;
}

.topbar-logout:hover {
  border-color: var(--red);
  color: var(--red);
}

.doctor-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--purple), var(--blue));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}

.content {
  flex: 1;
  padding: 28px 32px;
}

/* ---- Stats grid ---- */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}

.stat-card {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  transition: box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}

.stat-card:hover {
  box-shadow: var(--shadow);
}

.stat-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--purple);
}

.stat-card.amber::before { background: var(--amber); }
.stat-card.purple::before { background: var(--purple); }
.stat-card.teal::before { background: var(--teal); }
.stat-card.blue::before { background: var(--blue); }

.stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  background: var(--purple-light);
  color: var(--purple);
}

.stat-card.amber .stat-icon { background: var(--amber-light); color: var(--amber); }
.stat-card.teal .stat-icon { background: var(--teal-light); color: var(--teal); }
.stat-card.blue .stat-icon { background: var(--blue-light); color: var(--blue); }

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
  font-family: 'Inter', sans-serif;
}

.stat-label {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* ---- Section headers ---- */

.section-header {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 14px;
  margin-top: 8px;
}

/* ---- Platform overview cards ---- */

.platform-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 360px));
  gap: 16px;
  margin-bottom: 28px;
}

.platform-card {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  border-top: 3px solid var(--purple);
}

.platform-card.unavailable {
  opacity: 0.65;
  border-top-color: var(--text-muted);
}

.platform-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.platform-card-stats {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-top: 4px;
}

.platform-stat-num {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}

.platform-stat-num.amber { color: var(--amber); }
.platform-stat-num.green { color: var(--green); }
.platform-stat-num.muted { color: var(--text-muted); }

.platform-stat-label {
  font-size: 12px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 500;
}

/* ---- Plat badges (small inline tenant labels) ---- */

.plat-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  background: var(--purple-light);
  color: var(--purple);
}

.plat-badge .bdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--purple);
}

/* ---- Stage badges ---- */

.stage {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}

.stage.review { background: var(--amber-light); color: #b45309; }
.stage.approved { background: var(--green-light); color: #047857; }
.stage.shipped { background: var(--blue-light); color: var(--blue); }
.stage.captured { background: var(--purple-light); color: var(--purple); }
.stage.intake { background: #f3f4f6; color: var(--text-secondary); }

.urgent-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--amber);
  display: inline-block;
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* ---- Card + table ---- */

.card {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

table {
  width: 100%;
  border-collapse: collapse;
}

table th {
  text-align: left;
  padding: 12px 24px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  font-weight: 600;
  background: #fafbfc;
  border-bottom: 1px solid var(--border);
}

table td {
  padding: 14px 24px;
  font-size: 14px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text);
}

table tr:hover td {
  background: #f9fafb;
}

table tr.clickable {
  cursor: pointer;
}

table tr:last-child td {
  border-bottom: none;
}

.patient-name {
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.patient-state {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 400;
  margin-left: 4px;
}

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

/* ---- Empty / loading / error states ---- */

.state-card {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 60px 40px;
  text-align: center;
}

.state-card-icon {
  font-size: 36px;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.state-card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
  font-family: 'Inter', sans-serif;
}

.state-card-body {
  font-size: 14px;
  color: var(--text-secondary);
  max-width: 460px;
  margin: 0 auto;
  line-height: 1.6;
}

.skeleton {
  background: linear-gradient(90deg, #f0f1f5 25%, #e8eaef 50%, #f0f1f5 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s infinite;
  border-radius: var(--radius-sm);
}

.skeleton-row {
  height: 56px;
  margin-bottom: 1px;
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---- Banner (warnings inside content area) ---- */

.banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  margin-bottom: 16px;
}

.banner.warning {
  background: var(--amber-light);
  color: #92400e;
  border: 1px solid #fde68a;
}

.banner.error {
  background: var(--red-light);
  color: var(--error);
  border: 1px solid #fecaca;
}

.banner i {
  font-size: 14px;
}

.banner-action {
  margin-left: auto;
  background: none;
  border: 1px solid currentColor;
  color: inherit;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.banner-action:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* ---- Footer ---- */

.footer {
  padding: 20px 32px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  border-top: 1px solid var(--border-light);
  background: var(--bg-white);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-brand {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-secondary);
}

.footer a {
  color: var(--text-muted);
}

.footer a:hover {
  color: var(--purple);
}

.footer-sep {
  color: var(--border);
}

/* ---- Last refresh timestamp ---- */

.last-refresh {
  font-size: 12px;
  color: var(--text-muted);
  margin-right: 4px;
}

/* ---- Responsive ---- */

@media (max-width: 1200px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .sidebar {
    display: none;
  }
  .main {
    margin-left: 0;
  }
  .platform-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Scrollbars ---- */

::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

/* ============================================================================
   LEGACY (placeholder dashboard from Phase 1) — kept for backwards compat
   ============================================================================ */

.dashboard {
  min-height: 100vh;
  background: var(--bg);
}

.dashboard-header {
  background: white;
  border-bottom: 1px solid var(--border);
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dashboard-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 20px;
  font-weight: 600;
}

.dashboard-brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--accent-gradient);
}

.dashboard-user {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 14px;
  color: var(--text-muted);
}

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

.btn-link:hover {
  text-decoration: underline;
}

.dashboard-main {
  padding: 48px 32px;
  max-width: 960px;
  margin: 0 auto;
}

.dashboard-welcome {
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 40px;
  text-align: center;
}

.dashboard-welcome h1 {
  font-size: 32px;
  margin-bottom: 12px;
}

.dashboard-welcome p {
  color: var(--text-muted);
  font-size: 16px;
}


/* ============================================================================
   PATIENT DETAIL PAGE
   ============================================================================ */

.back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: var(--text-muted);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.back-link:hover {
  background: var(--bg);
  color: var(--purple);
  text-decoration: none;
}

/* ---- Page tabs ---- */

/**
 * QA2-UX-008 — THE ACCOUNT PAGE COULD NOT BE USED ON A PHONE, AND THIS ROW WAS WHY.
 *
 * Measured on the deployed portal at a 390 × 844 viewport: `documentElement.scrollWidth = 617`
 * against `innerWidth = 390` — 227 px of horizontal overflow on `/settings.html`, the surface a
 * physician edits their profile, licences, security, fulfilment, billing and payment method on.
 * Every other doctor surface measured clean at 390.
 *
 * The offender, identified per element rather than per page (the probe reports the widest node
 * whose right edge is outside the viewport): `div.page-tab` "Fulfilment", right edge 437. Six
 * tabs in a non-wrapping, non-scrolling flex row are ~585 px wide however narrow the screen is,
 * so the ROW pushed the document, and the document scrolled — which is the one thing a page
 * layout must not do, because a horizontal document scroll is invisible until content is already
 * off-screen.
 *
 * THE ROW SCROLLS INSTEAD OF THE PAGE. A tab strip is exactly the control this is for: all six
 * tabs stay reachable, the row keeps its order and its active indicator, and nothing else on the
 * page moves. Wrapping to two lines was the alternative and it changes the control's shape — a
 * two-row tab strip reads as two groups, and the sixth tab lands under the first.
 *
 * `-webkit-overflow-scrolling` and the hidden scrollbar keep it looking like a tab strip rather
 * than a scroll area on the desktop widths where it already fitted; `scrollbar-width:none` is not
 * hiding a problem, because the row is only scrollable when it does not fit.
 *
 * It applies to BOTH pages that use this component (`/settings.html`, `/patient.html`) — this is
 * the component's fix, not one page's, and `patient.html` was one tab away from the same defect.
 */
.page-tabs {
  display: flex;
  gap: 0;
  background: var(--bg-white);
  border-bottom: 1px solid var(--border);
  padding: 0 32px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.page-tabs::-webkit-scrollbar { display: none; }

.page-tab {
  padding: 14px 20px;
  font-size: 14px;
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  font-weight: 500;
  transition: color 0.15s, border-color 0.15s;
  /* A tab that wraps its own label is a tab whose height no longer matches its neighbours. */
  white-space: nowrap;
  flex: 0 0 auto;
}

/* The strip is edge-to-edge on a phone: 32 px of padding on a 390 px screen is 16 % of the row
   spent on nothing, and it is the reason the sixth tab needs scrolling sooner than it should. */
@media (max-width: 640px) {
  .page-tabs { padding: 0 12px; }
  .page-tab { padding: 14px 14px; }
}

.page-tab:hover:not(.disabled) {
  color: var(--text);
}

.page-tab.active {
  color: var(--purple);
  border-bottom-color: var(--purple);
}

.page-tab.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.detail-tab {
  display: none;
}

.detail-tab.active {
  display: block;
}

/* ---- Patient header ---- */

.patient-header {
  margin-bottom: 24px;
}

.patient-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
}

.patient-header-info {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
}

.patient-avatar {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--purple), var(--blue));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
}

.patient-header-text {
  flex: 1;
  min-width: 0;
}

.patient-name-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.patient-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  font-family: 'Inter', sans-serif;
}

.patient-header-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-secondary);
  flex-wrap: wrap;
}

.patient-header-meta i {
  font-size: 11px;
  margin-right: 4px;
}

.patient-header-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.btn-success {
  background: var(--green);
  color: white;
  border: none;
}

.btn-success:hover:not(:disabled) {
  background: #059669;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.btn-danger {
  background: var(--bg-white);
  color: var(--red);
  border: 1px solid var(--border);
}

.btn-danger:hover:not(:disabled) {
  border-color: var(--red);
  background: var(--red-light);
}

.btn-danger-solid {
  background: var(--red);
  color: white;
  border: none;
}

.btn-danger-solid:hover:not(:disabled) {
  background: #dc2626;
}

.header-action-note {
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
}

/* ---- Detail grid + info cards ---- */

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.info-card {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
}

.info-card-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-light);
  font-family: 'Inter', sans-serif;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 7px 0;
  font-size: 14px;
  gap: 12px;
}

.info-row .label {
  color: var(--text-secondary);
  flex-shrink: 0;
}

.info-row .value {
  color: var(--text);
  font-weight: 500;
  text-align: right;
  word-break: break-word;
}

.info-card-empty {
  text-align: center;
  padding: 24px 12px;
}

@media (max-width: 900px) {
  .detail-grid {
    grid-template-columns: 1fr;
  }
  .patient-header-row {
    flex-direction: column;
    align-items: stretch;
  }
  .patient-header-actions {
    justify-content: flex-start;
  }
}

/* ---- Modal ---- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 20, 50, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.modal {
  background: var(--bg-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  max-width: 500px;
  width: 100%;
  padding: 28px 28px 22px;
}

.modal-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  margin-bottom: 12px;
}

.modal-body {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 18px;
}

.modal-input-wrap {
  margin-bottom: 18px;
}

.modal-input-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 6px;
}

.modal-input-wrap textarea {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-white);
  color: var(--text);
  resize: vertical;
  min-height: 70px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.modal-input-wrap textarea:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(123, 63, 157, 0.1);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* ---- Banner success variant (already had warning + error) ---- */

.banner.success {
  background: var(--green-light);
  color: #065f46;
  border: 1px solid #a7f3d0;
}


/* ============================================================================
   PHASE 3 — TABS, TIMELINE, DOCUMENTS, RX ACTION ROW
   ============================================================================ */

/* ---- Timeline ---- */

.timeline {
  position: relative;
  padding-left: 28px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--border);
}

.timeline-item {
  position: relative;
  padding: 8px 0 18px 0;
}

.timeline-item:last-child {
  padding-bottom: 4px;
}

.timeline-dot {
  position: absolute;
  left: -24px;
  top: 12px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--purple-light);
  border: 3px solid var(--purple);
  box-sizing: border-box;
}

.timeline-body {
  font-size: 14px;
}

.timeline-title {
  font-weight: 600;
  color: var(--text);
  font-size: 14px;
}

.timeline-desc {
  color: var(--text-secondary);
  font-size: 13px;
  margin-top: 3px;
  line-height: 1.5;
}

.timeline-date {
  color: var(--text-muted);
  font-size: 12px;
  margin-top: 4px;
}

/* ---- Documents tab ---- */

.doc-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-light);
}

.doc-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.doc-meta {
  flex: 1;
  min-width: 0;
}

.doc-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.doc-sub {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.doc-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.doc-actions .btn {
  font-size: 13px;
}

.doc-note {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}

/* ---- RX action row (Prescription tab approve/deny) ---- */

.rx-action-row {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.rx-action-row .btn {
  font-size: 14px;
  padding: 11px 18px;
}

.rx-action-note {
  font-size: 12px;
  color: var(--text-muted);
  flex: 1;
  min-width: 200px;
  line-height: 1.5;
}


/* ============================================================================
   MY-PATIENTS TOOLBAR
   ============================================================================ */

.my-patients-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.my-patients-search {
  flex: 1;
  max-width: 480px;
  font-size: 14px;
  padding: 10px 14px;
}

.my-patients-stat {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}


/* ============================================================================
   PHASE 5a — MESSAGING PAGE
   ============================================================================ */

/* Override .content padding just for the messages page so the layout fills */
.messages-content {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.messages-content #banners {
  padding: 16px 32px 0;
}

.messages-content #banners:empty {
  padding: 0;
}

.messages-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  border-top: 1px solid var(--border);
  background: var(--bg);
}

/* ---- Inbox pane (left) ---- */

.inbox-pane {
  width: 340px;
  flex-shrink: 0;
  background: var(--bg-white);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.inbox-header {
  padding: 18px 20px 14px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
}

.inbox-title {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  font-weight: 600;
}

.inbox-count {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

.inbox-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.inbox-item {
  display: flex;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  transition: background 0.12s;
  position: relative;
}

.inbox-item:hover {
  background: var(--bg-soft);
}

.inbox-item.active {
  background: var(--purple-light);
}

.inbox-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--purple);
}

.inbox-item.unread .inbox-item-name,
.inbox-item.unread .inbox-item-preview {
  font-weight: 600;
  color: var(--text);
}

.inbox-item-avatar {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--purple), var(--blue));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
}

.inbox-item-main {
  flex: 1;
  min-width: 0;
}

.inbox-item-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
}

.inbox-item-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inbox-item-time {
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.inbox-item-preview {
  font-size: 13px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.4;
}

.inbox-item-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 5px;
  gap: 8px;
}

.inbox-tenant-pill {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--purple-light);
  color: var(--purple);
  padding: 2px 8px;
  border-radius: 4px;
}

.inbox-unread-badge {
  font-size: 11px;
  font-weight: 600;
  background: var(--pink);
  color: #fff;
  padding: 1px 8px;
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
}

.inbox-empty {
  padding: 60px 24px;
  text-align: center;
  color: var(--text-muted);
}

.inbox-empty i {
  font-size: 32px;
  margin-bottom: 12px;
  opacity: 0.6;
}

.inbox-empty-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.inbox-empty-body {
  font-size: 12px;
  line-height: 1.5;
}

.nav-badge.pink {
  background: var(--pink);
}

/* ---- Conversation pane (right) ---- */

.conversation-pane {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-soft);
}

.conversation-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
  text-align: center;
}

.conversation-empty-icon {
  font-size: 56px;
  color: var(--text-muted);
  opacity: 0.5;
  margin-bottom: 18px;
}

.conversation-empty-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
  font-family: 'Inter', sans-serif;
}

.conversation-empty-body {
  font-size: 14px;
  color: var(--text-secondary);
  max-width: 420px;
  line-height: 1.6;
}

.conversation-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.conversation-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 24px;
  background: var(--bg-white);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.conversation-header-avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--purple), var(--blue));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
}

.conversation-header-info {
  flex: 1;
  min-width: 0;
}

.conversation-header-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  font-family: 'Inter', sans-serif;
}

.conversation-header-meta-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 2px;
}

.conversation-header-meta {
  font-size: 12px;
  color: var(--text-secondary);
}

.conversation-header-meta i {
  font-size: 10px;
  margin-right: 4px;
}

.conversation-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

.conversation-empty-inline {
  margin: auto;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
  padding: 40px 20px;
}

.conversation-empty-inline i {
  font-size: 28px;
  margin-bottom: 10px;
  display: block;
  opacity: 0.5;
}

.bubble-row {
  display: flex;
  width: 100%;
}

.bubble-row.outbound {
  justify-content: flex-end;
}

.bubble-row.inbound {
  justify-content: flex-start;
}

.bubble {
  max-width: 70%;
  padding: 11px 15px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.45;
  box-shadow: 0 1px 2px rgba(26, 20, 50, 0.06);
  word-wrap: break-word;
}

.bubble.outbound {
  background: var(--accent-gradient);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.bubble.inbound {
  background: var(--bg-white);
  color: var(--text);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}

.bubble-body {
  white-space: pre-wrap;
}

.bubble-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 11px;
  opacity: 0.8;
}

.bubble.inbound .bubble-meta {
  color: var(--text-muted);
  opacity: 1;
}

.bubble.outbound .bubble-meta {
  color: rgba(255, 255, 255, 0.85);
}

.bubble-time {
  flex: 1;
}

.bubble-status {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  text-transform: capitalize;
}

.bubble-status i {
  font-size: 10px;
}

.bubble-status.failed {
  color: #fca5a5;
  font-weight: 600;
}

/* ---- Composer (bottom) ---- */

.conversation-composer {
  padding: 16px 24px 20px;
  background: var(--bg-white);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.conversation-composer textarea {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-white);
  color: var(--text);
  resize: none;
  min-height: 50px;
  max-height: 150px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.conversation-composer textarea:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(123, 63, 157, 0.1);
}

.conversation-composer textarea:disabled {
  background: var(--bg-soft);
  cursor: not-allowed;
}

.composer-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}

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

/* Mobile */

@media (max-width: 900px) {
  .messages-layout {
    flex-direction: column;
  }
  .inbox-pane {
    width: 100%;
    max-height: 240px;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
}

/* ============================================================================
   Notes & Tasks card (patient detail page)
   ============================================================================ */

.notes-tasks-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 320px;
}

.notes-tasks-card .info-card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.notes-tasks-tabs {
  display: inline-flex;
  background: var(--bg-secondary, #f3f4f6);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}

.nt-tab {
  background: transparent;
  border: 0;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary, #6b7280);
  border-radius: 6px;
  cursor: pointer;
  transition: background 120ms, color 120ms;
  font-family: inherit;
}
.nt-tab:hover { color: var(--text-primary, #1a1a2e); }
.nt-tab.active {
  background: #fff;
  color: var(--primary, #7B3F9D);
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

.notes-tasks-add {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--bg-secondary, #f9fafb);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
}

.nt-type-segmented {
  display: inline-flex;
  gap: 4px;
  background: #fff;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  padding: 3px;
  align-self: flex-start;
}

.nt-type-btn {
  background: transparent;
  border: 0;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary, #6b7280);
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nt-type-btn:hover { color: var(--text-primary, #1a1a2e); }
.nt-type-btn.active {
  background: linear-gradient(135deg, #E91E8C 0%, #7B3F9D 50%, #0047BB 100%);
  color: #fff;
  box-shadow: 0 1px 3px rgba(123, 63, 157, .25);
}

.nt-input {
  width: 100%;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  background: #fff;
  color: var(--text-primary, #1a1a2e);
  transition: border-color 120ms, box-shadow 120ms;
}
.nt-input:focus {
  outline: none;
  border-color: var(--primary, #7B3F9D);
  box-shadow: 0 0 0 3px rgba(123, 63, 157, .12);
}

.nt-add-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.nt-date-input {
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
  font-family: inherit;
  background: #fff;
  color: var(--text-primary, #1a1a2e);
}
.nt-date-input:focus {
  outline: none;
  border-color: var(--primary, #7B3F9D);
  box-shadow: 0 0 0 3px rgba(123, 63, 157, .12);
}

.nt-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary, #1a1a2e);
  cursor: pointer;
  font-family: inherit;
  transition: background 120ms, border-color 120ms;
}
.nt-btn:hover { background: var(--bg-secondary, #f3f4f6); }
.nt-btn-primary {
  background: linear-gradient(135deg, #E91E8C 0%, #7B3F9D 50%, #0047BB 100%);
  border-color: transparent;
  color: #fff;
}
.nt-btn-primary:hover { filter: brightness(1.05); }
.nt-btn-primary:disabled {
  background: var(--bg-secondary, #e5e7eb);
  color: var(--text-muted, #9ca3af);
  cursor: not-allowed;
  filter: none;
}

.notes-tasks-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 360px;
  overflow-y: auto;
  padding-right: 4px;
}

.nt-loading, .nt-empty, .nt-error {
  text-align: center;
  padding: 24px 12px;
  color: var(--text-secondary, #6b7280);
  font-size: 13px;
}
.nt-loading i, .nt-empty i, .nt-error i {
  display: block;
  font-size: 22px;
  margin-bottom: 8px;
  color: var(--text-muted, #9ca3af);
}
.nt-error { color: #b91c1c; }
.nt-error i { color: #b91c1c; }

.nt-item {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  transition: background 120ms, border-color 120ms;
}
.nt-item:hover {
  background: var(--bg-secondary, #f9fafb);
}
.nt-item:hover .nt-item-actions { opacity: 1; }

.nt-item-left {
  display: flex;
  align-items: flex-start;
  padding-top: 2px;
}

.nt-note-icon {
  color: var(--primary, #7B3F9D);
  font-size: 14px;
}

.nt-checkbox {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.nt-checkbox input {
  opacity: 0;
  position: absolute;
  inset: 0;
  margin: 0;
  cursor: pointer;
}
.nt-checkbox span {
  position: absolute;
  inset: 0;
  border: 2px solid var(--border, #d1d5db);
  border-radius: 5px;
  background: #fff;
  transition: background 120ms, border-color 120ms;
}
.nt-checkbox input:checked + span {
  background: linear-gradient(135deg, #E91E8C 0%, #7B3F9D 50%, #0047BB 100%);
  border-color: transparent;
}
.nt-checkbox input:checked + span::after {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free';
  font-weight: 900;
  position: absolute;
  inset: 0;
  color: #fff;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nt-item-main {
  flex: 1;
  min-width: 0;
}

.nt-body {
  font-size: 13px;
  color: var(--text-primary, #1a1a2e);
  line-height: 1.45;
  word-wrap: break-word;
  white-space: pre-wrap;
}
.nt-body-done {
  text-decoration: line-through;
  color: var(--text-muted, #9ca3af);
}

.nt-item-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.nt-meta-time {
  font-size: 11px;
  color: var(--text-muted, #9ca3af);
}

.nt-due {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
}
.nt-due-overdue {
  background: #fee2e2;
  color: #b91c1c;
}
.nt-due-today {
  background: #dbeafe;
  color: #1d4ed8;
}
.nt-due-future {
  background: #f3f4f6;
  color: #4b5563;
}
.nt-due-done {
  background: #d1fae5;
  color: #047857;
}

.nt-item-actions {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  opacity: 0;
  transition: opacity 120ms;
}

.nt-icon-btn {
  background: transparent;
  border: 0;
  color: var(--text-secondary, #6b7280);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 12px;
  font-family: inherit;
}
.nt-icon-btn:hover {
  background: var(--bg-secondary, #f3f4f6);
  color: var(--text-primary, #1a1a2e);
}
.nt-icon-btn-danger:hover {
  background: #fee2e2;
  color: #b91c1c;
}

.nt-item-editing {
  background: var(--bg-secondary, #f9fafb);
  border-color: var(--primary, #7B3F9D);
}
.nt-edit-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nt-edit-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ============================================================================
   Analytics page — stat cards grid
   ============================================================================ */

.analytics-container {
  padding: 24px 32px 48px;
  max-width: 1200px;
}

.analytics-section-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-secondary, #6b7280);
  margin: 0 0 12px;
  padding-top: 8px;
}

.analytics-section-title + .stats-grid {
  margin-bottom: 28px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.stat-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
  min-height: 110px;
  transition: box-shadow 150ms, border-color 150ms;
}
.stat-card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
  border-color: #d1d5db;
}

.stat-card.stat-loading {
  background: var(--bg-secondary, #f9fafb);
}

.stat-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.stat-icon-purple { background: #f3e8ff; color: #7B3F9D; }
.stat-icon-pink   { background: #fce7f3; color: #E91E8C; }
.stat-icon-blue   { background: #dbeafe; color: #0047BB; }
.stat-icon-green  { background: #d1fae5; color: #047857; }
.stat-icon-amber  { background: #fef3c7; color: #b45309; }

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

.stat-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary, #6b7280);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 4px;
}

.stat-value {
  font-size: 36px;
  font-weight: 700;
  color: var(--text-primary, #1a1a2e);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.stat-sub {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 500;
}
.stat-sub.sub-danger { color: #b91c1c; font-weight: 600; }
.stat-sub.sub-warn   { color: #b45309; font-weight: 600; }
.stat-sub.sub-ok     { color: #047857; }
.stat-sub.sub-muted  { color: var(--text-muted, #9ca3af); }

@media (max-width: 900px) {
  .stats-grid { grid-template-columns: 1fr; }
  .analytics-container { padding: 16px 20px 32px; }
}

/* ════════════════════════════════════════════════════════════════════════════════════════════
   QA1-UX-021 · THE DOCTOR SHELL DID NOT COLLAPSE — AND IT BROKE ON A LAPTOP, NOT A PHONE

   Measured: /protocols.html scrollWidth 1212 and /prescriptions.html 1131 against a 1024
   viewport. 1024 is an iPad in landscape and a small laptop — a physician between patients —
   and the page did not merely reflow badly: it pushed the Logout control and the whole
   topbar-right cluster past the viewport edge. /consultations.html was clean at 1024 and the
   ordering wizard was clean at both widths, which is what localises the fault to this shell
   rather than to those pages.

   ── THE CAUSE IS ONE CSS DEFAULT, NOT FOUR PAGE LAYOUTS ──────────────────────────────────────
   `.main` is a flex item (`flex: 1`) whose children include full-width tables. A flex item's
   `min-width` defaults to `auto`, which means IT REFUSES TO SHRINK BELOW ITS CONTENT'S INTRINSIC
   WIDTH. So a table wide enough to want 970px forced `.main` to 970px, plus the 240px sidebar
   that is still present at 1024 — 1210px of demand inside a 1024px window, which is the 1212
   that was measured, to the pixel.

   `min-width: 0` is the fix for the frame. The table then still wants its intrinsic width, so
   the second half is to let it scroll INSIDE ITS OWN CARD rather than dragging the page: the
   card scrolls, the sidebar and topbar stay put, and nothing is clipped.

   Deliberately NOT touched: the ordering wizard, which does not use this shell and was measured
   clean at 1024 and 390. A fix that reached it would be changing something already correct.
   ════════════════════════════════════════════════════════════════════════════════════════════ */

.main {
  /* The whole finding, in one declaration. */
  min-width: 0;
}

.content {
  min-width: 0;
}

/* A wide table scrolls in its own box. `overflow: hidden` on `.card` was what clipped instead of
   scrolled, so it becomes `auto` on the horizontal axis only — a vertical `auto` here would
   fight the page's own scrolling. */
.card {
  overflow-x: auto;
  overflow-y: visible;
}

/* The topbar cluster: the title yields, the controls never do. Logout was the control pushed off
   the edge, and it is the one a doctor on a shared machine most needs to reach. */
.topbar {
  gap: 16px;
}

.topbar-left {
  min-width: 0;
  overflow: hidden;
}

.topbar-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-right {
  flex-shrink: 0;
}

@media (max-width: 1024px) {
  /* Tighter gutters buy back 32px of content width at exactly the width that was failing,
     without changing anything above it. */
  .topbar { padding: 0 20px; }
  .content { padding: 24px 20px; }
}