/* ==========================================================================
   仓库管理系统 · 设计系统基础层
   ----------------------------------------------------------------------------
   取向：**清爽浅色专业风** —— 面向每天要盯几百行数据、连用几小时的仓管，
   不是给访客看氛围的展示页。

   三条设计原则
   ---------------------------------------------------------------------------
   1. 浅色为主，深色可选。长时间看数据浅色最不累眼，打印也正常。
   2. **颜色只用来表达状态**，不做装饰。
      蓝 = 主操作；绿/橙/红 = 单据与库存状态；金色只在"钱"上出现。
      上一版把金色当主色大面积铺，跟深紫底互相抢，是"丑"的主因。
   3. 字号与间距取宽松档。13px 是展示型界面的密度，
      操作型界面 15px 起，行高 1.6，表格行高 44px。

   改动约定
   ---------------------------------------------------------------------------
   所有颜色/圆角/阴影/字号都在 :root 里定义，components.css 与 views.css
   只引用变量。换肤只需要改这一个文件。

   变量名与「设计师PM」保持兼容（--gold / --bg-2 / --card / --glass-bd …），
   所以只改这一个文件就能整体换掉观感，不用动几十个页面。
   ========================================================================== */

:root {
  /* ======================================================================
     浅色主题（默认）
     ----------------------------------------------------------------------
     中性灰阶 + 单一蓝色强调。灰阶刻意做得"冷一点点"（带极轻的蓝），
     纯灰在浅色下会显得脏。
     ====================================================================== */

  /* ---------- 背景层次 ---------- */
  --bg: #f7f8fa;            /* 页面底 */
  --bg-2: #ffffff;          /* 卡片 */
  --bg-3: #f1f3f7;          /* 内嵌/次级块 */
  --bg-4: #e8ebf0;          /* 悬停/选中 */

  --card: #ffffff;
  --card-h: #ffffff;
  /*
   * 浅色下不要玻璃拟态。
   * 半透明 + 模糊在浅色底上只会让边界变糊，反而显得"脏"和"乱" ——
   * 清晰的边框和层次才是专业感来源。
   */
  --glass: rgba(15, 23, 42, 0.035);
  --glass-bd: #e4e7ec;

  /* ---------- 文字（三级层次，对比度足够） ---------- */
  --text: #141821;          /* 正文，对白底 16:1 */
  --text-2: #5a6473;        /* 次要，对白底 6.5:1 */
  --text-3: #8d97a6;        /* 辅助，对白底 3.6:1，只用于极次要信息 */

  /* ---------- 主色：专业蓝（不是紫色） ---------- */
  --gold: #2563eb;
  --gold-2: #1d4ed8;
  --gold-3: #3b82f6;
  --gold-dim: #bfdbfe;

  /* ---------- 语义色 ---------- */
  --blue: #2563eb;
  --blue-2: #1d4ed8;
  --blue-dim: #93c5fd;
  --green: #059669;
  --green-dim: #34d399;
  --orange: #d97706;
  --orange-dim: #fbbf24;
  --red: #dc2626;
  --red-dim: #f87171;
  --purple: #7c3aed;
  --cyan: #0891b2;
  --pink: #db2777;

  /* ---------- 渐变（浅色下几乎不用，保留变量以免引用报错） ---------- */
  --gradient-1: linear-gradient(135deg, #2563eb, #7c3aed);
  --gradient-2: linear-gradient(135deg, #d97706, #db2777);
  --gradient-3: linear-gradient(135deg, #059669, #0891b2);
  --space-head-bg: #ffffff;

  /* ---------- 尺寸：宽松一档 ---------- */
  --radius: 10px;
  --radius-s: 8px;
  --radius-l: 14px;
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-full: 999px;
  --sidebar-w: 248px;
  --topbar-h: 62px;

  /* ---------- 字号：15px 基准，比上一版的 13/14px 明显好读 ---------- */
  --fs-xs: 12px;            /* 标签、脚注 */
  --fs-sm: 13px;            /* 次要说明 */
  --fs-base: 15px;          /* 正文、表格 */
  --fs-md: 16px;            /* 卡片标题 */
  --fs-lg: 20px;            /* 区块标题 */
  --fs-xl: 26px;            /* 页面标题 */
  --fs-stat: 30px;          /* 指标数字 */
  --lh: 1.6;
  --lh-tight: 1.35;

  /* ---------- 间距节奏（8px 基数，统一对齐） ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* ---------- 阴影：浅色下要非常克制 ---------- */
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.06);
  --shadow-s: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-l: 0 8px 24px rgba(16, 24, 40, 0.1), 0 2px 6px rgba(16, 24, 40, 0.05);
  --glow: none;

  --bg-grad-1: transparent;
  --bg-grad-2: transparent;
  --skeleton: linear-gradient(90deg, #eef1f5, #f7f8fa, #eef1f5);

  /* ---------- 动效 ---------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 0.15s;
  --transition: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------- 字体 ---------- */
  --font: -apple-system, "SF Pro Text", "PingFang SC", "Microsoft YaHei",
    "Segoe UI", system-ui, Roboto, "Helvetica Neue", sans-serif;
  --font-num: "SF Mono", "Cascadia Code", "Consolas", ui-monospace, monospace;

  /* ======================================================================
     兼容别名 —— 映射到上面的令牌
     components.css / views.css 按旧命名写的，靠这层别名跟着一起变。
     ====================================================================== */
  --surface: var(--bg-2);
  --surface-2: var(--bg-3);
  --surface-3: var(--bg-3);
  --surface-hi: var(--bg-4);
  --glass-2: rgba(255, 255, 255, 0.92);

  --brand-1: var(--gold);
  --brand-2: var(--gold-2);
  --brand-soft: rgba(37, 99, 235, 0.09);
  /*
   * 名字沿用上一版的 grad-*，但值已经改成**实色**。
   * 浅色专业风里按钮和图标不用渐变：渐变会削弱「这东西可以点」的暗示，
   * 也让选中态与普通态不容易区分。改实色之后焦点更清楚。
   */
  --grad-brand: var(--blue);
  --grad-brand-soft: rgba(37, 99, 235, 0.08);
  --grad-cool: var(--green);
  --grad-violet: var(--purple);
  --grad-warn: var(--orange);

  --border: #e4e7ec;
  --border-2: #d3d8e0;
  --border-strong: #b9c0cc;

  --shadow-sm: var(--shadow-s);
  --shadow-md: var(--shadow);
  --shadow-lg: var(--shadow-l);
  --shadow-brand: 0 1px 2px rgba(37, 99, 235, 0.2);
  --ring: rgba(37, 99, 235, 0.16);

  --st-todo: #8d97a6;
  --st-doing: #2563eb;
  --st-review: #d97706;
  --st-done: #059669;
  --st-block: #dc2626;
  --st-todo-soft: rgba(141, 151, 166, 0.12);
  --st-doing-soft: rgba(37, 99, 235, 0.09);
  --st-review-soft: rgba(217, 119, 6, 0.1);
  --st-done-soft: rgba(5, 150, 105, 0.1);
  --st-block-soft: rgba(220, 38, 38, 0.09);
}

/* ==========================================================================
   深色主题（可选，不是默认）
   --------------------------------------------------------------------------
   用中性深灰，不用紫黑。紫黑 + 彩色会在深色下显得脏、对比度也难做够。
   深色下文字对比度按 WCAG AA 拉足。
   ========================================================================== */
html[data-theme="dark"] {
  --bg: #0f1115;
  --bg-2: #16181d;
  --bg-3: #1c1f26;
  --bg-4: #24272f;

  --card: #16181d;
  --card-h: #1c1f26;
  --glass: rgba(255, 255, 255, 0.04);
  --glass-bd: #282c34;

  --text: #e8eaf0;
  --text-2: #a3aab8;
  --text-3: #737b8a;

  --gold: #60a5fa;
  --gold-2: #93c5fd;
  --gold-3: #bfdbfe;
  --gold-dim: #1e3a5f;

  --blue: #60a5fa;
  --blue-2: #93c5fd;
  --blue-dim: #1e40af;
  --green: #34d399;
  --green-dim: #065f46;
  --orange: #fbbf24;
  --orange-dim: #92400e;
  --red: #f87171;
  --red-dim: #7f1d1d;
  --purple: #a78bfa;
  --cyan: #22d3ee;
  --pink: #f472b6;

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-s: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-l: 0 12px 32px rgba(0, 0, 0, 0.5);
  --skeleton: linear-gradient(90deg, #1c1f26, #24272f, #1c1f26);

  --surface: var(--bg-2);
  --surface-2: var(--bg-3);
  --surface-3: var(--bg-3);
  --surface-hi: var(--bg-4);
  --glass-2: rgba(15, 17, 21, 0.92);

  --brand-1: var(--gold);
  --brand-2: var(--gold-2);
  --brand-soft: rgba(96, 165, 250, 0.12);
  --grad-brand: var(--blue);
  --grad-brand-soft: rgba(96, 165, 250, 0.1);

  --border: #282c34;
  --border-2: #363b45;
  --border-strong: #4a505c;

  --shadow-brand: 0 1px 2px rgba(0, 0, 0, 0.3);
  --ring: rgba(96, 165, 250, 0.2);

  --st-todo: #737b8a;
  --st-doing: #60a5fa;
  --st-review: #fbbf24;
  --st-done: #34d399;
  --st-block: #f87171;
  --st-review-soft: rgba(251, 191, 36, 0.12);
  --st-done-soft: rgba(52, 211, 153, 0.12);
  --st-block-soft: rgba(248, 113, 113, 0.12);
  --st-doing-soft: rgba(96, 165, 250, 0.12);
  --st-todo-soft: rgba(115, 123, 138, 0.14);
}

/* ==========================================================================
   基础
   ========================================================================== */
* { box-sizing: border-box; }
*::selection { background: rgba(37, 99, 235, 0.16); color: var(--text); }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* ---------- 排版：层级拉开，一眼看得出先后 ---------- */
h1, h2, h3, h4 { margin: 0; font-weight: 650; line-height: var(--lh-tight); letter-spacing: -0.01em; }
p { margin: 0; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; }
table { border-collapse: collapse; }

/* 数字统一等宽，表格里不会左右跳 */
.num, .mono { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

.dim { color: var(--text-3); }
.bold { font-weight: 600; }
.sm { font-size: var(--fs-sm); }
.tiny { font-size: var(--fs-xs); }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grow { flex: 1; min-width: 0; }
.block { display: block; }
.left { margin-right: auto; }
.center { text-align: center; }
.right { text-align: right; }

/* ---------- 布局工具（间距按 4px 网格，保证对齐） ---------- */
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.wrap { flex-wrap: wrap; }
.gap-4 { gap: var(--sp-1); } .gap-6 { gap: 6px; } .gap-8 { gap: var(--sp-2); }
.gap-10 { gap: 10px; } .gap-12 { gap: var(--sp-3); } .gap-14 { gap: 14px; }
.gap-16 { gap: var(--sp-4); } .gap-20 { gap: var(--sp-5); }
.mt-2 { margin-top: 2px; } .mt-4 { margin-top: var(--sp-1); } .mt-6 { margin-top: 6px; }
.mt-8 { margin-top: var(--sp-2); } .mt-12 { margin-top: var(--sp-3); }
.mt-16 { margin-top: var(--sp-4); } .mt-20 { margin-top: var(--sp-5); }
.mt-28 { margin-top: 28px; }
.mb-8 { margin-bottom: var(--sp-2); } .mb-16 { margin-bottom: var(--sp-4); }

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-2); border-radius: 5px;
  border: 2px solid var(--bg);           /* 让滑块不贴边，视觉更轻 */
}
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* ---------- 焦点可见性 ---------- */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
  border-radius: var(--r-xs);
}

/* ---------- 打印：浅色下打印本来就没问题，这里只保证布局干净 ---------- */
@media print {
  .sidebar, .topbar, .toolbar, .no-print { display: none !important; }
  body { background: #fff; color: #000; }
  .content { padding: 0 !important; }
  .card, .tbl-wrap {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
    background: #fff !important;
  }
  .tbl th { background: #f5f5f5 !important; color: #000 !important; }
}