/* ============================================================
 * 上云选品·云仓商城系统 · 页面外壳适配层（Shell Adapter）
 * 用途：把已有的 entries/*.html（主题为旧「纸感精密」绿系）平滑接到
 *      css/ds-tokens.css 的新设计系统上，八端统一外壳与品牌蓝。
 *
 * 加载顺序（必须）：
 *   1) ../css/ds-tokens.css      ← 设计令牌（品牌蓝 #1e6fff，权威）
 *   2) theme.css                 ← 旧主题的工具类（布局/组件骨架，仍在用）
 *   3) ../css/ds-shell.css       ← 本文件：别名桥接 + 旧色收敛 + 外壳
 *
 * 设计原则：
 *   - 令牌层只覆盖颜色与圆角/阴影的「值」，不改结构类名，避免动 19 个页面。
 *   - theme.css 用 --r-s/--r-m/--r-l 与 --sh-sm/--sh-card，ds-tokens 用
 *     --radius-*/--shadow-*，本文件做双向别名，任一写法都生效。
 *   - 角色强调色统一走 --accent（ds-roles.js / 页面 data-role 驱动），
 *     旧页面的 --rc/--rcw 由 --accent/--accent-weak 回填，二者永远同步。
 * ============================================================ */

/* ---------- 1. 变量别名桥接（旧名 → 新令牌） ---------- */
:root{
  /* 圆角：theme.css 用 --r-*，ds-tokens 用 --radius-* */
  --r-s:var(--radius-s);
  --r-m:var(--radius-m);
  --r-l:var(--radius-l);

  /* 阴影：theme.css 用 --sh-sm/--sh-card，ds-tokens 用 --shadow-* */
  --sh-sm:var(--shadow-sm);
  --sh-card:var(--shadow-sm);
  --shadow-card:var(--shadow-sm);

  /* 旧主题里的 brand-2 / brand-ink（渐变与深色文字用）→ 由品牌蓝派生 */
  --brand-2:#165ae0;
  --brand-ink:#12409e;

  /* 旧主题 line-2（描边加深一级） */
  --line-2:#cbd5e1;
}

/* ---------- 2. 角色强调色：旧 --rc/--rcw 与新 --accent 双向同步 ---------- */
/* 页面可用 data-role 声明身份；未声明则由页面自身 <style> 的 --rc 决定。 */
:root{
  --rc:var(--accent);
  --rcw:var(--accent-weak);
}
[data-role]{
  --accent:var(--rc);
  --accent-weak:var(--rcw);
}

