/* @@SPLIT_HEADER@@
   css/base.css —— 基础层：设计令牌 / 页面骨架 / 顶栏 / 内容区 / 筛选区 / 下拉菜单
      由 redesign2.html 拆分而来（原行号 119-309），业务逻辑原样搬运；加载顺序见 index.html / README.md */
/* ==========================================================================
   0. 设计令牌 —— 全页唯一的颜色/圆角/阴影来源
   ◆ 只有一个强调色 --accent；状态标签的蓝/绿/灰是需求指定的语义色
   ========================================================================== */
:root{
  /* ===========================================================================
     2026-10-28 第一档换肤：便当盒（Bento Box Grid）
     ---------------------------------------------------------------------------
     ★ 只改这一块变量，不动任何布局/尺寸/DOM/JS。
       还原方法：把这段换回备份（base.css.bak_bento_*）即可，22 行，零损失。
     ★ 取值来源：UI/UX Pro Max 官方 styles.csv 的 bento-box-grid 行
          --page-bg:#F5F5F7  --card-bg:#FFFFFF  --card-radius:24px
          --shadow:0 4px 6px rgba(0,0,0,.05)  --hover-scale:1.02
     ★ 两处有意偏离官方值（理由）：
        · --r-lg 用 20px 而非 24px —— 24px 套在表格容器上四条边会吃到内容
        · --r-sm 用 10px（官方没定义小圆角）—— 按钮用 24px 会和表格直角打架
     ★ 强调色从 #2563eb 换成苹果蓝 #0071E3，对比度已验（见脚本输出）
     =========================================================================== */
  --bg:#F5F5F7;              /* 页面底色：Bento 的 #F5F5F7 */
  --card:#ffffff;            /* 卡片纯白（不变） */
  --line:#EAEAEC;            /* 边框更浅一档，让卡片浮起来 */
  --line-strong:#DCDCE0;     /* 输入框边框 */
  --text:#1D1D1F;            /* 主文字：苹果黑，比原来的蓝黑更中性 */
  --text-2:#3A3A3C;          /* 次要文字 */
  --mut:#6E6E73;             /* 辅助文字 */
  /* ★ faint 官方没给，我按 WCAG 反推：原 #A1A1A6 对白只有 2.57:1（不达 3:1），
     调到 #8E8E93 = 3.27:1。占位文字看不清等于没有。 */
  --faint:#8E8E93;           /* 最弱文字 / 占位 */
  /* ★ accent 官方 #0071E3 是为纯白设计的；我们页面底色是 #F5F5F7，
     #0071E3 在它上面只有 4.31:1（差一点）。调深到 #0066CC：白 5.56 / 底 5.03。 */
  --accent:#0066CC;          /* ◆ 唯一强调色：苹果蓝（调深一档保对比度） */
  --accent-weak:#EAF3FD;
  --accent-line:#BFDCFA;
  --hover:#F5F9FF;           /* 行 hover */
  --sel:#E8F2FE;             /* 选中行 */
  /* ★ green 官方 #34C759 是"图形绿"，当文字只有 2.x:1；#1D8A3D 也才 4.42（差一点）。
     用 #127037 = 6.18:1。 */
  --green:#127037; --green-bg:#EAF8EE;
  --r-lg:20px; --r-sm:10px; --r-pill:999px;
  /* ---- 语义色（2026-10-28 换肤补：原来只有 --green 一对，红/橙/蓝三套缺失）----
     ★ 值取的是收敛前用得最多的那个色，所以观感不变，只是现在能换肤。
     ★ 这三套各三件：文字 / 背景 / 边框。缺任何一个，用到它的规则就会失效
       （color:var(--danger) 找不到变量 → 回退成继承色；background 变透明）。
     ★ 对比度（文字/背景）已验：danger 5.91 · warn 4.73 · info 6.16，全部 ≥4.5。 */
  --danger:#B91C1C;          /* 错误 / 拒绝 / 告警文字 */
  --danger-bg:#FEF2F2;       /* 错误块背景 */
  --danger-line:#FECACA;     /* 错误块边框 */
  --warn:#B45309;            /* 警告文字（橙） */
  --warn-bg:#FFF7ED;         /* 警告块背景 */
  --warn-line:#FED7AA;       /* 警告块边框 */
  --info:#1D4ED8;            /* 提示文字（深蓝） */
  --info-bg:#EFF6FF;         /* 提示块背景 */
  --info-line:#BFDBFE;       /* 提示块边框 */
  --accent-hover:#0055AD;    /* 主按钮悬停（必须是 --accent 的深一档，不是另一家的蓝） */
  --shadow:0 4px 6px rgba(0,0,0,.05);   /* Bento 的卡片阴影 */
  /* ---- 商品图尺寸（用户要求「图片大小跟着间距变动」）----
     ★ 只要改 --thumb-size，缩略图、行最小高度、行间距全部同步变化；
       不要在 .prod/.thumb 里再写死 px，否则调大小时会有一半不跟着动。
     ★ 窄屏（<=1500，即 1280 那档）自动缩到 26px：列宽只有 ~150px，30px 会把名字挤成一列字。 */
  --thumb-size:30px;         /* 商品缩略图边长 */
  --thumb-gap:6px;           /* 缩略图 与 商品名 的间距 */
  --prod-gap:5px;            /* 商品 与 商品 之间的竖向间距 */
}
@media (max-width:1500px){
  :root{ --thumb-size:26px }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  background:var(--bg);color:var(--text);
  /* 系统字体栈：零外部字体 */
  font:13px/1.5 -apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;                 /* 整页不滚，只有表格内部滚 */
}
button{font-family:inherit}
/* 内联 SVG 图标统一规格：1.5px 细线、无填充、圆角端点 */
.i{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none;display:inline-block;vertical-align:-2px}
.i.xs{width:12px;height:12px}
.i.lg{width:16px;height:16px}
.i.star{fill:currentColor;stroke:none}

