/* Mobile-First Responsive Overrides for SPHEROID */

/* ============================================
   MOBILE RESPONSIVE FIXES
   ============================================ */

/* Base responsive adjustments */
@media screen and (max-width: 768px) {

  /* Ensure body doesn't overflow */
  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Main container fixes */
  #root {
    max-width: 100vw !important;
    width: 100vw !important;
    overflow-x: hidden !important;
    padding: 0 !important;
  }

  /* Container wrapper - absolute constraints */
  #root > * {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* FORCE all direct children to respect viewport */
  body > *,
  #root > *,
  [class*="App"] > * {
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  /* Make all containers responsive */
  .container,
  .main-container,
  .content-wrapper {
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Sidebar/Navigation - HIDE on mobile */
  .sidebar,
  .nav-sidebar,
  aside,
  nav:not(.mobile-nav),
  [class*="sidebar"],
  [class*="Sidebar"],
  [class*="navigation"],
  [class*="Navigation"] {
    display: none !important;
  }

  /* Main content area - full width on mobile */
  .main-content,
  main,
  [class*="content"],
  [class*="Content"],
  [class*="main"] {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 12px !important;
    left: 0 !important;
    right: 0 !important;
    position: relative !important;
  }

  /* Cards and panels */
  .card,
  .panel,
  .widget,
  [class*="card-"],
  [class*="panel-"] {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 12px !important;
  }

  /* Tables - make scrollable horizontally */
  table {
    display: block !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    max-width: 100% !important;
  }

  /* Grid layouts - stack on mobile */
  .grid,
  .row,
  [class*="grid-"],
  [class*="col-"],
  [class*="Grid"],
  [class*="Col"] {
    display: block !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    flex: none !important;
    float: none !important;
  }

  /* Flex containers - FORCE vertical stack on mobile */
  .flex,
  [style*="display: flex"],
  [style*="display:flex"],
  [class*="flex-"],
  [class*="Flex"],
  div[class*="css-"] {
    display: block !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }

  /* Force all child elements to be full width */
  .grid > *,
  .row > *,
  .flex > *,
  [class*="grid-"] > *,
  [class*="col-"] > *,
  [class*="flex-"] > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex-basis: 100% !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
  }

  /* Text sizing */
  h1 {
    font-size: 1.75rem !important;
  }

  h2 {
    font-size: 1.5rem !important;
  }

  h3 {
    font-size: 1.25rem !important;
  }

  /* Buttons - full width on mobile */
  button,
  .button,
  .btn {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 8px !important;
  }

  /* Forms */
  input,
  select,
  textarea {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 16px !important; /* Prevents zoom on iOS */
  }

  /* Charts and visualizations */
  canvas,
  svg,
  [class*="chart"],
  [class*="graph"] {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Status indicators and badges */
  .badge,
  .status,
  .tag {
    font-size: 0.75rem !important;
    padding: 4px 8px !important;
  }

  /* Modal dialogs */
  .modal,
  .dialog,
  [class*="modal-"] {
    width: 95% !important;
    max-width: 95vw !important;
    margin: 12px auto !important;
  }

  /* Remove fixed widths */
  [style*="width: "][style*="px"] {
    width: 100% !important;
  }

  /* Prevent text overflow */
  * {
    max-width: 100vw !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    box-sizing: border-box !important;
  }

  /* Images responsive */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Hide elements that are too wide for mobile */
  [style*="min-width"][style*="px"] {
    min-width: auto !important;
  }

  /* Carousel/Horizontal Scroll Containers */
  /* ANY container with multiple children becomes a carousel */
  [class*="chart"],
  [class*="Chart"],
  [class*="stats"],
  [class*="Stats"],
  [class*="metrics"],
  [class*="Metrics"],
  [class*="cards"],
  [class*="Cards"],
  [class*="items"],
  [class*="Items"],
  .horizontal-items {
    position: relative !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    padding: 12px !important;
  }

  /* Detect rows with multiple items - make them carousels */
  .row:has(> * + * + *),
  .grid:has(> * + * + *),
  [class*="flex"]:has(> * + * + *),
  div:has(> .card + .card),
  div:has(> [class*="card"] + [class*="card"]),
  div:has(> [class*="Card"] + [class*="Card"]) {
    position: relative !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    padding: 12px 8px !important;
  }

  /* Carousel items - each takes 85% of viewport */
  [class*="chart"] > *,
  [class*="Chart"] > *,
  [class*="stats"] > *,
  [class*="Stats"] > *,
  [class*="metrics"] > *,
  [class*="Metrics"] > *,
  [class*="cards"] > *,
  [class*="Cards"] > *,
  .horizontal-items > *,
  .row:has(> * + * + *) > *,
  .grid:has(> * + * + *) > *,
  div:has(> .card + .card) > * {
    flex: 0 0 85% !important;
    scroll-snap-align: start !important;
    min-width: 85% !important;
    max-width: 85% !important;
  }

  /* Scrollbar for carousels */
  [class*="chart"]::-webkit-scrollbar,
  [class*="Chart"]::-webkit-scrollbar,
  [class*="stats"]::-webkit-scrollbar,
  [class*="cards"]::-webkit-scrollbar,
  .horizontal-items::-webkit-scrollbar,
  .row:has(> * + * + *)::-webkit-scrollbar,
  .grid:has(> * + * + *)::-webkit-scrollbar,
  div:has(> .card + .card)::-webkit-scrollbar {
    height: 6px !important;
  }

  [class*="chart"]::-webkit-scrollbar-track,
  [class*="Chart"]::-webkit-scrollbar-track,
  [class*="stats"]::-webkit-scrollbar-track,
  [class*="cards"]::-webkit-scrollbar-track,
  .horizontal-items::-webkit-scrollbar-track,
  .row:has(> * + * + *)::-webkit-scrollbar-track,
  .grid:has(> * + * + *)::-webkit-scrollbar-track,
  div:has(> .card + .card)::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.05) !important;
    border-radius: 3px !important;
  }

  [class*="chart"]::-webkit-scrollbar-thumb,
  [class*="Chart"]::-webkit-scrollbar-thumb,
  [class*="stats"]::-webkit-scrollbar-thumb,
  [class*="cards"]::-webkit-scrollbar-thumb,
  .horizontal-items::-webkit-scrollbar-thumb,
  .row:has(> * + * + *)::-webkit-scrollbar-thumb,
  .grid:has(> * + * + *)::-webkit-scrollbar-thumb,
  div:has(> .card + .card)::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.3) !important;
    border-radius: 3px !important;
  }

  /* Add swipe hint - subtle gradient at right edge */
  [class*="chart"]::after,
  [class*="Chart"]::after,
  [class*="stats"]::after,
  [class*="cards"]::after,
  .row:has(> * + * + *)::after,
  .grid:has(> * + * + *)::after {
    content: "" !important;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 30px !important;
    background: linear-gradient(to left, rgba(255,255,255,0.8), transparent) !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }
}

