/* Mobile Responsive Styles - Complete File */

/* Hide sidebar on mobile */
@media (max-width: 768px) {
  /* Main grid adjustments */
  .grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3.xl\:grid-cols-5 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }
  
  /* Stack cards vertically on mobile */
  .flex.flex-wrap.gap-4 > div {
    width: 100%;
  }
  
  /* Make tables scrollable */
  .overflow-x-auto {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  
  table {
    min-width: 600px;
  }
  
  /* Responsive padding */
  .p-6 {
    padding: 1rem;
  }
  
  /* Responsive text */
  .text-2xl {
    font-size: 1.5rem;
  }
  
  .text-xl {
    font-size: 1.25rem;
  }
  
  /* Hide sidebar initially on mobile */
  .w-64.bg-white {
    position: fixed;
    left: -100%;
    top: 0;
    height: 100vh;
    z-index: 50;
    transition: left 0.3s ease;
  }
  
  /* Show sidebar when active */
  .w-64.bg-white.mobile-open {
    left: 0;
  }
  
  /* Main content full width on mobile */
  .flex-1.overflow-auto {
    margin-left: 0 !important;
  }
  
  /* Mobile header */
  .mobile-header {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: white;
    border-bottom: 1px solid #e5e7eb;
    align-items: center;
    padding: 0 1rem;
    z-index: 40;
  }
  
  /* ===== SCROLL FIX ADDITIONS ===== */
  
  /* Fix main content container height and scrolling */
  .flex-1.overflow-auto {
    position: fixed !important;
    top: 60px !important; /* Account for mobile header */
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: calc(100vh - 60px) !important;
    height: calc(100dvh - 60px) !important; /* Dynamic viewport height for newer browsers */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding-top: 0 !important; /* Remove the duplicate padding-top */
  }
  
  /* Ensure content inside main container has proper spacing */
  .flex-1.overflow-auto > div {
    padding-bottom: 20px !important; /* Reduced from 100px */
    min-height: calc(100% + 1px); /* Force scrollbar if needed */
  }
  
  /* Fix for nested scrollable containers */
  .overflow-y-auto {
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth;
  }
  
  /* Ensure last items in lists are visible */
  .space-y-4 > :last-child,
  .space-y-2 > :last-child,
  .space-y-6 > :last-child,
  .grid > :last-child,
  .overflow-y-auto > :last-child {
    margin-bottom: 20px !important; /* Reduced from 50px */
  }
  
  /* Specific fixes for different sections */
  #leads-content > :last-child,
  #inventory-content > :last-child,
  #orders-content > :last-child,
  #deliveries-content > :last-child,
  #receivables-content > :last-child {
    margin-bottom: 30px !important; /* Reduced from 80px */
  }
  
  /* Fix for cards and containers to ensure proper spacing */
  .bg-white.rounded-lg.shadow,
  .bg-gray-800.rounded-lg.shadow,
  [class*="rounded-lg shadow"] {
    margin-bottom: 20px !important;
    overflow: visible !important; /* Allow overflow for horizontal scroll */
  }
  
  /* Horizontal scroll for card content */
  .bg-white.rounded-lg.shadow > div,
  .bg-gray-800.rounded-lg.shadow > div {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  /* Specific fix for leads cards and similar containers */
  .lead-card,
  .inventory-card,
  .order-card,
  [class*="card"] {
    overflow: visible !important;
  }
  
  .lead-card > div,
  .inventory-card > div,
  .order-card > div,
  [class*="card"] > div {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  /* Tab content wrapper fixes */
  .tab-content-wrapper {
    height: 100% !important;
    overflow: hidden !important;
  }
  
  .tab-inner-content {
    height: 100% !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 30px !important; /* Reduced from 100px */
  }
  
  /* Modal scroll fixes */
  [role="dialog"] .overflow-y-auto {
    max-height: calc(100vh - 100px) !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  /* ===== MODAL FIXES FOR MOBILE ===== */
  
  /* Fix modal positioning and sizing */
  .fixed.inset-0,
  [role="dialog"],
  .modal-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important; /* Dynamic viewport height */
    overflow: hidden !important;
  }
  
  /* Modal content container */
  .fixed.inset-0 > div,
  [role="dialog"] > div {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* Modal inner content - ensure it's scrollable */
  .bg-white.rounded-lg.w-full,
  .bg-gray-800.rounded-lg.w-full,
  .modal-content,
  [role="dialog"] .bg-white,
  [role="dialog"] .bg-gray-800 {
    max-height: calc(100vh - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
    margin: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  
  /* Modal header (with tabs) - fixed at top */
  .modal-header,
  [role="dialog"] .border-b:first-child,
  .bg-gray-50.px-6.py-4,
  .flex.justify-between.items-start {
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 10 !important;
  }
  
  /* Tab navigation in modals */
  .border-b nav,
  [role="tablist"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
  }
  
  /* Modal body - scrollable content */
  .modal-body,
  .flex-1.overflow-y-auto,
  [role="dialog"] .p-6,
  [role="tabpanel"] {
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 20px !important;
    min-height: 0 !important; /* Important for flex children */
  }
  
  /* Ensure lead detail modal content is visible */
  [data-modal="lead-detail"] .flex-1,
  .lead-detail-modal .flex-1 {
    display: block !important;
    overflow-y: auto !important;
    height: calc(100% - 120px) !important; /* Account for header and tabs */
  }
  
  /* Fix for dark mode modals */
  .dark [role="dialog"] .bg-white {
    background-color: rgb(31 41 55) !important;
  }
  
  /* Close button should be accessible */
  [role="dialog"] button[aria-label="Close"],
  .modal-close,
  button:has(> svg[class*="x-6"]) {
    position: absolute !important;
    right: 10px !important;
    top: 10px !important;
    z-index: 20 !important;
  }
  
  /* Reduce modal padding on mobile */
  [role="dialog"] .p-6 {
    padding: 1rem !important;
  }
  
  [role="dialog"] .px-6 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* ===== END MODAL FIXES =====
  
  /* ===== END SCROLL FIX ADDITIONS ===== */
}

/* Desktop - show sidebar normally */
@media (min-width: 769px) {
  .mobile-header {
    display: none !important;
  }
  
  .mobile-overlay {
    display: none !important;
  }
}

/* Mobile overlay */
.mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 45;
}

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

/* Responsive chart containers */
canvas {
  max-width: 100% !important;
  height: auto !important;
}

/* ===== NEW ADDITIONS FOR HORIZONTAL SCROLL FIX AND TICKER REMOVAL ===== */

/* Remove tickers completely on mobile */
@media (max-width: 768px) {
  /* Hide all ticker elements */
  .bg-gray-900.text-white.py-2,
  .bg-red-600.text-white.py-1,
  .bg-gray-800.text-white.py-2,
  div[class*="ticker"],
  /* Hide the currency/stock bar */
  div[class*="bg-gray-900"]:first-child,
  div[class*="bg-red-600"]:first-child,
  /* Hide any fixed top bars that might be tickers */
  .fixed.top-0.left-0.right-0.z-50,
  /* Hide the info bar with leads data */
  div:has(> span:contains("Leads Logged Today")),
  /* Target the parent of elements containing currency symbols */
  div:has(> *:contains("₹")):has(> *:contains("€")):has(> *:contains("$")) {
    display: none !important;
  }
  
  /* If there's a mobile header, ensure it's at top */
  .mobile-header {
    top: 0 !important;
  }
}

/* Aggressive horizontal scroll prevention - Mobile Only */
@media (max-width: 768px) {
  /* Root level prevention */
  html {
    overflow-x: hidden !important;
    width: 100% !important;
    position: relative !important;
  }
  
  body {
    overflow-x: hidden !important;
    width: 100% !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Prevent any element from causing overflow */
  * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Main containers */
  #root, #app, [id^="__next"], .app-wrapper {
    overflow-x: hidden !important;
    width: 100% !important;
  }
  
  /* Flex containers shouldn't cause overflow */
  .flex, [class*="flex"] {
    flex-wrap: wrap !important;
  }
  
  /* Grid containers */
  .grid, [class*="grid"] {
    max-width: 100% !important;
  }
  
  /* Ensure all containers stay within viewport */
  .container, .wrapper, .content, [class*="container"] {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  
  /* Specific to your app structure - ALLOW INNER HORIZONTAL SCROLL */
  .flex-1.overflow-auto {
    max-width: 100vw !important;
    overflow-x: hidden !important; /* Hide horizontal scroll on main container */
    position: relative !important;
  }
  
  /* But allow horizontal scroll in child containers */
  .flex-1.overflow-auto .overflow-x-auto,
  .flex-1.overflow-auto .overflow-x-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  /* Tables need special handling - ALLOW HORIZONTAL SCROLL */
  .overflow-x-auto {
    max-width: calc(100vw - 2rem) !important;
    margin: 0 1rem !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    position: relative !important;
  }
  
  /* Ensure tables can scroll horizontally */
  table {
    display: block !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    width: max-content !important;
    min-width: 100% !important;
  }
  
  /* Cards with horizontal scroll content */
  .bg-white.rounded-lg.shadow .overflow-x-auto,
  .bg-gray-800.rounded-lg.shadow .overflow-x-auto,
  [class*="rounded-lg shadow"] .overflow-x-auto {
    overflow-x: scroll !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth;
  }
  
  /* Leads cards specific fix */
  #leads-content .overflow-x-auto,
  [data-tab="leads"] .overflow-x-auto,
  .lead-card .overflow-x-auto {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  
  /* Inner content of scrollable areas should not be restricted */
  .overflow-x-auto > * {
    width: max-content !important;
    min-width: max-content !important;
  }
  
  /* Ensure horizontal scroll indicators are visible */
  .overflow-x-auto::-webkit-scrollbar {
    height: 8px !important;
    display: block !important;
  }
  
  .overflow-x-auto::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
    border-radius: 4px !important;
  }
  
  .overflow-x-auto::-webkit-scrollbar-thumb {
    background: #888 !important;
    border-radius: 4px !important;
  }
  
  .overflow-x-auto::-webkit-scrollbar-thumb:hover {
    background: #555 !important;
  }
  
  /* Images shouldn't overflow */
  img {
    max-width: 100% !important;
    height: auto !important;
  }
  
  /* Long text should wrap */
  p, span, div, h1, h2, h3, h4, h5, h6 {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }
  
  /* Buttons and form elements */
  button, input, select, textarea {
    max-width: 100% !important;
  }
  
  /* Fixed elements shouldn't extend beyond viewport */
  .fixed {
    max-width: 100vw !important;
  }
  
  /* Close button visible only on mobile */
  .mobile-close-btn {
    display: flex !important;
  }
}

/* Hide close button on desktop */
@media (min-width: 769px) {
  .mobile-close-btn {
    display: none !important;
  }
}

/* Additional safety measures for horizontal scroll */
@media (max-width: 768px) {
  /* Remove margin/padding that might cause issues */
  body > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Ensure nothing has negative margins on mobile */
  * {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Fix any absolute positioned elements */
  .absolute {
    left: 0 !important;
    right: 0 !important;
    max-width: 100% !important;
  }
}

/* ===== iOS SPECIFIC FIXES ===== */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 768px) {
    /* iOS specific viewport height fix */
    .flex-1.overflow-auto {
      height: calc(100vh - 60px - env(safe-area-inset-bottom)) !important;
    }
    
    /* Account for iOS bottom bar in content padding */
    .flex-1.overflow-auto > div {
      padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important; /* Reduced from 100px */
    }
  }
}

/* ===== HORIZONTAL SCROLL VISUAL INDICATORS ===== */
@media (max-width: 768px) {
  /* Minimal bottom spacing approach */
  .flex-1.overflow-auto {
    padding-bottom: 0 !important;
  }
  
  /* Use ::after pseudo element for spacing instead of padding */
  .flex-1.overflow-auto > div::after {
    content: "";
    display: block;
    height: 20px; /* Minimal space at bottom */
    width: 100%;
  }
  
  /* Add visual indicator for horizontal scroll */
  .overflow-x-auto::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 30px;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.8));
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
  }
  
  .overflow-x-auto:hover::after {
    opacity: 1;
  }
  
  /* Dark mode gradient */
  .dark .overflow-x-auto::after {
    background: linear-gradient(to right, transparent, rgba(31,41,55,0.8));
  }
  
  /* Scrollbar styling for dark mode */
  .dark .overflow-x-auto::-webkit-scrollbar-track {
    background: #374151 !important;
  }
  
  .dark .overflow-x-auto::-webkit-scrollbar-thumb {
    background: #6b7280 !important;
  }
  
  .dark .overflow-x-auto::-webkit-scrollbar-thumb:hover {
    background: #9ca3af !important;
  }
  
  /* Ensure content is not cut off */
  .overflow-x-auto > table,
  .overflow-x-auto > div {
    padding-right: 10px !important; /* Reduced from 20px */
  }
}