/* ============================================================================
   VoyaMed — Pass 24 portal & SPA theme override
   ----------------------------------------------------------------------------
   A high-specificity stylesheet that re-skins every SPA panel, form, table,
   button, modal, and adapter-injected element in the VoyaMed architectural
   conventions (oversized serif headings, generous whitespace, alternating
   dark/light surfaces, circle-content accents) using the existing VoyaMed
   warm palette — gold #C9A96E, dark #1A1A18, cream #F8F5F0, teal #2A5C52.
   Loaded AFTER the SPA's inline <style> so these rules win without !important.
   ========================================================================== */

/* ── Token reset / refinement ──────────────────────────────────────────── */
:root {
  --gold:        #C9A96E;
  --gold-deep:   #9B6B1A;
  --gold-light:  #E8D5B0;
  --gold-soft:   rgba(201,169,110,0.12);
  --dark:        #1A1A18;
  --dark-2:      #242420;
  --dark-3:      #2E2E2A;
  --dark-4:      #3a3835;
  --cream:       #F8F5F0;
  --cream-2:     #EDE9E0;
  --cream-3:     #E0DACA;
  --text:        #2a2826;
  --text-muted:  #7A7668;
  --text-faint:  #A19E92;
  --white:       #FFFFFF;
  --teal:        #2A5C52;
  --teal-light:  #D4E8E4;
  --error:       #B85C5C;
  --error-soft:  rgba(184,92,92,0.10);
  --success:     #2A7A52;
  --success-soft:rgba(42,122,82,0.10);
  --warning:     #B58105;
  --warning-soft:rgba(181,129,5,0.12);

  --radius:      14px;
  --radius-sm:   10px;
  --radius-lg:   24px;
  --radius-pill: 999px;

  --shadow:      0 4px 24px rgba(0,0,0,0.06);
  --shadow-sm:   0 2px 10px rgba(0,0,0,0.04);
  --shadow-md:   0 12px 40px rgba(0,0,0,0.10);
  --shadow-lg:   0 24px 60px rgba(0,0,0,0.14);

  --transition:  0.25s cubic-bezier(.4,0,.2,1);

  --serif:       'Cormorant Garamond', Georgia, serif;
  --sans:        'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Body / base typography ────────────────────────────────────────────── */
body {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: 1.18; letter-spacing: -0.005em; color: var(--dark); }
h1 { font-size: clamp(32px, 4vw, 48px); font-weight: 400; }
h2 { font-size: clamp(24px, 2.6vw, 32px); }
h3 { font-size: 20px; font-weight: 500; }
h4 { font-size: 17px; font-weight: 500; }
p  { line-height: 1.6; }
em { color: var(--gold); font-style: italic; }

a { color: var(--teal); transition: var(--transition); }
a:hover { color: var(--gold-deep); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

/* ============================================================================
   1. LOGIN / REGISTER SCREEN
   ========================================================================== */

/* Visibility note: the SPA uses `.screen { display:none } .screen.active { display:flex }`
   to toggle which screen renders. My styles for #screen-login MUST NOT override
   display: in the base rule, or the login screen will stay visible after a
   successful login and stack above the dashboard. Below: only paint when the
   active class is present; otherwise force-hide to win over any other rule. */
#screen-login {
  background:
    radial-gradient(ellipse 60% 50% at 80% 30%, rgba(201,169,110,0.18), transparent 60%),
    radial-gradient(ellipse 50% 60% at 20% 80%, rgba(42,92,82,0.14),  transparent 60%),
    var(--dark) !important;
  min-height: 100vh;
  color: var(--cream);
  position: relative;
  overflow: hidden;
}
#screen-login:not(.active) { display: none !important; }
#screen-login.active {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
/* Same defensive treatment for the dashboard screen — keep it hidden until
   the SPA flips it active. Prevents any stray rule from leaking the
   dashboard onto the login or sign-in views. */
#screen-app:not(.active) { display: none !important; }
#screen-login::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(248,245,240,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(248,245,240,0.035) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000, transparent 75%);
}
.login-wrap {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, 480px);
  gap: clamp(40px, 6vw, 96px);
  max-width: 1240px;
  width: 100%;
  padding: 60px clamp(20px, 4vw, 48px);
  align-items: center;
}
.login-left {
  color: var(--cream);
  max-width: 560px;
}
.login-eyebrow {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold) !important;
  margin-bottom: 24px;
}
.login-title {
  font-family: var(--serif) !important;
  font-weight: 400;
  font-size: clamp(40px, 5.5vw, 72px);
  line-height: 1.05;
  margin-bottom: 22px;
  color: var(--cream);
  letter-spacing: -0.01em;
}
.login-title em { color: var(--gold); font-style: italic; }
.login-subtitle {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(248,245,240,0.72);
  margin-bottom: 40px;
  max-width: 50ch;
}
.login-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  padding-top: 28px;
  border-top: 1px solid rgba(248,245,240,0.12);
  max-width: 380px;
}
.login-stat-num {
  /* Pass 26: switched to sans + tabular figures so the digit 1 reads
     clearly as a 1 (Cormorant's "1" is a thin flag that can read like an l). */
  font-family: var(--sans);
  font-weight: 600;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: -0.01em;
  font-size: clamp(32px, 3.4vw, 42px);
  line-height: 1;
  color: var(--gold);
  margin-bottom: 6px;
}
.login-stat-label {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(248,245,240,0.55);
  text-transform: uppercase;
}

