/* ============================================================================
   为盛新能源维修连锁 · 六端统一视觉规范 V1.0
   ────────────────────────────────────────────────────────────────────────────
   这是全站唯一的颜色 / 圆角 / 阴影 / 字重来源。任何页面不得再自定十六进制色值。
   新增页面只需 <link rel="stylesheet" href="…/store/ui.css">，不要复制 :root。

   视觉来源：Stripe 设计语言
     靛蓝品牌色 #533afd · 深海军蓝正文 #061b31 · 蓝色调多层投影
   选它的原因（不是审美偏好，是解决三个真实缺陷）：
     1. 旧品牌蓝 #1677ff 与「在别人手上」的状态蓝几乎同色 → 用户分不清
        「这是按钮」还是「这是状态」。靛蓝 #533afd 与状态蓝 #1a56b3 色相
        相差 30° 以上，一眼可分。
     2. C 端旧品牌色 #0a9e63 与「已完成」的成功绿重合 → 绿色既当品牌又当
        状态。统一后绿色只表示成功，品牌统一靛蓝。
     3. 旧侧栏 #001529 是纯冷黑，与正文 #1f2329 的中性灰不同源，整屏发灰。
        Stripe 的 #1c1e54 深靛把侧栏拉进同一个蓝调家族。
   ========================================================================= */

