/* ============================================================================
   vNotes — Twilight Theme ("Dim & Amber")
   ----------------------------------------------------------------------------
   All rules are scoped to  html[data-theme="twilight"]  so toggling the
   theme attribute turns this entire file on/off with zero side effects on
   the other themes. No Tailwind classes are renamed — only their cascade
   is overridden.

   Twilight is a DARK theme: dim blue-gray surfaces, warm amber accent,
   Fraunces serif display headings, Inter Tight body, SOFT rounded corners.

   Parity note: this file mirrors editorial.css section-by-section (same
   selector list) so the two themes stay structurally identical. Because
   Twilight is dark — where editorial inherited the app's light surfaces —
   it additionally force-darkens every light Tailwind/utility surface (the
   "dark-mode safety sweep") so nothing renders white-on-dark.

   Token inversion vs editorial: editorial used --ds-ink (dark) as the
   "strong" fill for CTAs/active nav/pills. On a dark theme the strong fill
   is the ACCENT, so those same selectors fill with --ds-accent and use
   --ds-on-accent for their text.
   ============================================================================ */

/* ─── Tokens ──────────────────────────────────────────────────────────────── */
html[data-theme="twilight"] {
  --ds-ink:          #E8E3D8;          /* warm off-white — text / CTA text family */
  --ds-bg:           #1C2230;          /* dim blue-gray page */
  --ds-bg-deep:      #161B26;          /* chrome: sidebar, titlebar, topbar */
  --ds-surface:      #262E40;          /* cards / panels */
  --ds-surface-2:    #2E3648;          /* raised / hover tint */
  --ds-surface-3:    #353F54;          /* inputs */
  --ds-accent:       #E0A458;          /* amber */
  --ds-accent-2:     #C98A3E;          /* deeper amber */
  --ds-clay:         #C98A3E;          /* clay slot → deep amber */
  --ds-accent-soft:  rgba(224,164,88,0.16);
  --ds-on-accent:    #1C2230;          /* text on amber fills */

  --ds-text-primary:   rgba(232,227,216,1.00);
  --ds-text-secondary: rgba(232,227,216,0.72);
  --ds-text-muted:     rgba(232,227,216,0.52);
  --ds-text-faint:     rgba(232,227,216,0.38);
  --ds-divider:        #3A4357;
  --ds-divider-soft:   #2E3648;

  /* Muted, dark-tuned semantic colors */
  --ds-success:      #7FB88A;
  --ds-success-soft: rgba(127,184,138,0.16);
  --ds-danger:       #E0726A;
  --ds-danger-soft:  rgba(224,114,106,0.16);
  --ds-warning:      #E0A458;
  --ds-warning-soft: rgba(224,164,88,0.18);

  --ds-font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --ds-font-sans:  'Inter Tight', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ds-font-mono:  ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* SOFT roundness (editorial was 2px blocks) */
  --ds-radius-block: 12px;
  --ds-radius-lg:    18px;
  --ds-radius-pill:  999px;

  --ds-ease:     cubic-bezier(.2, .9, .25, 1);
  --ds-dur-rev:  0.9s;
  --ds-dur-hero: 1.1s;

  --ds-shadow:    0 8px 28px rgba(0,0,0,0.35);
  --ds-shadow-lg: 0 24px 60px rgba(0,0,0,0.5);

  color-scheme: dark;
}

/* ─── Base ────────────────────────────────────────────────────────────────── */
html[data-theme="twilight"],
html[data-theme="twilight"] body {
  background: var(--ds-bg) !important;
  color: var(--ds-text-primary) !important;
  font-family: var(--ds-font-sans) !important;
}

html[data-theme="twilight"] body {
  line-height: 1.6;
}

/* Type system → editorial pairing (serif display, sans body, mono labels) */
html[data-theme="twilight"] .font-headline,
html[data-theme="twilight"] .font-serif,
html[data-theme="twilight"] h1, html[data-theme="twilight"] h2,
html[data-theme="twilight"] h3, html[data-theme="twilight"] h4,
html[data-theme="twilight"] h5, html[data-theme="twilight"] h6 {
  font-family: var(--ds-font-serif) !important;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ds-text-primary);
}

html[data-theme="twilight"] .font-body,
html[data-theme="twilight"] .font-label,
html[data-theme="twilight"] .font-sans,
html[data-theme="twilight"] body,
html[data-theme="twilight"] input,
html[data-theme="twilight"] textarea,
html[data-theme="twilight"] select,
html[data-theme="twilight"] button {
  font-family: var(--ds-font-sans) !important;
}

html[data-theme="twilight"] .font-mono,
html[data-theme="twilight"] code,
html[data-theme="twilight"] kbd,
html[data-theme="twilight"] pre,
html[data-theme="twilight"] samp {
  font-family: var(--ds-font-mono) !important;
}

/* Scrollbar — dark */
html[data-theme="twilight"] ::-webkit-scrollbar {
  width: 10px; height: 10px;
}
html[data-theme="twilight"] ::-webkit-scrollbar-track { background: var(--ds-bg-deep); }
html[data-theme="twilight"] ::-webkit-scrollbar-thumb {
  background: rgba(232,227,216,0.18);
  border-radius: 999px;
}
html[data-theme="twilight"] ::-webkit-scrollbar-thumb:hover { background: rgba(232,227,216,0.30); }

/* Selection */
html[data-theme="twilight"] ::selection {
  background: var(--ds-accent-soft);
  color: var(--ds-text-primary);
}

/* ─── Dark-mode safety sweep ───────────────────────────────────────────────
   Force-darken every light surface the light themes left untouched. Without
   this, any default white/slate utility renders as a white patch on dark. */
html[data-theme="twilight"] .bg-white,
html[data-theme="twilight"] .bg-slate-50,
html[data-theme="twilight"] .bg-gray-50,
html[data-theme="twilight"] .bg-neutral-50 { background-color: var(--ds-surface) !important; }
html[data-theme="twilight"] .bg-slate-100,
html[data-theme="twilight"] .bg-gray-100,
html[data-theme="twilight"] .bg-slate-100\/50 { background-color: var(--ds-surface-2) !important; }
/* Opacity-suffixed slate/gray bg variants (e.g. bg-slate-50/50 on panel headers) */
html[data-theme="twilight"] .bg-slate-50\/50,
html[data-theme="twilight"] .bg-slate-50\/30,
html[data-theme="twilight"] .bg-gray-50\/50,
html[data-theme="twilight"] [class*="bg-slate-50/"],
html[data-theme="twilight"] [class*="bg-slate-100/"] { background-color: var(--ds-bg-deep) !important; }
html[data-theme="twilight"] .bg-slate-200,
html[data-theme="twilight"] .bg-gray-200 { background-color: var(--ds-surface-3) !important; }
html[data-theme="twilight"] .bg-white\/60,
html[data-theme="twilight"] .bg-white\/70,
html[data-theme="twilight"] .bg-white\/80,
html[data-theme="twilight"] .bg-white\/90 { background-color: var(--ds-surface) !important; }

