/* ---------------------------------------------------------------------------
   Workflow VF GCC — PWA / mobile layer (test build)
   Loaded AFTER style.css. style.css is untouched.

   Desktop (> 760px): nothing here changes the Deploy-14 sidebar layout.
   The only rules outside the mobile media query hide the new mobile-only
   controls (drawer close, back, refresh, assistance shortcut) on desktop.
   --------------------------------------------------------------------------- */

/* Mobile-only controls: hidden on desktop */
.sideClose,.pwaBack,.pwaRefresh,.pwaAssistFab{display:none}

/* Installed app (standalone): no accidental text selection / callouts on chrome */
@media (display-mode: standalone){
  .mobileBar,.sidebar{-webkit-user-select:none;user-select:none}
  body{overscroll-behavior-y:none}
}

@media (max-width:760px){

  /* ---- Page never scrolls sideways; wide tables scroll inside themselves -- */
  html,body{max-width:100%}
  .content{overflow-x:clip;min-width:0}
  .content main{min-width:0;
    padding-left:calc(14px + env(safe-area-inset-left,0px));
    padding-right:calc(14px + env(safe-area-inset-right,0px))}
  img,svg,video,iframe{max-width:100%}
  .tableScroll{-webkit-overflow-scrolling:touch;max-width:100%}
  .itemsTable{font-size:14px}
  .itemsTable td,.itemsTable th{padding:8px 7px}

  /* The sticky mobile bar owns the top safe area on app pages (avoids a
     double gap under the iPhone status bar / notch). */
  html:has(body.shell){padding-top:0;padding-bottom:0}

  /* ---- Top bar ---------------------------------------------------------- */
  .mobileBar{gap:8px;
    padding-left:calc(12px + env(safe-area-inset-left,0px));
    padding-right:calc(12px + env(safe-area-inset-right,0px))}
  .navBtn{width:44px;height:44px;flex:none;background:var(--card);padding:0;font:inherit}
  .navBtn svg{width:22px;height:22px}
  .pwaRefresh{display:flex;margin-left:auto;color:var(--text)}
  .pwaBack:not([hidden]){display:flex;color:var(--text)}
  .mobileTitle{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pwaRefresh.spin svg{animation:pwaSpin .8s linear infinite}
  @keyframes pwaSpin{to{transform:rotate(360deg)}}

  /* ---- Drawer (the Deploy-14 sidebar, slid in from the left) ------------- */
  .sidebar{width:min(84vw,300px);
    padding-left:calc(14px + env(safe-area-inset-left,0px));
    overscroll-behavior:contain;overflow-y:auto}
  .sidebar{box-shadow:none}               /* no shadow bleeding in while closed */
  .navToggle:checked ~ .sidebar{box-shadow:0 0 40px rgba(0,0,0,.4)}
  .navToggle:checked ~ .navScrim{-webkit-tap-highlight-color:transparent}
  .sideBrand{position:relative;padding-right:48px}
  .sideClose{display:flex;align-items:center;justify-content:center;
    position:absolute;top:-6px;right:0;width:44px;height:44px;margin:0;
    border-radius:10px;border:1px solid var(--border);color:var(--text);cursor:pointer}
  .sideClose svg{width:20px;height:20px}
  .sideLink{min-height:48px;padding:12px 14px;font-size:16px}
  .sideLink svg{width:20px;height:20px}
  .sideLogout{min-height:46px;font-size:15px}
  html.pwaDrawerOpen,html.pwaDrawerOpen body{overflow:hidden}

  /* ---- Touch sizing ----------------------------------------------------- */
  .btn,a.btn{min-height:44px;padding:11px 16px;font-size:15.5px;
    display:inline-flex;align-items:center;justify-content:center;gap:6px}
  .chip,.chipRadio{min-height:40px;padding:9px 15px;font-size:14px;
    display:inline-flex;align-items:center}
  .tabs .chip{justify-content:center}
  .linkBtn{min-height:40px;padding:8px 4px;font-size:14px}
  .del{min-width:40px;min-height:40px}
  .qtyBox button{width:40px;height:40px}
  .qtyBoxSmall button{width:34px!important;height:34px!important}
  .lampQty button{width:34px;height:34px}
  .lampRow{min-height:48px}
  .lampRow input[type=checkbox]{width:22px;height:22px}
  .photoDel{width:28px;height:28px;font-size:15px;line-height:26px;top:-8px;right:-8px}

  /* iOS zooms into any field below 16px — keep every field at 16px */
  select,textarea,
  input[type=text],input[type=number],input[type=date],input[type=email],
  input[type=password],input[type=search],input[type=tel],input[type=file],
  .fieldBox select,.fieldBox input,.qtyBox input,.lampQty input,.lampStock input,
  .searchWrap input,.notes{font-size:16px!important}
  select,input[type=text],input[type=number],input[type=date],input[type=email],
  input[type=password]{min-height:44px}
  .fieldBox{min-height:48px}
  .fieldBox select,.fieldBox input,.qtyBox input,.lampQty input,.lampStock input{min-height:0}
  .searchWrap input{min-height:46px}

  /* ---- Page headers & toolbars ------------------------------------------ */
  .pageHead h1{font-size:22px}
  .pageHead .btn{width:100%}
  .topRow{flex-wrap:wrap;align-items:stretch}
  .topRow > .filters{flex:1 1 100%;min-width:0;padding-bottom:6px}
  .topRow > div:not(.filters){display:flex;flex-wrap:wrap;gap:8px;width:100%}
  .topRow > div:not(.filters) > .btn{flex:1 1 auto}
  .topRow > .btn{flex:1 1 100%}
  .topRow .sectionTitle{flex:1 1 100%;flex-wrap:wrap}
  .filters{scroll-snap-type:x proximity}
  .filters .chip{scroll-snap-align:start}

  /* ---- Orders list ------------------------------------------------------ */
  .statusCards{gap:10px}
  .statusCard{padding:12px 14px;min-height:76px}
  .alertBanner{line-height:1.45}
  .cards .rowitem{padding:14px}
  .cards .rowitem > div{flex-direction:column!important;align-items:stretch!important;gap:8px!important}
  .cards .rowitem > div > div{max-width:100%!important;min-width:0}
  .cards .rowitem > div > div:last-child{align-items:flex-start!important}
  .cards .rowitem > div > div:last-child > div:first-child{flex-wrap:wrap;width:100%}
  .cards .rowitem > div > div:last-child > div:first-child > span:last-child{margin-left:auto}
  .cards .rowitem > div > div:last-child > span{text-align:left!important}
  .rowitem .title,.card .title{overflow-wrap:anywhere}

  /* ---- Order detail & form sheets --------------------------------------- */
  .pageSheet{padding:14px;border-radius:14px}
  .dsec{padding:12px}
  .dTitle{font-size:21px;overflow-wrap:anywhere}
  .dTopRow{flex-direction:column}
  .dBadges{justify-content:flex-start}
  .kvRow{flex-wrap:wrap;align-items:flex-start}
  .kvRow > span:last-child{text-align:right;margin-left:auto;overflow-wrap:anywhere;min-width:0}
  .readonlyBox{overflow-wrap:anywhere;min-width:0}
  .trackRow .fieldBox{min-width:0}
  .trackRow .btn{min-width:84px}
  .detailHeader{flex-wrap:wrap}
  .sheet-actions{flex-wrap:wrap}
  .sheet-actions .btn{flex:1 1 140px}
  .row1{flex-wrap:wrap}
  .row1 > div{min-width:0}

  /* Shipment / order photos: 3 across, big tap target for "Add photo" */
  .photoGrid{grid-template-columns:repeat(3,1fr);gap:10px}
  .photoSlot{min-height:88px}
  .photoSlot .slotLabel{font-size:12px}
  .photoSlot.pwaUploading{pointer-events:none;opacity:.7}
  .photoSlot.pwaUploading > span:first-child{animation:pwaPulse 1s ease-in-out infinite}
  @keyframes pwaPulse{50%{opacity:.35}}

  /* Purchase / production steppers fit a phone width */
  .stepper{overflow-x:auto;padding-bottom:2px}
  .step{width:62px}
  .stepLabel{font-size:11.5px;white-space:normal;line-height:1.2}

  /* ---- Dashboard -------------------------------------------------------- */
  #dashboardView{padding:12px;border-radius:14px}
  .dashHero .big{overflow-wrap:anywhere}
  .statnum{overflow-wrap:anywhere}
  .storeFigures{flex-wrap:wrap;white-space:normal;justify-content:flex-end}

  /* ---- Email Sender ----------------------------------------------------- */
  .emailStats{grid-template-columns:repeat(3,1fr);gap:8px}
  .emailStats .statcard{padding:12px 10px}
  .emailStats .statnum{font-size:22px}
  .emailStats .statlabel{font-size:11px}
  code{overflow-wrap:anywhere}

  /* ---- Login ------------------------------------------------------------ */
  .loginCard{margin:24px auto;padding:20px}

  /* ---- Request Assistance shortcut (order page only, added by pwa.js) ---- */
  .pwaAssistFab{display:inline-flex;align-items:center;gap:6px;
    position:fixed;z-index:30;
    right:calc(16px + env(safe-area-inset-right,0px));
    bottom:calc(16px + env(safe-area-inset-bottom,0px));
    min-height:48px;padding:12px 18px;border:none;border-radius:999px;
    background:var(--ref);color:#fff;font:inherit;font-size:15px;font-weight:700;
    box-shadow:0 6px 20px rgba(0,0,0,.28);cursor:pointer}
  .pwaAssistFab.flagged{background:var(--pend)}
  .pwaAssistFab.pwaHide{opacity:0;pointer-events:none;transform:translateY(8px)}
  .pwaAssistFab{transition:opacity .15s,transform .15s}
  .content main.pwaHasFab{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}
  .pwaAssistTarget{animation:pwaFlash 1.2s ease-out 1}
  @keyframes pwaFlash{0%{box-shadow:0 0 0 3px var(--ref)}100%{box-shadow:0 0 0 0 transparent}}
}

/* Very narrow phones (iPhone SE / mini) */
@media (max-width:380px){
  .statusCards{grid-template-columns:1fr 1fr;gap:8px}
  .statusCard .scNum{font-size:22px}
  .emailStats .statlabel{letter-spacing:0}
  .photoGrid{gap:8px}
}