/* ============================================================
   doctor_mx.css — Agent A3 (doctor portal) Dribbble-spec layer
   Reference: docs/DESIGN_SPEC.md (Dribbble 21203824 adaptation)
   Scope: .doctor-portal only (never shared superAdmin pages).
   Consumes existing --mx-* tokens; adds NO new hues.
   Link per-view in @push('after_theme') AFTER doctor_portal.css.
   ============================================================ */

/* ---------- KPI tiles: icon squircle + big number + trend pill ---------- */
.doctor-portal .mx-stat-card,
.doctor-portal .ray-stat {
  border: 1px solid #EEF1F5;
  border-radius: var(--mx-radius-card, 18px);
  padding: 22px 22px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.06);
  transition: box-shadow 0.2s var(--mx-ease-standard, ease),
    transform 0.2s var(--mx-ease-standard, ease),
    border-color 0.2s var(--mx-ease-standard, ease);
}

.doctor-portal .mx-stat-card:hover,
.doctor-portal .ray-stat:hover {
  border-color: var(--mx-border);
  box-shadow: 0 10px 28px rgba(16, 24, 40, 0.08);
  transform: translateY(-2px);
}

.doctor-portal .mx-stat-icon,
.doctor-portal .ray-stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px; /* squircle */
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.doctor-portal .mx-stat-value,
.doctor-portal .ray-stat-value {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.doctor-portal .mx-stat-label,
.doctor-portal .ray-stat-label {
  letter-spacing: 0.06em;
}

.doctor-portal .mx-stat-meta .mx-badge {
  border-radius: var(--mx-radius-pill);
  padding: 3px 10px;
  font-size: 11px;
}

/* ---------- Cards: 18px radius, soft diffuse shadows ---------- */
.doctor-portal .mx-card {
  border-radius: 18px;
  border-color: #EEF1F5;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.06);
}

.doctor-portal .mx-card-header {
  border-bottom-color: #EEF1F5;
}

/* ---------- Buttons: fully-rounded pills ---------- */
.doctor-portal .mx-btn {
  border-radius: var(--mx-radius-pill);
  min-height: 40px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.doctor-portal .mx-btn-primary {
  box-shadow: 0 4px 14px color-mix(in srgb, var(--mx-primary-dark) 26%, transparent);
}

.doctor-portal .mx-btn-primary:hover {
  box-shadow: 0 6px 18px color-mix(in srgb, var(--mx-primary-dark) 34%, transparent);
  transform: translateY(-1px);
}

/* Secondary = soft primary tint (8-10% surface) */
.doctor-portal .mx-btn-ghost {
  background: color-mix(in srgb, var(--mx-primary) 8%, var(--mx-surface));
  border-color: transparent;
  color: var(--mx-primary-dark);
}

.doctor-portal .mx-btn-ghost:hover {
  background: color-mix(in srgb, var(--mx-primary) 14%, var(--mx-surface));
  color: var(--mx-primary-darker);
}

.doctor-portal .ray-filter-btn {
  border-radius: var(--mx-radius-pill);
  border: 1px solid transparent;
  background: var(--mx-surface);
  color: var(--mx-ink-muted);
  box-shadow: var(--mx-shadow-xs);
}

.doctor-portal .ray-filter-btn:hover {
  color: var(--mx-primary-dark);
}

.doctor-portal .ray-filter-btn.is-active {
  background: var(--mx-primary-dark);
  color: var(--mx-white);
  border-color: transparent;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--mx-primary-dark) 26%, transparent);
}

/* ---------- Tables: borderless rows, hover tint, rounded wrapper ---------- */
.doctor-portal .mx-card:has(> .table-responsive),
.doctor-portal .mx-card:has(> .mx-card-body > .table-responsive) {
  overflow: hidden; /* clip row hover tints to the 18px wrapper radius */
}