/* Dark text utilities → warm white */
html[data-theme="twilight"] .text-slate-900,
html[data-theme="twilight"] .text-slate-800,
html[data-theme="twilight"] .text-gray-900,
html[data-theme="twilight"] .text-gray-800,
html[data-theme="twilight"] .text-black,
html[data-theme="twilight"] .text-neutral-900 { color: var(--ds-text-primary) !important; }
html[data-theme="twilight"] .text-slate-700,
html[data-theme="twilight"] .text-slate-600,
html[data-theme="twilight"] .text-gray-700,
html[data-theme="twilight"] .text-gray-600 { color: var(--ds-text-secondary) !important; }
html[data-theme="twilight"] .text-slate-500,
html[data-theme="twilight"] .text-gray-500 { color: var(--ds-text-muted) !important; }
html[data-theme="twilight"] .text-slate-400,
html[data-theme="twilight"] .text-gray-400 { color: var(--ds-text-faint) !important; }

/* Light borders → dark divider */
html[data-theme="twilight"] .border-slate-100,
html[data-theme="twilight"] .border-slate-200,
html[data-theme="twilight"] .border-slate-200\/50,
html[data-theme="twilight"] .border-gray-100,
html[data-theme="twilight"] .border-gray-200,
html[data-theme="twilight"] .ring-slate-200,
html[data-theme="twilight"] .ring-slate-300 { border-color: var(--ds-divider) !important; }

