/* ==========================================================================
   mobile.css — 手机适配层
   --------------------------------------------------------------------------
   用法：放在 public/css/mobile.css，在每个页面的 style.css 之后再引一行：
     <link rel="stylesheet" href="/css/style.css">
     <link rel="stylesheet" href="/css/mobile.css">   <!-- 加这行 -->

   全部是覆盖规则，不需要动 style.css 里任何一行。
   基准：设计宽度 390px，保证 360px 不溢出、430px 不难看。
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 变量与全局基线
   -------------------------------------------------------------------------- */
:root {
  --tap: 44px;                          /* 触控目标最小高度，iOS/Android 通用推荐值 */
  --tap-lg: 52px;                       /* 仓库场景主操作按钮（可能戴手套） */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}

html {
  /* 横屏时 Safari 会擅自放大字号，这行禁掉它 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  /* 整页下拉回弹会让人误以为页面卡住；扫码页尤其明显 */
  overscroll-behavior-y: none;
}

/* 100vh 在手机上等于"含地址栏的高度"，页面底部会被地址栏吃掉一截。
   dvh 是动态视口高度，地址栏收起/展开都对得上。 */
@supports (height: 100dvh) {
  body:has(#nav-root) { min-height: 100dvh; }
  nav.sidebar        { height: 100dvh; }
  .login-wrap        { min-height: 100dvh; }
}

/* --------------------------------------------------------------------------
   1. 【最关键】iOS 输入框聚焦自动放大整页
   现状：input/select/textarea 是 0.95rem = 15.2px。
   iOS Safari 只要 <16px，一点输入框就把整个页面放大，且不会自己缩回来——
   扫码登记页天天要点数量、备注，这一条是手机端最烦人的问题。
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: 16px;                    /* 必须 ≥16px，不能用 rem 以外的写法绕过 */
    min-height: var(--tap);
    padding: 0.6rem 0.7rem;
  }

  /* 表格内联编辑的格子：同样要 16px，但内边距收紧，避免把行撑得太散 */
  td.dt-editable-cell input, td.dt-editable-cell select,
  td.dt-new-cell input,      td.dt-new-cell select {
    font-size: 16px;
    min-height: 38px;
    padding: 0.35rem 0.4rem;
  }

  textarea { min-height: 4.5rem; }
}

/* --------------------------------------------------------------------------
   2. 触控目标尺寸
   现状实测：登录按钮 38px、语言切换按钮 24px、侧边栏链接 30px、
   button.small 约 22px —— 都低于 44px，手指点不准。
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  button, .btn {
    min-height: var(--tap);
    padding: 0.7rem 1.1rem;
    font-size: 0.95rem;
  }

  /* 表格行内的小按钮不可能做到 44px，退一档到 36px，并靠加大间距补偿误触 */
  button.small {
    min-height: 36px;
    padding: 0.45rem 0.75rem;
    font-size: 0.85rem;
  }

  .lang-switch button { min-height: 36px; min-width: 46px; font-size: 0.85rem; }


  #nav-toggle-btn {
    min-width: var(--tap);
    min-height: var(--tap);
    align-items: center;
    justify-content: center;
  }

  .nav-group-summary  { padding: 0.8rem 1rem;                font-size: 0.92rem; }
  .nav-group-items a  { padding: 0.8rem 1rem 0.8rem 2.1rem;  font-size: 0.95rem; }

  .nav-edit-icon {
    min-width: 34px; min-height: 34px; font-size: 1rem;
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* 按钮排成一行时，间距从 0.5rem 提到 0.6rem，降低相邻误触 */
  .actions-row { gap: 0.6rem; }
}

/* --------------------------------------------------------------------------
   3. iPhone 安全区（刘海 / 底部横条）
   需要同时把每个页面的 viewport meta 改成带 viewport-fit=cover，
   否则 env() 全部取到 0，这段等于没写。
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .topbar {
    padding-top:   calc(0.75rem + var(--sat));
    padding-left:  calc(1rem + var(--sal));
    padding-right: calc(1rem + var(--sar));
  }

  main {
    padding-left:   calc(0.75rem + var(--sal));
    padding-right:  calc(0.75rem + var(--sar));
    padding-bottom: calc(1.25rem + var(--sab));   /* 底部横条不再压住最后一行 */
  }

  nav.sidebar {
    padding-top:    calc(0.75rem + var(--sat));
    padding-bottom: calc(0.75rem + var(--sab));
  }

  .login-wrap { padding: calc(1rem + var(--sat)) 1rem calc(1rem + var(--sab)); }
}

/* --------------------------------------------------------------------------
   4. 侧边栏抽屉：加遮罩、锁背景滚动、加宽
   现状抽屉 240px 且没有遮罩，打开时看不出"背景不可点"，也能滑动背景。
   配套 JS 见下面说明（点遮罩关闭抽屉）。
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  nav.sidebar {
    width: min(78vw, 300px);
    left: calc(-1 * min(78vw, 300px) - 20px);
  }
  body.nav-open nav.sidebar { left: 0; }

  body.nav-open { overflow: hidden; }
  body.nav-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 25;                        /* 在 sidebar(30) 之下、topbar(20) 之上 */
    background: rgba(15, 23, 42, 0.45);
  }
}