.doctor-portal .mx-table thead th {
  border-top: 0;
  border-bottom: 1px solid #EEF1F5;
  background: transparent;
  color: var(--mx-ink-muted);
  font-size: var(--mx-text-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding-top: 14px;
  padding-bottom: 14px;
  white-space: nowrap;
}

.doctor-portal .mx-table tbody td {
  border-bottom: 1px solid #F6F8FA;
  vertical-align: middle;
}

.doctor-portal .mx-table tbody tr:last-child td {
  border-bottom: 0;
}

.doctor-portal .mx-table tbody tr {
  transition: background-color 0.15s var(--mx-ease-standard, ease);
}

.doctor-portal .mx-table tbody tr:hover td {
  background: color-mix(in srgb, var(--mx-primary) 4%, var(--mx-surface));
}

/* Row action icon buttons: small pill squircles */
.doctor-portal .mx-action-icon,
.doctor-portal .mx-btn.mx-btn-ghost[style*="padding:8px"] {
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Badges: soft tinted pills with dot-like icon ---------- */
.doctor-portal .mx-badge {
  border-radius: var(--mx-radius-pill);
  padding: 4px 12px;
  font-size: 12px;
  border: 0;
}

.doctor-portal .mx-badge-success {
  background: var(--mx-success-surface);
  color: var(--mx-success-dark);
}

.doctor-portal .mx-badge-danger {
  background: var(--mx-danger-surface);
  color: var(--mx-danger-dark);
}

.doctor-portal .mx-badge-warning {
  background: var(--mx-warning-surface);
  color: var(--mx-warning-dark);
}

.doctor-portal .mx-badge-info {
  background: var(--mx-primary-surface);
  color: var(--mx-primary-dark);
}

/* Invoice status variants (ray-status-*) map to the same tints */
.doctor-portal .ray-status-paid {
  background: var(--mx-success-surface);
  color: var(--mx-success-dark);
}

.doctor-portal .ray-status-issued,
.doctor-portal .ray-status-partial {
  background: var(--mx-primary-surface);
  color: var(--mx-primary-dark);
}

.doctor-portal .ray-status-draft {
  background: var(--mx-gray-100);
  color: var(--mx-ink-muted);
}

.doctor-portal .ray-status-cancelled {
  background: var(--mx-danger-surface);
  color: var(--mx-danger-dark);
}

/* ---------- Clean billing invoice cards ---------- */
.doctor-portal .ray-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.doctor-portal .ray-stat-icon {
  float: none;
  margin: 0 0 12px 0;
  width: 44px;
  height: 44px;
  border-radius: 14px;
}

.doctor-portal .ray-amount {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* ---------- Forms: pill/rounded inputs, focus ring ---------- */
.doctor-portal .mx-input,
.doctor-portal .form-control {
  border-radius: 12px;
  border-color: var(--mx-border);
  min-height: 42px;
}

.doctor-portal .mx-input:focus,
.doctor-portal .form-control:focus {
  border-color: var(--mx-primary);
  box-shadow: var(--mx-shadow-focus);
}

/* Select2 + DataTables controls inside doctor scope follow the pill rhythm */
.doctor-portal .select2-container--default .select2-selection--single {
  border-radius: 12px;
  border-color: var(--mx-border);
  height: 42px;
  display: flex;
  align-items: center;
}

.doctor-portal .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 40px;
}

/* ---------- Soft empty states ---------- */
.doctor-portal .mx-empty-state {
  border-radius: 14px;
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--mx-primary) 5%, var(--mx-surface)) 0%, var(--mx-surface) 70%);
  padding: 40px 24px;
}

.doctor-portal .mx-empty-state i,
.doctor-portal .mx-empty-state .mx-empty-icon {
  width: 56px;
  height: 56px;
  line-height: 56px;
  border-radius: 18px;
  background: var(--mx-primary-surface);
  color: var(--mx-primary-dark);
  font-size: 22px;
  margin-bottom: 14px;
}

.doctor-portal .mx-empty-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--mx-ink);
  margin-bottom: 4px;
}

