/* ==========================================================================
   Elevated — shared mobile responsive rules for dashboard + admin/* pages
   Linked AFTER each page's inline <style> so these media-query rules win by
   source order. Scope: "functional, not broken" on phones — no overflow,
   stacked stat grids, horizontally-scrolling tables, full-width modals.
   ========================================================================== */

@media (max-width: 768px) {

  /* --- Header: keep fixed height, let the button row scroll instead of clip --- */
  .hdr-right,
  .hdr-btns {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .hdr-right::-webkit-scrollbar,
  .hdr-btns::-webkit-scrollbar { display: none; }
  .btn-hdr {
    padding: 6px 10px;
    font-size: 11px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* --- Main content gutters --- */
  .main {
    padding-left: 14px;
    padding-right: 14px;
  }

  /* --- Stat / summary grids reflow (handles 3-, 4-, 5-col variants) --- */
  .stats-row,
  .summary-row {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }

  /* --- Two-column content layouts stack --- */
  .grid-2,
  .cols {
    grid-template-columns: 1fr;
  }

  /* --- Wide data tables: keep shape, scroll inside their card --- */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-wrap table {
    min-width: 640px;
  }

  /* --- Modals fit the viewport --- */
  .modal,
  .smodal {
    width: auto;
    max-width: calc(100vw - 24px);
  }

  /* --- Fixed-width search inputs go full width --- */
  .search-box,
  .search {
    width: 100%;
  }

  /* --- Toolbars wrap --- */
  .toolbar {
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  /* One stat card per row on the narrowest phones */
  .stats-row,
  .summary-row {
    grid-template-columns: 1fr;
  }
}