/* --------------------------------------------------------------------------
   5. 表格（出入库明细 / 库存看板）
   结构本来就对：.table-wrap 横向滚动 + main 的 min-width:0。
   这里补的是手机上的"能看清、能点中、知道自己在看哪一行"。
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .table-wrap {
    overscroll-behavior-x: contain;     /* 横滑到头不触发浏览器的"侧滑返回" */
    -webkit-overflow-scrolling: touch;
  }

  /* 表格出血到屏幕左右边缘，同样宽度能多显示两列 */
  .card > .table-wrap {
    margin-left: -1rem; margin-right: -1rem;
    padding-left: 1rem;  padding-right: 1rem;
  }

  table   { font-size: 0.95rem; }       /* 0.9rem=14.4px 偏小 */
  th, td  { padding: 0.7rem 0.6rem; }   /* 行高从 ~30px 提到 ~40px，好点 */
  th      { font-size: 0.85rem; }
}

/* 首列冻结：横滑看后面的列时，始终知道这行是哪个商品。
   如果你的表第一列是复选框或序号，把这段删掉即可。 */
@media (max-width: 768px) {
  .table-wrap th:first-child,
  .table-wrap td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--card-bg);
    box-shadow: 1px 0 0 var(--border);
  }
  tr.low-stock td:first-child        { background: var(--warn-bg); }
  tr.dt-group-header td:first-child  { background: var(--bg); }
}

/* 【可选】表头吸顶。需要给滚动容器一个高度上限，长表滚动时表头不跑掉。
   不想要内层滚动条的话整段删掉。 */
@media (max-width: 768px) {
  .table-wrap { max-height: 70dvh; }
  .table-wrap thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--card-bg);
  }
  .table-wrap thead th:first-child { z-index: 3; }
}

/* --------------------------------------------------------------------------
   6. 字号整体提一档
   仓库场景常见：光线不好、站着看、手机举得远。
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  h1 { font-size: 1.35rem; }
  h2 { font-size: 1.1rem; }
  label            { font-size: 0.9rem; }
  .text-muted      { font-size: 0.9rem; }
  .msg             { font-size: 0.95rem; }
  .badge           { font-size: 0.85rem; padding: 0.25rem 0.65rem; }
  .stat-card .label { font-size: 0.85rem; }
  .stat-card .value { font-size: 1.5rem; }
  .ps-item         { font-size: 0.95rem; padding: 0.6rem 0.7rem; }  /* 建议项也要点得中 */
}

/* --------------------------------------------------------------------------
   7. 扫码登记页专项
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* 3/4 取景框在 390 宽下高 520px，加上顶栏和方向切换，提交按钮直接被推出首屏。
     4/3 高 292px，扫码框和表单能同屏看到。 */
  .scan-camera-wrap { aspect-ratio: 4 / 3; }

  .direction-toggle button { min-height: var(--tap-lg); font-size: 1.05rem; }
  button.btn-lg            { min-height: var(--tap-lg); font-size: 1.1rem; }

  /* 商品名建议下拉：软键盘弹起后 16rem 会顶出屏幕 */
  .ps-dropdown { max-height: 40dvh; }
}

/* --------------------------------------------------------------------------
   8. 工具类：底部常驻操作条
   给表单最下面那排提交/取消按钮加 class="sticky-actions"，
   长表单滚到一半也能直接提交，且自动避开 iPhone 底部横条。
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .sticky-actions {
    position: sticky;
    bottom: 0;
    z-index: 15;
    display: flex;
    gap: 0.6rem;
    background: var(--card-bg);
    border-top: 1px solid var(--border);
    margin: 0.75rem -1rem -1rem;
    padding: 0.75rem 1rem calc(0.75rem + var(--sab));
  }
  .sticky-actions > button,
  .sticky-actions > .btn { flex: 1; min-height: var(--tap-lg); }
}

/* --------------------------------------------------------------------------
   9. 小屏收窄（360px 及以下，安卓主流机）
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .stat-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.6rem; }
  .card      { padding: 0.85rem; border-radius: 8px; }
  th, td     { padding: 0.65rem 0.5rem; }
}

/* --------------------------------------------------------------------------
   10. 顺手修一个现有 bug（不分屏幕大小，电脑端也一样）
   style.css 里 `button { color:#fff }`，而 `.lang-switch button` 只覆盖了
   background 没覆盖 color —— 所以未选中的那个语言按钮是"白字白底"，实测
   RU 按钮在电脑和手机上都是一个空白框，看不见字。
   -------------------------------------------------------------------------- */
.lang-switch button        { color: var(--text); }
.lang-switch button.active { color: #fff; }