/* ─── Typography helpers (opt-in classes) ─────────────────────────────────── */
html[data-theme="twilight"] .ds-display {
  font-family: var(--ds-font-serif);
  font-weight: 400;
  font-size: clamp(72px, 11vw, 180px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--ds-text-primary);
}
html[data-theme="twilight"] .ds-h2 {
  font-family: var(--ds-font-serif);
  font-weight: 400;
  font-size: clamp(44px, 6vw, 88px);
  line-height: 1.0;
  letter-spacing: -0.03em;
}
html[data-theme="twilight"] .ds-h3 {
  font-family: var(--ds-font-serif);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
html[data-theme="twilight"] .ds-body {
  font-family: var(--ds-font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ds-text-secondary);
}
html[data-theme="twilight"] .ds-eyebrow {
  font-family: var(--ds-font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ds-accent);
  font-weight: 500;
}
html[data-theme="twilight"] .ds-caption {
  font-family: var(--ds-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ds-text-faint);
  font-weight: 400;
}
html[data-theme="twilight"] .ds-italic {
  font-style: italic;
  font-family: var(--ds-font-serif);
}

html[data-theme="twilight"] .ds-figures {
  font-feature-settings: 'ss01', 'lnum';
}

/* ─── Override Tailwind palette tokens ─────────────────────────────────────
   Re-define the app's design-system utility outputs for dark surfaces. */

/* Surfaces — dim blue-gray tiers */
html[data-theme="twilight"] .bg-surface,
html[data-theme="twilight"] .bg-background { background-color: var(--ds-bg) !important; }
html[data-theme="twilight"] .bg-surface-bright { background-color: var(--ds-surface-2) !important; }
html[data-theme="twilight"] .bg-surface-container-lowest { background-color: var(--ds-bg-deep) !important; }
html[data-theme="twilight"] .bg-surface-container-low { background-color: var(--ds-surface) !important; }
html[data-theme="twilight"] .bg-surface-container { background-color: var(--ds-surface) !important; }
html[data-theme="twilight"] .bg-surface-container-high { background-color: var(--ds-surface-2) !important; }
html[data-theme="twilight"] .bg-surface-container-highest { background-color: var(--ds-surface-2) !important; }
html[data-theme="twilight"] .bg-surface-dim { background-color: var(--ds-bg-deep) !important; }
html[data-theme="twilight"] .bg-surface-variant { background-color: var(--ds-surface-3) !important; }

/* Text */
html[data-theme="twilight"] .text-on-surface,
html[data-theme="twilight"] .text-on-background { color: var(--ds-text-primary) !important; }
html[data-theme="twilight"] .text-on-surface-variant { color: var(--ds-text-secondary) !important; }
html[data-theme="twilight"] .text-outline { color: var(--ds-text-muted) !important; }

/* Primary (buttons etc.) ⇒ amber (the "strong" fill on dark) */
html[data-theme="twilight"] .bg-primary,
html[data-theme="twilight"] .bg-primary-container { background-color: var(--ds-accent) !important; }
html[data-theme="twilight"] .bg-primary\/10 { background-color: var(--ds-accent-soft) !important; }
html[data-theme="twilight"] .bg-primary\/90 { background-color: var(--ds-accent-2) !important; }
html[data-theme="twilight"] .text-primary,
html[data-theme="twilight"] .text-primary-container { color: var(--ds-accent) !important; }
html[data-theme="twilight"] .text-on-primary { color: var(--ds-on-accent) !important; }
html[data-theme="twilight"] .text-blue-700,
html[data-theme="twilight"] .text-blue-600 { color: var(--ds-accent) !important; }
html[data-theme="twilight"] .hover\:bg-primary\/90:hover { background-color: var(--ds-accent-2) !important; }
html[data-theme="twilight"] .shadow-primary\/20 { box-shadow: 0 10px 24px rgba(0,0,0,0.4) !important; }

/* Secondary ⇒ amber accent, sparingly */
html[data-theme="twilight"] .bg-secondary,
html[data-theme="twilight"] .bg-secondary-container { background-color: var(--ds-accent-soft) !important; }
html[data-theme="twilight"] .text-secondary { color: var(--ds-accent) !important; }
html[data-theme="twilight"] .bg-secondary\/10 { background-color: var(--ds-accent-soft) !important; }

/* Tertiary ⇒ deep amber */
html[data-theme="twilight"] .bg-tertiary { background-color: var(--ds-accent-2) !important; }
html[data-theme="twilight"] .bg-tertiary\/10 { background-color: rgba(201,138,62,0.18) !important; }
html[data-theme="twilight"] .text-tertiary { color: var(--ds-accent) !important; }

/* Outlines / borders */
html[data-theme="twilight"] .border-outline-variant,
html[data-theme="twilight"] .border-outline-variant\/10,
html[data-theme="twilight"] .border-outline-variant\/20,
html[data-theme="twilight"] .border-outline-variant\/30 { border-color: var(--ds-divider) !important; }

/* Replace soft drop shadows with dark-friendly elevation + hairline */
html[data-theme="twilight"] .shadow,
html[data-theme="twilight"] .shadow-sm,
html[data-theme="twilight"] .shadow-md,
html[data-theme="twilight"] .shadow-lg,
html[data-theme="twilight"] .shadow-xl {
  box-shadow: var(--ds-shadow) !important;
  border: 1px solid var(--ds-divider);
}

/* ─── Button overrides ─────────────────────────────────────────────────────── */
html[data-theme="twilight"] button,
html[data-theme="twilight"] .btn,
html[data-theme="twilight"] [role="button"] {
  letter-spacing: 0.01em;
  transition: background 0.2s var(--ds-ease), transform 0.15s var(--ds-ease);
}

/* Primary CTA — amber pill (inversion of editorial's ink pill) */
html[data-theme="twilight"] .bg-primary.text-white {
  background: linear-gradient(135deg, var(--ds-accent), var(--ds-accent-2)) !important;
  color: var(--ds-on-accent) !important;
  border: 0;
  border-radius: var(--ds-radius-pill) !important;
  font-family: var(--ds-font-sans) !important;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(224,164,88,0.28);
}

/* Chips / tags — mono, uppercase, pill */
html[data-theme="twilight"] .filter-btn,
html[data-theme="twilight"] .appt-type-btn {
  font-family: var(--ds-font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500 !important;
  border-radius: var(--ds-radius-pill) !important;
  border: 1px solid var(--ds-divider) !important;
  background: transparent !important;
  color: var(--ds-text-secondary) !important;
  box-shadow: none !important;
}
html[data-theme="twilight"] .filter-btn.active,
html[data-theme="twilight"] .appt-type-btn.active {
  background: var(--ds-accent) !important;
  color: var(--ds-on-accent) !important;
  border-color: var(--ds-accent) !important;
}

/* ─── Rounded corners — SOFT blocks, fully round pills ───────────────────── */
html[data-theme="twilight"] .rounded,
html[data-theme="twilight"] .rounded-lg,
html[data-theme="twilight"] .rounded-xl { border-radius: var(--ds-radius-block) !important; }
html[data-theme="twilight"] .rounded-2xl,
html[data-theme="twilight"] .rounded-3xl { border-radius: var(--ds-radius-lg) !important; }
html[data-theme="twilight"] .rounded-full { border-radius: var(--ds-radius-pill) !important; }

/* Keep pills round on pill-sized elements (chips, status dots, avatars) */
html[data-theme="twilight"] [class*="rounded-full"] {
  border-radius: var(--ds-radius-pill) !important;
}

/* ─── Skeleton loader — dark shimmer ──────────────────────────────────────── */
html[data-theme="twilight"] .skel {
  background: linear-gradient(90deg, #262E40 25%, #2E3648 50%, #262E40 75%) !important;
  border-radius: var(--ds-radius-block) !important;
}

/* ─── Status left-border indicators — amber/semantic family ──────────────── */
html[data-theme="twilight"] .soap-status-open        { border-left: 3px solid var(--ds-accent) !important; }
html[data-theme="twilight"] .soap-status-ready       { border-left: 3px solid var(--ds-accent) !important; }
html[data-theme="twilight"] .soap-status-generated   { border-left: 3px solid var(--ds-accent) !important; }
html[data-theme="twilight"] .soap-status-pushed      { border-left: 3px solid var(--ds-success) !important; }
html[data-theme="twilight"] .soap-status-done        { border-left: 3px solid var(--ds-success) !important; }
html[data-theme="twilight"] .soap-status-pend        { border-left: 3px solid var(--ds-danger) !important; }
html[data-theme="twilight"] .soap-status-no_encounter{ border-left: 3px solid var(--ds-divider) !important; }

/* ─── Loading bar ────────────────────────────────────────────────────────── */
html[data-theme="twilight"] .loading-bar-fill { background: var(--ds-accent) !important; }

/* ─── Sidebar (dashboard nav) ─────────────────────────────────────────────── */
html[data-theme="twilight"] aside.bg-slate-50 {
  background: var(--ds-bg-deep) !important;
  border-right: 1px solid var(--ds-divider) !important;
}
html[data-theme="twilight"] aside nav a {
  border-radius: var(--ds-radius-block) !important;
  transition: background 0.2s var(--ds-ease);
}
html[data-theme="twilight"] aside nav a.bg-white {
  background: var(--ds-accent-soft) !important;
  color: var(--ds-accent) !important;
}
html[data-theme="twilight"] aside nav a.bg-white .material-symbols-outlined,
html[data-theme="twilight"] aside nav a.bg-white span { color: var(--ds-accent) !important; }
html[data-theme="twilight"] aside nav a:hover:not(.bg-white) {
  background: var(--ds-surface) !important;
}
html[data-theme="twilight"] aside nav a span.uppercase {
  font-family: var(--ds-font-mono) !important;
  letter-spacing: 0.14em;
  font-weight: 500 !important;
  font-size: 11px !important;
}

/* ─── Title bar (Electron drag bar) ──────────────────────────────────────── */
html[data-theme="twilight"] #titleBar {
  background: var(--ds-bg-deep) !important;
  border-bottom: 1px solid var(--ds-divider) !important;
}
html[data-theme="twilight"] #titleBar a span {
  font-family: var(--ds-font-mono) !important;
  color: var(--ds-text-primary) !important;
  letter-spacing: 0.16em !important;
  font-weight: 400 !important;
}
html[data-theme="twilight"] #userAvatar {
  background: linear-gradient(135deg, var(--ds-accent), var(--ds-accent-2)) !important;
  color: var(--ds-on-accent) !important;
}
html[data-theme="twilight"] #userName {
  font-family: var(--ds-font-sans) !important;
  color: var(--ds-text-primary) !important;
  font-weight: 500 !important;
}
html[data-theme="twilight"] #logoutBtn {
  font-family: var(--ds-font-mono) !important;
  letter-spacing: 0.14em !important;
  color: var(--ds-text-muted) !important;
}

/* ─── Form controls ──────────────────────────────────────────────────────── */
html[data-theme="twilight"] input[type="text"],
html[data-theme="twilight"] input[type="search"],
html[data-theme="twilight"] input[type="email"],
html[data-theme="twilight"] input[type="password"],
html[data-theme="twilight"] input[type="date"],
html[data-theme="twilight"] input[type="number"],
html[data-theme="twilight"] input[type="tel"],
html[data-theme="twilight"] textarea,
html[data-theme="twilight"] select {
  background: var(--ds-surface-3) !important;
  border: 1px solid var(--ds-divider) !important;
  border-radius: var(--ds-radius-block) !important;
  color: var(--ds-text-primary) !important;
  font-family: var(--ds-font-sans) !important;
}
html[data-theme="twilight"] input:focus,
html[data-theme="twilight"] textarea:focus,
html[data-theme="twilight"] select:focus {
  outline: none !important;
  border-color: var(--ds-accent) !important;
  box-shadow: 0 0 0 3px var(--ds-accent-soft) !important;
}
html[data-theme="twilight"] input::placeholder,
html[data-theme="twilight"] textarea::placeholder {
  color: var(--ds-text-faint) !important;
}

