/* ================================================
   MOBILE UNIFIED CSS - Single Source of Truth
   Consolidates all mobile fixes into one clean file
   Version: 2.0 - Dec 2024 (Enterprise Design System)

   IMPORTANT: This file extends the master CSS variables
   defined in /static/css/_variables.css
   ================================================ */

/* ================================================
   GLOBAL NAVIGATION QUALITY IMPROVEMENTS
   Cursor pointer on all clickable nav elements
   ================================================ */
.nav-link, .nav-item, .sidebar a, .nav-icon, .navbar-nav a,
.mobile-bottom-nav a, .tab-btn, .tab-link, [role="tab"],
[role="button"], button, a[href], .clickable, .btn,
.card-header[data-toggle], .dropdown-toggle, .accordion-header {
  cursor: pointer !important;
}

/* High-quality icon rendering */
.fas, .far, .fab, .fa, .nav-icon, .sidebar-icon,
.mobile-bottom-nav i, .nav-link i, .sidebar a i {
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ================================================
   HAMBURGER VISIBILITY - DESKTOP vs MOBILE vs PWA
   Hide on desktop, show on mobile AND PWA standalone
   ================================================ */

/* Hide hamburger on desktop by default */
@media (min-width: 993px) {
  .mobile-hamburger,
  #mobile-menu-toggle {
    display: none !important;
  }
}

/* Show hamburger in PWA standalone mode (overrides desktop hide) */
@media (display-mode: standalone) {
  .mobile-hamburger,
  #mobile-menu-toggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* Show hamburger when body has pwa-standalone class (JS fallback) */
body.pwa-standalone .mobile-hamburger,
body.pwa-standalone #mobile-menu-toggle,
html.pwa-standalone .mobile-hamburger,
html.pwa-standalone #mobile-menu-toggle {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ================================================
   MOBILE-SPECIFIC VARIABLE OVERRIDES
   (Extends global :root from _variables.css)
   ================================================ */
@media (max-width: 992px) {
  :root {
    /* Layout - mobile overrides - Professional clean nav */
    --mobile-nav-height: 60px;
    --mobile-sidebar-width: 280px;
    --mobile-padding: var(--space-4, 16px);
    --mobile-radius: var(--radius-lg, 8px);
    
    /* UNIFIED: Total nav offset including safe area - use this for content padding */
    --nav-safe-offset: calc(var(--mobile-nav-height) + env(safe-area-inset-top, 0px));
    --content-top-padding: calc(var(--nav-safe-offset) + 8px);

    /* Use global z-index scale from _variables.css */
    /* These are defined for backwards compatibility */
    --z-content: var(--z-base, 1);
    --z-footer: 10;
    --z-fab: var(--z-fixed, 1000);
    --z-nav: 1010;
    --z-overlay: var(--z-overlay, 1050);
    --z-sidebar: 1070;
    --z-hamburger: 1080;
    --z-modal-backdrop: 1085;
    --z-modal: var(--z-modal, 1090);
    --z-toast: var(--z-tooltip, 1100);

    /* Reference global colors from _variables.css */
    --brand-primary: var(--color-primary, #5D4CDA);
    --brand-secondary: var(--color-primary-light, #7867E8);

    /* Override desktop sidebar width */
    --side-w: 0px;
  }
}

/* ================================================
   CRITICAL: SCROLL FIX (HIGHEST PRIORITY)
   Ensures page is ALWAYS scrollable when no blocking UI
   ================================================ */

/* ================================================
   SCROLL ARCHITECTURE - VIEWPORT OWNS SCROLLING
   
   CRITICAL: Never lock html/body overflow for PWA detection.
   iOS Safari WebKit bugs (248356/258417) freeze scrolling
   when html/body overflow is toggled at runtime.
   
   Solution: Viewport scrolls naturally. Only lock scroll
   when modal/sidebar is ACTUALLY open via .scroll-locked class.
   ================================================ */

/* Utility class - ONLY class that locks scroll (used by modals/sidebars)
   NOTE: Do NOT use position:fixed as it breaks scroll restoration on iOS Safari */
body.scroll-locked {
  overflow: hidden !important;
  /* position: fixed removed - causes iOS Safari scroll freeze */
  touch-action: none !important;
}

/* PWA Standalone Mode - just add padding, NEVER touch overflow */
@media (display-mode: standalone) {
  body {
    /* Reserve space for fixed nav (top 48px) and bottom nav (56px) */
    padding-top: calc(56px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }
}

/* JS fallback class for PWA detection - just padding, no overflow changes */
body.pwa-standalone {
  padding-top: calc(56px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
}

/* App-shell is always transparent */
#app-shell {
  display: block;
  position: static;
  overflow: visible;
}

/* Non-PWA: app-shell uses normal block layout (display:contents triggers Safari WebKit bug 248356) */
@media not all and (display-mode: standalone) {
  #app-shell {
    display: block;
    position: static;
    overflow: visible;
  }
}

/* Hide footer on mobile PWA - bottom nav is visible instead */
@media (display-mode: standalone) {
  footer.pwa-footer {
    display: none !important;
  }
}

body.pwa-standalone footer.pwa-footer {
  display: none !important;
}

@media (max-width: 992px) {
  /* Base scrolling - enabled by default, but respect Bootstrap modal state */
  html {
    overflow-y: auto;
    overflow-x: hidden;
    height: auto;
    min-height: 100%;
    position: static;
    -webkit-overflow-scrolling: touch;
  }

  /* Base body styles - NO overflow override, let Bootstrap manage .modal-open */
  body {
    overflow-x: hidden;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    position: static;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y pan-x;
    overscroll-behavior-y: auto;
  }

  /* Let Bootstrap manage scroll locking for modals/sidebars natively */
  /* No custom overflow toggling - this caused iOS Safari freezes */

  /* Content area - always scrollable */
  .content,
  main,
  .main-content,
  [role="main"] {
    overflow: visible !important;
    height: auto !important;
    min-height: auto !important;
    position: relative !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y pan-x !important;
    pointer-events: auto !important;
  }

  /* Container elements */
  .content .container-fluid,
  .content .container {
    overflow: visible !important;
    height: auto !important;
    pointer-events: auto !important;
  }
}

/* ================================================
   iOS SAFARI SCROLL RECOVERY FIX
   Fixes WebKit bugs 248356 and 258417 that cause scroll freeze
   ================================================ */
@media (max-width: 992px) {
  /* iOS Safari specific: Force GPU compositing to prevent scroll freeze */
  html, body {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  
  /* Ensure scroll recovery after modal/sidebar close */
  body:not(.modal-open):not(.sidebar-open) {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: auto !important;
  }
  
  /* PWA standalone mode: extra scroll protection */
  body.pwa-standalone:not(.modal-open):not(.sidebar-open),
  html.pwa-standalone body:not(.modal-open):not(.sidebar-open) {
    overflow-y: auto !important;
    height: auto !important;
    position: static !important;
  }
  
  /* Prevent touch event blocking that causes freeze */
  #app-shell {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: auto;
  }
}

/* ================================================
   MOBILE BACK BUTTON NAVIGATION
   ================================================ */
@media (max-width: 992px) {
  /* Back button - HIDDEN by default, shown via JS on inner pages */
  .mobile-back-btn {
    display: none !important; /* Hidden by default */
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    flex-shrink: 0 !important;
    border-radius: 10px !important;
    background: rgba(0, 0, 0, 0.05) !important;
    border: none !important;
    color: #374151 !important;
    margin-right: 6px !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
  }

  /* When explicitly shown via JS inline style */
  .mobile-back-btn[style*="display: flex"],
  .mobile-back-btn[style*="display:flex"] {
    display: flex !important;
  }

  .mobile-back-btn:hover,
  .mobile-back-btn:active {
    background: rgba(0, 0, 0, 0.1) !important;
  }

  .mobile-back-btn i,
  .mobile-back-btn svg {
    font-size: 16px !important;
    width: 16px !important;
    height: 16px !important;
  }
}

/* ================================================
   NAVIGATION BAR
   ================================================ */
@media (max-width: 992px) {
  .app-nav,
  .navbar.app-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: var(--nav-safe-offset, calc(var(--mobile-nav-height) + env(safe-area-inset-top, 0))) !important;
    padding: 0 var(--mobile-padding) !important;
    padding-top: env(safe-area-inset-top, 0) !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border-bottom: 1px solid var(--border-light) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    z-index: var(--z-nav) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
  }

  .app-nav .container-fluid {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 100% !important;
    padding: 0 !important;
  }

  /* Logo container - properly sized */
  .app-brand {
    display: flex !important;
    align-items: center !important;
    padding: 2px 4px !important;
    background: transparent !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  /* Logo size - Professional and clean */
  .app-brand img,
  .app-brand .nav-logo,
  .nav-logo,
  img.nav-logo {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    width: auto !important;
    max-width: 160px !important;
    object-fit: contain !important;
    object-position: left center !important;
  }

  /* Smaller logo on very small screens */
  @media (max-width: 374px) {
    .app-brand img,
    .app-brand .nav-logo,
    .nav-logo,
    img.nav-logo {
      height: 32px !important;
      min-height: 32px !important;
      max-height: 32px !important;
      max-width: 140px !important;
    }
  }

  /* Nav actions - compact, don't overflow */
  .nav-actions-container {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
    max-width: 50% !important;
  }

  .nav-actions-container .btn {
    padding: 6px 10px !important;
    min-height: 36px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
  }

  .nav-actions-container .btn i {
    font-size: 16px !important;
  }

  /* Hide text on nav buttons, show only icons */
  .nav-actions-container .btn span {
    display: none !important;
  }

  /* Notification bell - compact */
  .nav-bell,
  #notificationBell {
    padding: 6px !important;
    background: transparent !important;
    border: none !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
  }

  .nav-bell i,
  #notificationBell i {
    font-size: 18px !important;
  }

  /* Hide desktop-only elements */
  .nav-actions-container .d-none.d-lg-flex,
  .nav-actions-container .d-none.d-lg-inline-flex,
  .nav-actions-container form[action="/logout"],
  .nav-actions-container .d-none.d-xl-block {
    display: none !important;
  }
}

/* ================================================
   HAMBURGER MENU BUTTON - HIGH PRIORITY
   ================================================ */
@media (max-width: 992px) {
  /* CRITICAL: Ensure hamburger is ALWAYS visible */
  .mobile-hamburger,
  #mobile-menu-toggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    margin-right: 8px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    z-index: 1080 !important;
    position: relative !important;
    flex-shrink: 0 !important;
    transition: background 0.2s ease, transform 0.1s ease !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
  }

  .mobile-hamburger:hover,
  .mobile-hamburger:active,
  #mobile-menu-toggle:hover,
  #mobile-menu-toggle:active {
    background: rgba(93, 76, 218, 0.1) !important;
    transform: scale(0.95) !important;
  }

  /* Hamburger icon lines - THREE PURPLE BARS */
  .hamburger-icon {
    width: 22px !important;
    height: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    position: relative !important;
  }

  .hamburger-icon span {
    display: block !important;
    width: 100% !important;
    height: 2px !important;
    background-color: #1f2937 !important;
    border-radius: 2px !important;
    transition: all 0.3s ease !important;
  }

  /* Animate to X when open */
  body.sidebar-open .hamburger-icon span:nth-child(1) {
    transform: rotate(45deg) translate(4px, 4px) !important;
  }

  body.sidebar-open .hamburger-icon span:nth-child(2) {
    opacity: 0 !important;
  }

  body.sidebar-open .hamburger-icon span:nth-child(3) {
    transform: rotate(-45deg) translate(4px, -4px) !important;
  }
}

/* ================================================
   NAVBAR FLEX CONTAINER - PREVENT OVERLAPPING
   ================================================ */
@media (max-width: 992px) {
  /* First flex container (hamburger + back + logo) */
  .navbar .container-fluid > .d-flex:first-child,
  .app-nav .container-fluid > .d-flex:first-child {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  /* Logo responsive sizing - Professional and visible */
  .nav-logo {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    width: auto !important;
    max-width: 180px !important;
    object-fit: contain !important;
    object-position: left center !important;
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: crisp-edges !important;
  }

  /* Desktop logo size - BIGGER */
  @media (min-width: 993px) {
    .nav-logo {
      height: 80px !important;
      min-height: 80px !important;
      max-height: 80px !important;
      max-width: 280px !important;
    }
  }

  /* Very small screens - slightly smaller logo */
  @media (max-width: 374px) {
    .nav-logo {
      height: 56px !important;
      min-height: 56px !important;
      max-height: 56px !important;
      max-width: 140px !important;
    }
  }
}

/* ================================================
   MOBILE OVERLAY
   ================================================ */
@media (max-width: 992px) {
  .mobile-overlay,
  #mobile-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: transparent !important;
    z-index: var(--z-overlay) !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transition: background 0.3s ease, opacity 0.3s ease !important;
    display: block !important;
  }

  .mobile-overlay.show,
  #mobile-overlay.show {
    background: rgba(0, 0, 0, 0.4) !important;
    pointer-events: auto !important;
    opacity: 1 !important;
  }

  /* CRITICAL: Force hide overlay when sidebar is closed */
  body:not(.sidebar-open) .mobile-overlay,
  body:not(.sidebar-open) #mobile-overlay {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    background: transparent !important;
  }
}

/* ================================================
   SIDEBAR
   ================================================ */
@media (max-width: 992px) {
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: var(--mobile-sidebar-width) !important;
    max-width: 85vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: #ffffff !important;
    z-index: var(--z-sidebar) !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    padding-top: calc(var(--nav-safe-offset, calc(var(--mobile-nav-height) + env(safe-area-inset-top, 0))) + 16px) !important;
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0)) !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    pointer-events: none !important;
  }

  .sidebar.show {
    transform: translateX(0) !important;
    box-shadow: 8px 0 30px rgba(0, 0, 0, 0.2) !important;
    pointer-events: auto !important;
  }

  /* Remove pseudo-elements that might block */
  .sidebar::before,
  .sidebar::after {
    display: none !important;
    content: none !important;
  }

  /* Sidebar links - Professional Clean Design */
  .sidebar a,
  .sidebar .nav-link {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    margin: 2px 0 !important;
    min-height: 44px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    color: #374151 !important;
    letter-spacing: -0.01em !important;
    opacity: 1 !important;
    background: transparent !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    -webkit-font-smoothing: antialiased !important;
    border: none !important;
  }

  .sidebar a:hover,
  .sidebar a:active {
    background: #f3f4f6 !important;
    color: #1f2937 !important;
  }

  .sidebar a.active {
    background: #f3f4f6 !important;
    color: #5D4CDA !important;
    font-weight: 600 !important;
  }

  .sidebar a.active i {
    color: #5D4CDA !important;
  }

  .sidebar a i {
    width: 20px !important;
    font-size: 16px !important;
    color: #6b7280 !important;
    opacity: 1 !important;
    flex-shrink: 0 !important;
    text-align: center !important;
  }
  
  /* Dispute nav item - Red Priority */
  .sidebar a.dispute-nav-item {
    background: #fef2f2 !important;
    border-left: 3px solid #ef4444 !important;
    padding-left: 11px !important;
  }
  .sidebar a.dispute-nav-item i {
    color: #ef4444 !important;
  }
  .sidebar a.dispute-nav-item:hover {
    background: #fee2e2 !important;
  }
  
  /* Sidebar Badges */
  .sidebar .sidebar-badge {
    font-size: 10px !important;
    font-weight: 600 !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    margin-left: auto !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
  }
  
  .sidebar .sidebar-badge.dispute-badge {
    background: #fee2e2 !important;
    color: #dc2626 !important;
    font-weight: 700 !important;
  }
  
  .sidebar .sidebar-badge.loans-badge {
    background: #dcfce7 !important;
    color: #16a34a !important;
  }
  
  .sidebar .sidebar-badge.upload-badge {
    background: #ffedd5 !important;
    color: #ea580c !important;
  }
  
  .sidebar .sidebar-badge.pro-badge {
    background: #eef2ff !important;
    color: #6366f1 !important;
  }
  
  .sidebar .sidebar-badge.new-badge {
    background: #ecfdf5 !important;
    color: #059669 !important;
  }
  
  /* Loans nav item highlight removed (requested) */
  
  /* Disabled nav items */
  .sidebar a.nav-disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
  }
  
  /* Admin section */
  .sidebar .admin-label {
    color: #ef4444 !important;
  }
  .sidebar a.admin-nav-item {
    background: #fef2f2 !important;
  }
  .sidebar a.admin-nav-item i {
    color: #ef4444 !important;
  }
  
  /* Section Labels */
  .sidebar .sidebar-section-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #9ca3af !important;
    padding: 12px 14px 6px !important;
    margin: 0 !important;
  }
  
  /* Section Dividers */
  .sidebar .sidebar-divider {
    height: 1px !important;
    background: #e5e7eb !important;
    margin: 10px 0 !important;
    border: none !important;
  }

  /* Logout button */
  .sidebar a[href="/logout"] {
    background: rgba(239, 68, 68, 0.08) !important;
    color: #dc2626 !important;
    margin-top: 16px !important;
    border: 1px solid rgba(239, 68, 68, 0.2) !important;
  }

  .sidebar a[href="/logout"] i {
    color: #dc2626 !important;
  }
}

/* ================================================
   CONTENT AREA
   ================================================ */
@media (max-width: 992px) {
  .content {
    margin-left: 0 !important;
    margin-top: 0 !important;
    padding: var(--mobile-padding) !important;
    padding-top: var(--content-top-padding, calc(var(--nav-safe-offset, calc(var(--mobile-nav-height) + env(safe-area-inset-top, 0))) + 8px)) !important;
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0)) !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    width: 100% !important;
    max-width: 100vw !important;
    background: var(--bg-secondary) !important;
    overflow-x: hidden !important;
    z-index: var(--z-content) !important;
  }

  .content .container,
  .content .container-fluid {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ================================================
   MODAL FIXES
   ================================================ */
@media (max-width: 992px) {
  .modal {
    z-index: var(--z-modal) !important;
  }

  .modal-backdrop {
    z-index: var(--z-modal-backdrop) !important;
  }

  /* Force hide orphaned backdrops */
  .modal-backdrop:not(.show) {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }

  /* When modal is not open, remove backdrop */
  body:not(.modal-open) .modal-backdrop {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .modal-dialog {
    margin: 16px !important;
    max-width: calc(100% - 32px) !important;
    max-height: calc(100vh - 32px) !important;
  }

  .modal-content {
    border-radius: 16px !important;
    max-height: calc(100vh - 64px) !important;
    overflow: hidden !important;
  }

  .modal-body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-height: calc(100vh - 200px) !important;
  }

  .modal .btn-close {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ================================================
   SHEPHERD.JS GUIDED TOUR - Mobile Fixes
   Ensures tour buttons are clickable on mobile/PWA
   ================================================ */
@media (max-width: 992px) {
  /* Overlay must be above everything except the tour popup */
  .shepherd-modal-overlay-container {
    z-index: 99990 !important;
  }
  
  /* Tour popup above overlay */
  .shepherd-element {
    z-index: 99999 !important;
    pointer-events: auto !important;
    max-width: calc(100vw - 32px) !important;
  }
  
  /* Ensure buttons are fully clickable on touch devices */
  .shepherd-element .shepherd-button,
  .shepherd-element .btn,
  .shepherd-element button {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(93, 76, 218, 0.2) !important;
    min-height: 44px !important;
    min-width: 44px !important;
    cursor: pointer !important;
  }
  
  /* Tour content styling for mobile */
  .shepherd-content {
    border-radius: 16px !important;
    padding: 0 !important;
    max-width: calc(100vw - 32px) !important;
  }
  
  .shepherd-text {
    padding: 16px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  
  .shepherd-header {
    padding: 16px 16px 0 16px !important;
  }
  
  .shepherd-title {
    font-size: 18px !important;
    font-weight: 600 !important;
  }
  
  .shepherd-footer {
    padding: 12px 16px 16px 16px !important;
    gap: 8px !important;
  }
  
  /* Prevent body scroll when tour is active - use touch-action instead of overflow hidden */
  body.shepherd-active {
    touch-action: none !important;
    /* CRITICAL: Avoid overflow:hidden on iOS Safari - causes scroll freeze */
  }
  
  /* Visual feedback for button clicks */
  .shepherd-button:active,
  .shepherd-element button:active,
  .shepherd-element .btn:active {
    transform: scale(0.95) !important;
    opacity: 0.8 !important;
  }
}

/* PWA standalone mode - extra z-index boost */
@media (display-mode: standalone) {
  .shepherd-modal-overlay-container {
    z-index: 99990 !important;
  }
  
  .shepherd-element {
    z-index: 99999 !important;
  }
}

body.pwa-standalone .shepherd-modal-overlay-container {
  z-index: 99990 !important;
}

body.pwa-standalone .shepherd-element {
  z-index: 99999 !important;
}

/* ================================================
   CARDS
   ================================================ */
@media (max-width: 992px) {
  .card {
    background: var(--bg-primary) !important;
    border: none !important;
    border-radius: var(--mobile-radius) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    margin-bottom: var(--mobile-padding) !important;
    overflow: hidden !important;
  }

  .card-header {
    padding: 16px !important;
    border-bottom: 1px solid var(--border-light) !important;
  }
  
  /* Only make transparent if NO background class is applied */
  .card-header:not([class*="bg-"]):not([style*="background"]) {
    background: transparent !important;
  }
  
  /* PRESERVE colored backgrounds on card headers */
  .card-header.bg-primary,
  .card-header.bg-secondary,
  .card-header.bg-success,
  .card-header.bg-danger,
  .card-header.bg-warning,
  .card-header.bg-info,
  .card-header.bg-indigo,
  .card-header[class*="bg-"] {
    color: white !important;
  }
  
  .card-header[class*="bg-"] h5,
  .card-header[class*="bg-"] h6,
  .card-header[class*="bg-"] p,
  .card-header[class*="bg-"] span,
  .card-header[class*="bg-"] i {
    color: white !important;
  }

  .card-body {
    padding: 16px !important;
  }

  .card-footer {
    padding: 12px 16px !important;
    border-top: 1px solid var(--border-light) !important;
    background: var(--bg-secondary) !important;
  }
}

/* ================================================
   BUTTONS - Touch Friendly
   ================================================ */
@media (max-width: 992px) {
  .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 12px 20px !important;
    min-height: var(--touch-target-min) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: var(--mobile-radius) !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    pointer-events: auto !important;
  }

  .btn:active {
    transform: scale(0.97) !important;
    opacity: 0.9 !important;
  }

  .btn-primary {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)) !important;
    color: #fff !important;
    border: none !important;
  }

  .btn-sm {
    padding: 8px 14px !important;
    min-height: 36px !important;
    font-size: 13px !important;
  }

  .btn-lg {
    padding: 16px 24px !important;
    min-height: 56px !important;
    font-size: 17px !important;
  }
}

/* ================================================
   FORMS
   ================================================ */
@media (max-width: 992px) {
  .form-control,
  .form-select,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  textarea,
  select {
    font-size: 16px !important; /* Prevents iOS zoom */
    padding: 14px 16px !important;
    min-height: 52px !important;
    border: 1px solid var(--border-light) !important;
    border-radius: var(--mobile-radius) !important;
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    width: 100% !important;
    -webkit-appearance: none !important;
  }

  .form-control:focus,
  .form-select:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 3px rgba(93, 76, 218, 0.15) !important;
    outline: none !important;
  }

  .form-label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text-secondary) !important;
    margin-bottom: 8px !important;
  }

  .form-check-input {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    border-radius: 6px !important;
    border: 2px solid #d1d5db !important;
    background-color: #fff !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    margin-top: 0 !important;
    margin-right: 10px !important;
  }

  .form-check-input:checked {
    background-color: #5D4CDA !important;
    border-color: #5D4CDA !important;
  }

  .form-check {
    display: flex !important;
    align-items: center !important;
    padding-left: 0 !important;
    margin-bottom: 12px !important;
    min-height: 44px !important;
  }

  .form-check-label {
    font-size: 16px !important;
    color: #374151 !important;
    cursor: pointer !important;
    flex: 1 !important;
  }
}

/* ================================================
   GRID SYSTEM
   ================================================ */