:root {
  /* ── 品牌 ──────────────────────────────────────────────────────────────
     一个主色。全站所有「可点、可操作、当前选中」都用它。
     不要为「视觉丰富」再造第二品牌色。 */
  --ui-primary:        #533afd;
  --ui-primary-hover:  #4b34e4;
  --ui-primary-active: #422eca;
  --ui-primary-soft:   #eeebff;   /* 选中行、软底 */
  --ui-primary-soft-2: #d6d9fc;   /* 软底边框 */
  --ui-primary-text:   #3b22d6;   /* 软底上的文字，比主色深 */

  /* ── 正文三级 ──────────────────────────────────────────────────────────
     t1 是深海军蓝不是黑：纯黑在万级亮度的车间屏上刺眼，深蓝更稳。
     t3 的对比度实测 4.59:1（白底），压到 4.5 以上是为了让 11.5px 的
     提示字在强光下也读得出来——旧值 #8f959e 只有 3.02:1，不达标。 */
  --ui-text-1: #061b31;
  --ui-text-2: #4d5f78;
  --ui-text-3: #6b7688;
  --ui-text-inverse: #ffffff;

  /* ── 面 ────────────────────────────────────────────────────────────────
     底色偏冷的极浅蓝，不是中性灰——它让白色卡片浮起来而不是糊在一起。 */
  --ui-bg:        #f6f9fc;
  --ui-surface:   #ffffff;
  --ui-surface-2: #fafbfc;   /* 卡片内嵌区、表头 */
  --ui-border:    #e5edf5;
  --ui-border-2:  #d3dfec;   /* 输入框常态边 */
  --ui-divider:   #eef3f8;   /* 行分隔，比边框更轻 */

  /* ── 状态 ──────────────────────────────────────────────────────────────
     五个状态，全站同一套。任务状态机见 product-plan §06。
     多彩底一律「浅底 + 同色系文字 + 半透明同色边」，不用重色块。 */
  --ui-success:      #24b47e;
  --ui-success-text: #0f7a52;
  --ui-success-bg:   #eafaf3;
  --ui-success-bd:   #b7ead5;

  --ui-warning:      #e0a02a;
  --ui-warning-text: #8a5a00;
  --ui-warning-bg:   #fff8e8;
  --ui-warning-bd:   #fbe2b0;

  --ui-danger:       #dc2626;
  --ui-danger-text:  #b21f1f;
  --ui-danger-bg:    #fdecec;
  --ui-danger-bd:    #f8c9c9;

  --ui-info:         #1a56b3;
  --ui-info-text:    #17458f;
  --ui-info-bg:      #eef4ff;
  --ui-info-bd:      #cfdffb;

  --ui-neutral-bg:   #eef2f7;
  --ui-neutral-text: #5c6672;

  --ui-purple-bg:    #f4ecff;
  --ui-purple-text:  #6b21a8;

  /* ── 侧栏 ──────────────────────────────────────────────────────────────
     E1 / E2 / E6 共用。侧栏是导航不是装饰，配色只比正文深一档。 */
  --ui-side:       #1c1e54;
  --ui-side-2:     #16184a;   /* 品牌条底 */
  --ui-side-line:  rgba(255, 255, 255, .08);
  --ui-side-text:  rgba(255, 255, 255, .68);
  --ui-side-hover: rgba(255, 255, 255, .08);
  --ui-side-on:    rgba(255, 255, 255, .13);
  --ui-side-badge: rgba(255, 255, 255, .10);

  /* ── 手机壳 ────────────────────────────────────────────────────────────
     C 端 / 接单端原型把手机摆在深底上演示，这个底色也算界面的一部分。
     同属深靛族，只是比侧栏更暗更冷，不能各页各调一个黑。 */
  --ui-shell:      #0d1024;   /* 页面外围深底 */
  --ui-canvas:     #e9edf5;   /* 浅底手机原型的外围（接单端摆两台机那种） */
  --ui-shell-2:    #15173a;   /* 壳上小标签底 */
  --ui-shell-line: #2b2f6b;   /* 壳上描边 */
  --ui-shell-text: #8d93b8;   /* 壳上说明文字 */
  --ui-shell-link: #a9a2ff;   /* 壳上链接 */

  /* 占位图（还没上传照片时的示意块）。三个中性色相，刻意避开红绿蓝，
     免得被误读成状态色。 */
  --ui-ph-1: #6a7f9c;  --ui-ph-1b: #3a4a63;
  --ui-ph-2: #8a8f9e;  --ui-ph-2b: #4a4f60;

  /* ── 圆角 ──────────────────────────────────────────────────────────────
     Stripe 的克制：按钮 4，卡片 5，弹层 8，标签 4。不做胶囊（除状态点）。 */
  --ui-r-xs: 3px;
  --ui-r-sm: 4px;
  --ui-r-md: 5px;
  --ui-r-lg: 8px;
  --ui-r-xl: 10px;

  /* ── 阴影 ──────────────────────────────────────────────────────────────
     Stripe 签名：蓝色调多层投影。冷色投影让白卡浮起来而不显脏。
     阴影只给「浮起来的东西」：卡片 hover、弹层、toast、下拉。
     静态卡片只描边，不投影——否则满屏灰雾。 */
  --ui-shadow-sm: 0 1px 2px rgba(6, 27, 49, .06);
  --ui-shadow-md:
    0 1px 1px rgba(6, 27, 49, .04),
    0 3px 8px -2px rgba(50, 50, 93, .10),
    0 8px 18px -8px rgba(50, 50, 93, .12);
  --ui-shadow-lg:
    0 2px 4px rgba(6, 27, 49, .04),
    0 12px 28px -6px rgba(50, 50, 93, .18),
    0 24px 48px -16px rgba(0, 0, 0, .10);

  /* ── 字体 ──────────────────────────────────────────────────────────────
     Inter 优先（数字字形最正），中文回退苹方 / 微软雅黑。
     正式中文正文不用 300 字重——笔画细了在 Windows 上发虚；标题用 600。 */
  --ui-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
             'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
             system-ui, sans-serif;
  --ui-font-mono: 'SFMono-Regular', 'Cascadia Mono', Consolas,
                  'Liberation Mono', Menlo, monospace;

  /* ── 字号 ──────────────────────────────────────────────────────────────
     后台是高密度岗位：一屏要看到 20 行单据。基座 13px 是刻意的，不是偷懒。
     手机端（E4 / E3）另立 15px 基座，见各自页面。
     金额与单号一律 tabular-nums，位数对齐才扫得快。 */
  --ui-fs-caption: 11.5px;
  --ui-fs-small:   12px;
  --ui-fs-body:    13px;
  --ui-fs-title:   14px;
  --ui-fs-h3:      15px;
  --ui-fs-h2:      17px;
  --ui-fs-h1:      21px;
  --ui-fs-stat:    22px;
  --ui-fs-stat-lg: 28px;

  /* ── 间距 ──────────────────────────────────────────────────────────────
     4px 递进。以前这些数字散落在 proto.css 里（20/22、9/12、13/15），
     改一处要翻五个文件，改漏了同一屏就出现两种留白。 */
  --ui-space-1:  4px;
  --ui-space-2:  8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 20px;
  --ui-space-6: 24px;
  --ui-space-7: 28px;
  --ui-space-8: 32px;
  --ui-space-9: 40px;

  /* ── 骨架尺寸 ──────────────────────────────────────────────────────────
     侧栏 216：菜单名改成名词后变长（「定价与经营」），196 已经开始挤。
     顶栏 60：和侧栏品牌区同高，横向连成一条线。
     按钮 34：车间戴手套点，32 偏小；34 仍能在一行里放下三个按钮。 */
  --ui-side-w:      216px;
  --ui-topbar-h:    60px;
  --ui-btn-h:       34px;
  --ui-btn-h-sm:    28px;
  --ui-input-h:     34px;
  --ui-touch:       44px;   /* 手机端最小点击区，iOS HIG / Material 同值 */

  /* ── 两档密度 ──────────────────────────────────────────────────────────
     门店（E1/E4）是车间：站着、戴手套、一屏要看 20 行单子 → 紧凑。
     总部（E2）与供应商（E6）是办公室：坐着看报表 → 舒适。
     同一套组件，只换这三个数，不复制样式。 */
  --ui-density-page-y:   24px;   /* 页内上下留白 */
  --ui-density-page-x:   28px;   /* 页内左右留白 */
  --ui-density-cell-y:   10px;   /* 表格行上下内边距 */
  --ui-density-cell-x:   14px;   /* 表格行左右内边距 */
  --ui-density-card-p:   16px;   /* 卡片内边距 */
  --ui-density-gap:      16px;   /* 栅格间距 */
  --ui-density-row-h:    40px;   /* 表体行最小高 */

  /* ── 动效 ──────────────────────────────────────────────────────────────
     150–200ms。超过 200ms 的转场在车间会被当成卡顿。 */
  --ui-ease: cubic-bezier(.4, 0, .2, 1);
  --ui-dur:  .16s;

  /* ══════════════════════════════════════════════════════════════════════
     兼容别名：早期页面用的短名，全部指向上面的语义名。
     新代码请直接用 --ui-*；这里保证老页面不改一行也能吃到新视觉。
     ══════════════════════════════════════════════════════════════════════ */
  --p: var(--ui-primary);
  --ph: var(--ui-primary-hover);
  --primary: var(--ui-primary);
  --primary-h: var(--ui-primary-hover);
  /* 状态色三兄弟：旧页面 83% 的用法是「文字颜色」（color:var(--ok)），
     所以默认指向 *_text 那一档，保证白底上的对比度过 AA。
     要填充块（圆点、进度条、徽标底）请显式写 --ui-success / --ui-warning /
     --ui-danger，不要再用短名 —— 填充需要饱和色，文字需要深色，两码事。 */
  --ok: var(--ui-success-text);
  --ok-t: var(--ui-success-text);
  --ok-bg: var(--ui-success-bg);
  --okbg: var(--ui-success-bg);
  --ok-soft: var(--ui-success-bd);
  --warn: var(--ui-warning-text);
  --warn-t: var(--ui-warning-text);
  --warn-bg: var(--ui-warning-bg);
  --warnbg: var(--ui-warning-bg);
  --warn2-bg: var(--ui-warning-bg);
  --warn2-bd: var(--ui-warning-bd);
  --warn2-t: var(--ui-warning-text);
  --danger: var(--ui-danger-text);
  --danger-t: var(--ui-danger-text);
  --danger-bg: var(--ui-danger-bg);
  --dangerbg: var(--ui-danger-bg);
  --danger-bd: var(--ui-danger-bd);
  --bad: var(--ui-danger-text);
  --badbg: var(--ui-danger-bg);
  --info: var(--ui-info);
  --info2-bg: var(--ui-info-bg);
  --info2-t: var(--ui-info-text);
  --blue: var(--ui-info-text);
  --bluebg: var(--ui-info-bg);
  --soft: var(--ui-primary-soft);
  --soft-bd: var(--ui-primary-soft-2);
  --soft-t: var(--ui-primary-text);
  --purple-bg: var(--ui-purple-bg);
  --purple-t: var(--ui-purple-text);

  --t1: var(--ui-text-1);
  --t2: var(--ui-text-2);
  --t3: var(--ui-text-3);
  --ink: var(--ui-text-1);
  --ink2: var(--ui-text-2);
  --ink3: var(--ui-text-3);

  --bg: var(--ui-bg);
  --card: var(--ui-surface);
  --paper: var(--ui-surface);
  --head: var(--ui-surface-2);
  --chip: var(--ui-neutral-bg);
  --hover: var(--ui-surface-2);
  --line: var(--ui-divider);
  --line2: var(--ui-divider);
  --bd: var(--ui-border);
  --bd2: var(--ui-border-2);
  --border: var(--ui-border);
  --border-2: var(--ui-border-2);

  --side: var(--ui-side);
  --side-line: var(--ui-side-line);
  --side-t: var(--ui-side-text);
  --mono: var(--ui-font-mono);
}