/* Login card */
.login-card {
  background: var(--cream);
  color: var(--text);
  border-radius: var(--radius-lg);
  padding: 36px 36px 32px;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.login-card::before {
  content: '';
  position: absolute;
  top: -40%; right: -30%;
  width: 70%; aspect-ratio: 1;
  border-radius: 50%;
  background: var(--gold-soft);
  pointer-events: none;
}
.login-card > * { position: relative; z-index: 1; }

.login-card .back-to-site-btn,
.login-card [onclick="backToSite()"] {
  color: var(--text-faint) !important;
  font-size: 12px !important;
  letter-spacing: 0.06em;
  padding: 4px 0 18px !important;
}
.login-card [onclick="backToSite()"]:hover { color: var(--gold-deep) !important; }

/* Brand mark inside login card */
.login-card > div[style*="text-align:center"]:first-of-type {
  margin-bottom: 24px !important;
}
.login-card > div[style*="text-align:center"]:first-of-type > div:first-child {
  color: var(--dark) !important;
  font-size: 26px !important;
}
.login-card > div[style*="text-align:center"]:first-of-type > div:first-child span {
  color: var(--gold-deep) !important;
}
.login-card > div[style*="text-align:center"]:first-of-type > div:last-child {
  color: var(--text-faint) !important;
  font-size: 11px !important;
}

/* Tabs */
.login-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 28px;
  padding: 4px;
  background: var(--cream-2);
  border-radius: var(--radius-pill);
}
.login-tab {
  flex: 1;
  background: transparent !important;
  color: var(--text-muted) !important;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  padding: 10px 16px;
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: var(--transition);
}
.login-tab.active {
  background: var(--white) !important;
  color: var(--dark) !important;
  box-shadow: var(--shadow-sm);
}
.login-tab:hover:not(.active) { color: var(--dark); }

/* Forms inside login + everywhere */
.login-form, #signin-form, #register-wizard { display: flex; flex-direction: column; gap: 16px; }
.f-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 0 !important; }
.f-label {
  font-family: var(--sans) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted) !important;
}
.f-input, .f-input[type], input.f-input, textarea.f-input, select.f-input,
input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="number"], input[type="date"], input[type="search"], textarea, select {
  font-family: var(--sans) !important;
  font-size: 15px !important;
  font-weight: 400;
  padding: 13px 16px !important;
  background: var(--white) !important;
  color: var(--text) !important;
  border: 1px solid var(--cream-3) !important;
  border-radius: var(--radius-sm) !important;
  transition: var(--transition);
  width: 100%;
}
.f-input::placeholder { color: var(--text-faint); }
.f-input:focus, input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 4px var(--gold-soft) !important;
}
.f-input.error, .f-input.f-invalid {
  border-color: var(--error) !important;
  box-shadow: 0 0 0 4px var(--error-soft) !important;
}
.login-error {
  background: var(--error-soft);
  color: var(--error);
  font-size: 13px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--error);
}

/* ============================================================================
   2. PORTAL SHELL (sidebar + main)
   ========================================================================== */

