/* ==========================================================================
   modules.css — 模块视图（商品查找 / 货品分析）
   规则：左侧导航栏（#sidebar）保持原样不动，模块内容全部显示在右侧内容区
   用法：shell 内由 js/modules.js 控制 #moduleView 的显隐；
        独立页（analysis.html）用 body.mv-standalone 承载同一套结构
   ========================================================================== */

/* ---------- 1. 容器与令牌 ---------- */
.modview{
  --mv-bg:#f5f5f7; --mv-panel:#ffffff; --mv-panel2:#f2f2f7;
  --mv-line:rgba(0,0,0,.1); --mv-line2:rgba(0,0,0,.18);
  --mv-text:#1d1d1f; --mv-muted:#6e6e73;
  --mv-accent:#0071e3; --mv-accent-soft:rgba(0,113,227,.1);
  --mv-green:#34c759; --mv-yellow:#ff9f0a; --mv-red:#ff3b30;
  font-family:var(--font,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif);
  font-size:13.5px; line-height:1.5; color:var(--mv-text);
  -webkit-text-size-adjust:100%;
}
@media (prefers-color-scheme: dark){
  .modview{
    --mv-bg:#000000; --mv-panel:#1c1c1e; --mv-panel2:#2c2c2e;
    --mv-line:rgba(255,255,255,.12); --mv-line2:rgba(255,255,255,.24);
    --mv-text:#f5f5f7; --mv-muted:#98989f;
    --mv-accent:#0a84ff; --mv-accent-soft:rgba(10,132,255,.16);
  }
}
.modview *, .modview *::before, .modview *::after{ box-sizing:border-box; }
.modview input, .modview select, .modview button{ font-family:inherit; }

/* shell 内：模块视图占据内容列，画布让位 */
#moduleView{ display:none; }
#moduleView.show{
  display:flex; flex-direction:column; flex:1; min-height:0; min-width:0;
  background:var(--mv-bg); overflow:hidden;
}
body.module-open #contentCol > main{ display:none; }
/* 模块态：整个右侧内容区让位（工具条上的仓库/卖场、编辑/查看、俯视/3D、设置全部收起），
   移动端的导航抽屉入口由模块头部的 #modNav 接管，见第 2 节 */
body.module-open #contentCol > .toolbar{ display:none; }
body.module-open #statusbar,
body.module-open #mobileSheetBar,
body.module-open .fab-mode{ display:none !important; }

