/* ============================================================
   ui_mx.css — MXPracto Shared Component Layer (Wave 1, 2026-09)
   ------------------------------------------------------------
   The canonical component contract for ALL surfaces.
   Load order: tokens.css  ->  ui_mx.css  ->  surface css.
   Rules:
   - Colors ONLY via --mx-* tokens (color-mix allowed, no new hex)
   - Micro-interactions 120-200ms
   - Elevation ladder L1 cards / L2 dropdowns / L3 modals
   - Class names already used by views (mx-btn, mx-input, mx-card,
     mx-badge, mx-table, mx-empty-state, mx-modal-card) are
   REFINED here, never renamed. Wave-2 workers adopt these.
   ============================================================ */

/* ===== 1. BUTTONS ===== */
.mx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--mx-font);
  font-size: var(--mx-text-base);
  font-weight: var(--mx-font-weight-semibold);
  padding: 10px 20px;
  min-height: 44px;
  border-radius: var(--mx-radius-btn);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.4;
  white-space: nowrap;
  transition: background-color var(--mx-duration-base) var(--mx-ease-standard),
              border-color var(--mx-duration-base) var(--mx-ease-standard),
              color var(--mx-duration-base) var(--mx-ease-standard),
              box-shadow var(--mx-duration-base) var(--mx-ease-standard),
              transform var(--mx-duration-fast) var(--mx-ease-standard);
}
.mx-btn i { font-size: 0.95em; line-height: 1; }
.mx-btn:active { transform: translateY(0) scale(0.97); }
.mx-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--mx-surface), 0 0 0 4px var(--mx-primary);
}

/* Variants */
.mx-btn-primary { background: var(--mx-primary); color: var(--mx-white); }
.mx-btn-primary:hover { background: var(--mx-primary-dark); color: var(--mx-white); box-shadow: var(--mx-shadow-primary); }
.mx-btn-secondary { background: var(--mx-surface); color: var(--mx-ink); border-color: var(--mx-border); }
.mx-btn-secondary:hover { background: var(--mx-surface-hover); border-color: var(--mx-gray-300); color: var(--mx-ink-deep); }
.mx-btn-ghost { background: transparent; color: var(--mx-primary-darker); }
.mx-btn-ghost:hover { background: var(--mx-primary-surface); color: var(--mx-primary-darker); }
.mx-btn-danger { background: var(--mx-danger-dark); color: var(--mx-white); }
.mx-btn-danger:hover { background: color-mix(in srgb, var(--mx-danger-dark) 85%, black); color: var(--mx-white); box-shadow: 0 4px 12px color-mix(in srgb, var(--mx-danger) 25%, transparent); }
.mx-btn-success { background: var(--mx-success-dark); color: var(--mx-white); }
.mx-btn-success:hover { background: color-mix(in srgb, var(--mx-success-dark) 85%, black); color: var(--mx-white); }
.mx-btn-info { background: var(--mx-primary-surface); color: var(--mx-primary-darker); }
.mx-btn-info:hover { background: color-mix(in srgb, var(--mx-primary-surface) 70%, var(--mx-primary) 30%); }
.mx-btn-brand { background: var(--mx-brand); color: var(--mx-white); }
.mx-btn-brand:hover { background: var(--mx-brand-dark); color: var(--mx-white); box-shadow: var(--mx-shadow-brand); }

/* Soft variants */
.mx-btn-soft-primary { background: var(--mx-primary-surface); color: var(--mx-primary-darker); }
.mx-btn-soft-primary:hover { background: color-mix(in srgb, var(--mx-primary-surface) 65%, var(--mx-primary) 35%); }
.mx-btn-soft-success { background: var(--mx-success-surface); color: var(--mx-success-dark); }
.mx-btn-soft-success:hover { background: color-mix(in srgb, var(--mx-success-surface) 70%, var(--mx-success) 30%); }
.mx-btn-soft-danger { background: var(--mx-danger-surface); color: var(--mx-danger-dark); }
.mx-btn-soft-danger:hover { background: color-mix(in srgb, var(--mx-danger-surface) 70%, var(--mx-danger) 30%); }

/* Sizes */
.mx-btn-sm { min-height: 32px; padding: 6px 12px; font-size: var(--mx-text-sm); border-radius: var(--mx-radius-sm); }
.mx-btn-lg { min-height: 48px; padding: 12px 26px; font-size: var(--mx-text-lg); }
.mx-btn-block { display: flex; width: 100%; }

/* Icon button */
.mx-btn-icon {
  min-width: 40px; width: 40px; height: 40px; padding: 0;
  border-radius: var(--mx-radius-btn);
  background: var(--mx-surface); border-color: var(--mx-border); color: var(--mx-ink-soft);
}
.mx-btn-icon:hover { background: var(--mx-surface-hover); color: var(--mx-ink-deep); }
.mx-btn-icon-danger:hover { background: var(--mx-danger-surface); border-color: color-mix(in srgb, var(--mx-danger) 40%, transparent); color: var(--mx-danger-dark); }

/* Loading state — add .is-loading to any mx-btn; keeps width, overlays spinner */
.mx-btn.is-loading { color: transparent !important; pointer-events: none; position: relative; }
.mx-btn.is-loading::after {
  content: "";
  position: absolute; inset: 0; margin: auto;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, currentColor 100%, transparent);
  border-top-color: transparent;
  animation: mx-spin 700ms linear infinite;
}
.mx-btn-primary.is-loading::after,
.mx-btn-danger.is-loading::after,
.mx-btn-success.is-loading::after,
.mx-btn-brand.is-loading::after {
  border-color: var(--mx-white);
  border-top-color: transparent;
}
@keyframes mx-spin { to { transform: rotate(360deg); } }

/* Disabled */
.mx-btn:disabled, .mx-btn[disabled], .mx-btn.is-disabled {
  opacity: 0.55; cursor: not-allowed;
  transform: none !important; box-shadow: none !important;
  pointer-events: none;
}

/* ===== 1b. DOCCURE V2.1 BUTTON ANATOMY (CORE pass, 2026-09-06) =====
   Reference-measured (live doccure template): primary pill 44px radius,
   16px / 500-600 weight, gradient 90deg #316dff->#02bfff @70%,
   padding 10px 20px, min-height 44px. Secondary in the reference is a
   solid INK pill (btn-dark rgb(15,23,42), 1px self border); our
   secondary keeps the established outline-pill contract from DESIGN.md
   and adds .mx-btn-ink as the reference-faithful variant.
   Ghost = transparent + primary-darker text (DESIGN.md contract). */
.mx-btn { font-size: var(--mx-btn-font-size); font-weight: var(--mx-btn-font-weight); }
.mx-btn-primary {
  background: var(--mx-primary);
  color: var(--mx-white);
  box-shadow: var(--mx-shadow-cta);
}
.mx-btn-primary:hover {
  background: var(--mx-primary-dark);
  color: var(--mx-white);
  box-shadow: var(--mx-shadow-cta-hover);
}
/* Secondary: outline pill (DESIGN.md: transparent bg, 1px --mx-border, ink text) */
.mx-btn-secondary {
  background: var(--mx-surface);
  color: var(--mx-ink);
  border: 1px solid var(--mx-border);
}
.mx-btn-secondary:hover {
  background: var(--mx-surface-hover);
  border-color: var(--mx-gray-300);
  color: var(--mx-ink-deep);
}
/* Ink pill: reference-faithful solid btn-dark variant (rgb(15,23,42), 1px self-border) */
.mx-btn-ink {
  background: var(--mx-ink-btn);
  color: var(--mx-white);
  border: 1px solid var(--mx-ink-btn);
}
.mx-btn-ink:hover {
  background: var(--mx-ink-btn-hover);
  color: var(--mx-white);
  border-color: var(--mx-ink-btn-hover);
}
/* Ghost: transparent + primary-darker text (DESIGN.md) */
.mx-btn-ghost {
  background: transparent;
  color: var(--mx-primary-darker);
  border: 1px solid transparent;
}
.mx-btn-ghost:hover {
  background: var(--mx-primary-surface);
  color: var(--mx-primary-darker);
}
/* Focus-visible ring for the whole family (ref suppresses it; DESIGN.md
   contract wins: 2px surface gap + 4px brand ring, AA against fills) */
.mx-btn:focus-visible {
  outline: none;
  box-shadow: var(--mx-btn-focus-ring);
}
/* Sizes stay pill at every step (a pill never becomes a rounded-rect);
   sm = 32px hit floor, lg = 48px. 13px floor respected. */
.mx-btn-sm { min-height: 32px; padding: 6px 14px; font-size: var(--mx-text-sm); border-radius: var(--mx-radius-btn); }
.mx-btn-lg { min-height: 48px; padding: 12px 26px; font-size: var(--mx-text-lg); }
/* Disabled: gradient/ink variants must not keep colored shadows; grey out fill */
.mx-btn-primary:disabled, .mx-btn-primary[disabled],
.mx-btn-ink:disabled, .mx-btn-ink[disabled] {
  background: var(--mx-gray-300);
  color: var(--mx-white);
  box-shadow: none;
}

