/* ============================================================
   MISSION CONTROL -- Mobile additions
   Loaded globally from index.html so it lives BEFORE
   mission-control.css in the cascade. The `body` selector prefix
   on every rule bumps specificity from (0,0,1,0) to (0,0,1,1) so
   these mobile-only patches outrank the unprefixed rules in
   mission-control.css without needing !important.
   ============================================================ */

@media (max-width: 600px) {
  /* Cards extend closer to the screen edges on phone. Layout
     outer padding 1rem -> 0.5rem; matching dashboard-section
     inner padding shrink so content actually gains horizontal
     room rather than just letting the card border slide outward. */
  body .dashboard-layout {
    padding: 0 0 4.5rem;
  }

  body .dashboard-section {
    padding: 0.875rem 0.625rem 1rem;
    border-radius: 0;
    border-left: none;
    border-right: none;
    margin-left: 0;
    margin-right: 0;
  }

  /* Collapsed catering card top row used to be a single flex row
     crammed with five elements (time, customer, location badge,
     fulfillment badge, expand caret). At ~360px iPhone width the
     customer name truncated to "Je..." even for short names like
     "Jeffrey Swegle". Switched to a 2-row grid:
       row 1:  time | customer (1fr) | expand
       row 2:  loc ----------- | ft
     The customer column is 1fr so it gets all leftover horizontal
     space. Existing white-space:nowrap + ellipsis on
     .catering-order-customer still applies as a fallback for truly
     long names. Maintenance task cards reuse the same class but
     omit the ft-badge -- the grid just leaves that cell empty,
     no layout break. */
  body .catering-order-top {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "time customer expand"
      "loc  loc      ft";
    column-gap: 8px;
    row-gap: 6px;
    align-items: center;
  }

  body .catering-order-time     { grid-area: time; min-width: 0; }
  body .catering-order-customer { grid-area: customer; font-size: 0.88rem; }
  body .catering-order-loc      { grid-area: loc; justify-self: start; }
  body .catering-ft-badge       { grid-area: ft;  justify-self: end; }
  body .catering-expand-icon    { grid-area: expand; }

  /* Summary line (bagels / schmears count) no longer needs the
     75px left indent that aligned it under the time column on
     desktop -- the time column is auto-sized in the grid now. */
  body .catering-order-summary {
    padding-left: 0;
  }
}