/* 独立页：整页就是模块视图 */
body.mv-standalone{
  display:flex; flex-direction:column; height:100%; overflow:hidden;
  background:#f5f5f7;
}
@media (prefers-color-scheme: dark){ body.mv-standalone{ background:#000; } }
body.mv-standalone #moduleView{ display:flex; flex:1; min-height:0; }

/* ---------- 2. 模块头部 ---------- */
.modview .mv-head{
  flex:none; display:flex; align-items:center; gap:10px;
  padding:9px 14px; background:var(--mv-panel);
  border-bottom:1px solid var(--mv-line);
  position:relative; z-index:3;
}
.modview .mv-back{
  flex:none; width:34px; height:34px; border:0; border-radius:9px;
  background:var(--mv-panel2); color:var(--mv-text); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:19px; line-height:1; text-decoration:none;
}
.modview .mv-back:hover{ background:var(--mv-panel2); }
.modview .mv-head h2{ margin:0; font-size:15.5px; font-weight:700; letter-spacing:-.01em; }
.modview .mv-head .mv-sub{
  margin-left:auto; font-size:11.5px; color:var(--mv-muted);
  border:1px solid var(--mv-line); border-radius:999px; padding:3px 9px; white-space:nowrap;
}

/* 移动端专用：工具条被模块态隐藏后，导航抽屉入口挪到模块头部 */
.modview .mv-navbtn{ display:none; flex:none; }
@media (max-width: 768px){
  .modview .mv-navbtn{
    display:inline-flex; align-items:center; justify-content:center;
    width:34px; height:34px; padding:0; border-radius:9px;
    background:var(--mv-panel2); color:var(--mv-text);
  }
}

/* ---------- 3. 内容区 ---------- */
.modview .mv-body{
  flex:1; min-height:0; overflow:auto; -webkit-overflow-scrolling:touch;
  padding:12px 14px 26px;
}
/* flush：内容自带完整布局（如散称拆包 iframe），不要外层内边距、由子元素自己撑满 */
.modview .mv-body.flush{ padding:0; overflow:hidden; display:flex; }
.modview .mv-frame{ flex:1; width:100%; height:100%; min-height:0; border:0; background:#fff; display:block; }
.modview .mv-view{ display:none; }
.modview .mv-view.on{ display:block; }
.modview .mv-foot{ padding:12px 2px 4px; color:var(--mv-muted); font-size:11.5px; text-align:center; }

/* 通用控件 */
.modview .mv-card{
  background:var(--mv-panel); border:1px solid var(--mv-line);
  border-radius:13px; padding:12px; margin-bottom:12px;
}
.modview .mv-card > h3{ margin:0 0 10px; font-size:12.5px; font-weight:700; color:var(--mv-muted); }
.modview .mv-legend{ display:flex; gap:14px; flex-wrap:wrap; font-size:11.5px; color:var(--mv-muted); padding:9px 2px 0; }
.modview .mv-legend b{ color:var(--mv-text); }
.modview .mv-note{
  background:var(--mv-panel2); border:1px solid var(--mv-line); color:var(--mv-muted);
  border-radius:10px; padding:8px 11px; font-size:12px; margin-bottom:12px;
}
.modview .mv-note b{ color:var(--mv-text); }
.modview .mv-scroll{ overflow:auto; -webkit-overflow-scrolling:touch; }
.modview .mv-empty{ padding:30px 14px; text-align:center; color:var(--mv-muted); font-size:13px; }

/* ==========================================================================
   模块一：商品查找
   ========================================================================== */
.modview .mv-search{ display:flex; gap:8px; margin-bottom:9px; }
.modview .mv-search input{
  flex:1; min-width:0; height:42px; padding:0 12px; font-size:15px; color:var(--mv-text);
  background:var(--mv-panel); border:1px solid var(--mv-line); border-radius:10px; outline:none;
}
.modview .mv-search input:focus{ border-color:var(--mv-accent); }
.modview .mv-search button{
  flex:none; height:42px; padding:0 18px; border:0; border-radius:10px;
  font-size:14.5px; font-weight:600; background:var(--mv-text); color:var(--mv-panel); cursor:pointer;
}
.modview .mv-hint{ padding:0 2px 10px; color:var(--mv-muted); font-size:12px; }
.modview .mv-list{ display:flex; flex-direction:column; gap:10px; }
.modview .mv-item{ background:var(--mv-panel); border:1px solid var(--mv-line); border-radius:12px; padding:11px 12px; }
.modview .mv-item .nm{ font-size:15px; font-weight:700; line-height:1.35; }
.modview .mv-item .meta{ margin-top:5px; color:var(--mv-muted); font-size:12.5px; display:flex; flex-wrap:wrap; gap:10px; }
.modview .mv-item .meta b{ color:var(--mv-text); font-weight:600; }
.modview .mv-locs{ margin-top:9px; border-top:1px dashed var(--mv-line); padding-top:8px; display:flex; flex-direction:column; gap:7px; }
.modview .mv-loc{ display:flex; align-items:flex-start; gap:8px; font-size:13px; }
.modview .mv-loc .tag{
  flex:none; font-size:11px; padding:1px 7px; border-radius:6px; font-weight:600;
  background:var(--mv-accent-soft); color:var(--mv-accent);
}
.modview .mv-loc .tag.wh{ background:var(--mv-panel2); color:var(--mv-muted); }
.modview .mv-loc .where{ flex:1; line-height:1.45; }
.modview .mv-loc .qty{ flex:none; color:var(--mv-muted); font-size:12.5px; }
.modview .mv-none{ background:var(--mv-panel); border:1px solid var(--mv-line); border-radius:12px; padding:16px; text-align:center; }
.modview .mv-none .big{ font-size:15px; font-weight:700; color:var(--mv-red); line-height:1.5; word-break:break-all; }
.modview .mv-none .sub{ margin-top:6px; color:var(--mv-muted); font-size:13px; }
.modview .mv-skeleton{ background:var(--mv-panel); border:1px solid var(--mv-line); border-radius:12px; height:84px; position:relative; overflow:hidden; }
.modview .mv-skeleton::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(128,128,128,.12),transparent); animation:mvsk 1.1s infinite; }
@keyframes mvsk{ 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }

/* ==========================================================================
   模块二：货品分析 · 补货建议
   ========================================================================== */
.modview .mv-filters{ display:flex; flex-wrap:wrap; gap:10px 14px; align-items:flex-end; }
.modview .mv-f{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.modview .mv-f > label{ font-size:11px; color:var(--mv-muted); font-weight:600; }
.modview .mv-f input[type=text], .modview .mv-f input[type=date], .modview .mv-f select{
  font-size:13px; color:var(--mv-text); background:var(--mv-panel2);
  border:1px solid var(--mv-line); border-radius:9px; padding:7px 9px; min-width:0;
}
.modview .mv-f input[type=text]{ width:170px; }
.modview .mv-seg{ display:inline-flex; background:var(--mv-panel2); border:1px solid var(--mv-line); border-radius:10px; padding:3px; gap:2px; }
.modview .mv-seg button{
  font-size:12.5px; font-weight:600; color:var(--mv-text); background:transparent;
  border:0; border-radius:8px; padding:6px 13px; cursor:pointer;
}
.modview .mv-seg button.on{ background:var(--mv-panel); box-shadow:0 1px 3px rgba(0,0,0,.16); }
.modview .mv-quick{ display:flex; gap:6px; flex-wrap:wrap; }
.modview .mv-quick button{
  font-size:12px; font-weight:600; color:var(--mv-text); background:var(--mv-panel2);
  border:1px solid var(--mv-line); border-radius:999px; padding:5px 11px; cursor:pointer;
}
.modview .mv-quick button:hover{ border-color:var(--mv-accent); color:var(--mv-accent); }
.modview .mv-chk{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; }
.modview .mv-btn{
  font-size:13px; font-weight:600; background:var(--mv-accent); color:#fff;
  border:0; border-radius:9px; padding:8px 14px; cursor:pointer;
}
.modview .mv-btn.ghost{ background:var(--mv-panel2); color:var(--mv-text); border:1px solid var(--mv-line); }
.modview .mv-btn:disabled{ opacity:.4; cursor:not-allowed; }

.modview .mv-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(116px,1fr)); gap:10px; margin-bottom:12px; }
.modview .mv-kpi{ background:var(--mv-panel); border:1px solid var(--mv-line); border-radius:12px; padding:10px 12px; }
.modview .mv-kpi .k{ font-size:11px; color:var(--mv-muted); font-weight:600; }
.modview .mv-kpi .v{ font-size:19px; font-weight:700; margin-top:2px; }
.modview .mv-kpi .v.red{ color:var(--mv-red); }
.modview .mv-kpi .v.yellow{ color:var(--mv-yellow); }
.modview .mv-kpi .v.green{ color:var(--mv-green); }
.modview .mv-kpi .v.muted{ color:var(--mv-muted); }

