/* PeptideFlow ERP — 移动端适配 v2.0 */

/* ─── 汉堡菜单按钮 ─── */
.mob-menu{display:none;width:34px;height:34px;border:none;background:none;cursor:pointer;padding:5px;border-radius:7px;flex-shrink:0}
.mob-menu:hover{background:var(--bg,#f5f5f0)}
.mob-menu span{display:block;width:18px;height:1.5px;background:var(--t1,#111);margin:4px auto;border-radius:2px;transition:.25s}
.mob-ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:49}

/* ═══════ 平板 (<1100px) ═══════ */
@media(max-width:1100px){
  .sr{grid-template-columns:repeat(2,1fr)!important}
  .g53,.g33,.g2,.g32{grid-template-columns:1fr!important}
  .fr{grid-template-columns:1fr!important}
  .asg{grid-template-columns:1fr!important}
  .dr{width:90vw!important;max-width:560px}
}

/* ═══════ 手机 (<768px) ═══════ */
@media(max-width:768px){

  /* ── 汉堡按钮显示 ── */
  .mob-menu{display:flex;align-items:center;justify-content:center}

  /* ── 侧边栏: 固定+隐藏，左滑出 ── */
  .sb{position:fixed!important;left:-280px;top:0;height:100vh;width:260px!important;z-index:50;transition:left .3s cubic-bezier(.4,0,.2,1);box-shadow:none}
  .sb.mob-open{left:0;box-shadow:4px 0 24px rgba(0,0,0,.12)}
  .mob-ov.show{display:block;z-index:49}
  /* 注意: 不要设 .L{flex-direction:column}，侧边栏是position:fixed脱离文档流 */

  /* ── 主区域占满 ── */
  .mn{width:100%!important;min-width:0}

  /* ── 顶栏 ── */
  .tb{height:50px;padding:0 14px!important}
  .tb h1,.tb-l h1{font-size:15px!important}
  .tb-l{gap:8px}
  .tb-date{display:none}
  .sbox{display:none!important}
  .tb-r .ib:not(#notifBtn){display:none}

  /* ── 内容区 ── */
  .ct{padding:14px 12px 80px!important}

  /* ── 统计卡片 ── */
  .sr{grid-template-columns:1fr 1fr!important;gap:8px!important}
  .sc{padding:12px 14px!important}
  .sc-v{font-size:18px!important}
  .sc-l{font-size:11px!important}
  .sc-ic{width:26px!important;height:26px!important}
  .sc-ic svg{width:13px!important;height:13px!important}
  .sc-top{margin-bottom:6px!important}
  .sc-b{font-size:10px!important}

  /* ── 卡片 ── */
  .cd{padding:14px!important;border-radius:10px!important;margin-bottom:10px!important}
  .cd-h{flex-direction:column;align-items:flex-start;gap:8px}
  .cd-t{font-size:13px!important}
  .cd-h .btn,.cd-h .tlr{width:100%}

  /* ── 工具栏 ── */
  .tlb{gap:6px;margin-bottom:10px!important;flex-wrap:wrap}
  .tls{max-width:100%!important;flex:1 1 100%!important;height:34px!important}
  .tls input{font-size:13px!important}
  .tsel{flex:1;min-width:0;height:34px!important;font-size:12px!important}
  .tlr{margin-left:0!important;width:100%;justify-content:flex-start;gap:6px}
  .tlr .btn{flex:1;justify-content:center;font-size:11px;padding:6px 8px}

  /* ── 表格: 水平滚动容器（JS动态包裹+CSS兜底） ── */
  .dt-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -14px;padding:0 14px}
  /* 无dt-wrap时表格也可滚 */
  .cd{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .dt{min-width:580px}
  .dt th{padding:7px 8px!important;font-size:10px!important;white-space:nowrap}
  .dt td{padding:7px 8px!important;font-size:11.5px!important;white-space:nowrap}

  /* ── 网格布局 ── */
  .g53,.g33,.g2,.g32{grid-template-columns:1fr!important;gap:10px!important}
  .fr{grid-template-columns:1fr!important}
  .asg{grid-template-columns:1fr!important}

  /* ── 图表 ── */
  .cw{min-height:180px}
  .pl{grid-template-columns:1fr 1fr;gap:2px 10px}
  .pli{font-size:11px!important}

  /* ── 弹窗: 底部Sheet模式 ── */
  .mo.sh{align-items:flex-end!important}
  .ml{width:100vw!important;max-width:100vw!important;border-radius:14px 14px 0 0!important;max-height:88vh!important;padding:18px 16px!important;box-shadow:0 -8px 30px rgba(0,0,0,.1)!important}
  .ml h2{font-size:15px!important;margin-bottom:14px!important}
  .fa{flex-wrap:wrap}
  .fa .btn{flex:1;justify-content:center;min-width:0}

  /* ── 抽屉: 全屏 ── */
  .dr{width:100vw!important;max-width:100vw!important}
  .dr-head{padding:12px 14px!important}
  .dr-head h2{font-size:14px!important}
  .dr-close{width:28px!important;height:28px!important}
  .dr-body{padding:14px!important}
  /* 抽屉tab横向滚动 */
  .dr-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;padding:0 14px!important;gap:0}
  .dr-tab{flex-shrink:0;padding:8px 12px!important;font-size:11.5px!important;white-space:nowrap}

  /* ── 分页 ── */
  .pgn{flex-direction:column;gap:8px;align-items:flex-start}
  .pgn-pages span{padding:4px 8px;font-size:11px}

  /* ── 信息格 ── */
  .ig{gap:4px!important}
  .ig-item{padding:6px 8px!important}
  .ig-label{font-size:10px!important}
  .ig-value{font-size:12px!important}

  /* ── 漏斗 ── */
  .funnel{flex-direction:column;gap:6px}
  .fn-bar{height:24px}

  /* ── 线索卡片 ── */
  .lead-grid{grid-template-columns:1fr!important}
  .lead-card{padding:12px 14px!important}

  /* ── 快捷操作 ── */
  .qa-grid{grid-template-columns:1fr 1fr!important;gap:8px!important}
  .qa{padding:12px!important}
  .qa-l{font-size:11px!important}

  /* ── 产品选择器 ── */
  .pp{grid-template-columns:1fr!important}
  .pp-tree{border-right:none;border-bottom:1px solid var(--bdr);padding-right:0;padding-bottom:10px;margin-bottom:10px;display:flex;gap:5px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .pp-cat{flex-shrink:0;font-size:11px!important;padding:5px 10px!important}
  .pp-grid{grid-template-columns:1fr 1fr!important;gap:8px!important}
  .pp-item{padding:10px!important}

  /* ── 角色卡 ── */
  #rolesGrid{display:grid!important;grid-template-columns:1fr!important}
  .role-card{padding:14px!important}

  /* ── 配对 ── */
  .crew-grid{grid-template-columns:1fr!important}

  /* ── Toast ── */
  .toast{right:12px!important;left:12px!important;text-align:center;justify-content:center;top:58px!important}

  /* ── 通知面板 ── */
  #notifPanel{right:0!important;left:0!important;width:100%!important;max-width:100%!important;top:50px!important;border-radius:0 0 12px 12px!important}

  /* ── 按钮 ── */
  .btn{font-size:11.5px;padding:6px 12px}
  .btn-s{padding:3px 8px;font-size:10.5px}
  .btn svg{width:13px;height:13px}

  /* ── 排名表 ── */
  .stSortBtn{font-size:10px!important;padding:3px 7px!important}
  .rb{width:18px!important;height:18px!important;font-size:9px!important}
  .ra{width:22px!important;height:22px!important;font-size:10px!important}

  /* ── 进度条 ── */
  .ag-bar{height:6px!important}
  .ag-label,.ag-val{font-size:11px!important}

  /* ── 购物车 ── */
  .cart-row{flex-wrap:wrap;gap:6px}
  .cart-qty button{width:28px;height:28px}
  .cart-summary{padding:12px!important}
  .cs-total{font-size:15px!important}

  /* ── 订单时间轴 ── */
  .otl{flex-wrap:wrap;gap:4px}
  .otl-step{min-width:60px}
  .otl-dot{width:20px;height:20px;font-size:9px}
  .otl-lbl{font-size:9px}
  .otl-line{display:none}

  /* ── 标签 ── */
  .tag{font-size:10px!important;padding:2px 6px!important}
  .tag-sm{font-size:9px!important;padding:1px 5px!important}

  /* ── 联系徽章 ── */
  .cb{font-size:10px!important;padding:1px 5px!important}

  /* ── 隐藏桌面专属元素 ── */
  .sb.collapsed .sb-lbl{display:none}

  /* ── 操作按钮组: 防溢出 ── */
  td:last-child>div{flex-wrap:wrap}

  /* ── 地址编辑 ── */
  .ce-row{flex-wrap:wrap}
  .ce-row select{width:100%!important;min-width:0!important}

  /* ── 功能开关 ── */
  .ft-row{flex-wrap:wrap;gap:8px}
  .ft-name{font-size:12px!important}
  .ft-desc{font-size:10px!important}

  /* ── 搜索弹窗 ── */
  #gsM .ml,#globalSearchM .ml{width:100vw!important;max-width:100vw!important;border-radius:0!important;max-height:100vh!important;height:100vh!important}
}

/* ═══════ 小屏手机 (<480px) ═══════ */
@media(max-width:480px){
  .sr{grid-template-columns:1fr!important}
  .qa-grid{grid-template-columns:1fr!important}
  .pp-grid{grid-template-columns:1fr!important}
  .demo-grid{grid-template-columns:1fr!important}
  .ig{grid-template-columns:1fr!important}
  .sc-v{font-size:16px!important}
  .ct{padding:12px 10px 80px!important}
  .cd{padding:12px!important}
  .ml{padding:14px 12px!important}
  .dt{min-width:500px}
}

/* ═══════ iOS安全区 ═══════ */
@supports(padding-bottom:env(safe-area-inset-bottom)){
  @media(max-width:768px){
    .ct{padding-bottom:calc(80px + env(safe-area-inset-bottom))!important}
    .ml{padding-bottom:calc(18px + env(safe-area-inset-bottom))!important}
    .sb{padding-bottom:env(safe-area-inset-bottom)}
  }
}

/* ═══════ 补丁: 遗漏组件 ═══════ */
@media(max-width:768px){
  /* clerk scope-bar */
  .scope-bar{flex-wrap:wrap;font-size:11px!important;padding:8px 12px!important;gap:6px}
  .scope-names{gap:3px}
  .scope-name{font-size:10px!important}

  /* clerk checkbox列 */
  .chk-col{width:28px!important}
  .chk-col input{width:14px!important;height:14px!important}

  /* clerk内联grid布局覆盖 */
  [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}

  /* 侧边栏logo文字 */
  .sb-logo-t div:first-child{font-size:12px!important}
  .sb-logo-t div:last-child{font-size:10px!important}

  /* 侧边栏用户区 */
  .sb-u-a{width:28px!important;height:28px!important;font-size:11px!important}
  .sb-u{gap:8px!important}

  /* 弹窗中的表单grid */
  .ml .fr{grid-template-columns:1fr!important}
  .ml .fg label{font-size:11px!important}
  .ml .fi{height:36px!important;font-size:13px!important}
  .ml textarea.fi{height:68px!important}

  /* 弹窗中的内联宽modal（如width:720px覆盖） */
  .ml[style*="width"]{width:100vw!important;max-width:100vw!important}

  /* 操作按钮行 */
  td .btn-s{padding:3px 7px!important;font-size:10px!important}

  /* 侧边栏active态点击反馈 */
  .mi:active{background:rgba(255,255,255,.1)!important}

  /* 手机端链接按钮 */
  .va{font-size:11px!important}

  /* 调试面板深色弹窗 */
  #dbgDetailM .ml{background:#1a1a2e!important;color:#e0e0e0!important}

  /* 购物车 */
  .addr-card{padding:10px 12px!important;border-radius:8px!important}
  .addr-card h4{font-size:12px!important}
  .addr-card p{font-size:11px!important}

  /* 报价/样品弹窗item grid */
  [style*="grid-template-columns:2fr"]{grid-template-columns:1fr!important}
  [style*="grid-template-columns:2.5fr"]{grid-template-columns:1fr!important}

  /* 拣取配额条 */
  [style*="grid-template-columns:1fr 340px"]{grid-template-columns:1fr!important}
  [style*="grid-template-columns:1fr 320px"]{grid-template-columns:1fr!important}

  /* 底部浮动操作 */
  .dr-actions{padding:12px 14px!important;flex-wrap:wrap;gap:6px!important}
  .dr-actions .btn{flex:1;justify-content:center;min-width:0}

  /* 搜索弹窗全屏 */
  [id$="SearchM"] .ml,[id="gsM"] .ml{border-radius:0!important;height:100vh!important;max-height:100vh!important}

  /* 甜甜圈图表 */
  .pc-v{font-size:18px!important}
  .pc-l{font-size:9px!important}

  /* 防止内容被键盘遮挡 */
  input:focus,textarea:focus,select:focus{scroll-margin-bottom:120px}

  /* 按钮文字不换行 */
  .btn{white-space:nowrap}

  /* 手机端sidebar折叠按钮隐藏 */
  .tb-l>.ib{display:none!important}
}

@media(max-width:480px){
  /* 超小屏tab */
  .tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap}
  .tab{flex-shrink:0;font-size:11px!important;padding:5px 12px!important}

  /* 弹窗操作栏 */
  .fa .btn{font-size:11px!important;padding:6px 10px!important}
}