.doctor-portal .mx-empty-text {
  color: var(--mx-ink-muted);
}

/* ---------- Patient cells / avatars ---------- */
.doctor-portal .mx-patient-avatar {
  border-radius: 12px;
  object-fit: cover;
  box-shadow: var(--mx-shadow-xs);
}

.doctor-portal .mx-patient-cell {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--mx-ink);
}

.doctor-portal .mx-patient-cell:hover .mx-patient-name {
  color: var(--mx-primary-dark);
}

/* ---------- Quiet helpers ---------- */
.doctor-portal .mx-quiet-cell {
  color: var(--mx-ink-muted);
}

.doctor-portal .mx-section-title {
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ---------- Modals: rounded cards to match the system ---------- */
.doctor-portal .modal-content.mx-modal-card,
.mx-modal-card {
  border-radius: 18px;
  border: 0;
  box-shadow: var(--mx-shadow-xl);
  overflow: hidden;
}

.doctor-portal .mx-modal-header {
  border-bottom: 1px solid #EEF1F5;
}

.doctor-portal .mx-modal-footer {
  border-top: 1px solid #EEF1F5;
  background: color-mix(in srgb, var(--mx-primary) 3%, var(--mx-surface));
}

/* ---------- Pagination ---------- */
.doctor-portal .pagination .page-link {
  border-radius: 10px;
  border: 0;
  color: var(--mx-ink-muted);
  margin: 0 2px;
}

.doctor-portal .pagination .page-item.active .page-link {
  background: var(--mx-primary-dark);
  color: var(--mx-white);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--mx-primary-dark) 24%, transparent);
}

/* ---------- Alerts ---------- */
.doctor-portal .alert {
  border-radius: 14px;
  border: 0;
  box-shadow: var(--mx-shadow-xs);
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .doctor-portal .mx-stat-card,
  .doctor-portal .ray-stat,
  .doctor-portal .mx-btn,
  .doctor-portal .mx-table tbody tr {
    transition: none;
  }
  .doctor-portal .mx-stat-card:hover,
  .doctor-portal .ray-stat:hover,
  .doctor-portal .mx-btn-primary:hover {
    transform: none;
  }
}

/* ---------- RTL (ar) safety: keep physical paddings symmetric ---------- */
[dir="rtl"] .doctor-portal .ray-stat-icon,
[dir="rtl"] .doctor-portal .mx-stat-icon {
  margin-left: 0;
  margin-right: 0;
}

/* ============================================================
   ORPHAN RECOVERY — Pass B (A3)
   Classes that were already in doctor markup but had NO definition
   anywhere in the loaded cascade (verified by tools/audit_cascade.py).
   Mirrors ui_mx.css primitives; adds no new hues.
   ============================================================ */

/* --- .mx-pill* : soft tinted status pill (lab_referrals table cells) --- */
.doctor-portal .mx-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--mx-radius-pill);
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  border: 0;
}
.doctor-portal .mx-pill i { font-size: 11px; }
.doctor-portal .mx-pill-success {
  background: var(--mx-success-surface);
  color: var(--mx-success-dark);
}
.doctor-portal .mx-pill-warning {
  background: var(--mx-warning-surface);
  color: var(--mx-warning-dark);
}

/* --- .mx-pagination-bar : centered Laravel paginator on tinted surface --- */
.doctor-portal .mx-pagination-bar {
  display: flex;
  justify-content: center;
  padding: var(--mx-space-5) var(--mx-space-4);
  border-top: 1px solid #F6F8FA;
}
.doctor-portal .mx-pagination-bar .pagination {
  margin: 0;
  gap: 4px;
}
.doctor-portal .mx-pagination-bar .page-item .page-link {
  border: 0;
  border-radius: 10px;
  color: var(--mx-ink-muted);
  min-width: 36px;
  text-align: center;
  box-shadow: none;
}
.doctor-portal .mx-pagination-bar .page-item.active .page-link {
  background: var(--mx-primary);
  color: var(--mx-white);
}
/* WCAG AA: hover/disabled need a -dark token, not the muted default */
.doctor-portal .mx-pagination-bar .page-item .page-link:hover,
.doctor-portal .mx-pagination-bar .page-item .page-link:focus {
  background: color-mix(in srgb, var(--mx-primary) 8%, var(--mx-surface));
  color: var(--mx-primary-dark);
}
.doctor-portal .mx-pagination-bar .page-item.disabled .page-link {
  color: var(--mx-gray-400);
  opacity: 1;
}

