/* Oh! Mexico - Mobile Responsive Styles */
/* Viewport meta ensures proper scaling on mobile devices */

@media (max-width: 768px) {

  /* === GLOBAL === */
  #root {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  #root > div {
    max-width: 100vw !important;
  }
  #root > div > div:nth-child(3) {
    overflow-x: hidden !important;
  }

  /* === HEADER === */
  #root > div > div:first-child {
    padding: 8px 12px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  #root > div > div:first-child img {
    max-height: 36px !important;
  }
  #root > div > div:first-child span {
    font-size: 12px !important;
  }

  /* === TAB NAVIGATION (CRITICAL FIX) === */
  #root > div > div:nth-child(2) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    flex-wrap: nowrap !important;
    padding: 0 4px !important;
    gap: 2px !important;
  }
  #root > div > div:nth-child(2) > button {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    font-size: 11px !important;
    padding: 8px 10px !important;
    min-width: auto !important;
  }
  #root > div > div:nth-child(2) > button svg {
    width: 14px !important;
    height: 14px !important;
  }

  /* === CONTENT AREA === */
  #root > div > div:nth-child(3) {
    padding: 12px 8px !important;
  }
  #root > div > div:nth-child(3) > div {
    gap: 16px !important;
  }

  /* === GRID LAYOUTS: Force single column === */
  /* Two-column grids (charts, sections) */
  #root div[style*="1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Three-column grids (location cards) */
  #root div[style*="repeat(3"] {
    grid-template-columns: 1fr !important;
  }

  /* Four-column grids (content type cards) */
  #root div[style*="repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Content table grid - horizontal scroll wrapper */
  #root div[style*="repeat(5, 70px)"] {
    grid-template-columns: auto 1fr repeat(5, 60px) 60px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    font-size: 11px !important;
    min-width: 600px !important;
  }

  /* Calendar 7-day grid - horizontal scroll */
  #root div[style*="repeat(7"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    min-width: 700px !important;
  }

  /* Calendar 5-row grid */
  #root div[style*="repeat(5, 1fr)"] {
    grid-template-columns: repeat(5, 1fr) !important;
  }

  /* === FLEX ROW CONTAINERS: Allow wrapping === */
  #root > div > div:nth-child(3) div[style*="display: flex"] {
    flex-wrap: wrap !important;
  }

  /* === FILTER PILLS / HORIZONTAL SCROLL === */
  #root > div > div:nth-child(3) div[style*="gap: 8px"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    padding-bottom: 4px !important;
  }
  #root > div > div:nth-child(3) div[style*="gap: 8px"] > button {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  /* === CALENDAR SCROLL CONTAINER === */
  #root > div > div:nth-child(3) > div > div:last-child {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* === TYPOGRAPHY SCALING === */
  #root > div > div:nth-child(3) h2 {
    font-size: 18px !important;
  }
  #root > div > div:nth-child(3) h3 {
    font-size: 15px !important;
  }

  /* === CARDS: Prevent overflow === */
  #root > div > div:nth-child(3) div[style*="border-radius"] {
    overflow: hidden !important;
    word-wrap: break-word !important;
  }

  /* === IMAGES: Responsive === */
  #root > div > div:nth-child(3) img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* === BUTTONS: Touch-friendly sizing === */
  #root > div > div:nth-child(3) button {
    min-height: 36px !important;
    font-size: 12px !important;
  }

  /* === PLATFORM CARDS (Reputation) === */
  #root > div > div:nth-child(3) div[style*="flex: 1"] {
    min-width: 0 !important;
    flex: 1 1 calc(50% - 8px) !important;
  }

  /* === HIDE SCROLLBAR but keep functional === */
  #root > div > div:nth-child(2)::-webkit-scrollbar {
    height: 3px !important;
  }
  #root > div > div:nth-child(2)::-webkit-scrollbar-thumb {
    background: #C4622D60 !important;
    border-radius: 3px !important;
  }

  /* === FOOTER === */
  #root > div > div:nth-child(4) {
    padding: 8px 12px !important;
    font-size: 11px !important;
    flex-wrap: wrap !important;
    text-align: center !important;
  }


  /* === CONTENIDO TAB: Data Table Scroll === */
  /* Table parent container needs overflow-x scroll */
  #root div[style*="repeat(5, 70px)"] {
    font-size: 10px !important;
    min-width: 500px !important;
  }
  /* Table wrapper: the card that contains the table */
  #root > div > div:nth-child(3) > div > div:first-child {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* === CONTENIDO TAB: Post Cards === */
  /* Post cards (image + text) inside Top Posts / Competencia */
  #root > div > div:nth-child(3) div[style*="border-radius"] div[style*="gap: 12px"] {
    flex-direction: column !important;
  }
  #root > div > div:nth-child(3) div[style*="border-radius"] img[style*="border-radius"] {
    width: 100% !important;
    height: 120px !important;
    object-fit: cover !important;
  }

  /* === CONTENIDO TAB: Content Type Cards (Reels/Carousels/Feed/Stories) === */
  #root div[style*="repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  #root div[style*="repeat(4, 1fr)"] > div {
    padding: 12px 8px !important;
  }
  #root div[style*="repeat(4, 1fr)"] > div p {
    font-size: 11px !important;
  }

  /* === FIX: Don't wrap post card rows (image + text side by side) === */
  #root > div > div:nth-child(3) div[style*="border-radius"][style*="padding"] > div[style*="display: flex"]:not([style*="column"]) {
    flex-wrap: nowrap !important;
  }

}

/* Small phones (iPhone SE, etc) */
@media (max-width: 375px) {
  #root > div > div:nth-child(2) > button {
    font-size: 10px !important;
    padding: 6px 8px !important;
  }
  #root > div > div:nth-child(3) {
    padding: 8px 4px !important;
  }
  #root > div > div:nth-child(3) > div {
    gap: 12px !important;
  }
  #root > div > div:nth-child(3) div[style*="repeat(2"] {
    grid-template-columns: 1fr !important;
  }
}