/* Smaller mobile devices (phones) */
@media screen and (max-width: 480px) {

  body {
    font-size: 14px !important;
  }

  .container,
  .main-container {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Even smaller text on tiny screens */
  h1 {
    font-size: 1.5rem !important;
  }

  h2 {
    font-size: 1.25rem !important;
  }

  h3 {
    font-size: 1.1rem !important;
  }

  /* Tighter spacing */
  .card,
  .panel {
    padding: 8px !important;
    margin-bottom: 8px !important;
  }
}

/* Tablet landscape (optional - if needed) */
@media screen and (min-width: 769px) and (max-width: 1024px) {

  .container {
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Sidebar can be visible but narrower */
  .sidebar,
  aside {
    width: 200px !important;
  }

  .main-content {
    margin-left: 200px !important;
  }
}

/* Touch-friendly enhancements */
@media (hover: none) and (pointer: coarse) {

  /* Larger touch targets */
  button,
  a,
  .clickable,
  [onclick] {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 12px !important;
  }

  /* Remove hover states on touch devices */
  *:hover {
    opacity: 1 !important;
  }
}

/* Mobile Navigation Header */
@media screen and (max-width: 768px) {

  /* Create a mobile header with hamburger menu */
  body::before {
    content: "☰ SPHEROID" !important;
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: #1a1a2e !important;
    color: white !important;
    padding: 12px 16px !important;
    font-size: 18px !important;
    font-weight: bold !important;
    z-index: 9999 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
  }

  /* Push content down to account for fixed header */
  #root {
    margin-top: 48px !important;
  }

  /* If there's a header already, hide it */
  header,
  [class*="header"],
  [class*="Header"] {
    display: none !important;
  }
}

/* Utility classes */
.mobile-hidden {
  display: none !important;
}

@media screen and (min-width: 769px) {
  .mobile-only {
    display: none !important;
  }

  /* Remove mobile header on desktop */
  body::before {
    display: none !important;
  }

  #root {
    margin-top: 0 !important;
  }
}

@media screen and (max-width: 768px) {
  .desktop-only {
    display: none !important;
  }
}