.modview .mv-tablewrap{ background:var(--mv-panel); border:1px solid var(--mv-line); border-radius:13px; overflow:hidden; }
.modview .mv-tablewrap table{ border-collapse:collapse; width:100%; min-width:1180px; }
.modview .mv-tablewrap th, .modview .mv-tablewrap td{
  padding:9px 10px; text-align:left; border-bottom:1px solid var(--mv-line);
  white-space:nowrap; font-variant-numeric:tabular-nums;
}
.modview .mv-tablewrap th{
  position:sticky; top:0; z-index:2; background:var(--mv-panel2);
  font-size:11.5px; color:var(--mv-muted); font-weight:700;
}
.modview .mv-tablewrap tbody tr:hover{ background:var(--mv-accent-soft); }
.modview .mv-tablewrap td.nm{ white-space:normal; min-width:190px; font-weight:600; }
.modview .mv-tablewrap td.num{ text-align:right; }
.modview .mv-tag{ display:inline-block; font-size:11.5px; font-weight:700; border-radius:999px; padding:2px 9px; }
.modview .mv-tag.red{ background:rgba(255,59,48,.14); color:var(--mv-red); }
.modview .mv-tag.yellow{ background:rgba(255,159,10,.16); color:#a15e00; }
.modview .mv-tag.green{ background:rgba(52,199,89,.16); color:#1e7a37; }
.modview .mv-tag.gray{ background:var(--mv-panel2); color:var(--mv-muted); }
@media (prefers-color-scheme: dark){
  .modview .mv-tag.yellow{ color:#ffd60a; }
  .modview .mv-tag.green{ color:#30d158; }
}
.modview .mv-suggest{ font-weight:700; color:var(--mv-accent); }
.modview .mv-add{
  font-size:12px; font-weight:600; background:var(--mv-panel2); color:var(--mv-text);
  border:1px solid var(--mv-line); border-radius:8px; padding:4px 10px; cursor:pointer; white-space:nowrap;
}
.modview .mv-add.in{ background:var(--mv-accent-soft); border-color:var(--mv-accent); color:var(--mv-accent); }

.modview .mv-supplier{ margin-bottom:12px; }
.modview .mv-supplier .head{
  display:flex; align-items:center; gap:10px; padding:9px 12px;
  background:var(--mv-panel2); border:1px solid var(--mv-line);
  border-radius:12px 12px 0 0; border-bottom:0;
}
.modview .mv-supplier .head b{ font-size:13.5px; }
.modview .mv-supplier .head .meta{ margin-left:auto; font-size:12px; color:var(--mv-muted); }
.modview .mv-supplier .body{
  border:1px solid var(--mv-line); border-radius:0 0 12px 12px;
  overflow:hidden; background:var(--mv-panel);
}
.modview .mv-supplier table{ border-collapse:collapse; width:100%; min-width:880px; }
.modview .mv-supplier th, .modview .mv-supplier td{
  padding:9px 10px; text-align:left; border-bottom:1px solid var(--mv-line);
  white-space:nowrap; font-variant-numeric:tabular-nums;
}
.modview .mv-supplier th{ background:var(--mv-panel2); font-size:11.5px; color:var(--mv-muted); font-weight:700; }
.modview .mv-supplier input.qty{
  width:74px; text-align:right; font-size:13px; background:var(--mv-panel2);
  color:var(--mv-text); border:1px solid var(--mv-line); border-radius:8px; padding:5px 7px;
}
.modview .mv-rm{ font-size:12px; font-weight:600; background:transparent; border:0; color:var(--mv-red); cursor:pointer; }

/* 底部补货单条：贴内容区底部（不遮左侧导航） */
.modview .mv-bar{
  position:sticky; bottom:0; left:0; right:0;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin:12px -14px 0; padding:10px 14px;
  background:var(--mv-panel); border-top:1px solid var(--mv-line);
}
.modview .mv-bar .sum{ font-size:13px; font-weight:600; }
.modview .mv-bar .sp{ margin-left:auto; }

@media (max-width:768px){
  .modview .mv-head{ padding:8px 10px; }
  .modview .mv-head h2{ font-size:14.5px; }
  .modview .mv-head .mv-sub{ display:none; }
  .modview .mv-body{ padding:10px 10px 22px; }
  .modview .mv-f{ width:100%; }
  .modview .mv-f input[type=text]{ width:100%; }
  .modview .mv-f input[type=date]{ width:100%; }
  .modview .mv-kpi .v{ font-size:17px; }
  .modview .mv-bar{ margin:12px -10px 0; padding:10px; }
  .modview .mv-bar .mv-btn{ flex:1; }
  .modview .mv-tablewrap table{ min-width:1040px; }
}
