/* ============================================
   HIDE ELEMENTS IN WEBVIEW MODE
   ============================================ */

/* Fix html and body to prevent double scroll - ONLY body should scroll */
html.webview-mode {
  /* html should NEVER scroll - disable all scrolling on html */
  position: fixed !important;
  overflow: hidden !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  height: 100% !important;
  width: 100% !important;
  /* Prevent any transform or movement */
  transform: none !important;
  -webkit-transform: none !important;
  /* Prevent scroll on html itself */
  overscroll-behavior: none !important;
  -webkit-overflow-scrolling: auto !important;
  /* Ensure scroll starts at 0 */
  scroll-behavior: auto !important;
  /* Allow fixed positioning to work correctly */
  position: relative !important;
}

body.webview-mode {
  /* ONLY body should scroll - not html, not containers */
  position: relative !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  height: 100vh !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  /* Prevent any transform that could cause movement */
  transform: none !important;
  -webkit-transform: none !important;
  /* Remove any margins/padding that could cause shifting */
  margin: 0 !important;
  padding: 0 !important;
  /* No margin-top on body - safe-area is handled on #main-content */
  margin-top: 0 !important;
  /* Ensure scroll starts at 0 */
  scroll-behavior: auto !important;
}

/* Hide all scrollbars in webview mode */
.webview-mode ::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

.webview-mode * {
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE/Edge */
}

.webview-mode *::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

/* Prevent any container from scrolling - only body should scroll */
.webview-mode #main-content,
.webview-mode .container,
.webview-mode .dashboard-container,
.webview-mode .devise-container {
  overflow-y: visible !important;
  overflow-x: hidden !important;
  /* Containers should not scroll - they should be part of body scroll */
  max-height: none !important;
  height: 100vh !important;
  /* Remove any overflow that could create a scroll container */
  overflow: visible !important;
  /* Prevent horizontal scroll */
  max-width: 100vw !important;
  width: 100% !important;
}

/* Prevent horizontal scroll on preferences/account page */
.webview-mode .dashboard-container,
.webview-mode .preferences-form,
.webview-mode .stocks-section {
  overflow-x: hidden !important;
  overflow-y: visible !important;
  overflow: visible !important;
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
}

/* Prevent double scroll on preferences form containers */
.webview-mode .preferences-form,
.webview-mode .preferences-form .row,
.webview-mode .preferences-form .row.mb-12,
.webview-mode .preferences-form .col-12,
.webview-mode .preferences-form .summary-card,
.webview-mode .preferences-form .summary-card .card-content,
.webview-mode .preferences-form .summary-card .card-content .row,
.webview-mode .preferences-form .summary-card .card-content .row.g-2 {
  overflow: visible !important;
  overflow-y: visible !important;
  overflow-x: visible !important;
  height: auto !important;
  max-height: none !important;
  min-height: auto !important;
  position: relative !important;
}

/* Force no scrollbar on preferences form containers */
.webview-mode .preferences-form * {
  overflow-y: visible !important;
}

.webview-mode .preferences-form .summary-card,
.webview-mode .preferences-form .summary-card * {
  overflow-y: visible !important;
  max-height: none !important;
}

/* Prevent double scroll on stocks-section and portfolio management - WEBVIEW ONLY */
.webview-mode .stocks-section {
  overflow: visible !important;
  overflow-y: visible !important;
  overflow-x: visible !important;
  height: auto !important;
  max-height: none !important;
  min-height: auto !important;
  position: relative !important;
}

/* Force all children of stocks-section to not scroll in webview */
/* EXCLUDE elements that need overflow:hidden for text truncation (line-clamp) */
/* EXCLUDE form-check elements that need overflow for proper styling */
.webview-mode .stocks-section *:not(.event-text):not(.event-text-wrapper):not(.stock-name-inline):not(.reasoning-text):not(.form-check-input):not(.form-switch):not(.form-check):not(.mobile-j1-conf-bar):not(.conf-medium):not(.conf-high):not(.conf-low):not(.conf-fill) {
  overflow: visible !important;
  overflow-y: visible !important;
  overflow-x: visible !important;
  max-height: none !important;
  height: auto !important;
}

/* Restore overflow:hidden for text truncation elements */
.webview-mode .stocks-section .event-text,
.webview-mode .stocks-section .event-text-wrapper .event-text {
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  height: auto !important;
  max-height: none !important;
}

.webview-mode .stocks-section .stock-name-inline {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  height: auto !important;
}