/* ===== 2b. V2.1 FORM INPUT ANATOMY =====
   Ref-measured: radius 5px, padding 7px 15px, 1px solid #E2E8F0 (=--mx-border),
   height 38px, font 14px/400. We keep 40px hit-floor min-height (W3 contract)
   and --mx-radius-input 6px (close to ref 5px, established token). */
.mx-input, .mx-select, .mx-textarea {
  padding: var(--mx-input-pad-y) var(--mx-input-pad-x);
  min-height: var(--mx-input-height);
}
/* Chips: interactive filter tokens (distinct from status badges — no dot) */
.mx-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mx-font);
  font-size: var(--mx-text-sm);
  font-weight: var(--mx-font-weight-medium);
  color: var(--mx-primary-darker);
  background: var(--mx-chip-surface);
  border: 1px solid transparent;
  border-radius: var(--mx-radius-pill);
  padding: 6px 14px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.mx-chip:hover { background: var(--mx-chip-surface-hover); color: var(--mx-primary-darker); }
.mx-chip.is-active, .mx-chip.active {
  background: var(--mx-primary-surface);
  border-color: var(--mx-primary-light);
  color: var(--mx-primary-darker);
}

/* ===== 4b. V2.1 TABS — underline anatomy (DESIGN.md contract) =====
   Active = primary-darker text + primary underline; inactive = ink-muted.
   Works as ul.mx-tabs > li > a.mx-tab or bare a.mx-tab. */
.mx-tabs {
  display: flex;
  align-items: stretch;
  gap: var(--mx-space-2);
  border-bottom: 1px solid var(--mx-border-light);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.mx-tab {
  display: inline-flex;
  align-items: center;
  padding: 12px 16px;
  font-family: var(--mx-font);
  font-size: var(--mx-text-base);
  font-weight: var(--mx-font-weight-medium);
  color: var(--mx-ink-muted);
  background: transparent;
  border: none;
  border-bottom: var(--mx-tab-underline) solid transparent;
  margin-bottom: -1px;               /* sit on the ul rule */
  cursor: pointer;
  text-decoration: none;
}
.mx-tab:hover { color: var(--mx-ink); }
.mx-tab.active, .mx-tab[aria-selected="true"] {
  color: var(--mx-primary-darker);
  border-bottom-color: var(--mx-primary);
  font-weight: var(--mx-font-weight-semibold);
}

/* ===== 5b. V2.1 PAGINATION — pill pager, AA pairs =====
   Wraps Laravel paginator output (.pagination > .page-item > .page-link
   / a / span). Surfaces that don't load listing_mx.css (auth + admin
   shells) get the anatomy here instead. */
.mx-pagination {
  display: flex;
  justify-content: center;
  gap: var(--mx-space-1);
  margin: var(--mx-space-6) 0 0;
}
.mx-pagination .pagination { margin: 0; }
.mx-pagination .page-link,
.mx-pagination a,
.mx-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 6px 12px;
  border-radius: var(--mx-radius-btn);
  border: 1px solid var(--mx-border);
  background: var(--mx-pager-bg);
  color: var(--mx-ink);
  font-size: var(--mx-text-base);
  font-weight: var(--mx-font-weight-medium);
  text-decoration: none;
}
.mx-pagination .page-link:hover,
.mx-pagination a:hover {
  background: var(--mx-pager-bg-hover);
  border-color: var(--mx-primary-light);
  color: var(--mx-primary-darker);
}
.mx-pagination .active .page-link,
.mx-pagination .page-item.active .page-link,
.mx-pagination .active span,
.mx-pagination span.active {
  background: var(--mx-primary);
  border-color: transparent;
  color: var(--mx-white);
}
.mx-pagination .disabled .page-link,
.mx-pagination .page-item.disabled .page-link {
  opacity: 0.5;
  pointer-events: none;
}

/* ===== 5c. V2.1 BREADCRUMBS — quiet trail, current item non-interactive ===== */
.mx-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--mx-space-2);
  font-family: var(--mx-font);
  font-size: var(--mx-text-sm);
  color: var(--mx-ink-muted);
  list-style: none;
  margin: 0 0 var(--mx-space-4);
  padding: 0;
}
.mx-breadcrumb a {
  color: var(--mx-primary-darker);
  font-weight: var(--mx-font-weight-medium);
  text-decoration: none;
}
.mx-breadcrumb a:hover { color: var(--mx-primary-dark); text-decoration: underline; }
.mx-breadcrumb .mx-breadcrumb-sep { color: var(--mx-gray-400); }
.mx-breadcrumb [aria-current="page"],
.mx-breadcrumb .active {
  color: var(--mx-ink);
  font-weight: var(--mx-font-weight-semibold);
}

/* ===== 5d. V2.1 TABLE HEADER/HOVER — surface-alt head, soft brand hover =====
   Ref pattern: light head band + subtle row hover. Established token pairs;
   brand-tinted hover is additive (primary-surface @8% feels closer to ref
   than the old gray-50 while staying AA). */
.mx-table th { letter-spacing: 0.05em; }
.mx-table-hover tbody tr:hover { background: var(--mx-chip-surface); }

/* ===== 6b. V2.1 EMPTY STATE — icon tile + calm copy ===== */
.mx-empty-state .mx-empty-icon-wrap {
  width: 64px; height: 64px;
  margin: 0 auto var(--mx-space-4);
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--mx-radius-pill);
  background: var(--mx-chip-surface);
  color: var(--mx-primary-light);
}
.mx-empty-state .mx-empty-icon-wrap i { font-size: 24px; margin: 0; display: block; }

/* V2.1 CORE reduced-motion guard for new blocks (chips/tabs/pager) */
@media (prefers-reduced-motion: reduce) {
  .mx-chip, .mx-tab, .mx-pagination .page-link { transition-duration: 0.01ms !important; }
}

/* ===== 2. FORM CONTROLS ===== */
.mx-label {
  font-family: var(--mx-font);
  font-size: var(--mx-text-sm);
  font-weight: var(--mx-font-weight-semibold);
  color: var(--mx-ink);
  display: block;
  margin-bottom: var(--mx-space-2);
}
.mx-label .mx-label-req { color: var(--mx-danger-dark); margin-left: 2px; }
.mx-label .mx-label-hint { font-weight: var(--mx-font-weight-regular); color: var(--mx-ink-muted); margin-left: 6px; font-size: var(--mx-text-xs); }

.mx-input, .mx-select, .mx-textarea,
select.mx-input, textarea.mx-input {
  font-family: var(--mx-font);
  font-size: var(--mx-text-base);
  background: var(--mx-surface);
  border: 1px solid var(--mx-border);
  border-radius: var(--mx-radius-input);
  padding: 10px 14px;
  min-height: 40px;
  color: var(--mx-ink);
  width: 100%;
  appearance: none;
  transition: border-color var(--mx-duration-base) var(--mx-ease-standard),
              box-shadow var(--mx-duration-base) var(--mx-ease-standard),
              background-color var(--mx-duration-base) var(--mx-ease-standard);
}
.mx-textarea { min-height: 96px; resize: vertical; line-height: 1.55; padding: 10px 14px; }
.mx-input::placeholder, .mx-textarea::placeholder, .mx-select::placeholder { color: var(--mx-ink-muted); }
.mx-input:hover, .mx-select:hover, .mx-textarea:hover { border-color: var(--mx-gray-300); }
.mx-input:focus, .mx-select:focus, .mx-textarea:focus {
  outline: none;
  border-color: var(--mx-primary);
  box-shadow: var(--mx-shadow-focus);
}
.mx-input:focus-visible, .mx-select:focus-visible, .mx-textarea:focus-visible {
  outline: none;
  border-color: var(--mx-primary);
  box-shadow: var(--mx-shadow-focus);
}
.mx-input:disabled, .mx-select:disabled, .mx-textarea:disabled,
.mx-input[readonly], .mx-select[readonly], .mx-textarea[readonly] {
  background: var(--mx-surface-alt);
  color: var(--mx-ink-muted);
  cursor: not-allowed;
  border-color: var(--mx-border-light);
}
.mx-input.is-invalid, .mx-select.is-invalid, .mx-textarea.is-invalid {
  border-color: var(--mx-danger-dark);
}
.mx-input.is-invalid:focus, .mx-select.is-invalid:focus, .mx-textarea.is-invalid:focus {
  border-color: var(--mx-danger-dark);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mx-danger) 22%, transparent);
}
.mx-invalid-feedback { display: block; color: var(--mx-danger-dark); font-size: var(--mx-text-xs); margin-top: var(--mx-space-1); }

/* select chevron */
select.mx-input, .mx-select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2394A3B8'%3E%3Cpath d='M4.2 6.2 8 10l3.8-3.8H4.2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
  padding-right: 36px;
}

/* field group wrapper */
.mx-field { margin-bottom: var(--mx-space-5); }
.mx-field .mx-input, .mx-field .mx-select, .mx-field .mx-textarea { margin-top: 2px; }

