/* Atlas Workspace — shared mobile overrides.
 *
 * Linked from: login.html, inventory.html, scanner-purchases.html.
 * Every rule lives behind a max-width media query, so desktop rendering is
 * byte-for-byte identical with or without this file. Selector names are the
 * shared copy-paste patterns of those pages (.toolbar, .field-row, .panel,
 * .modal, .tbl / .tbl-wrap, .login-*). When another page gets the mobile
 * treatment, add the <link> tag and wrap its wide tables in .scroll-x.
 */

@media (max-width: 768px){
  .container{padding:12px}
  nav{padding:0 14px}
  nav .subtitle{display:none}

  /* iOS Safari auto-zooms the page when a focused control is under 16px */
  input,select,textarea{font-size:16px !important}

  /* Toolbars: search boxes take a full row of their own; buttons keep wrapping */
  .toolbar input[type="text"],.toolbar .search,.search{flex:1 1 100%;min-width:0;max-width:none}

  /* Form grids stack to one column */
  .field-row,.field-row.three,.field-grid{grid-template-columns:1fr}

  /* Slide-in detail panels fill the whole screen */
  .panel{width:100vw;max-width:100vw;min-width:0;right:-100vw}
  .panel.open{right:0}
  .panel-footer,.panel-foot{flex-wrap:wrap}

  /* Modals fit the viewport */
  .modal{min-width:0;max-width:94vw;padding:18px}

  /* Tables: swipe sideways instead of squishing. .scroll-x is the wrapper for
     tables that had none; .tbl-wrap already scrolls on some pages. */
  .scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tbl-wrap{-webkit-overflow-scrolling:touch}
  .scroll-x .tbl{min-width:680px}
  .tbl th,.tbl td,.tbl-wrap th,.tbl-wrap td{padding:6px 8px;font-size:12px;white-space:nowrap}
  /* First column (the name) stays pinned while swiping */
  .scroll-x .tbl td:first-child,.tbl-wrap td:first-child{position:sticky;left:0;background:var(--white);z-index:2}
  .scroll-x .tbl th:first-child,.tbl-wrap th:first-child{position:sticky;left:0;background:var(--bg);z-index:3}

  /* Touch targets */
  .btn,.btn-login,.capture-btn{min-height:40px}
  .btn-sm,.action-btn,.panel-close{min-height:36px}
}

@media (max-width: 480px){
  .container{padding:8px}
  .panel-body{padding:14px}
  .modal{padding:14px}
  /* Footer buttons share the row evenly — easier to hit one-handed */
  .panel-footer .btn,.panel-foot .btn{flex:1 1 auto}

  /* Login page: reclaim the desktop padding */
  .login-container{padding:16px 10px}
  .login-panel{padding:24px 18px}
}