/* JetLog Mobile Responsiveness — mobile.css
   Shared responsive fixes for all staff pages.
   Load AFTER nav.css, theme.css, chrome.css */

/* ===== Tablet (≤768px) ===== */
@media (max-width: 768px) {

  /* Tables: horizontal scroll */
  .mobile-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .mobile-table-wrap table { min-width: 600px; }

  /* Slide panels: full width */
  .slide-panel,
  [class*="slide-panel"],
  [style*="width: 480px"],
  [style*="width:480px"],
  [style*="width: 500px"],
  [style*="width:500px"],
  [style*="width: 520px"],
  [style*="width:520px"],
  [style*="width: 560px"],
  [style*="width:560px"],
  [style*="width: 600px"],
  [style*="width:600px"] {
    width: 100% !important;
    max-width: 100vw !important;
  }

  /* Modals: near-full width */
  .modal-content,
  [class*="modal-content"],
  [class*="modal-mobile-fs"] {
    width: 95vw !important;
    max-width: 95vw !important;
    max-height: 90vh;
    overflow-y: auto;
  }

  /* Buttons: minimum tap target */
  button, .btn, [class*="btn-"],
  a.btn, a[class*="btn-"],
  input[type="submit"], input[type="button"] {
    min-height: 44px;
  }

  /* Filter bars: wrap */
  .filter-bar, .filters, .match-bar,
  [class*="filter-row"], [class*="toolbar"] {
    flex-wrap: wrap !important;
    gap: 8px;
  }

  /* Tab bars: horizontal scroll */
  .tab-bar, .tabs, [class*="tab-bar"],
  [role="tablist"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
  }
  .tab-bar::-webkit-scrollbar, .tabs::-webkit-scrollbar,
  [class*="tab-bar"]::-webkit-scrollbar,
  [role="tablist"]::-webkit-scrollbar { display: none; }

  /* Fixed-width inputs */
  input, select, textarea {
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Page heading area */
  .page-header, [class*="page-header"] {
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* ===== Phone (≤480px) ===== */
@media (max-width: 480px) {

  /* Stat/KPI grids: force 2-col */
  .stats, .stats-grid, .stat-grid,
  [class*="stats-grid"], [class*="stat-grid"],
  [id="statGrid"], [id="statsGrid"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* Button groups: stack vertically */
  .btn-group, .button-group, .actions,
  [class*="btn-group"], [class*="button-group"] {
    flex-direction: column;
  }

  /* Headings: smaller */
  h1 { font-size: 1.25rem !important; }
  h2 { font-size: 1.1rem !important; }
  h3 { font-size: 1rem !important; }

  /* Cards in grids: 1 column max */
  .card-grid {
    grid-template-columns: 1fr !important;
  }
}