/* ===== 3. CARD FAMILY ===== */
.mx-card {
  background: var(--mx-surface);
  border: 1px solid var(--mx-gray-200);
  border-radius: 10px;
  box-shadow: var(--mx-shadow-soft);
  transition: box-shadow var(--mx-duration-normal) var(--mx-ease-standard),
              border-color var(--mx-duration-normal) var(--mx-ease-standard),
              transform var(--mx-duration-normal) var(--mx-ease-standard);
}
.mx-card-hover:hover {
  box-shadow: var(--mx-shadow-md);
  border-color: var(--mx-border);
  transform: translateY(-2px);
}
.mx-card-flat { box-shadow: none; border-color: var(--mx-border-light); }
.mx-card-body { padding: var(--mx-space-6); }
.mx-card-body-sm { padding: var(--mx-space-4); }
.mx-card-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--mx-space-4);
  padding: var(--mx-space-4) var(--mx-space-6);
  border-bottom: 1px solid var(--mx-border-light);
}
.mx-card-header h3, .mx-card-header .mx-card-title {
  font-size: var(--mx-text-lg); font-weight: var(--mx-font-weight-bold);
  color: var(--mx-ink); margin: 0; letter-spacing: -0.01em;
}
.mx-card-footer {
  padding: var(--mx-space-4) var(--mx-space-6);
  border-top: 1px solid var(--mx-border-light);
  background: var(--mx-surface-alt);
  border-radius: 0 0 10px 10px;
}

/* V2 authoritative card inside public shells: user_dashboard_mx.css
   re-asserts .mx-card at (0,1,0) late in the cascade; this (0,1,1)
   rule restores the Doccure diffuse shadow + 10px radius inside
   <main> without touching that shared sheet. */
main .mx-card {
  background: var(--mx-surface);
  border: 1px solid var(--mx-gray-200);
  border-radius: 10px;
  box-shadow: var(--mx-shadow-soft);
}

/* ===== 11b. DOCCURE V2 HERO SURFACE HOOK =====
   Applied by surface markup (home/surgery/symptom heroes) as
   .mx-hero-gradient. Solid deep-primary tint replaces the prior blue→cyan→mint
   gradient wash (Worker B 2026-09-07). White ink remains AA-safe on the dark
   base; the .mx-hero-ink opt-in still resolves to dark ink where copy needs it. */
.mx-hero-gradient {
  background: var(--mx-primary-dark);
  color: var(--mx-white);
}
.mx-hero-gradient .mx-hero-ink { color: var(--mx-ink); }
.mx-hero-gradient a { color: var(--mx-white); }
.mx-hero-gradient img { mix-blend-mode: normal; }

/* ===== 4. BADGES — semantic status system =====
   Contract: status words map to ONE class each.
   <span class="mx-badge mx-badge-confirmed">Confirmed</span>
   Color-typed aliases (mx-badge-success etc.) keep working. */
.mx-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mx-font);
  font-size: 12px;
  font-weight: var(--mx-font-weight-semibold);
  padding: 3px 10px;
  border-radius: var(--mx-radius-badge);
  line-height: 1.6;
  white-space: nowrap;
}
.mx-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.85; }
.mx-badge.no-dot::before, .mx-badge-plain::before { display: none; }
.mx-badge-pill { border-radius: var(--mx-radius-pill); }
.mx-badge-lg { font-size: var(--mx-text-sm); padding: 5px 12px; }

/* Semantic status classes (the contract) */
.mx-badge-confirmed, .mx-badge-completed, .mx-badge-active, .mx-badge-approved, .mx-badge-available, .mx-badge-paid {
  background: var(--mx-status-success-bg); color: var(--mx-status-success);
}
.mx-badge-pending, .mx-badge-processing, .mx-badge-upcoming, .mx-badge-draft {
  background: var(--mx-status-pending-bg); color: var(--mx-status-pending);
}
.mx-badge-cancelled, .mx-badge-rejected, .mx-badge-failed, .mx-badge-expired, .mx-badge-inactive {
  background: var(--mx-status-danger-bg); color: var(--mx-status-danger);
}
.mx-badge-info, .mx-badge-scheduled, .mx-badge-ongoing {
  background: var(--mx-status-info-bg); color: var(--mx-status-info);
}
.mx-badge-neutral, .mx-badge-muted, .mx-badge-secondary {
  background: var(--mx-status-neutral-bg); color: var(--mx-status-neutral);
}
.mx-badge-primary { background: var(--mx-status-info-bg); color: var(--mx-primary-darker); }
.mx-badge-brand { background: var(--mx-status-brand-bg); color: var(--mx-status-brand); }
.mx-badge-dark { background: var(--mx-ink-deep); color: var(--mx-white); }
.mx-badge-ghost { background: transparent; color: var(--mx-ink-muted); border: 1px solid var(--mx-border); }

/* Legacy color-typed aliases — still supported */
.mx-badge-success { background: var(--mx-status-success-bg); color: var(--mx-status-success); }
.mx-badge-warning { background: var(--mx-status-pending-bg); color: var(--mx-status-pending); }
.mx-badge-danger  { background: var(--mx-status-danger-bg); color: var(--mx-status-danger); }

/* ===== 5. TABLES ===== */
.mx-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--mx-radius-lg); }
.mx-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--mx-font);
}
.mx-table th {
  text-align: left;
  font-weight: var(--mx-font-weight-semibold);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mx-ink-muted);
  padding: 12px 16px;
  background: var(--mx-surface-alt);
  border-bottom: 1px solid var(--mx-border);
  white-space: nowrap;
}
.mx-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--mx-border-light);
  color: var(--mx-ink);
  font-size: var(--mx-text-base);
  vertical-align: middle;
}
.mx-table tbody tr:last-child td { border-bottom: none; }
.mx-table tbody tr { transition: background-color var(--mx-duration-fast) var(--mx-ease-standard); }
.mx-table-hover tbody tr:hover { background: var(--mx-surface-hover); }
.mx-table a { color: var(--mx-primary-dark); text-decoration: none; }
.mx-table a:hover { text-decoration: underline; color: var(--mx-primary-darker); }

/* ===== 6. EMPTY STATE ===== */
.mx-empty-state {
  text-align: center;
  padding: var(--mx-space-16) var(--mx-space-6);
  color: var(--mx-ink-muted);
}
.mx-empty-state i, .mx-empty-state .mx-empty-icon {
  font-size: 42px;
  color: var(--mx-gray-300);
  margin-bottom: var(--mx-space-4);
  display: block;
}
.mx-empty-state .mx-empty-title {
  font-size: var(--mx-text-lg);
  font-weight: var(--mx-font-weight-semibold);
  color: var(--mx-ink);
  margin: 0 0 var(--mx-space-2);
}
.mx-empty-state p, .mx-empty-state .mx-empty-text {
  color: var(--mx-ink-muted);
  font-size: var(--mx-text-base);
  margin: 0 0 var(--mx-space-5);
}
.mx-empty-state .mx-btn { margin-top: var(--mx-space-2); }
.mx-empty-state .mx-empty-actions { display: flex; gap: var(--mx-space-3); justify-content: center; flex-wrap: wrap; }

/* ===== 7. SKELETON / SHIMMER — trimmed Pass C: .mx-skeleton* + mx-shimmer keyframe
   were unused across views/js; loading states use .mx-btn.is-loading (mx-spin). ===== */

/* ===== 8. MODAL POLISH ===== */
/* Bootstrap modal chrome refinement (admin surfaces use bootstrap dialogs) */
.modal-content {
  border: 1px solid var(--mx-border);
  border-radius: var(--mx-radius-xl);
  box-shadow: var(--mx-elevation-3);
  background: var(--mx-surface);
}
.modal-header { border-bottom: 1px solid var(--mx-border-light); padding: var(--mx-space-5) var(--mx-space-6); }
.modal-header .modal-title { font-size: var(--mx-text-lg); font-weight: var(--mx-font-weight-bold); color: var(--mx-ink); }
.modal-body { padding: var(--mx-space-6); }
.modal-footer { border-top: 1px solid var(--mx-border-light); padding: var(--mx-space-4) var(--mx-space-6); background: var(--mx-surface-alt); border-radius: 0 0 var(--mx-radius-xl) var(--mx-radius-xl); }
.modal-backdrop.show { opacity: 0.5; }

/* mx modal family (patient/website surfaces) */
.mx-modal-card {
  background: var(--mx-surface);
  border-radius: var(--mx-radius-xl);
  box-shadow: var(--mx-elevation-3);
  border: 1px solid var(--mx-border-light);
  overflow: hidden;
  width: 100%;
  max-width: 520px;
}
.mx-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--mx-space-5) var(--mx-space-6);
  border-bottom: 1px solid var(--mx-border-light);
}
.mx-modal-head h3 { margin: 0; font-size: var(--mx-text-lg); font-weight: var(--mx-font-weight-bold); color: var(--mx-ink); }
.mx-modal-body { padding: var(--mx-space-6); }
.mx-modal-foot { padding: var(--mx-space-4) var(--mx-space-6); border-top: 1px solid var(--mx-border-light); background: var(--mx-surface-alt); display: flex; justify-content: flex-end; gap: var(--mx-space-3); }

