/* ============================================================
   墨寻小创 · 通用屏幕适配层（全站唯一适配入口）
   引入位置：页面组件样式之后、页面自身的 <style> 之前；
            模块自己的样式文件里不再写媒体查询。
   说明：这里集中放共用适配规则 + 各模块（含库存管理）的适配规则，
        页面自身的样式对普通类仍可覆盖；需要强制生效时，
        用 html[data-device="mobile"] 前缀提高优先级。
   ============================================================ */

/* 基础：禁止 iOS 横屏时自动放大字号、限制内容超出屏幕 */
html{-webkit-text-size-adjust:100%}
html,body{max-width:100%}
img,svg,video,iframe{max-width:100%}

/* 触屏：去掉 300ms 点击延迟与双击缩放误触 */
a,button,input,select,textarea{touch-action:manipulation}

/* ---------- 手机（<=760px） ---------- */
@media (max-width:760px){
  /* 长网址、长英文不撑破布局 */
  body{overflow-wrap:break-word}

  /* 输入框字号不小于 16px，避免 iOS 聚焦输入框时把整页放大 */
  input,select,textarea{font-size:16px}

  /* 后台表格在手机上可左右滑动查看 */
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* ---------- 库存管理 · 后台（stock/admin-stock.css 的适配规则） ---------- */
@media (max-width:1100px){
  .stock-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:820px){
  .stock-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stock-cat-grid{grid-template-columns:1fr}
  .stock-form-grid{grid-template-columns:1fr}
  .stock-toolbar .input,.stock-toolbar .select{min-width:0;flex:1 1 140px}
  .stock-modal{max-width:100%}
}

/* ---------- 库存管理 · 手机端（stock/index.html 的适配规则） ---------- */
@media (max-width:360px){
  html[data-device="mobile"] .panel{padding-left:10px;padding-right:10px}
  html[data-device="mobile"] .card{padding:14px}
  html[data-device="mobile"] .row,
  html[data-device="mobile"] .report-form{grid-template-columns:1fr}
}

/* ---------- 库存公司管理（invco/invco.php 的适配规则） ----------
   登录页用 .invco-login、后台壳层用 .invco-app 限定，避免影响后台与手机端的同名类 */
@media (max-width:1100px){
  .invco-app .kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .invco-login .login-split{grid-template-columns:1fr;overflow-y:auto}
  .invco-login .login-brand{display:none}
  .invco-login .login-side{padding:40px 24px}
  .invco-login .login-veil{background:rgba(6,32,44,.7)}
}
@media (max-width:820px){
  .invco-app .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .invco-app .form-grid{grid-template-columns:1fr}
  .invco-app .cat-cols{grid-template-columns:1fr}
  .invco-app .row{flex-wrap:wrap}
  .invco-app .row-ops{width:100%;justify-content:flex-end}
  .invco-app .toolbar select,.invco-app .toolbar input{flex:1 1 140px}
}
@media (max-width:760px){
  .invco-app .mobile-only{display:grid}
  .invco-app .sidebar{
    position:fixed;left:0;top:0;bottom:0;width:var(--sb-w)!important;
    transform:translateX(-102%);box-shadow:0 22px 56px rgba(20,60,76,.18);
    transition:transform .28s var(--ease);
  }
  .invco-app.sb-open .sidebar{transform:translateX(0)}
  .invco-app.sb-open .sb-backdrop{display:block;position:fixed;inset:0;z-index:65;background:rgba(10,40,52,.4)}
  .invco-app .topbar{padding:0 14px;height:64px}
  .invco-app .top-sub{display:none}
  .invco-app .top-right .tag{display:none}
  .invco-app .workspace{padding:16px 14px 32px}
  .invco-app .card{padding:18px;border-radius:var(--r-md)}
}

/* ---------- 设备类型钩子 ----------
   screen.js 会在 <html> 上写入 data-device="pc|tablet|mobile"，
   需要针对某类设备单独调整时，用下面的写法即可：
   html[data-device="mobile"] .your-class{ ... }
   ------------------------------------- */