@media (max-width: 992px) {
  .row {
    margin-left: -8px !important;
    margin-right: -8px !important;
  }

  .row > * {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Stack columns on mobile */
  .col-md-2, .col-md-3, .col-md-4, .col-md-5,
  .col-md-6, .col-md-7, .col-md-8, .col-md-9,
  .col-md-10, .col-md-11, .col-md-12,
  .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5,
  .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9,
  .col-lg-10, .col-lg-11, .col-lg-12 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* Stats grid - 2 columns */
  .stats-grid > *,
  .row.stats-row > [class*="col-"] {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}

/* ================================================
   TYPOGRAPHY
   ================================================ */
@media (max-width: 992px) {
  h1 { font-size: 24px !important; font-weight: 700 !important; }
  h2 { font-size: 20px !important; font-weight: 700 !important; }
  h3 { font-size: 18px !important; font-weight: 600 !important; }
  h4 { font-size: 16px !important; font-weight: 600 !important; }
  h5 { font-size: 15px !important; font-weight: 600 !important; }
  h6 { font-size: 14px !important; font-weight: 600 !important; }

  p {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }
}

/* ================================================
   TABLES
   ================================================ */
@media (max-width: 992px) {
  .table-responsive {
    margin: 0 -16px !important;
    padding: 0 16px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .table {
    font-size: 14px !important;
    min-width: 600px !important;
  }

  .table th,
  .table td {
    padding: 10px 12px !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
  }
}

/* ================================================
   DASHBOARD SPECIFIC
   ================================================ */
@media (max-width: 992px) {
  /* Hero section */
  .dashboard-hero,
  .dashboard-hero-gradient,
  [class*="hero-gradient"] {
    padding: 20px !important;
    border-radius: 16px !important;
    margin-bottom: 16px !important;
  }

  .dashboard-hero h1,
  .dashboard-hero-gradient h1 {
    font-size: 1.4rem !important;
    color: #ffffff !important;
  }

  .dashboard-hero p,
  .dashboard-hero-gradient p {
    font-size: 0.9rem !important;
    color: rgba(255, 255, 255, 0.9) !important;
  }

  /* Score cards */
  .bureau-card,
  .score-card,
  [class*="score-card"] {
    padding: 16px !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
  }

  .score-value,
  .score-display {
    font-size: 2rem !important;
    font-weight: 700 !important;
  }

  /* Progress tracker */
  .progress-tracker {
    padding: 16px !important;
    border-radius: 12px !important;
  }

  /* Tradeline items */
  .tradeline-item,
  .dispute-item {
    padding: 14px !important;
    margin-bottom: 10px !important;
    border-radius: 10px !important;
  }
}

/* ================================================
   FOOTER
   ================================================ */
@media (max-width: 992px) {
  footer {
    margin-left: 0 !important;
    padding: 20px var(--mobile-padding) !important;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0)) !important;
    text-align: center !important;
    font-size: 13px !important;
    z-index: var(--z-footer) !important;
  }
}

/* ================================================
   SUPPORT FAB
   ================================================ */
@media (max-width: 992px) {
  .support-fab {
    position: fixed !important;
    bottom: calc(20px + env(safe-area-inset-bottom, 0)) !important;
    right: 16px !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    z-index: var(--z-fab) !important;
  }

  .support-fab span {
    display: none !important;
  }

  /* Hide FAB when sidebar is open */
  body.sidebar-open .support-fab {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: scale(0.8) translateY(20px) !important;
  }
}

/* ================================================
   OVERLAY/BACKDROP CLEANUP (CRITICAL)
   ================================================ */
@media (max-width: 992px) {
  /* Force hide ALL overlays when no modal/sidebar is open */
  body:not(.sidebar-open):not(.modal-open) .mobile-overlay,
  body:not(.sidebar-open):not(.modal-open) #mobile-overlay,
  body:not(.sidebar-open):not(.modal-open) [class*="overlay"]:not(.show),
  body:not(.modal-open) .modal-backdrop:not(.show) {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    background: transparent !important;
  }

  /* Ensure content is interactive when nothing is blocking */
  body:not(.sidebar-open):not(.modal-open) .content,
  body:not(.sidebar-open):not(.modal-open) .content * {
    pointer-events: auto !important;
  }

  /* Prevent pseudo-elements from blocking */
  body::before,
  body::after,
  html::before,
  html::after {
    pointer-events: none !important;
  }

  /* Kill any stuck click blockers */
  [data-click-blocker],
  #page-overlay[aria-hidden="true"],
  .page-overlay:not(.show),
  .loading-overlay:not(.show) {
    display: none !important;
    pointer-events: none !important;
  }
}

/* ================================================
   SAFE AREAS (iPhone X+)
   ================================================ */
@supports (padding: max(0px)) {
  @media (max-width: 992px) {
    .app-nav {
      padding-left: max(16px, env(safe-area-inset-left)) !important;
      padding-right: max(16px, env(safe-area-inset-right)) !important;
    }

    .content {
      padding-left: max(16px, env(safe-area-inset-left)) !important;
      padding-right: max(16px, env(safe-area-inset-right)) !important;
    }
  }
}

/* ================================================
   ACCESSIBILITY
   ================================================ */
@media (max-width: 992px) {
  /* Focus indicators */
  *:focus-visible {
    outline: 3px solid rgba(93, 76, 218, 0.5) !important;
    outline-offset: 2px !important;
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}

/* ================================================
   SMALL SCREENS (< 375px)
   ================================================ */
@media (max-width: 374px) {
  :root {
    --mobile-padding: 12px;
    --mobile-sidebar-width: 260px;
  }

  .app-brand img {
    height: 70px !important;
    min-height: 70px !important;
    max-width: 200px !important;
  }

  h1 { font-size: 20px !important; }
  h2 { font-size: 18px !important; }
  h3 { font-size: 16px !important; }

  .btn {
    padding: 10px 16px !important;
    font-size: 14px !important;
  }

  .card-body {
    padding: 12px !important;
  }
}

/* ================================================
   EXTRA SMALL SCREENS (< 576px)
   ================================================ */
@media (max-width: 575px) {
  .content {
    padding: 12px !important;
    padding-top: var(--content-top-padding, calc(var(--nav-safe-offset) + 8px)) !important;
  }

  /* Full width stats on very small screens */
  .stats-grid > *,
  .row.stats-row > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* ================================================
   KEYBOARD FOCUS FIX (Consent/Attestation)
   ================================================ */
@media (max-width: 992px) {
  body.consent-input-active {
    overflow: auto !important;
    position: static !important;
  }

  body.consent-input-active .sidebar,
  body.consent-input-active .mobile-overlay,
  body.consent-input-active #mobile-overlay {
    display: none !important;
    pointer-events: none !important;
  }

  #signature_name,
  .consent-input-container input {
    font-size: 16px !important;
    min-height: 56px !important;
    padding: 16px !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 12px !important;
  }

  #signature_name:focus,
  .consent-input-container input:focus {
    border-color: #3b82f6 !important;
    outline: none !important;
  }
}

/* ================================================
   PRINT STYLES
   ================================================ */
@media print {
  .sidebar,
  .app-nav,
  .mobile-hamburger,
  .mobile-overlay,
  .support-fab,
  footer {
    display: none !important;
  }

  .content {
    margin: 0 !important;
    padding: 20px !important;
  }
}

/* ================================================
   ENHANCED SCROLL FIX - ALL USER TYPES
   (Self users, clients, pros - everyone scrolls)
   ================================================ */
@media (max-width: 992px) {
  /* NUCLEAR scroll unlock - highest priority */
  html:not(.modal-active):not(.sidebar-active) {
    overflow: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    position: static !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y pan-x !important;
  }

  body:not(.modal-open):not(.sidebar-open) {
    overflow: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    position: static !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y pan-x !important;
    overscroll-behavior: auto !important;
  }

  /* Ensure main content areas are always scrollable */
  .content:not(.modal-backdrop),
  main:not(.modal-backdrop),
  .main-content:not(.modal-backdrop),
  .dashboard-container,
  .wrap,
  .container,
  .container-fluid {
    overflow: visible !important;
    height: auto !important;
    min-height: auto !important;
    position: relative !important;
    pointer-events: auto !important;
    touch-action: pan-y pan-x !important;
  }

  /* Remove any stuck scroll locks */
  .no-scroll,
  .scroll-locked,
  .overflow-hidden:not(.modal-open):not(.sidebar-open) {
    overflow: auto !important;
    position: static !important;
  }
}

/* ================================================
   DASHBOARD ALIGNMENT FIXES
   ================================================ */
@media (max-width: 992px) {
  /* Dashboard hero section */
  .dashboard-hero,
  .dashboard-hero-gradient,
  [class*="gradient-card"] {
    padding: 20px 16px !important;
    border-radius: 16px !important;
    margin: 0 0 16px 0 !important;
  }

  .dashboard-hero .row,
  .dashboard-hero-gradient .row {
    flex-direction: column !important;
    gap: 16px !important;
  }

  .dashboard-hero [class*="col-"],
  .dashboard-hero-gradient [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* Hero stats alignment */
  .dashboard-hero .d-flex.align-items-center {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  .dashboard-hero .d-flex.gap-4,
  .dashboard-hero .d-flex.gap-3 {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 16px !important;
    width: 100% !important;
    margin-top: 12px !important;
  }

  /* KPI stat cards - 2 column grid */
  .row.mb-4 > [class*="col-md"],
  .row.mb-4 > [class*="col-lg"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* Stats row - 2 columns on mobile */
  .stats-row > [class*="col-"],
  [class*="stats-grid"] > * {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }

  /* Score gauge cards - stack vertically */
  .score-gauge-card {
    margin-bottom: 16px !important;
  }

  .score-gauge-wrapper {
    width: 180px !important;
    height: 120px !important;
    margin: 0 auto !important;
  }

  .score-gauge-wrapper svg {
    width: 100% !important;
    height: auto !important;
  }

  /* Dashboard container */
  .dashboard-container {
    padding: 0 !important;
  }

  /* Welcome header mobile */
  .dashboard-hero h1,
  .dashboard-hero-gradient h1 {
    font-size: 1.4rem !important;
    text-align: center !important;
  }

  .dashboard-hero p,
  .dashboard-hero-gradient p {
    text-align: center !important;
    font-size: 0.9rem !important;
  }

  /* Action buttons in hero */
  .dashboard-hero .btn,
  .dashboard-hero-gradient .btn {
    width: 100% !important;
    margin-top: 8px !important;
  }
}

/* ================================================
   CLIENT DASHBOARD SPECIFIC FIXES
   ================================================ */
@media (max-width: 992px) {
  /* Client hero section */
  .dashboard-hero .hero-header {
    flex-direction: column !important;
    text-align: center !important;
    gap: 12px !important;
  }

  .dashboard-hero .hero-avatar {
    margin: 0 auto 8px auto !important;
  }

  .dashboard-hero .hero-title {
    font-size: 1.5rem !important;
  }

  .dashboard-hero .hero-subtitle {
    font-size: 0.9rem !important;
  }

  /* Hero stats grid */
  .hero-stats {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 16px !important;
  }

  .hero-stats .stat-item {
    min-width: 100px !important;
    text-align: center !important;
  }

  .hero-stats .stat-divider {
    display: none !important;
  }

  /* Hero action buttons */
  .dashboard-hero .col-lg-4 .d-flex {
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .hero-btn {
    width: 100% !important;
    padding: 14px 20px !important;
    text-align: center !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 10 !important;
  }

  /* Progress tracker mobile */
  .progress-tracker {
    padding: 16px !important;
    margin: 0 -8px !important;
  }

  .progress-stepper {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .progress-step {
    padding: 14px !important;
    flex-direction: column !important;
    text-align: center !important;
  }

  .progress-step .step-icon {
    margin: 0 auto 8px auto !important;
  }

  /* Bureau cards - 3 column on mobile */
  .bureau-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }

  .bureau-card {
    padding: 12px 8px !important;
    text-align: center !important;
    border-radius: 12px !important;
  }

  .bureau-card .score {
    font-size: 1.3rem !important;
    font-weight: 700 !important;
  }

  .bureau-card strong {
    font-size: 0.75rem !important;
    display: block !important;
  }

  /* Quick actions card */
  .quick-actions-card {
    padding: 16px !important;
  }

  .quick-actions-card .action-button {
    padding: 14px 16px !important;
    min-height: 52px !important;
    font-size: 0.9rem !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 5 !important;
  }

  /* Glass panels */
  .glass-panel {
    border-radius: 16px !important;
    margin-bottom: 16px !important;
  }
}

/* ================================================
   ACCOUNT SELECTION PAGE FIXES
   ================================================ */
@media (max-width: 992px) {
  /* Account selection container */
  .container.my-4 {
    padding: 0 12px !important;
    margin: 16px auto !important;
  }

  /* Table responsive on mobile */
  .table-responsive {
    margin: 0 -12px !important;
    padding: 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .table {
    min-width: 500px !important;
    font-size: 13px !important;
  }

  .table th,
  .table td {
    padding: 10px 8px !important;
    white-space: nowrap !important;
  }

  /* Action buttons */
  .text-center.mt-4 {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .text-center.mt-4 .btn {
    width: 100% !important;
    margin: 0 !important;
  }
}

/* ================================================
   PROFILE PAGE INTEGRATION
   (Styles for standalone profile page)
   ================================================ */
@media (max-width: 992px) {
  /* Profile page wrapper */
  .wrap {
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 16px 12px 100px 12px !important;
  }

  /* Profile cards */
  .wrap .card {
    padding: 16px 14px !important;
    border-radius: 12px !important;
    margin: 12px 0 !important;
  }

  /* Profile form rows */
  .wrap .row {
    flex-direction: column !important;
    gap: 0 !important;
  }

  .wrap .row .col {
    width: 100% !important;
    margin-bottom: 12px !important;
  }

  /* Profile inputs */
  .wrap input,
  .wrap select,
  .wrap textarea {
    width: 100% !important;
    padding: 14px 16px !important;
    font-size: 16px !important;
    min-height: 50px !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
  }

  /* Profile buttons */
  .wrap .btn {
    width: 100% !important;
    padding: 16px 24px !important;
    font-size: 16px !important;
    min-height: 54px !important;
    border-radius: 8px !important;
  }

  /* Back link sticky */
  .wrap .back-link {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    margin: 0 -12px 16px -12px !important;
    padding: 16px !important;
    border-radius: 0 !important;
    background: #fff !important;
    border-bottom: 1px solid #e5e5e5 !important;
    width: calc(100% + 24px) !important;
    min-height: 56px !important;
  }

  /* Address grid */
  .address-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .address-card {
    padding: 16px !important;
    border-radius: 12px !important;
  }
}

/* ================================================
   AGENCY DASHBOARD FIXES
   ================================================ */
@media (max-width: 992px) {
  /* Agency dashboard tabs */
  .nav-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 4px !important;
    padding-bottom: 4px !important;
  }

  .nav-tabs .nav-item {
    flex: 0 0 auto !important;
  }

  .nav-tabs .nav-link {
    white-space: nowrap !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
  }

  /* Agency stats cards */
  .agency-stats-card,
  .kpi-card {
    margin-bottom: 12px !important;
  }

  /* Client list items */
  .client-item,
  .client-card {
    padding: 16px !important;
    margin-bottom: 12px !important;
  }
}

/* ================================================
   GENERAL ALIGNMENT FIXES
   ================================================ */
@media (max-width: 992px) {
  /* Fix row gutters */
  .row.g-4 {
    --bs-gutter-x: 0.75rem !important;
    --bs-gutter-y: 0.75rem !important;
  }

  .row.g-3 {
    --bs-gutter-x: 0.5rem !important;
    --bs-gutter-y: 0.5rem !important;
  }

  /* Fix flex gaps */
  .d-flex.gap-4 {
    gap: 1rem !important;
  }

  .d-flex.gap-3 {
    gap: 0.75rem !important;
  }

  .d-flex.gap-2 {
    gap: 0.5rem !important;
  }

  /* Center text on mobile where needed */
  .text-end {
    text-align: center !important;
  }

  .text-start {
    text-align: left !important;
  }

  /* Margin bottom fixes */
  .mb-5 {
    margin-bottom: 1.5rem !important;
  }

  .mb-4 {
    margin-bottom: 1rem !important;
  }

  /* Padding fixes */
  .p-4 {
    padding: 1rem !important;
  }

  .p-5 {
    padding: 1.25rem !important;
  }

  /* Container fluid */
  .container-fluid {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Card title sizes */
  .card-body h5,
  .card-header h5 {
    font-size: 1rem !important;
  }

  .card-body h6,
  .card-header h6 {
    font-size: 0.9rem !important;
  }

  /* Badge styling */
  .badge {
    font-size: 10px !important;
    padding: 4px 8px !important;
  }
}

/* ================================================
   PWA/APP MODE FIXES
   ================================================ */
@media (max-width: 992px) {
  /* Ensure app-like scrolling */
  @supports (-webkit-touch-callout: none) {
    /* iOS specific fixes */
    body {
      -webkit-overflow-scrolling: touch !important;
    }

    .content {
      -webkit-overflow-scrolling: touch !important;
    }
  }

  /* Standalone app mode - use unified variable */
  @media (display-mode: standalone) {
    .content {
      padding-top: var(--content-top-padding) !important;
    }
  }
}

/* ================================================
   PWA STANDALONE MODE - FORCE MOBILE LAYOUT
   When app is installed on home screen, always use mobile layout
   regardless of viewport width detection
   ================================================ */
@media (display-mode: standalone) {
  /* CSS Variables for standalone - UNIFIED (compact navigation) */
  :root {
    --mobile-nav-height: 48px;
    --mobile-bottom-nav-height: 56px;
    --mobile-sidebar-width: 280px;
    --mobile-padding: 16px;
    --side-w: 0px;
    --z-hamburger: 1080;
    --z-sidebar: 1070;
    --z-overlay: 1050;
    --z-nav: 1010;
    /* UNIFIED safe-area aware variables */
    --nav-safe-offset: calc(var(--mobile-nav-height) + env(safe-area-inset-top, 0px));
    --content-top-padding: calc(var(--nav-safe-offset) + 8px);
  }

  /* Force mobile scrolling in standalone */
  html {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    min-height: 100% !important;
    position: static !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    position: static !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y pan-x !important;
    overscroll-behavior-y: auto !important;
  }

  /* Sidebar/modal scroll lock handled by .scroll-locked class only */

  /* CRITICAL: Show hamburger menu in PWA standalone */
  .mobile-hamburger,
  #mobile-menu-toggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    margin-right: 8px !important;
    background: rgba(93, 76, 218, 0.1) !important;
    border: 2px solid rgba(93, 76, 218, 0.2) !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    z-index: 1080 !important;
    position: relative !important;
    flex-shrink: 0 !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
  }

  .hamburger-icon {
    width: 20px !important;
    height: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    position: relative !important;
  }

  .hamburger-icon span {
    display: block !important;
    width: 100% !important;
    height: 2.5px !important;
    background: #1f2937 !important;
    border-radius: 2px !important;
    transition: all 0.3s ease !important;
  }

  /* Hide desktop sidebar, show mobile sidebar */
  .sidebar {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 280px !important;
    max-width: 85vw !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease !important;
    z-index: 1070 !important;
    background: #ffffff !important;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15) !important;
    padding-top: calc(var(--nav-safe-offset) + 16px) !important;
  }

  body.sidebar-open .sidebar {
    transform: translateX(0) !important;
  }

  /* Mobile overlay for sidebar */
  .mobile-overlay {
    display: none;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 1050 !important;
    transition: opacity 0.3s !important;
  }

  .mobile-overlay.show {
    display: block !important;
  }

  /* Content - uses unified --content-top-padding variable */
  .content {
    margin-left: 0 !important;
    margin-top: 0 !important;
    padding: 16px !important;
    padding-top: var(--content-top-padding) !important;
    min-height: calc(100vh - var(--nav-safe-offset)) !important;
    pointer-events: auto !important;
    overflow: visible !important;
    height: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Navigation in standalone - uses unified --nav-safe-offset */
  .app-nav {
    height: var(--nav-safe-offset) !important;
    padding-top: env(safe-area-inset-top, 0) !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1010 !important;
  }

  .navbar.app-nav .container-fluid {
    height: var(--mobile-nav-height) !important;
    padding: 0 12px !important;
  }

  /* Logo sizing in standalone - BIGGER */
  .app-brand img,
  .nav-logo {
    height: 80px !important;
    max-height: 80px !important;
    width: auto !important;
    max-width: 220px !important;
    object-fit: contain !important;
    image-rendering: -webkit-optimize-contrast !important;
  }

  /* Ensure content is scrollable */
  .content,
  main,
  .main-content,
  [role="main"] {
    overflow: visible !important;
    height: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y pan-x !important;
    pointer-events: auto !important;
  }

  /* Cards should not overflow */
  .card {
    overflow: hidden !important;
    word-wrap: break-word !important;
  }

  /* Fix button/link touch targets */
  a, button, .btn, [role="button"] {
    min-height: 44px !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }
}

/* iOS Safari standalone - safe area handled by nav, not body */
@supports (-webkit-touch-callout: none) {
  @media (display-mode: standalone) {
    body {
      /* Bottom safe area only - top is handled by fixed nav */
      padding-bottom: env(safe-area-inset-bottom) !important;
    }
  }
}

/* JS-detected PWA standalone mode (body.pwa-standalone class) */
body.pwa-standalone {
  /* Force mobile layout variables */
  --side-w: 0px !important;
}

body.pwa-standalone .mobile-hamburger,
body.pwa-standalone #mobile-menu-toggle {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

body.pwa-standalone .sidebar {
  position: fixed !important;
  transform: translateX(-100%) !important;
  width: 280px !important;
  max-width: 85vw !important;
  z-index: 1070 !important;
}

body.pwa-standalone.sidebar-open .sidebar {
  transform: translateX(0) !important;
}

body.pwa-standalone .content {
  margin-left: 0 !important;
}

/* ================================================
   TOUCH TARGET ACCESSIBILITY
   ================================================ */
@media (max-width: 992px) {
  /* Ensure all interactive elements meet 44px minimum */
  a,
  button,
  .btn,
  [role="button"],
  input[type="submit"],
  input[type="button"] {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  /* Form controls */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  input[type="search"],
  textarea,
  select,
  .form-control,
  .form-select {
    min-height: 48px !important;
  }

  /* Links in navigation */
  .sidebar a,
  .nav-link {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }
}

/* ================================================
   ALERTS & NOTIFICATIONS - Mobile Friendly
   ================================================ */
@media (max-width: 992px) {
  .alert {
    padding: 14px 16px !important;
    border-radius: 12px !important;
    margin-bottom: 16px !important;
    font-size: 14px !important;
  }

  .alert-dismissible {
    padding-right: 48px !important;
  }

  .alert .btn-close {
    width: 44px !important;
    height: 44px !important;
    padding: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: 4px !important;
  }

  .alert h4,
  .alert h5,
  .alert-heading {
    font-size: 15px !important;
    margin-bottom: 6px !important;
  }

  .alert p {
    font-size: 13px !important;
    margin-bottom: 0 !important;
  }

  /* Gradient alert cards */
  .gradient-card.alert {
    padding: 16px !important;
  }

  .gradient-card .row {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .gradient-card [class*="col-"] {
    width: 100% !important;
    text-align: center !important;
  }

  .gradient-card .d-flex.gap-2 {
    flex-direction: column !important;
    width: 100% !important;
  }

  .gradient-card .btn {
    width: 100% !important;
  }
}

/* ================================================
   MODAL ENHANCEMENTS - Production Ready
   ================================================ */
@media (max-width: 992px) {
  /* Modal scrolling fix */
  .modal.show {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Center modal dialog properly */
  .modal-dialog-centered {
    min-height: calc(100% - 32px) !important;
    margin: 16px !important;
  }

  /* Modal header */
  .modal-header {
    padding: 16px !important;
    border-bottom: 1px solid var(--border-light) !important;
  }

  .modal-header .modal-title {
    font-size: 16px !important;
    font-weight: 600 !important;
  }

  /* Modal footer */
  .modal-footer {
    padding: 12px 16px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .modal-footer .btn {
    flex: 1 1 auto !important;
    min-width: 120px !important;
  }

  /* Full screen modal on small screens */
  .modal-fullscreen-sm-down {
    max-width: 100vw !important;
    max-height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  /* Offcanvas (Bootstrap 5 slide panels) */
  .offcanvas {
    max-width: 85vw !important;
  }

  .offcanvas-body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ================================================
   LOADING STATES & SPINNERS
   ================================================ */
@media (max-width: 992px) {
  .spinner-border,
  .spinner-grow {
    width: 2rem !important;
    height: 2rem !important;
  }

  .loading-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(255, 255, 255, 0.9) !important;
    z-index: 1100 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Hide loading when done */
  .loading-overlay.hide,
  .loading-overlay[hidden] {
    display: none !important;
    pointer-events: none !important;
  }
}

/* ================================================
   CREDIT SCORE CARDS - Mobile Optimized - Compact
   ================================================ */
@media (max-width: 992px) {
  /* Score cards grid - tighter spacing */
  #credit-scores-main .row {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }

  #credit-scores-main [class*="col-md"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Individual score card - compact */
  .score-gauge-card {
    border-radius: 12px !important;
    margin-bottom: 0 !important;
  }
  
  .score-gauge-card .card-body {
    padding: 12px 16px !important;
  }

  /* Score gauge wrapper - smaller on mobile */
  .score-gauge-wrapper {
    width: 160px !important;
    height: 110px !important;
    margin: 0 auto 8px !important;
  }
  
  .score-gauge-wrapper svg {
    width: 100% !important;
    height: auto !important;
  }

  /* Score value display - add margin below gauge arc */
  .score-gauge-wrapper div[style*="font-size: 3.2rem"],
  .score-gauge-wrapper .score-value {
    font-size: 2.2rem !important;
    margin-top: 4px !important;
  }
  
  /* "pts" label */
  .score-gauge-wrapper div[style*="font-size: 3.2rem"] + span,
  .score-gauge-wrapper .score-unit {
    font-size: 12px !important;
  }
  
  /* 300 and 850 labels on gauge */
  .score-gauge-wrapper span[style*="font-size: 12px"],
  .score-gauge-wrapper .gauge-label {
    font-size: 10px !important;
  }

  /* Bureau name - compact */
  .score-gauge-card span[style*="font-size: 16px"],
  .bureau-name {
    font-size: 13px !important;
    font-weight: 600 !important;
    margin-bottom: 4px !important;
  }
  
  /* Score change badge */
  .score-gauge-card .badge,
  .score-change-badge {
    font-size: 11px !important;
    padding: 4px 10px !important;
    margin-bottom: 4px !important;
  }
  
  /* Last updated text */
  .score-gauge-card .text-muted.small,
  .last-updated {
    font-size: 10px !important;
    margin-bottom: 0 !important;
  }
}

/* ================================================
   TRADELINE & DISPUTE ITEMS
   ================================================ */
@media (max-width: 992px) {
  .tradeline-item,
  .dispute-item,
  .account-item {
    padding: 14px !important;
    margin-bottom: 12px !important;
    border-radius: 12px !important;
  }

  .tradeline-item .row,
  .dispute-item .row {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .tradeline-item [class*="col-"],
  .dispute-item [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Action buttons in items */
  .tradeline-item .btn-group,
  .dispute-item .btn-group {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .tradeline-item .btn-group .btn,
  .dispute-item .btn-group .btn {
    flex: 1 !important;
    min-width: 80px !important;
  }
}

/* ================================================
   TIMELINE COMPONENTS
   ================================================ */
@media (max-width: 992px) {
  .timeline {
    padding-left: 0 !important;
  }

  .timeline-item {
    padding-left: 40px !important;
    padding-bottom: 16px !important;
    margin-bottom: 16px !important;
  }

  .timeline-marker {
    left: -10px !important;
    width: 22px !important;
    height: 22px !important;
    font-size: 10px !important;
  }

  .timeline-content {
    padding: 12px !important;
    border-radius: 10px !important;
  }
}

/* ================================================
   DROPDOWN MENUS
   ================================================ */
@media (max-width: 992px) {
  /* Dropdown menu - hidden by default, show only when .show class is added */
  .dropdown-menu {
    display: none !important;
    position: fixed !important;
    left: 16px !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: auto !important;
    max-width: calc(100vw - 32px) !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15) !important;
    z-index: 1100 !important;
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
  }

  /* Show dropdown when Bootstrap adds .show class */
  .dropdown-menu.show {
    display: block !important;
  }

  .dropdown-item {
    padding: 12px 16px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    color: #374151 !important;
    text-decoration: none !important;
    border-bottom: 1px solid #f3f4f6 !important;
  }

  .dropdown-item:last-child {
    border-bottom: none !important;
  }

  .dropdown-item:hover,
  .dropdown-item:active,
  .dropdown-item.active {
    background: #f3f4f6 !important;
    color: #5D4CDA !important;
  }

  .dropdown-divider {
    margin: 8px 0 !important;
  }
}

/* ================================================
   TOAST NOTIFICATIONS
   ================================================ */
@media (max-width: 992px) {
  .toast-container {
    position: fixed !important;
    bottom: calc(20px + env(safe-area-inset-bottom, 0)) !important;
    left: 16px !important;
    right: 16px !important;
    z-index: var(--z-toast) !important;
  }

  .toast {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 12px !important;
    font-size: 14px !important;
  }
}

/* ================================================
   STICKY ELEMENTS
   ================================================ */
@media (max-width: 992px) {
  /* Sticky headers - uses unified offset */
  .sticky-top {
    position: sticky !important;
    top: var(--nav-safe-offset, calc(var(--mobile-nav-height) + env(safe-area-inset-top, 0))) !important;
    z-index: 100 !important;
    background: var(--bg-primary) !important;
  }

  /* HIDDEN: Mobile action bar - replaced by hamburger menu */
  .mobile-action-bar {
    display: none !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 12px 16px !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0)) !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-top: 1px solid var(--border-light) !important;
    z-index: var(--z-fab) !important;
    display: flex !important;
    gap: 12px !important;
  }

  .mobile-action-bar .btn {
    flex: 1 !important;
  }
}

/* ================================================
   EMPTY STATES & PLACEHOLDERS
   ================================================ */
@media (max-width: 992px) {
  .empty-state,
  .no-data,
  .placeholder-content {
    padding: 40px 20px !important;
    text-align: center !important;
  }

  .empty-state i,
  .no-data i {
    font-size: 48px !important;
    margin-bottom: 16px !important;
  }

  .empty-state h5,
  .no-data h5 {
    font-size: 18px !important;
    margin-bottom: 8px !important;
  }

  .empty-state p,
  .no-data p {
    font-size: 14px !important;
    color: var(--text-secondary) !important;
  }
}

/* ================================================
   PAGINATION
   ================================================ */
@media (max-width: 992px) {
  .pagination {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 4px !important;
  }

  .page-link {
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ================================================
   FIX: ENSURE FLOW ON ALL PAGES
   ================================================ */
@media (max-width: 992px) {
  /* Ensure all main sections flow properly */
  .content > .container-fluid > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Fix Bootstrap grid on mobile */
  .row > [class*="col-"]:not([class*="col-12"]) {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Ensure proper spacing between sections */
  .content > .container-fluid > *:not(:last-child) {
    margin-bottom: 16px !important;
  }

  /* Fix any hidden overflow that blocks scrolling */
  .content-wrapper,
  .page-wrapper,
  .main-wrapper,
  #app,
  #root {
    overflow: visible !important;
    height: auto !important;
    min-height: auto !important;
  }
}

/* ================================================
   TEXT OVERFLOW & OVERLAPPING FIXES
   ================================================ */
@media (max-width: 992px) {
  /* Prevent text from running into other elements */
  h1, h2, h3, h4, h5, h6,
  .h1, .h2, .h3, .h4, .h5, .h6 {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    max-width: 100% !important;
  }

  /* Dashboard titles */
  .dashboard-hero h1,
  .dashboard-hero-gradient h1,
  .hero-title {
    font-size: 1.35rem !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
    max-width: 100% !important;
  }

  .dashboard-hero h2,
  .dashboard-hero-gradient h2 {
    font-size: 1.2rem !important;
    line-height: 1.3 !important;
  }

  /* Prevent long names/emails from overflowing */
  .user-name,
  .client-name,
  [class*="name"],
  [class*="email"] {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Card headers - prevent overlap */
  .card-header {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 14px !important;
  }

  .card-header h5,
  .card-header h6,
  .card-header .card-title {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 !important;
  }

  .card-header .badge,
  .card-header .btn {
    flex-shrink: 0 !important;
  }

  /* Sidebar text overflow */
  .sidebar a {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .sidebar a span[style*="margin-left"] {
    flex-shrink: 0 !important;
    margin-left: 4px !important;
    font-size: 9px !important;
    padding: 2px 6px !important;
  }

  /* Table cells - prevent overflow */
  .table td,
  .table th {
    max-width: 150px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Stats and KPI values - prevent overlap */
  .stat-number,
  .kpi-value,
  .score-value,
  [class*="stat-value"] {
    font-size: 1.5rem !important;
    line-height: 1.2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .stat-label,
  .kpi-label,
  [class*="stat-label"] {
    font-size: 0.75rem !important;
    line-height: 1.3 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Progress tracker text */
  .progress-step span,
  .progress-step p {
    font-size: 0.85rem !important;
    line-height: 1.3 !important;
    max-width: 100% !important;
    word-break: break-word !important;
  }

  /* Bureau cards - prevent score overlap */
  .bureau-card {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .bureau-card .score,
  .bureau-card .bureau-score {
    font-size: 1.2rem !important;
  }

  .bureau-card strong,
  .bureau-card .bureau-name {
    font-size: 0.7rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
  }

  /* Fix flex containers causing overlap */
  .d-flex {
    flex-wrap: wrap !important;
  }

  .d-flex.flex-nowrap {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Alert text */
  .alert {
    word-break: break-word !important;
  }

  .alert h4,
  .alert h5,
  .alert-heading {
    font-size: 14px !important;
    line-height: 1.3 !important;
    margin-bottom: 4px !important;
  }

  .alert p,
  .alert small {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  /* Timeline text */
  .timeline-content h6,
  .timeline-content .title {
    font-size: 13px !important;
    word-break: break-word !important;
  }

  .timeline-content p,
  .timeline-content small {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  /* Button text - prevent overflow */
  .btn {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  /* Full-width buttons can wrap */
  .btn.w-100,
  .btn[style*="width: 100%"] {
    white-space: normal !important;
    word-break: break-word !important;
  }

  /* Action button groups */
  .btn-group {
    flex-wrap: wrap !important;
  }

  .btn-group .btn {
    flex: 1 1 auto !important;
    min-width: 80px !important;
  }

  /* Creditor/account names */
  .creditor-name,
  .account-name,
  td:first-child {
    max-width: 120px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Badge overflow */
  .badge {
    max-width: 100px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* List items */
  .list-group-item {
    word-break: break-word !important;
  }

  .list-group-item .d-flex {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* Input labels */
  label {
    word-break: break-word !important;
    max-width: 100% !important;
  }
}

/* ================================================
   NAV BAR SPACING - PREVENT LOGO/TEXT OVERLAP
   ================================================ */
@media (max-width: 992px) {
  .navbar.app-nav .container-fluid {
    padding: 0 12px !important;
    gap: 8px !important;
  }

  .navbar .d-flex.align-items-center:first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    gap: 6px !important;
  }

  /* Notification bell - compact */
  .nav-bell,
  #notificationBell {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 6px !important;
    flex-shrink: 0 !important;
  }

  .nav-bell i,
  #notificationBell i {
    font-size: 16px !important;
  }

  /* Nav action buttons - icon only */
  .nav-actions-container .btn:not(.btn-primary):not(.btn-success) {
    padding: 6px 8px !important;
    min-width: 36px !important;
    width: 36px !important;
  }

  .nav-actions-container .btn i {
    margin: 0 !important;
  }

  .nav-actions-container .btn span,
  .nav-actions-container .btn .d-none {
    display: none !important;
  }
}

/* ================================================
   PAGE HEADERS - MOBILE STACKING
   ================================================ */
@media (max-width: 992px) {
  /* Page headers with title + action buttons */
  .d-flex.justify-content-between.align-items-center {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  /* Keep title/subtitle left-aligned */
  .d-flex.justify-content-between.align-items-center > div:first-child {
    width: 100% !important;
    text-align: left !important;
  }

  /* Stack action buttons */
  .d-flex.justify-content-between.align-items-center > div:last-child,
  .d-flex.justify-content-between.align-items-center > .d-flex:last-child {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .d-flex.justify-content-between.align-items-center > div:last-child .btn,
  .d-flex.justify-content-between.align-items-center > .d-flex:last-child .btn {
    flex: 1 1 auto !important;
    min-width: 120px !important;
    text-align: center !important;
  }

  /* Exception: Keep inline for small items like badges */
  .card-header.d-flex.justify-content-between {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
  }
}

/* ================================================
   CLIENT LIST TABLE - MOBILE FRIENDLY
   ================================================ */
@media (max-width: 992px) {
  /* Hide less important columns on mobile */
  .table th:nth-child(3),
  .table td:nth-child(3),
  .table th:nth-child(5),
  .table td:nth-child(5),
  .table th:nth-child(6),
  .table td:nth-child(6) {
    display: none !important;
  }

  /* Compact action buttons */
  .table .btn-group,
  .table td .d-flex.gap-2 {
    flex-wrap: nowrap !important;
    gap: 4px !important;
  }

  .table .btn-sm {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }

  /* Compact client info column */
  .table td .d-flex.align-items-center {
    flex-wrap: nowrap !important;
  }

  .table td .d-flex.align-items-center > div:last-child {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .table td .d-flex.align-items-center strong,
  .table td .d-flex.align-items-center small {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 120px !important;
  }
}

/* ================================================
   CLIENT DETAIL PAGE - MOBILE LAYOUT
   ================================================ */
@media (max-width: 992px) {
  /* Header with back button and actions */
  .container > .d-flex.align-items-center.mb-4 {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  .container > .d-flex.align-items-center.mb-4 > .flex-grow-1 {
    width: 100% !important;
    order: 2 !important;
  }

  .container > .d-flex.align-items-center.mb-4 > a.btn {
    order: 1 !important;
  }

  .container > .d-flex.align-items-center.mb-4 > .d-flex.gap-2 {
    order: 3 !important;
    width: 100% !important;
    flex-wrap: wrap !important;
  }

  .container > .d-flex.align-items-center.mb-4 > .d-flex.gap-2 .btn {
    flex: 1 1 auto !important;
    min-width: 45% !important;
  }

  /* Client info column on detail page */
  .col-md-4.mb-4 {
    margin-bottom: 16px !important;
  }
}

/* ================================================
   MOBILE DASHBOARD OVERHAUL - COMPLETE FIX
   Fixes: hero section, step icons, fonts, colors,
   overlapping text, and consistency across devices
   ================================================ */

/* ------------------------------------------------
   1. GLOBAL MOBILE FONT CONSISTENCY
   ------------------------------------------------ */
@media (max-width: 992px) {
  /* Force consistent font family across all elements */
  body,
  .dashboard-container,
  .card,
  .btn,
  h1, h2, h3, h4, h5, h6,
  p, span, div, a, label {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
  }

  /* Base font size for mobile readability */
  body {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }
}

/* ------------------------------------------------
   2. HERO/WELCOME SECTION - FIX EMPTY BOX & LAYOUT
   ------------------------------------------------ */
@media (max-width: 992px) {
  /* Main welcome banner - full mobile optimization */
  .dashboard-hero,
  .dashboard-hero-gradient,
  [style*="linear-gradient"][style*="#5D4CDA"],
  .mb-4[style*="linear-gradient"] {
    padding: 20px 16px !important;
    border-radius: 16px !important;
    margin: 0 0 16px 0 !important;
  }

  /* Hero row layout - stack on mobile */
  .dashboard-hero .row,
  .dashboard-hero-gradient .row,
  [style*="linear-gradient"] .row.align-items-center {
    flex-direction: column !important;
    gap: 16px !important;
  }

  /* Hero columns - full width on mobile */
  .dashboard-hero .col-lg-8,
  .dashboard-hero .col-lg-4,
  .dashboard-hero-gradient .col-lg-8,
  .dashboard-hero-gradient .col-lg-4,
  [style*="linear-gradient"] [class*="col-lg-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
  }

  /* Hero text - ensure white and readable */
  .dashboard-hero h1,
  .dashboard-hero h2,
  .dashboard-hero h3,
  .dashboard-hero p,
  .dashboard-hero span,
  .hero-title,
  .hero-subtitle,
  [style*="linear-gradient"][style*="#5D4CDA"] h3,
  [style*="linear-gradient"][style*="#5D4CDA"] p {
    color: #ffffff !important;
    text-shadow: none !important;
  }

  /* Hero title sizing */
  .dashboard-hero h1,
  .dashboard-hero h3,
  .hero-title,
  [style*="linear-gradient"] h3.fw-bold {
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin-bottom: 8px !important;
  }

  /* Hero subtitle */
  .dashboard-hero p,
  .hero-subtitle,
  [style*="linear-gradient"] p[style*="opacity"] {
    font-size: 14px !important;
    opacity: 0.95 !important;
    margin-bottom: 12px !important;
  }

  /* Feature checkmarks in hero */
  .dashboard-hero .d-flex.align-items-center.mb-2,
  [style*="linear-gradient"] .d-flex.align-items-center.mb-2 {
    font-size: 13px !important;
    margin-bottom: 6px !important;
  }

  /* Hero buttons container - stack properly */
  .dashboard-hero .col-lg-4 .d-grid,
  .dashboard-hero .col-lg-4 .d-flex,
  [style*="linear-gradient"] .col-lg-4 .d-grid {
    width: 100% !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  /* Hero buttons - full width and tappable */
  .dashboard-hero .btn,
  .dashboard-hero-gradient .btn,
  [style*="linear-gradient"] .d-grid .btn,
  [style*="linear-gradient"] .d-flex .btn {
    width: 100% !important;
    padding: 14px 20px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* Hero price/subtitle text */
  .dashboard-hero .small,
  [style*="linear-gradient"] .small.mt-2 {
    font-size: 12px !important;
    text-align: center !important;
    margin-top: 8px !important;
  }

  /* Remove empty box issue - hide unnecessary empty elements */
  .dashboard-hero input:not([value]),
  .dashboard-hero input[value=""],
  .dashboard-hero .input-group:empty,
  [style*="linear-gradient"] input:empty {
    display: none !important;
  }
}

/* ------------------------------------------------
   3. ONBOARDING CHECKLIST STEP ICONS - FULL FIX
   ------------------------------------------------ */
@media (max-width: 992px) {
  /* Checklist positioning - above mobile nav */
  .onboarding-checklist {
    bottom: 80px !important;
    right: 12px !important;
    left: 12px !important;
    width: auto !important;
    max-width: none !important;
    max-height: 60vh !important;
    z-index: 1080 !important;
  }

  /* Step items - proper padding and visibility */
  .checklist-step {
    padding: 14px 16px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    position: relative !important;
    overflow: visible !important;
  }

  /* Step checkbox/number container - MAKE VISIBLE */
  .step-checkbox {
    flex-shrink: 0 !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Empty checkbox (number display) - STRONGER STYLING */
  .checkbox-empty {
    width: 32px !important;
    height: 32px !important;
    border: 2px solid #5D4CDA !important;
    border-radius: 50% !important;
    background: rgba(93, 76, 218, 0.1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
  }

  /* Step number inside checkbox - VISIBLE */
  .step-number {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #5D4CDA !important;
    line-height: 1 !important;
  }

  /* Completed checkbox - green check */
  .checkbox-complete {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .checkbox-complete i {
    color: white !important;
    font-size: 14px !important;
  }

  /* Current step - highlighted border */
  .checklist-step.current .checkbox-empty {
    border-color: #5D4CDA !important;
    background: rgba(93, 76, 218, 0.15) !important;
    box-shadow: 0 0 0 4px rgba(93, 76, 218, 0.15) !important;
  }

  /* Step content - full width */
  .step-content {
    flex: 1 !important;
    min-width: 0 !important;
  }

  .step-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    margin-bottom: 4px !important;
  }

  .step-description {
    font-size: 13px !important;
    color: #64748b !important;
    line-height: 1.4 !important;
  }

  /* Step CTA buttons */
  .step-cta,
  .checklist-step .btn-primary {
    width: 100% !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    margin-top: 10px !important;
  }
}

/* ------------------------------------------------
   4. PROGRESS TRACKER STEPS (Dashboard Progress)
   ------------------------------------------------ */
@media (max-width: 992px) {
  /* Progress stepper container */
  .progress-stepper,
  .progress-tracker .row {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* Individual progress steps */
  .progress-step {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    border-radius: 12px !important;
    background: white !important;
    border: 1px solid #e2e8f0 !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Step icon in progress tracker */
  .progress-step .step-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
  }

  /* Progress step text */
  .progress-step .step-title,
  .progress-step .step-sequence {
    font-size: 14px !important;
    font-weight: 600 !important;
  }

  .progress-step .step-meta {
    font-size: 12px !important;
    color: #64748b !important;
  }

  /* Status pills */
  .step-status-pill {
    font-size: 11px !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
  }
}

/* ------------------------------------------------
   5. GETTING STARTED WIDGET (Floating Card)
   ------------------------------------------------ */
@media (max-width: 992px) {
  /* Main getting started header */
  .checklist-header {
    padding: 16px !important;
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%) !important;
  }

  .checklist-header h6 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
  }

  .checklist-header small {
    font-size: 12px !important;
    color: #64748b !important;
  }

  /* Checklist icon */
  .checklist-icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 10px !important;
    font-size: 16px !important;
  }

  /* Progress bar */
  .checklist-progress-bar .progress {
    height: 6px !important;
    border-radius: 3px !important;
  }

  /* Account manager section */
  .account-manager-section {
    padding: 12px 16px !important;
    gap: 10px !important;
  }

  .manager-avatar img,
  .avatar-placeholder {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
  }

  .manager-name {
    font-size: 14px !important;
  }

  .manager-title {
    font-size: 10px !important;
  }

  /* Manager action buttons */
  .manager-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
  }
}

/* ------------------------------------------------
   6. $12/ROUND PRICING BANNER - MOBILE FIX
   ------------------------------------------------ */
@media (max-width: 992px) {
  /* Self-repair pricing banner */
  [class*="gradient-card"][style*="#5D4CDA"],
  .mb-4[style*="linear-gradient"][style*="#5D4CDA"] {
    padding: 0 !important;
    overflow: hidden !important;
  }

  [class*="gradient-card"] .p-4,
  .mb-4[style*="linear-gradient"] .p-4 {
    padding: 16px !important;
  }

  /* Feature list in pricing banner */
  .col-md-6 .d-flex.align-items-center.mb-2 {
    font-size: 13px !important;
    margin-bottom: 6px !important;
  }

  /* Price display */
  .display-4,
  [style*="font-size: 48px"],
  h2[style*="font-weight: 700"] {
    font-size: 2.5rem !important;
    font-weight: 800 !important;
    color: white !important;
  }
}

/* ------------------------------------------------
   7. DOCUMENT UPLOAD PAGE - MOBILE FIX
   ------------------------------------------------ */
@media (max-width: 992px) {
  /* Upload section header */
  .documents-header,
  h2:contains("Upload"),
  [class*="upload"] h2 {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    margin-bottom: 12px !important;
  }

  /* Upload area/dropzone */
  .upload-dropzone,
  .drop-area,
  [class*="dropzone"],
  [class*="drop-area"],
  [ondrop],
  .dashed-border {
    padding: 24px 16px !important;
    border-radius: 12px !important;
    border: 2px dashed #cbd5e1 !important;
    background: #f8fafc !important;
    min-height: 120px !important;
  }

  /* Upload button in dropzone */
  .upload-dropzone .btn,
  .drop-area .btn,
  [class*="dropzone"] .btn {
    padding: 12px 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
  }

  /* Document step cards */
  .document-step,
  .step-card,
  [class*="step"][class*="card"] {
    padding: 16px !important;
    border-radius: 14px !important;
    background: white !important;
    border: 1px solid #e2e8f0 !important;
    margin-bottom: 12px !important;
  }

  /* Document type icon */
  .document-step .icon,
  .step-icon-box,
  [class*="step"] [class*="icon"] {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 12px !important;
    font-size: 20px !important;
  }

  /* Step badge (STEP 1, STEP 2, etc.) */
  .step-badge,
  [class*="badge"][class*="step"],
  .badge.bg-primary {
    font-size: 10px !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
  }
}

/* ------------------------------------------------
   8. CARD & PANEL CONSISTENCY
   ------------------------------------------------ */
@media (max-width: 992px) {
  /* All cards */
  .card {
    border-radius: 14px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    margin-bottom: 16px !important;
    overflow: hidden !important;
  }

  .card-body {
    padding: 16px !important;
  }

  .card-header {
    padding: 14px 16px !important;
    border-bottom: 1px solid #e2e8f0 !important;
  }

  /* Default light header - only apply when NOT colored */
  .card-header:not([class*="bg-"]):not([style*="background"]) {
    background: #fafbfc !important;
  }

  /* ✅ PRESERVE colored card headers - keep original background and text colors */
  .card-header.bg-primary,
  .card-header.bg-success,
  .card-header.bg-danger,
  .card-header.bg-warning,
  .card-header.bg-info,
  .card-header.bg-indigo,
  .card-header[class*="bg-"] {
    border-bottom: none !important;
  }

  /* ✅ Ensure text stays white on colored headers */
  .card-header.text-white,
  .card-header.bg-primary h5,
  .card-header.bg-success h5,
  .card-header.bg-danger h5,
  .card-header.bg-info h5,
  .card-header.bg-indigo h5,
  .card-header[class*="bg-"] h5,
  .card-header[class*="bg-"] h6,
  .card-header[class*="bg-"] p,
  .card-header[class*="bg-"] span,
  .card-header[class*="bg-"] .small {
    color: white !important;
  }

  .card-header h5,
  .card-header h6 {
    font-size: 15px !important;
    font-weight: 600 !important;
    margin: 0 !important;
  }

  /* Glass panels */
  .glass-panel {
    border-radius: 16px !important;
    padding: 16px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important;
  }
}

/* ------------------------------------------------
   9. BUTTON STYLING CONSISTENCY
   ------------------------------------------------ */
@media (max-width: 992px) {
  /* Primary buttons */
  .btn-primary {
    background: linear-gradient(135deg, #5D4CDA 0%, #7867E8 100%) !important;
    border: none !important;
    color: white !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
  }

  /* Outline buttons */
  .btn-outline-primary {
    border: 2px solid #5D4CDA !important;
    color: #5D4CDA !important;
    background: transparent !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
  }

  /* Light/white buttons */
  .btn-light,
  .btn[style*="background: white"],
  .btn[style*="background:white"] {
    background: white !important;
    color: #5D4CDA !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  }

  /* Button icon spacing */
  .btn i,
  .btn svg {
    margin-right: 6px !important;
  }

  .btn i:last-child,
  .btn svg:last-child {
    margin-right: 0 !important;
    margin-left: 6px !important;
  }
}

/* ------------------------------------------------
   10. PWA INSTALL BANNER - MATCH ANDROID STYLE
   ------------------------------------------------ */
@media (max-width: 992px) {
  /* PWA install prompt */
  .pwa-install-banner,
  .install-prompt,
  [class*="install"][class*="banner"],
  #pwa-install-prompt {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%) !important;
    padding: 16px !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2) !important;
    border-radius: 20px 20px 0 0 !important;
  }

  .pwa-install-banner .app-icon,
  .install-prompt img,
  [class*="install"] img {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
  }

  .pwa-install-banner .install-text,
  .install-prompt .text {
    flex: 1 !important;
    color: white !important;
  }

  .pwa-install-banner .install-text h6,
  .install-prompt h6 {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: white !important;
    margin: 0 0 2px 0 !important;
  }

  .pwa-install-banner .install-text p,
  .install-prompt p {
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    margin: 0 !important;
  }

  /* Install button */
  .pwa-install-banner .btn-install,
  .install-prompt .btn,
  [class*="install"] .btn-primary {
    background: #5D4CDA !important;
    color: white !important;
    padding: 10px 20px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    white-space: nowrap !important;
  }

  /* Not now button */
  .pwa-install-banner .btn-dismiss,
  .install-prompt .btn-link,
  [class*="install"] .btn-link {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 14px !important;
    background: none !important;
    border: none !important;
    padding: 10px !important;
  }
}

/* ------------------------------------------------
   11. FIX TEXT CUTOFF AT TOP OF CARDS
   ------------------------------------------------ */
@media (max-width: 992px) {
  /* Prevent text cutoff at top */
  .card-body > *:first-child,
  .card > *:first-child,
  [class*="panel"] > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Fix overlapping in gradient cards */
  [style*="linear-gradient"] > .p-4 > .row:first-child {
    margin-top: 0 !important;
  }

  /* Fix text running off edges */
  h1, h2, h3, h4, h5, h6, p, span, div {
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    hyphens: auto !important;
  }

  /* Ensure proper padding in containers */
  .container,
  .container-fluid {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ------------------------------------------------
   12. UNLOCK PRO FEATURES CARD
   ------------------------------------------------ */
@media (max-width: 992px) {
  /* PRO features card */
  .unlock-pro-card,
  .card:has(h5:contains("PRO")),
  [class*="pro-features"],
  .card[style*="linear-gradient"]:has(span:contains("PRO")) {
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  /* PRO card content */
  .unlock-pro-card .card-body,
  [class*="pro-features"] .card-body {
    padding: 20px 16px !important;
  }

  /* PRO card title */
  .unlock-pro-card h5,
  [class*="pro-features"] h5 {
    font-size: 18px !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
  }

  /* PRO feature items */
  .unlock-pro-card .feature-item,
  [class*="pro-features"] .d-flex {
    padding: 12px !important;
    margin-bottom: 8px !important;
    border-radius: 10px !important;
  }
}

/* ------------------------------------------------
   13. iOS SAFARI SPECIFIC FIXES
   ------------------------------------------------ */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 992px) {
    /* Fix iOS momentum scrolling */
    body,
    .content,
    .dashboard-container {
      -webkit-overflow-scrolling: touch !important;
    }

    /* Fix iOS button styling */
    .btn {
      -webkit-appearance: none !important;
      appearance: none !important;
    }

    /* Fix iOS input styling */
    input, select, textarea {
      -webkit-appearance: none !important;
      border-radius: 10px !important;
      font-size: 16px !important; /* Prevents zoom on focus */
    }

    /* Fix iOS fixed positioning */
    .onboarding-checklist {
      position: fixed !important;
      -webkit-transform: translateZ(0) !important;
      transform: translateZ(0) !important;
    }

    /* Safe area padding for notched iPhones */
    .pwa-install-banner,
    .mobile-nav,
    .bottom-nav {
      padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
    }
  }
}

/* ------------------------------------------------
   14. ANDROID SPECIFIC OPTIMIZATIONS
   ------------------------------------------------ */
@media (max-width: 992px) {
  /* Better touch targets for Android */
  .btn,
  a,
  button,
  [onclick] {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  /* Checkboxes and radios have their own styling */
  input[type="checkbox"]:not(.form-check-input),
  input[type="radio"]:not(.form-check-input) {
    min-height: 22px !important;
    min-width: 22px !important;
  }

  /* Small buttons exception */
  .btn-sm {
    min-height: 36px !important;
    min-width: auto !important;
    padding: 8px 14px !important;
  }

  /* Fix ripple effect area */
  .btn,
  a.btn {
    position: relative !important;
    overflow: hidden !important;
  }
}

/* ------------------------------------------------
   15. BUREAU CARDS/SCORES - CONSISTENT STYLING
   ------------------------------------------------ */
@media (max-width: 992px) {
  /* Bureau grid - 3 columns on mobile */
  .bureau-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }

  /* Individual bureau card */
  .bureau-card {
    padding: 12px 8px !important;
    border-radius: 12px !important;
    background: rgba(93, 76, 218, 0.08) !important;
    border: 1px solid rgba(93, 76, 218, 0.15) !important;
    text-align: center !important;
  }

  /* Bureau name */
  .bureau-card strong,
  .bureau-name {
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #5D4CDA !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: block !important;
    margin-bottom: 4px !important;
  }

  /* Bureau score */
  .bureau-card .score,
  .bureau-score {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    line-height: 1.2 !important;
  }

  /* Score delta/change */
  .bureau-card .delta {
    font-size: 11px !important;
    font-weight: 600 !important;
    margin-top: 2px !important;
  }

  .bureau-card .delta.positive {
    color: #22c55e !important;
  }

  .bureau-card .delta.negative {
    color: #ef4444 !important;
  }
}

/* ================================================
   DASHBOARD BOXES & ALIGNMENT FIXES
   Specific fixes for issues shown in screenshots
   ================================================ */

/* ------------------------------------------------
   1. HIDE EMPTY INPUT BOXES IN HERO
   ------------------------------------------------ */
@media (max-width: 992px) {
  /* Hide search/input boxes that appear empty */
  .dashboard-hero input,
  .dashboard-hero .input-group,
  .dashboard-hero .search-box,
  [style*="linear-gradient"] input[type="text"],
  [style*="linear-gradient"] .form-control {
    display: none !important;
  }

  /* Exception: Show if explicitly marked to show */
  .dashboard-hero input.show-mobile,
  .dashboard-hero .input-group.show-mobile {
    display: block !important;
  }
}

/* ------------------------------------------------
   2. PRO DASHBOARD GETTING STARTED - FIX STEPS
   ------------------------------------------------ */
@media (max-width: 992px) {
  /* Getting started steps container */
  .getting-started-steps,
  .onboarding-steps {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  /* Individual step card */
  .getting-started-step,
  .step-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    padding: 16px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    background: white !important;
    gap: 14px !important;
  }

  .getting-started-step:last-child,
  .step-card:last-child {
    border-bottom: none !important;
  }

  /* Step number circle - MAKE VISIBLE */
  .step-number-circle,
  .step-circle,
  .step-indicator {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #5D4CDA 0%, #7867E8 100%) !important;
    color: white !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
  }

  /* Completed step circle */
  .step-number-circle.completed,
  .step-circle.completed {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
  }

  .step-number-circle.completed::before,
  .step-circle.completed::before {
    content: '\f00c' !important;
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900 !important;
  }

  /* Step content */
  .step-card-content,
  .step-info {
    flex: 1 !important;
    min-width: 0 !important;
  }

  /* Step title */
  .step-card-title,
  .step-title-text {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    margin-bottom: 4px !important;
    line-height: 1.3 !important;
  }

  /* Step description */
  .step-card-description,
  .step-description-text {
    font-size: 13px !important;
    color: #64748b !important;
    line-height: 1.4 !important;
  }

  /* Step action button */
  .step-action-btn {
    width: 100% !important;
    margin-top: 12px !important;
    padding: 12px 16px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
  }
}

/* ------------------------------------------------
   3. $12/ROUND PRICING - CLEAN LAYOUT
   ------------------------------------------------ */
@media (max-width: 992px) {
  /* Price display */
  .pricing-display,
  .price-big {
    font-size: 2.25rem !important;
    font-weight: 800 !important;
    color: white !important;
    line-height: 1 !important;
    margin-bottom: 4px !important;
  }

  /* Price suffix (/round) */
  .pricing-suffix,
  .price-suffix {
    font-size: 14px !important;
    opacity: 0.8 !important;
  }

  /* Features checkmarks - single column on mobile */
  .features-checklist,
  .feature-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin: 16px 0 !important;
  }

  .features-checklist .feature-item,
  .feature-list li,
  .feature-list .d-flex {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 13px !important;
    color: white !important;
    opacity: 0.95 !important;
  }

  .features-checklist .feature-item i,
  .feature-list i {
    color: #a5f3fc !important;
    font-size: 14px !important;
  }
}

/* ------------------------------------------------
   4. ACCOUNT SUCCESS TEAM WIDGET
   ------------------------------------------------ */
@media (max-width: 992px) {
  /* Success team card */
  .success-team-card,
  .account-manager-widget {
    padding: 14px 16px !important;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
  }

  .success-team-content {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }

  /* Team avatar */
  .success-team-avatar,
  .team-avatar {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 12px !important;
    object-fit: cover !important;
  }

  /* Team info */
  .success-team-info {
    flex: 1 !important;
    min-width: 0 !important;
  }

  .success-team-label {
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #5D4CDA !important;
    font-weight: 600 !important;
    margin-bottom: 2px !important;
  }

  .success-team-name {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
  }

  .success-team-status {
    font-size: 12px !important;
    color: #22c55e !important;
  }

  /* Team action buttons */
  .success-team-actions {
    display: flex !important;
    gap: 8px !important;
  }

  .success-team-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
  }
}

/* ------------------------------------------------
   5. SCROLLING FIX - NUCLEAR CSS RULES
   ------------------------------------------------ */
@media (max-width: 992px) {
  /* Ensure body is always scrollable unless modal/sidebar open */
  html:not(.modal-open) {
    overflow: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    position: static !important;
    height: auto !important;
    min-height: 100% !important;
  }

  body:not(.modal-open):not(.sidebar-open) {
    overflow: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    position: static !important;
    height: auto !important;
    min-height: 100% !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y pan-x !important;
  }

  /* Main content area */
  .content {
    overflow: visible !important;
    min-height: auto !important;
    pointer-events: auto !important;
  }

  /* Dashboard container */
  .dashboard-container,
  .main-content,
  main.content {
    overflow: visible !important;
    height: auto !important;
  }
}

/* ------------------------------------------------
   6. VISUAL FLOW IMPROVEMENTS
   ------------------------------------------------ */
@media (max-width: 992px) {
  /* Consistent card spacing */
  .card,
  .glass-card,
  .panel {
    margin-bottom: 16px !important;
  }

  /* Remove double borders/margins */
  .card + .card,
  .glass-card + .glass-card {
    margin-top: 0 !important;
  }

  /* Row gutters on mobile */
  .row {
    --bs-gutter-x: 16px !important;
    --bs-gutter-y: 16px !important;
  }

  .row > * {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Consistent section spacing */
  section,
  .section,
  .dashboard-section {
    margin-bottom: 20px !important;
  }

  /* Text hierarchy */
  .section-title,
  .dashboard-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    margin-bottom: 12px !important;
    color: #1e293b !important;
  }

  .section-subtitle {
    font-size: 13px !important;
    color: #64748b !important;
    margin-bottom: 16px !important;
  }
}

/* ------------------------------------------------
   7. ACTION BUTTONS ROW - MOBILE STACK
   ------------------------------------------------ */
@media (max-width: 992px) {
  /* Hero action buttons */
  .hero-actions,
  .dashboard-hero-actions,
  .cta-buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 16px !important;
  }

  .hero-actions .btn,
  .dashboard-hero-actions .btn,
  .cta-buttons .btn {
    width: 100% !important;
    padding: 14px 20px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  /* Primary button - white on purple */
  .hero-actions .btn-primary,
  .hero-actions .btn-light,
  .dashboard-hero-actions .btn:first-child {
    background: white !important;
    color: #5D4CDA !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  }

  /* Secondary button - outline on purple */
  .hero-actions .btn-outline,
  .hero-actions .btn-secondary,
  .dashboard-hero-actions .btn:not(:first-child) {
    background: rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
  }

  /* Address button styling */
  .btn-set-address,
  [onclick*="address"] {
    background: rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
  }
}

/* ------------------------------------------------
   8. UNLOCK PRO FEATURES - MOBILE GRID
   ------------------------------------------------ */
@media (max-width: 992px) {
  /* PRO features grid */
  .pro-features-grid,
  .unlock-pro-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* PRO feature item */
  .pro-feature-item,
  .unlock-pro-feature {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px !important;
    background: white !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  }

  /* Feature icon */
  .pro-feature-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
  }

  /* Feature text */
  .pro-feature-text h6 {
    font-size: 14px !important;
    font-weight: 600 !important;
    margin: 0 0 2px !important;
  }

  .pro-feature-text p {
    font-size: 12px !important;
    color: #64748b !important;
    margin: 0 !important;
  }
}

/* ================================================
   CREDITOR MATRIX TABLE - MOBILE ALIGNMENT FIX
   ================================================ */
@media (max-width: 992px) {
  /* Creditor matrix card */
  .creditor-matrix-card {
    border-radius: 16px !important;
    margin: 0 -8px 16px -8px !important;
  }

  /* Header */
  .creditor-matrix-header {
    padding: 16px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  .creditor-matrix-header h5 {
    font-size: 16px !important;
  }

  .creditor-matrix-header .btn-dispute-flow {
    width: 100% !important;
    justify-content: center !important;
    padding: 14px 20px !important;
  }

  /* Table wrapper with horizontal scroll */
  .creditor-matrix-card .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Table itself */
  .creditor-table {
    min-width: 600px !important;
    font-size: 13px !important;
  }

  .creditor-table thead th {
    padding: 12px 10px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    background: #f8fafc !important;
  }

  .creditor-table tbody td {
    padding: 12px 10px !important;
    font-size: 13px !important;
    vertical-align: middle !important;
  }

  /* Fixed column widths for alignment */
  .creditor-table th:nth-child(1),
  .creditor-table td:nth-child(1) {
    min-width: 120px !important;
    max-width: 140px !important;
  }

  .creditor-table th:nth-child(2),
  .creditor-table td:nth-child(2) {
    min-width: 90px !important;
    width: 90px !important;
  }

  .creditor-table th:nth-child(3),
  .creditor-table td:nth-child(3) {
    min-width: 80px !important;
    width: 80px !important;
  }

  .creditor-table th:nth-child(4),
  .creditor-table td:nth-child(4) {
    min-width: 100px !important;
    width: 100px !important;
  }

  .creditor-table th:nth-child(5),
  .creditor-table td:nth-child(5) {
    min-width: 60px !important;
    width: 60px !important;
  }

  .creditor-table th:nth-child(6),
  .creditor-table td:nth-child(6) {
    min-width: 80px !important;
    width: 80px !important;
  }

  /* Creditor name - truncate if too long */
  .creditor-table .creditor-name {
    display: block !important;
    max-width: 120px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 13px !important;
    font-weight: 600 !important;
  }

  /* Account badge - compact */
  .account-badge {
    padding: 4px 8px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
  }

  /* Status badges - compact */
  .status-badge-negative,
  .status-badge-collection,
  .status-badge-bankruptcy,
  .status-badge-late-payment,
  .status-badge-chargeoff,
  .status-badge-derogatory,
  [class*="status-badge-"] {
    padding: 4px 10px !important;
    font-size: 10px !important;
    border-radius: 12px !important;
    white-space: nowrap !important;
    display: inline-block !important;
  }

  /* Bureau tag - compact */
  .bureau-tag {
    padding: 3px 8px !important;
    font-size: 10px !important;
    border-radius: 4px !important;
  }
}

/* Very small screens - card layout instead of table */
@media (max-width: 480px) {
  /* Alternative: Show scroll indicator */
  .creditor-matrix-card .table-responsive::after {
    content: '← Scroll →';
    display: block;
    text-align: center;
    font-size: 11px;
    color: #94a3b8;
    padding: 8px;
    background: linear-gradient(to bottom, transparent, rgba(248, 250, 252, 0.9));
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
  }
}

/* ================================================
   PERFORMANCE OPTIMIZATIONS - FASTER MOBILE
   ================================================ */
@media (max-width: 992px) {
  /* Reduce animation complexity for faster rendering */
  *,
  *::before,
  *::after {
    animation-duration: 0.2s !important;
    transition-duration: 0.15s !important;
  }

  /* Disable expensive animations on low-end devices */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation: none !important;
      transition: none !important;
    }
  }

  /* GPU acceleration for smooth scrolling */
  .content,
  .card,
  .modal,
  .sidebar {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  /* Prevent layout shifts - reserve space for common elements */
  .card {
    contain: layout style;
  }

  img {
    content-visibility: auto;
  }

  /* Faster button interactions */
  .btn {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /* Optimize touch targets */
  a, button, [role="button"], input, select, textarea {
    touch-action: manipulation;
    min-height: 44px;
    min-width: 44px;
  }

  /* Reduce paint on scroll */
  .navbar.app-nav {
    contain: layout style paint;
  }

  /* Faster font rendering */
  body {
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Skeleton loading states - prevent layout shift */
  [data-loading="true"]::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    min-height: 50px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
  }

  @keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }
}

/* ================================================
   FOOTER MOBILE FIX - PROPER SPACING
   ================================================ */
@media (max-width: 992px) {
  footer {
    margin-left: 0 !important;
    padding: 16px 12px !important;
  }

  footer .container {
    padding: 0 !important;
  }

  footer .row {
    flex-direction: column !important;
    gap: 16px !important;
  }

  footer .col-md-6 {
    width: 100% !important;
    text-align: center !important;
  }

  /* Footer links - ensure proper gap */
  footer .d-flex.gap-3,
  footer .d-flex.justify-content-center {
    gap: 16px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  footer a {
    white-space: nowrap !important;
    font-size: 13px !important;
  }

  footer small {
    display: block !important;
    margin-top: 8px !important;
    font-size: 12px !important;
  }
}

/* ================================================
   CARD CORNER FIX - REMOVE DECORATION BUGS
   ================================================ */
@media (max-width: 992px) {
  /* Remove any pseudo-element decorations on cards */
  .card::before,
  .card::after,
  .card-body::before,
  .card-body::after,
  [class*="gradient-card"]::before,
  [class*="gradient-card"]::after,
  .h-100::before,
  .h-100::after {
    display: none !important;
    content: none !important;
  }

  /* Ensure cards have clean borders */
  .card,
  .h-100.text-center,
  [style*="border-radius: 14px"],
  [style*="border-radius:14px"] {
    overflow: hidden !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  }

  /* PRO feature cards - clean layout */
  .gradient-card .h-100.text-center {
    background: rgba(255, 255, 255, 0.95) !important;
    border-radius: 12px !important;
    padding: 16px 12px !important;
    margin-bottom: 12px !important;
  }

  /* Feature card icons */
  .gradient-card .h-100.text-center .mb-2 {
    font-size: 1.5rem !important;
  }

  .gradient-card .h-100.text-center h6 {
    font-size: 13px !important;
    margin-bottom: 4px !important;
  }

  .gradient-card .h-100.text-center p {
    font-size: 11px !important;
  }

  /* Fix feature card grid */
  .gradient-card .row.g-3 {
    margin: 0 -6px !important;
  }

  .gradient-card .row.g-3 > [class*="col-"] {
    padding: 6px !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}

/* ================================================
   RED/PINK CIRCLE ELEMENTS - HIDE
   ================================================ */
@media (max-width: 992px) {
  /* Hide any decorative circles that might be showing */
  .decorative-circle,
  .bg-circle,
  [class*="circle-decoration"],
  .floating-element,
  [style*="border-radius: 50%"][style*="position: absolute"] {
    display: none !important;
  }

  /* Bureau progress circles - these should show */
  .gauge,
  .progress-ring,
  [class*="progress-circle"],
  .chart-container canvas {
    display: block !important;
  }
}

/* ================================================
   SCROLL FIX - NUCLEAR OPTION FOR ALL DEVICES
   ================================================ */
@media (max-width: 992px) {
  /* Force scrolling to work */
  html {
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    height: auto !important;
    position: static !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
  }

  body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    min-height: 100% !important;
    position: static !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y pan-x !important;
    overscroll-behavior: contain !important;
  }

  /* Scroll lock handled by .scroll-locked class only - no overflow changes here */

  /* Content area must be scrollable */
  .content,
  .main-content,
  main,
  [role="main"] {
    overflow: visible !important;
    height: auto !important;
    min-height: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y pan-x !important;
  }

  /* iOS specific scroll fixes */
  * {
    -webkit-tap-highlight-color: transparent;
  }

  /* Prevent scroll blocking from any element */
  .container,
  .container-fluid,
  .row,
  .card {
    overflow: visible !important;
  }
}

/* ================================================
   CREDITOR TABLE - BETTER MOBILE ALIGNMENT
   ================================================ */
@media (max-width: 992px) {
  /* Table container */
  .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 0 !important;
  }

  /* Table headers - consistent alignment */
  table th {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 10px 8px !important;
    white-space: nowrap !important;
    text-align: left !important;
  }

  /* Table cells - consistent */
  table td {
    font-size: 13px !important;
    padding: 10px 8px !important;
    vertical-align: middle !important;
  }

  /* Creditor name column */
  table td:first-child,
  .creditor-name {
    font-weight: 600 !important;
    max-width: 100px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Account number badge */
  .account-badge,
  [class*="badge"][style*="monospace"] {
    font-size: 11px !important;
    padding: 4px 8px !important;
  }

  /* Status badges */
  [class*="status-badge"],
  .badge {
    font-size: 10px !important;
    padding: 4px 8px !important;
    white-space: nowrap !important;
  }
}

/* ================================================
   COMPREHENSIVE MOBILE REDESIGN
   Matches desktop design system EXACTLY
   Version: 2.0 - Dec 2024
   ================================================ */

/* ================================================
   DESIGN SYSTEM - CSS VARIABLES MATCHING DESKTOP
   ================================================ */
@media (max-width: 992px) {
  :root {
    /* Primary Gradients - EXACT MATCH to desktop */
    --primary-gradient: linear-gradient(135deg, #5D4CDA 0%, #7867E8 100%);
    --primary-gradient-hover: linear-gradient(135deg, #4C3BC9 0%, #6756D7 100%);
    --premium-gradient: linear-gradient(135deg, #5D4CDA 0%, #7867E8 50%, #ec4899 100%);
    
    /* Status Gradients - EXACT MATCH */
    --success-gradient: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    --warning-gradient: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    --danger-gradient: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
    --info-gradient: linear-gradient(135deg, #06b6d4 0%, #22d3ee 100%);
    
    /* Typography Colors - EXACT MATCH */
    --text-primary: #0f172a;
    --text-secondary: #334155;
    /* Darken muted text for real-world mobile readability */
    --text-light: #475569;
    --text-white: #ffffff;
    
    /* Backgrounds - EXACT MATCH */
    --background-primary: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%);
    --surface-light: #ffffff;
    --surface-dark: #f1f5f9;
    --border-light: #e2e8f0;
    
    /* Shadows - EXACT MATCH */
    --shadow-soft: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-large: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-premium: 0 20px 60px rgba(93, 76, 218, 0.2);
    
    /* Glassmorphism */
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(255, 255, 255, 0.3);
    
    /* Animation */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  }
}

/* ================================================
   BASE STYLES - MATCHING DESKTOP
   ================================================ */
@media (max-width: 992px) {
  body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    color: var(--text-primary) !important;
    background: var(--background-primary) !important;
    line-height: 1.6 !important;
    letter-spacing: -0.02em !important;
  }

  /* Content background */
  .content {
    background: var(--background-primary) !important;
  }
}

/* ================================================
   TYPOGRAPHY - MATCHING DESKTOP
   ================================================ */
@media (max-width: 992px) {
  h1, h2, h3, h4, h5, h6,
  .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Outfit', 'Inter', -apple-system, sans-serif !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 0.75rem !important;
  }
  
  h1, .h1 { font-size: 1.75rem !important; font-weight: 700 !important; }
  h2, .h2 { font-size: 1.5rem !important; font-weight: 700 !important; }
  h3, .h3 { font-size: 1.25rem !important; font-weight: 600 !important; }
  h4, .h4 { font-size: 1.1rem !important; font-weight: 600 !important; }
  h5, .h5 { font-size: 1rem !important; font-weight: 600 !important; }
  h6, .h6 { font-size: 0.875rem !important; font-weight: 600 !important; }

  p {
    color: var(--text-secondary) !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
  }

  /* ============================================
     GRADIENT TEXT FIX FOR iOS SAFARI
     On mobile, gradient text can appear transparent/invisible
     Use solid colors instead for readability
     ============================================ */
  .text-gradient,
  .premium-heading,
  .gradient-text,
  [style*="-webkit-text-fill-color: transparent"],
  [style*="webkit-text-fill-color:transparent"] {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #5D4CDA !important;
    background-clip: unset !important;
    color: #5D4CDA !important;
  }
  
  /* Gradient text on dark/purple backgrounds should be white */
  .dashboard-hero .text-gradient,
  .dashboard-hero .premium-heading,
  [class*="hero"] .text-gradient,
  [class*="hero"] .gradient-text,
  .wizard-hero .text-gradient,
  .ai-hero-banner .text-gradient {
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
  }

  /* Text color classes */
  .text-primary { color: var(--text-primary) !important; }
  .text-secondary { color: var(--text-secondary) !important; }
  .text-muted { color: var(--text-light) !important; }
  .text-white { color: var(--text-white) !important; }

  /* Small text */
  small, .small, .text-sm {
    font-size: 0.85rem !important;
    color: var(--text-light) !important;
  }

  /* ✅ CRITICAL: kill low-contrast opacity utility classes on mobile */
  .opacity-25,
  .opacity-50,
  .opacity-75,
  .text-black-50,
  .text-white-50 {
    opacity: 1 !important;
  }

  /* Bottom nav labels/icons must stay high contrast */
  .mobile-bottom-nav .nav-tab,
  .mobile-bottom-nav .nav-tab span,
  .mobile-bottom-nav .nav-tab i {
    opacity: 1 !important;
    color: inherit !important;
  }
}

/* ================================================
   CARDS - MATCHING DESKTOP EXACTLY
   ================================================ */
@media (max-width: 992px) {
  .card {
    background: var(--surface-light) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 12px !important;
    box-shadow: var(--shadow-medium) !important;
    margin-bottom: 1rem !important;
    overflow: hidden !important;
    transition: all var(--transition-base) !important;
  }

  .card:hover {
    box-shadow: var(--shadow-large) !important;
    transform: translateY(-2px) !important;
  }

  .card-header {
    background: var(--surface-dark) !important;
    border-bottom: 1px solid var(--border-light) !important;
    padding: 1rem 1.25rem !important;
    color: var(--text-primary) !important;
    font-weight: 600 !important;
  }

  .card-body {
    padding: 1.25rem !important;
    background: var(--surface-light) !important;
    color: var(--text-primary) !important;
  }

  .card-footer {
    background: var(--surface-dark) !important;
    border-top: 1px solid var(--border-light) !important;
    padding: 1rem 1.25rem !important;
  }

  /* Glass cards */
  .glass-card {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--shadow-premium) !important;
  }

  /* Premium cards */
  .pro-card,
  .premium-card,
  .dashboard-card-premium {
    background: var(--surface-light) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 12px !important;
    box-shadow: var(--shadow-premium) !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .dashboard-card-premium::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: var(--premium-gradient) !important;
  }
}

/* ================================================
   BUTTONS - MATCHING DESKTOP EXACTLY
   ================================================ */
@media (max-width: 992px) {
  .btn {
    font-family: 'Outfit', 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    padding: 0.75rem 1.25rem !important;
    border-radius: 10px !important;
    border: none !important;
    transition: all var(--transition-base) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 44px !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
  }

  .btn-primary {
    background: var(--primary-gradient) !important;
    color: var(--text-white) !important;
    box-shadow: 0 4px 14px rgba(93, 76, 218, 0.35) !important;
  }

  .btn-primary:hover,
  .btn-primary:active {
    background: var(--primary-gradient-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(93, 76, 218, 0.45) !important;
    color: var(--text-white) !important;
  }

  .btn-success {
    background: var(--success-gradient) !important;
    color: var(--text-white) !important;
  }

  .btn-warning {
    background: var(--warning-gradient) !important;
    color: var(--text-white) !important;
  }

  .btn-danger {
    background: var(--danger-gradient) !important;
    color: var(--text-white) !important;
  }

  .btn-outline-primary {
    background: transparent !important;
    border: 2px solid #5D4CDA !important;
    color: #5D4CDA !important;
  }

  .btn-outline-primary:hover {
    background: var(--primary-gradient) !important;
    color: var(--text-white) !important;
    border-color: transparent !important;
  }

  .btn-light,
  .btn-outline-secondary {
    background: var(--surface-light) !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text-primary) !important;
  }

  .btn-sm {
    padding: 0.5rem 1rem !important;
    font-size: 0.85rem !important;
    min-height: 36px !important;
  }

  .btn-lg {
    padding: 1rem 2rem !important;
    font-size: 1.1rem !important;
    min-height: 56px !important;
  }
}

/* ================================================
   FORMS - MATCHING DESKTOP EXACTLY
   ================================================ */
@media (max-width: 992px) {
  .form-control,
  .form-select {
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important; /* Prevent iOS zoom */
    padding: 0.875rem 1rem !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 10px !important;
    background: var(--surface-light) !important;
    color: var(--text-primary) !important;
    transition: all var(--transition-fast) !important;
    min-height: 52px !important;
  }

  .form-control:focus,
  .form-select:focus {
    border-color: #5D4CDA !important;
    box-shadow: 0 0 0 3px rgba(93, 76, 218, 0.15) !important;
    outline: none !important;
    background: var(--surface-light) !important;
  }

  .form-control::placeholder {
    color: var(--text-light) !important;
  }

  .form-label {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    margin-bottom: 0.5rem !important;
  }

  /* File upload zones */
  .upload-zone {
    border: 2px dashed var(--border-light) !important;
    border-radius: 12px !important;
    padding: 2rem 1.5rem !important;
    text-align: center !important;
    background: var(--surface-light) !important;
    color: var(--text-light) !important;
    transition: all var(--transition-base) !important;
  }

  .upload-zone:hover,
  .upload-zone.dragover {
    border-color: #5D4CDA !important;
    background: rgba(93, 76, 218, 0.03) !important;
    color: var(--text-primary) !important;
  }
}

/* ================================================
   BADGES & STATUS - MATCHING DESKTOP EXACTLY
   ================================================ */
@media (max-width: 992px) {
  .badge {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    padding: 0.35rem 0.75rem !important;
    border-radius: 20px !important;
    letter-spacing: 0.02em !important;
  }

  .badge.bg-primary,
  .badge-primary {
    background: var(--primary-gradient) !important;
    color: var(--text-white) !important;
  }

  .badge.bg-success,
  .badge-success {
    background: var(--success-gradient) !important;
    color: var(--text-white) !important;
  }

  .badge.bg-warning,
  .badge-warning {
    background: var(--warning-gradient) !important;
    color: var(--text-white) !important;
  }

  .badge.bg-danger,
  .badge-danger {
    background: var(--danger-gradient) !important;
    color: var(--text-white) !important;
  }

  /* Account status badges */
  .account-status {
    padding: 0.25rem 0.75rem !important;
    border-radius: 6px !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.025em !important;
  }

  .account-status.negative {
    background: #fee2e2 !important;
    color: #991b1b !important;
    border: 1px solid #fecaca !important;
  }

  .account-status.positive {
    background: #d1fae5 !important;
    color: #065f46 !important;
    border: 1px solid #a7f3d0 !important;
  }

  .account-status.neutral {
    background: var(--surface-dark) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-light) !important;
  }

  /* Status indicators */
  .status-indicator {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.375rem 0.75rem !important;
    border-radius: 8px !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
  }

  .status-positive {
    background: rgba(16, 185, 129, 0.1) !important;
    color: #059669 !important;
    border: 1px solid rgba(16, 185, 129, 0.2) !important;
  }

  .status-negative {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #dc2626 !important;
    border: 1px solid rgba(239, 68, 68, 0.2) !important;
  }

  .status-neutral {
    background: rgba(100, 116, 139, 0.1) !important;
    color: var(--text-secondary) !important;
    border: 1px solid rgba(100, 116, 139, 0.2) !important;
  }
}

/* ================================================
   TABLES - MATCHING DESKTOP EXACTLY
   ================================================ */
@media (max-width: 992px) {
  .table {
    background: var(--surface-light) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-soft) !important;
    border: 1px solid var(--border-light) !important;
    font-size: 0.875rem !important;
  }

  .table th {
    background: var(--surface-dark) !important;
    color: var(--text-primary) !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 0.75rem 0.5rem !important;
    border: none !important;
  }

  .table td {
    padding: 0.875rem 0.5rem !important;
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
    vertical-align: middle !important;
  }

  .table-hover tbody tr:hover {
    background: rgba(93, 76, 218, 0.03) !important;
  }

  /* Table responsive wrapper */
  .table-responsive {
    border-radius: 10px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ================================================
   ALERTS - MATCHING DESKTOP EXACTLY
   ================================================ */
@media (max-width: 992px) {
  .alert {
    border-radius: 10px !important;
    padding: 1rem 1.25rem !important;
    font-weight: 500 !important;
    border: 1px solid !important;
    box-shadow: var(--shadow-soft) !important;
  }

  .alert-warning {
    background: #fef3c7 !important;
    color: #92400e !important;
    border-color: #fbbf24 !important;
  }

  .alert-success {
    background: #d1fae5 !important;
    color: #065f46 !important;
    border-color: #10b981 !important;
  }

  .alert-danger {
    background: #fee2e2 !important;
    color: #991b1b !important;
    border-color: #ef4444 !important;
  }

  .alert-info {
    background: #dbeafe !important;
    color: #1e40af !important;
    border-color: #5D4CDA !important;
  }
}

/* ================================================
   MODALS - MATCHING DESKTOP EXACTLY
   ================================================ */
@media (max-width: 992px) {
  .modal-content {
    background: var(--surface-light) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 16px !important;
    box-shadow: var(--shadow-large) !important;
    overflow: hidden !important;
  }

  .modal-header {
    background: var(--surface-dark) !important;
    border-bottom: 1px solid var(--border-light) !important;
    padding: 1rem 1.25rem !important;
    border-radius: 16px 16px 0 0 !important;
  }

  .modal-title {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
    font-family: 'Outfit', 'Inter', sans-serif !important;
  }

  .modal-body {
    padding: 1.5rem 1.25rem !important;
    color: var(--text-primary) !important;
  }

  .modal-footer {
    background: var(--surface-dark) !important;
    border-top: 1px solid var(--border-light) !important;
    padding: 1rem 1.25rem !important;
  }
}

/* ================================================
   AUTOMATION STATS PILLS
   ================================================ */
@media (max-width: 992px) {
  .automation-pill {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 16px !important;
    text-align: center !important;
    margin-bottom: 12px !important;
  }

  .automation-pill .label {
    font-size: 13px !important;
    color: #64748b !important;
    font-weight: 500 !important;
    margin-bottom: 4px !important;
    display: block !important;
  }

  .automation-pill .value {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    display: block !important;
  }
}

/* ================================================
   CREDIT SCORE CARDS - MATCHING DESKTOP
   ================================================ */
@media (max-width: 992px) {
  /* Credit grade letter */
  .credit-grade,
  .score-grade {
    font-size: 48px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    margin-bottom: 8px !important;
  }

  /* Credit score description */
  .credit-rating,
  .score-rating {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #374151 !important;
  }

  /* Score change indicator */
  .score-change {
    font-size: 20px !important;
    font-weight: 700 !important;
    margin: 12px 0 !important;
  }

  .score-change.positive,
  .score-change.text-success {
    color: #22c55e !important;
  }

  .score-change.negative,
  .score-change.text-danger {
    color: #ef4444 !important;
  }

  /* Time estimate */
  .time-estimate {
    font-size: 14px !important;
    color: #64748b !important;
    margin-bottom: 12px !important;
  }

  /* Cost/savings display */
  .cost-display,
  .savings-display {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #f59e0b !important;
    margin-bottom: 4px !important;
  }

  .cost-label,
  .savings-label {
    font-size: 13px !important;
    color: #64748b !important;
  }

  /* Loan type display */
  .loan-type {
    font-size: 14px !important;
    color: #374151 !important;
    font-weight: 500 !important;
    padding: 8px 12px !important;
    background: #f3f4f6 !important;
    border-radius: 8px !important;
    display: inline-block !important;
    margin-top: 8px !important;
  }
}

/* ================================================
   DASHBOARD SPECIFIC - MATCHING DESKTOP
   ================================================ */
@media (max-width: 992px) {
  /* Dashboard stats */
  .dashboard-stat,
  .stat-card {
    background: var(--surface-light) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 12px !important;
    padding: 1.25rem !important;
    text-align: center !important;
    box-shadow: var(--shadow-soft) !important;
  }

  .stat-number,
  .dashboard-stat h3 {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    color: #5D4CDA !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 0.25rem !important;
  }

  .stat-label {
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    color: var(--text-light) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
  }

  /* Dashboard hero */
  .dashboard-hero,
  .dashboard-hero-gradient,
  [class*="hero-gradient"] {
    background: var(--primary-gradient) !important;
    border-radius: 16px !important;
    padding: 1.5rem !important;
    color: var(--text-white) !important;
    box-shadow: var(--shadow-premium) !important;
  }

  .dashboard-hero h1,
  .dashboard-hero-gradient h1 {
    color: var(--text-white) !important;
    font-weight: 700 !important;
    font-size: 1.5rem !important;
    margin-bottom: 0.5rem !important;
  }

  .dashboard-hero p,
  .dashboard-hero-gradient p {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 0.95rem !important;
  }

  /* Score displays */
  .score-card,
  .bureau-card {
    background: var(--surface-light) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 12px !important;
    padding: 1.25rem !important;
    text-align: center !important;
    box-shadow: var(--shadow-medium) !important;
  }

  .score-value,
  .score-display {
    font-size: 2.25rem !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
    font-family: 'Outfit', sans-serif !important;
  }

  /* Progress tracker */
  .progress-modern {
    height: 8px !important;
    background: rgba(0, 0, 0, 0.08) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
  }

  .progress-bar-modern {
    background: var(--success-gradient) !important;
    border-radius: 10px !important;
  }

  /* Timeline */
  .timeline-circle {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: var(--shadow-medium) !important;
    font-size: 1rem !important;
  }

  .timeline-step.completed .timeline-circle {
    background: var(--success-gradient) !important;
    color: var(--text-white) !important;
  }

  .timeline-step.active .timeline-circle {
    background: var(--primary-gradient) !important;
    color: var(--text-white) !important;
  }
}

/* ================================================
   NAVIGATION - MATCHING DESKTOP
   ================================================ */
@media (max-width: 992px) {
  .navbar,
  .app-nav {
    background: var(--surface-light) !important;
    border-bottom: 1px solid var(--border-light) !important;
    box-shadow: var(--shadow-soft) !important;
  }

  .navbar-brand {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
  }

  /* Sidebar styling */
  .sidebar {
    background: var(--surface-light) !important;
    border-right: 1px solid var(--border-light) !important;
  }

  .sidebar a,
  .sidebar .nav-link {
    font-family: 'Inter', sans-serif !important;
    color: var(--text-primary) !important;
    font-weight: 500 !important;
    border-radius: 10px !important;
    transition: all var(--transition-fast) !important;
  }

  .sidebar a:hover {
    background: rgba(93, 76, 218, 0.08) !important;
    color: #5D4CDA !important;
  }

  .sidebar a.active {
    background: var(--primary-gradient) !important;
    color: var(--text-white) !important;
    box-shadow: 0 4px 12px rgba(93, 76, 218, 0.3) !important;
  }

  .sidebar a.active i {
    color: var(--text-white) !important;
  }

  .sidebar a i {
    color: var(--text-light) !important;
  }
}

/* ================================================
   FOOTER - MATCHING DESKTOP
   ================================================ */
@media (max-width: 992px) {
  footer {
    background: var(--surface-light) !important;
    border-top: 1px solid var(--border-light) !important;
    color: var(--text-light) !important;
    padding: 1.5rem 1rem !important;
  }

  footer a {
    color: var(--text-light) !important;
    text-decoration: none !important;
    transition: color var(--transition-fast) !important;
  }

  footer a:hover {
    color: #5D4CDA !important;
  }

  /* Footer links spacing */
  footer .d-flex {
    gap: 1.5rem !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
}

/* ================================================
   ICONS & DECORATIVE ELEMENTS - DESKTOP MATCH
   ================================================ */
@media (max-width: 992px) {
  .icon-circle {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1rem !important;
  }

  .bg-gradient-primary {
    background: var(--primary-gradient) !important;
  }

  .bg-gradient-success {
    background: var(--success-gradient) !important;
  }

  .bg-gradient-warning {
    background: var(--warning-gradient) !important;
  }

  .bg-gradient-danger {
    background: var(--danger-gradient) !important;
  }

  .bg-gradient-light {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
  }

  /* Feature icons */
  .feature-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    background: var(--primary-gradient) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--text-white) !important;
    font-size: 1.25rem !important;
    margin-bottom: 1rem !important;
    box-shadow: 0 4px 14px rgba(93, 76, 218, 0.3) !important;
  }
}

/* ================================================
   ACCOUNT CARDS - MATCHING DESKTOP
   ================================================ */
@media (max-width: 992px) {
  .account-card {
    background: var(--surface-light) !important;
    border-radius: 12px !important;
    padding: 1.25rem !important;
    margin-bottom: 1rem !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-light) !important;
    box-shadow: var(--shadow-soft) !important;
    transition: all var(--transition-base) !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .account-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: var(--success-gradient) !important;
  }

  .account-card.negative::before {
    background: var(--danger-gradient) !important;
  }

  .account-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-medium) !important;
    border-color: rgba(93, 76, 218, 0.3) !important;
  }

  .account-card.selected {
    border-color: #5D4CDA !important;
    background: rgba(93, 76, 218, 0.03) !important;
    box-shadow: var(--shadow-medium) !important;
  }

  .account-title {
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    margin-bottom: 0.25rem !important;
  }

  .account-number {
    font-family: 'SF Mono', 'Consolas', monospace !important;
    font-size: 0.85rem !important;
    color: var(--text-light) !important;
  }
}

/* ================================================
   LETTER PREVIEW - MATCHING DESKTOP
   ================================================ */
@media (max-width: 992px) {
  .letter-preview-content,
  .letter-html {
    background: var(--surface-light) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-soft) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.95rem !important;
    line-height: 1.7 !important;
  }

  .letter-content {
    color: var(--text-primary) !important;
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
  }
}

/* ================================================
   FEATURE CARDS - MATCHING DESKTOP
   ================================================ */
@media (max-width: 992px) {
  .feature-card,
  .interactive-card {
    background: var(--surface-light) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
    transition: all var(--transition-base) !important;
    box-shadow: var(--shadow-soft) !important;
  }

  .feature-card:hover,
  .interactive-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--shadow-large) !important;
    border-color: rgba(93, 76, 218, 0.2) !important;
  }

  .feature-highlight {
    background: rgba(93, 76, 218, 0.03) !important;
    border: 1px solid rgba(93, 76, 218, 0.1) !important;
    border-left: 3px solid #5D4CDA !important;
    padding: 1rem 1.25rem !important;
    border-radius: 0 10px 10px 0 !important;
    margin: 1rem 0 !important;
  }

  .feature-highlight h6 {
    color: #5D4CDA !important;
    font-weight: 600 !important;
    margin-bottom: 0.5rem !important;
  }
}

/* ================================================
   STEP INDICATORS - MATCHING DESKTOP
   ================================================ */
@media (max-width: 992px) {
  .step-indicator {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    padding: 1rem !important;
    background: var(--surface-light) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 10px !important;
    transition: all var(--transition-base) !important;
  }

  .step-indicator:hover {
    background: rgba(93, 76, 218, 0.02) !important;
    box-shadow: var(--shadow-medium) !important;
  }

  .step-number {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    background: var(--primary-gradient) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    color: var(--text-white) !important;
    box-shadow: var(--shadow-soft) !important;
    flex-shrink: 0 !important;
  }
}

/* ================================================
   ANIMATIONS - CONSISTENT WITH DESKTOP
   ================================================ */
@media (max-width: 992px) {
  @keyframes slideInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  .animate-slide-up {
    animation: slideInUp 0.4s ease-out !important;
  }

  .animate-fade {
    animation: fadeIn 0.3s ease-out !important;
  }
}

/* ================================================
   CREDITOR MATRIX TABLE - CLEAN STYLING
   ================================================ */
@media (max-width: 992px) {
  .creditor-matrix-card {
    background: var(--surface-light) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 16px !important;
    box-shadow: var(--shadow-medium) !important;
    overflow: hidden !important;
  }

  .creditor-matrix-header {
    background: linear-gradient(135deg, rgba(93, 76, 218, 0.03) 0%, rgba(120, 103, 232, 0.03) 100%) !important;
    padding: 1.25rem !important;
    border-bottom: 1px solid rgba(93, 76, 218, 0.08) !important;
  }

  .creditor-matrix-header h5 {
    color: var(--text-primary) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.25rem !important;
  }

  .creditor-matrix-header small {
    color: var(--text-light) !important;
    font-size: 0.8rem !important;
  }

  .btn-dispute-flow {
    background: var(--primary-gradient) !important;
    color: var(--text-white) !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 0.75rem 1.25rem !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    box-shadow: 0 4px 14px rgba(93, 76, 218, 0.35) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  .creditor-table {
    width: 100% !important;
    font-size: 0.85rem !important;
  }

  .creditor-table thead th {
    background: var(--surface-dark) !important;
    color: var(--text-light) !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 0.75rem 0.5rem !important;
  }

  .creditor-table tbody td {
    padding: 0.875rem 0.5rem !important;
    border-bottom: 1px solid var(--border-light) !important;
    color: var(--text-primary) !important;
  }

  .creditor-name {
    font-weight: 600 !important;
    color: var(--text-primary) !important;
  }

  .account-badge {
    background: rgba(93, 76, 218, 0.08) !important;
    color: #5D4CDA !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 6px !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    font-family: 'SF Mono', 'Consolas', monospace !important;
  }

  .bureau-tag {
    background: var(--surface-dark) !important;
    color: var(--text-light) !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 6px !important;
    font-size: 0.7rem !important;
    font-weight: 500 !important;
  }
}

/* ================================================
   LOADING STATES - MATCHING DESKTOP
   ================================================ */
@media (max-width: 992px) {
  .loading-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(10px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 9999 !important;
  }

  .loading-spinner {
    width: 50px !important;
    height: 50px !important;
    border: 4px solid rgba(255, 255, 255, 0.2) !important;
    border-top: 4px solid #5D4CDA !important;
    border-radius: 50% !important;
    animation: spin 1s linear infinite !important;
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  .loading-premium {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 1rem !important;
    padding: 2rem !important;
    background: var(--glass-bg) !important;
    backdrop-filter: blur(20px) !important;
    border-radius: 12px !important;
    border: 1px solid var(--glass-border) !important;
  }

  .spinner-premium {
    width: 40px !important;
    height: 40px !important;
    background: conic-gradient(from 0deg, #5D4CDA, #7867E8, #ec4899, #5D4CDA) !important;
    border-radius: 50% !important;
    mask: radial-gradient(circle at center, transparent 35%, black 36%) !important;
    animation: spin 1.5s linear infinite !important;
  }
}

/* ================================================
   SCROLLBAR - MATCHING DESKTOP
   ================================================ */
@media (max-width: 992px) {
  ::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
  }

  ::-webkit-scrollbar-track {
    background: var(--surface-dark) !important;
    border-radius: 3px !important;
  }

  ::-webkit-scrollbar-thumb {
    background: var(--text-light) !important;
    border-radius: 3px !important;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #5D4CDA !important;
  }
}

/* ================================================
   PWA STANDALONE MODE - CRITICAL FIXES
   Ensures PWA works exactly like mobile Safari
   ================================================ */

/* PWA Standalone - Force mobile layout */
@media (display-mode: standalone) {
  /* Force sidebar to be hidden and use mobile behavior */
  .sidebar {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 280px !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease !important;
    z-index: 1070 !important;
    background: #fff !important;
    box-shadow: 2px 0 20px rgba(0, 0, 0, 0.15) !important;
  }

  .sidebar.show {
    transform: translateX(0) !important;
  }

  /* Content should not have sidebar margin */
  .content,
  .main-content,
  [role="main"] {
    margin-left: 0 !important;
    padding-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Ensure scrolling works */
  html, body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    min-height: 100vh !important;
    position: static !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Content scrollable */
  .content {
    overflow: visible !important;
    height: auto !important;
    min-height: auto !important;
    padding-top: 80px !important;
    padding-bottom: 100px !important;
  }

  /* Mobile overlay for sidebar */
  .mobile-overlay {
    display: none !important;
  }

  .mobile-overlay.show {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 1060 !important;
  }

  /* Hide desktop-only elements */
  .d-none.d-lg-block,
  .d-none.d-lg-flex,
  .d-none.d-lg-inline,
  .d-none.d-lg-inline-block,
  .d-none.d-lg-inline-flex {
    display: none !important;
  }

  /* Show mobile-only elements */
  .d-lg-none {
    display: block !important;
  }
}

/* JS Fallback - same styles for pwa-standalone class */
body.pwa-standalone .sidebar,
html.pwa-standalone .sidebar {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 280px !important;
  transform: translateX(-100%) !important;
  transition: transform 0.3s ease !important;
  z-index: 1070 !important;
}

body.pwa-standalone .sidebar.show,
html.pwa-standalone .sidebar.show {
  transform: translateX(0) !important;
}

body.pwa-standalone .content,
html.pwa-standalone .content {
  margin-left: 0 !important;
  padding-left: 0 !important;
  width: 100% !important;
}

/* PWA standalone mode disabled - these rules preserved for reference only */
/* body.pwa-standalone overflow rules removed to prevent conflicts */

/* ================================================
   LOGO SIZING - SINGLE SOURCE OF TRUTH (MOBILE/PWA)
   BIGGER logos for better visibility and clarity
   ================================================ */
/* ================================================
   LOGO SIZING - MUCH BIGGER FOR VISIBILITY
   ================================================ */
@media (max-width: 992px) {
  .app-brand img,
  .app-brand .nav-logo,
  .nav-logo,
  .navbar-brand img,
  img.nav-logo {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    width: auto !important;
    max-width: 220px !important;
    object-fit: contain !important;
    object-position: left center !important;
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: crisp-edges !important;
    filter: none !important;
  }
}

@media (max-width: 480px) {
  .app-brand img,
  .app-brand .nav-logo,
  .nav-logo,
  .navbar-brand img,
  img.nav-logo {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    max-width: 200px !important;
  }
}

@media (max-width: 374px) {
  .app-brand img,
  .app-brand .nav-logo,
  .nav-logo,
  .navbar-brand img,
  img.nav-logo {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    max-width: 180px !important;
  }
}

/* ================================================
   MOBILE BOTTOM NAVIGATION BAR
   Native app-style bottom tabs with safe area support
   ================================================ */
@media (max-width: 992px) {
  .mobile-bottom-nav {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 64px !important;
    height: var(--mobile-bottom-nav-h, calc(64px + env(safe-area-inset-bottom, 0px))) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.06) !important;
    z-index: 1200 !important; /* Higher than install banner (1100) */
    align-items: stretch !important;
    justify-content: space-around !important;
    pointer-events: auto !important; /* Ensure clicks work */
  }

  body.modal-open .mobile-bottom-nav {
    display: none !important;
  }

  .bottom-nav-item {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 4px !important;
    color: #374151 !important;
    text-decoration: none !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    position: relative !important;
    opacity: 1 !important;
  }

  .bottom-nav-item i {
    font-size: 20px !important;
    margin-bottom: 4px !important;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    color: inherit !important;
    opacity: 1 !important;
  }

  .bottom-nav-item span {
    transition: color 0.2s ease !important;
    color: inherit !important;
    opacity: 1 !important;
  }

  .bottom-nav-item:active {
    transform: scale(0.92) !important;
  }

  .bottom-nav-item:active i {
    transform: scale(1.1) !important;
  }

  .bottom-nav-item.active {
    color: #5D4CDA !important;
  }

  .bottom-nav-item.active::before {
    content: '' !important;
    position: absolute !important;
    top: 4px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 4px !important;
    height: 4px !important;
    background: #5D4CDA !important;
    border-radius: 50% !important;
  }

  .bottom-nav-item.active i {
    color: #5D4CDA !important;
    transform: scale(1.08) !important;
  }

  body {
    padding-bottom: var(--mobile-bottom-nav-h, calc(64px + env(safe-area-inset-bottom, 0px))) !important;
  }

  .content,
  main,
  .main-content {
    /* Extra buffer so bottom buttons/forms never sit under the tab bar */
    padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px) + var(--page-sticky-bottom-h, 0px)) !important;
  }
}

/* Hide the large desktop-style footer when the mobile bottom tab bar is active.
   This prevents "footer + another nav" stacking and keeps the app feeling native. */
@media (max-width: 992px) {
  body[data-mobile-bottom-nav="1"] footer.pwa-footer {
    display: none !important;
  }
}

@media (min-width: 993px) {
  .mobile-bottom-nav {
    display: none !important;
  }
}

@media (display-mode: standalone) {
  .mobile-bottom-nav {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 56px !important;
    height: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.06) !important;
    z-index: 1040 !important;
    align-items: stretch !important;
    justify-content: space-around !important;
  }

  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.modal-open .mobile-bottom-nav {
    display: none !important;
  }
}

body.pwa-standalone .mobile-bottom-nav,
html.pwa-standalone .mobile-bottom-nav {
  display: flex !important;
}

/* ================================================
   SAFE AREA INSETS FOR iOS NOTCH/HOME INDICATOR
   ================================================ */
@supports (padding: env(safe-area-inset-bottom)) {
  @media (max-width: 992px) {
    html {
      padding-top: env(safe-area-inset-top, 0px) !important;
    }

    .app-nav,
    .navbar {
      padding-top: env(safe-area-inset-top, 0px) !important;
    }

    .mobile-bottom-nav {
      padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    }
  }
}

/* ================================================
   APP-LIKE PAGE TRANSITIONS
   Smooth slide/fade for native feel
   ================================================ */
@media (max-width: 992px) {
  .content {
    animation: pageSlideIn 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  @keyframes pageSlideIn {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .card,
  .dashboard-premium-card,
  .gradient-card {
    animation: cardFadeIn 0.3s ease-out forwards !important;
    opacity: 0;
  }

  .card:nth-child(1) { animation-delay: 0.05s; }
  .card:nth-child(2) { animation-delay: 0.1s; }
  .card:nth-child(3) { animation-delay: 0.15s; }
  .card:nth-child(4) { animation-delay: 0.2s; }
  .card:nth-child(5) { animation-delay: 0.25s; }

  @keyframes cardFadeIn {
    from {
      opacity: 0;
      transform: translateY(12px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* ================================================
   TOUCH FEEDBACK & HAPTIC STYLING
   Native press states for buttons/cards
   ================================================ */
@media (max-width: 992px) {
  .btn,
  button,
  .card,
  .dashboard-premium-card,
  a.nav-link,
  .sidebar a {
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
  }

  .btn:active,
  button:active {
    transform: scale(0.97) !important;
    transition: transform 0.1s ease !important;
  }

  .card:active,
  .dashboard-premium-card:active {
    transform: scale(0.985) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.15s ease !important;
  }
}

/* ================================================
   FLOATING ACTION BUTTON (FAB)
   Quick access to primary action
   ================================================ */
@media (max-width: 992px) {
  .mobile-fab {
    position: fixed !important;
    bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    right: 20px !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 28px !important;
    background: linear-gradient(135deg, #5D4CDA 0%, #7867E8 100%) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 4px 20px rgba(93, 76, 218, 0.4), 
                0 2px 8px rgba(0, 0, 0, 0.1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    z-index: 1055 !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .mobile-fab:active {
    transform: scale(0.9) !important;
    box-shadow: 0 2px 10px rgba(93, 76, 218, 0.3) !important;
  }

  .mobile-fab:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 6px 25px rgba(93, 76, 218, 0.5) !important;
  }
}

/* ================================================
   IMPROVED DASHBOARD CARDS FOR MOBILE
   Swipeable horizontal sections with snap
   ================================================ */
@media (max-width: 992px) {
  .dashboard-scroll-container {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 16px !important;
    padding: 4px 16px 16px !important;
    margin: 0 -16px !important;
  }

  .dashboard-scroll-container::-webkit-scrollbar {
    display: none !important;
  }

  .dashboard-scroll-container > * {
    flex-shrink: 0 !important;
    scroll-snap-align: center !important;
    width: 85vw !important;
    max-width: 320px !important;
  }

  .score-cards-row,
  .kpi-cards-row {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 12px !important;
    padding-bottom: 8px !important;
  }

  .score-cards-row::-webkit-scrollbar,
  .kpi-cards-row::-webkit-scrollbar {
    display: none !important;
  }

  .score-cards-row > .col,
  .score-cards-row > [class*="col-"],
  .kpi-cards-row > .col,
  .kpi-cards-row > [class*="col-"] {
    flex: 0 0 auto !important;
    width: 140px !important;
    scroll-snap-align: start !important;
  }
}

/* ================================================
   SKELETON LOADING STATES
   Smooth loading placeholders
   ================================================ */
@media (max-width: 992px) {
  .skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%) !important;
    background-size: 200% 100% !important;
    animation: skeletonShimmer 1.5s infinite !important;
    border-radius: 8px !important;
  }

  @keyframes skeletonShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  .skeleton-text {
    height: 16px !important;
    width: 80% !important;
    margin-bottom: 8px !important;
  }

  .skeleton-title {
    height: 24px !important;
    width: 60% !important;
    margin-bottom: 12px !important;
  }

  .skeleton-avatar {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
  }

  .skeleton-card {
    height: 120px !important;
    width: 100% !important;
    border-radius: 16px !important;
  }
}

/* ================================================
   HIDE SIDEBAR ON MOBILE (BOTTOM NAV REPLACES IT)
   ================================================ */
@media (max-width: 992px) {
  body:not(.sidebar-open) .sidebar {
    transform: translateX(-100%) !important;
    visibility: hidden !important;
  }
}

/* ================================================
   ATTACKS PAGE - MOBILE NATIVE STYLING
   Fix checkboxes, alignment, fonts, native app feel
   ================================================ */
@media (max-width: 992px) {
  /* Account selection grid - single column on mobile */
  .account-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .account-grid > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    flex: none !important;
  }

  /* Account card styling - native app look */
  .account-card {
    border-radius: 14px !important;
    padding: 14px !important;
    background: white !important;
    border: 2px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.2s ease !important;
  }

  .account-card.selected,
  .account-card.border-primary,
  .account-card[style*="border-color: #3b82f6"] {
    border-color: #5D4CDA !important;
    background: #f8f7ff !important;
    box-shadow: 0 4px 12px rgba(93, 76, 218, 0.15) !important;
  }

  /* Checkbox styling - visible, properly sized */
  .account-card .form-check-input,
  .account-checkbox {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    flex-shrink: 0 !important;
    border: 2px solid #cbd5e1 !important;
    border-radius: 6px !important;
    margin: 0 !important;
    cursor: pointer !important;
    background-color: white !important;
    appearance: none !important;
    -webkit-appearance: none !important;
  }

  .account-card .form-check-input:checked,
  .account-checkbox:checked {
    background-color: #5D4CDA !important;
    border-color: #5D4CDA !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
    background-size: 14px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }

  /* Account card text - dark readable colors */
  .account-card h6,
  .account-card .creditor-name,
  .account-card .fw-bold {
    color: #111827 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
  }

  .account-card span,
  .account-card p,
  .account-card .text-muted {
    color: #6b7280 !important;
    font-size: 12px !important;
  }

  .account-card .badge {
    font-size: 10px !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
  }

  /* Attack strategy cards - clean layout */
  .strategy-item,
  .attack-strategy-item,
  .list-group-item-action {
    padding: 14px !important;
    margin-bottom: 8px !important;
    border-radius: 12px !important;
  }

  .strategy-item h5,
  .strategy-item h6,
  .attack-strategy-item h5,
  .attack-strategy-item h6 {
    font-size: 14px !important;
    color: #111827 !important;
    margin-bottom: 4px !important;
  }

  /* Bureau tracker cards - aligned properly */
  .bureau-tracker-row,
  .bureau-scores-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 4px !important;
  }

  .bureau-tracker-item,
  .bureau-score-card {
    flex: 1 1 0 !important;
    min-width: 100px !important;
    text-align: center !important;
    padding: 12px 8px !important;
    border-radius: 12px !important;
  }

  /* Attack wizard - title at top, clear navigation */
  .wizard-hero {
    padding: 16px !important;
    margin-bottom: 16px !important;
    border-radius: 14px !important;
  }

  .wizard-hero h3,
  .wizard-hero h4,
  .wizard-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: white !important;
    margin-bottom: 8px !important;
  }

  .wizard-hero p {
    font-size: 13px !important;
    opacity: 0.9 !important;
    margin-bottom: 0 !important;
  }

  /* FIX: Account selection instruction text - NOT transparent on mobile */
  .card-header .opacity-75,
  .card-header p.opacity-75,
  .card-header .small.opacity-75,
  [class*="bg-"] .opacity-75,
  [class*="bg-"] p.small {
    opacity: 1 !important;
    color: rgba(255, 255, 255, 0.95) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.95) !important;
  }
  
  /* FIX: Sidebar badges - keep them readable WITHOUT overriding their intended colors */
  .sidebar-badge {
    opacity: 1 !important;
    -webkit-text-fill-color: currentColor !important;
    white-space: nowrap !important;
  }
  
  /* FIX: General opacity fixes for text on colored backgrounds */
  .card-header[class*="bg-"] p,
  .card-header[class*="bg-"] span,
  .card-header[class*="bg-"] .small,
  .card-header[class*="bg-"] .text-white-50 {
    color: rgba(255, 255, 255, 0.95) !important;
    opacity: 1 !important;
  }

  /* Strategy selection buttons */
  .show-account-selection-btn,
  .start-dispute-btn {
    width: 100% !important;
    padding: 14px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  /* Quick actions row - better mobile layout */
  .d-flex.justify-content-between.align-items-center.mb-3 {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  .d-flex.justify-content-between.align-items-center.mb-3 .btn-group {
    width: 100% !important;
    display: flex !important;
  }

  .d-flex.justify-content-between.align-items-center.mb-3 .btn-group .btn {
    flex: 1 !important;
    font-size: 12px !important;
    padding: 8px 12px !important;
  }

  /* Consent checkbox section */
  .consent-section,
  .form-check.mb-3 {
    padding: 12px !important;
    background: #f9fafb !important;
    border-radius: 12px !important;
  }

  .form-check-label {
    color: #374151 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  /* Continue button - prominent */
  .btn[onclick*="generateLetters"],
  .btn:has(i.fa-arrow-right) {
    width: 100% !important;
    padding: 14px 20px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    margin-top: 16px !important;
  }

  /* Quality selection cards */
  .quality-selection-section {
    padding: 16px !important;
    border-radius: 14px !important;
  }

  .quality-card,
  .quality-option-card {
    padding: 14px !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
  }

  .quality-card h5 {
    font-size: 14px !important;
    color: #111827 !important;
  }

  .quality-features li {
    font-size: 12px !important;
    margin-bottom: 4px !important;
  }

  /* Hide desktop sidebar navigation on attacks page */
  .attack-sidebar {
    display: none !important;
  }

  /* Strategy tabs mobile - horizontal scroll */
  .strategy-list {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 8px !important;
    padding-bottom: 8px !important;
    -webkit-overflow-scrolling: touch !important;
    margin-bottom: 16px !important;
  }

  .strategy-list .strategy-item {
    flex: 0 0 auto !important;
    min-width: 140px !important;
    text-align: center !important;
    padding: 12px !important;
    margin-bottom: 0 !important;
  }

  .strategy-list::-webkit-scrollbar {
    display: none !important;
  }

  /* Bureau checkbox group - fixes alignment */
  .bureau-checkbox-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .bureau-checkbox-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    background: white !important;
    border: 2px solid #e2e8f0 !important;
  }

  .bureau-checkbox-item label {
    color: #111827 !important;
    font-weight: 500 !important;
    font-size: 14px !important;
  }

  .bureau-checkbox-item .bureau-price {
    color: #10b981 !important;
    font-weight: 700 !important;
  }

  .bureau-checkbox-item.selected {
    border-color: #5D4CDA !important;
    background: #f8f7ff !important;
  }
}

/* ================================================
   MOBILE TOP APP BAR - Slim fixed header
   Premium fintech design matching Credit Karma
   ================================================ */

.mobile-top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: calc(56px + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(93, 76, 218, 0.08);
  z-index: 1020;
  display: none;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.03);
}

@media (max-width: 991.98px) {
  .mobile-top-bar {
    display: block;
  }
  
  /* CRITICAL: Force hide ALL instances of old navbar on mobile */
  /* These must override all other navbar rules with maximum specificity */
  html body .navbar.app-nav,
  html body nav.navbar.app-nav,
  html body .navbar.fixed-top,
  html body nav.fixed-top,
  body .app-nav,
  body.logged-in .navbar.app-nav,
  body.logged-in nav.app-nav,
  body.logged-in .navbar.fixed-top,
  body.pwa-standalone .navbar.app-nav,
  .navbar.app-nav.fixed-top {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    pointer-events: none !important;
  }
}

.top-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 12px;
  gap: 12px;
}

/* Hamburger Menu Button */
.top-bar-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  padding: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  gap: 4px;
  border-radius: 8px;
  transition: background 0.2s;
  flex-shrink: 0;
}

.top-bar-hamburger:active {
  background: rgba(93, 76, 218, 0.1);
}

/* Support BOTH hamburger structures: .hamburger-line AND .hamburger-icon span */
.hamburger-line,
.top-bar-hamburger .hamburger-icon span {
  display: block;
  width: 18px;
  height: 2px;
  background: #0f172a;
  border-radius: 1px;
  transition: all 0.3s ease;
}

.top-bar-hamburger .hamburger-icon {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

/* X animation when menu is open - aria-expanded */
.top-bar-hamburger[aria-expanded="true"] .hamburger-line:nth-child(1),
.top-bar-hamburger[aria-expanded="true"] .hamburger-icon span:nth-child(1) {
  transform: rotate(45deg) translate(4px, 4px);
}

.top-bar-hamburger[aria-expanded="true"] .hamburger-line:nth-child(2),
.top-bar-hamburger[aria-expanded="true"] .hamburger-icon span:nth-child(2) {
  opacity: 0;
}

.top-bar-hamburger[aria-expanded="true"] .hamburger-line:nth-child(3),
.top-bar-hamburger[aria-expanded="true"] .hamburger-icon span:nth-child(3) {
  transform: rotate(-45deg) translate(4px, -4px);
}

/* X animation when menu is open - body.sidebar-open */
body.sidebar-open .top-bar-hamburger .hamburger-line:nth-child(1),
body.sidebar-open .top-bar-hamburger .hamburger-icon span:nth-child(1) {
  transform: rotate(45deg) translate(4px, 4px);
}

body.sidebar-open .top-bar-hamburger .hamburger-line:nth-child(2),
body.sidebar-open .top-bar-hamburger .hamburger-icon span:nth-child(2) {
  opacity: 0;
}

body.sidebar-open .top-bar-hamburger .hamburger-line:nth-child(3),
body.sidebar-open .top-bar-hamburger .hamburger-icon span:nth-child(3) {
  transform: rotate(-45deg) translate(4px, -4px);
}

/* Back Button - Shows on inner pages */
.top-bar-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.top-bar-back i {
  font-size: 18px;
  color: #0f172a;
}

.top-bar-back:active {
  background: rgba(93, 76, 218, 0.1);
}

/* Menu button on right side for inner pages */
.top-bar-menu-btn {
  margin-left: auto;
}

/* Center: Logo + Title */
.top-bar-center {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  flex: 1;
  justify-content: center;
  min-width: 0;
}

.top-bar-logo {
  height: 34px;
  width: auto;
  flex-shrink: 0;
}

.top-bar-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Small phones: prioritize a bigger logo, hide title to prevent overlap */
@media (max-width: 420px) {
  .top-bar-title {
    display: none !important;
  }
  .top-bar-logo {
    height: 38px;
  }
}

/* Quick Dispute CTA */
.top-bar-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: linear-gradient(135deg, #5D4CDA, #7867E8);
  color: white;
  border-radius: 10px;
  font-size: 14px;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(93, 76, 218, 0.3);
  transition: transform 0.15s, box-shadow 0.15s;
}

.top-bar-cta:active {
  transform: scale(0.95);
  box-shadow: 0 1px 4px rgba(93, 76, 218, 0.3);
}

/* DEPRECATED - keeping for compatibility */
.top-bar-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.top-bar-logo-text {
  display: flex;
  align-items: center;
}

.top-bar-logo-text .logo-icon {
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, #5D4CDA, #7867E8);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 15px;
}

.top-bar-brand .top-bar-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #1f2937;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 45%;
}

.top-bar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.top-bar-btn {
  position: relative;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(93, 76, 218, 0.06);
  color: #6366f1;
  text-decoration: none;
  transition: all 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.top-bar-btn:hover,
.top-bar-btn:active {
  background: rgba(93, 76, 218, 0.15);
  transform: scale(0.95);
}

.top-bar-btn i {
  font-size: 16px;
  color: #374151;
}

.top-bar-btn .notification-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 10px;
  height: 10px;
  background: #ef4444;
  border-radius: 50%;
  border: 2px solid white;
}

/* Message Button - Special Styling */
.top-bar-btn.top-bar-messages {
  background: rgba(59, 130, 246, 0.1);
}

.top-bar-btn.top-bar-messages i {
  color: #3b82f6;
}

.top-bar-btn.top-bar-messages:hover,
.top-bar-btn.top-bar-messages:active {
  background: rgba(59, 130, 246, 0.2);
}

.top-bar-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #5D4CDA, #7867E8);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.top-bar-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.top-bar-avatar .avatar-initial {
  color: white;
  font-weight: 600;
  font-size: 12px;
}

/* ================================================
   MOBILE BOTTOM TAB BAR - iOS App Style Navigation
   Premium fintech design matching Mercury/Linear
   ALWAYS VISIBLE - Like native iOS/Android apps
   ================================================ */

/* ================================================
   MOBILE BOTTOM NAV - IMMEDIATELY VISIBLE ON MOBILE
   Like native iOS/Android apps - always at bottom
   CRITICAL: Must show on first load without scrolling
   ================================================ */

/* Base styles for bottom nav - ALWAYS visible on mobile screens */
@media (max-width: 991.98px) {
  .mobile-bottom-nav,
  nav.mobile-bottom-nav,
  #mobile-bottom-nav {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 60px !important;
    height: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    justify-content: space-around !important;
    align-items: center !important;
    z-index: 1200 !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08) !important;
    /* Hardware acceleration for smooth rendering */
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    will-change: transform !important;
  }
  
  /* Ensure body has padding for bottom nav */
  body.logged-in {
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
  }
  
  /* Body padding for both top bar AND bottom nav */
  body.logged-in {
    padding-top: calc(56px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
  }
  
  /* Main content wrapper needs top padding too */
  body.logged-in .main-wrapper,
  body.logged-in .page-wrapper,
  body.logged-in #main-content-wrapper {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  
  /* Footer needs bottom margin for nav */
  footer.pwa-footer {
    margin-bottom: 70px;
  }
  
  /* Hide bottom nav when modal is open */
  body.modal-open .mobile-bottom-nav {
    display: none !important;
  }
}

.mobile-bottom-nav .nav-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 0 4px;
  height: 100%;
  color: #374151;
  text-decoration: none;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  transition: color 0.15s ease, transform 0.15s ease;
  opacity: 1 !important;
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.mobile-bottom-nav .nav-tab i {
  font-size: 20px;
  margin-bottom: 3px;
  transition: transform 0.15s ease;
  color: inherit;
  opacity: 1 !important;
}

.mobile-bottom-nav .nav-tab span {
  line-height: 1;
  color: inherit;
  opacity: 1 !important;
}

.mobile-bottom-nav .nav-tab.active {
  color: #5D4CDA;
  font-weight: 700;
}

.mobile-bottom-nav .nav-tab.active i,
.mobile-bottom-nav .nav-tab.active span {
  color: #5D4CDA !important;
  opacity: 1 !important;
}

.mobile-bottom-nav .nav-tab.active i {
  transform: scale(1.08);
}

.mobile-bottom-nav .nav-tab:active {
  transform: scale(0.92);
}

.mobile-bottom-nav .nav-tab:active i {
  transform: scale(0.95);
}

/* ================================================
   MORE MENU - Bottom Sheet Style
   HIDDEN ON DESKTOP - Only visible on mobile
   ================================================ */

/* CRITICAL: Hide all mobile nav elements on desktop */
/* ================================================
   DESKTOP ONLY - Hide ALL mobile navigation elements
   ================================================ */
@media (min-width: 992px) {
  /* Hide ALL mobile UI elements on desktop */
  .mobile-bottom-nav,
  .more-menu-overlay,
  .more-menu-sheet,
  #mobile-bottom-nav,
  #more-menu-sheet,
  #more-menu-overlay,
  nav.mobile-bottom-nav,
  div.more-menu-sheet,
  div.more-menu-overlay,
  /* Hide mobile top bar on desktop */
  .mobile-top-bar,
  #mobile-top-bar,
  header.mobile-top-bar,
  /* Hide hamburger buttons on desktop */
  .top-bar-hamburger,
  #mobile-hamburger-btn,
  .mobile-hamburger,
  #mobile-menu-toggle,
  button.top-bar-hamburger,
  /* Hide mobile overlay on desktop */
  .mobile-overlay,
  #mobile-overlay,
  div.mobile-overlay {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
  }
  
  /* On desktop, sidebar should be visible and properly positioned */
  .sidebar {
    position: fixed !important;
    left: 0 !important;
    top: var(--nav-h) !important;
    bottom: auto !important;  /* FIX: Don't stretch to bottom - use height instead */
    height: calc(100vh - var(--nav-h)) !important;  /* Full height minus navbar */
    width: var(--side-w) !important;
    transform: translateX(0) !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    overflow-y: auto !important;  /* Scroll sidebar content if needed */
    overflow-x: hidden !important;
    z-index: 1020 !important;
  }
  
  /* Desktop content should have sidebar margin */
  .content {
    margin-left: var(--side-w) !important;
    margin-top: var(--nav-h) !important;
    min-height: calc(100vh - var(--nav-h)) !important;
    position: relative !important;
    z-index: 1 !important;  /* Below sidebar z-index */
  }
  
  /* Desktop footer should have sidebar margin and sit below content */
  footer.pwa-footer,
  footer.bg-light {
    margin-left: var(--side-w) !important;
    position: relative !important;
    z-index: 1 !important;  /* Above content, below sidebar */
  }
  
  /* Ensure no sidebar elements appear in footer area */
  .sidebar ~ footer,
  .sidebar ~ .pwa-footer {
    clear: both !important;
  }
}

/* These base styles are wrapped to only apply on MOBILE screens */
/* Desktop hiding is handled above in @media (min-width: 992px) */

.more-menu-sheet .sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid #f3f4f6;
  flex-shrink: 0;
}

.more-menu-sheet .sheet-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #111827;
}

.more-menu-sheet .sheet-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f3f4f6;
  border: none;
  color: #6b7280;
  cursor: pointer;
  transition: background 0.15s ease;
}

.more-menu-sheet .sheet-close:active {
  background: #e5e7eb;
}

.more-menu-sheet .sheet-content {
  overflow-y: auto;
  /* Extra bottom padding so last menu items are never under the fixed tab bar */
  padding: 8px 12px calc(20px + env(safe-area-inset-bottom, 0px) + 76px);
  flex: 1;
  -webkit-overflow-scrolling: touch;
}

.more-menu-sheet .menu-item {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  border-radius: 12px;
  color: #374151;
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  transition: background 0.15s ease;
  margin-bottom: 2px;
}

.more-menu-sheet .menu-item:hover,
.more-menu-sheet .menu-item:active {
  background: #f9fafb;
}

.more-menu-sheet .menu-item.active {
  background: rgba(93, 76, 218, 0.08);
  color: #5D4CDA;
}

.more-menu-sheet .menu-item.locked {
  opacity: 0.6;
}

.more-menu-sheet .menu-item i:first-child {
  width: 24px;
  font-size: 17px;
  color: #4b5563 !important;
  opacity: 1 !important;
  margin-right: 14px;
  text-align: center;
}

.more-menu-sheet .menu-item.active i:first-child {
  color: #5D4CDA;
}

.more-menu-sheet .menu-item span {
  flex: 1;
  color: #374151 !important;
  opacity: 1 !important;
}

.more-menu-sheet .menu-item.active span {
  color: #5D4CDA !important;
}

.more-menu-sheet .menu-arrow {
  font-size: 12px;
  color: #d1d5db;
  margin-left: auto;
}

.more-menu-sheet .menu-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: #5D4CDA;
  color: white;
  font-size: 11px;
  font-weight: 600;
  border-radius: 10px;
  margin-right: 8px;
}

.more-menu-sheet .menu-tag {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  margin-right: 8px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.more-menu-sheet .menu-tag.free {
  background: #dcfce7;
  color: #16a34a;
}

.more-menu-sheet .menu-tag.upgrade {
  background: linear-gradient(135deg, #5D4CDA 0%, #7867E8 100%);
  color: white;
}

.more-menu-sheet .menu-divider {
  height: 1px;
  background: #f3f4f6;
  margin: 8px 0;
}

.more-menu-sheet .menu-section-label {
  padding: 12px 16px 8px;
  font-size: 11px;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.more-menu-sheet .logout-item {
  color: #dc2626;
  margin-top: 4px;
}

.more-menu-sheet .logout-item i:first-child {
  color: #dc2626;
}

/* Prevent scroll when more menu is open - AVOID position:fixed on iOS */
body.more-menu-open {
  overflow: hidden !important;
  touch-action: none !important;
  /* CRITICAL: Do NOT use position:fixed - causes Safari scroll freeze */
}

/* ================================================
   HIDE OLD MOBILE HAMBURGER (Bottom nav replaces it)
   These rules MUST override all other hamburger rules
   ================================================ */

@media (max-width: 991.98px) {
  /* Hide old hamburger with maximum specificity */
  body .mobile-hamburger,
  body #mobile-menu-toggle,
  html body .mobile-hamburger,
  html body #mobile-menu-toggle,
  body.logged-in .mobile-hamburger,
  body.logged-in #mobile-menu-toggle,
  body.pwa-standalone .mobile-hamburger,
  body.pwa-standalone #mobile-menu-toggle,
  .navbar .mobile-hamburger,
  .app-nav .mobile-hamburger,
  .container-fluid .mobile-hamburger {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
  }
  
  /* Mobile sidebar - SLIDE OUT from left, NOT hidden with display:none */
  .sidebar,
  .sidebar#main-sidebar,
  #main-sidebar,
  body .sidebar,
  body.logged-in .sidebar {
    display: block !important;  /* MUST be block/flex for transform to work */
    visibility: visible !important;
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 280px !important;
    max-width: 85vw !important;
    transform: translateX(-100%) !important;  /* Hidden off-screen by default */
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1) !important;
    z-index: 1070 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  /* SHOW sidebar when hamburger is clicked */
  .sidebar.show,
  .sidebar.open,
  .sidebar.mobile-open,
  body.sidebar-open .sidebar {
    transform: translateX(0) !important;
    box-shadow: 8px 0 40px rgba(0, 0, 0, 0.25) !important;
  }
  
  /* Sidebar overlay - shown when sidebar is open */
  .sidebar-overlay,
  body .sidebar-overlay,
  .mobile-overlay,
  #mobile-overlay {
    display: none;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0) !important;
    z-index: 1060 !important;
    transition: background 0.3s ease !important;
    pointer-events: none !important;
  }
  
  /* Show overlay when sidebar is open */
  body.sidebar-open .mobile-overlay,
  body.sidebar-open #mobile-overlay {
    display: block !important;
    background: rgba(0, 0, 0, 0.5) !important;
    pointer-events: auto !important;
  }
  
  /* Fix main content area - no left margin since no sidebar */
  .main-content,
  .main-content-area,
  body.logged-in .main-content,
  main.main-content {
    margin-left: 0 !important;
    padding-left: 0 !important;
    width: 100% !important;
  }
  
  /* Ensure navbar doesn't have hamburger gap */
  .navbar .container-fluid,
  .app-nav .container-fluid {
    padding-left: 12px !important;
  }
}

/* ================================================
   PWA STANDALONE MODE ADJUSTMENTS
   ================================================ */

@media (display-mode: standalone) {
  .mobile-bottom-nav {
    display: flex;
  }
  
  body {
    padding-top: calc(56px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
  }
  
  .mobile-top-bar {
    display: block;
  }
}

body.pwa-standalone .mobile-bottom-nav {
  display: flex;
}

/* ================================================
   MOBILE PAGE LOADING INDICATOR
   Shows during page transitions for better UX
   ================================================ */

.mobile-page-loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99998;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0s 0.15s;
}

.mobile-page-loading.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.15s ease, visibility 0s;
}

.mobile-loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(93, 76, 218, 0.15);
  border-top-color: #5D4CDA;
  border-radius: 50%;
  animation: mobile-spin 0.8s linear infinite;
}

@keyframes mobile-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .mobile-page-loading {
    background: rgba(17, 24, 39, 0.9);
  }
  
  .mobile-loading-spinner {
    border-color: rgba(93, 76, 218, 0.3);
    border-top-color: #7867E8;
  }
}

/* ================================================
   CREDIT HEALTH MOBILE/TABLET - Vertical stack with ALL labels visible
   ================================================ */
@media (max-width: 991.98px) {
  /* Credit Health section - stack vertically on mobile/tablet */
  .card[style*="linear-gradient(135deg, #3b82f6"] .row.align-items-center {
    flex-direction: column !important;
  }
  
  /* Each column full width */
  .card[style*="linear-gradient(135deg, #3b82f6"] .col-md-3 {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    padding: 12px 16px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-left: none !important;
  }
  
  .card[style*="linear-gradient(135deg, #3b82f6"] .col-md-3:first-child {
    border-top: none !important;
  }
  
  /* CRITICAL: Ensure ALL labels are visible */
  .card[style*="linear-gradient(135deg, #3b82f6"] h5,
  .card[style*="linear-gradient(135deg, #3b82f6"] h6,
  .card[style*="linear-gradient(135deg, #3b82f6"] p,
  .card[style*="linear-gradient(135deg, #3b82f6"] strong,
  .card[style*="linear-gradient(135deg, #3b82f6"] .text-white,
  .card[style*="linear-gradient(135deg, #3b82f6"] .text-white-50 {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Section titles - readable size */
  .card[style*="linear-gradient(135deg, #3b82f6"] h5.text-white {
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 4px !important;
  }
  
  /* Grade letter */
  .card[style*="linear-gradient(135deg, #3b82f6"] div[style*="font-size: 4rem"] {
    font-size: 2.5rem !important;
  }
  
  /* Score Forecast number */
  .card[style*="linear-gradient(135deg, #3b82f6"] div[style*="font-size: 2.5rem"] {
    font-size: 2rem !important;
  }
  
  /* Savings number */
  .card[style*="linear-gradient(135deg, #3b82f6"] div[style*="font-size: 2rem"] {
    font-size: 1.5rem !important;
  }
  
  /* Labels like "Potential", "Fair Credit" */
  .card[style*="linear-gradient(135deg, #3b82f6"] p.mb-0,
  .card[style*="linear-gradient(135deg, #3b82f6"] p.mb-1 {
    font-size: 12px !important;
  }
  
  /* Card padding */
  .card[style*="linear-gradient(135deg, #3b82f6"] .card-body {
    padding: 16px !important;
  }
}

/* ================================================
   IDENTITY DOCUMENTS - Fix mobile truncation
   ================================================ */
@media (max-width: 767.98px) {
  /* Fix SmartCredit banner text wrapping */
  #smartcredit-banner .banner-content {
    flex-wrap: wrap;
    gap: 10px;
  }
  
  #smartcredit-banner .banner-text {
    flex: 1 1 auto;
    min-width: 120px;
  }
  
  #smartcredit-banner .banner-title {
    font-size: 13px !important;
    white-space: normal !important;
  }
  
  #smartcredit-banner .banner-cta {
    flex-shrink: 0;
  }
  
  /* Identity documents section - no emoji, proper layout */
  .card .d-flex.justify-content-between.align-items-start {
    flex-direction: column;
    gap: 12px;
  }
  
  /* Document upload section - responsive */
  .doc-tab-btn,
  .nav-pills .nav-link {
    padding: 8px 12px !important;
    font-size: 12px !important;
    white-space: nowrap;
  }
  
  /* Tab container scrollable */
  #docTabs,
  .nav-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  
  #docTabs::-webkit-scrollbar,
  .nav-pills::-webkit-scrollbar {
    display: none;
  }
  
  /* Identity docs header - stack properly */
  .card-body > .d-flex.justify-content-between.align-items-start:first-child {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 10px;
  }
}

/* ================================================
   FINAL MOBILE FIXES - Highest Priority Overrides
   ================================================ */

/* BOTTOM NAV - ALWAYS VISIBLE ON MOBILE (overrides all previous rules including Bootstrap) */
@media (max-width: 991.98px) {
  .mobile-bottom-nav,
  #mobile-bottom-nav,
  .mobile-bottom-nav.d-none,
  .mobile-bottom-nav.d-lg-none,
  #mobile-bottom-nav.d-none,
  #mobile-bottom-nav.d-lg-none {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1200 !important;
    height: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.06) !important;
  }
  
  /* Only hide when modal is open */
  body.modal-open .mobile-bottom-nav,
  body.modal-open #mobile-bottom-nav {
    display: none !important;
  }
  
  /* Ensure body has padding for bottom nav */
  body {
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
  }
  
  /* Content area padding */
  .content,
  main,
  .main-content,
  .page-content {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* PWA STANDALONE - Bottom nav visible */
@media (display-mode: standalone) {
  .mobile-bottom-nav,
  #mobile-bottom-nav {
    display: flex !important;
    visibility: visible !important;
  }
}

body.pwa-standalone .mobile-bottom-nav,
html.pwa-standalone .mobile-bottom-nav,
body.pwa-standalone #mobile-bottom-nav,
html.pwa-standalone #mobile-bottom-nav {
  display: flex !important;
  visibility: visible !important;
}

/* ATTACKS PAGE - Fix header text wrapping */
@media (max-width: 767.98px) {
  /* Strategy selection header */
  .card-header h5,
  .card-body h5 {
    font-size: 14px !important;
    line-height: 1.3 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  /* Strategy header with icon and text */
  .card-header .d-flex,
  .card-body > .d-flex:first-child {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  
  /* Attack strategy title container */
  .card-header .d-flex > div:first-child,
  .card-body > .d-flex:first-child > div:first-child {
    min-width: 0 !important;
    flex: 1 1 100% !important;
  }
  
  /* Attack strategy titles - readable on mobile */
  .card-header h5.mb-0,
  .attack-title,
  [class*="attack"] h5 {
    font-size: 15px !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    word-break: break-word !important;
  }
  
  /* Subtext below titles */
  .card-header p.mb-0,
  .card-body > .d-flex p.small {
    font-size: 12px !important;
    line-height: 1.4 !important;
    margin-top: 4px !important;
  }
}

/* HAMBURGER MENU - Ensure proper display */
@media (max-width: 991.98px) {
  .mobile-hamburger,
  #mobile-menu-toggle {
    display: flex !important;
    visibility: visible !important;
  }
  
  /* Reset hamburger icon - 3 lines, NOT X */
  .hamburger-icon {
    width: 20px !important;
    height: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }
  
  .hamburger-icon span {
    display: block !important;
    width: 100% !important;
    height: 2.5px !important;
    background: #1f2937 !important;
    border-radius: 2px !important;
    transition: all 0.25s ease !important;
    transform: none !important;
    opacity: 1 !important;
  }
  
  /* Only transform to X when sidebar is actually open */
  body.sidebar-open .hamburger-icon span:nth-child(1) {
    transform: rotate(45deg) translate(4px, 4px) !important;
  }
  
  body.sidebar-open .hamburger-icon span:nth-child(2) {
    opacity: 0 !important;
  }
  
  body.sidebar-open .hamburger-icon span:nth-child(3) {
    transform: rotate(-45deg) translate(4px, -4px) !important;
  }
}

/* ================================================
   CRITICAL BUG FIXES - Dec 2025
   ================================================ */

/* FIX: Footer margin on mobile - no sidebar margin */
@media (max-width: 992px) {
  footer.pwa-footer,
  footer.bg-light {
    margin-left: 0 !important;
    width: 100% !important;
    padding: 16px !important;
    margin-bottom: 80px !important; /* Space for bottom nav */
  }
  
  /* FIX: Hide sidebar completely on mobile unless explicitly opened */
  .sidebar {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 280px !important;
    max-width: 85vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transform: translateX(-100%) !important;
    z-index: 1070 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1) !important;
    padding-top: 60px !important; /* Space below top bar */
    padding-bottom: env(safe-area-inset-bottom, 20px) !important;
  }
  
  /* Sidebar VISIBLE state - any of these classes */
  .sidebar.show,
  .sidebar.open,
  .sidebar.mobile-open,
  body.sidebar-open .sidebar {
    transform: translateX(0) !important;
    box-shadow: 8px 0 30px rgba(0, 0, 0, 0.2) !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  
  /* Mobile overlay for sidebar */
  .mobile-overlay,
  #mobile-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0) !important;
    z-index: 1060 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    transition: background 0.3s ease, visibility 0s 0.3s !important;
  }
  
  .mobile-overlay.show,
  .mobile-overlay.visible,
  #mobile-overlay.show,
  body.sidebar-open .mobile-overlay,
  body.sidebar-open #mobile-overlay {
    background: rgba(0, 0, 0, 0.5) !important;
    pointer-events: auto !important;
    visibility: visible !important;
    transition: background 0.3s ease, visibility 0s !important;
  }
  
  /* Prevent body scroll when sidebar is open */
  body.sidebar-open {
    overflow: hidden !important;
  }
}

/* ================================================
   MORE MENU SHEET FIXES - Complete Rewrite
   ================================================ */
@media (max-width: 992px) {
  /* More menu sheet - positioned above bottom nav */
  .more-menu-sheet {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1085 !important;
    max-height: 75vh !important;
    min-height: 300px !important;
    background: #ffffff !important;
    border-radius: 24px 24px 0 0 !important;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.25) !important;
    transform: translateY(100%) !important;
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
  }
  
  .more-menu-sheet.open {
    transform: translateY(0) !important;
  }
  
  /* Sheet handle - drag indicator */
  .more-menu-sheet .sheet-handle {
    width: 40px !important;
    height: 5px !important;
    background: #d1d5db !important;
    border-radius: 3px !important;
    margin: 12px auto 8px !important;
    flex-shrink: 0 !important;
  }
  
  /* Sheet header */
  .more-menu-sheet .sheet-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 20px 16px !important;
    border-bottom: 1px solid #f3f4f6 !important;
    flex-shrink: 0 !important;
  }
  
  .more-menu-sheet .sheet-header h3 {
    margin: 0 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #111827 !important;
  }
  
  .more-menu-sheet .sheet-close {
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: #f3f4f6 !important;
    border: none !important;
    color: #6b7280 !important;
    font-size: 16px !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
  }
  
  .more-menu-sheet .sheet-close:active {
    background: #e5e7eb !important;
  }
  
  /* Sheet content - SCROLLABLE */
  .more-menu-sheet .sheet-content {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    padding: 8px 16px 24px !important;
    max-height: calc(75vh - 120px) !important;
  }
  
  /* Menu items */
  .more-menu-sheet .menu-item {
    display: flex !important;
    align-items: center !important;
    padding: 16px !important;
    border-radius: 14px !important;
    color: #374151 !important;
    text-decoration: none !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    transition: background 0.2s !important;
    min-height: 56px !important;
  }
  
  .more-menu-sheet .menu-item:active {
    background: #f3f4f6 !important;
  }
  
  .more-menu-sheet .menu-item.active {
    background: rgba(93, 76, 218, 0.1) !important;
    color: #5D4CDA !important;
  }
  
  .more-menu-sheet .menu-item i:first-child {
    width: 28px !important;
    font-size: 18px !important;
    color: #4b5563 !important;
    opacity: 1 !important;
    margin-right: 14px !important;
    text-align: center !important;
  }
  
  .more-menu-sheet .menu-item.active i:first-child {
    color: #5D4CDA !important;
  }
  
  .more-menu-sheet .menu-item span {
    flex: 1 !important;
    color: #374151 !important;
    opacity: 1 !important;
  }
  
  .more-menu-sheet .menu-item.active span {
    color: #5D4CDA !important;
  }
  
  .more-menu-sheet .menu-arrow {
    font-size: 14px !important;
    color: #d1d5db !important;
    margin-left: auto !important;
  }
  
  .more-menu-sheet .menu-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 24px !important;
    height: 24px !important;
    padding: 0 8px !important;
    background: #5D4CDA !important;
    color: white !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    margin-right: 8px !important;
  }
  
  .more-menu-sheet .menu-tag {
    display: inline-block !important;
    padding: 4px 10px !important;
    border-radius: 8px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    margin-right: 8px !important;
  }
  
  .more-menu-sheet .menu-tag.free {
    background: #dcfce7 !important;
    color: #16a34a !important;
  }
  
  .more-menu-sheet .menu-tag.upgrade {
    background: linear-gradient(135deg, #5D4CDA 0%, #7867E8 100%) !important;
    color: white !important;
  }
  
  .more-menu-sheet .menu-divider {
    height: 1px !important;
    background: #f3f4f6 !important;
    margin: 12px 0 !important;
  }
  
  .more-menu-sheet .menu-section-label {
    padding: 16px 16px 8px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #9ca3af !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
  }
  
  .more-menu-sheet .logout-item {
    color: #dc2626 !important;
    margin-top: 8px !important;
  }
  
  .more-menu-sheet .logout-item i:first-child {
    color: #dc2626 !important;
  }
  
  /* More menu overlay */
  .more-menu-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1080 !important;
    background: rgba(0, 0, 0, 0) !important;
    pointer-events: none !important;
    visibility: hidden !important;
    transition: background 0.3s ease, visibility 0s 0.3s !important;
  }
  
  .more-menu-overlay.visible {
    background: rgba(0, 0, 0, 0.5) !important;
    pointer-events: auto !important;
    visibility: visible !important;
    transition: background 0.3s ease, visibility 0s !important;
  }
  
  /* Prevent body scroll when more menu is open */
  body.more-menu-open {
    overflow: hidden !important;
  }
  
  /* Bottom nav z-index */
  .mobile-bottom-nav {
    z-index: 1010 !important;
  }
}

/* ================================================
   HAMBURGER BUTTON VISIBILITY FIX
   ================================================ */
@media (max-width: 992px) {
  /* Ensure hamburger is always visible and shows 3 lines by default */
  .top-bar-hamburger,
  #mobile-hamburger-btn,
  .mobile-hamburger,
  #mobile-menu-toggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: 40px !important;
    height: 40px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 8px !important;
    border-radius: 10px !important;
    transition: background 0.2s !important;
  }
  
  .top-bar-hamburger:active,
  #mobile-hamburger-btn:active,
  .mobile-hamburger:active,
  #mobile-menu-toggle:active {
    background: rgba(93, 76, 218, 0.1) !important;
  }
  
  /* Hamburger icon wrapper */
  .hamburger-icon {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    width: 20px !important;
    height: 16px !important;
  }
  
  /* Default state: 3 horizontal lines */
  .hamburger-icon span {
    display: block !important;
    width: 20px !important;
    height: 2px !important;
    background: #1f2937 !important;
    border-radius: 2px !important;
    transform-origin: center !important;
    transition: all 0.25s ease !important;
  }
  
  /* X state ONLY when sidebar is open */
  body.sidebar-open .hamburger-icon span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px) !important;
  }
  
  body.sidebar-open .hamburger-icon span:nth-child(2) {
    opacity: 0 !important;
    transform: scaleX(0) !important;
  }
  
  body.sidebar-open .hamburger-icon span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px) !important;
  }
}