/* ===== 9. FOCUS-VISIBLE RINGS (global floor) ===== */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.mx-navbar-link:focus-visible,
.mx-nav-cart:focus-visible,
.mx-user-dropdown-link:focus-visible,
.sidebar-menu a:focus-visible,
.dropdown-item:focus-visible,
.mx-footer-link:focus-visible {
  outline: 2px solid var(--mx-primary);
  outline-offset: 2px;
  border-radius: var(--mx-radius-sm);
}

/* ===== 10. GLOBAL SHELL — soft neutral background + container rhythm ===== */
body { background: var(--mx-page-bg); }
.main_content { min-height: 60vh; }
.mx-container {
  max-width: var(--mx-container-max);
  margin: 0 auto;
  padding-left: var(--mx-container-pad);
  padding-right: var(--mx-container-pad);
  width: 100%;
}
.mx-section { margin-bottom: var(--mx-space-12); }
/* Doccure V2: public section titles are 42px/700 (measured from live
   template). Scoped to descendants of <main> — the public shells
   (mainlayout/auth) wrap content in <main class="main_content">;
   admin/provider layout (mainlayout_admin) uses a div wrapper, so
   dashboards keep their own heading contract. */
main .mx-section-title {
  font-size: var(--mx-title-xl);
  font-weight: var(--mx-font-weight-bold);
  color: var(--mx-ink);
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0;
}
@media (max-width: 767px) {
  main .mx-section-title { font-size: 28px; }
}
.mx-page-title {
  font-size: var(--mx-text-3xl);
  font-weight: var(--mx-font-weight-bold);
  color: var(--mx-ink-deep);
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0;
}
.mx-page-sub { color: var(--mx-ink-muted); font-size: var(--mx-text-lg); margin: var(--mx-space-2) 0 0; }

/* Admin main-content soft neutral */
.main-content { background: var(--mx-page-bg); }

/* ===== 11. REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  .mx-btn, .mx-card, .mx-input, .mx-select, .mx-textarea, .mx-table tbody tr {
    transition-duration: 0.01ms !important;
  }
  .mx-btn.is-loading::after { animation: none !important; }
  .mx-card-hover:hover { transform: none; }
}

/* ============================================================
   GLOBAL SHELL POLISH — Wave 1 (2026-09)
   Navbar (website), footer, page rhythm, admin sidebar.
   Pure CSS — no blade markup changes; all JS ids/hooks intact.
   ============================================================ */

/* ===== WEBSITE NAVBAR ===== */
.mx-navbar {
  position: sticky;
  top: 0;
  z-index: var(--mx-z-navbar);
  background: color-mix(in srgb, var(--mx-surface) 92%, transparent);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--mx-border-light);
  transition: box-shadow var(--mx-duration-normal) var(--mx-ease-standard),
              border-color var(--mx-duration-normal) var(--mx-ease-standard);
}
.mx-navbar.scrolled {
  border-bottom-color: var(--mx-border);
  box-shadow: var(--mx-elevation-1);
}
.mx-navbar-inner {
  max-width: var(--mx-container-max);
  margin: 0 auto;
  padding: 0 var(--mx-container-pad);
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: var(--mx-space-5);
}
.mx-navbar-brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  transition: opacity var(--mx-duration-base) var(--mx-ease-standard);
}
.mx-navbar-brand:hover { opacity: 0.85; }
.mx-navbar-brand img { height: 34px; width: auto; display: block; }

.mx-navbar-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  min-width: 0;
}
.mx-navbar-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: var(--mx-radius-sm);
  font-size: var(--mx-text-base);
  font-weight: var(--mx-font-weight-medium);
  color: var(--mx-ink-soft);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--mx-duration-base) var(--mx-ease-standard),
              background-color var(--mx-duration-base) var(--mx-ease-standard);
}
.mx-navbar-link::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--mx-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--mx-duration-normal) var(--mx-ease-out);
}
.mx-navbar-link:hover { color: var(--mx-primary-dark); background: var(--mx-primary-surface); }
.mx-navbar-link:hover::after { transform: scaleX(1); }
.mx-navbar-link.active { color: var(--mx-primary-darker); font-weight: var(--mx-font-weight-semibold); }
.mx-navbar-link.active::after { transform: scaleX(1); }

/* Navbar actions cluster */
.mx-navbar-actions { display: flex; align-items: center; gap: var(--mx-space-2); flex-shrink: 0; }
.mx-nav-providers, .mx-nav-location {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 12px;
  border-radius: var(--mx-radius-pill);
  border: 1px solid var(--mx-border);
  background: var(--mx-surface);
  color: var(--mx-ink-soft);
  font-size: var(--mx-text-sm);
  font-weight: var(--mx-font-weight-medium);
  cursor: pointer;
  transition: border-color var(--mx-duration-base) var(--mx-ease-standard),
              background-color var(--mx-duration-base) var(--mx-ease-standard),
              color var(--mx-duration-base) var(--mx-ease-standard);
}
.mx-nav-providers:hover, .mx-nav-location:hover {
  border-color: var(--mx-primary);
  color: var(--mx-primary-dark);
  background: var(--mx-primary-surface);
}
.mx-nav-providers-caret, .mx-nav-location-caret {
  font-size: 10px;
  transition: transform var(--mx-duration-base) var(--mx-ease-standard);
}
.mx-nav-providers.open .mx-nav-providers-caret { transform: rotate(180deg); }
.mx-nav-location.open .mx-nav-location-caret { transform: rotate(180deg); }

/* Providers / location / user dropdowns — L2 elevation */
.mx-providers-dropdown, .mx-user-dropdown, .mx-location-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  background: var(--mx-surface);
  border: 1px solid var(--mx-border-light);
  border-radius: var(--mx-radius-lg);
  box-shadow: var(--mx-elevation-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--mx-duration-base) var(--mx-ease-out),
              transform var(--mx-duration-base) var(--mx-ease-out),
              visibility var(--mx-duration-base);
  z-index: var(--mx-z-dropdown);
}
.mx-providers-dropdown.open, .mx-user-dropdown.open, .mx-location-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mx-nav-providers-wrap, .mx-nav-user-wrap, .mx-location-wrap { position: relative; }
.mx-providers-dropdown {
  right: 0;
  min-width: 264px;
  padding: var(--mx-space-2);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mx-providers-link {
  display: flex;
  align-items: center;
  gap: var(--mx-space-3);
  padding: 10px 12px;
  border-radius: var(--mx-radius-md);
  text-decoration: none;
  color: var(--mx-ink);
  transition: background-color var(--mx-duration-fast) var(--mx-ease-standard);
}
.mx-providers-link:hover { background: var(--mx-surface-hover); }
.mx-providers-link i {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--mx-radius-md);
  background: var(--mx-primary-surface);
  color: var(--mx-primary-dark);
  font-size: 15px;
  flex-shrink: 0;
}
.mx-providers-link strong { display: block; font-size: var(--mx-text-base); font-weight: var(--mx-font-weight-semibold); }
.mx-providers-link span { display: block; font-size: var(--mx-text-xs); color: var(--mx-ink-muted); }