#screen-app, #portal-root { background: var(--cream); }
#screen-app .sidebar, .sidebar {
  background: var(--dark) !important;
  color: var(--cream);
  border-right: 1px solid var(--dark-3);
  box-shadow: 0 0 40px rgba(0,0,0,0.18);
}
.sidebar-logo, .sidebar-brand {
  font-family: var(--serif) !important;
  color: var(--cream) !important;
  font-size: 26px !important;
  letter-spacing: -0.01em;
}
.sidebar-logo span, .sidebar-brand span { color: var(--gold) !important; }
.sidebar-sub {
  color: var(--text-faint) !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
}
.sidebar-nav { padding: 12px 8px !important; }
.nav-link {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 11px 14px !important;
  margin: 2px 0;
  border-radius: var(--radius-sm) !important;
  color: rgba(248,245,240,0.7) !important;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  transition: var(--transition);
  border: 1px solid transparent;
}
.nav-link:hover {
  background: rgba(201,169,110,0.10) !important;
  color: var(--cream) !important;
}
.nav-link.active, .nav-link[data-active="true"] {
  background: rgba(201,169,110,0.18) !important;
  color: var(--gold) !important;
  border-color: rgba(201,169,110,0.25) !important;
}
.nav-icon, .nav-link .nav-icon, .nav-link svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav-link svg { stroke: currentColor; fill: none; stroke-width: 1.8; }

.sidebar-user, .sidebar-user-name, .sidebar-user-role {
  color: var(--cream) !important;
}
.sidebar-user-name { font-weight: 500; }
.sidebar-user-role {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-faint) !important;
  text-transform: uppercase;
}
.btn-logout {
  background: transparent !important;
  border: 1px solid rgba(248,245,240,0.18) !important;
  color: rgba(248,245,240,0.7) !important;
  border-radius: var(--radius-pill) !important;
  padding: 9px 18px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em;
}
.btn-logout:hover {
  background: rgba(248,245,240,0.08) !important;
  color: var(--gold) !important;
  border-color: var(--gold) !important;
}

/* Main content area */
#screen-app .main-content, .main-content {
  background: var(--cream) !important;
  padding: clamp(24px, 4vw, 56px) !important;
}
.page-header, .panel-head {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--cream-2);
}
.page-title, .panel-title {
  font-family: var(--serif) !important;
  font-weight: 400 !important;
  font-size: clamp(28px, 3vw, 40px) !important;
  color: var(--dark) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em;
}
.page-subtitle, .panel-subtitle {
  color: var(--text-muted) !important;
  font-size: 15px !important;
  margin-top: 8px;
}

/* ============================================================================
   3. CARDS (the bread-and-butter of every panel)
   ========================================================================== */

.card {
  background: var(--white) !important;
  border: 1px solid var(--cream-2) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 0 !important;
  overflow: hidden;
  transition: var(--transition) !important;
}
.card:hover { box-shadow: var(--shadow) !important; transform: none !important; }
.card-header {
  padding: 22px 26px 14px !important;
  border-bottom: 1px solid var(--cream-2) !important;
  background: transparent !important;
}
.card-header h3, .card-header h2 {
  font-family: var(--serif) !important;
  font-weight: 500 !important;
  font-size: 20px !important;
  color: var(--dark) !important;
}
.card-body { padding: 22px 26px 26px !important; }

/* ============================================================================
   4. BUTTONS
   ========================================================================== */

