/* Shared responsive layer for laptop widths.
   Linked after hover.css on every page. Media queries only.

   Everything here is scoped to max-width: 1679px, so the 1680px design
   renders exactly as before. Below 1024px the page holds at 1024 and the
   browser scrolls sideways. No phone layout in this pass. */


/* ----------------------------------------------------------------
   Below the design width: release the fixed 1680px page box.

   main-surface spans the second and third grid columns, so its width is
   always viewport minus rail no matter what the third column is set to.
   The panel width therefore comes from .columns-split alone, which leaves
   sweep.html's two-column grid untouched.
   ---------------------------------------------------------------- */

@media (max-width: 1679px) {
  body {
    width: auto;
    min-width: 1024px;
  }

  .app-viewport {
    width: auto;
  }

  /* ---- Header: the agent input gives up width, the pills do not ---- */
  .header-bar {
    padding: 0 24px;
  }

  .header-left,
  .header-right {
    flex-shrink: 0;
  }

  .header-center {
    width: auto;
    max-width: 440px;
    min-width: 160px;
    flex: 1 1 auto;
    margin: 0 16px;
  }

  .stat-pill {
    font-size: 10px;
    padding: 0 12px;
  }

  /* ---- Stage strip wraps rather than overflowing ---- */
  .stage-strip {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  /* ---- Toolbar: same height and radius, smaller text, tighter gaps.
     The search field is the only control that gives up width, and the row
     wraps before any control is cut off. ---- */
  .toolbar-row,
  .toolbar-left {
    flex-wrap: wrap;
    gap: 8px;
  }

  .toolbar-right {
    gap: 8px;
    flex-shrink: 0;
  }

  .table-search {
    min-width: 140px;
  }

  .table-search-input,
  .toolbar-select,
  .toolbar-row .btn-secondary,
  .toolbar-row .btn-accent {
    font-size: 13px;
  }

  /* ---- Records table: all nine columns stay, body type drops to 14px.
     Column widths are released so each column sizes to its own content,
     which is what guarantees no cell text ever touches its neighbour and
     nothing is truncated. When the remaining width is still too narrow for
     nine columns, the card scrolls sideways inside the content column
     rather than pushing past its right edge. ---- */
  .records-table {
    font-size: 14px;
    table-layout: auto;
  }

  .cell-score {
    font-size: 14px;
  }

  .col-rank,
  .col-agency,
  .col-city,
  .col-segment,
  .col-tenure,
  .col-carriers,
  .col-score,
  .col-tier,
  .col-action,
  .col-queue,
  .col-agency-name {
    width: auto;
  }

  .table-container {
    overflow-x: auto;
  }

  /* A scrolling card becomes the header row's containing scrollport, and its
     60px offset would then push the header down over the first row. The page
     header bar is what that offset was for, so the row sits normally here. */
  .records-table thead th {
    position: static;
  }

  /* ---- Four-card rows become two rows of two ---- */
  .card-row-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ----------------------------------------------------------------
   1200 to 1679
   ---------------------------------------------------------------- */

@media (min-width: 1200px) and (max-width: 1679px) {
  .columns-split {
    grid-template-columns: minmax(0, 1fr) 400px;
  }

  .table-column,
  .sweep-column {
    padding-left: 40px;
    padding-right: 40px;
  }
}


/* ----------------------------------------------------------------
   1199 and below, which the 1024px floor clamps
   ---------------------------------------------------------------- */

@media (max-width: 1199px) {
  .columns-split {
    grid-template-columns: minmax(0, 1fr) 360px;
  }

  .table-column,
  .sweep-column {
    padding-left: 32px;
    padding-right: 32px;
  }

  /* Three-card rows join the four-card rows in wrapping to two rows */
  .card-row-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* The longest pill sets need every pixel at this width, so the header trims
     its own padding and the agent input gives up its floor. The input keeps
     shrinking until only its arrow button remains, which is what keeps all
     three pills on the bar. */
  .header-bar {
    padding: 0 16px;
  }

  .header-center {
    min-width: 0;
    margin: 0 8px;
  }

  .agent-search-box,
  .agent-input {
    min-width: 0;
  }

  .stat-pill {
    padding: 0 8px;
  }
}