/* ─── Cards — dark surface + hairline ────────────────────────────────────── */
html[data-theme="twilight"] .bg-surface-container-low.rounded-2xl,
html[data-theme="twilight"] .bg-white.rounded-2xl,
html[data-theme="twilight"] .bg-white.rounded-3xl,
html[data-theme="twilight"] .bg-surface-container-highest {
  box-shadow: var(--ds-shadow) !important;
  border: 1px solid var(--ds-divider) !important;
  background: var(--ds-surface) !important;
}

/* Ghost-border utility used on settings page */
html[data-theme="twilight"] .ghost-border {
  border-color: var(--ds-divider) !important;
}

/* ─── Signature components (opt-in markup) ───────────────────────────────── */
html[data-theme="twilight"] .ds-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 20px 34px;
  background: linear-gradient(135deg, var(--ds-accent), var(--ds-accent-2));
  color: var(--ds-on-accent);
  border: 0;
  border-radius: var(--ds-radius-pill);
  font-family: var(--ds-font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s var(--ds-ease), background 0.2s var(--ds-ease);
}
html[data-theme="twilight"] .ds-btn:hover { transform: translateY(-1px); }
html[data-theme="twilight"] .ds-btn::after {
  content: '→';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--ds-on-accent);
  color: var(--ds-accent);
  font-size: 14px;
  line-height: 1;
}

html[data-theme="twilight"] .ds-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  background: transparent;
  color: var(--ds-text-primary);
  border: 0;
  border-bottom: 1px solid var(--ds-accent);
  border-radius: 0;
  font-family: var(--ds-font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-decoration: none;
}
html[data-theme="twilight"] .ds-btn-secondary:hover { opacity: 0.7; }

html[data-theme="twilight"] .ds-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--ds-accent-soft);
  color: var(--ds-accent);
  border-radius: var(--ds-radius-pill);
  font-family: var(--ds-font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
html[data-theme="twilight"] .ds-chip-outline {
  background: transparent;
  border: 1px solid var(--ds-divider);
  color: var(--ds-text-secondary);
}
html[data-theme="twilight"] .ds-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ds-accent);
  vertical-align: middle;
}
html[data-theme="twilight"] .ds-divider {
  border: 0;
  border-top: 1px solid var(--ds-divider);
  margin: 0;
}
html[data-theme="twilight"] .ds-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
html[data-theme="twilight"] .ds-list > li {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0;
}
html[data-theme="twilight"] .ds-list > li::before {
  content: '';
  display: inline-block;
  width: 20px; height: 1px;
  background: var(--ds-accent);
  flex-shrink: 0;
  transform: translateY(-4px);
}

/* Image placeholder */
html[data-theme="twilight"] .ds-image-placeholder {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: repeating-linear-gradient(135deg,
    #2E3648 0 14px,
    rgba(232,227,216,0.05) 14px 15px);
  border-radius: var(--ds-radius-block);
  overflow: hidden;
}
html[data-theme="twilight"] .ds-image-placeholder .ds-caption {
  position: absolute;
  left: 14px;
  bottom: 12px;
  color: var(--ds-text-faint);
}

/* Stat counter */
html[data-theme="twilight"] .ds-stat {
  font-family: var(--ds-font-serif);
  font-weight: 400;
  font-size: clamp(56px, 8vw, 96px);
  line-height: 1;
  letter-spacing: -0.03em;
  font-feature-settings: 'ss01', 'lnum';
}

/* ─── Ambient bloom — amber on dark ──────────────────────────────────────── */
html[data-theme="twilight"] .ds-bloom {
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(224,164,88,0.28) 0%,
    transparent 65%);
  filter: blur(70px);
  pointer-events: none;
  animation: ds-float 14s ease-in-out infinite;
  z-index: 0;
}
html[data-theme="twilight"] .ds-bloom-sm { width: 400px; height: 400px; animation-duration: 12s; }
html[data-theme="twilight"] .ds-bloom-lg { width: 800px; height: 800px; animation-duration: 16s; }
@keyframes ds-float {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(30px, -20px); }
}

/* ─── Dark section inversion (already dark → amber-wash panel) ───────────── */
html[data-theme="twilight"] .ds-section-dark {
  background: var(--ds-bg-deep);
  color: var(--ds-text-primary);
  position: relative;
  overflow: hidden;
}
html[data-theme="twilight"] .ds-section-dark .ds-display,
html[data-theme="twilight"] .ds-section-dark .ds-h2,
html[data-theme="twilight"] .ds-section-dark .ds-h3 { color: var(--ds-text-primary) !important; }
html[data-theme="twilight"] .ds-section-dark .ds-body { color: var(--ds-text-secondary) !important; }
html[data-theme="twilight"] .ds-section-dark .ds-eyebrow,
html[data-theme="twilight"] .ds-section-dark .ds-caption { color: var(--ds-accent) !important; }

/* ─── Motion primitives ──────────────────────────────────────────────────── */
html[data-theme="twilight"] .ds-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity var(--ds-dur-rev) var(--ds-ease),
    transform var(--ds-dur-rev) var(--ds-ease);
}
html[data-theme="twilight"] .ds-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

html[data-theme="twilight"] .ds-hero-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: baseline;
}
html[data-theme="twilight"] .ds-hero-word > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform var(--ds-dur-hero) var(--ds-ease);
}
html[data-theme="twilight"] .ds-hero-word.is-visible > span {
  transform: translateY(0);
}

html[data-theme="twilight"] .ds-scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 1.5px;
  width: 0%;
  background: var(--ds-accent);
  z-index: 10000;
  transition: width 0.05s linear;
  pointer-events: none;
}

/* Marquee row */
html[data-theme="twilight"] .ds-marquee {
  overflow: hidden;
  background: var(--ds-bg-deep);
  color: var(--ds-accent);
  padding: 24px 0;
  white-space: nowrap;
}
html[data-theme="twilight"] .ds-marquee-track {
  display: inline-flex;
  gap: 48px;
  animation: ds-marquee 40s linear infinite;
  font-family: var(--ds-font-serif);
  font-style: italic;
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 400;
}
@keyframes ds-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ─── Reduce-motion guard ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html[data-theme="twilight"] .ds-reveal,
  html[data-theme="twilight"] .ds-hero-word > span,
  html[data-theme="twilight"] .ds-bloom,
  html[data-theme="twilight"] .ds-marquee-track {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ─── Modals / overlays ──────────────────────────────────────────────────── */
html[data-theme="twilight"] .modal,
html[data-theme="twilight"] [role="dialog"],
html[data-theme="twilight"] .workflow-modal {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-divider) !important;
  box-shadow: var(--ds-shadow-lg) !important;
  border-radius: var(--ds-radius-lg) !important;
}
html[data-theme="twilight"] .modal-backdrop,
html[data-theme="twilight"] .workflow-modal-backdrop {
  background: rgba(11,14,22,0.70) !important;
  backdrop-filter: blur(3px);
}