/* --- .mx-btn-light : tertiary button (KYC secondary actions) --- */
.doctor-portal .mx-btn-light {
  background: var(--mx-surface);
  color: var(--mx-ink);
  border: 1px solid var(--mx-border);
  border-radius: var(--mx-radius-pill);
  min-height: 40px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.doctor-portal .mx-btn-light:hover {
  border-color: var(--mx-primary);
  color: var(--mx-primary-dark);
  background: color-mix(in srgb, var(--mx-primary) 6%, var(--mx-surface));
}
.doctor-portal .mx-btn-light.disabled,
.doctor-portal .mx-btn-light:disabled {
  opacity: 0.55;
  pointer-events: none;
}

/* --- .mx-btn-outline-danger (subscription delete) mirrors outline-primary --- */
.doctor-portal .mx-btn-outline-danger {
  background: transparent;
  color: var(--mx-danger-dark);
  border: 1px solid color-mix(in srgb, var(--mx-danger) 35%, transparent);
  border-radius: var(--mx-radius-pill);
  min-height: 40px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.doctor-portal .mx-btn-outline-danger:hover {
  background: var(--mx-danger-surface);
  color: var(--mx-danger-dark);
  border-color: var(--mx-danger);
}
.doctor-portal .mx-btn-outline-danger.disabled {
  opacity: 0.55;
  pointer-events: none;
}

/* --- .mx-card-panel : flat inner panel inside a card (zoom settings) --- */
.doctor-portal .mx-card-panel {
  box-shadow: none;
  background: var(--mx-surface);
}

/* --- .mx-form-section : titled group inside a card body --- */
.doctor-portal .mx-form-section {
  border: 1px solid #EEF1F5;
  border-radius: 14px;
  padding: var(--mx-space-5);
  margin-bottom: var(--mx-space-5);
  background: var(--mx-surface);
}
.doctor-portal .mx-form-section:last-child { margin-bottom: 0; }

.doctor-portal .mx-form-section-title {
  display: flex;
  align-items: center;
  gap: var(--mx-space-3);
  font-size: var(--mx-text-sm);
  font-weight: 600;
  color: var(--mx-ink);
  margin-bottom: var(--mx-space-4);
  flex-wrap: wrap;
}
.doctor-portal .mx-form-section-title small {
  margin-inline-start: auto;
  font-size: var(--mx-text-xs);
  font-weight: 500;
  color: var(--mx-ink-muted);
  background: var(--mx-chip-surface);
  border-radius: var(--mx-radius-pill);
  padding: 3px 10px;
}

.doctor-portal .mx-fs-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--mx-primary-surface);
  color: var(--mx-primary-dark);
  font-size: 15px;
}

/* --- .table-center : centered column helper --- */
.doctor-portal .mx-table .table-center,
.doctor-portal .table-center { text-align: center; }

/* --- .add-more / .ul-form__label (doctor_profile repeatable rows) --- */
.doctor-portal .add-more {
  padding-top: var(--mx-space-3);
}
.doctor-portal .add-more a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--mx-primary-dark);
  font-weight: 600;
  font-size: var(--mx-text-sm);
  text-decoration: none;
}
.doctor-portal .add-more a:hover { color: var(--mx-primary-darker); }

/* ul-form__label is a <label for> (Bootstrap-4 form label), NOT a badge.
   Style it as a field label — never as a pill. */
