/* Phone and small-tablet layout, shared by every page. Loaded LAST in each
   page's <head> so it can adjust the page's own styles. Desktop is untouched:
   everything here is inside a max-width query.

   Rules of thumb used below:
   - inputs are 16px on phones (smaller makes iPhones zoom the page on focus);
   - buttons and list rows are at least ~40px tall (a finger, not a mouse);
   - wide tables scroll sideways INSIDE their box, never the whole page;
   - rules avoid !important on purpose, so a deliberate inline layout (for
     example the compact "Add a part | Qty | Add" row) is left as designed. */

/* ---- the top menu (all screen sizes) ---- */
.nav-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }

/* Grid children default to a minimum width of their widest content, which lets
   one wide table stretch the whole page. Let them shrink so the table scrolls
   inside its own box instead. */
.split > *, .shell > * { min-width: 0; }

/* ---- tablets and below: side-by-side panels stack ---- */
@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sticky { position: static; }
  .list { max-height: 46vh; }
}

/* ---- phones ---- */
@media (max-width: 700px) {
  body { font-size: 15px; }

  .topbar { padding: 12px 14px; gap: 6px 12px; }
  .topbar h1 { font-size: 17px; }
  .topbar-right { margin-left: 0; width: 100%; justify-content: space-between; gap: 8px 14px; }
  .nav-links { gap: 2px 14px; }
  .topbar-right a { padding: 6px 0; }

  .wrap { padding: 12px; }
  .shell { padding: 12px; gap: 14px; }
  .panel { padding: 14px; }

  /* two/three-column forms become one column */
  .row2, .row3 { grid-template-columns: 1fr; }

  input, select, textarea { font-size: 16px; }
  .btn { min-height: 42px; }
  .btn-sm { min-height: 36px; padding: 6px 12px; }
  .x-btn { font-size: 24px; padding: 2px 12px; }

  .list-item { padding: 12px; }
  .tabs { overflow-x: auto; flex-wrap: nowrap; }
  .tab { white-space: nowrap; }
  .filters .field { flex: 1 1 130px; min-width: 130px; }
  .filters .btn { flex: 1 1 auto; }
  .report-head { align-items: flex-start; }

  /* action bars: buttons share the row, messages get their own line */
  .savebar .btn { flex: 1 1 auto; }
  .savebar span { flex: 1 1 100%; }

  /* tables keep their layout and scroll sideways inside .table-scroll */
  .table-scroll { -webkit-overflow-scrolling: touch; }
  table.data input, table.report input.edit-cell { min-width: 64px; }
  table.data td, table.data th { padding-left: 4px; padding-right: 4px; }

  /* order intake: the "product | qty | Add" row stays on one line but narrower */
  .line-add { grid-template-columns: 1fr 70px auto; }

  /* Heat Report: a 17-column sheet cannot fit a phone; scroll it sideways */
  .heat-wrap { padding: 8px; }
  .datebar .field { flex: 1 1 100%; }
  .datebar .btn { flex: 1 1 auto; }

  /* sign-in card uses the whole width */
  .panel.login { width: 100%; }
}

/* very narrow phones */
@media (max-width: 380px) {
  .topbar h1 { font-size: 15px; }
  .wrap, .shell { padding: 8px; }
  .panel { padding: 12px; }
}