/* ================================================
   FINAL OVERRIDE FIXES - HIGHEST PRIORITY
   These rules override everything above
   ================================================ */

/* ============================================
   FIX 1: MOBILE SIDEBAR - MUST SLIDE IN
   ============================================ */
@media screen and (max-width: 992px) {
  /* Base sidebar state - OFF SCREEN to the left */
  html body .sidebar,
  html body aside.sidebar,
  html body #main-sidebar,
  body.logged-in .sidebar,
  body.logged-in aside.sidebar {
    display: block !important;
    visibility: visible !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 280px !important;
    max-width: 85vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: #ffffff !important;
    z-index: 1070 !important;
    padding-top: 60px !important;
    padding-bottom: 80px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1) !important;
    box-shadow: none !important;
  }
  
  /* Sidebar OPEN state - SLIDES IN */
  html body .sidebar.show,
  html body .sidebar.open,
  html body .sidebar.mobile-open,
  html body.sidebar-open .sidebar,
  html body.sidebar-open aside.sidebar,
  html body.sidebar-open #main-sidebar {
    transform: translateX(0) !important;
    box-shadow: 8px 0 40px rgba(0, 0, 0, 0.3) !important;
  }
  
  /* Overlay - HIDDEN by default */
  html body .mobile-overlay,
  html body #mobile-overlay {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0) !important;
    z-index: 1060 !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transition: background 0.3s ease, opacity 0.3s ease !important;
  }
  
  /* Overlay - VISIBLE when sidebar open */
  html body .mobile-overlay.show,
  html body .mobile-overlay.visible,
  html body #mobile-overlay.show,
  html body.sidebar-open .mobile-overlay,
  html body.sidebar-open #mobile-overlay {
    background: rgba(0, 0, 0, 0.5) !important;
    pointer-events: auto !important;
    opacity: 1 !important;
  }
  
  /* Lock body scroll when sidebar is open */
  html body.sidebar-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
  }
}