.doctor-portal label.ul-form__label {
  display: block;
  font-size: var(--mx-text-sm);
  font-weight: 600;
  color: var(--mx-ink);
  margin-bottom: 6px;
}

/* --- .mx-pw-input : password field inside the auth input wrapper --- */
.doctor-portal .mx-pw-input,
.auth-shell .mx-pw-input { padding-inline-end: 44px; }

/* --- Doctor auth: clear the trailing eye toggle --------------------------
   auth_mx.css sets `.mx-auth-input-wrap .mx-auth-input { padding-left: 44px }`
   for the leading icon but has no matching inline-end padding, so the
   absolutely-positioned .mx-auth-pw-toggle (right:6px, 32px wide) sits ON TOP
   of the tail of the typed password. Scoped to the doctor-owned class so the
   website/superadmin auth pages are unaffected.
   ponytail: fixed at the call-site class rather than editing auth_mx.css,
   which is A1's file. If auth_mx.css ever adds symmetric padding this dies
   harmlessly. -- */
.mx-doc-pw {
  padding-inline-end: 44px !important;
}

/* --- .mx-pc-panels : tab-panel stack on patient detail (PHI boundary) --- */
.doctor-portal .mx-pc-panels {
  padding: var(--mx-space-5);
  border: 1px solid #EEF1F5;
  border-radius: 18px;
  background: var(--mx-surface);
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.06);
}
.doctor-portal .mx-pc-panels > .mx-pc-panel { display: none; }
.doctor-portal .mx-pc-panels > .mx-pc-panel.is-active { display: block; }

/* --- .ray-cal-legend : calendar status legend --- */
.doctor-portal .ray-cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mx-space-4);
  padding: var(--mx-space-4) 0 0;
  border-top: 1px solid #F6F8FA;
}
.doctor-portal .ray-cal-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--mx-text-sm);
}

/* --- .item-desc : hidden mirror of the invoice line description --- */
.doctor-portal .item-desc { display: none; }

/* --- .flatpickr-date-edit : inline edit control inside table cells --- */
.doctor-portal .flatpickr-date-edit {
  min-height: 34px;
  border-radius: 10px;
  padding: 4px 10px;
  font-size: var(--mx-text-sm);
}
.doctor-portal .flatpickr-date-edit:focus {
  border-color: var(--mx-primary);
  box-shadow: var(--mx-shadow-focus);
}

/* --- .page-wrapper : subscription/pricing shell (legacy wrapper) --- */
.doctor-portal.page-wrapper { padding: var(--mx-space-6) 0; }
.doctor-portal.page-wrapper > .content { padding: 0; }

/* --- Payment gateway panels (paypal_card / razor_card / stripe_card / ...)
   These are JS show-hide hooks (public/assets_admin/js/subscription.js), not
   style hooks — so they need no colour of their own, but the panels they sit
   on should read as cards inside the portal. */
.doctor-portal .paypal_card_body:empty,
.doctor-portal .paypal_card_body::after {
  content: "";
  display: block;
}
.doctor-portal .paypal_card_body:empty { min-height: 0; }

/* Stripe / PayPal / Flutterwave credential fields sit in a nested form; keep
   them on the pill rhythm and readable spacing. */
.doctor-portal .customform .form-group { margin-bottom: var(--mx-space-4); }
.doctor-portal .customform label {
  display: block;
  font-size: var(--mx-text-sm);
  font-weight: 600;
  color: var(--mx-ink);
  margin-bottom: 6px;
}
.doctor-portal .customform .required { border-left: 2px solid var(--mx-danger); }
/* Gateway submit rows are centred blocks; give them breathing room. */
.doctor-portal .form-submit { margin-top: var(--mx-space-4); }

