/* ============================================================
 * 智企办公 · 商家端外壳与基础组件语言（源力设计系统 / Yuanli）
 * ------------------------------------------------------------
 * 位置：public/m/shell.css —— 商家端物理隔离目录，客户端不引用。
 * 作用域：**全部选择器前缀 `.shell.hc-m`**（商家端根类，由 shellM 挂载）。
 *         客户端 `.shell.hc-c` 与企业中心 `.shell.hc-mem` 均不受影响。
 *
 * 🔴 铁律（改动前必读）：
 *   1. `.side` / `.main` / `.content` 三个类名是**运行时契约**，不得改名——
 *      `50-render.js` 的软渲染按 `.content` / `.side` 选择器做节点复用与滚动回填，
 *      `60-boot.js` 亦用 `closest('.content')` 定位作用域。本文件只覆写属性，不动结构。
 *   2. `body.side-collapsed`（折叠态）与 `@media (max-width:1180px)`（64px 图标栏）
 *      由 styles.css 负责，本文件**不重定义**，故侧栏宽度覆写仅限 `min-width:1181px`。
 *   3. 只改**视觉语言**（色 / 圆角 / 字阶 / 密度 / 描边），不改布局几何——
 *      各页 `.shell.hc-mxxx` 的专属版式仍由 styles.css 负责。
 * ============================================================ */

/* ---------------------------------------------------------------- 1. 骨架 */

.shell.hc-m{
  height:100vh;min-height:0;overflow:hidden;
  background:var(--color-bg-page);
  font-family:var(--font-family);
  color:var(--color-text-1);
}
.shell.hc-m .main{flex:1 1 auto;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden}
/* 🔴 刻意**不设 padding** —— 各页有专属内边距规则：
 *   `.shell.hc-mprod .content` / `.shell.hc-mcat .content`（22px 24px 32px）、
 *   `.shell.hc-mprod .content` 的 ≤900px 降级（16px）、`.shell.hc-mcust-nav .content`。
 *   它们与本规则**同为 (0,3,0) 特异性**，而 public/m/ 加载更晚 ⇒ 一旦在此写 padding，
 *   会静默覆盖掉那些页面规则（按级联规则推导：商品页 ≤900px 的 16px 会变回这里的值）。
 *   内边距一律交给基础 `.content`（22px 24px 40px 32px）与各页专属规则。 */
.shell.hc-m .content{
  flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
}
/* 侧栏：源力 200px / 浅灰底 / 无右边框（靠底色分层）。窄屏 64px 图标栏由 styles.css 接管 */
@media (min-width:1081px){
  .shell.hc-m .side{width:var(--m-side-w);background:var(--color-bg-4);border-right:0}
}

/* ---------------------------------------------------------------- 2. 侧栏 */

.shell.hc-m .side .brand{padding:var(--space-4) var(--space-5)}
.shell.hc-m .brand-logo{
  width:32px;height:32px;border-radius:var(--radius-sm);
  background:var(--color-primary);color:var(--color-on-primary);
  font-size:var(--font-size-h4);font-weight:var(--font-weight-semibold);
}
.shell.hc-m .brand-name{font-size:var(--font-size-h4);font-weight:var(--font-weight-semibold);color:var(--color-text-1)}
.shell.hc-m .brand-sub{font-size:var(--font-size-body);color:var(--color-text-3)}
/* 🔴 2026-10-25 Notion 重构：圆角 taxonomy 归位。
 *   `.side-fold` / `.nav a` 是**可点击控件** ⇒ 4px → 8px（DESIGN.md "buttons 8px"）；
 *   `.nav .cnt` 是计数徽标 ⇒ 4px → 9999px 胶囊（DESIGN.md "Pill Tag … 9999px"）；
 *   `.help-card` / `.side-user` 是**面板** ⇒ 4px → 12px（与 `.card` 同档）；
 *   `.brand-logo` / `.prod-thumb` 是小型装饰 ⇒ 保持 4px（DESIGN.md "small"）。 */