/* ─── Encounter review, patient chart, workflow — shared surfaces ────────── */
html[data-theme="twilight"] .encounter-card,
html[data-theme="twilight"] .patient-card,
html[data-theme="twilight"] .workflow-step,
html[data-theme="twilight"] .appointment-card {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-divider) !important;
  border-radius: var(--ds-radius) !important;
  box-shadow: none !important;
}

/* Tabs (profile tabs, settings tabs, etc.) */
html[data-theme="twilight"] .profile-tab,
html[data-theme="twilight"] [data-profile-tab] {
  font-family: var(--ds-font-mono) !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--ds-text-muted) !important;
}
html[data-theme="twilight"] .profile-tab.active,
html[data-theme="twilight"] [data-profile-tab].active,
html[data-theme="twilight"] .profile-tab[class*="border-primary"] {
  color: var(--ds-accent) !important;
  border-color: var(--ds-accent) !important;
}

/* ============================================================================
   Data-dense surface overrides
   ----------------------------------------------------------------------------
   Targets page-specific class names defined in:
     - workflow-modal-styles.css   (Stage workflow modal + SOAP editor)
     - styles.css                  (global shared cards, modals, alerts)
     - pwa.css                     (PWA chrome — install sheets, update banner)
     - login.html embedded style   (login page illustration/hero)
   Rule of thumb: dark surfaces, hairline dividers, amber accents, soft radii,
   serif/mono palette on headings and status chips.
   ============================================================================ */

/* ─── Workflow modal: stages progress bar ─────────────────────────────────── */
html[data-theme="twilight"] .workflow-stages {
  background: var(--ds-bg-deep) !important;
  border-bottom: 1px solid var(--ds-divider) !important;
}
html[data-theme="twilight"] .stage-circle {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-divider) !important;
  color: var(--ds-text-muted) !important;
  font-family: var(--ds-font-mono) !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
html[data-theme="twilight"] .stage.active .stage-circle {
  background: var(--ds-accent) !important;
  color: var(--ds-on-accent) !important;
  border-color: var(--ds-accent) !important;
  box-shadow: 0 0 0 3px var(--ds-accent-soft) !important;
}
html[data-theme="twilight"] .stage.completed .stage-circle {
  background: var(--ds-success) !important;
  border-color: var(--ds-success) !important;
  color: var(--ds-bg) !important;
}
html[data-theme="twilight"] .stage-label {
  font-family: var(--ds-font-mono) !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-size: 10px !important;
  color: var(--ds-text-muted) !important;
}
html[data-theme="twilight"] .stage.active .stage-label,
html[data-theme="twilight"] .stage.completed .stage-label {
  color: var(--ds-text-primary) !important;
}

/* ─── Workflow Stage 1: pending items list ────────────────────────────────── */
html[data-theme="twilight"] .pending-item {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-divider) !important;
  border-radius: var(--ds-radius-block) !important;
  box-shadow: none !important;
  transition: border-color 0.2s var(--ds-ease), background 0.2s var(--ds-ease);
}
html[data-theme="twilight"] .pending-item:hover {
  border-color: var(--ds-accent) !important;
  background: var(--ds-surface-2) !important;
  box-shadow: none !important;
}
html[data-theme="twilight"] .pending-item.selected {
  border-color: var(--ds-accent) !important;
  background: var(--ds-accent-soft) !important;
}

/* ─── Workflow Stage 2: transcription / recording ─────────────────────────── */
html[data-theme="twilight"] .record-button {
  background: var(--ds-accent) !important;
  color: var(--ds-on-accent) !important;
  box-shadow: 0 6px 18px rgba(224,164,88,0.28) !important;
  border: 1px solid var(--ds-accent) !important;
}
html[data-theme="twilight"] .record-button:hover {
  background: var(--ds-accent-2) !important;
}
html[data-theme="twilight"] .record-button.recording {
  background: var(--ds-danger) !important;
  border-color: var(--ds-danger) !important;
  color: #1C2230 !important;
  box-shadow: 0 6px 18px rgba(224,114,106,0.3) !important;
}
html[data-theme="twilight"] .transcript-box {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-divider) !important;
  border-radius: var(--ds-radius-block) !important;
  font-family: var(--ds-font-sans) !important;
  color: var(--ds-text-primary) !important;
}
html[data-theme="twilight"] .transcript-box:focus,
html[data-theme="twilight"] .transcript-box:focus-within {
  border-color: var(--ds-accent) !important;
  box-shadow: 0 0 0 3px var(--ds-accent-soft) !important;
}

/* ─── Workflow Stage 2/3: summary & selection panels ─────────────────────── */
html[data-theme="twilight"] .summary-section {
  background: var(--ds-surface) !important;
  border-left: 3px solid var(--ds-accent) !important;
  border-radius: 0 !important;
}
html[data-theme="twilight"] .summary-section .content {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-divider) !important;
  border-radius: var(--ds-radius-block) !important;
}
html[data-theme="twilight"] .selection-group {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-divider) !important;
  border-radius: var(--ds-radius-block) !important;
}
html[data-theme="twilight"] .checkbox-item {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-divider) !important;
  border-radius: var(--ds-radius-block) !important;
  transition: background 0.15s var(--ds-ease), border-color 0.15s var(--ds-ease);
}
html[data-theme="twilight"] .checkbox-item:hover {
  background: var(--ds-accent-soft) !important;
  border-color: var(--ds-accent) !important;
}
html[data-theme="twilight"] .checkbox-item input[type="checkbox"]:checked + label,
html[data-theme="twilight"] .checkbox-item.selected {
  background: var(--ds-accent-soft) !important;
  border-color: var(--ds-accent) !important;
}

/* ─── Workflow Stage 4: review + push summary ────────────────────────────── */
html[data-theme="twilight"] .push-summary {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-divider) !important;
  border-radius: var(--ds-radius-block) !important;
}
html[data-theme="twilight"] .summary-stat {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-divider) !important;
  border-radius: var(--ds-radius-block) !important;
  box-shadow: none !important;
}
html[data-theme="twilight"] .summary-stat .stat-value,
html[data-theme="twilight"] .summary-stat [data-stat-value] {
  font-family: var(--ds-font-serif) !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
  color: var(--ds-text-primary) !important;
}
html[data-theme="twilight"] .summary-stat .stat-label {
  font-family: var(--ds-font-mono) !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-size: 10px !important;
  color: var(--ds-text-muted) !important;
}