/* ============================================
   FIX 2: MOBILE BOTTOM NAV - ALWAYS VISIBLE
   ============================================ */
@media screen and (max-width: 992px) {
  html body .mobile-bottom-nav,
  html body nav.mobile-bottom-nav,
  html body #mobile-bottom-nav {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 60px !important;
    height: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    background: #ffffff !important;
    border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1) !important;
    z-index: 1100 !important;
    justify-content: space-around !important;
    align-items: center !important;
    transform: none !important;
  }
  
  /* Ensure body has padding for bottom nav */
  html body.logged-in {
    padding-bottom: 60px !important;
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
  }
  
  /* Hide bottom nav when sidebar is open to avoid overlap */
  html body.sidebar-open .mobile-bottom-nav,
  html body.sidebar-open #mobile-bottom-nav {
    z-index: 1050 !important;
  }
}

/* ============================================
   FIX 3: DESKTOP CONTENT - NO BLEEDING
   ============================================ */
@media screen and (min-width: 993px) {
  /* Ensure desktop content area doesn't overflow/bleed */
  html body .content,
  html body main.content,
  html body [role="main"] {
    margin-left: var(--side-w, 240px) !important;
    margin-top: var(--nav-h, 72px) !important;
    max-width: calc(100vw - var(--side-w, 240px)) !important;
    overflow-x: hidden !important;
    position: relative !important;
    z-index: 1 !important;
  }
  
  /* Sidebar should not extend beyond its width */
  html body .sidebar,
  html body aside.sidebar {
    width: var(--side-w, 240px) !important;
    max-width: var(--side-w, 240px) !important;
    overflow-x: hidden !important;
  }
  
  /* Footer should have proper margin */
  html body footer.pwa-footer,
  html body footer.bg-light {
    margin-left: var(--side-w, 240px) !important;
    position: relative !important;
    z-index: 1 !important;
  }
}