/* Specific containers within stocks-section */
.webview-mode .stocks-section .row,
.webview-mode .stocks-section #portfolio-management,
.webview-mode .stocks-section .tab-content,
.webview-mode .stocks-section .tab-pane,
.webview-mode .stocks-section .dashboard-tabs,
.webview-mode .stocks-section .summary-card,
.webview-mode .stocks-section .summary-card .card-content,
.webview-mode .stocks-section .stocks-grid,
.webview-mode .stocks-section .stock-card {
  overflow: visible !important;
  overflow-y: visible !important;
  overflow-x: visible !important;
  height: auto !important;
  max-height: none !important;
  min-height: auto !important;
}

/* Ensure bottom nav menu stays fixed - override any conflicting rules */
.webview-mode .webview-bottom-nav {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  /* Ensure it's not affected by any parent container */
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
}

/* Prevent iOS zoom on input focus - all inputs must be at least 16px */
.webview-mode input[type="text"],
.webview-mode input[type="email"],
.webview-mode input[type="password"],
.webview-mode input[type="tel"],
.webview-mode input[type="number"],
.webview-mode input[type="search"],
.webview-mode textarea,
.webview-mode select,
.webview-mode .form-control {
  font-size: 16px !important; /* Prevent iOS zoom - must be at least 16px */
}

/* Ensure dashboard-container doesn't affect fixed positioning */
.webview-mode .dashboard-container {
  /* Don't create a new stacking context that could affect fixed elements */
  transform: none !important;
  -webkit-transform: none !important;
  /* Ensure overflow doesn't clip fixed elements */
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  /* Prevent horizontal scroll on preferences page */
  overflow-x: hidden !important;
}

/* Prevent horizontal scroll on account/preferences page */
.webview-mode .dashboard-container,
.webview-mode .container,
.webview-mode #main-content,
.webview-mode body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* Hide navbar completely in webview mode */
.webview-mode .navbar {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Hide dashboard/page headers in webview mode */
.webview-mode .dashboard-header {
  display: none !important;
}

/* Hide blog hero section in webview mode */
.webview-mode .blog-hero-section {
  display: none !important;
}

/* Hide blog article header in webview mode */
.webview-mode .blog-article-header {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  visibility: hidden !important;
}

/* Hide devise header (logo/title) in webview mode */
.webview-mode .devise-header {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  visibility: hidden !important;
}

/* Hide any other headers/top bars */
.webview-mode .account-header,
.webview-mode .page-header,
.webview-mode .content-header,
.webview-mode header:not(.webview-back-btn-fixed) {
  display: none !important;
}

/* Hide page titles and subtitles */
.webview-mode .dashboard-title,
.webview-mode .dashboard-subtitle,
.webview-mode h1.dashboard-title,
.webview-mode h2.dashboard-title,
.webview-mode h3.dashboard-title {
  display: none !important;
}

/* Adjust container padding when header is hidden */
.webview-mode .dashboard-container {
  padding-top: 0 !important;
}

.webview-mode .container {
  padding-top: 0.5rem !important;
}

/* Ensure content respects safe-area for notch in webview mode */
.webview-mode #main-content {
  margin-top: 0 !important;
  padding-top: calc(env(safe-area-inset-top, 0px) + 0.5rem) !important;
}

/* Mobile adjustments */
@media (max-width: 575px) {
  .webview-mode #main-content {
    margin-top: 0 !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + 0.4rem) !important;
  }
}

/* Tablet adjustments */
@media (min-width: 576px) and (max-width: 1024px) {
  .webview-mode #main-content {
    margin-top: 0 !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + 0.5rem) !important;
  }
}

/* Large tablets and iPad Pro landscape */
@media (min-width: 1024px) and (max-width: 1366px) {
  .webview-mode #main-content {
    margin-top: 0 !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + 0.5rem) !important;
  }
}

/* Ensure containers also respect safe areas */
.webview-mode .container {
  padding-left: calc(env(safe-area-inset-left, 0px) + 0.75rem) !important;
  padding-right: calc(env(safe-area-inset-right, 0px) + 0.75rem) !important;
}

/* Dashboard container specific - no margin for notch */
.webview-mode .dashboard-container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Prevent unnecessary scroll on devise pages in webview mode */
.webview-mode body.min-vh-100 {
  min-height: 100vh !important;
  min-height: 100dvh !important;
  height: auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  /* Prevent scroll to bottom on load */
  scroll-behavior: auto !important;
}

/* Devise container - add normal top padding for visual spacing */
.webview-mode .devise-container {
  min-height: auto !important;
  height: auto !important;
  padding-top: 2rem !important;
}

@media (max-width: 575px) {
  .webview-mode .devise-container {
    padding-top: 1.5rem !important;
  }
}