/* Nav user chip */
.mx-nav-user {
  display: inline-flex;
  align-items: center;
  gap: var(--mx-space-2);
  height: 40px;
  padding: 3px 12px 3px 4px;
  border-radius: var(--mx-radius-pill);
  border: 1px solid var(--mx-border);
  background: var(--mx-surface);
  cursor: pointer;
  transition: border-color var(--mx-duration-base) var(--mx-ease-standard),
              background-color var(--mx-duration-base) var(--mx-ease-standard),
              box-shadow var(--mx-duration-base) var(--mx-ease-standard);
}
.mx-nav-user:hover { border-color: var(--mx-primary); box-shadow: var(--mx-shadow-xs); }
.mx-nav-user img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.mx-nav-user-name { font-size: var(--mx-text-sm); font-weight: var(--mx-font-weight-semibold); color: var(--mx-ink); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-user-dropdown {
  right: 0;
  min-width: 260px;
  padding: var(--mx-space-2);
  overflow: hidden;
}
.mx-user-dropdown-header {
  display: flex;
  align-items: center;
  gap: var(--mx-space-3);
  padding: var(--mx-space-3);
  border-bottom: 1px solid var(--mx-border-light);
  margin-bottom: var(--mx-space-2);
}
.mx-user-dropdown-header img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.mx-user-dropdown-header-name { margin: 0; font-size: var(--mx-text-base); font-weight: var(--mx-font-weight-semibold); color: var(--mx-ink); }
.mx-user-dropdown-header-email { margin: 0; font-size: var(--mx-text-xs); color: var(--mx-ink-muted); word-break: break-all; }
.mx-user-dropdown-link {
  display: flex;
  align-items: center;
  gap: var(--mx-space-3);
  padding: 9px 12px;
  border-radius: var(--mx-radius-sm);
  color: var(--mx-ink-soft);
  font-size: var(--mx-text-base);
  text-decoration: none;
  transition: background-color var(--mx-duration-fast) var(--mx-ease-standard), color var(--mx-duration-fast) var(--mx-ease-standard);
}
.mx-user-dropdown-link:hover { background: var(--mx-surface-hover); color: var(--mx-ink-deep); }
.mx-user-dropdown-link i { width: 18px; text-align: center; color: var(--mx-ink-muted); font-size: 14px; }
.mx-user-dropdown-divider { height: 1px; background: var(--mx-border-light); margin: var(--mx-space-2) var(--mx-space-3); }
.mx-user-logout { color: var(--mx-danger-dark); }
.mx-user-logout i { color: var(--mx-danger-dark); }
.mx-user-logout:hover { background: var(--mx-danger-surface); color: var(--mx-danger-dark); }

/* Cart */
.mx-nav-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: var(--mx-radius-pill);
  border: 1px solid var(--mx-border);
  color: var(--mx-ink-soft);
  text-decoration: none;
  transition: border-color var(--mx-duration-base) var(--mx-ease-standard),
              color var(--mx-duration-base) var(--mx-ease-standard),
              background-color var(--mx-duration-base) var(--mx-ease-standard);
}
.mx-nav-cart:hover { border-color: var(--mx-primary); color: var(--mx-primary-dark); background: var(--mx-primary-surface); }
.mx-nav-cart-badge {
  position: absolute;
  top: -6px; right: -6px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: var(--mx-radius-pill);
  background: var(--mx-danger);
  color: var(--mx-white);
  font-size: 11px;
  font-weight: var(--mx-font-weight-bold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--mx-surface);
}

/* Login / signup buttons in navbar */
.mx-nav-login {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 18px;
  border-radius: var(--mx-radius-btn);
  border: 1px solid var(--mx-border);
  color: var(--mx-primary-dark);
  font-size: var(--mx-text-sm);
  font-weight: var(--mx-font-weight-semibold);
  text-decoration: none;
  transition: all var(--mx-duration-base) var(--mx-ease-standard);
}
.mx-nav-login:hover { border-color: var(--mx-primary); background: var(--mx-primary-surface); color: var(--mx-primary-darker); }
.mx-nav-signup {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 20px;
  border-radius: var(--mx-radius-btn);
  background: var(--mx-primary);
  color: var(--mx-white);
  font-size: var(--mx-text-sm);
  font-weight: var(--mx-font-weight-semibold);
  text-decoration: none;
  box-shadow: var(--mx-shadow-xs);
  transition: all var(--mx-duration-base) var(--mx-ease-standard);
}
.mx-nav-signup:hover { background: var(--mx-primary-dark); color: var(--mx-white); box-shadow: var(--mx-shadow-primary); transform: translateY(-1px); }

/* Hamburger */
.mx-nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  border-radius: var(--mx-radius-sm);
  border: 1px solid var(--mx-border);
  background: var(--mx-surface);
  cursor: pointer;
  padding: 0 9px;
}
.mx-nav-hamburger-line { height: 2px; border-radius: 2px; background: var(--mx-ink-soft); transition: transform var(--mx-duration-base) var(--mx-ease-standard), opacity var(--mx-duration-fast); }
.mx-nav-hamburger.open .mx-nav-hamburger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mx-nav-hamburger.open .mx-nav-hamburger-line:nth-child(2) { opacity: 0; }
.mx-nav-hamburger.open .mx-nav-hamburger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Location dropdown */
.mx-location-dropdown {
  right: 0;
  width: 280px;
  padding: var(--mx-space-2);
}
.mx-location-search {
  display: flex;
  align-items: center;
  gap: var(--mx-space-2);
  padding: 8px 10px;
  border: 1px solid var(--mx-border);
  border-radius: var(--mx-radius-sm);
  margin-bottom: var(--mx-space-2);
  background: var(--mx-surface-alt);
}
.mx-location-search i { color: var(--mx-ink-muted); font-size: 13px; }
.mx-location-search input {
  border: none; outline: none; background: transparent;
  font-family: var(--mx-font); font-size: var(--mx-text-sm); color: var(--mx-ink);
  width: 100%; padding: 0;
}
.mx-location-list { max-height: 240px; overflow-y: auto; }
.mx-location-item {
  display: block;
  padding: 9px 12px;
  border-radius: var(--mx-radius-sm);
  color: var(--mx-ink-soft);
  font-size: var(--mx-text-base);
  text-decoration: none;
  transition: background-color var(--mx-duration-fast) var(--mx-ease-standard), color var(--mx-duration-fast);
}
.mx-location-item:hover { background: var(--mx-primary-surface); color: var(--mx-primary-dark); }

/* Mobile menu */
.mx-nav-mobile-menu {
  display: none;
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--mx-surface);
  border-bottom: 1px solid var(--mx-border);
  box-shadow: var(--mx-elevation-2);
  padding: var(--mx-space-3) var(--mx-container-pad) var(--mx-space-4);
  flex-direction: column;
  gap: 2px;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
}
.mx-nav-mobile-menu.open { display: flex; }
body.mx-nav-mobile-open { overflow: hidden; }
.mx-mobile-link {
  display: flex;
  align-items: center;
  gap: var(--mx-space-3);
  padding: 12px 14px;
  border-radius: var(--mx-radius-md);
  color: var(--mx-ink-soft);
  font-size: 15px;
  font-weight: var(--mx-font-weight-medium);
  text-decoration: none;
  transition: background-color var(--mx-duration-fast) var(--mx-ease-standard), color var(--mx-duration-fast);
}
.mx-mobile-link i { width: 20px; text-align: center; color: var(--mx-primary-dark); }
.mx-mobile-link:hover, .mx-mobile-link.active { background: var(--mx-primary-surface); color: var(--mx-primary-darker); }
.mx-mobile-divider { height: 1px; background: var(--mx-border-light); margin: var(--mx-space-2) var(--mx-space-3); }

/* Responsive collapse — nav links hide, hamburger shows */
@media (max-width: 1023px) {
  .mx-navbar-nav { display: none; }
  .mx-nav-hamburger { display: flex; }
  .mx-navbar-inner { gap: var(--mx-space-3); }
}
@media (max-width: 767px) {
  .mx-nav-providers span, .mx-nav-location-text { display: none; }
  .mx-nav-providers, .mx-nav-location { padding: 0 11px; }
  .mx-nav-user-name { display: none; }
  .mx-navbar-brand img { height: 30px; }
  .mx-navbar-inner { min-height: 58px; }
}
@media (max-width: 479px) {
  .mx-nav-login { display: none; }
}

/* ===== FOOTER ===== */
.mx-footer {
  margin-top: var(--mx-space-16);
  background: var(--mx-ink-deep);
  color: color-mix(in srgb, var(--mx-white) 72%, transparent);
  font-size: var(--mx-text-base);
}
.mx-footer-inner {
  max-width: var(--mx-container-max);
  margin: 0 auto;
  padding: 0 var(--mx-container-pad);
}
.mx-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: var(--mx-space-10);
  padding: var(--mx-space-12) 0 var(--mx-space-8);
}
.mx-footer-col-title {
  font-size: var(--mx-text-sm);
  font-weight: var(--mx-font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mx-white);
  margin: 0 0 var(--mx-space-4);
}
.mx-footer-link {
  display: block;
  padding: 5px 0;
  color: color-mix(in srgb, var(--mx-white) 62%, transparent);
  text-decoration: none;
  font-size: var(--mx-text-base);
  transition: color var(--mx-duration-fast) var(--mx-ease-standard), transform var(--mx-duration-fast) var(--mx-ease-standard);
}
.mx-footer-link:hover { color: var(--mx-primary-light); transform: translateX(2px); }
.mx-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mx-space-4);
  flex-wrap: wrap;
  border-top: 1px solid var(--mx-white-a10);
  padding: var(--mx-space-5) 0;
}
.mx-footer-copy { font-size: var(--mx-text-sm); color: color-mix(in srgb, var(--mx-white) 55%, transparent); }
.mx-footer-pay { display: flex; gap: var(--mx-space-3); }
.mx-footer-pay-item { color: color-mix(in srgb, var(--mx-white) 45%, transparent); font-size: 22px; transition: color var(--mx-duration-fast); }
.mx-footer-pay-item:hover { color: var(--mx-white); }
@media (max-width: 1023px) {
  .mx-footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: var(--mx-space-8); }
}
@media (max-width: 767px) {
  .mx-footer-grid { grid-template-columns: 1fr 1fr; gap: var(--mx-space-6); padding: var(--mx-space-10) 0 var(--mx-space-6); }
  .mx-footer-brand-col { grid-column: 1 / -1; }
}