/* ============================================
   FIX 4: BACK BUTTON STYLING
   ============================================ */
.top-bar-back {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
}

.top-bar-back i {
  font-size: 20px !important;
  color: #1e293b !important;
}

.top-bar-back:active {
  background: rgba(0, 0, 0, 0.05) !important;
}

/* ================================================
   FIX: HIDE CREDIT HEALTH BANNER ON MOBILE ONLY
   Targets ONLY the +142/savings section, NOT the score gauges
   ================================================ */
@media (max-width: 991.98px) {
  .credit-health-banner-section {
    display: none !important;
  }
}

/* ================================================
   FIX: ATTACK STRATEGY ACCOUNT CARDS TEXT VISIBILITY
   Scoped to account-selection-stage only
   ================================================ */
@media (max-width: 991.98px) {
  /* Account card text must be dark and readable */
  .account-selection-stage .account-card,
  .account-selection-stage .account-card h5,
  .account-selection-stage .account-card h6,
  .account-selection-stage .account-card p,
  .account-selection-stage .account-card span:not(.badge),
  .account-selection-stage .account-card label,
  .account-selection-stage .account-card strong,
  .account-selection-stage .account-card .fw-bold {
    color: #111827 !important;
  }
  
  .account-selection-stage .account-card .text-muted,
  .account-selection-stage .account-card small {
    color: #6b7280 !important;
  }
  
  /* Ensure account card backgrounds are white */
  .account-selection-stage .account-card {
    background: #ffffff !important;
  }
}