button, .btn, .btn-primary, .btn-gold, .btn-dark, .btn-outline, .btn-sm,
.btn-outline-sm, .btn-approve, .btn-cancel, .btn-back {
  font-family: var(--sans) !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em;
  border-radius: var(--radius-pill) !important;
  transition: var(--transition) !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-primary, .btn-gold {
  background: var(--gold) !important;
  color: var(--dark) !important;
  border: 1px solid var(--gold) !important;
  padding: 13px 26px !important;
  font-size: 14px !important;
  box-shadow: 0 4px 14px rgba(201,169,110,0.28);
}
.btn-primary:hover, .btn-gold:hover {
  background: var(--gold-light) !important;
  border-color: var(--gold-light) !important;
  box-shadow: 0 6px 20px rgba(201,169,110,0.35);
  transform: translateY(-1px);
}
.btn-dark {
  background: var(--dark) !important;
  color: var(--cream) !important;
  border: 1px solid var(--dark) !important;
  padding: 13px 26px !important;
  font-size: 14px !important;
}
.btn-dark:hover { background: var(--dark-3) !important; }
.btn-outline {
  background: transparent !important;
  color: var(--dark) !important;
  border: 1px solid var(--cream-3) !important;
  padding: 13px 26px !important;
  font-size: 14px !important;
}
.btn-outline:hover { border-color: var(--dark); background: var(--dark) !important; color: var(--cream) !important; }
.btn-outline-sm, .btn-sm {
  padding: 8px 16px !important;
  font-size: 12px !important;
}
.btn-approve {
  background: var(--success) !important;
  color: var(--white) !important;
  border: 0 !important;
  padding: 9px 18px !important;
  font-size: 13px !important;
}
.btn-approve:hover { background: #1f5d3e !important; }
.btn-cancel {
  background: var(--error) !important;
  color: var(--white) !important;
  border: 0 !important;
  padding: 9px 18px !important;
  font-size: 13px !important;
}
.btn-cancel:hover { background: #8b4444 !important; }
.btn-back {
  background: transparent !important;
  color: var(--text-muted) !important;
  border: 0 !important;
  padding: 8px 0 !important;
  font-size: 13px !important;
}
.btn-back:hover { color: var(--gold-deep) !important; }

/* ============================================================================
   5. TABLES (admin lists, payments, bookings, etc.)
   ========================================================================== */

.admin-table, table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  font-size: 14px;
}
.admin-table thead th, table thead th {
  background: var(--cream) !important;
  color: var(--text-muted) !important;
  font-family: var(--sans) !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  padding: 14px 18px !important;
  text-align: left;
  border-bottom: 1px solid var(--cream-2) !important;
}
.admin-table tbody td, table tbody td {
  padding: 14px 18px !important;
  border-bottom: 1px solid var(--cream-2) !important;
  color: var(--text) !important;
  vertical-align: middle;
}
.admin-table tbody tr:hover td, table tbody tr:hover td {
  background: var(--cream) !important;
}
.admin-table tbody tr:last-child td, table tbody tr:last-child td { border-bottom: 0 !important; }

/* ============================================================================
   6. ADMIN STATS / TABS
   ========================================================================== */

.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
  margin-bottom: 28px;
}
.admin-stat {
  background: var(--white) !important;
  border: 1px solid var(--cream-2) !important;
  border-radius: var(--radius) !important;
  padding: 22px 24px !important;
  box-shadow: var(--shadow-sm) !important;
}
.admin-stat-val {
  /* Pass 26: sans + tabular figures for unambiguous numerals. */
  font-family: var(--sans) !important;
  font-weight: 600 !important;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: -0.01em;
  font-size: 36px !important;
  color: var(--dark) !important;
  line-height: 1 !important;
  margin-bottom: 6px;
}
.admin-stat-lbl {
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
  color: var(--text-muted) !important;
}

.admin-tabs, .admin-cert-tabs {
  display: flex;
  gap: 4px;
  background: var(--cream-2);
  padding: 4px;
  border-radius: var(--radius-pill);
  margin-bottom: 24px;
  width: fit-content;
}
.admin-tab, .admin-cert-tab {
  background: transparent !important;
  color: var(--text-muted) !important;
  font-family: var(--sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 9px 18px !important;
  border: 0 !important;
  border-radius: var(--radius-pill) !important;
  cursor: pointer;
  transition: var(--transition);
}
.admin-tab.active, .admin-cert-tab.active {
  background: var(--white) !important;
  color: var(--dark) !important;
  box-shadow: var(--shadow-sm);
}

/* ============================================================================
   7. EMPTY STATES + BADGES
   ========================================================================== */

.empty-state {
  background: var(--white);
  border: 1px dashed var(--cream-3);
  border-radius: var(--radius);
  padding: 56px 28px !important;
  text-align: center;
  color: var(--text-muted);
}
.empty-state .empty-icon {
  font-size: 40px !important;
  opacity: 0.4;
  margin-bottom: 16px;
}
.empty-state h3 { color: var(--dark); margin-bottom: 8px; }
.empty-state p { color: var(--text-muted); }

.badge, .status-badge, .booking-status, .pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.badge-pending,   .status-pending   { background: var(--warning-soft); color: var(--warning); }
.badge-confirmed, .status-confirmed { background: var(--success-soft); color: var(--success); }
.badge-completed, .status-completed { background: var(--teal-light); color: var(--teal); }
.badge-cancelled, .status-cancelled,
.badge-declined,  .status-declined  { background: var(--error-soft); color: var(--error); }
.badge-pending_payment, .status-pending_payment { background: var(--gold-soft); color: var(--gold-deep); }

/* ============================================================================
   8. ADAPTER-INJECTED MODALS (pass 12/13/17/19/21 overlays)
   ========================================================================== */

/* The adapter creates inline-styled overlays with id="vm-*-modal" and
   inline cssText starting with "position:fixed;inset:0;background:rgba(0,0,0,0.5)".
   We grab them all via attribute selectors so the look matches without
   touching the JS that owns the markup. */
[id^="vm-"][id$="-modal"] {
  background: rgba(26,26,24,0.72) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
[id^="vm-"][id$="-modal"] > div:first-child {
  background: var(--cream) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid var(--cream-2);
  padding: 32px !important;
  font-family: var(--sans) !important;
}
[id^="vm-"][id$="-modal"] h3 {
  font-family: var(--serif) !important;
  font-weight: 400 !important;
  font-size: 24px !important;
  color: var(--dark) !important;
  letter-spacing: -0.005em;
  margin: 0;
}
[id^="vm-"][id$="-modal"] label {
  font-family: var(--sans);
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted) !important;
}
[id^="vm-"][id$="-modal"] input,
[id^="vm-"][id$="-modal"] select,
[id^="vm-"][id$="-modal"] textarea {
  font-family: var(--sans) !important;
  font-size: 15px !important;
  padding: 12px 14px !important;
  background: var(--white) !important;
  color: var(--text) !important;
  border: 1px solid var(--cream-3) !important;
  border-radius: var(--radius-sm) !important;
}
[id^="vm-"][id$="-modal"] input:focus,
[id^="vm-"][id$="-modal"] select:focus,
[id^="vm-"][id$="-modal"] textarea:focus {
  outline: none !important;
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 4px var(--gold-soft) !important;
}
[id^="vm-"][id$="-modal"] button {
  font-family: var(--sans) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  border-radius: var(--radius-pill) !important;
  padding: 10px 22px !important;
  transition: var(--transition) !important;
  cursor: pointer;
}
/* Primary submit-style buttons (adapter uses #2c5f5d teal) */
[id^="vm-"][id$="-modal"] button[style*="#2c5f5d"],
[id^="vm-"][id$="-modal"] button[id$="-submit"],
[id^="vm-"][id$="-modal"] button[id$="-save"],
[id^="vm-"][id$="-modal"] button[id$="-confirm"] {
  background: var(--dark) !important;
  color: var(--cream) !important;
  border: 1px solid var(--dark) !important;
}
[id^="vm-"][id$="-modal"] button[id$="-submit"]:hover,
[id^="vm-"][id$="-modal"] button[id$="-save"]:hover,
[id^="vm-"][id$="-modal"] button[id$="-confirm"]:hover {
  background: var(--gold) !important;
  color: var(--dark) !important;
  border-color: var(--gold) !important;
}
/* Cancel / close style */
[id^="vm-"][id$="-modal"] button[id$="-cancel"],
[id^="vm-"][id$="-modal"] button[id$="-done"] {
  background: transparent !important;
  color: var(--text-muted) !important;
  border: 1px solid var(--cream-3) !important;
}
[id^="vm-"][id$="-modal"] button[id$="-cancel"]:hover,
[id^="vm-"][id$="-modal"] button[id$="-done"]:hover {
  border-color: var(--dark) !important;
  color: var(--dark) !important;
}
/* Destructive (delete / clear) */
[id^="vm-"][id$="-modal"] button[style*="#c0392b"],
[id^="vm-"][id$="-modal"] button[style*="#b58105"] {
  border-radius: var(--radius-pill) !important;
}

/* Status badges inside payment modal (uses inline bg color) */
[id^="vm-"][id$="-modal"] span[style*="border-radius:10px"][style*="color:#fff"] {
  font-family: var(--sans) !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
  font-size: 10px !important;
}

/* Adapter-injected small buttons (set-step, payments, etc.) */
.vm-set-step-btn, .vm-payments-btn, .vm-mark-complete-btn,
.vm-admin-book-btn, .vm-admin-cancel-btn, .vm-pay-card-btn,
.vm-print-btn, .vm-flow-controls button {
  font-family: var(--sans) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border-radius: var(--radius-pill) !important;
  padding: 6px 14px !important;
  transition: var(--transition) !important;
}
.vm-set-step-btn      { background: var(--white) !important; color: var(--dark) !important; border: 1px solid var(--dark-3) !important; }
.vm-set-step-btn:hover{ background: var(--dark) !important; color: var(--cream) !important; }
.vm-payments-btn      { background: var(--white) !important; color: var(--gold-deep) !important; border: 1px solid var(--gold) !important; }
.vm-payments-btn:hover{ background: var(--gold) !important; color: var(--dark) !important; }
.vm-mark-complete-btn { background: var(--success) !important; color: var(--white) !important; border: 0 !important; }
.vm-admin-book-btn    { background: var(--gold) !important; color: var(--dark) !important; border: 0 !important; }
.vm-admin-cancel-btn  { background: var(--error) !important; color: var(--white) !important; border: 0 !important; }

/* Adapter search box */
.vm-search-wrap, .vm-admin-search {
  font-family: var(--sans);
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--cream-3) !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
}
.vm-admin-search:focus {
  outline: none !important;
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 4px var(--gold-soft) !important;
}

/* ============================================================================
   9. TOASTS (vm-ui.js toast() function)
   ========================================================================== */

#vm-toast-host, #toast-container, .vm-toast {
  font-family: var(--sans) !important;
}
.vm-toast {
  background: var(--dark) !important;
  color: var(--cream) !important;
  border-radius: var(--radius) !important;
  padding: 14px 22px !important;
  font-size: 14px !important;
  box-shadow: var(--shadow-md) !important;
  border-left: 4px solid var(--gold) !important;
}
.vm-toast.success { border-left-color: var(--success) !important; }
.vm-toast.error,
.vm-toast.danger  { border-left-color: var(--error)   !important; }
.vm-toast.warn,
.vm-toast.warning { border-left-color: var(--warning) !important; }

