/* Tablet/Mobile Responsive Fixes - does not change desktop style */

/* Make all tables horizontally scrollable on small screens */
.table-responsive-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Pipeline cards on home page - full width on tablet */
@media (max-width: 991px) {
  .col-lg-6 { flex: 0 0 100%; max-width: 100%; }
  .display-2 { font-size: 3rem; }
}

/* Tables - prevent overflow on small screens */
@media (max-width: 768px) {
  table { font-size: 0.8rem; }
  table th, table td { padding: 4px 6px; white-space: nowrap; }
  .container { max-width: 100%; padding: 0 10px; }
  
  /* Stack breadcrumb items */
  .breadcrumb { font-size: 0.85rem; }
  
  /* Navbar adjustments */
  .navbar-brand { font-size: 1rem; }
  .nav-link { padding: 0.3rem 0.5rem; }
  
  /* Cards tighter on mobile */
  .card-body { padding: 0.75rem; }
  .card-header { padding: 0.5rem 0.75rem; font-size: 0.9rem; }
  
  /* Pipeline detail page - stack columns */
  .col-md-6 { flex: 0 0 100%; max-width: 100%; }
  
  /* Map container responsive */
  #map, .map-container, [id*="map"] { min-height: 250px; width: 100% !important; }
  
  /* Fixed-width columns - allow shrinking */
  th[style*="width: 200px"] { width: auto !important; min-width: 120px; }
  
  /* Graph containers */
  canvas, .chart-container { max-width: 100%; height: auto !important; }
}

/* Tablet portrait (768-1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .container { max-width: 100%; }
  table { font-size: 0.85rem; }
  
  /* Device health table - allow horizontal scroll */
  #device-health-table { min-width: 800px; }
  
  /* Admin pages - full width */
  .col-md-8, .col-md-10 { flex: 0 0 100%; max-width: 100%; }
}

/* Touch-friendly targets */
@media (pointer: coarse) {
  .btn { min-height: 38px; min-width: 38px; }
  .nav-link { padding: 0.5rem 0.75rem; }
  .dropdown-item { padding: 0.5rem 1rem; }
  a { min-height: 30px; display: inline-flex; align-items: center; }
  
  /* Larger checkboxes for touch */
  input[type="checkbox"] { width: 20px; height: 20px; }
  
  /* More spacing between table rows for touch */
  .table td, .table th { padding: 8px 10px; }
}

/* Prevent horizontal scroll on body */
html, body { overflow-x: hidden; max-width: 100vw; }