/* ================================================
   MANUAL ACCOUNT ENTRY - Mobile PWA Optimized
   ================================================ */
@media (max-width: 991.98px) {
  /* Account selection button group - stack on mobile */
  .account-selection-stage .btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }
  
  .account-selection-stage .btn-group .btn {
    flex: 1 1 calc(50% - 4px);
    min-height: 44px;
    padding: 10px 12px;
    font-size: 13px;
    border-radius: 10px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  
  /* Add Account button full width on its own row */
  .account-selection-stage .btn-group .btn:last-child {
    flex: 1 1 100%;
    background: linear-gradient(135deg, #5D4CDA 0%, #7867E8 100%) !important;
    border: none !important;
    color: white !important;
  }
  
  /* Manual account items */
  .manual-account-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 8px;
  }
  
  .manual-account-item .account-info {
    flex: 1;
  }
  
  .manual-account-item .creditor-name {
    font-weight: 600;
    color: #1f2937;
    font-size: 14px;
  }
  
  .manual-account-item .account-number {
    font-size: 12px;
    color: #6b7280;
  }
  
  .btn-remove-manual {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    background: #fef2f2;
    color: #ef4444;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
  }
  
  .btn-remove-manual:active {
    background: #fee2e2;
    transform: scale(0.95);
  }
}