/* ============================================================================
   10. BOOKING JOURNEY / PROGRESS STEPS
   ========================================================================== */

.bj-step, .booking-journey-step {
  background: var(--white);
  border: 1px solid var(--cream-2);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.bj-num {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--text-muted);
  display: grid; place-items: center;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 16px;
  flex-shrink: 0;
}
.bj-num.active { background: var(--gold) !important; color: var(--dark) !important; }
.bj-num.done   { background: var(--success) !important; color: var(--white) !important; }
.bj-num.locked { background: var(--cream-2) !important; color: var(--text-faint) !important; }
.bj-label { color: var(--text); font-weight: 500; }
.bj-label.active { color: var(--gold-deep) !important; }
.bj-label.done   { color: var(--success) !important; }
.bj-label.locked { color: var(--text-faint) !important; }
.bj-connector { background: var(--cream-2) !important; height: 2px !important; }
.bj-connector.done { background: var(--success) !important; }

/* ============================================================================
   11. WIZARD (register) progress strip
   ========================================================================== */

.wiz-progress {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}
.wiz-progress > * {
  flex: 1;
  height: 4px;
  background: var(--cream-2);
  border-radius: 2px;
  transition: var(--transition);
}
.wiz-progress > .active,
.wiz-progress > .done {
  background: var(--gold) !important;
}