/* Back to top */
.mx-back-to-top {
  position: fixed;
  right: 24px; bottom: 24px;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--mx-border);
  background: var(--mx-surface);
  color: var(--mx-ink-soft);
  cursor: pointer;
  box-shadow: var(--mx-elevation-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--mx-duration-normal) var(--mx-ease-out), transform var(--mx-duration-normal) var(--mx-ease-out), visibility var(--mx-duration-normal), background-color var(--mx-duration-fast), color var(--mx-duration-fast);
  z-index: var(--mx-z-sticky);
}
.mx-back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.mx-back-to-top:hover { background: var(--mx-primary); border-color: var(--mx-primary); color: var(--mx-white); }

/* ===== ADMIN / VENDOR SIDEBAR POLISH =====
   Rhythm: consistent item height, icon optical alignment,
   active state with left indicator, headers quiet uppercase. */
.main-sidebar .sidebar-menu {
  padding: var(--mx-space-2);
  list-style: none;
  margin: 0;
}
.main-sidebar .sidebar-menu > li { margin: 1px 0; }
.main-sidebar .sidebar-menu > li > a {
  border-radius: var(--mx-radius-md);
  min-height: 40px;
  position: relative;
}
.main-sidebar .sidebar-menu > li > a::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px; height: 20px;
  border-radius: 0 3px 3px 0;
  background: var(--mx-primary);
  transition: transform var(--mx-duration-base) var(--mx-ease-out);
}
.main-sidebar .sidebar-menu > li.active > a::before,
.main-sidebar .sidebar-menu > li > a.active::before { transform: translateY(-50%) scaleY(1); }
/* icon rhythm — uniform 20px box, muted -> primary on hover/active */
.main-sidebar .sidebar-menu > li > a i {
  font-size: 15px !important;
  width: 20px;
  color: var(--mx-gray-500);
  transition: color var(--mx-duration-fast) var(--mx-ease-standard);
}
.main-sidebar .sidebar-menu > li > a:hover i { color: var(--mx-primary-dark); }
.main-sidebar .sidebar-menu > li.active > a i,
.main-sidebar .sidebar-menu > li > a.active i { color: var(--mx-primary-dark); }
/* Section headers — quiet, consistent */
.main-sidebar .sidebar-menu-header {
  padding: var(--mx-space-5) var(--mx-space-3) var(--mx-space-2) !important;
  font-size: 10.5px !important;
  font-weight: var(--mx-font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--mx-gray-400) !important;
  list-style: none;
  user-select: none;
}
/* Sidebar search — unified input look */
.sidebar-search {
  display: flex;
  align-items: center;
  gap: var(--mx-space-2);
  margin: var(--mx-space-2) var(--mx-space-1) var(--mx-space-3);
  padding: 7px 10px;
  border: 1px solid var(--mx-border);
  border-radius: var(--mx-radius-md);
  background: var(--mx-surface);
  transition: border-color var(--mx-duration-base) var(--mx-ease-standard), box-shadow var(--mx-duration-base) var(--mx-ease-standard);
}
.sidebar-search:focus-within { border-color: var(--mx-primary); box-shadow: var(--mx-shadow-focus); }
.sidebar-search-icon { color: var(--mx-gray-400); font-size: 13px; display: flex; }
.sidebar-search input {
  border: none; outline: none; background: transparent;
  font-family: var(--mx-font); font-size: var(--mx-text-sm); color: var(--mx-ink);
  width: 100%; padding: 0; min-width: 0;
}
.sidebar-search input::placeholder { color: var(--mx-gray-400); }
/* Submenu dropdown item active rhythm */
.main-sidebar .sidebar-menu .dropdown-menu .dropdown-item.active {
  box-shadow: inset 2px 0 0 var(--mx-primary);
}
/* Submenu smooth open (bootstrap handles display; polish spacing only) */
.main-sidebar .sidebar-menu .dropdown-menu { margin: 2px 0 6px 26px !important; }

/* ===== ADMIN PAGE RHYTHM ===== */
.main-content { background: var(--mx-page-bg); }
.main-content > .section { max-width: 1440px; }
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mx-space-4);
  flex-wrap: wrap;
  margin-bottom: var(--mx-space-6);
}
.section-header-left { display: flex; align-items: center; gap: var(--mx-space-3); min-width: 0; }
.section-header-left h1 {
  font-size: var(--mx-text-2xl);
  font-weight: var(--mx-font-weight-bold);
  color: var(--mx-ink-deep);
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.3;
}
.section-header-icon {
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--mx-radius-md);
  background: var(--mx-primary-surface);
  color: var(--mx-primary-dark);
  font-size: 17px;
  flex-shrink: 0;
}
.section-header-breadcrumb { display: flex; align-items: center; gap: var(--mx-space-2); font-size: var(--mx-text-sm); flex-wrap: wrap; }
.breadcrumb-item a { color: var(--mx-ink-muted); text-decoration: none; transition: color var(--mx-duration-fast); }
.breadcrumb-item a:hover { color: var(--mx-primary-dark); }
.breadcrumb-item.active { color: var(--mx-ink); font-weight: var(--mx-font-weight-medium); }
@media (max-width: 767px) {
  .main-content { padding: 16px 14px 28px; }
  .section-header-left h1 { font-size: var(--mx-text-xl); }
}

/* ===== W3 TOUCH-FLOOR (mobile ≥40px hit height for common inline links/buttons) =====
   Additive, mobile-only. Desktop metrics untouched. */
@media (max-width: 767px) {
  /* Footer links: 5px vertical padding → ~44px row height (still tight list rhythm) */
  .mx-footer-link { padding: 10px 0; }

  /* Breadcrumb links: negative-margin padding keeps layout identical while enlarging hit area */
  .breadcrumb-item a { padding: 8px 4px; margin: -8px -4px; }

  /* Small buttons keep 32px visual height on desktop but grow to 40px on touch */
  .mx-btn-sm { min-height: 40px; }

  /* Pagination links (bootstrap + datatables chrome) */
  .page-link { min-height: 40px; min-width: 40px; display: inline-flex; align-items: center; justify-content: center; }
}

/* Soft neutral page background behind content (all shells) */
body { background: var(--mx-page-bg); }

/* ===== W3 TEXT-UTILITY ALIASES (additive) =====
   Blade sweeps replaced divergent tailwind/bootstrap text colors
   (text-gray-600, text-neutral-800, text-red-600) with semantic aliases.
   These alias the mx ink scale; dark-mode variants intentionally dropped. */
.text-ink { color: var(--mx-ink); }
.text-muted { color: var(--mx-ink-muted); }
.text-danger { color: var(--mx-danger-dark); }
.text-success { color: var(--mx-success-dark); }

/* ===== W3 LEGACY .btn ALIGNMENT (shared-component level) =====
   Bootstrap .btn rendered 38px/6px vs mx-btn contract 40px/8px.
   Normalize legacy buttons to the mx metrics; visual delta is 2px height
   and 2px radius — imperceptible per-page, consistent app-wide. */
.btn {
  min-height: 44px;
  border-radius: var(--mx-radius-btn);
  font-family: var(--mx-font);
}
.btn-sm { min-height: 36px; border-radius: var(--mx-radius-btn); font-size: var(--mx-text-sm); }
.btn-lg { min-height: 48px; border-radius: var(--mx-radius-btn); }

/* ===== MEGA MENU (navmega) — 4 top items, grouped columns, calm healthcare ===== */
.mx-mega-item { position: relative; }
.mx-mega-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
}
.mx-mega-caret {
  font-size: 10px;
  color: var(--mx-ink-muted);
  transition: transform var(--mx-duration-base) var(--mx-ease-standard);
}
.mx-mega-trigger[aria-expanded="true"] .mx-mega-caret { transform: rotate(180deg); }
.mx-mega-trigger[aria-expanded="true"] { color: var(--mx-primary-darker); }

.mx-mega-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: var(--mx-surface);
  border: 1px solid var(--mx-border-light);
  border-radius: var(--mx-radius-lg);
  box-shadow: var(--mx-elevation-2);
  padding: var(--mx-space-4);
  min-width: 560px;
  max-width: min(680px, calc(100vw - 48px));
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--mx-duration-base) var(--mx-ease-out),
              transform var(--mx-duration-base) var(--mx-ease-out),
              visibility var(--mx-duration-base);
  z-index: var(--mx-z-dropdown);
}
.mx-mega-panel.open {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.mx-mega-panel::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 0;
  right: 0;
  height: 6px;
}
.mx-mega-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mx-space-5);
}
.mx-mega-col { min-width: 0; }
.mx-mega-heading {
  margin: 0 0 var(--mx-space-2);
  padding: 0 var(--mx-space-2);
  font-size: var(--mx-text-xs);
  font-weight: var(--mx-font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mx-ink-muted);
}
.mx-mega-link {
  display: flex;
  align-items: flex-start;
  gap: var(--mx-space-3);
  padding: var(--mx-space-2);
  border-radius: var(--mx-radius-md);
  text-decoration: none;
  color: var(--mx-ink);
  transition: background-color var(--mx-duration-fast) var(--mx-ease-standard);
}
.mx-mega-link:hover, .mx-mega-link:focus-visible {
  background: var(--mx-primary-surface);
}
.mx-mega-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--mx-radius-md);
  background: var(--mx-primary-surface);
  color: var(--mx-primary-dark);
  font-size: 15px;
}
.mx-mega-link:hover .mx-mega-ico, .mx-mega-link:focus-visible .mx-mega-ico {
  background: var(--mx-surface);
}
.mx-mega-txt { min-width: 0; }
.mx-mega-txt strong {
  display: block;
  font-size: var(--mx-text-base);
  font-weight: var(--mx-font-weight-semibold);
  color: var(--mx-ink-deep);
  line-height: 1.35;
}
.mx-mega-txt small {
  display: block;
  font-size: var(--mx-text-xs);
  color: var(--mx-ink-muted);
  line-height: 1.45;
  margin-top: 2px;
}
.mx-mega-link:focus-visible { outline: 2px solid var(--mx-primary); outline-offset: -2px; }
.mx-mega-trigger:focus-visible { outline: 2px solid var(--mx-primary); outline-offset: 2px; border-radius: var(--mx-radius-md); }

