/* ============================================================================
   报价系统 · 视觉基线（theme.css）
   ----------------------------------------------------------------------------
   主张：像一台「计量仪器」，不像一张表格。
   · 颜色：墨绿黑做骨、石青做眼、铜色做刻度、纸白做底 —— 冷、准、耐看
   · 字体：正文用系统中文黑体；一切数字用等宽 + 表格数字（tabular-nums），
           让 1 和 7 一样宽，竖着扫不会跳
   · 版式：8px 节奏；标题紧字距、标签小字距；分隔线只留一条发丝线
   落地方式：只重定义颜色 / 字体 / 细部，不改布局尺寸，任何页面都能安全套上。
   ========================================================================== */

:root {
  /* ---- 颜色 ---------------------------------------------------------- */
  --cx-ink:        #0F1A17;   /* 墨：标题、主文字 */
  --cx-ink-2:      #35463F;   /* 次文字 */
  --cx-muted:      #7D8A84;   /* 说明文字 */
  --cx-brand:      #0B5D4E;   /* 石青：主色 */
  --cx-brand-deep: #063E36;   /* 深井：按下 / 深色块 */
  --cx-brand-soft: #E9F3EF;   /* 极浅石青：选中底 */
  --cx-copper:     #B4884B;   /* 铜：刻度、强调、涨价 */
  --cx-copper-2:   #D9BC85;
  --cx-paper:      #F5F3EC;   /* 纸 */
  --cx-paper-2:    #EDE9DD;
  --cx-line:       #E1DBCD;   /* 发丝线 */
  --cx-line-2:     #EFEBE1;
  --cx-alert:      #A33A2E;   /* 朱：跌 / 删除 */
  --cx-warn-bg:    #FBF3E2;

  /* ---- 字体 ---------------------------------------------------------- */
  --cx-font: "HarmonyOS Sans SC", "PingFang SC", "Hiragino Sans GB",
             "Microsoft YaHei UI", "Microsoft YaHei", system-ui, -apple-system,
             "Segoe UI", sans-serif;
  --cx-mono: "IBM Plex Mono", "JetBrains Mono", "SFMono-Regular", Consolas,
             "Liberation Mono", ui-monospace, monospace;

  /* ---- 把各页原有变量统一到新基线（页面不用改一行 CSS） --------------- */
  --bg: var(--cx-paper);
  --bg2: var(--cx-paper-2);
  --bg-2: var(--cx-paper-2);
  --panel: #FFFFFF;
  --panel-2: #FCFBF7;
  --line: var(--cx-line);
  --line2: var(--cx-line-2);
  --line-2: var(--cx-line-2);
  --ink: var(--cx-ink);
  --ink2: var(--cx-ink-2);
  --ink-2: var(--cx-ink-2);
  --muted: var(--cx-muted);
  --brand: var(--cx-brand);
  --brand2: var(--cx-brand-deep);
  --brand-2: var(--cx-brand-deep);
  --brand-3: #04211D;
  --soft: var(--cx-brand-soft);
  --gold: var(--cx-copper);
  --gold2: var(--cx-copper-2);
  --gold-2: var(--cx-copper-2);
  --gold3: #F7F1E3;
  --gold-3: #F7F1E3;
  --cost: #9A5B1E;
  --costbg: var(--cx-warn-bg);
  --danger: var(--cx-alert);
  --shadow: 0 1px 2px rgba(15, 26, 23, .05), 0 10px 30px -18px rgba(15, 26, 23, .30);
}