/* ============================================================================
   12. HERO CARD (login left side procedure list — make it match landing chips)
   ========================================================================== */

.hero-card {
  background: rgba(248,245,240,0.06) !important;
  border: 1px solid rgba(248,245,240,0.10) !important;
  border-radius: var(--radius) !important;
  backdrop-filter: blur(20px);
}
.hero-card-title {
  font-family: var(--sans) !important;
  font-size: 11px !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold) !important;
}
.hero-proc-item {
  border-bottom: 1px solid rgba(248,245,240,0.08) !important;
  padding: 12px 0 !important;
}
.hero-proc-name { color: var(--cream) !important; font-size: 14px !important; }
.hero-proc-savings { color: var(--gold) !important; font-size: 13px !important; font-weight: 500 !important; }

/* ============================================================================
   13. FORM FIELDS GLOBAL (catch-all for forms outside .login-card)
   ========================================================================== */

label { color: var(--text); font-size: 14px; font-weight: 500; }
::placeholder { color: var(--text-faint) !important; }

/* Checkbox / radio reset */
input[type="checkbox"], input[type="radio"] {
  width: 18px; height: 18px;
  accent-color: var(--gold);
  cursor: pointer;
}

/* ============================================================================
   14. LANDING-style page chrome for /privacy and /terms
   ========================================================================== */