/* Mobile accordion (drawer) */
.mx-mobile-acc { border-bottom: 1px solid var(--mx-border-light); }
.mx-mobile-acc:last-of-type { border-bottom: 0; }
.mx-mobile-acc-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: var(--mx-space-3);
  padding: 14px 14px;
  border: 0;
  border-radius: var(--mx-radius-md);
  background: transparent;
  color: var(--mx-ink-soft);
  font-size: 15px;
  font-weight: var(--mx-font-weight-semibold);
  text-align: left;
  cursor: pointer;
}
.mx-mobile-acc-btn span {
  display: flex;
  align-items: center;
  gap: var(--mx-space-3);
}
.mx-mobile-acc-btn span i { width: 20px; text-align: center; color: var(--mx-primary-dark); }
.mx-mobile-acc-btn:hover { background: var(--mx-surface-hover); }
.mx-mobile-acc-btn:focus-visible { outline: 2px solid var(--mx-primary); outline-offset: -2px; }
.mx-mobile-acc-caret { font-size: 11px; color: var(--mx-ink-muted); transition: transform var(--mx-duration-base) var(--mx-ease-standard); }
.mx-mobile-acc-btn.open .mx-mobile-acc-caret { transform: rotate(180deg); }
.mx-mobile-acc-body {
  display: none;
  padding: 0 var(--mx-space-2) var(--mx-space-2);
}
.mx-mobile-acc-body.open { display: block; }
.mx-mobile-acc-heading {
  margin: var(--mx-space-2) 0 var(--mx-space-1);
  padding: 0 var(--mx-space-2);
  font-size: var(--mx-text-xs);
  font-weight: var(--mx-font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mx-ink-muted);
}
.mx-mobile-link-sub { padding: 10px 14px; font-size: 14px; font-weight: var(--mx-font-weight-medium); }

@media (max-width: 1023px) {
  .mx-mega-item { position: static; }
  .mx-mega-panel { display: none; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .mx-mega-panel { min-width: 520px; }
  .mx-mega-grid { gap: var(--mx-space-4); }
}


/* ===== 11. DOCCURE GLOBAL SHELL (2026-09 pivot, V2 structural) =====
   Signature blue→CYAN gradient on shell primary CTAs (44px pills),
   brand-blue focus rings / selection / links. Additive layer; token-driven.
   High-specificity (.mx-navbar .mx-nav-signup) outranks surface
   redefinitions of .mx-nav-signup that load later. ===== */

/* Navbar primary CTA — gradient pill (44px via --mx-radius-btn token) */
/* ID-level specificity outranks later surface sheets (#mxNavbar .mx-nav-signup
   legacy AA fixes — the two dead flat-fill blocks in listing_mx.css are
   removed in V2; this rule is the single source). */
#mxNavbar.mx-navbar .mx-nav-signup {
  background: var(--mx-primary) !important;
  color: var(--mx-white);
  box-shadow: var(--mx-shadow-cta);
  border: none;
}
#mxNavbar.mx-navbar .mx-nav-signup:hover {
  background: var(--mx-primary-dark) !important;
  color: var(--mx-white);
  box-shadow: var(--mx-shadow-cta-hover);
  transform: translateY(-1px);
}
/* keep sibling flat-fill remediation from bleeding in via border-color */
#mxNavbar.mx-navbar .mx-nav-signup,
#mxNavbar .mx-nav-signup { border-color: transparent; }

/* Footer newsletter CTA — solid primary */
footer .mx-footer-news-btn,
.mx-footer .mx-footer-news-btn {
  background: var(--mx-primary);
  color: var(--mx-white);
  box-shadow: var(--mx-shadow-cta);
}
footer .mx-footer-news-btn:hover,
.mx-footer .mx-footer-news-btn:hover {
  background: var(--mx-primary-dark);
  color: var(--mx-white);
  box-shadow: var(--mx-shadow-cta-hover);
  transform: translateY(-1px);
}

/* Primary button variant adopts solid primary where used in shell */
.mx-btn-primary {
  background: var(--mx-primary);
  color: var(--mx-white);
  box-shadow: var(--mx-shadow-cta);
}
.mx-btn-primary:hover {
  background: var(--mx-primary-dark);
  color: var(--mx-white);
  box-shadow: var(--mx-shadow-cta-hover);
}

/* Brand-blue focus ring (visible on white + tint surfaces) */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.mx-navbar-link:focus-visible,
.mx-nav-cart:focus-visible,
.mx-user-dropdown-link:focus-visible,
.sidebar-menu a:focus-visible,
.dropdown-item:focus-visible,
.mx-footer-link:focus-visible {
  outline: 2px solid var(--mx-primary);
  outline-offset: 2px;
  border-radius: var(--mx-radius-sm);
}

/* Selection — brand blue tint */
::selection {
  background: color-mix(in srgb, var(--mx-primary) 22%, transparent);
  color: var(--mx-ink-deep);
}

/* Text selection inside gradient CTAs — keeps selection legible */
.mx-navbar .mx-nav-signup::selection,
.mx-btn-primary::selection {
  background: var(--mx-white-a35);
  color: var(--mx-white);
}

/* Links inherit brand blue (global shell signal).
   Surgical: only links WITHOUT a class attribute, so surface CSS
   (which always targets .classes) is untouched. */
.mx-main-content a:not([class]),
main a:not([class]) {
  color: var(--mx-primary-darker);
}
.mx-main-content a:not([class]):hover,
main a:not([class]):hover {
  color: var(--mx-primary-dark);
}

/* ===== 12. DOCCURE V2.1 SHELL — navbar / mega / drawer / footer (Agent 7) =====
   Reference: doccure.dreamstechnologies.com/react/template (measured 2026-09-06).
   Anatomy targets: header 85px, nav links 16px/500 slate hover→#316dff color-only,
   mega panel radius 10px + diffuse shadow, footer col titles 20px/700 capitalize,
   newsletter white pill card + 44px gradient CTA inside, social 32px circles,
   deep-blue bottom bar 57px. Additive layer, token-driven; JS hooks untouched. ===== */

/* --- Navbar height + density (ref: 85px header, 40px logo, 16px nav links) --- */
.mx-navbar-inner { min-height: 80px; }
@media (min-width: 1024px) { .mx-navbar-inner { min-height: 80px; } }
.mx-navbar-brand img { height: 40px; }
.mx-navbar-nav { gap: var(--mx-space-1); }

/* --- Nav link treatment (ref: 16px/500 slate-900; hover/active = brand blue color-only) --- */
.mx-navbar .mx-navbar-link {
  font-size: var(--mx-text-lg);          /* 16px */
  font-weight: var(--mx-font-weight-medium);
  color: var(--mx-ink-deep);             /* slate-900 */
  padding: 10px 14px;
  border-radius: var(--mx-radius-md);
  background: transparent;
}

/* Hover: color-only shift to authentic Doccure blue (ref: #316dff on hover);
   underline bar kept as our signature but thinner + brand-light. */
.mx-navbar .mx-navbar-link:hover,
.mx-navbar .mx-navbar-link:focus-visible {
  color: var(--mx-brand-light);           /* #316dff (ref hover color) */
  background: transparent;
}
.mx-navbar .mx-navbar-link::after {
  height: 2px;
  background: var(--mx-brand-light);
}
/* Active page: brand blue + semibold (ref: .has-submenu.active > a → var(--primary)) */
.mx-navbar .mx-navbar-link.active {
  color: var(--mx-primary-darker);        /* AA-safe blue for text */
  font-weight: var(--mx-font-weight-semibold);
  background: transparent;
}
/* Mega trigger open state matches hover */
.mx-navbar .mx-mega-trigger[aria-expanded="true"] {
  color: var(--mx-brand-light);
  background: transparent;
}