/* ================================================
   MOBILE FONT VISIBILITY FIXES - CRITICAL
   Fixes gray/transparent/white text issues on mobile
   ================================================ */
@media (max-width: 991.98px) {
  
  /* ============================================
     ATTACK STRATEGIES PAGE - FONT FIXES
     ============================================ */
  
  /* Strategy card titles and descriptions - ensure dark readable text */
  .strategy-card-large h4,
  .strategy-card-large .strategy-title,
  .strategy-cards-grid h4,
  .strategy-item h6,
  .strategy-item .title {
    color: #111827 !important;
    opacity: 1 !important;
  }
  
  .strategy-card-large .description,
  .strategy-card-large p,
  .strategy-cards-grid .description,
  .strategy-item p,
  .strategy-item small,
  .strategy-item .description {
    color: #4b5563 !important;
    opacity: 1 !important;
  }
  
  /* Strategy cards - ensure white background */
  .strategy-card-large,
  .strategy-item,
  .attack-card {
    background: #ffffff !important;
    color: #111827 !important;
  }
  
  /* Attack hub section headers */
  .attack-hub .section-header,
  .attack-hub h2,
  .attack-hub h3,
  .attack-hub h4 {
    color: #111827 !important;
    opacity: 1 !important;
  }
  
  .attack-hub .section-subheader,
  .attack-hub .instruction-text,
  .attack-hub p {
    color: #4b5563 !important;
    opacity: 1 !important;
  }
  
  /* Account selection header text */
  .account-selection-header,
  .account-selection-header h2,
  .account-selection-header h3,
  .selection-instructions,
  .accounts-header {
    color: #111827 !important;
    opacity: 1 !important;
  }
  
  .accounts-subheader,
  .selection-hint {
    color: #6b7280 !important;
    opacity: 1 !important;
  }
  
  /* Metro tiles text */
  .metro-tile h5,
  .metro-tile h6,
  .metro-tile-title,
  .metro-tile .title {
    color: #111827 !important;
    opacity: 1 !important;
  }
  
  .metro-tile p,
  .metro-tile small,
  .metro-tile .description {
    color: #4b5563 !important;
    opacity: 1 !important;
  }
  
  /* ============================================
     FUNDING/OFFERS SECTION - ON GRADIENT BACKGROUNDS
     Ensure white text on purple/gradient backgrounds
     ============================================ */
  
  /* Hero sections with gradient - white text */
  .wizard-hero,
  .wizard-hero *,
  .ai-hero-banner,
  [style*="linear-gradient"][style*="6366f1"],
  [style*="linear-gradient"][style*="5D4CDA"] {
    color: #ffffff !important;
  }
  
  .wizard-hero h1,
  .wizard-hero h2,
  .wizard-hero h3,
  .wizard-hero p,
  .ai-hero-banner h1,
  .ai-hero-banner h2,
  .ai-hero-banner h3,
  .ai-hero-banner p {
    color: #ffffff !important;
    opacity: 1 !important;
  }
  
  /* Funding/offers text on dark backgrounds */
  .funding-section .hero-text,
  .offers-hero h2,
  .offers-hero h3,
  .offers-hero p,
  .funding-hero h2,
  .funding-hero p {
    color: #ffffff !important;
    opacity: 1 !important;
  }
  
  /* ============================================
     BUREAU NAMES - Ensure visible text
     ============================================ */
  
  /* Bureau names on dashboard */
  .bureau-name,
  .bureau-label,
  .bureau-mini-card .bureau-name {
    color: #64748b !important;
    opacity: 1 !important;
  }
  
  .bureau-abbrev,
  .bureau-mini-card .bureau-abbrev {
    color: #94a3b8 !important;
    opacity: 1 !important;
  }
  
  .bureau-score,
  .bureau-mini-card .bureau-score {
    color: #0f172a !important;
    opacity: 1 !important;
  }
  
  /* Bureau scores with status colors - override gray */
  .bureau-score.excellent { color: #059669 !important; }
  .bureau-score.good { color: #10b981 !important; }
  .bureau-score.fair { color: #f59e0b !important; }
  .bureau-score.poor { color: #ef4444 !important; }
  
  /* ============================================
     CONSENT/ATTESTATION PAGE - Spacing fixes
     ============================================ */
  
  .consent-page-wrapper,
  .attestation-container {
    padding: 16px !important;
    margin-top: 0 !important;
  }
  
  .consent-page-wrapper .card,
  .attestation-container .card {
    margin-bottom: 16px !important;
  }
  
  .consent-page-wrapper .card-body,
  .attestation-container .card-body {
    padding: 20px !important;
  }
  
  /* Reduce excess whitespace */
  .consent-page-wrapper .mb-4,
  .attestation-container .mb-4 {
    margin-bottom: 16px !important;
  }
  
  .consent-page-wrapper .mb-5,
  .attestation-container .mb-5 {
    margin-bottom: 20px !important;
  }
  
  /* ============================================
     FOOTER - Reduce excess gap
     ============================================ */
  
  .pwa-footer,
  footer.bg-light {
    margin-top: 20px !important;
    padding: 16px !important;
  }
  
  /* Reduce bottom margin before footer */
  .content > .container-fluid:last-child,
  .content > .container:last-child,
  main > .container-fluid:last-child,
  main > .container:last-child {
    margin-bottom: 20px !important;
  }
  
  /* ============================================
     GENERAL TEXT VISIBILITY OVERRIDES
     ============================================ */
  
  /* Fix any text with low opacity */
  .text-muted {
    color: #6b7280 !important;
    opacity: 1 !important;
  }
  
  /* Fix placeholder-like gray text */
  [style*="color: gray"],
  [style*="color:#808080"],
  [style*="color: #808080"],
  [style*="opacity: 0.5"],
  [style*="opacity:0.5"] {
    color: #4b5563 !important;
    opacity: 1 !important;
  }
  
  /* Ensure card titles are dark */
  .card-title,
  .card-header h5,
  .card-header h6,
  .card h5,
  .card h6 {
    color: #111827 !important;
    opacity: 1 !important;
  }
  
  /* Card body text */
  .card-body p,
  .card-body span:not(.badge):not(.text-success):not(.text-danger):not(.text-warning):not(.text-primary) {
    color: #374151 !important;
    opacity: 1 !important;
  }
  
  /* Form labels */
  .form-label,
  label {
    color: #374151 !important;
    opacity: 1 !important;
  }
  
  /* ============================================
     CLIENT DASHBOARD MOBILE - Bureau text fix
     ============================================ */
  
  .mobile-client-dash .bureau-name,
  .mobile-client-dash .bureau-val,
  #mobile-client-dash .bureau-name,
  #mobile-client-dash .bureau-val {
    opacity: 1 !important;
  }
  
  .mobile-client-dash .bureau-name {
    color: #64748b !important;
  }
  
  .mobile-client-dash .bureau-val {
    color: #0f172a !important;
  }
  
  .mobile-client-dash .bureau-val.excellent { color: #059669 !important; }
  .mobile-client-dash .bureau-val.good { color: #10b981 !important; }
  .mobile-client-dash .bureau-val.fair { color: #f59e0b !important; }
  .mobile-client-dash .bureau-val.poor { color: #ef4444 !important; }
  
  /* ============================================
     SCORE CIRCLE - Ensure proper alignment
     ============================================ */
  
  .score-circle,
  .score-circle-wrap {
    position: relative !important;
  }
  
  /* ONLY the container is absolute positioned in the circle */
  .score-inner {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
    z-index: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .score-num {
    display: block !important;
    color: #0f172a !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    font-size: 2rem !important;
    margin-bottom: 2px !important;
  }
  
  /* FIX: score-text is a child of score-inner, NOT absolutely positioned */
  .score-text {
    display: block !important;
    position: static !important;
    transform: none !important;
    color: #64748b !important;
    opacity: 1 !important;
    font-size: 0.65rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-top: 0 !important;
  }
  
  .score-lbl {
    display: block !important;
    color: #64748b !important;
    opacity: 1 !important;
    font-size: 0.65rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
  }
  
  /* ============================================
     ALL PAGES - Override low opacity text
     ============================================ */
  
  /* Fix any inline opacity styles */
  [style*="opacity: 0."],
  [style*="opacity:0."] {
    opacity: 1 !important;
  }
  
  /* Fix transparent and semi-transparent text */
  .text-white-50,
  .text-muted-light {
    opacity: 1 !important;
  }
  
  /* Fix gray colors that are hard to read */
  .text-gray-400,
  .text-gray-500,
  [class*="text-slate"] {
    color: #4b5563 !important;
  }
  
  /* ============================================
     ATTACKS PAGE - Ensure all text visible
     ============================================ */
  
  .attack-hub h1,
  .attack-hub h2,
  .attack-hub h3,
  .attack-hub h4,
  .attack-hub h5,
  .attack-hub h6 {
    color: #111827 !important;
    opacity: 1 !important;
  }
  
  .attack-hub p,
  .attack-hub span:not(.badge):not([class*="text-"]),
  .attack-hub label {
    color: #374151 !important;
    opacity: 1 !important;
  }
  
  .attack-hub small,
  .attack-hub .text-muted {
    color: #6b7280 !important;
    opacity: 1 !important;
  }
  
  /* Strategy card specific fixes */
  .strategy-card h4,
  .strategy-card h5,
  .strategy-card h6,
  .strategy-card-large h4,
  .strategy-item h6 {
    color: #111827 !important;
  }
  
  .strategy-card p,
  .strategy-card .description,
  .strategy-card-large .description,
  .strategy-item p {
    color: #4b5563 !important;
  }
  
  /* ============================================
     DASHBOARD PAGES - All user types
     ============================================ */
  
  /* Hero text on purple gradient - must be white */
  .dashboard-hero h1,
  .dashboard-hero h2,
  .dashboard-hero p,
  .dashboard-hero .stat-number,
  .dashboard-hero .stat-label,
  [class*="hero"] h1,
  [class*="hero"] h2,
  [class*="hero"] h3 {
    opacity: 1 !important;
  }
  
  /* Cards on white background - dark text */
  .glass-panel h3,
  .glass-panel h4,
  .glass-panel h5,
  .premium-card h3,
  .premium-card h4 {
    color: #111827 !important;
    opacity: 1 !important;
  }
  
  .glass-panel p,
  .glass-panel span:not(.badge),
  .premium-card p {
    color: #374151 !important;
    opacity: 1 !important;
  }
  
  /* ============================================
     LETTERS PAGE - Text visibility
     ============================================ */
  
  .letter-card h5,
  .letter-card h6,
  .letter-item h5,
  .letter-item h6 {
    color: #111827 !important;
    opacity: 1 !important;
  }
  
  .letter-card p,
  .letter-item p,
  .letter-card .text-muted {
    color: #4b5563 !important;
    opacity: 1 !important;
  }
  
  /* ============================================
     TRACKING PAGE - Text visibility
     ============================================ */
  
  .tracking-card h5,
  .tracking-card h6,
  .mail-card h5,
  .mail-card h6 {
    color: #111827 !important;
    opacity: 1 !important;
  }
  
  .tracking-card p,
  .mail-card p,
  .tracking-number {
    color: #374151 !important;
    opacity: 1 !important;
  }
  
  /* ============================================
     MESSAGES PAGE - Text visibility
     ============================================ */
  
  .conversation-item h6,
  .message-card h6,
  .chat-header h5 {
    color: #111827 !important;
    opacity: 1 !important;
  }
  
  .conversation-preview,
  .message-preview,
  .last-message {
    color: #4b5563 !important;
    opacity: 1 !important;
  }
  
  /* ============================================
     DOCUMENTS PAGE - Text visibility
     ============================================ */
  
  .document-card h5,
  .document-card h6,
  .doc-item h5,
  .doc-item h6 {
    color: #111827 !important;
    opacity: 1 !important;
  }
  
  .document-card p,
  .doc-item p,
  .file-info {
    color: #4b5563 !important;
    opacity: 1 !important;
  }
}

/* ================================================
   SCORE CIRCLE FIXES - Very small screens
   Prevent score number overlapping label
   ================================================ */
@media (max-width: 360px) {
  .score-circle {
    width: 100px !important;
    height: 100px !important;
  }
  
  .score-num {
    font-size: 1.5rem !important;
  }
  
  .score-lbl {
    font-size: 0.55rem !important;
  }
}

/* ================================================
   ATTESTATION/CONSENT PAGE - Consistent Styling
   Same layout for self, pro, and client users
   ================================================ */
@media (max-width: 992px) {
  /* Container spacing */
  .attestation-container,
  .consent-container,
  .consent-page-wrapper {
    padding: 1rem !important;
    margin-top: 0.5rem !important;
  }
  
  /* Card styling */
  .attestation-card,
  .consent-card,
  .consent-page-wrapper .card {
    padding: 1.25rem !important;
    border-radius: 12px !important;
    margin: 0 auto !important;
    max-width: 100% !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
  }
  
  /* Header section on gradient background */
  .attestation-header,
  .consent-header,
  .consent-page-wrapper .card-header {
    padding: 1rem 1.25rem !important;
    border-radius: 10px !important;
    margin-bottom: 1rem !important;
    background: linear-gradient(135deg, #5D4CDA 0%, #7867E8 100%) !important;
  }
  
  .attestation-header h5,
  .consent-header h5,
  .consent-page-wrapper .card-header h5 {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    margin-bottom: 0.25rem !important;
  }
  
  .attestation-header p,
  .consent-header p,
  .consent-page-wrapper .card-header p {
    font-size: 0.9rem !important;
    color: rgba(255,255,255,0.9) !important;
    -webkit-text-fill-color: rgba(255,255,255,0.9) !important;
    margin-bottom: 0 !important;
  }
  
  /* Card body content */
  .attestation-card .card-body,
  .consent-card .card-body,
  .consent-page-wrapper .card-body {
    padding: 1.25rem !important;
  }
  
  .attestation-card .card-body h6,
  .consent-card .card-body h6,
  .consent-page-wrapper .card-body h6 {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    font-weight: 600 !important;
    margin-bottom: 0.75rem !important;
  }
  
  .attestation-card .card-body p,
  .consent-card .card-body p,
  .consent-page-wrapper .card-body p {
    color: #374151 !important;
    -webkit-text-fill-color: #374151 !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
  }
  
  /* Checkbox styling */
  .consent-page-wrapper .form-check,
  .attestation-card .form-check {
    padding: 1rem !important;
    background: #f8fafc !important;
    border-radius: 10px !important;
    margin-bottom: 0.75rem !important;
  }
  
  .consent-page-wrapper .form-check-label,
  .attestation-card .form-check-label {
    color: #374151 !important;
    -webkit-text-fill-color: #374151 !important;
    font-size: 0.95rem !important;
  }
  
  /* Submit button */
  .consent-page-wrapper button[type="submit"],
  .attestation-card button[type="submit"] {
    min-height: 52px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
  }
}

/* ================================================
   LOGO SIZE - Larger and clearer everywhere
   ================================================ */

/* Mobile Logo */
@media (max-width: 992px) {
  .app-brand img,
  .app-brand .nav-logo,
  .navbar-brand img,
  .nav-logo,
  img.nav-logo {
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
    width: auto !important;
    max-width: 220px !important;
    object-fit: contain !important;
  }
  
  /* Auth pages logo (login, signup) - BIGGER */
  .auth-logo,
  .auth-page-logo,
  .login-logo,
  .signup-logo {
    height: 100px !important;
    min-height: 100px !important;
    width: auto !important;
    max-width: 320px !important;
    object-fit: contain !important;
    margin-bottom: 1.5rem !important;
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: crisp-edges !important;
  }
}

/* Desktop Logo - BIGGER */
@media (min-width: 993px) {
  .app-brand img,
  .app-brand .nav-logo,
  .navbar-brand img,
  .nav-logo,
  img.nav-logo {
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
    width: auto !important;
    max-width: 280px !important;
    object-fit: contain !important;
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: crisp-edges !important;
  }
  
  /* Auth pages logo (login, signup) - BIGGER */
  .auth-logo,
  .auth-page-logo,
  .login-logo,
  .signup-logo {
    height: 120px !important;
    min-height: 120px !important;
    width: auto !important;
    max-width: 360px !important;
    object-fit: contain !important;
    margin-bottom: 2rem !important;
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: crisp-edges !important;
  }
}

/* ================================================
   TAB AND NAVIGATION TEXT VISIBILITY FIX
   Ensure tab fonts are visible on all backgrounds
   ================================================ */
@media (max-width: 992px) {
  /* Sidebar link text - ensure visible (dark text on light background) */
  .sidebar a,
  .sidebar .nav-link,
  .sidebar-nav a,
  .sidebar-menu a,
  .nav-item a,
  .nav-link {
    color: #374151 !important;
    -webkit-text-fill-color: #374151 !important;
    opacity: 1 !important;
    font-weight: 500 !important;
  }
  
  /* Active nav link - brand color */
  .sidebar a.active,
  .sidebar .nav-link.active,
  .nav-link.active,
  .nav-item.active a {
    color: #5D4CDA !important;
    -webkit-text-fill-color: #5D4CDA !important;
    font-weight: 700 !important;
    background: #f3f4f6 !important;
  }
  
  /* Tab buttons - clear text */
  .tab-btn,
  .nav-tabs .nav-link,
  .nav-pills .nav-link,
  [role="tab"] {
    color: #475569 !important;
    -webkit-text-fill-color: #475569 !important;
    opacity: 1 !important;
    font-weight: 500 !important;
  }
  
  .tab-btn.active,
  .nav-tabs .nav-link.active,
  .nav-pills .nav-link.active,
  [role="tab"][aria-selected="true"] {
    color: #5D4CDA !important;
    -webkit-text-fill-color: #5D4CDA !important;
    font-weight: 600 !important;
  }
  
  /* Card text visibility on colored backgrounds */
  .card-header,
  .card-header *,
  [class*="bg-primary"] *,
  [class*="bg-success"] *,
  [class*="bg-info"] *,
  [class*="bg-warning"] *,
  [class*="bg-danger"] * {
    opacity: 1 !important;
  }
  
  /* Specific card instruction text fix */
  .card-header p,
  .card-header span,
  .card-header small,
  .card-header .small,
  .card-body .text-muted,
  .card .instruction-text {
    opacity: 1 !important;
  }
}

/* ================================================
   INSTALL BANNER ALIGNMENT FIX
   Better positioning for mobile install prompt
   ================================================ */
@media (max-width: 992px) {
  #pwa-install-banner {
    position: fixed !important;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    left: 16px !important;
    right: 16px !important;
    max-width: calc(100% - 32px) !important;
    margin: 0 auto !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 14px 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15) !important;
    z-index: 1150 !important;
  }
  
  #pwa-install-banner button {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
}

/* ================================================
   TRACKING PAGE MOBILE FIX
   Better alignment and spacing
   ================================================ */
@media (max-width: 992px) {
  .tracking-container {
    padding: 12px !important;
    max-width: 100% !important;
  }
  
  .tracking-container .page-header {
    text-align: center !important;
    margin-bottom: 16px !important;
  }
  
  .tracking-container .stats-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
  }
  
  .tracking-container .stat-card {
    padding: 14px !important;
    text-align: center !important;
  }
  
  .tracking-container .stat-value {
    font-size: 22px !important;
  }
  
  .tracking-container .stat-label {
    font-size: 11px !important;
  }
  
  .tracking-container .round-card {
    margin-bottom: 16px !important;
    border-radius: 12px !important;
  }
  
  .tracking-container .round-header {
    padding: 14px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }
  
  .tracking-container .bureaus-grid {
    grid-template-columns: 1fr !important;
    padding: 12px !important;
    gap: 12px !important;
  }
  
  .tracking-container .tracking-item {
    padding: 12px !important;
  }
  
  .tracking-container .tracking-number {
    font-size: 10px !important;
    word-break: break-all !important;
  }
}

/* ================================================
   MARKETPLACE RECENT APPROVALS MOBILE SCROLL
   Horizontal scrolling carousel on mobile
   ================================================ */
@media (max-width: 992px) {
  .stories-section .stories-grid,
  .recent-approvals .stories-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 14px !important;
    padding: 0 16px 12px !important;
    margin: 0 -16px !important;
  }
  
  .stories-section .story-card,
  .recent-approvals .story-card {
    flex: 0 0 280px !important;
    min-width: 280px !important;
    scroll-snap-align: start !important;
  }
}

/* ================================================
   END OF COMPREHENSIVE MOBILE REDESIGN
   ================================================ */

/* ================================================
   CRITICAL: SIDEBAR TRANSPARENCY FIX
   Ensures mobile sidebar always has solid white background
   Fix for client dashboard navigation appearing transparent
   ================================================ */
@media (max-width: 992px) {
  /* Force solid white background on mobile sidebar - MAXIMUM SPECIFICITY */
  html body .sidebar,
  html body aside.sidebar,
  html body #main-sidebar,
  html body nav.sidebar,
  aside#main-sidebar.sidebar {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    isolation: isolate !important;
  }
  
  /* When sidebar is shown, ensure it's fully opaque */
  html body .sidebar.show,
  html body .sidebar.open,
  html body .sidebar.mobile-open,
  html body aside.sidebar.show,
  html body aside#main-sidebar.show {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    opacity: 1 !important;
  }
  
  /* Sidebar content areas must be opaque - not inherit (inherit can be transparent) */
  .sidebar > *:not([style*="linear-gradient"]),
  .sidebar a:not([style*="linear-gradient"]),
  .sidebar > div:not([style*="linear-gradient"]) {
    background-color: transparent !important;
  }
  
  /* Override any potential transparent backgrounds from other CSS */
  .sidebar [style*="background: transparent"],
  .sidebar [style*="background-color: transparent"] {
    background: #ffffff !important;
    background-color: #ffffff !important;
  }
  
  /* Credits section in sidebar - purple gradient should remain */
  .sidebar > div[style*="background: linear-gradient"] {
    /* Keep the purple gradient for the credits section */
    opacity: 1 !important;
  }
  
  /* Mobile overlay (backdrop behind sidebar) */
  .mobile-overlay.show,
  #mobile-overlay.show {
    background: rgba(0, 0, 0, 0.5) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* PWA standalone mode - extra fix for sidebar */
@media (display-mode: standalone) {
  html body .sidebar,
  html body aside.sidebar,
  html body #main-sidebar,
  aside#main-sidebar.sidebar {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    opacity: 1 !important;
    isolation: isolate !important;
  }
}

/* JS fallback for PWA detection */
body.pwa-standalone .sidebar,
body.pwa-standalone aside.sidebar,
body.pwa-standalone #main-sidebar,
html.pwa-standalone .sidebar,
html.pwa-standalone aside.sidebar,
html.pwa-standalone #main-sidebar {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  opacity: 1 !important;
  isolation: isolate !important;
}

/* ================================================
   PREVENT GRAYED OUT CONTENT
   Ensures content is never stuck in grayed out state
   ================================================ */
@media (max-width: 992px) {
  /* CONTENT AREA - Never grayed when sidebar closed */
  body:not(.sidebar-open):not(.modal-open) .content,
  body:not(.sidebar-open):not(.modal-open) main,
  body:not(.sidebar-open):not(.modal-open) .main-content {
    filter: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  
  /* Body itself - never grayed */
  body:not(.sidebar-open):not(.modal-open) {
    filter: none !important;
    opacity: 1 !important;
    overflow-y: auto !important;
  }
  
  /* Remove stuck overlays when not needed */
  body:not(.sidebar-open):not(.modal-open) .mobile-overlay:not(.show),
  body:not(.sidebar-open):not(.modal-open) #mobile-overlay:not(.show) {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* ================================================
   NUCLEAR FIX: MOBILE SIDEBAR TEXT VISIBILITY
   Forces all sidebar text to be dark and fully visible
   This rule has maximum specificity to override all others
   ================================================ */
@media (max-width: 992px) {
  /* Force dark, visible text on ALL sidebar links */
  html body .sidebar a,
  html body aside.sidebar a,
  html body #main-sidebar a,
  html body aside#main-sidebar a,
  html body .sidebar .nav-link,
  html body aside.sidebar .nav-link {
    color: #111827 !important;
    opacity: 1 !important;
    font-weight: 600 !important;
    -webkit-text-fill-color: #111827 !important;
    text-shadow: none !important;
  }
  
  /* Force dark visible icons */
  html body .sidebar a i,
  html body aside.sidebar a i,
  html body #main-sidebar a i,
  html body aside#main-sidebar a i,
  html body .sidebar a .fas,
  html body .sidebar a .far,
  html body .sidebar a .fab {
    color: #374151 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #374151 !important;
  }
  
  /* Active state - white text on gradient */
  html body .sidebar a.active,
  html body aside.sidebar a.active,
  html body #main-sidebar a.active {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }
  
  html body .sidebar a.active i,
  html body aside.sidebar a.active i,
  html body #main-sidebar a.active i {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }
}

/* PWA standalone mode - same fix */
@media (display-mode: standalone) {
  html body .sidebar a,
  html body aside.sidebar a,
  html body #main-sidebar a {
    color: #111827 !important;
    opacity: 1 !important;
    font-weight: 600 !important;
    -webkit-text-fill-color: #111827 !important;
  }
  
  html body .sidebar a i,
  html body aside.sidebar a i,
  html body #main-sidebar a i {
    color: #374151 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #374151 !important;
  }
  
  html body .sidebar a.active,
  html body .sidebar a.active i {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }
}

/* JS PWA fallback - mobile only */
@media screen and (max-width: 992px) {
  body.pwa-standalone .sidebar a,
  html.pwa-standalone .sidebar a {
    color: #111827 !important;
    opacity: 1 !important;
    font-weight: 600 !important;
    -webkit-text-fill-color: #111827 !important;
  }

  body.pwa-standalone .sidebar a i,
  html.pwa-standalone .sidebar a i {
    color: #374151 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #374151 !important;
  }
}

/* ================================================
   FINAL FIX: MOBILE BOTTOM NAV - CONSOLIDATED
   Single source of truth for bottom navigation
   Overrides all previous conflicting rules
   ================================================ */
@media screen and (max-width: 992px) {
  /* Reset and consolidate bottom nav */
  html body .mobile-bottom-nav,
  html body nav.mobile-bottom-nav,
  html body #mobile-bottom-nav,
  .mobile-bottom-nav {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    margin: 0 !important;
    background: #ffffff !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08) !important;
    z-index: 9999 !important; /* Highest z-index to prevent overlap */
    justify-content: space-around !important;
    align-items: center !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    transform: none !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }
  
  /* Bottom nav items */
  html body .mobile-bottom-nav .nav-tab,
  html body .mobile-bottom-nav .bottom-nav-item,
  html body .mobile-bottom-nav a,
  .mobile-bottom-nav .nav-tab,
  .mobile-bottom-nav .bottom-nav-item,
  .mobile-bottom-nav a {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    min-height: 48px !important;
    padding: 4px 2px 6px !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    color: #6b7280 !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
  }
  
  /* Bottom nav icons */
  html body .mobile-bottom-nav .nav-tab i,
  html body .mobile-bottom-nav .bottom-nav-item i,
  html body .mobile-bottom-nav a i,
  .mobile-bottom-nav .nav-tab i,
  .mobile-bottom-nav .bottom-nav-item i,
  .mobile-bottom-nav a i {
    font-size: 20px !important;
    margin-bottom: 2px !important;
    color: inherit !important;
  }
  
  /* Active state */
  html body .mobile-bottom-nav .nav-tab.active,
  html body .mobile-bottom-nav .bottom-nav-item.active,
  html body .mobile-bottom-nav a.active,
  .mobile-bottom-nav .nav-tab.active,
  .mobile-bottom-nav .bottom-nav-item.active,
  .mobile-bottom-nav a.active {
    color: #5D4CDA !important;
  }
  
  /* Body padding for bottom nav */
  html body {
    padding-bottom: 56px !important;
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
  }
  
  /* Content area padding */
  html body .content,
  html body main,
  html body .main-content {
    padding-bottom: 72px !important;
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }
  
  /* Hide bottom nav when modal is open */
  html body.modal-open .mobile-bottom-nav,
  html body.modal-open nav.mobile-bottom-nav,
  html body.modal-open #mobile-bottom-nav {
    display: none !important;
  }
}

/* Hide bottom nav on desktop */
@media screen and (min-width: 993px) {
  .mobile-bottom-nav,
  nav.mobile-bottom-nav,
  #mobile-bottom-nav {
    display: none !important;
  }
}