/* ─── SOAP editor tabs ────────────────────────────────────────────────────── */
html[data-theme="twilight"] .soap-tabs-container {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-divider) !important;
  border-radius: var(--ds-radius-block) !important;
  box-shadow: none !important;
}
html[data-theme="twilight"] .soap-tabs {
  background: var(--ds-bg-deep) !important;
  border-bottom: 1px solid var(--ds-divider) !important;
}
html[data-theme="twilight"] .soap-tab {
  font-family: var(--ds-font-mono) !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--ds-text-muted) !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
}
html[data-theme="twilight"] .soap-tab.active {
  background: var(--ds-surface) !important;
  color: var(--ds-accent) !important;
  border-bottom-color: var(--ds-accent) !important;
}

/* ─── Diagnosis & order items ─────────────────────────────────────────────── */
html[data-theme="twilight"] .diagnosis-box {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-divider) !important;
  border-radius: var(--ds-radius-block) !important;
}
html[data-theme="twilight"] .diagnosis-header {
  background: var(--ds-bg-deep) !important;
  border-bottom: 1px solid var(--ds-divider) !important;
}
html[data-theme="twilight"] .diagnosis-header:hover {
  background: var(--ds-accent-soft) !important;
}
html[data-theme="twilight"] .order-item {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-divider) !important;
  border-radius: var(--ds-radius-block) !important;
  transition: border-color 0.15s var(--ds-ease);
}
html[data-theme="twilight"] .order-item:hover {
  border-color: var(--ds-accent) !important;
}

/* ─── Vitals ─────────────────────────────────────────────────────────────── */
html[data-theme="twilight"] .vitals-section {
  background: rgba(224,164,88,0.08) !important;
  border: 1px solid var(--ds-divider) !important;
  border-radius: var(--ds-radius-block) !important;
}
html[data-theme="twilight"] .vital-item {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-divider) !important;
  border-radius: var(--ds-radius-block) !important;
  box-shadow: none !important;
}
html[data-theme="twilight"] .vital-item .vital-value,
html[data-theme="twilight"] .vital-item [data-vital-value] {
  font-family: var(--ds-font-serif) !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
  color: var(--ds-text-primary) !important;
}
html[data-theme="twilight"] .no-vitals-banner {
  background: var(--ds-accent-soft) !important;
  border: 1px solid var(--ds-divider) !important;
  color: var(--ds-accent) !important;
  border-radius: var(--ds-radius-block) !important;
}
html[data-theme="twilight"] .vitals-entry-form {
  background: var(--ds-bg-deep) !important;
  border: 1px solid var(--ds-divider) !important;
  border-radius: var(--ds-radius-block) !important;
}

/* ─── History dropdown (patient chart / encounter) ────────────────────────── */
html[data-theme="twilight"] .history-dropdown {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-divider) !important;
  border-radius: var(--ds-radius-block) !important;
}
html[data-theme="twilight"] .dropdown-header {
  background: var(--ds-bg-deep) !important;
  border-bottom: 1px solid var(--ds-divider) !important;
  font-family: var(--ds-font-mono) !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  color: var(--ds-text-secondary) !important;
}
html[data-theme="twilight"] .dropdown-header:hover {
  background: var(--ds-accent-soft) !important;
}
html[data-theme="twilight"] .history-item {
  border-bottom: 1px solid var(--ds-divider-soft) !important;
}
html[data-theme="twilight"] .history-item:hover {
  background: var(--ds-accent-soft) !important;
}

/* ─── Global shared surfaces (styles.css) ────────────────────────────────── */
html[data-theme="twilight"] .header {
  background: var(--ds-bg-deep) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ds-divider) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
html[data-theme="twilight"] .main-content {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-divider) !important;
  border-radius: var(--ds-radius-lg) !important;
  box-shadow: none !important;
}
html[data-theme="twilight"] .patient-card {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-divider) !important;
  border-radius: var(--ds-radius) !important;
  box-shadow: none !important;
  transition: border-color 0.2s var(--ds-ease), transform 0.2s var(--ds-ease);
}
html[data-theme="twilight"] .patient-card:hover {
  border-color: var(--ds-accent) !important;
  transform: translateY(-1px);
  box-shadow: none !important;
}
html[data-theme="twilight"] .encounter-badge {
  background: var(--ds-accent) !important;
  color: var(--ds-on-accent) !important;
  border-radius: var(--ds-radius-pill) !important;
  font-family: var(--ds-font-mono) !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-size: 10px !important;
  font-weight: 600 !important;
}

/* Modal chrome */
html[data-theme="twilight"] .modal-content {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-divider) !important;
  border-radius: var(--ds-radius-lg) !important;
  box-shadow: var(--ds-shadow-lg) !important;
}
html[data-theme="twilight"] .modal-header {
  background: var(--ds-bg-deep) !important;
  border-bottom: 1px solid var(--ds-divider) !important;
  border-radius: 0 !important;
}
html[data-theme="twilight"] .patient-info {
  background: var(--ds-bg-deep) !important;
  border: 1px solid var(--ds-divider) !important;
  border-radius: var(--ds-radius-block) !important;
}

/* Alerts — semantic color preserved, dark-tuned */
html[data-theme="twilight"] .alert {
  border-radius: var(--ds-radius-block) !important;
  border: 1px solid var(--ds-divider) !important;
  background: var(--ds-surface) !important;
  color: var(--ds-text-primary) !important;
  box-shadow: none !important;
}
html[data-theme="twilight"] .alert-info {
  border-left: 3px solid var(--ds-accent) !important;
  background: var(--ds-accent-soft) !important;
}
html[data-theme="twilight"] .alert-success {
  border-left: 3px solid var(--ds-success) !important;
  background: var(--ds-success-soft) !important;
  color: var(--ds-success) !important;
}
html[data-theme="twilight"] .alert-error {
  border-left: 3px solid var(--ds-danger) !important;
  background: var(--ds-danger-soft) !important;
  color: var(--ds-danger) !important;
}
html[data-theme="twilight"] .alert-warning {
  border-left: 3px solid var(--ds-warning) !important;
  background: var(--ds-warning-soft) !important;
  color: var(--ds-warning) !important;
}

/* Assessment / SOAP display surfaces */
html[data-theme="twilight"] .assessment-text,
html[data-theme="twilight"] .soap-note-display,
html[data-theme="twilight"] .imaging-text {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-divider) !important;
  border-radius: var(--ds-radius-block) !important;
  font-family: var(--ds-font-sans) !important;
  color: var(--ds-text-primary) !important;
  box-shadow: none !important;
}
html[data-theme="twilight"] .extracted-details {
  background: var(--ds-bg-deep) !important;
  border: 1px solid var(--ds-divider) !important;
  border-radius: var(--ds-radius-block) !important;
}

