/* ─────────────────────────────────────────────────────────────────────────────────────────
   Mobile and tablet layer.

   WHY THIS IS A SEPARATE FILE, LOADED LAST

   Every page carries its own <style> block in <head>, after the link to style.css. That means
   a page-local rule beats a same-specificity rule in the shared sheet, and a mobile fix
   written into style.css would be silently overridden on exactly the pages that most need it.
   This file is linked after each page's <style>, so it wins those ties without anyone having
   to reach for !important.

   THE ONE RULE THIS FILE FOLLOWS

   Every declaration lives inside a max-width media query. Nothing here can change the desktop
   layout, because nothing here applies above the breakpoint. That is the whole safety
   argument: the redesign cannot break the dashboard people use at their desks, and a bad rule
   can only ever be wrong on a narrow screen. Do not add an unconditional rule to this file --
   it belongs in style.css, where it is reviewed against the desktop design.

   !important appears in three rules, each commented where it sits. One overrides an inline
   style attribute, which no stylesheet can outrank on specificity alone. The other two
   override page-local rules that are themselves inside a media query: a page's own
   `@media (max-width: 650px)` block and this file's `@media (max-width: 420px)` block both
   apply on a small phone, and with equal specificity the later file would win by source order
   only if the page did not re-declare the property at a narrower breakpoint. Several do.

   BREAKPOINTS
     1024px  the sidebar has already become a drawer (style.css); tablet corrections
      640px  phone
      420px  small phone -- one column, everywhere
   ───────────────────────────────────────────────────────────────────────────────────────── */

/* ── Tablet and below ─────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* A grid or flex child refuses to shrink below its content by default, so one wide table or
     one long unbroken string pushes the whole document sideways and the page scrolls as a
     unit. These two lines are what keep the horizontal scrolling INSIDE the element that is
     actually too wide -- the table already has its own .table-responsive wrapper for that. */
  .content-wrapper > * { min-width: 0; max-width: 100%; }
  .main-content { min-width: 0; }

  /* Charts size themselves from their canvas attributes, which are pixel counts. */
  canvas, img, svg, video { max-width: 100%; }

  /* Momentum scrolling, and a scrollbar that does not eat a row of the table underneath. */
  .table-responsive { -webkit-overflow-scrolling: touch; }
}

/* ── Phone ────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {

  /* Filters: one control per row. `minmax(180px, 1fr)` already collapses to one column at this
     width, but the actions cell is declared `grid-column: span 2` on several pages and spans
     into a column that no longer exists, which leaves it overflowing its track. */
  .filters-grid { grid-template-columns: 1fr; }
  .filters-grid .filter-actions,
  .form-group.filter-actions { grid-column: 1 / -1; }

  /* Filter buttons two-up rather than four across a 375px screen, where four would each be
     about 80px and clip their own labels. They wrap to a second row instead of overflowing. */
  .filter-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .filter-actions .btn { flex: 1 1 calc(50% - 4px); min-width: 0; white-space: nowrap; }

  /* Toolbars: heading on one line, controls on the next, rather than a squeezed row. */
  .users-toolbar, .unit-toolbar, .dash-table-header { flex-wrap: wrap; gap: 10px; }
  .users-toolbar > *, .unit-toolbar > *, .dash-table-header > * { min-width: 0; }
  .users-search { width: 100%; }
  .users-search input, .users-search select { flex: 1 1 140px; min-width: 0; }

  /* Form grids to a single column. Two 1fr columns on a phone gives each field about 170px,
     which is not enough for a date, an email, or a 20-digit SIM number. */
  .create-user-grid, .cp-grid { grid-template-columns: 1fr; }

  /* Tab strips scroll sideways instead of wrapping into a second row that shifts the content
     below it every time a tab is selected. */
  .cp-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .cp-tabs::-webkit-scrollbar { display: none; }
  .cp-tab { flex: 0 0 auto; }

  /* Touch targets. 28px icon buttons are fine for a mouse and too small for a thumb; the
     usual floor is around 44px, and 34 with the padding around it lands close enough without
     making the action rows taller than the rows they belong to. */
  .btn-icon { width: 34px; height: 34px; }
  .btn-icon svg { width: 17px; height: 17px; }
  .table-actions .btn-icon { width: 32px; height: 32px; }
  .table-actions { gap: 6px; }
  .btn-sm { min-height: 34px; }

  /* Modals become a bottom sheet: full width, anchored to the bottom edge where a thumb is,
     with the header pinned so the close button is always reachable in a long form.
     !important on max-width because several pages set it inline (devices.html asks for
     1180px) and an inline style outranks any stylesheet. */
  .modal-backdrop { align-items: flex-end; }
  .modal {
    width: 100%;
    max-width: 100% !important;
    max-height: 92vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .modal-header {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--elevated-bg);
  }

  /* The profile menu hangs off the right edge of a topbar that is now only a phone wide. */
  .profile-dropdown {
    right: 0;
    left: auto;
    max-width: calc(100vw - 24px);
  }

  /* One card per row. devices.html steps 4 -> 2 at 1180px and stops there, so a phone gets two
     cards of about 170px each and every line inside them ellipsizes to nothing. */
  .device-grid { grid-template-columns: 1fr; }

  /* Pagination deliberately has no rule here. It is built from template literals with inline
     `flex-wrap: wrap; justify-content: center` already on the container, so there is nothing
     to fix and no class to hang a fix on. */
}

/* ── Small phone ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 420px) {

  /* Label above value, not beside it. The label column is a fixed 120px, which on a 375px
     screen leaves about 200px for values that are routinely longer than that -- a 20-digit SIM
     serial, an IMEI, a full timestamp. Stacked, each gets the whole width.
     !important because the detail grid is re-declared per page with equal specificity inside
     the page's own <style>, at a breakpoint that does not know about this one. */
  .detail-list { grid-template-columns: 1fr !important; gap: 0 !important; }
  .detail-list dt { margin-top: 10px; }
  .detail-list dd { margin-bottom: 2px; }
  .detail-list dd.full { grid-column: 1 / -1; }
  .detail-section { margin-top: 14px; }

  /* Buttons one per row once two would each be under about 140px. */
  .filter-actions .btn { flex: 1 1 100%; }

  /* Stat tiles two-up rather than three, so the numbers are not the widest thing in them. */
  .dash-stats, .dash-ops, .analytics-kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }
}