/* ================================================
   FINAL FIX: MOBILE SIDEBAR MENU COLORS
   Force all sidebar menu items to have full color
   ================================================ */
@media screen and (max-width: 992px) {
  /* All sidebar links - full opacity, dark text */
  html body .sidebar a,
  html body .sidebar .nav-link,
  html body aside.sidebar a,
  html body #main-sidebar a,
  .sidebar a,
  .sidebar .nav-link {
    color: #1f2937 !important;
    opacity: 1 !important;
    filter: none !important;
    -webkit-text-fill-color: #1f2937 !important;
  }
  
  /* All sidebar icons - visible */
  html body .sidebar a i,
  html body .sidebar a .fas,
  html body .sidebar a .far,
  html body .sidebar a .fab,
  html body .sidebar a .fa,
  .sidebar a i,
  .sidebar a .fas,
  .sidebar a .far {
    color: #4b5563 !important;
    opacity: 1 !important;
    filter: none !important;
    -webkit-text-fill-color: #4b5563 !important;
  }
  
  /* Active state - purple */
  html body .sidebar a.active,
  .sidebar a.active {
    color: #5D4CDA !important;
    background: rgba(93, 76, 218, 0.1) !important;
    -webkit-text-fill-color: #5D4CDA !important;
  }
  
  html body .sidebar a.active i,
  .sidebar a.active i {
    color: #5D4CDA !important;
    -webkit-text-fill-color: #5D4CDA !important;
  }
  
  /* Special nav items - keep their colors */
  .sidebar a.dispute-nav-item,
  .sidebar a.dispute-nav-item i {
    color: #dc2626 !important;
    -webkit-text-fill-color: #dc2626 !important;
  }
  
  /* Loans highlight removed */
}