.shell.hc-m .side-fold{color:var(--color-text-3);border-radius:var(--radius-md)}
.shell.hc-m .side-fold:hover{background:var(--color-bg-hover);color:var(--color-text-1)}
.shell.hc-m .side-sep{background:var(--color-border-2)}

/* 分组标题（业务中心 / 客户团队 / 基础配置） */
.shell.hc-m .nav-cap{
  font-size:var(--font-size-body);font-weight:var(--font-weight-medium);
  color:var(--color-text-3);padding:var(--space-4) var(--space-5) var(--space-1);
}

/* 菜单项：选中态只保留「主色文字 + 2px 左指示条」一种强调方式，不加底色 */
.shell.hc-m .nav{padding:0 var(--space-2);gap:2px}
.shell.hc-m .nav a{
  height:36px;gap:var(--space-2);padding:0 var(--space-3);
  border-radius:var(--radius-md);
  color:var(--color-text-2);
  font-size:var(--font-size-h4);font-weight:var(--font-weight-regular);
}
.shell.hc-m .nav a:hover{background:var(--color-bg-hover);color:var(--color-text-1)}
.shell.hc-m .nav a.on{background:transparent;color:var(--color-primary);font-weight:var(--font-weight-medium)}
.shell.hc-m .nav a.on::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:2px;height:16px;border-radius:var(--radius-sm);background:var(--color-primary);
}
.shell.hc-m .nav .cnt{
  margin-left:auto;font-size:var(--font-size-body);font-weight:var(--font-weight-medium);
  border-radius:var(--radius-full);padding:1px 6px;
  background:var(--color-warning-bg);color:var(--color-warning);
}
.shell.hc-m .nav .cnt.b{background:var(--color-primary-bg);color:var(--color-primary)}

/* 侧栏底部：帮助卡 / 账号卡 / 退出登录 */
.shell.hc-m .side-foot{padding:var(--space-3);border-top:1px solid var(--color-border-2)}
.shell.hc-m .help-card{
  background:var(--color-bg-1);border:1px solid var(--color-border-2);
  border-radius:var(--radius-lg);color:var(--color-text-3);font-size:var(--font-size-body);
}
.shell.hc-m .help-card b{font-size:var(--font-size-body);color:var(--color-text-1)}
.shell.hc-m .help-card a{font-size:var(--font-size-body);font-weight:var(--font-weight-medium);color:var(--color-link)}
/* 🔴 2026-10-25 Notion 重构：`.side-user` 是**面板**（带边框的卡片）⇒ 4px → 12px，与 `.card` 同档。 */
.shell.hc-m .side-user{background:var(--color-bg-1);border:1px solid var(--color-border-2);border-radius:var(--radius-lg)}
.shell.hc-m .side-user .u{font-size:var(--font-size-body);font-weight:var(--font-weight-medium);color:var(--color-text-1)}
.shell.hc-m .side-user .c{font-size:var(--font-size-caption);color:var(--color-text-3)}
.shell.hc-m .avatar{background:var(--color-primary-bg);color:var(--color-primary)}

/* ------------------------------------------------------- 3. 页头与面包屑 */

.shell.hc-m .crumb{font-size:var(--font-size-body);color:var(--color-text-3);margin-bottom:var(--space-1)}
.shell.hc-m .page-head{gap:var(--space-3);margin-bottom:var(--space-6)}
.shell.hc-m .page-title{
  font-size:var(--font-size-h1);line-height:var(--line-height-h1);
  font-weight:var(--font-weight-semibold);color:var(--color-text-1);
}
.shell.hc-m .page-sub{font-size:var(--font-size-lead);line-height:var(--line-height-lead);color:var(--color-text-3)}
.shell.hc-m .page-head .acts{gap:var(--space-2)}

/* ---------------------------------------------------- 4. 基础组件视觉语言 */