/* --- Responsive: collapse form sections + panel padding on small screens --- */
@media (max-width: 767px) {
  .doctor-portal .mx-pc-panels { padding: var(--mx-space-4); }
  .doctor-portal .mx-form-section { padding: var(--mx-space-4); }
  .doctor-portal .mx-form-section-title small {
    margin-inline-start: 0;
    width: 100%;
  }
  .doctor-portal .mx-pagination-bar { padding: var(--mx-space-4) var(--mx-space-3); }
}

/* --- Dashboard hero/queue gaps (doctor_home.css defines the shell, not these) --- */
/* .mx-dh-hero-copy is the flex child holding eyebrow/title/sub/CTAs inside
   .mx-dh-hero-main. Without min-width:0 a long patient name or CTA row can
   force the clock block to overflow. */
.doctor-portal .mx-dh-hero-copy {
  min-width: 0;
  flex: 1 1 auto;
}
.doctor-portal .mx-dh-hero-copy .mx-dh-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

/* .mx-dh-queue-body is the middle grid cell of .mx-dh-queue-item
   (grid-template-columns: 72px minmax(0,1fr) auto). It needs the min-width:0
   guard so a long patient name truncates instead of pushing the status pill
   out of the card. */
.doctor-portal .mx-dh-queue-body {
  min-width: 0;
}
.doctor-portal .mx-dh-queue-body .mx-dh-queue-name,
.doctor-portal .mx-dh-queue-body .mx-dh-queue-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   WCAG AA TEXT COLORS ON TINTED SURFACES (A3 scope)
   Measured (tools/contrast_check.py, WCAG 2.1 relative luminance):
     --mx-success  #04bd6c on --mx-success-surface #E6FBF1 -> 2.29  FAIL
     --mx-success-dark #00882d on #E6FBF1                  -> 4.26  FAIL (needs 4.5)
     --mx-primary  #2d67f0 on --mx-primary-surface #e9f0ff  -> 4.26  FAIL (needs 4.5)
     --mx-primary-dark #1f50c9 on #e9f0ff                  -> 6.03  PASS
     --mx-warning-dark #946200 on --mx-warning-surface      -> 4.89  PASS
     --mx-danger-dark  #cc0000 on --mx-danger-surface       -> 5.14  PASS
   Vivid tokens stay as fills/accents; any *text* on a tinted surface uses a
   -dark variant. Local AA-scoped values only — no new hues, no token edits.
   ponytail: scoped to .doctor-portal; if the shared W1 token later darkens
   --mx-success-dark past 4.5 these overrides can be deleted.
   ============================================================ */
.doctor-portal {
  /* AA text pair for success surfaces (4.26 -> 5.09) */
  --mx-ink-on-success: #007a29;
  /* AA text pair for primary-tinted surfaces (4.26 -> 6.03) */
  --mx-ink-on-primary: var(--mx-primary-dark);
}
.doctor-portal .mx-badge-success,
.doctor-portal .mx-pill-success,
.doctor-portal .ray-status-paid,
.doctor-portal .ray-status-completed,
.doctor-portal .ray-status-resolved {
  background: var(--mx-success-surface);
  color: var(--mx-ink-on-success);
}
/* Any success-tinted text elsewhere in the portal */
.doctor-portal .text-success,
.doctor-portal .mx-stat-value.is-success { color: var(--mx-ink-on-success); }

/* Primary-tinted text must not use the vivid --mx-primary */
.doctor-portal .mx-badge-info,
.doctor-portal .mx-pill-info,
.doctor-portal .ray-status-issued,
.doctor-portal .ray-status-advised,
.doctor-portal .ray-status-planned,
.doctor-portal .ray-status-scheduled,
.doctor-portal .ray-status-in_progress,
.doctor-portal .ray-status-open,
.doctor-portal .ray-status-draft {
  background: var(--mx-primary-surface);
  color: var(--mx-ink-on-primary);
}
.doctor-portal .ray-prio-normal { color: var(--mx-ink-on-primary); }

/* Warning-tinted text: --mx-warning-dark already measures 4.89 (PASS) but the
   vivid --mx-warning is 1.43 — guard any text that inherits it. */