/* Tables — lab values, orders */
html[data-theme="twilight"] .lab-values-table {
  font-family: var(--ds-font-sans) !important;
  border-collapse: collapse !important;
  color: var(--ds-text-primary) !important;
}
html[data-theme="twilight"] .lab-values-table thead {
  background: var(--ds-bg-deep) !important;
}
html[data-theme="twilight"] .lab-values-table thead th {
  font-family: var(--ds-font-mono) !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  color: var(--ds-text-secondary) !important;
  border-bottom: 1px solid var(--ds-divider) !important;
}
html[data-theme="twilight"] .lab-values-table tbody td {
  border-bottom: 1px solid var(--ds-divider-soft) !important;
}
html[data-theme="twilight"] .abnormal-flag {
  background: var(--ds-danger-soft) !important;
  color: var(--ds-danger) !important;
  border: 1px solid rgba(224,114,106,0.4) !important;
  border-radius: var(--ds-radius-pill) !important;
  font-family: var(--ds-font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

/* Review card, athena section, correction banner */
html[data-theme="twilight"] .review-note-card {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-divider) !important;
  border-radius: var(--ds-radius) !important;
  box-shadow: none !important;
}
html[data-theme="twilight"] .athena-section {
  background: var(--ds-bg-deep) !important;
  border-left: 3px solid var(--ds-accent-2) !important;
  border-radius: 0 !important;
}
html[data-theme="twilight"] .correction-section {
  background: var(--ds-accent-soft) !important;
  border-left: 3px solid var(--ds-accent) !important;
  border-radius: 0 !important;
  color: var(--ds-text-primary) !important;
}

/* Notification toast */
html[data-theme="twilight"] .notification-toast {
  background: var(--ds-bg-deep) !important;
  color: var(--ds-text-primary) !important;
  border: 1px solid var(--ds-accent) !important;
  border-radius: var(--ds-radius-pill) !important;
  box-shadow: var(--ds-shadow-lg) !important;
  font-family: var(--ds-font-sans) !important;
  font-size: 13px !important;
  letter-spacing: 0.01em !important;
}

/* ─── PWA chrome (pwa.css) ───────────────────────────────────────────────── */
html[data-theme="twilight"] .pwa-offline-toast {
  background: var(--ds-bg-deep) !important;
  color: var(--ds-accent) !important;
  border: 1px solid var(--ds-accent) !important;
  border-radius: var(--ds-radius-pill) !important;
  box-shadow: var(--ds-shadow-lg) !important;
  font-family: var(--ds-font-mono) !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
}
html[data-theme="twilight"] .pwa-update-banner {
  background: var(--ds-bg-deep) !important;
  color: var(--ds-text-primary) !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--ds-divider) !important;
}
html[data-theme="twilight"] .pwa-install-sheet,
html[data-theme="twilight"] .pwa-ios-card {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-divider) !important;
  border-radius: var(--ds-radius-lg) !important;
  box-shadow: var(--ds-shadow-lg) !important;
}
html[data-theme="twilight"] .pwa-ios-overlay {
  background: rgba(11,14,22,0.70) !important;
  backdrop-filter: blur(4px) !important;
}

/* ─── Login page specifics ───────────────────────────────────────────────── */
html[data-theme="twilight"] body:has(#loginForm),
html[data-theme="twilight"] body:has([data-login-page]) {
  background: var(--ds-bg) !important;
}
html[data-theme="twilight"] #loginForm,
html[data-theme="twilight"] [data-login-card] {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-divider) !important;
  border-radius: var(--ds-radius-lg) !important;
  box-shadow: var(--ds-shadow-lg) !important;
  backdrop-filter: none !important;
}
/* Tailwind backdrop-blur card on login — strip the blur, dark fill */
html[data-theme="twilight"] .backdrop-blur-xl {
  backdrop-filter: none !important;
  background: var(--ds-surface) !important;
}
/* Login submit button signature — amber */
html[data-theme="twilight"] #loginForm button[type="submit"],
html[data-theme="twilight"] [data-login-submit] {
  background: linear-gradient(135deg, var(--ds-accent), var(--ds-accent-2)) !important;
  color: var(--ds-on-accent) !important;
  border-radius: var(--ds-radius-pill) !important;
  border: 0 !important;
  box-shadow: 0 6px 18px rgba(224,164,88,0.28) !important;
  font-family: var(--ds-font-sans) !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
}

/* ─── Stage transitions + progress lines ─────────────────────────────────── */
html[data-theme="twilight"] .stage-connector,
html[data-theme="twilight"] .workflow-progress-line {
  background: var(--ds-divider) !important;
}
html[data-theme="twilight"] .stage-connector.completed,
html[data-theme="twilight"] .workflow-progress-line.completed {
  background: var(--ds-accent) !important;
}

/* ─── Loading / progress indicators ──────────────────────────────────────── */
html[data-theme="twilight"] .progress-bar,
html[data-theme="twilight"] [role="progressbar"] {
  background: var(--ds-divider) !important;
  border-radius: var(--ds-radius-pill) !important;
}
html[data-theme="twilight"] .progress-bar > *,
html[data-theme="twilight"] [role="progressbar"] > * {
  background: var(--ds-accent) !important;
}

/* ─── Dropdowns (search results, autocomplete) ───────────────────────────── */
html[data-theme="twilight"] .dropdown-results,
html[data-theme="twilight"] .autocomplete-list,
html[data-theme="twilight"] .search-results {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-divider) !important;
  border-radius: var(--ds-radius-block) !important;
  box-shadow: var(--ds-shadow-lg) !important;
}
html[data-theme="twilight"] .dropdown-results li:hover,
html[data-theme="twilight"] .autocomplete-list li:hover,
html[data-theme="twilight"] .search-results li:hover {
  background: var(--ds-accent-soft) !important;
}

/* ─── Links (generic inline anchors) ─────────────────────────────────────── */
html[data-theme="twilight"] a:not([class]) {
  color: var(--ds-accent);
  text-decoration: underline;
  text-decoration-color: var(--ds-divider);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s var(--ds-ease);
}
html[data-theme="twilight"] a:not([class]):hover {
  text-decoration-color: var(--ds-accent);
}

/* ─── Charts / analytics canvas frames (api-analytics.html) ──────────────── */
html[data-theme="twilight"] .chart-container,
html[data-theme="twilight"] [data-chart-container] {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-divider) !important;
  border-radius: var(--ds-radius-lg) !important;
  box-shadow: none !important;
}
html[data-theme="twilight"] .metric-card {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-divider) !important;
  border-radius: var(--ds-radius-lg) !important;
  box-shadow: none !important;
}
html[data-theme="twilight"] .metric-card .metric-value {
  font-family: var(--ds-font-serif) !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
  font-feature-settings: 'lnum' !important;
  color: var(--ds-text-primary) !important;
}
html[data-theme="twilight"] .metric-card .metric-label {
  font-family: var(--ds-font-mono) !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-size: 10px !important;
  color: var(--ds-text-muted) !important;
}

