/* ============================================================================
   Phone layout (1.12.9). Everything here is inside the phone-width media query,
   so the desktop view cannot change. Step 1: the app frame and Hand over to carrier.
   Steps 2+3 (1.12.13): compact header, Products as cards, Purchase Orders, PO page, Shipments, tables, pop-ups.
   ============================================================================ */
.mnav-btn,.mnav-back{display:none}

@media (max-width: 760px){
  html,body{overflow-x:hidden}
  /* ---- header: menu button, logo, then the page tabs and the search on their own rows */
  header.topbar{flex-wrap:wrap;height:auto;padding:6px 10px;gap:6px 8px;position:sticky;top:0;z-index:900}
  .mnav-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid #4a5c70;border-radius:8px;background:transparent;color:#fff;font-size:20px;flex:none;cursor:pointer}
  .topbar .app{font-size:0;gap:0;margin-right:0}
  .topbar .app .mark{font-size:13px}
  .topright{margin-left:auto;gap:6px}
  .topbar #btnExport,.topbar #btnImport{display:none}
  .topbar .searchwrap{order:5;width:100%}
  .topbar input.search{width:100% !important;height:38px}
  .topnav{order:4;width:100%;height:42px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .topnav::-webkit-scrollbar{display:none}
  .topnav button{flex:none;padding:0 12px}

  /* ---- the side menu becomes a drawer behind the ☰ button */
  .shell{display:block}
  .sidebar{position:fixed;top:0;left:0;bottom:0;width:272px;max-width:85vw;z-index:1001;transform:translateX(-102%);transition:transform .2s ease;overflow-y:auto;box-shadow:4px 0 24px rgba(0,0,0,.25)}
  body.mnav-open .sidebar{transform:none}
  body.mnav-open .mnav-back{display:block;position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:1000}
  .sidebar button{min-height:44px}
  .content{min-height:calc(100vh - 110px)}

  /* ---- finger-sized controls */
  .content .btn{min-height:40px}
  .content .btn.sm{min-height:36px}
  .content input,.content select{min-height:40px;font-size:16px}          /* 16px: no zoom on iPhone when typing */

  /* ---- page head (title, back button, actions) */
  .content .ph,.content .pghead,.content .page-head{flex-wrap:wrap;gap:8px}

  /* ================= Hand over to carrier ================= */
  .sh-wrap{padding:0 10px}
  .sh-scan{width:100%;max-width:none}
  .sh-cambtn{width:100%;min-height:56px !important;font-size:18px;margin-bottom:4px}
  #scIn{font-size:16px !important;height:44px !important}
  .sh-hvbar,.sh-hvlines,.sh-legend,.sh-asngrid,.sh-chbar,.content .pp-h{margin-left:10px !important;margin-right:10px !important}
  .sh-hvbar{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
  .sh-hvbar>*{flex:none}
  .sh-hvlines select,.sh-hvlines input{width:100% !important}
  .sh-legend{font-size:12px}
  .sh-asngrid{grid-template-columns:1fr !important;gap:10px}
  .sh-asncard .body{padding:10px 12px}
  .sh-bx{min-width:32px}
  .sh-msg{font-size:15px}
  .sh-scan .btn.ghost{border:1px solid #cbd5e1;background:#fff;min-height:44px;padding:0 14px}
  .sh-scan .vp-row{gap:8px !important}
  /* the collection buttons stay at hand at the bottom of the screen */
  #scFinish{position:fixed;left:10px;right:10px;bottom:10px;z-index:950;min-height:52px !important;font-size:17px;box-shadow:0 6px 20px rgba(0,0,0,.25)}
  .content:has(#scFinish){padding-bottom:80px}
  body:has(.fm-ov) #scFinish,body.cam-on #scFinish{display:none}
  .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* printing labels needs the PC and the label printer */
  .only-desktop{display:none !important}

  /* ================= 1.12.13 phones, steps 2 + 3 ================= */
  /* header in two short rows: ☰ logo … saved, me / page tabs / search */
  .sidebar{box-shadow:none}
  body.mnav-open .sidebar{box-shadow:4px 0 24px rgba(0,0,0,.25)}
  .topright{display:contents}
  #saveBadge{order:1;margin-left:auto;font-size:11px;padding:3px 8px}
  #userChip{order:2}
  #userChip .whotxt{display:none}
  .topnav{order:4}
  .topbar .searchwrap{order:5}

  /* page heads: title, then the buttons in rows that fit */
  .content .pagehead{padding:14px 10px 6px !important;margin:0 !important;gap:8px}
  .content .pagehead h2{font-size:22px;width:100%}
  .content .pagehead .sub{width:100%;margin:0}
  .content .pagehead .grow{display:none}
  .content .pagesub,.content .foot-note,.content .filters,.content .pager{margin-left:0 !important;margin-right:0 !important;padding-left:10px !important;padding-right:10px !important}
  .content .filters{flex-wrap:wrap;gap:8px}
  .content .sh-row2,.content .sh-cards,.content .setgrid{padding-left:10px !important;padding-right:10px !important}
  .content .soon{margin-left:10px !important;margin-right:10px !important}
  .content .filters>input,.content .filters>select{flex:1 1 100%;min-width:0 !important;width:100% !important}
  .content .tablecard{margin-left:10px !important;margin-right:10px !important;overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* Products: every product is a card (tap the name to open it); printing stays on the PC */
  #pStats{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 10px 12px}
  #pStats>*{min-width:0;margin:0;padding:8px 12px !important}
  #pStats>* b,#pStats>* .n,#pStats>* strong{font-size:20px !important}
  #v-products .tablecard{background:transparent;border:0;box-shadow:none;overflow:visible}
  #v-products table.grid,#v-products table.grid tbody{display:block;width:100%}
  #v-products table.grid thead{display:none}
  #pBody tr{display:grid;grid-template-columns:56px minmax(0,1fr) 40px;column-gap:10px;row-gap:2px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;margin-bottom:8px}
  #pBody td{display:block;height:auto !important;padding:0 !important;border:0 !important;min-width:0;overflow-wrap:anywhere;font-size:13px;line-height:1.4}
  #pBody td:nth-child(1){grid-column:1;grid-row:6;align-self:center}
  #pBody td:nth-child(2){grid-column:3;grid-row:2;text-align:center}
  #pBody td:nth-child(3){grid-column:1;grid-row:1/5}
  #pBody td:nth-child(3) .thumb{width:56px;height:56px}
  #pBody td:nth-child(4){grid-column:2;grid-row:1}
  #pBody td:nth-child(4) .pname{font-weight:600;font-size:14px}
  #pBody td:nth-child(5){grid-column:2;grid-row:2;color:var(--muted)}
  #pBody td:nth-child(6){grid-column:2/4;grid-row:3}
  #pBody td:nth-child(7){grid-column:2/4;grid-row:4}
  #pBody td:nth-child(8){grid-column:2/4;grid-row:5}
  #pBody td:nth-child(9){grid-column:2/4;grid-row:6}
  #pBody td:nth-child(6)::before{content:"SKU  ";color:var(--muted);font-family:inherit}
  #pBody td:nth-child(7)::before{content:"EAN  ";color:var(--muted);font-family:inherit}
  #pBody td:nth-child(8)::before{content:"ASIN  ";color:var(--muted);font-family:inherit}
  #pBody td:nth-child(10){display:none}
  #pBody td:nth-child(11){grid-column:3;grid-row:1;text-align:center}
  #pBody td:nth-child(11) .dots{min-width:36px;min-height:36px}
  #v-products .pager{margin:0 10px;flex-wrap:wrap}

  /* Suppliers: cards too */
  #v-suppliers .tablecard{background:transparent;border:0;box-shadow:none;overflow:visible}
  #v-suppliers table.grid,#supRecBody{display:block;width:100%}
  #v-suppliers table.grid thead{display:none}
  #supRecBody tr{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:8px}
  #supRecBody td{display:block;padding:2px 0 !important;border:0 !important;overflow-wrap:anywhere;font-size:13px}
  #supRecBody td:empty{display:none}
  #supRecBody td:nth-child(2)::before{content:"Contact: ";color:var(--muted)}
  #supRecBody td:nth-child(3)::before{content:"Email: ";color:var(--muted)}
  #supRecBody td:nth-child(4)::before{content:"Phone: ";color:var(--muted)}
  #supRecBody td:nth-child(5)::before{content:"Terms: ";color:var(--muted)}
  #supRecBody td:nth-child(6)::before{content:"Lead time: ";color:var(--muted)}
  #supRecBody td:nth-child(7)::before{content:"Components: ";color:var(--muted)}

  /* Purchase Orders list and PO page */
  .content .pagehead .btn.ghost{border:1px solid #cbd5e1;background:#fff}
  .vp-acc,.vc-tiles,.vp-bar{padding-left:10px !important;padding-right:10px !important}
  .vp-acc button{flex:1 1 40%}
  .vc-tiles{display:grid !important;grid-template-columns:1fr 1fr}
  .vc-tile{min-width:0 !important;max-width:none !important}
  .content .pagehead .btn{max-width:100%}
  .pp-top{grid-template-columns:minmax(0,1fr) !important;padding:0 10px 8px !important}
  .pp-top>*{min-width:0}
  .pp-kv{table-layout:fixed}
  .pp-kv td,.pp-kv th{overflow-wrap:anywhere;padding:7px 10px}
  .pp-addr{overflow-wrap:anywhere}
  .content .pp-runbar{margin:0 10px;flex-wrap:wrap}
  table.pp-sum{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}

  /* Shipments list: tiles two across without the icons, links under the help text */
  .sh-top{padding:14px 10px 6px !important}
  .sh-top>*{max-width:100%}
  .sh-period{margin-left:0;width:100%}
  .sh-period button{flex:1;padding:8px 6px}
  .sh-card{padding:10px !important;gap:6px !important;min-width:0}
  .sh-card .sh-ic,.sh-card .sh-chev{display:none}
  .sh-help{margin:0 10px 12px !important;flex-wrap:wrap}
  .sh-helpr{margin-left:0;white-space:normal;flex-wrap:wrap;gap:8px 14px;width:100%}
  .sh-tabs{margin:4px 10px 0 !important;flex-wrap:wrap}
  .sh-tablecard{margin:0 10px 24px !important;overflow-x:auto !important;-webkit-overflow-scrolling:touch}
  .sh-filters>input{min-width:0 !important;flex:1 1 100%}

  /* barcode label runs (PO page, Barcode runs): picture + text on top, the quantity and buttons underneath */
  .runmain{min-width:0 !important;flex:1 1 100% !important;flex-wrap:wrap;gap:10px !important}
  .runmain>*{min-width:0}
  .runqty{min-width:0 !important}
  .runcomp{min-width:0 !important;max-width:100% !important;flex:1 1 100% !important}

  /* pop-up windows fill the screen width; wide tables in them scroll sideways */
  .overlay .modal{width:auto !important;max-width:calc(100vw - 16px) !important;margin:8px}
  .overlay .modal .mbody{max-height:calc(100vh - 170px) !important;overflow:auto}
  .overlay .modal table.grid{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .overlay .modal .mfoot{flex-wrap:wrap;gap:8px}
  .content table.vp-grid{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;width:auto !important;min-width:0 !important}
  .vp-tabs{flex-wrap:wrap !important;margin-left:10px !important;margin-right:10px !important;padding-left:0 !important;padding-right:0 !important}
  /* Manual handover: one card per box, the carrier label field full width */
  .overlay .modal table.sh-hm{display:block;overflow:visible}
  table.sh-hm thead{display:none}
  table.sh-hm tbody{display:block}
  table.sh-hm tr{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:2px 8px;border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin-bottom:8px;background:#fff}
  table.sh-hm td{display:block;padding:0 !important;border:0 !important;white-space:normal;min-width:0;overflow-wrap:anywhere}
  table.sh-hm td:nth-child(1){grid-row:1/3;align-self:center}
  table.sh-hm td:nth-child(1) input{width:24px;height:24px}
  table.sh-hm td:nth-child(2){grid-column:2;font-weight:700}
  table.sh-hm td:nth-child(3){grid-column:2/4;font-size:12px;color:var(--muted)}
  table.sh-hm td:nth-child(4){grid-column:2;font-size:13px}
  table.sh-hm td:nth-child(5){grid-column:3;grid-row:1}
  table.sh-hm td:nth-child(5)::after{content:" units";color:var(--muted)}
  table.sh-hm td:nth-child(6){grid-column:1/4}
  table.sh-hm td:nth-child(6) input{width:100% !important;margin-top:4px}
  table.sh-hm [data-hcm]{max-width:none}
  table.sh-hm td:nth-child(7){grid-column:1/4;font-size:12px;color:var(--muted)}
}