/* ==========================================================================
   MOBILE LAYOUT FIX V2
   Critical overrides for mobile portrait view to ensure correct column widths
   and prevent layout shifts.
   ========================================================================== */

/* Mobile Portrait Fix (max-width: 479px) */
@media (max-width: 479px) {
  /* Enable horizontal scrolling */
  .table-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  /* Table should be wider than viewport to enable scrolling */
  .table-container table,
  #beer-table, #wine-table, #spirits-table, #cider-table,
  table {
    width: auto !important;
    min-width: 100% !important;
    table-layout: auto !important;
  }

  /* Show all columns - allow horizontal scrolling */
  .table-container col:nth-child(n+5),
  .table-container th:nth-child(n+5),
  .table-container td:nth-child(n+5),
  table col:nth-child(n+5),
  table th:nth-child(n+5),
  table td:nth-child(n+5) {
    display: table-cell !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Product Column (1) - sticky, fixed width */
  .table-container th:nth-child(1), 
  .table-container td:nth-child(1),
  table th:nth-child(1), 
  table td:nth-child(1) {
    position: sticky !important;
    left: 0 !important;
    z-index: 10 !important;
    background: #ffffff !important;
    width: 130px !important;
    min-width: 130px !important;
    max-width: 130px !important;
    box-sizing: border-box !important;
  }
  
  .table-container thead th:nth-child(1),
  table thead th:nth-child(1) {
    background: #f3f4f6 !important;
    z-index: 11 !important;
  }
  
  .table-container col:nth-child(1),
  table col:nth-child(1) {
    width: 130px !important;
    min-width: 130px !important;
    max-width: 130px !important;
  }

  /* Price/100ml Column (2) - 72px */
  .table-container th:nth-child(2), 
  .table-container td:nth-child(2),
  table th:nth-child(2), 
  table td:nth-child(2) {
    min-width: 72px !important;
    width: auto !important;
    box-sizing: border-box !important;
  }
  
  .table-container col:nth-child(2),
  table col:nth-child(2) {
    width: 72px !important;
    min-width: 72px !important;
  }

  /* Compact the inner flex container for Price/100mL header */
  .table-container th:nth-child(2) .header-price,
  table th:nth-child(2) .header-price {
    line-height: 1 !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-content: center !important;
  }

  /* Blue text for Sorted Column */
  .table-container th.sorted-asc,
  .table-container th.sorted-desc,
  table th.sorted-asc,
  table th.sorted-desc {
    background-color: #f9fafb !important;
    color: #1e40af !important; /* blue-800 */
  }

  /* Ensure the inner text also inherits the blue color */
  .table-container th.sorted-asc .price-header__action,
  .table-container th.sorted-desc .price-header__action,
  table th.sorted-asc .price-header__action,
  table th.sorted-desc .price-header__action {
    color: #1e40af !important; /* blue-800 */
  }

  /* Dark mode support for sorted column - same blue as light mode */
  @media (prefers-color-scheme: dark) {
    .table-container th.sorted-asc,
    .table-container th.sorted-desc,
    table th.sorted-asc,
    table th.sorted-desc {
      background-color: #0b1220 !important; /* Match body background - no highlight */
      color: #1e40af !important; /* blue-800 - same as light mode */
    }

    .table-container th.sorted-asc .price-header__action,
    .table-container th.sorted-desc .price-header__action,
    table th.sorted-asc .price-header__action,
    table th.sorted-desc .price-header__action {
      color: #1e40af !important; /* blue-800 - same as light mode */
    }
    
    /* Dark mode sticky product column */
    .table-container th:nth-child(1),
    .table-container td:nth-child(1),
    table th:nth-child(1),
    table td:nth-child(1) {
      background: #0f172a !important;
    }
    
    .table-container thead th:nth-child(1),
    table thead th:nth-child(1) {
      background: #0b1220 !important;
    }
  }

  /* Size Column (3) - 60px */
  .table-container th:nth-child(3), 
  .table-container td:nth-child(3),
  table th:nth-child(3), 
  table td:nth-child(3) {
    min-width: 60px !important;
    width: auto !important;
    box-sizing: border-box !important;
  }
  
  .table-container col:nth-child(3),
  table col:nth-child(3) {
    width: 60px !important;
    min-width: 60px !important;
  }

  /* Stock Column (4) - 84px */
  .table-container th:nth-child(4), 
  .table-container td:nth-child(4),
  table th:nth-child(4), 
  table td:nth-child(4) {
    min-width: 84px !important;
    width: auto !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    overflow: visible !important;
  }
  
  .table-container col:nth-child(4),
  table col:nth-child(4) {
    width: 84px !important;
    min-width: 84px !important;
  }
  
  /* Columns 5-7 - allow natural sizing for horizontal scroll */
  .table-container th:nth-child(n+5),
  .table-container td:nth-child(n+5),
  table th:nth-child(n+5),
  table td:nth-child(n+5) {
    min-width: 60px !important;
    width: auto !important;
  }

  /* Ensure "Nearby stores" link stays on one line initially */
  .table-container td:nth-child(4) .check-inventory-link,
  table td:nth-child(4) .check-inventory-link {
    white-space: normal !important;
    display: inline-block !important;
    text-align: left !important;
    width: 100% !important;
  }

  /* Container padding adjustments */
  .container {
    padding: 0 0.25rem !important;
  }
}

/* Landscape Fix Block (Preserved) */
@media (min-width: 480px) and (max-width: 767px) and (orientation: landscape) {
  /* Blue text for Sorted Column in Landscape */
  .table-container th.sorted-asc,
  .table-container th.sorted-desc,
  table th.sorted-asc,
  table th.sorted-desc {
    background-color: #f9fafb !important;
    color: #1e40af !important; /* blue-800 */
  }

  /* Ensure the inner text also inherits the blue color */
  .table-container th.sorted-asc .price-header__action,
  .table-container th.sorted-desc .price-header__action,
  table th.sorted-asc .price-header__action,
  table th.sorted-desc .price-header__action {
    color: #1e40af !important; /* blue-800 */
  }

  /* Dark mode support for sorted column in landscape - same blue as light mode */
  @media (prefers-color-scheme: dark) {
    .table-container th.sorted-asc,
    .table-container th.sorted-desc,
    table th.sorted-asc,
    table th.sorted-desc {
      background-color: #0b1220 !important; /* Match body background - no highlight */
      color: #1e40af !important; /* blue-800 - same as light mode */
    }

    .table-container th.sorted-asc .price-header__action,
    .table-container th.sorted-desc .price-header__action,
    table th.sorted-asc .price-header__action,
    table th.sorted-desc .price-header__action {
      color: #1e40af !important; /* blue-800 - same as light mode */
    }
  }
}