body.vm-legal {
  background: var(--cream);
  color: var(--text);
  font-family: var(--sans);
  max-width: none;
  margin: 0;
  padding: 0;
  line-height: 1.65;
}
.vm-legal .vm-legal-shell {
  max-width: 820px;
  margin: 0 auto;
  padding: 80px 32px 120px;
}
.vm-legal h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 56px);
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin-bottom: 6px;
}
.vm-legal h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 28px);
  margin-top: 56px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--cream-2);
  padding-bottom: 12px;
}
.vm-legal h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 18px;
  margin-top: 28px;
  margin-bottom: 10px;
}
.vm-legal .muted { color: var(--text-muted); font-size: 14px; }
.vm-legal .banner {
  background: var(--gold-soft);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 28px 0;
  font-size: 14px;
}
.vm-legal a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
.vm-legal a:hover { color: var(--gold-deep); }
.vm-legal ul, .vm-legal ol { padding-left: 24px; margin: 12px 0 18px; }
.vm-legal ul li, .vm-legal ol li { margin: 6px 0; }

.vm-legal-header {
  background: var(--dark);
  color: var(--cream);
  padding: 20px 0;
  border-bottom: 1px solid var(--dark-3);
}
.vm-legal-header__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.vm-legal-header a.brand {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--serif); font-size: 24px; color: var(--cream); text-decoration: none;
}
.vm-legal-header .brand__mark {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--dark);
  display: grid; place-items: center;
  font-weight: 600;
}
.vm-legal-header__nav {
  display: flex; gap: 28px; font-size: 14px;
}
.vm-legal-header__nav a {
  color: rgba(248,245,240,0.7); text-decoration: none; transition: var(--transition);
}
.vm-legal-header__nav a:hover { color: var(--gold); }

.vm-legal-footer {
  background: var(--dark-2);
  color: rgba(248,245,240,0.6);
  padding: 36px 0;
  border-top: 1px solid var(--dark-3);
}
.vm-legal-footer__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
}
.vm-legal-footer a { color: rgba(248,245,240,0.6); text-decoration: none; margin: 0 8px; }
.vm-legal-footer a:hover { color: var(--gold); }

/* ============================================================================
   15. MISCELLANEOUS adapter content (gdpr panel, support form, etc.)
   ========================================================================== */

.vm-gdpr-panel, .vm-stripe-section {
  background: var(--white);
  border: 1px solid var(--cream-2);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}
.vm-photo-upload {
  border: 2px dashed var(--cream-3);
  border-radius: var(--radius);
  padding: 32px;
  background: var(--cream);
  color: var(--text-muted);
  text-align: center;
  transition: var(--transition);
}
.vm-photo-upload:hover { border-color: var(--gold); color: var(--dark); }

/* ============================================================================
   16. RESPONSIVE polish
   ========================================================================== */
@media (max-width: 900px) {
  .login-wrap { grid-template-columns: 1fr; padding: 40px 20px; gap: 40px; }
  .login-left { text-align: left; }
  .login-stats { max-width: none; }
  /* Sidebar collapses to a top bar; nav becomes horizontally scrollable */
  #screen-app .sidebar, .sidebar {
    width: 100% !important;
    height: auto;
    position: relative;
    flex-direction: column;
  }
  .sidebar-nav, #sidebar-nav {
    display: flex !important;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    padding: 8px !important;
    gap: 6px;
    scrollbar-width: thin;
  }
  .sidebar-nav .nav-link, #sidebar-nav .nav-link {
    flex-shrink: 0;
    white-space: nowrap;
  }
  /* Main content gets edge-to-edge padding; cards reflow */
  #screen-app .main-content, .main-content { padding: 18px 14px !important; }
  .card-header { padding: 18px 18px 12px !important; }
  .card-body { padding: 16px 18px 22px !important; }
  /* Admin stats stack to 2 across, then 1 below */
  .admin-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .admin-stat { padding: 16px !important; }
  .admin-stat-val { font-size: 28px !important; }
  /* Tables get horizontal scroll so columns don't squeeze unreadably */
  .admin-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Tabs collapse */
  .admin-tabs, .admin-cert-tabs { overflow-x: auto; flex-wrap: nowrap; }
  /* Adapter modals fill the screen on mobile */
  [id^="vm-"][id$="-modal"] > div:first-child {
    padding: 22px 18px !important;
    border-radius: 16px !important;
    max-width: calc(100vw - 24px) !important;
    max-height: 88vh;
    overflow-y: auto;
  }
}
@media (max-width: 520px) {
  .admin-stats { grid-template-columns: 1fr; }
}