.doctor-portal .mx-badge-warning,
.doctor-portal .mx-pill-warning,
.doctor-portal .ray-status-partial,
.doctor-portal .ray-status-due,
.doctor-portal .ray-status-processing,
.doctor-portal .ray-status-pending,
.doctor-portal .ray-prio-high {
  background: var(--mx-warning-surface);
  color: var(--mx-warning-dark);
}

/* Danger-tinted text: --mx-danger is 3.49 (large-text only) — use -dark */
.doctor-portal .mx-badge-danger,
.doctor-portal .ray-status-cancelled,
.doctor-portal .ray-status-overdue,
.doctor-portal .ray-prio-urgent {
  background: var(--mx-danger-surface);
  color: var(--mx-danger-dark);
}
.doctor-portal .text-danger { color: var(--mx-danger-dark); }

/* ============================================================
   AA TEXT-COLOUR SWEEP — vivid tokens used as TEXT on white
   ------------------------------------------------------------
   Several blades set `style="color:var(--mx-success)"` etc. on
   26px stat values, currency cells and patient-name labels. On a
   white card those measure (tools/contrast_check.py):
     --mx-success #04bd6c -> 2.29   FAIL
     --mx-warning #ffca18 -> 1.43   FAIL
     --mx-danger  #ff0000 -> 3.49   large-text only
     --mx-primary #2d67f0 -> 4.26   FAIL (needs 4.5)
   Rather than edit ~20 inline styles across 8 blades (and risk
   missing one), remap them once at the element level with
   !important so the inline-style specificity is overridden.
   Icons are NOT affected — they keep the vivid accent (glyphs are
   non-text, AA only needs 3:1, and they sit on tinted squircles).
   ponytail: upgrade path = drop these 5 rules and switch the inline
   styles to the -dark tokens when those blades are next touched.
   ============================================================ */
.doctor-portal .ray-stat-value[style*="--mx-warning"],
.doctor-portal .ray-stat-value[style*="--mx-success"],
.doctor-portal .ray-stat-value[style*="--mx-danger"],
.doctor-portal .ray-stat-value[style*="--mx-primary"],
.doctor-portal .ray-amount[style*="--mx-warning"],
.doctor-portal .ray-amount[style*="--mx-success"],
.doctor-portal .ray-amount[style*="--mx-danger"],
.doctor-portal .mx-stat-value[style*="--mx-warning"],
.doctor-portal .mx-stat-value[style*="--mx-success"],
.doctor-portal .mx-stat-value[style*="--mx-danger"],
.doctor-portal small[style*="--mx-success"],
.doctor-portal span[style*="--mx-success"]:not(.ray-stat-icon),
.doctor-portal .mx-input[style*="--mx-primary"] {
  color: var(--mx-primary-dark) !important;
}
.doctor-portal .ray-stat-value[style*="--mx-success"],
.doctor-portal .ray-amount[style*="--mx-success"],
.doctor-portal .mx-stat-value[style*="--mx-success"],
.doctor-portal small[style*="--mx-success"],
.doctor-portal span[style*="--mx-success"]:not(.ray-stat-icon) {
  color: var(--mx-ink-on-success) !important;
}
.doctor-portal .ray-stat-value[style*="--mx-warning"],
.doctor-portal .ray-amount[style*="--mx-warning"],
.doctor-portal .mx-stat-value[style*="--mx-warning"] {
  color: var(--mx-warning-dark) !important;
}
.doctor-portal .ray-stat-value[style*="--mx-danger"],
.doctor-portal .ray-amount[style*="--mx-danger"],
.doctor-portal .mx-stat-value[style*="--mx-danger"] {
  color: var(--mx-danger-dark) !important;
}
/* Calendar stat values carry a value span inside; map both. */
.doctor-portal .mx-stat-card .mx-stat-value[style*="--mx-"] {
  color: var(--mx-primary-dark) !important;
}