/* Legacy content guard extracted from inline style (app.html) */
body > *:not(#app):not(#mobileMenuToggle):not(#mobileOverlay):not([data-allow-outside="true"]):not(script):not(style):not(link):not(#bt4t-persistent-onboarding):not(.bt4t-persistent-modal):not(#bt4t-tour-prompt):not(.bt4t-tour-prompt):not(.contextual-prompt):not(#bt4t-tour-overlay):not(.guided-tour-overlay) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  position: absolute !important;
  left: -9999px !important;
}

#bt4t-analytics-kpis,
#bt4t-analytics-equity,
#bt4t-tags,
#bt4t-trades,
.glass-card,
section[id^="bt4t-"],
div[id^="bt4t-"]:not(#bt4t-admin-app):not(#bt4t-marketing-app):not(#bt4t-notifications-container):not(#bt4t-onboarding-wizard):not(#bt4t-global-trollbox) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

#app {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  z-index: 9999;
  /* var() with fallback — bg theme overrides via :root inline styles */
  background: var(--bg, #0a0b0e) !important;
}

/* Modal wrapper - needs fixed positioning to overlay content */
.modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 9999 !important;
  overflow: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 2rem !important;
  /* Reset premium-ui.css styles that treat .modal as content */
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.modal-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 10000 !important;
  overflow: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 2rem !important;
  background: rgba(0, 0, 0, 0.8) !important;
  backdrop-filter: blur(4px) !important;
}

.modal-backdrop {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 0 !important;
  background: rgba(0, 0, 0, 0.8) !important;
  backdrop-filter: blur(4px) !important;
}

/* Trade drawer overlay - slides from right */
.trade-drawer-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 10000 !important;
  display: flex !important;
  justify-content: flex-end !important;
  background: rgba(0, 0, 0, 0.6) !important;
}

/* Allow hiding modals/drawers via .hidden class or inline display:none */
.modal-overlay.hidden,
.modal-backdrop.hidden,
.trade-drawer-overlay.hidden,
.modal.hidden {
  display: none !important;
}

.modal-content {
  position: relative !important;
  z-index: 1 !important;
  background: var(--color-bg-card, #1a1a1a) !important;
  border: 1px solid var(--color-border, #333) !important;
  border-radius: var(--radius-lg, 8px) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
  max-height: calc(100vh - 4rem) !important;
  overflow: hidden !important;
  width: 100% !important;
  max-width: 900px !important;
  display: flex !important;
  flex-direction: column !important;
}

.modal-header {
  padding: 1.5rem !important;
  border-bottom: 1px solid var(--color-border, #333) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  background: var(--color-bg-secondary, #0d1117) !important;
}

.modal-header h2 {
  margin: 0 !important;
  color: var(--color-text-primary, #fff) !important;
  font-size: 1.5rem !important;
}

.modal-close {
  background: transparent !important;
  border: none !important;
  color: var(--color-text-secondary, #ccc) !important;
  font-size: 1.5rem !important;
  cursor: pointer !important;
  padding: 0.5rem !important;
  border-radius: 4px !important;
}

.modal-close:hover {
  background: var(--color-bg-hover, #333) !important;
  color: var(--color-text-primary, #fff) !important;
}

.modal-body {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 0 !important;
}

.market-intelligence-modal .modal-content {
  max-width: 1200px !important;
  width: 95vw !important;
}

/* Trade modal - uses different structure, override generic rules */
.trade-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 10001 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.trade-modal .modal-backdrop {
  position: absolute !important;
  z-index: 1 !important;
  display: block !important;
  padding: 0 !important;
}

.trade-modal .modal-content {
  position: relative !important;
  z-index: 2 !important;
  max-width: 600px !important;
  display: flex !important;
  flex-direction: column !important;
}

body {
  overflow: hidden !important;
  /* var() with fallback — bg theme overrides via :root inline styles */
  background: var(--bg, #0a0b0e) !important;
}

.AppShell {
  contain: layout style paint;
  /* var() with fallback — bg theme overrides via :root inline styles */
  background: var(--bg, #0a0b0e) !important;
}

.Content {
  contain: layout style;
  /* var() with fallback — bg theme overrides via :root inline styles */
  background: var(--bg-surface, #141920) !important;
}