/* 八端官方色（与 js/ds-roles.js 严格一致；data-role 优先于页面内联 --rc） */
[data-role="merchant"]  { --rc:#1e6fff; --rcw:#eaf1ff; }
[data-role="provider"]  { --rc:#7c4dff; --rcw:#f3e8ff; }
[data-role="store"]     { --rc:#0ea5e9; --rcw:#e0f2fe; }
[data-role="pos"]       { --rc:#f59e0b; --rcw:#fef3c7; }
[data-role="logistics"] { --rc:#10b981; --rcw:#d1fae5; }
[data-role="supplier"]  { --rc:#0891b2; --rcw:#cffafe; }
[data-role="ad"]        { --rc:#ec4899; --rcw:#fce7f3; }
[data-role="portal"]    { --rc:#1e6fff; --rcw:#eaf1ff; }
/* 平台侧（非八端，但共用外壳） */
[data-role="sales"]     { --rc:#D97B29; --rcw:#FBEEDF; }
[data-role="platform_admin"]     { --rc:#5B6B8C; --rcw:#EAEEF3; }
[data-role="console"]   { --rc:#475569; --rcw:#E2E8F0; }
[data-role="user"]      { --rc:#E0786B; --rcw:#FCEAE7; }

/* ---------- 3. 旧主题残留色收敛到新令牌 ---------- */
/* 旧页面的渐变按钮/底色若写死绿色，这里统一拉回品牌蓝 */
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent);filter:brightness(.94)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-text{color:var(--accent)}
.topbar .nav a:hover,.topbar .nav a.on{background:var(--accent-weak);color:var(--accent)}
.card{border-radius:var(--radius-l);box-shadow:var(--shadow-sm)}
.ecard:hover{border-color:var(--rc)}
.ecard .ico{background:var(--rcw);color:var(--rc)}
.ecard .role,.ecard .go{color:var(--rc)}
.trust .ti{background:var(--brand-weak);color:var(--brand)}
.tag.ok{background:#dcfce7;color:#15803d}
.tag.warn{background:#fef3c7;color:#b45309}
.tag.danger{background:#fee2e2;color:#b91c1c}
.tag.info{background:#dbeafe;color:#1d4ed8}

/* ---------- 4. 统一工作台外壳（八端一致，与门户演示同构） ---------- */
/* 侧栏：深色直角块，强调色只作用于「当前项」和角色徽标 */
.shell{display:grid;grid-template-columns:228px 1fr;min-height:100vh}
.shell-side{background:var(--sidebar);color:#cbd5e1;padding:18px 12px;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:auto}
.shell-side .s-brand{display:flex;align-items:center;gap:10px;padding:4px 8px 16px;
  border-bottom:1px solid var(--sidebar-2);margin-bottom:12px}
.shell-side .s-brand .mk{width:32px;height:32px;border-radius:9px;background:var(--accent);
  color:#fff;display:grid;place-items:center;font-weight:800;font-size:15px;flex:0 0 auto}
.shell-side .s-brand .nm{font-size:14px;font-weight:800;color:#fff;line-height:1.2}
.shell-side .s-brand .ps{font-size:11px;color:#94a3b8;margin-top:2px}
.shell-side .s-group{font-size:11px;font-weight:700;color:#64748b;
  letter-spacing:.6px;padding:14px 10px 6px}
.shell-side .s-item{display:flex;align-items:center;gap:10px;padding:9px 10px;
  border-radius:8px;font-size:13.5px;color:#cbd5e1;cursor:pointer;
  margin-bottom:2px;transition:.15s;text-decoration:none}
.shell-side .s-item:hover{background:var(--sidebar-2);color:#fff}
.shell-side .s-item.on{background:var(--accent);color:#fff;font-weight:700}
.shell-side .s-item .ic{width:16px;text-align:center;opacity:.8;flex:0 0 auto}
.shell-side .s-foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--sidebar-2)}
.shell-side .s-foot a{display:flex;align-items:center;gap:9px;padding:8px 10px;
  border-radius:8px;font-size:12.5px;color:#94a3b8}
.shell-side .s-foot a:hover{background:var(--sidebar-2);color:#fff}

/* 主区 */
.shell-main{display:flex;flex-direction:column;min-width:0;background:var(--bg)}
.shell-top{display:flex;align-items:center;gap:12px;padding:12px 20px;
  background:var(--surface);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20}
.shell-top .st-title{font-size:15px;font-weight:800;color:var(--ink)}
.shell-top .st-crumb{font-size:12px;color:var(--ink-3);margin-top:1px}
.shell-top .st-sp{flex:1}
.shell-top .st-search{width:240px;background:var(--bg);border:1px solid var(--line);
  border-radius:8px;padding:7px 12px;font-size:13px;color:var(--ink-3)}
.shell-top .st-ic{width:34px;height:34px;border-radius:8px;background:var(--bg);
  border:1px solid var(--line);display:grid;place-items:center;cursor:pointer;
  color:var(--ink-2);position:relative;flex:0 0 auto}
.shell-top .st-ic .dot{position:absolute;top:6px;right:7px;width:7px;height:7px;
  border-radius:50%;background:#ef4444}
.shell-top .st-ai{background:var(--accent);color:#fff;border:none;font-weight:700;
  font-size:13px;padding:8px 14px;border-radius:8px;cursor:pointer;
  display:flex;align-items:center;gap:6px;font-family:inherit}
.shell-top .st-me{width:32px;height:32px;border-radius:50%;background:var(--accent);
  color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700;flex:0 0 auto}
.shell-body{padding:20px;flex:1;min-width:0}

/* 顶部角色色细条（保留旧设计里的端识别） */
.rolebar{position:fixed;top:0;left:0;right:0;height:4px;background:var(--accent);z-index:60}
body.has-shell .rolebar{position:sticky;top:0;height:4px}

/* ---------- 5. 既有工作台（.app / .sidebar / .main）迁入设计系统外观 ----------
 * 背景：merchant / agent / terminal 三端已用 .app > .sidebar + .main 结构，
 *       与设计系统 .shell > .shell-side + .shell-main 同构。
 * 策略：不改 DOM，仅用 CSS 把旧类名接到新令牌上——深色侧栏、品牌蓝强调、
 *       顶栏细线、内容区浅底。这样三端零风险获得统一外观，
 *       后续新页面直接用 .shell 类名即可，两者视觉一致。
 * ------------------------------------------------------------------------- */

/* 外层：去掉旧的角色色粗描边，改为整屏铺满 */
body.has-app{background:var(--bg)}
body.has-app .rolebar{position:fixed;top:0;height:4px;background:var(--accent);z-index:60}
.app{border:0;display:flex;min-height:100vh;background:var(--bg)}

/* 侧栏：深色（与 .shell-side 完全一致的视觉） */
.sidebar{width:228px;flex:0 0 auto;background:var(--sidebar);color:#cbd5e1;
  border-right:1px solid var(--sidebar-2);padding:18px 12px;display:flex;
  flex-direction:column;position:sticky;top:0;height:100vh;overflow:auto}
.sidebar .side-logo{display:flex;align-items:center;gap:10px;font-weight:800;
  font-size:15px;padding:4px 8px 16px;border-bottom:1px solid var(--sidebar-2);
  margin-bottom:12px;color:#fff}
.sidebar .side-logo .mark{width:32px;height:32px;border-radius:9px;background:var(--accent);
  color:#fff;display:grid;place-items:center;font-size:15px;font-weight:800;flex:0 0 auto;
  box-shadow:none}
.sidebar .side-group{font-size:11px;font-weight:700;color:#64748b;letter-spacing:.6px;
  padding:14px 10px 6px}
.sidebar .side-item{display:flex;align-items:center;gap:10px;padding:9px 10px;
  border-radius:8px;font-size:13.5px;color:#cbd5e1;cursor:pointer;margin-bottom:2px;
  transition:.15s;text-decoration:none}
.sidebar .side-item:hover{background:var(--sidebar-2);color:#fff}
.sidebar .side-item.on{background:var(--accent);color:#fff;font-weight:700}
.sidebar .side-item .ic{width:16px;text-align:center;opacity:.8;flex:0 0 auto}
.sidebar .side-spacer{flex:1}
.sidebar .side-user{padding:12px 10px;border-top:1px solid var(--sidebar-2);
  font-size:12.5px;color:#94a3b8;margin-top:auto}

/* 主区 */
.app .main{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--bg)}
.app .main-top{display:flex;align-items:center;gap:12px;padding:12px 20px;
  background:var(--surface);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20}
.app .main-top .title{font-size:15px;font-weight:800;color:var(--ink)}
.app .main-top .grow{flex:1}
.app .main-top input{background:var(--bg);border:1px solid var(--line);
  border-radius:8px;padding:7px 12px;font-size:13px}
.app .main-body{padding:20px;flex:1;min-width:0}

/* 组件与令牌对齐（旧 .table / .row / .kpi 等） */
.app .kpis .kpi{border-radius:var(--radius-m);box-shadow:var(--shadow-sm)}
.app .card{border-radius:var(--radius-l);box-shadow:var(--shadow-sm)}
.app .table th{background:var(--bg);color:var(--ink-3);font-size:12px}
.app .table td{border-bottom:1px solid var(--line);font-size:13px}

@media(max-width:900px){
  .sidebar{display:none}
  .app .main-body{padding:14px}
}

/* ---------- 6. 全局响应式（手机 / 平板 / 笔记本 / 桌面 / 超宽） ----------
 * 断点体系：
 *   ≥1280px 桌面完整布局
 *   901–1279px 笔记本：布局不变，栅格自适应
 *   641–900px  平板：侧栏收起，双列 KPI，网格降列
 *   ≤640px     大屏手机：单列为主，登录/表格/触控优化
 *   ≤400px     小屏手机：进一步压缩字号与留白
 * 收敛原则：凡可能溢出的真实源（表格横滑 / 弹层 100% 受限 / 弹性子项收缩 /
 *        侧栏收起不残留负 margin / 长内容折行）均已逐项修复，故**不再**用
 *        html,body 的 overflow-x:hidden 去裁切——裁切即「遮挡」，违反界面要求。
 * ---------------------------------------------------------------------- */

/* 基础缩放：图片/视频/表格永不撑破容器 */
img,video,canvas{max-width:100%;height:auto}
iframe{max-width:100%}
pre,code{max-width:100%;overflow-x:auto}

/* 触屏友好：所有可点元素最小 40px 命中区（指针粗调，鼠标环境不受影响） */
@media(pointer:coarse){
  .btn,.btn-sm,.tag,.side-item,.s-item,.navitem,.tabs button{min-height:40px}
  input,select,textarea{font-size:16px}  /* 防 iOS 聚焦自动放大 */
}

/* ---------- 平板及以下（≤900px） ---------- */
@media(max-width:900px){
  /* 不再整页裁切：真实溢出源已在 ds-responsive.css 第 6 节逐项收敛，
     用 overflow-x:hidden 隐藏内容属于「遮挡」，不符合界面适配要求。 */

  .wrap{padding:0 16px}
  .sec{padding:40px 0}

  /* 网格降列 */
  .grid2,.grid3{grid-template-columns:1fr !important}
  .kpis{grid-template-columns:repeat(2,1fr) !important}
  .egrid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr)) !important}
  .trust{grid-template-columns:1fr 1fr !important}

  /* 工作台外壳：侧栏收起（平板横屏 ≥1024 会随断点恢复，见下方 min-width 段） */
  .shell{grid-template-columns:1fr}
  .shell-side{display:none}
  .shell-top .st-search{display:none}
  .shell-body{padding:14px}
  .sidebar{display:none}
  .app .main-body{padding:14px}
  .app .main-top{flex-wrap:wrap;row-gap:8px;padding:10px 14px}
  .app .main-top .field{display:none}          /* 顶栏搜索框收起，内容区内提供筛选 */
  .app .wb-kpis{grid-template-columns:repeat(2,1fr)}

  /* 登录层：任何屏宽都不溢出 */
  .login-mask{padding:0 16px}
  .login-box{width:100% !important;max-width:360px;padding:26px 20px !important}

  /* 表格：允许容器内横向滑动，而非撑破页面 */
  .card,.list,.panel{overflow-x:auto}
  .card table,.list table,.panel table{min-width:520px}

  /* 扫码中心：标签栏可滑动、取景框随容器 */
  .tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap}
  .tabs button{flex:0 0 auto;white-space:nowrap}
  .scanner .reticle{width:100%;max-width:320px}
}

/* 平板横屏（≥901px）恢复双栏工作台（.app 侧栏本就由 min-width 控制，此处恢复 shell） */
@media(min-width:901px){
  .shell{grid-template-columns:228px 1fr}
  .shell-side{display:flex}
}

/* ---------- 大屏手机（≤640px） ---------- */
@media(max-width:640px){
  .trust{grid-template-columns:1fr !important}
  .kpis{grid-template-columns:1fr 1fr !important;gap:10px}
  .kpi{padding:14px}
  .kpi .v{font-size:20px}
  .egrid{grid-template-columns:1fr !important}
  .entry{margin:16px 12px !important;padding:40px 18px !important}
  .card{padding:16px;border-radius:var(--radius-m)}
  .modal,.dialog{width:calc(100vw - 24px) !important;max-width:420px !important}
  .acts{flex-direction:column;align-items:stretch}
  .acts .btn{width:100%}
  /* 小冰助手：收窄并限高，减少对内容的遮挡（用户可点标题栏收起） */
  .assistant{width:248px !important;right:10px;bottom:10px}
  .assistant .ab{max-height:110px}
}

/* ---------- 小屏手机（≤400px） ---------- */
@media(max-width:400px){
  body{font-size:14px}
  .kpis{grid-template-columns:1fr !important}
  .kpi .v{font-size:19px}
  .card{padding:14px}
  .shell-body,.app .main-body{padding:10px}
  .login-box{max-width:100%}
  h1{font-size:22px !important}
  h2{font-size:18px !important}
}

/* ---------- 超宽屏（≥1920px）：限宽居中，避免拉伸难读 ---------- */
@media(min-width:1920px){
  .wrap{max-width:1440px}
  .app .main-body,.shell-body{max-width:1560px;margin:0 auto;width:100%}
}

/* ---------- 打印/低能力设备兜底 ---------- */
@media(prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}

/* ---------- 7. 响应式 ---------- */