/* --- Mega panel anatomy (ref: white, 4-col, shadow 0 16px 50px rgba(0,0,0,.08)) --- */
.mx-navbar .mx-mega-panel {
  border-radius: var(--mx-radius-md);     /* 10px per V2 spec */
  border: 1px solid var(--mx-border-light);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.08), 0 4px 34px rgba(206, 206, 206, 0.25);
  padding: var(--mx-space-5);
  top: calc(100% + 12px);
}
.mx-navbar .mx-mega-link {
  padding: 10px 12px;                     /* ref item padding 10px 15px rhythm */
  border-radius: var(--mx-radius-sm);
}
.mx-navbar .mx-mega-txt strong { font-size: var(--mx-text-base); }
.mx-navbar .mx-mega-txt small { color: var(--mx-ink-muted); }

/* --- Legacy dropdowns (providers/user/location): same 10px + diffuse panel --- */
.mx-navbar .mx-providers-dropdown,
.mx-navbar .mx-user-dropdown,
.mx-navbar .mx-location-dropdown {
  border-radius: var(--mx-radius-md);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.08), 0 4px 34px rgba(206, 206, 206, 0.25);
  border: 1px solid var(--mx-border-light);
}
.mx-navbar .mx-providers-link,
.mx-navbar .mx-user-dropdown-link,
.mx-navbar .mx-location-item {
  border-radius: var(--mx-radius-sm);
}
.mx-navbar .mx-nav-providers,
.mx-navbar .mx-nav-location {
  height: 44px;                           /* 44px touch floor */
}

/* --- Mobile drawer (390): slide-down panel, eased, no overflow --- */
@media (max-width: 1023px) {
  .mx-nav-mobile-menu {
    display: block;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    opacity: 0;
    border-bottom: 0 solid var(--mx-border-light);
    transition: max-height var(--mx-duration-normal) var(--mx-ease-out),
                opacity var(--mx-duration-base) var(--mx-ease-out),
                padding var(--mx-duration-base) var(--mx-ease-out),
                border-bottom-width var(--mx-duration-fast) linear;
  }
  .mx-nav-mobile-menu.open {
    display: block;
    max-height: calc(100vh - 80px);
    opacity: 1;
    overflow-y: auto;
    padding-top: var(--mx-space-3);
    padding-bottom: var(--mx-space-4);
    border-bottom-width: 1px;
  }
  .mx-nav-mobile-menu .mx-mobile-link { font-size: var(--mx-text-base); }
  .mx-nav-hamburger { width: 44px; height: 44px; }
}

/* --- Footer (ref: white body, col titles 20px/700 capitalize mb-24, links 16px/24px-lh,
       newsletter white pill 59px w/ 44px gradient CTA inside, social 32px circles) --- */
footer.mx-footer .mx-footer-grid {
  gap: var(--mx-space-10);
  padding: var(--mx-space-12) 0 var(--mx-space-8);
}
footer.mx-footer .mx-footer-col-title {
  font-size: var(--mx-text-xl);           /* 20px ref */
  font-weight: var(--mx-font-weight-bold);
  text-transform: capitalize;             /* ref: capitalize, not uppercase */
  letter-spacing: 0;
  margin: 0 0 var(--mx-space-6);          /* mb-24 ref */
}
footer.mx-footer .mx-footer-link {
  font-size: var(--mx-text-lg);           /* 16px ref */
  line-height: 24px;                      /* ref 24px row rhythm */
  padding: 3px 0;
}

/* Newsletter CTA card: white pill card + solid primary CTA (ref anatomy) */
footer.mx-footer .mx-footer-newsletter-banner {
  background: color-mix(in srgb, var(--mx-primary) 6%, var(--mx-surface));
  border-bottom: 1px solid var(--mx-border-light);
  padding: var(--mx-space-6) 0;
}
footer.mx-footer .mx-footer-news-form {
  background: var(--mx-surface);
  border: 1px solid var(--mx-border-light);
  border-radius: var(--mx-radius-pill);
  box-shadow: 0 7.5px 17.5px rgba(0, 0, 0, 0.05);
  padding: 6px;
  gap: 6px;
  max-width: 480px;
}
footer.mx-footer .mx-footer-news-input {
  border: 0;
  background: transparent;
  border-radius: var(--mx-radius-pill);
  color: var(--mx-ink);
  padding: 12px 16px;
}
footer.mx-footer .mx-footer-news-input::placeholder { color: var(--mx-ink-muted); }
footer.mx-footer .mx-footer-news-btn {
  height: 44px;                           /* ref CTA 44px inside pill */
  padding: 10px 20px;
  border-radius: var(--mx-radius-btn);
  background: var(--mx-primary);
  color: var(--mx-white);
  box-shadow: var(--mx-shadow-cta);
}
footer.mx-footer .mx-footer-news-btn:hover {
  background: var(--mx-primary-dark);
  color: var(--mx-white);
  box-shadow: var(--mx-shadow-cta-hover);
}
footer.mx-footer .mx-footer-news-success { color: var(--mx-primary-darker); }

/* Newsletter banner text on light card → dark ink (13px floor, AA) */
footer.mx-footer .mx-footer-news-title { color: var(--mx-ink-deep); font-size: 20px; }
footer.mx-footer .mx-footer-news-title i { color: var(--mx-primary-dark); }
footer.mx-footer .mx-footer-news-sub { color: var(--mx-ink-muted); font-size: var(--mx-text-base); }

/* Social circles 32px (ref) with AA-safe hover fill */
footer.mx-footer .mx-footer-social a {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--mx-white-a08);
  border: 1px solid var(--mx-white-a15);
  color: color-mix(in srgb, var(--mx-white) 80%, transparent);
}
footer.mx-footer .mx-footer-social a:hover {
  background: var(--mx-primary);
  border-color: var(--mx-primary);
  color: var(--mx-white);
}

/* App badges: pill rhythm on dark */
footer.mx-footer .mx-footer-appbadge { border-radius: var(--mx-radius-sm); }

/* Bottom bar: deep bar with top rule (ref 57px) */
footer.mx-footer .mx-footer-bottom { padding: var(--mx-space-5) 0; }
footer.mx-footer .mx-footer-copy { font-size: var(--mx-text-base); }

/* Back-to-top + breadcrumb polish (owned surfaces) */
.mx-back-to-top { border-radius: var(--mx-radius-pill); }
.section-header-breadcrumb { font-size: var(--mx-text-base); }
.breadcrumb-item a { font-size: var(--mx-text-base); }
.breadcrumb-item.active { color: var(--mx-ink-deep); }

/* Footer focus-visible parity on dark bg */
footer.mx-footer .mx-footer-link:focus-visible,
footer.mx-footer .mx-footer-social a:focus-visible,
footer.mx-footer .mx-footer-appbadge:focus-visible,
footer.mx-footer .mx-footer-news-input:focus-visible,
footer.mx-footer .mx-footer-news-btn:focus-visible,
.mx-back-to-top:focus-visible,
.mx-nav-hamburger:focus-visible,
.mx-nav-providers:focus-visible,
.mx-nav-location:focus-visible,
.mx-nav-user:focus-visible,
.mx-nav-cart:focus-visible,
.mx-mobile-acc-btn:focus-visible {
  outline: 2px solid var(--mx-primary);
  outline-offset: 2px;
}

/* Bump note: layout links carry ?v=dc3 (mainlayout/auth/head_admin/head). */

/* --- V2.1 nav link color reconciliation (Agent 7) ------------------------
   listing_mx.css:9565 re-asserts #mxNavbar .mx-navbar-link {ink-soft} at ID
   specificity for AA. Reference anatomy wants slate-900 base (#0f172a = 15.8:1
   on white — comfortably AA, stricter than the rule it replaces) and hover =
   Doccure blue. Mirrored at equal-or-higher specificity inside my owned block. */
#mxNavbar .mx-navbar-link { color: var(--mx-ink-deep); }
#mxNavbar .mx-navbar-link:hover,
#mxNavbar .mx-navbar-link:focus-visible,
#mxNavbar .mx-navbar-link.active,
#mxNavbar .mx-mega-trigger[aria-expanded="true"] {
  color: var(--mx-brand-light);
}
#mxNavbar .mx-navbar-link.active {
  color: var(--mx-primary-darker);
  font-weight: var(--mx-font-weight-semibold);
}

/* --- V2.1 specificity fix (Agent 7): listing_mx.css loads after ui_mx and
   re-asserts #mxNavbar .mx-navbar-link (1,1,0) with ink-soft. This block at
   (1,2,0) wins regardless of sheet order. Values identical to p6 above. --- */
#mxNavbar.mx-navbar .mx-navbar-link { color: var(--mx-ink-deep); }
#mxNavbar.mx-navbar .mx-navbar-link:hover,
#mxNavbar.mx-navbar .mx-navbar-link:focus-visible {
  color: var(--mx-brand-light);
}
#mxNavbar.mx-navbar .mx-navbar-link.active {
  color: var(--mx-primary-darker);
  font-weight: var(--mx-font-weight-semibold);
}
#mxNavbar.mx-navbar .mx-mega-trigger[aria-expanded="true"] {
  color: var(--mx-brand-light);
}