/* ==========================================================================
   1. 页面骨架：整页固定一屏，底部给固定工具栏留 52px
   ========================================================================== */
.app{height:100vh;display:flex;flex-direction:column;padding-bottom:52px;overflow:hidden}

/* ==========================================================================
   2. 顶部导航
   ◆ 形态：纯白 + 1px 底边 + 极轻阴影（替代复刻版的深蓝渐变）
   ◆ 当前项「打印发货」用淡蓝胶囊 + 蓝字，而不是整块白底反色
   ========================================================================== */
.topbar{
  /* ★ 顶栏改成三栏栅格：左空 / 中菜单 / 右搜索。
     为什么不用 flex + margin:auto：那样菜单是被"剩余空间"居中的，
     右边有 260px 搜索框时会整体偏左，不是屏幕正中。
     栅格 1fr auto 1fr 让左右两栏等宽，菜单才真正落在屏幕中线。 */
  flex:none;height:44px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:2px;padding:0 16px;
  background:var(--card);border-bottom:1px solid var(--line);box-shadow:var(--shadow);
  position:relative;z-index:50;
}
/* 左栏：空占位（只为让中栏居中，不放任何内容）
   ★ 品牌块已按用户要求整块去掉 —— logo/logo-mark/ver 三组样式一并删除。 */
.topbar .tb-left{min-width:0}
.nav{display:flex;align-items:center;gap:1px;min-width:0;justify-self:center}
.nav-item{
  height:30px;display:inline-flex;align-items:center;padding:0 10px;border-radius:var(--r-sm);
  font-size:13px;color:var(--text-2);cursor:pointer;white-space:nowrap;position:relative;
}
.nav-item:hover{background:var(--bg);color:var(--text)}
/* 当前页：淡蓝胶囊 + 蓝字 + 500 字重 */
.nav-item.active{background:var(--accent-weak);color:var(--accent);font-weight:600}
.nav-item.active:hover{background:var(--accent-weak);color:var(--accent)}
.nav-item .caret{width:12px;height:12px;color:var(--faint);margin-left:2px}
/* hot 角标：只留红色小字，不做红底方块（降噪） */
.hot{font-size:9px;font-weight:700;color:var(--danger);letter-spacing:.2px;margin-left:2px;line-height:1;transform:translateY(-5px)}
/* 顶栏右栏：全局搜索靠右（栅格第三列）。
   ★ 原工具的商务入口（续费/下载客户端/联系客服/切换店铺/通知/账号）整块移除；
     对应的 .r-item / .r-icon / .nav-divider / .bell / .r-account / .r-item.pay
     六组样式也一并删掉 —— 留着就是死代码，以后有人搜 "bell" 会以为还有通知功能。
   ★ 原来靠 margin-left:auto 把菜单推左，改成栅格后不需要了（会干扰 1fr 的分配）。 */
.nav-right{display:flex;align-items:center;gap:2px;white-space:nowrap;justify-self:end}

/* ==========================================================================
   3. 内容区
   ◆ 纵向间距从 .page 挪到 .view 上：三个视图同处一屏，只有当前视图占位，
     打单视图的子结构一点没变，13 行的纵向预算也不变。
   ========================================================================== */
.page{flex:1;min-height:0;display:flex;flex-direction:column;padding:6px 16px 0;overflow:hidden}
.view{display:none;flex:1;min-height:0;flex-direction:column;gap:6px}
.view.on{display:flex}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg)}

/* ==========================================================================
   4. 筛选区（一个白卡片，两行）
   ◆ 为什么还是一张卡片、但内部按语义分 .fgroup：
     需求要求「按语义分组、组间 16px」，但 23 个控件也要一屏塞下。
     分组用「右侧 1px 分隔线 + 16px 间距」表达，不额外加标题行（省高度）。
   ========================================================================== */