/* ─── Settings page form styling tweaks ──────────────────────────────────── */
html[data-theme="twilight"] .settings-section h3 {
  font-family: var(--ds-font-serif) !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
}
html[data-theme="twilight"] .settings-section .material-symbols-outlined {
  color: var(--ds-accent) !important;
}

/* ============================================================================
   Hover effect overrides — Twilight palette
   ---------------------------------------------------------------------------
   Amber borders, dark surface tints, minimal transforms.
   ============================================================================ */

/* ── Buttons — amber lift, dark-friendly elevation ─────────────────────────── */
html[data-theme="twilight"] .btn-primary:hover:not(:disabled),
html[data-theme="twilight"] .btn-success:hover:not(:disabled),
html[data-theme="twilight"] .btn-secondary:hover:not(:disabled) {
  box-shadow: 0 8px 22px rgba(224,164,88,0.3) !important;
  transform: translateY(-1px);
}
html[data-theme="twilight"] .btn-primary:hover:not(:disabled) {
  background: var(--ds-accent-2) !important;
}
html[data-theme="twilight"] .btn-icon:hover:not(:disabled) {
  background: var(--ds-surface-2) !important;
  box-shadow: none !important;
}

/* ── Modal close — dark tint ───────────────────────────────────────────────── */
html[data-theme="twilight"] .modal-close:hover {
  background-color: var(--ds-surface-2) !important;
  color: var(--ds-text-primary) !important;
}

/* ── Tabs — dark hover tint ────────────────────────────────────────────────── */
html[data-theme="twilight"] .tab:hover,
html[data-theme="twilight"] .main-tab:hover {
  background-color: var(--ds-surface-2) !important;
}

/* ── Filter buttons — amber hover, no transform ────────────────────────────── */
html[data-theme="twilight"] .filter-btn:hover {
  border-color: var(--ds-accent) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ── Cards & sections — amber border, dark elevation ───────────────────────── */
html[data-theme="twilight"] .review-note-card:hover {
  border-color: var(--ds-accent) !important;
  box-shadow: none !important;
  transform: translateY(-1px);
}
html[data-theme="twilight"] .automation-section:hover {
  border-color: var(--ds-divider) !important;
  box-shadow: none !important;
}
html[data-theme="twilight"] .provider-section:hover {
  box-shadow: none !important;
}

/* ── Date picker, correction textarea — amber border ───────────────────────── */
html[data-theme="twilight"] .date-picker:hover,
html[data-theme="twilight"] .correction-textarea:hover {
  border-color: var(--ds-accent) !important;
}

/* ── Encounter badge, status badge — no scale ──────────────────────────────── */
html[data-theme="twilight"] .encounter-badge:hover {
  background: var(--ds-accent-2) !important;
  transform: none !important;
}
html[data-theme="twilight"] .status-badge:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* ── Lab table rows — dark tint ────────────────────────────────────────────── */
html[data-theme="twilight"] .lab-values-table tbody tr:hover {
  background-color: var(--ds-surface-2) !important;
}

/* ── Toggle switch — amber glow ────────────────────────────────────────────── */
html[data-theme="twilight"] .toggle-switch:hover:not(:disabled) {
  box-shadow: 0 0 0 3px var(--ds-accent-soft) !important;
}

/* ── Appointment card — no shadow ──────────────────────────────────────────── */
html[data-theme="twilight"] .appointment-card:hover {
  box-shadow: none !important;
  border-color: var(--ds-accent) !important;
}

/* ── Workflow modal: selections, summaries, vitals — amber palette ──────────── */
html[data-theme="twilight"] .selection-group:hover {
  border-color: var(--ds-divider) !important;
  box-shadow: none !important;
}
html[data-theme="twilight"] .summary-section:hover {
  box-shadow: none !important;
  transform: translateY(-1px);
}
html[data-theme="twilight"] .summary-stat:hover {
  border-color: var(--ds-accent) !important;
  box-shadow: none !important;
}
html[data-theme="twilight"] .vital-item:hover {
  box-shadow: none !important;
  border: 1px solid var(--ds-accent);
}
html[data-theme="twilight"] .vital-input input:hover {
  border-color: var(--ds-accent) !important;
}
html[data-theme="twilight"] .vital-input input:focus {
  border-color: var(--ds-accent) !important;
  box-shadow: 0 0 0 3px var(--ds-accent-soft) !important;
}
html[data-theme="twilight"] .transcript-box:hover {
  border-color: var(--ds-accent) !important;
}

/* ── Dropdown header — dark tint ───────────────────────────────────────────── */
html[data-theme="twilight"] .dropdown-header:hover {
  background: var(--ds-surface-2) !important;
}

/* ── PA wizard — amber overrides ────────────────────────────────────────────── */
html[data-theme="twilight"] .pa-questions-panel:hover {
  border-color: var(--ds-accent) !important;
  box-shadow: none !important;
}
html[data-theme="twilight"] .pa-pill:hover {
  box-shadow: none !important;
}
html[data-theme="twilight"] .pa-letter-body tbody tr:hover {
  background: var(--ds-surface-2) !important;
}

/* ============================================================================
   Screenshot-reported fixes — surfaces editorial didn't need (light theme)
   but Twilight does, because uncovered light surfaces glare white on dark.
   ============================================================================ */

/* ─── Login page chrome: title bar + top nav (hardcoded light) ────────────── */
/* The Electron title bar uses inline style="background:#f8f9ff;border:#e5eeff".
   A stylesheet !important rule beats an inline non-important property, so we
   target it structurally without editing the HTML. */
html[data-theme="twilight"] body > div[style*="position: fixed"][style*="44px"] {
  background: var(--ds-bg-deep) !important;
  border-bottom: 1px solid var(--ds-divider) !important;
}
html[data-theme="twilight"] body > div[style*="44px"] span {
  color: var(--ds-accent) !important;
}
/* Top nav uses arbitrary Tailwind value bg-[#f8f9ff] */
html[data-theme="twilight"] nav.bg-\[\#f8f9ff\] {
  background: var(--ds-bg-deep) !important;
  border-bottom: 1px solid var(--ds-divider) !important;
}

/* ─── "Leave encounter?" confirmation modal (workflow-draft-client.js) ──────
   The modal is built with inline styles that read these custom properties
   with a hardcoded light hex as fallback. The modal is appended to
   document.body, and custom properties inherit, so defining them on <html>
   cascades down to the modal subtree. */
html[data-theme="twilight"] {
  --wf-leave-backdrop: rgba(11,14,22,0.70);
  --wf-leave-card-bg: #262E40;
  --wf-leave-heading: #E8E3D8;
  --wf-leave-body: rgba(232,227,216,0.72);
  --wf-leave-primary-bg: #E0A458;
  --wf-leave-primary-ink: #1C2230;
  --wf-leave-secondary-bg: #2E3648;
  --wf-leave-secondary-ink: #E0A458;
  --wf-leave-discard-ink: #E0726A;
}