/* ============================================================================
   17. Pass 26 — readable text on cream + medical-profile removal
   ----------------------------------------------------------------------------
   The SPA was originally designed on a dark surface and many of its panels
   render text with color:var(--cream) inline. After pass 24 flipped the
   main-content surface to cream, those white-ish strings became invisible.
   Force a readable dark color on all panel content; specific role coloured
   chips / dark buttons still win because they declare their own colour
   explicitly with !important.
   ========================================================================== */
.main-content,
#main-content,
#main-content .card,
#main-content .panel,
.main-content h1, .main-content h2, .main-content h3, .main-content h4,
.main-content h5, .main-content p, .main-content span:not(.nav-icon),
.main-content li, .main-content td, .main-content th, .main-content label,
.main-content strong, .main-content em, .main-content b, .main-content i,
.main-content div, .main-content small {
  color: var(--text);
}
/* Headings stay near-black to keep hierarchy */
.main-content h1, .main-content h2, .main-content h3,
.main-content .page-title, .main-content .panel-title,
.main-content .card-header h1, .main-content .card-header h2, .main-content .card-header h3 {
  color: var(--dark);
}
/* Sub-meta / hint copy stays muted but readable */
.main-content .muted, .main-content .text-muted, .main-content .hint,
.main-content .panel-subtitle, .main-content .page-subtitle {
  color: var(--text-muted);
}
/* Don't reflood button text — buttons keep their explicit colour. */
.main-content .btn,
.main-content .btn-primary, .main-content .btn-gold,
.main-content .btn-dark, .main-content .btn-cancel,
.main-content .btn-approve, .main-content .btn-outline,
.main-content .btn-sm, .main-content .btn-back {
  color: revert;
}
.main-content .btn-primary, .main-content .btn-gold { color: var(--dark) !important; }
.main-content .btn-dark, .main-content .btn-cancel, .main-content .btn-approve { color: var(--white) !important; }
.main-content .btn-outline, .main-content .btn-back { color: var(--dark) !important; }

/* Topbar (if rendered inside #screen-app) stays dark with cream text. */
.topbar, .topbar * { color: rgba(248,245,240,0.85); }
.topbar a, .topbar .btn-logout, .topbar .back-to-site { color: rgba(248,245,240,0.6); }
.topbar .topbar-logo, .topbar .topbar-logo * { color: var(--cream); }
.topbar .topbar-logo span { color: var(--gold); }

/* ── Hide the Medical Profile section everywhere ──────────────────────── */
/* Sidebar nav entry. The SPA renders nav-link items with id="nav-{panelId}"
   so the medical profile link has id="nav-medical-profile". Belt-and-braces
   includes the inline anchor onclick pattern as a fallback. */
#nav-medical-profile,
.nav-link[onclick*="medical-profile"] {
  display: none !important;
}
/* Panel container — hide if ever rendered. */
#panel-medical-profile,
[data-panel="medical-profile"] {
  display: none !important;
}

/* ============================================================================
   18. Pass 29 — English-only: hide German / Arabic language switchers
   ----------------------------------------------------------------------------
   The SPA originally shipped EN/DE buttons in the top language bar and
   EN/DE/AR buttons in the portal topbar (calling setLang() / setPortalLang()).
   We're removing the non-English options across the whole site. The data-de
   attribute is still in the markup as inert backup translation strings — it
   stays harmless as long as setLang('de') is never invoked. We hide every
   trigger that could call it. JavaScript in the autoPortal bootstrap also
   shorts setLang/setPortalLang to English to defend against any code path
   that calls them programmatically.
   ========================================================================== */

/* Top marketing bar — "DE" button next to EN */
.lang-btn[onclick*="setLang('de')"],
.lang-btn[onclick*="setLang('ar')"],
/* Portal topbar — DE / AR pills */
#pl-de,
#pl-ar,
.portal-lang-btn[onclick*="setPortalLang('de')"],
.portal-lang-btn[onclick*="setPortalLang('ar')"],
/* Any dropdown / mobile link that switches to DE or AR */
[onclick*="setLang('de')"],
[onclick*="setLang('ar')"],
[onclick*="setPortalLang('de')"],
[onclick*="setPortalLang('ar')"] {
  display: none !important;
}

/* Hide focus ring for mouse users, keep for keyboard */
:focus:not(:focus-visible) { outline: none !important; box-shadow: none !important; }