/* ============================================
   移动端响应式 + PWA 适配（SAP Fiori 视觉规范）
   ============================================ */

/* 中等屏幕：平板（同样是窄栏：图标 + 小字） */
@media (max-width: 1024px) {
  :root { --sidebar-w: 86px; }
  .sidebar-item { padding: 8px 2px; }
  .sidebar-item-icon { width: 19px; height: 19px; }
  .topbar-logo { font-size: 13px; }
}

/* 小屏幕：手机
   布局参考外卖/快餐类 App：左侧固定竖排功能入口（可上下滑），右侧内容区独立滚动。
   两块各自是独立的 overflow 容器，互不带动；整页不滚动（body overflow:hidden）。 */
@media (max-width: 768px) {
  :root { --topbar-h: 48px; --sidebar-w: 80px; }
  html { height: 100%; }
  body.app-shell { height: 100%; overflow: hidden; }
  .app-layout { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
  .topbar { flex: none; padding: 0 8px; gap: 6px; }
  .topbar > div:first-child { min-width: 0; flex: 1 1 auto; }
  .topbar-logo {
    font-size: 12px; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .topbar-logo span { display: none; }
  .topbar-right { flex: none; gap: 4px; }
  .topbar-user span:not(.role-tag):not(.topbar-avatar) { display: none; }
  .topbar-user b { display: none; }
  .topbar-user .role-tag { display: none; }
  .topbar-ov { white-space: nowrap; padding: 0 6px; }
  .topbar-logout { white-space: nowrap; padding: 0 8px; }
  .menu-toggle { flex: none; }
  .main {
    flex: 1 1 auto; min-height: 0;
    flex-direction: row;
    overflow: hidden;
  }
  /* 左侧功能入口栏：始终在位，独立纵向滚动 */
  .sidebar {
    width: var(--sidebar-w);
    height: 100%;
    max-height: none;
    flex: none;
    order: 0;
    padding: 0 0 18px;
    border-right: 1px solid var(--sap-border);
    border-bottom: none;
    background: #fbfcfd;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    transition: none;
  }
  .sidebar.collapsed { display: none; }
  .sidebar-group { margin-bottom: 2px; }
  .sidebar-group-title {
    display: block; padding: 7px 2px 3px;
    font-size: 9px; letter-spacing: 0; text-align: center;
    color: #9aa0a6; font-weight: 600;
  }
  .sidebar-item {
    flex-direction: column; justify-content: center; gap: 3px;
    padding: 9px 1px; text-align: center;
    font-size: 10px; border-left-width: 3px;
  }
  .sidebar-item-icon { width: 18px; height: 18px; }
  .sidebar-item-text {
    display: block !important;
    font-size: 9px; line-height: 1.25; white-space: normal; word-break: break-all;
  }
  /* 两级导航（手机）：分组按钮更紧凑，一级 6~7 个一屏放得下 */
  .nav-tile { padding: 8px 1px; margin: 3px 3px; gap: 3px; font-size: 9px; border-radius: 4px; }
  .nav-tile-icon { width: 19px; height: 19px; }
  .nav-tile-chev { right: 1px; font-size: 11px; }
  .nav-back { height: 30px; margin: 3px 3px 3px; font-size: 10px; border-radius: 4px; }
  .nav-back span { font-size: 14px; }
  /* 右侧内容区：独立纵向滚动 */
  .content {
    flex: 1 1 auto; min-width: 0; height: 100%;
    order: 0;
    padding: var(--space-3) var(--space-3) 26px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  /* 表格框高度 = 视口 - 顶栏/标题/工具栏/筛选栏，让表头能真正吸在框顶 */
  .content .table-wrap { max-height: max(160px, calc(100dvh - 224px)); }
  .menu-toggle { display: inline-flex !important; }

  .page-header { flex-direction: column; align-items: stretch; }
  .page-title { font-size: 17px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
  .stat-card { padding: 10px 12px; }
  .stat-value { font-size: 18px; }

  .toolbar { gap: 5px; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .toolbar::-webkit-scrollbar { display: none; }
  .toolbar .btn { height: 26px; padding: 0 8px; font-size: 11px; flex: 0 0 auto; }
  /* 产品主数据 SKU 操作条：手机上允许换行，提示语省掉 */
  .sku-acts-bar { padding: 5px 6px; gap: 5px; }
  .sku-acts-bar .btn { height: 26px; padding: 0 8px; font-size: 11px; }
  .sku-acts-tip { display: none; }
  /* v81 修复（需求 2）：页头按钮栏原来是 nowrap + 右对齐 + 横向滚动，
     按钮一多左侧就被裁掉且滑不回去 —— 产品主数据的「SKU 编码设置 / 自动编码 / 补全 SKU」
     就是这样彻底看不见的。手机端改成允许换行 + 左对齐，按钮一个都不会少。 */
  .page-header .toolbar {
    flex-wrap: wrap; justify-content: flex-start;
    overflow-x: visible; overflow-y: visible;
    row-gap: 5px;
  }
  .tab-bar { padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .tab-bar .tab-item { padding: 11px 13px; font-size: 13px; }
  #btn-scan { flex: 1 1 100%; justify-content: center; background: var(--sap-brand); color: #fff; border-color: var(--sap-brand); }

  /* 筛选栏：不再竖排满宽，改成一行横滑的小控件
     按钮高度 26px ≈ 侧栏入口（66×52）的一半，避免一屏被按钮占满 */
  .filter-bar {
    flex-direction: row; flex-wrap: nowrap; align-items: center;
    gap: 6px; padding: 6px;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter-bar > * { width: auto !important; flex: 0 0 auto; }
  .filter-bar > label {
    font-size: 10px; color: var(--sap-text-muted);
    white-space: nowrap; margin: 0; min-width: 0;
  }
  .filter-bar > input, .filter-bar > select,
  .filter-bar > .input, .filter-bar > .select {
    flex: 0 0 auto;
    width: 108px !important; min-width: 88px;
    height: 26px; font-size: 11.5px; padding: 0 6px;
  }
  .filter-bar > input.df { width: 106px !important; }
  .filter-bar > .btn, .filter-bar > button {
    height: 26px; min-width: 33px; padding: 0 8px;
    font-size: 11px; border-radius: 4px; white-space: nowrap;
  }

  /* 列设置栏（v86：全站按钮只剩这一条）：手机上换行排列，但不要把「列设置」推到很远的右边 */
  .grid-tools { gap: 5px; padding: 5px 6px; }
  .grid-tools .col-gear { margin-left: 0; }
  .grid-tools .btn { height: 26px; font-size: 11px; padding: 0 8px; }
  .grid-tools .col-menu { left: 0; right: auto; max-height: 260px; min-width: 160px; }
  .grid-tools .gt-sep { margin: 0 2px; }

  .modal-mask { padding: 0; align-items: flex-end; }
  .modal-box { max-width: 100vw; max-height: 92vh; border-radius: 10px 10px 0 0; padding: 0; }
  .modal-header { border-radius: 10px 10px 0 0; }
  .modal-footer { border-radius: 0; }
  .modal-body .form-row { flex-direction: column; align-items: stretch; gap: 5px; }
  .modal-body .form-row label { min-width: auto; }
  /* v171（用户反馈 2）：手机上 form-row 改成竖排后，主样式里的 flex:1 1 220px 会沿着「竖轴」撑高，
     弹窗里每个输入框都被拉成 200px 左右的大方块 —— 这里收敛回正常输入框高度，宽度按内容自适应 100%。
     ★ 全站弹窗通用，改这一处所有「可修改框」都不会再超大。 */
  .modal-body .form-row .input,
  .modal-body .form-row .select,
  .modal-body .form-row .textarea,
  .modal-body .form-row input,
  .modal-body .form-row select,
  .modal-body .form-row textarea {
    flex: 0 0 auto;
    width: 100%;
    height: 36px;
    min-height: 36px;
    max-height: 36px;
  }
  .modal-body .form-row .textarea,
  .modal-body .form-row textarea {
    height: auto;
    min-height: 68px;
    max-height: 40vh;
    padding: 8px 9px;
    line-height: 1.5;
  }
  /* 只读 / 展示用的格子跟着文字走，不要撑高 */
  .modal-body .form-row .input[readonly],
  .modal-body .form-row input[readonly] { background: #f5f6f7; color: #5b636a; }
  /* 勾选框 / 单选框别被上面的统一高度带歪 */
  .modal-body .form-row input[type="checkbox"],
  .modal-body .form-row input[type="radio"] {
    width: 16px; height: 16px; min-height: 0; max-height: none; flex: 0 0 auto;
  }

  .panel { padding: var(--space-3); }
  .input, .select { height: 32px; }
  th, td { padding: 6px 8px; font-size: 11px; }

  .pager button { height: 28px; padding: 0 9px; }
}

/* 手机菜单按钮 */
.menu-toggle {
  display: none;
  background: transparent; border: none; color: #fff;
  cursor: pointer; padding: 0 8px; height: 32px;
  align-items: center; justify-content: center; border-radius: var(--radius);
}
.menu-toggle:hover { background: rgba(255,255,255,.12); }

/* 顶栏用户头像图标 */
.topbar-avatar { display: inline-flex; opacity: .85; }

/* 手机上表格：横向滚动 + 紧凑 */
@media (max-width: 768px) {
  .table-wrap { -webkit-overflow-scrolling: touch; }
  table { font-size: 11px; }
  th, td { padding: 5px 6px; }
}

/* 超小屏幕 */
@media (max-width: 380px) {
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .stat-value { font-size: 16px; }
}

/* ============================================
   入口磁贴（考勤 / 宿舍等所有模块）：收成「一行」横滑
   - 每个入口尺寸与左侧功能栏一致（66×52，图标 18px + 9px 文字）
   - 全部排在上方一行内，左右滑动选择；考勤的入口条滚动正文时吸顶
   ============================================ */
@media (max-width: 768px) {
  .entry-tiles {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    margin: 0 0 var(--space-2);
    padding: 0 0 2px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .entry-tiles::-webkit-scrollbar { display: none; }
  .entry-tiles > .entry-tile {
    flex: 0 0 66px;
    width: 66px;
    min-width: 66px;
    min-height: 52px;
    padding: 5px 1px 4px;
    gap: 3px;
    border-radius: 6px;
    font-size: 9px;
    line-height: 1.2;
    scroll-snap-align: start;
  }
  .entry-tiles > .entry-tile .et-ico { width: 18px; height: 18px; }
  .entry-tiles > .entry-tile .et-label,
  .entry-tiles > .entry-tile .et-sub {
    font-size: 9px;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .entry-tiles > .entry-tile .et-sub { display: none; }

  /* 考勤入口条：吸顶 */
  .att-tabs {
    position: sticky;
    top: calc(-1 * var(--space-3));
    z-index: 30;
    margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) var(--space-2);
    padding: 6px 4px 5px;
    background: #fff;
    border-bottom: 1px solid var(--sap-border-light);
    box-shadow: 0 2px 6px rgba(31, 42, 54, .07);
    border-radius: 0;
  }
  .att-tabs .entry-tiles { margin: 0; }
  /* 左右还有入口时渐隐提示，滑到底自动消失 */
  .att-tabs.sc-right .entry-tiles {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent 100%);
  }
  .att-tabs.sc-left .entry-tiles {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 20px);
    mask-image: linear-gradient(to right, transparent 0, #000 20px);
  }
  .att-tabs.sc-left.sc-right .entry-tiles {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
  }
}

/* 平板横屏 */
@media (min-width: 769px) and (max-width: 1024px) {
  .content { padding: var(--space-4); }
  .stat-grid { grid-template-columns: repeat(3, 1fr); }
}

/* 打印样式 */
@media print {
  .topbar, .sidebar, .toolbar, .pager, .no-print { display: none !important; }
  .content { padding: 0; overflow: visible; }
  .panel { border: 1px solid #ccc; }
}

/* 工序流程图 */
.flow-chain { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; }
.flow-step-no { font-size: 11px; color: var(--sap-text-muted); font-weight: 600; }
.flow-op { font-size: 13px; font-weight: 600; color: var(--sap-text); margin: 2px 0; }
.flow-meta { font-size: 11px; color: var(--sap-text-muted); }
.flow-arrow { display: flex; align-items: center; padding: 0 6px; color: var(--sap-text-faint); font-size: 15px; font-weight: 600; }

/* 总览左抽屉 */
.overview-backdrop { position: fixed; inset: 0; background: rgba(31,42,54,.45); z-index: 8999; display: none; }
.overview-backdrop.open { display: block; }
.overview-drawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: 340px; max-width: 86vw;
  background: var(--sap-bg); z-index: 9000; transform: translateX(-100%);
  transition: transform .25s;
  box-shadow: 2px 0 16px rgba(0,0,0,.22); display: flex; flex-direction: column;
}
.overview-drawer.open { transform: translateX(0); }
.ov-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 8px 0 16px; height: 44px;
  background: var(--sap-shell); color: #fff;
  font-size: 14px; font-weight: 600; flex: none;
}
.ov-close {
  background: transparent; border: none; color: #fff; font-size: 20px;
  cursor: pointer; width: 30px; height: 30px; border-radius: var(--radius); line-height: 1;
}
.ov-close:hover { background: rgba(255,255,255,.14); }
.ov-body { padding: 12px; overflow: auto; flex: 1; }
.topbar-ov {
  display: none; background: transparent; border: none; color: #d5dadd;
  font-size: 13px; cursor: pointer; padding: 0 9px; height: 28px;
  align-items: center; border-radius: var(--radius);
}
.topbar-ov:hover { background: rgba(255,255,255,.12); color: #fff; }
@media (max-width: 768px) {
  .topbar-ov { display: inline-flex; }
  .overview-drawer { width: 300px; max-width: 82vw; }
  .overview-drawer .nav-grid { grid-template-columns: 1fr; gap: 10px; margin-top: 10px; }
  .overview-drawer .nav-card-title { padding: 8px 10px; font-size: 12px; }
  .overview-drawer .nav-link { padding: 8px 10px; }
  .overview-drawer .nav-link-name { min-width: 72px; font-size: 12px; }
  .overview-drawer .nav-link-desc { font-size: 10px; }
  .overview-drawer .page-header { margin-bottom: 8px; }
  .overview-drawer .page-title { font-size: 16px; }
  .overview-drawer .page-subtitle { font-size: 11px; }
  .overview-drawer .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .ov-menu { grid-template-columns: 1fr; }
  .ov-layer-body { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .flow-node { padding: 8px 10px; }
  .overview-drawer .stat-card { padding: 8px 10px; }
  .overview-drawer .stat-value { font-size: 18px; }
  .flow-chain { gap: 0; }
  .flow-node { min-width: 78px; }
}

/* 侧边栏第三层（手机窄栏 66px）：比二级再小一号，靠左侧细线缩进 */
@media (max-width: 768px) {
  /* 第三层（v56）：手机上也要能准确点到 —— 34px 高、10.5px 字、占满栏宽 */
  .nav-depth3 { margin: 2px 3px 6px; padding: 2px; }
  .nav-depth3-item { font-size: 10.5px; padding: 8px 3px; line-height: 1.25; min-height: 34px; }
  /* 扫码浮层：手机上让取景区占满，按钮大一点好按 */
  .scn-frame { width: 84%; height: 44%; }
  .scn-actions .scn-btn { height: 44px; font-size: 13px; }
  .scn-x { width: 38px; height: 38px; }
  /* 盘点面板：行距收紧，输入框更大 */
  .cnt-body { padding: 8px; }
  .cnt-row > label { flex-basis: 52px; font-size: 11.5px; }
  .cnt-row .cnt-val { font-size: 13.5px; }
  .cnt-qty input { height: 48px; font-size: 23px; }
  .cnt-foot .btn { height: 44px; }
}

/* ============================================================
   采购订单列表：一个 SKU 一行（对齐 WMS 入库管理），手机端优化
   每一行都有勾选框 + 查看/打印/编辑/退单，窄屏下把按钮收窄，
   避免操作列吃掉半屏宽度，导致物料 SKU / 数量要划很远才看得到。
   ============================================================ */
@media (max-width: 560px) {
  #po-list .crud-row-chk { width: 17px; height: 17px; }
  #po-list td .btn.sm { padding: 0 5px; font-size: 10.5px; height: 24px; line-height: 22px; border-radius: 3px; white-space: nowrap; }
  #po-list td[style*="nowrap"] { white-space: nowrap; }
  #po-list .print-bar { flex-wrap: wrap; gap: 6px; }
  #po-list .print-bar .pb-hint { display: none; }
  #po-list .date-inline { font-size: 11px; padding: 1px; }
}

/* ============================================================
   登录页（v70 公仔主题 · 手机）
   上方近景公仔图（assets/login-mobile.jpg）+ 下方登录卡，卡片上移压住图底
   ============================================================ */
@media (max-width: 760px) {
  /* 手机端卡片是白底，底部缝隙也铺白，避免出现深色/灰色横条 */
  body.login-mode { background: #fff; }
  .login-page { padding: 0; align-items: stretch; background: #0f1a24; }
  .login-stage {
    flex-direction: column; max-width: none; min-height: 100vh;
    border-radius: 0; box-shadow: none; background: #fff;
  }
  .login-art {
    flex: 0 0 auto;
    height: 38vh; min-height: 216px; max-height: 340px;
    background: linear-gradient(160deg, #b8ddf8 0%, #cfe8fb 60%, #e2f0fd 100%);
  }
  /* 近景图：眼睛与笑脸在偏上位置，用 34% 锚点保证小屏也露出完整表情 */
  .login-art-img { object-position: center 34%; }
  /* 图底渐白，和下面的白卡片接缝自然 */
  .login-art::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 44px; z-index: 1;
    background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
    pointer-events: none;
  }
  .login-card {
    flex: 1 1 auto; justify-content: flex-start;
    margin-top: -16px; padding: 22px 20px 54px;
    border-radius: 18px 18px 0 0; position: relative; z-index: 3;
    box-shadow: 0 -8px 24px rgba(15,26,36,.10);
  }
  .login-foot { bottom: 20px; font-size: 10.5px; }
  /* 手机端不压标签，标题交给下方卡片，画面更干净 */
  .login-art-cap { display: none; }
  .login-logo { margin-bottom: 18px; }
  .login-logo h1 { font-size: 19px; }
}

/* v172：报工页录入区的按钮栏在手机上一条横滑，不摊成三四行把表头挤下去 */
#entry-tools.grid-tools { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
#entry-tools.grid-tools::-webkit-scrollbar { display: none; }
#entry-tools .gt-pageacts { flex-wrap: nowrap; flex: 0 0 auto; }
#entry-tools .col-menu { max-height: 50vh; overflow: auto; }

/* v174：录入区最左侧「勾选退单」列 —— 手机上给足够好点的尺寸，别压成一条线 */
@media (max-width: 1024px) {
  .row-editor th.th-chk, .row-editor td.td-chk { min-width: 38px; width: 38px; }
  .row-editor td.td-chk input[type="checkbox"] { width: 20px; height: 20px; }
}

/* v176：退单选择器在手机上 —— 搜索框占满、表格横滑、确认键好点 */
@media (max-width: 1024px) {
  .doc-pick-bar { gap: 6px; }
  .doc-pick-bar .input { flex: 1 1 100%; max-width: none; height: 34px; }
  .doc-pick-wrap { max-height: 52vh; -webkit-overflow-scrolling: touch; }
  .doc-pick-wrap table { min-width: 620px; }
  .doc-pick-wrap tbody tr td { padding: 7px 6px; font-size: 12px; }
  .doc-pick-wrap input.pick-chk { width: 20px; height: 20px; }
  .doc-pick-sel { width: 100%; margin: 0 0 6px; }
}