/* Virtue Stock Room — responsive/touch layout
   Keeps the desktop UI intact while making the full app usable on phones/tablets. */

html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{overflow-x:hidden}
img,video,canvas{max-width:100%}
button,input,select,textarea{min-height:44px}
input,select,textarea{font-size:16px} /* Prevent iPhone Safari zoom-on-focus. */
button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.mobileNavToggle{display:none}

@media (max-width: 980px){
  .twoCol,.siteControlGrid,.botGrid{grid-template-columns:1fr!important}
  .metricGrid,.metricGrid[style]{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .previewHero h3{font-size:clamp(34px,8vw,52px)}
  #admin-modal .modal-content{width:min(96vw,760px)}
}

@media (max-width: 780px){
  :root{--shadow:3px 3px 0 #1d1930;--shadow-sm:2px 2px 0 #1d1930}
  body{background:#f6f4fb;padding-bottom:env(safe-area-inset-bottom)}
  .shell{display:block;min-height:100dvh}

  /* Compact mobile app header/menu instead of the full desktop sidebar. */
  .sidebar{
    position:sticky;top:0;z-index:70;width:100%;height:auto;min-height:0;
    padding:max(9px,env(safe-area-inset-top)) 12px 9px;
    border:0;border-bottom:3px solid #fff;box-shadow:0 4px 0 var(--blue);
    overflow:visible;display:block;
  }
  .brandBlock{margin:0;min-height:44px;gap:9px;padding-right:54px;position:relative}
  .brandMarkImage{width:34px!important;height:34px!important}
  .brandName{font-size:15px}.brandSub{font-size:9px;margin-top:3px}
  .mobileNavToggle{
    display:grid;place-items:center;position:absolute;right:0;top:50%;transform:translateY(-50%);
    width:44px;height:44px;min-height:44px;padding:0;border:2px solid #fff;background:#171525;color:#fff;
    box-shadow:3px 3px 0 var(--pink);font-size:22px;font-weight:900;line-height:1;
  }
  .sideNav,.sideTools,.profileCard{display:none}
  .sidebar.mobile-open .sideNav{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 0;padding-top:12px;border-top:2px solid #353148}
  .sidebar.mobile-open .sideTools{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 0;padding-top:10px}
  .sidebar.mobile-open .profileCard{display:flex;margin:10px 0 0}
  .navItem,.sideTool{min-height:46px;padding:10px;font-size:11px;text-align:center;white-space:normal}

  .mainPanel{min-height:calc(100dvh - 64px)}
  .topbar{position:relative;top:auto;z-index:1;min-height:auto;padding:18px 14px 14px;align-items:flex-start}
  .topbar h1{font-size:21px;line-height:1.1}.eyebrow{font-size:9px}
  .appView{padding:17px 12px calc(34px + env(safe-area-inset-bottom))}

  .pageIntro,.pageIntro.splitIntro{display:grid;grid-template-columns:1fr;align-items:start;gap:13px;margin-bottom:17px}
  .pageIntro h2{font-size:24px;letter-spacing:-1px}.pageIntro p{font-size:13px;line-height:1.45}
  .pageIntro>button{width:100%}

  .card,.websiteListCard{padding:14px;border-width:2px}
  .cardHead,.sectionHead{gap:10px}.cardHead h3,.sectionHead h3,.toggleLine h3{font-size:17px}
  .humanOnly{white-space:normal;text-align:center}
  .dropZone{min-height:132px;padding:18px 12px}

  .metricGrid,.metricGrid[style]{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px;margin-bottom:14px}
  .metricCard{padding:12px;border-width:2px}.metricCard strong{font-size:23px}.metricCard span{font-size:9px;line-height:1.25}
  .twoCol{gap:14px}

  /* Toolbars and buttons become thumb-friendly full-width groups. */
  .toolbar{display:grid;grid-template-columns:1fr;gap:10px;padding:12px!important}
  .toolbar>*{min-width:0;width:100%}
  .toolbar>div[style]{display:grid!important;grid-template-columns:1fr!important;width:100%}
  .searchField{width:100%;min-width:0;font-size:16px}
  .segmented{display:grid;grid-template-columns:1fr 1fr;gap:7px;width:100%}
  .segBtn{min-height:44px;padding:8px;font-size:9px}
  .actionRow,.drawerActions,.form-actions,.rowActions,.photoToolbar{display:grid;grid-template-columns:1fr 1fr;gap:9px;width:100%}
  .actionRow>* ,.drawerActions>* ,.form-actions>* ,.photoToolbar>*{width:100%;min-width:0}
  .rowActions{grid-template-columns:1fr}

  .formGrid,#product-drawer .drawerForm{grid-template-columns:1fr!important;gap:12px}
  .formGrid .wideField,#product-drawer .drawerForm .wideField{grid-column:auto!important}
  .presetRow,.promoPresetRow{grid-template-columns:1fr!important}
  .previewCategories{grid-template-columns:1fr 1fr 1fr}.previewCategories span{padding:10px 5px;font-size:9px}
  .ruleList div{gap:10px;align-items:flex-start}.ruleList strong{text-align:right;overflow-wrap:anywhere}

  /* Intake table becomes stacked item cards rather than a sideways desktop table. */
  .tableWrap{overflow:visible;border:0;box-shadow:none;background:transparent}
  .dataTable,.dataTable tbody,.dataTable tr,.dataTable td{display:block;width:100%}
  .dataTable thead{display:none}
  .dataTable tr{margin:0 0 11px;border:2px solid var(--line);background:#fff!important;box-shadow:var(--shadow-sm);padding:8px}
  .dataTable td{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;gap:8px;padding:8px;border:0;border-bottom:1px solid #e1dce7;min-height:42px;overflow-wrap:anywhere}
  .dataTable td:last-child{border-bottom:0}
  .dataTable td::before{font-size:9px;text-transform:uppercase;letter-spacing:.06em;font-weight:900;color:var(--muted)}
  .dataTable td:nth-child(1)::before{content:"Photo"}.dataTable td:nth-child(2)::before{content:"Item"}.dataTable td:nth-child(3)::before{content:"Category"}.dataTable td:nth-child(4)::before{content:"Size"}.dataTable td:nth-child(5)::before{content:"Price"}.dataTable td:nth-child(6)::before{content:"SKU"}
  .dataTable .intakePhotoThumb{justify-self:start}

  /* Website queue cards: preserve every useful field on mobile. */
  .websiteList{gap:10px}
  .websiteRow{display:grid;grid-template-columns:28px minmax(0,1fr);gap:9px;padding:10px;align-items:start}
  .websiteRow>input[type="checkbox"]{width:22px;height:22px;min-height:22px;margin-top:10px}
  .websiteRow .productIdentity{min-width:0}.websiteRow .productIdentity strong{overflow-wrap:anywhere}
  .websiteRow .rowMeta{display:block!important;grid-column:2;margin-left:54px}
  .websiteRow .statusCell{grid-column:2;margin-left:54px;align-items:flex-start}
  .websiteRow .rowActions{grid-column:1/-1;margin-top:3px;display:grid;grid-template-columns:1fr 1fr}
  .websiteRow .rowActions button{min-height:42px}

  /* Full-screen, touch-friendly item editor. */
  #product-drawer .drawerPanel,.drawerPanel{
    position:fixed;inset:0!important;width:100vw!important;height:100dvh!important;max-width:none!important;
    padding:max(14px,env(safe-area-inset-top)) 12px calc(18px + env(safe-area-inset-bottom));
    border:0;box-shadow:none;border-radius:0;overscroll-behavior:contain;
  }
  .drawerHead{position:sticky;top:calc(-1 * max(14px,env(safe-area-inset-top)));z-index:5;background:var(--paper);padding:12px 0;margin-bottom:12px}
  .drawerHead h2{font-size:19px;overflow-wrap:anywhere}.iconBtn{width:44px;height:44px;min-height:44px;flex:0 0 auto}
  .drawerPhotoPreview{min-height:160px;padding:6px}.drawerPhotoPreview img{height:145px;min-width:112px;max-width:130px}
  .photoSlots{grid-template-columns:1fr 1fr;gap:7px}.photoSlots>div{min-width:0!important;padding:8px}
  .drawerActions{position:sticky;bottom:calc(-1 * env(safe-area-inset-bottom));z-index:6;background:var(--paper);padding:10px 0 calc(10px + env(safe-area-inset-bottom));border-top:2px solid var(--line);margin-top:16px}

  /* Modal windows act like mobile sheets/full-screen pages. */
  .modal,.photoLightbox{padding:0!important;align-items:stretch!important}
  .modal-content,#admin-modal .modal-content,.photoLightboxPanel,.phoneUploadPanel{
    width:100vw!important;max-width:none!important;min-height:100dvh;max-height:100dvh!important;margin:0!important;
    border:0!important;border-radius:0!important;box-shadow:none!important;overflow:auto!important;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .photoLightboxPanel,.phoneUploadPanel{padding:max(14px,env(safe-area-inset-top)) 12px calc(16px + env(safe-area-inset-bottom))}
  .modal-header,.photoLightboxHead{position:sticky;top:0;z-index:5;padding:max(12px,env(safe-area-inset-top)) 12px 12px;background:#171525;color:#fff}
  .photoLightboxHead .iconBtn{border-color:#fff}
  .modal-body{padding:14px 12px calc(20px + env(safe-area-inset-bottom))}
  .checkbox-group{grid-template-columns:1fr}.vendor-header,.category-header{display:grid;grid-template-columns:1fr;gap:8px}.vendor-actions,.category-actions{width:100%}.vendor-actions button,.category-actions button{flex:1;min-height:42px}
  .pricingUploadBox{grid-template-columns:1fr!important}.pricingAdjustmentEditor{grid-template-columns:1fr!important}.pricingCopyRow{grid-template-columns:1fr}
  .pricingRow,.pricingAdjustmentRow{grid-template-columns:1fr!important;border:1px solid #d8d2df;padding:9px}.pricingRow>* ,.pricingAdjustmentRow>*{min-width:0}

  /* Camera remote adapts to the device instead of assuming a laptop-sized popup. */
  .phoneLivePreview{width:min(100%,430px);margin:10px auto;max-height:62dvh}
  .phoneLiveStatus{align-items:flex-start;flex-direction:column}.phoneLiveStatus span{text-align:left}
  .phoneUploadQR{width:min(230px,72vw);height:auto;aspect-ratio:1/1}.phoneUploadQR img{width:100%;height:100%}
  .photoLightboxGallery{grid-template-columns:1fr!important}

  .dashboardActivityItem{grid-template-columns:42px minmax(0,1fr)!important}.dashboardActivityItem>*:last-child{grid-column:2}
}

@media (max-width: 430px){
  .sidebar.mobile-open .sideNav,.sidebar.mobile-open .sideTools{grid-template-columns:1fr 1fr}
  .metricGrid,.metricGrid[style]{grid-template-columns:1fr 1fr!important}
  .actionRow,.drawerActions,.form-actions,.photoToolbar{grid-template-columns:1fr}
  .websiteRow .rowActions{grid-template-columns:1fr}
  .segmented{grid-template-columns:1fr 1fr}
  .photoSlots{grid-template-columns:1fr 1fr}
}

@media (orientation:landscape) and (max-height:520px) and (max-width:900px){
  .sidebar{position:relative}.phoneLivePreview{max-height:72dvh;width:auto;margin-inline:auto}.phoneUploadQR{max-width:180px}
}