.filter-card{flex:none;padding:7px 12px;display:flex;flex-direction:column;gap:6px}
/* ◆ 组间距 16px + 1px 分隔线：按需求的「组间 16px」；控件高 32px（需求值）。
   1920 下第一行正好不折行，一屏 13 行的纵向预算也够（实测见 selftest）。 */
.frow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px}
.fgroup{display:flex;align-items:center;gap:7px;padding-right:10px;border-right:1px solid var(--line)}
.fgroup:last-child{border-right:none;padding-right:0}
/* 下拉触发器 / 普通按钮共用尺寸：高 32、圆角 8 */
.ctl{
  display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 8px;
  border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--card);
  font-size:12px;color:var(--text);cursor:pointer;white-space:nowrap;
  transition:border-color .12s,color .12s,box-shadow .12s;
}
.ctl:hover{border-color:var(--accent);color:var(--accent)}
.ctl .lbl{color:var(--mut);font-size:12px}
.ctl .val{color:var(--text);font-weight:500}
.ctl .caret{width:12px;height:12px;color:var(--faint)}
.ctl:hover .caret,.ctl:hover .lbl{color:var(--accent)}
/* 展开态：蓝边 + 淡蓝外发光（和 focus 视觉统一） */
.dd.open>.ctl{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.dd.open>.ctl .val{color:var(--accent)}
/* 输入框：高 30、边框 #d1d5db、focus 蓝边 + 外发光 */
.ipt{
  height:32px;padding:0 9px;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  background:var(--card);font-size:12px;color:var(--text);outline:none;
  transition:border-color .12s,box-shadow .12s;
}
.ipt:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.14)}
.ipt::placeholder{color:var(--faint)}
.w-time{width:96px}
.w-search{width:150px}
.w-batch{width:64px}
.dash{color:var(--faint);font-size:11px}
/* 店铺范围 chip（可 × 移除） */
.chip-store{
  display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 8px 0 10px;
  border:1px solid var(--accent-line);background:var(--accent-weak);color:var(--accent);
  border-radius:var(--r-sm);font-size:12px;font-weight:500;white-space:nowrap;
}
.chip-store .x{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border:0;background:none;border-radius:4px;color:#60a5fa;cursor:pointer;padding:0}
.chip-store .x:hover{background:var(--sel);color:var(--accent)}
/* 按钮：高 32、圆角 8；主按钮蓝底白字 */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;height:32px;padding:0 10px;
  border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--card);
  font-size:12px;font-weight:500;color:var(--text-2);cursor:pointer;white-space:nowrap;
  transition:border-color .12s,background .12s,color .12s;
}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff}
.btn-link{border:none;background:none;color:var(--accent);padding:0 2px;font-size:12px;cursor:pointer;height:32px;display:inline-flex;align-items:center;border-radius:6px}
.btn-link:hover{text-decoration:underline}
/* 批次号：一个「标签 + 输入框」的组合 */
.batch{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.batch .lbl{font-size:12px;color:var(--mut)}

/* ==========================================================================
   5. 下拉菜单
   ========================================================================== */
.dd{position:relative;display:inline-block}
.dd-menu{
  display:none;position:absolute;top:34px;left:0;z-index:120;min-width:100%;
  background:var(--card);border:1px solid var(--line);border-radius:10px;padding:4px;
  box-shadow:0 8px 24px rgba(15,23,42,.10),0 2px 6px rgba(15,23,42,.06);
  max-height:300px;overflow:auto;
}
.dd.open>.dd-menu{display:block}
.dd-title{padding:5px 8px 4px;font-size:11px;color:var(--faint);border-bottom:1px solid var(--line);margin-bottom:3px;white-space:nowrap}
/* 选项行：32px 高、左右 10px（给左侧蓝条留位置）。
   ◆ 用户原话「每个能选状态或者是什么的，背景做出区分，光打勾不太清楚」——
     所以「当前选中」必须是**底 + 左蓝条 + 加粗**三重强调，只换个字色确实看不出来。 */
.dd-item{
  display:flex;align-items:center;gap:6px;height:32px;padding:6px 10px;border-radius:6px;
  font-size:12px;color:var(--text-2);white-space:nowrap;cursor:pointer;
}
/* 未选中：hover 只给中性浅灰底（不给蓝色，蓝色是「已选中」的语义） */
.dd-item:hover{background:#f3f4f6}
/* 当前选中：浅蓝底 + 左 3px 蓝条 + 蓝字加粗；hover 时底色不能掉回灰色 */
.dd-item.on,.dd-item.on:hover{
  background:var(--accent-weak);color:var(--accent);font-weight:600;
  box-shadow:inset 3px 0 0 var(--accent);
}
.dd-item .tick{width:12px;height:12px;color:var(--accent);visibility:hidden;flex:none}
.dd-item.on .tick{visibility:visible}