/* Devise card - remove top margin/padding when header is hidden */
.webview-mode .devise-card {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Devise body content - adjust padding when header is hidden */
.webview-mode .devise-body-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

@media (max-width: 575px) {
  .webview-mode body.min-vh-100 {
    /* On mobile, allow scroll only if content exceeds viewport */
    overflow-y: auto !important;
    /* Remove flex-grow behavior that can create extra space */
    display: flex !important;
    flex-direction: column !important;
  }
  
  .webview-mode #main-content.flex-grow-1 {
    /* Don't grow to fill space, just fit content */
    flex-grow: 0 !important;
    min-height: auto !important;
  }
  
  .webview-mode .devise-container {
    /* Ensure container doesn't force min-height */
    min-height: auto !important;
    height: fit-content !important;
    /* Add padding-bottom to prevent content from being hidden by bottom menu */
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: visible !important;
  }
}

/* Hide reCAPTCHA in webview mode */
.webview-mode .recaptcha-container,
.webview-mode .g-recaptcha {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Hide back button on devise pages */
.webview-mode .devise-container ~ .webview-back-btn-fixed,
body.webview-mode.devise .webview-back-btn-fixed {
  display: none !important;
}

/* ============================================
   MODAL Z-INDEX FIX FOR WEBVIEW MODE
   Ensure modals appear above all other elements
   Bootstrap backdrop = 1040, modal = 1050 by default
   The issue is that nested modals create stacking contexts
   ============================================ */

/* CRITICAL: Prevent parent elements from creating new stacking contexts */
body.webview-mode .stocks-section,
body.webview-mode .stock-events-section,
body.webview-mode .stock-events-grid,
body.webview-mode .stock-event-card {
  transform: none !important;
  -webkit-transform: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  perspective: none !important;
  isolation: auto !important;
  contain: none !important;
  will-change: auto !important;
}

/* Backdrop - append to body, should be below modal */
body.webview-mode .modal-backdrop,
body.webview-mode .modal-backdrop.fade,
body.webview-mode .modal-backdrop.show,
.webview-mode .modal-backdrop,
.webview-mode .modal-backdrop.fade,
.webview-mode .modal-backdrop.show {
  z-index: 1040 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
}

/* Modal container - MUST be above backdrop */
body.webview-mode .modal,
body.webview-mode .modal.fade,
body.webview-mode .modal.show,
.webview-mode .modal,
.webview-mode .modal.fade,
.webview-mode .modal.show {
  z-index: 1055 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  /* Remove any transform that could create stacking context issues */
  transform: none !important;
  -webkit-transform: none !important;
}

/* Dialog inside modal */
body.webview-mode .modal .modal-dialog,
.webview-mode .modal .modal-dialog {
  z-index: 1056 !important;
  position: relative !important;
  margin: 1.75rem auto !important;
}

/* Content inside dialog */
body.webview-mode .modal .modal-content,
.webview-mode .modal .modal-content {
  z-index: 1057 !important;
  position: relative !important;
}

/* ============================================
   FORM SWITCH FIXES FOR WEBVIEW MODE
   Ensure Bootstrap switches render correctly
   ============================================ */
.webview-mode .form-check.form-switch,
.webview-mode .form-switch {
  padding-left: 2.5em !important;
  min-height: 1.5rem !important;
}

.webview-mode .form-switch .form-check-input,
.webview-mode .form-check-input[role="switch"] {
  width: 2em !important;
  height: 1em !important;
  margin-left: -2.5em !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255,255,255,0.25%29'/%3e%3c/svg%3e") !important;
  background-position: left center !important;
  border-radius: 2em !important;
  transition: background-position .15s ease-in-out !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-color: rgba(45, 55, 72, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  overflow: hidden !important;
}

.webview-mode .form-switch .form-check-input:checked,
.webview-mode .form-check-input[role="switch"]:checked {
  background-color: #00d4aa !important;
  border-color: #00d4aa !important;
  background-position: right center !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}

/* ============================================
   MOBILE / IPAD: SAME LAYOUT AS WEBVIEW MODE
   Applied via media query so they take effect
   before JS adds the webview-mode class.
   ============================================ */

@media (max-width: 1024px) {
  /* Hide navbar */
  .navbar {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Hide footer (replaced by bottom nav) */
  footer,
  .site-footer,
  .footer {
    display: none !important;
  }

  /* Hide dashboard/page headers */
  .dashboard-header {
    display: none !important;
  }

  /* Hide page title/subtitle */
  .dashboard-title,
  .dashboard-subtitle,
  h1.dashboard-title,
  h2.dashboard-title,
  h3.dashboard-title {
    display: none !important;
  }

  /* Container padding adjustments */
  .dashboard-container {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  .container {
    padding-top: 0.5rem !important;
  }

  #main-content {
    margin-top: 0 !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + 0.5rem) !important;
  }

  /* Prevent iOS zoom on inputs */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  textarea,
  select,
  .form-control {
    font-size: 16px !important;
  }

  /* Hide scrollbars */
  ::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
  }

  * {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
}