/* ── 两档密度 ────────────────────────────────────────────────────────────
   默认（不加类）= 门店紧凑档，E1 / E4 用。
   加 .density-comfort 在 <html> 或 <body> 上 = 办公室舒适档，E2 / E6 用。
   只覆盖密度 token，不动颜色与字号——同一套组件，换的是留白节奏。 */
.density-comfort {
  --ui-density-page-y: 28px;
  --ui-density-page-x: 32px;
  --ui-density-cell-y: 13px;
  --ui-density-cell-x: 16px;
  --ui-density-card-p: 20px;
  --ui-density-gap:    20px;
  --ui-density-row-h:  46px;
  --ui-fs-body:        13.5px;
  --ui-fs-caption:     12px;
}

/* ── 全局基线 ────────────────────────────────────────────────────────────
   放在这里而不是各页面，避免同一件事三处定义、三处走样。 */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--ui-font);
  color: var(--ui-text-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 数字一律等宽字宽：金额、单号、工时上下对齐，扫表快一倍 */
.money, .num, .mono, td.num, th.num, .tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

::selection { background: var(--ui-primary-soft-2); color: var(--ui-text-1); }

/* 滚动条：默认那条在深色侧栏上像一道白疤 */
* { scrollbar-width: thin; scrollbar-color: var(--ui-border-2) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--ui-border-2);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--ui-text-3); background-clip: content-box; }