/* 4.1 按钮
 * 🔴 2026-10-25 Notion 重构：圆角 4px → **8px**（DESIGN.md "buttons 8px"）。
 *   同时把三处 transition 的 .15s 统一为 **.2s ease**（DESIGN.md："Keep motion at 200ms
 *   with ease timing for hovers and transitions"）。
 *    taxonomy（本次确立，全端一致）：
 *      面板/容器（card / tbl-wrap / kpi / qtile / alert）→ 12px（--radius-lg，DESIGN.md "cards 12px"）
 *      交互控件（btn / input / select / chip / pg）    → 8px （--radius-md）
 *      状态胶囊（badge）                              → 9999px（--radius-full，DESIGN.md "pills"）
 *      小型装饰（brand-logo / 缩略图）                 → 4px （--radius-sm，DESIGN.md "small"） */
.shell.hc-m .btn{
  height:var(--m-ctrl-h);border-radius:var(--radius-md);padding:0 var(--space-4);
  font-size:var(--font-size-h4);font-weight:var(--font-weight-medium);gap:var(--space-1);
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.shell.hc-m .btn.pri{background:var(--color-primary);color:var(--color-on-primary)}
.shell.hc-m .btn.pri:hover{background:var(--color-primary-hover)}
.shell.hc-m .btn.pri.sh{box-shadow:none}
.shell.hc-m .btn.sec{background:var(--color-bg-1);border:1px solid var(--color-text-1);color:var(--color-text-1)}
.shell.hc-m .btn.sec:hover{background:var(--color-bg-hover)}
.shell.hc-m .btn.ghost{background:var(--color-bg-1);border:1px solid var(--color-border-3);color:var(--color-text-2)}
.shell.hc-m .btn.ghost:hover{background:var(--color-bg-hover)}
.shell.hc-m .btn.danger{background:var(--color-danger);color:var(--color-on-primary)}
.shell.hc-m .btn.danger-o{background:var(--color-bg-1);border:1px solid var(--color-danger);color:var(--color-danger)}
.shell.hc-m .btn.danger-o:hover{background:var(--color-danger-bg)}
.shell.hc-m .btn.link{
  height:auto;padding:0 var(--space-1);border-radius:var(--radius-md);
  background:none;color:var(--color-link);font-weight:var(--font-weight-medium);font-size:var(--font-size-h4);
}
.shell.hc-m .btn.link.danger{color:var(--color-danger)}
.shell.hc-m .btn.sm{height:26px;font-size:var(--font-size-body);padding:0 var(--space-3)}
.shell.hc-m .btn:disabled{background:var(--color-bg-5);color:var(--color-text-4)}

/* 4.2 卡片：静态面**无阴影**，仅 1px 发丝线；圆角 8px → 12px（DESIGN.md "cards 12px"） */
.shell.hc-m .card{
  background:var(--color-bg-card);border:1px solid var(--color-border-2);
  border-radius:var(--radius-lg);box-shadow:none;padding:var(--space-4) var(--space-5);
}
.shell.hc-m .card-title{font-size:var(--font-size-h3);line-height:var(--line-height-h3);font-weight:var(--font-weight-medium);color:var(--color-text-1)}

/* 4.3 表格 */
/* 4.3 表格：外框是一张卡 ⇒ 12px 圆角（与 .card 同档） */
/* 🔴 2026-10-25 Notion 重构：补 `box-shadow:none`。
 *   共享层 `base.css:225` 的 `.tbl-wrap` 带 `box-shadow:var(--sh1)`，而本规则此前**没有复位阴影**
 *   ⇒ 商家端每一张表格卡都继承了那个投影；且 `.shell.hc-m` 的令牌桥接（pages.css:1644-1692）
 *   **没有映射 `--sh1`/`--sh2`**（只有 `.login/#boot/#toast-root/#modal-root` 那段映射了），
 *   于是 `var(--sh1)` 一路回落到 `base.css:31` 的旧值 `0 1px 4px rgba(15,23,42,.04)`。
 *   ⇒ 表象是「表格卡带着一层灰投影」，与 DESIGN.md "Do not add shadows to content cards" 相悖。
 *   `.card`（本文件 §4.2）一直显式写了 `box-shadow:none`，只有 `.tbl-wrap` 漏了，故在此补齐。
 *   ⚠️ 这不是新加样式，而是把既有的「边框派」口径补完整；CDP 实测修复前后见验收单。 */
.shell.hc-m .tbl-wrap{background:var(--color-bg-card);border:1px solid var(--color-border-2);border-radius:var(--radius-lg);overflow:hidden;box-shadow:none}
.shell.hc-m .tbl th{
  background:var(--color-table-header-bg);color:var(--color-table-header-text);
  font-size:var(--font-size-body);font-weight:var(--font-weight-medium);
  padding:var(--space-3) var(--space-4);
}
.shell.hc-m .tbl td{
  border-top:1px solid var(--color-table-border);color:var(--color-text-1);
  font-size:var(--font-size-h4);padding:var(--space-3) var(--space-4);
}
.shell.hc-m .tbl tr:hover td{background:var(--color-table-row-hover)}
.shell.hc-m .tbl .thumb,
.shell.hc-m .tbl .prod-thumb{border-radius:var(--radius-sm);background:var(--color-bg-4)}
.shell.hc-m .tbl .main-name{font-size:var(--font-size-h4);font-weight:var(--font-weight-medium);color:var(--color-text-1)}
.shell.hc-m .tbl .num{font-weight:var(--font-weight-medium);color:var(--color-text-1)}
.shell.hc-m .tbl .meta{font-size:var(--font-size-body);color:var(--color-text-3)}
.shell.hc-m .tbl .ops a{margin-right:var(--space-3);font-size:var(--font-size-h4)}
.shell.hc-m .tbl .ops a.danger{color:var(--color-table-action-danger)}

/* 4.4 状态标签：4px → **9999px 胶囊**（DESIGN.md "Pill Tag … border-radius 9999px"）。
 *   高度仍锁 22px，配 0 8px 内距即成标准胶囊；不加边框、不加阴影。 */
.shell.hc-m .badge{
  height:22px;padding:0 var(--space-2);border-radius:var(--radius-full);
  font-size:var(--font-size-body);font-weight:var(--font-weight-medium);
}
.shell.hc-m .badge.amber{background:var(--color-warning-bg);color:var(--color-warning)}
.shell.hc-m .badge.blue{background:var(--color-primary-tag-bg);color:var(--color-primary)}
.shell.hc-m .badge.green{background:var(--color-success-bg);color:var(--color-success)}
.shell.hc-m .badge.gray{background:var(--color-bg-4);color:var(--color-text-3)}
.shell.hc-m .badge.red{background:var(--color-danger-bg);color:var(--color-danger)}
.shell.hc-m .badge.outline{background:var(--color-bg-1);border:1px solid var(--color-border-3);color:var(--color-text-3)}

/* 4.5 分页：控件 → 8px 圆角 */
.shell.hc-m .pg button{
  width:28px;height:28px;border-radius:var(--radius-md);
  border:1px solid var(--color-border-3);background:var(--color-bg-1);color:var(--color-text-2);
}
.shell.hc-m .pg button:hover{border-color:var(--color-primary);color:var(--color-primary)}
.shell.hc-m .pg button.on{
  background:var(--color-primary);border-color:var(--color-primary);
  color:var(--color-on-primary);font-weight:var(--font-weight-medium);
}

/* 4.6 输入与下拉：控件 → 8px 圆角 */
.shell.hc-m .input,
.shell.hc-m select.input,
.shell.hc-m textarea.input{
  border:1px solid var(--color-border-3);border-radius:var(--radius-md);
  padding:6px var(--space-3);font-size:var(--font-size-h4);color:var(--color-text-1);
}
.shell.hc-m textarea.input{height:auto}
.shell.hc-m .input:focus,
.shell.hc-m textarea.input:focus{border-color:var(--color-primary);box-shadow:0 0 0 2px var(--state-focus)}
.shell.hc-m .input.err{border-color:var(--color-danger)}
.shell.hc-m .input:disabled{background:var(--color-bg-5);color:var(--color-text-4)}
.shell.hc-m .sel select{
  height:var(--m-ctrl-h);border-radius:var(--radius-md);
  border:1px solid var(--color-border-3);background:var(--color-bg-1);
  color:var(--color-text-2);font-size:var(--font-size-lead);padding:0 28px 0 var(--space-3);
}

/* 4.7 筛选 chip：控件 → 8px 圆角 */
.shell.hc-m .chip{
  border:1px solid var(--color-border-3);border-radius:var(--radius-md);
  background:var(--color-bg-1);color:var(--color-text-2);font-size:var(--font-size-body);
}
.shell.hc-m .chip input{accent-color:var(--color-primary)}
.shell.hc-m .chip:has(input:checked){
  border-color:var(--color-primary);background:var(--color-primary-bg);
  color:var(--color-primary);font-weight:var(--font-weight-medium);
}

/* 4.8 提示条：通栏面板 → 12px（与 .card 同档） */
.shell.hc-m .alert{
  border:1px solid transparent;border-radius:var(--radius-lg);
  background:var(--color-warning-bg);color:var(--color-warning);
  font-size:var(--font-size-h4);padding:var(--space-3) var(--space-4);
}
.shell.hc-m .alert .ic{background:var(--color-warning);color:var(--color-on-primary)}
.shell.hc-m .alert a{color:var(--color-warning);font-weight:var(--font-weight-medium)}

/* 4.9 统计卡与快捷入口卡：8px → 12px（与 .card 同档，静态面无阴影）
 * 🔴 Notion 重构：`.qtile:hover` 原带 `box-shadow:var(--shadow-1)` —— DESIGN.md 明令
 *   "Do not add shadows to content cards … shadows appear only on the product UI mockup
 *    and nav bar"。故 hover 只改**描边色**（主色），不再抬阴影；视觉层次由发丝线承担。 */
.shell.hc-m .kpi{
  border:1px solid var(--color-border-2);border-left:0;border-radius:var(--radius-lg);
  background:var(--color-bg-card);box-shadow:none;padding:var(--space-4) var(--space-5);
}
.shell.hc-m .kpi b{
  font-size:var(--font-size-display);line-height:var(--line-height-display);
  font-weight:var(--font-weight-semibold);color:var(--color-text-1);
}
.shell.hc-m .kpi .l{font-size:var(--font-size-body);color:var(--color-text-3)}
.shell.hc-m .kpi .d{font-size:var(--font-size-body);font-weight:var(--font-weight-regular)}
.shell.hc-m .kpi .d.up{color:var(--color-success)}
.shell.hc-m .kpi .d.dn{color:var(--color-warning)}
.shell.hc-m .qtile{
  background:var(--color-bg-card);border:1px solid var(--color-border-2);
  border-radius:var(--radius-lg);box-shadow:none;padding:var(--space-4);
  transition:border-color .2s ease;
}
.shell.hc-m .qtile:hover{border-color:var(--color-primary)}
.shell.hc-m .qtile .q1 b{font-size:var(--font-size-h4);font-weight:var(--font-weight-medium);color:var(--color-text-1)}
.shell.hc-m .qtile .q2,.shell.hc-m .qtile .q3{font-size:var(--font-size-body);color:var(--color-text-3)}
.shell.hc-m .qtile .badge{top:var(--space-3);right:var(--space-3)}

/* 4.9b Notion 彩色卡片族（2026-10-25 掌柜拍板引入）
 * 用法：DESIGN.md "Accent Feature Card —— Background one of the accent hues …
 *   Functions as a colored panel that paints the canvas"。给「功能块」用单色底，
 *   以此替代明令禁止的阴影/渐变来做视觉变化。
 * 🔴 三条纪律（与 theme.css 的 --nt-* 注释一致）：
 *   ① 只用于**卡片/磁贴/空状态**，绝不填按钮（每屏只有一个实色按钮 = 主色）；
 *   ② 墨色：除 `.a-night` 用白，其余**一律黑**（实测对比度 marigold 11.55 /
 *      sky-wash 8.83 / coral 5.92 / mocha 6.19 —— 全过 AA；白字压 marigold 仅 1.82，不可用）；
 *   ③ `.a-signal`（#097FE8）**只限装饰位**，不得用于任何可点击元素，否则一屏出现两个"像按钮的蓝"。
 * 色轮转：Notion 的做法是 "a rotating cast of accent hues" —— 不固定语义、按位置轮换，
 *   故这里不按业务含义配色，只保证相邻两块不同色、且每块墨色对比度过 AA。 */
.shell.hc-m .qtile.a-marigold{background:var(--nt-marigold);border-color:transparent;color:var(--color-text-1)}
.shell.hc-m .qtile.a-marigold .q1 b,.shell.hc-m .qtile.a-marigold .q2,.shell.hc-m .qtile.a-marigold .q3{color:var(--color-text-1)}
.shell.hc-m .qtile.a-sky{background:var(--nt-sky-wash);border-color:transparent;color:var(--color-text-1)}
.shell.hc-m .qtile.a-sky .q1 b,.shell.hc-m .qtile.a-sky .q2,.shell.hc-m .qtile.a-sky .q3{color:var(--color-text-1)}
.shell.hc-m .qtile.a-coral{background:var(--nt-coral);border-color:transparent;color:var(--color-text-1)}
.shell.hc-m .qtile.a-coral .q1 b,.shell.hc-m .qtile.a-coral .q2,.shell.hc-m .qtile.a-coral .q3{color:var(--color-text-1)}
/* 「暗色岛」：Notion 用 midnight 做 light page 上的反色块，全端仅此一处，克制使用 */
.shell.hc-m .qtile.a-night{background:var(--nt-midnight);border-color:transparent;color:#FFFFFF}
.shell.hc-m .qtile.a-night .q1 b{color:#FFFFFF}
.shell.hc-m .qtile.a-night .q2,.shell.hc-m .qtile.a-night .q3{color:rgba(255,255,255,.72)}
.shell.hc-m .qtile.a-night:hover{border-color:var(--nt-midnight)}
/* 彩色磁贴的 hover 不改描边色（描边在彩底上不可见），改用轻微压暗 */
.shell.hc-m .qtile.a-marigold:hover,.shell.hc-m .qtile.a-sky:hover,.shell.hc-m .qtile.a-coral:hover{filter:brightness(.97)}

/* 4.10 文字链与辅助文字 */
.shell.hc-m .link{color:var(--color-link);font-weight:var(--font-weight-medium)}
.shell.hc-m .link.danger{color:var(--color-danger)}
.shell.hc-m .link.dim{color:var(--color-text-3);font-weight:var(--font-weight-regular)}
.shell.hc-m .hint{font-size:var(--font-size-body);color:var(--color-text-3)}
.shell.hc-m .meta{font-size:var(--font-size-body);color:var(--color-text-3)}

/* ------------------------------------------------------------- 5. 可达性 */

.shell.hc-m .btn:focus-visible,
.shell.hc-m .nav a:focus-visible,
.shell.hc-m .pg button:focus-visible,
.shell.hc-m .chip:focus-visible,
.shell.hc-m .link:focus-visible{
  outline:2px solid var(--color-primary);outline-offset:2px;
}

@media (prefers-reduced-motion:reduce){
  .shell.hc-m .btn,
  .shell.hc-m .qtile,
  .shell.hc-m .nav a{transition:none}
}