/* ---- 基底 ------------------------------------------------------------- */
body {
  font-family: var(--cx-font) !important;
  color: var(--cx-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 所有数字等宽：金额、吨位、单价竖排对齐，扫一眼就能看出异常 */
.num, td.num, .kpi .v, .hero .v, .rank-v, .bars .col .val,
input[type=number], .mono {
  font-family: var(--cx-mono) !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -.01em;
}

h1, h2, h3, .card-h b, .bar b {
  letter-spacing: -.015em;
  font-weight: 650;
}

::selection { background: rgba(180, 136, 75, .28); }

/* 细滚动条，不抢视线 */
* { scrollbar-width: thin; scrollbar-color: #CFC7B6 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: #D5CDBD; border-radius: 8px; border: 3px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: #BCB2A0; background-clip: content-box; }

/* ---- 组件细部 --------------------------------------------------------- */

/* 卡片：发丝线 + 顶部一道「刻度尺」，一眼知道这是一块仪表 */
.card {
  border: 1px solid var(--cx-line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background:
    repeating-linear-gradient(90deg,
      rgba(11, 93, 78, .38) 0 1px, transparent 1px 14px),
    linear-gradient(90deg, var(--cx-brand) 0%, rgba(11, 93, 78, 0) 55%);
  opacity: .55;
  pointer-events: none;
}
.card-h, .bar {
  letter-spacing: -.005em;
}
.card-h .hint, .bar .hint { letter-spacing: 0; }

/* 表格：表头做成「标签」，行只留发丝线 */
table { font-variant-numeric: tabular-nums; }
thead th, th {
  font-size: 11px !important;
  letter-spacing: .06em;
  text-transform: none;
  font-weight: 600 !important;
  color: var(--cx-muted) !important;
  border-bottom: 1px solid var(--cx-line) !important;
}
tbody td { border-bottom: 1px solid var(--cx-line-2) !important; }
tbody tr:hover td { background: #FBFAF5; }

/* 按钮：方一点、紧一点，像仪表上的实体键 */
.btn, button.btn {
  border-radius: 8px;
  letter-spacing: .01em;
  transition: background .16s ease, border-color .16s ease, color .16s ease,
              transform .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn.primary {
  background: var(--cx-brand);
  border-color: var(--cx-brand);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset;
}
.btn.primary:hover { background: var(--cx-brand-deep); border-color: var(--cx-brand-deep); }

/* 输入框：聚焦时一圈石青光，不刺眼 */
input, select, textarea { font-family: var(--cx-font); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--cx-brand) !important;
  box-shadow: 0 0 0 3px rgba(11, 93, 78, .10);
}

/* 标签 / 状态点：统一成小五号 + 紧字距 */
.tag, .nb, .cur { letter-spacing: .01em; }

/* 顶栏：墨色压住全页，铜色做当前项的下划线 */
header {
  background: #0E1916 !important;
  border-bottom: 1px solid #1E2C27 !important;
  color: #E8EDEA;
}
header .logo, header b { color: #F3F6F4 !important; }
.tab { color: var(--cx-muted) !important; }
.tab:hover { color: var(--cx-brand) !important; background: var(--cx-brand-soft); }
/* 卡片里的标签：实心石青，白字，靠铜色下沿收口——比半透明底看得清 */
.tab.on {
  color: #FFFFFF !important;
  background: var(--cx-brand) !important;
  box-shadow: inset 0 -2px 0 var(--cx-copper);
}
/* 墨色顶栏里则保留通透感 */
header .tab { color: #A9BAB3 !important; }
header .tab:hover { color: #E8EDEA !important; background: rgba(255, 255, 255, .05); }
header .tab.on {
  color: #FFFFFF !important;
  background: rgba(255, 255, 255, .10) !important;
}
header .who { color: #9FB2AA !important; }
header .who {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 20px;
  padding: 3px 11px;
}
header .btn {
  background: rgba(255, 255, 255, .06) !important;
  border-color: rgba(255, 255, 255, .16) !important;
  color: #E8EDEA !important;
}
header .btn:hover { background: rgba(255, 255, 255, .12) !important; border-color: var(--cx-copper) !important; }

/* 后台标签有 10 个，字号和左右留白收一点，1440 宽才不会挤出滚动条 */
.tabs .tab { padding: 6px 9px !important; font-size: 12.5px !important; }
@media (max-width: 1366px) {
  .tabs .tab { padding: 6px 7px !important; font-size: 12px !important; }
  header .logo { font-size: 14px !important; }
}

/* 财务 / 仓库两页沿用同一根墨色顶栏（这两页用 .top 而不是 header） */
.top {
  background: #0E1916 !important;
  border-bottom: 1px solid #1E2C27 !important;
  box-shadow: none !important;
}
.top:after {
  background: linear-gradient(90deg, transparent,
    rgba(180, 136, 75, .8) 46%, rgba(180, 136, 75, .8) 54%, transparent) !important;
}
.top .brand { color: #F3F6F4 !important; }
.top .brand i { background: linear-gradient(135deg, var(--cx-copper-2), var(--cx-copper)) !important; }
.top .who {
  background: rgba(255, 255, 255, .06) !important;
  border-color: rgba(255, 255, 255, .16) !important;
  color: #BFD0C9 !important;
}
.top .btn {
  background: rgba(255, 255, 255, .06) !important;
  border-color: rgba(255, 255, 255, .16) !important;
  color: #E8EDEA !important;
}
.top .btn:hover { background: rgba(255, 255, 255, .12) !important; border-color: var(--cx-copper) !important; }
.top a { color: #E8EDEA !important; }

/* 主数字：更大、更紧、等宽——这是页面的「读数」 */
.kpi .v, .hero .v {
  font-weight: 600 !important;
  letter-spacing: -.03em;
}
.kpi .k, .hero .k {
  font-size: 11px !important;
  letter-spacing: .08em;
  color: var(--cx-muted) !important;
  text-transform: none;
}

/* 空状态：别用大红，用安静的说明 */
.empty { color: var(--cx-muted); }

/* ---- 顶栏天气胶囊（四个页面共用，weather.js 负责填数） ------------------
   浅色顶栏用默认配色；仓库 / 财务是深色顶栏，叠加 ab-chip 覆盖成浅字。
   窄屏只留温度，天气名收掉，免得把账号和按钮挤出去。 */
.wx-chip { display: inline-flex; align-items: center; gap: 5px; flex: none;
  white-space: nowrap; cursor: default; font-size: 11.5px;
  padding: 3px 10px; border-radius: 20px;
  border: 1px solid var(--cx-line); background: var(--cx-brand-soft);
  color: var(--cx-ink-2); }
.wx-chip .wx-t { font-size: 13px; font-weight: 700; color: var(--cx-brand);
  font-variant-numeric: tabular-nums; letter-spacing: .3px; }
.wx-chip .wx-d { font-style: normal; color: var(--cx-muted); letter-spacing: .5px; }
.wx-chip.stale { opacity: .62; }
.ab-chip.wx-chip { padding: 3px 9px; color: #cfe4de;
  border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.06); }
.ab-chip.wx-chip .wx-t { color: #fff; }
.ab-chip.wx-chip .wx-d { color: #a9cdc5; }
/* 客服端 / 后台的 header 被本文件统一压成墨色，浅色胶囊在这里太跳，
   而且上面 `header b { color:#F3F6F4 !important }` 会把温度染成白字，
   所以深色顶栏单独给一套「通透深底 + 浅字」，并用更高特异性抢回来。 */
header .wx-chip { color: #E8EDEA;
  border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.07); }
header .wx-chip .wx-t { color: #F3F6F4 !important; }
header .wx-chip .wx-d { color: #A9BAB3; }
@media (max-width: 760px) { .wx-chip .wx-d { display: none; } }

/* ---- 打印：去掉底色和刻度，只留数字与线 ------------------------------- */
@media print {
  body { background: #fff !important; }
  .card::before, header { display: none !important; }
  .card { box-shadow: none; border-color: #DDD; }
  .wx-chip { display: none !important; }
}