/* Mobile Portrait View Fix for PAYE Calculator Tables */
/* This file provides horizontal scroll support for tables on narrow screens */

@media (max-width: 768px) {
  /* Ensure body doesn't have horizontal overflow issues */
  body, html {
    overflow-x: hidden !important;
    width: 100% !important;
  }
  
  /* Make card containers allow overflow */
  .card {
    overflow: visible !important;
  }
  
  /* Create scrollable wrapper for tables - CRITICAL FIX */
  .breakdown-section {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    display: block !important;
    width: 100% !important;
    position: relative !important;
  }
  
  /* Ensure tables maintain minimum width */
  .breakdown-table,
  .summary-table {
    min-width: 600px !important;
    width: auto !important;
    display: table !important;
    font-size: 0.85rem !important;
  }
  
  /* Prevent text wrapping in table cells */
  .breakdown-table th,
  .breakdown-table td,
  .summary-table th,
  .summary-table td {
    white-space: nowrap !important;
    padding: 0.5rem !important;
  }
  
  /* Add visual indicator for scrollable content */
  .breakdown-section::after {
    content: '← Swipe to see all columns →' !important;
    display: block !important;
    text-align: center !important;
    font-size: 0.75rem !important;
    color: #666 !important;
    margin-top: 0.5rem !important;
    font-style: italic !important;
  }
}