/* 键盘可达：鼠标点击不出现焦点框，键盘操作必须有 —— 门店也有只用键盘的老会计 */
:focus-visible {
  outline: 2px solid var(--ui-primary);
  outline-offset: 1px;
  border-radius: var(--ui-r-xs);
}
:focus:not(:focus-visible) { outline: none; }

/* 减少动效：车间有老师傅装的是低配机，动画掉帧反而误事 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ── 打印 ────────────────────────────────────────────────────────────────
   7 类单据要真打出来签字。屏幕上那套靛蓝与投影在纸上只会糊成灰。
   打印一律：白底、黑字、无投影、状态只用边框和文字（不依赖颜色）。 */
@media print {
  :root {
    --ui-bg: #fff;
    --ui-surface: #fff;
    --ui-surface-2: #fff;
    --ui-border: #c8c8c8;
    --ui-border-2: #c8c8c8;
    --ui-divider: #e0e0e0;
    --ui-text-1: #000;
    --ui-text-2: #333;
    --ui-text-3: #555;
    --ui-primary: #000;
    --ui-primary-soft: #f2f2f2;
    --ui-primary-soft-2: #d0d0d0;
    --ui-primary-text: #000;
    --ui-shadow-sm: none;
    --ui-shadow-md: none;
    --ui-shadow-lg: none;
  }
  body { background: #fff !important; }
  .card, .tw, .kpi, .modal, .filters, .lz {
    box-shadow: none !important;
    border-color: #c8c8c8 !important;
  }
  /* 状态色带不出纸面，改由文字与边框承担 */
  .tag, .ts, .pill, .alert {
    background: #fff !important;
    border: 1px solid #999 !important;
    color: #000 !important;
  }
}