/* ==========================================================================
   河北森茂 · 产品报价系统 — 统一设计层 v1.0
   设计目标：把 8 个页面收敛为一套视觉语言（导航 / 表单 / 表格 / 按钮 / 状态）
   说明：本文件在每页原有 <style> 之后加载，用于覆盖与收敛，不改变业务逻辑
   ========================================================================== */

/* ---------- 1. Design Tokens ---------- */
:root{
  /* 品牌 */
  --brand:#165DFF;
  --brand-dark:#0E42D2;
  --brand-light:#EEF4FF;
  --brand-ink:#0B1F4B;

  /* 中性色 */
  --bg:#F6F8FB;
  --card:#FFFFFF;
  --line:#E4E9F2;
  --line2:#EEF1F7;
  --text:#101828;
  --text2:#475467;
  --text3:#98A2B3;

  /* 语义色（国内习惯：支出/亏损红，收入/达标绿） */
  --ok:#067647;
  --ok-bg:#ECFDF3;
  --warn:#B54708;
  --warn-bg:#FFFAEB;
  --danger:#B42318;
  --danger-bg:#FEF3F2;
  --money:#C0392B;

  /* 尺寸与节奏 */
  --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px;
  --h-ctl:36px; --h-ctl-lg:42px;
  --sh-1:0 1px 2px rgba(16,24,40,.04);
  --sh-2:0 4px 12px rgba(16,24,40,.08);
  --sh-3:0 16px 40px rgba(16,24,40,.14);
  --ease:140ms cubic-bezier(.2,.8,.2,1);

  /* 侧栏 */
  --nav-w:228px;
  --nav-bg:#0C1729;
  --nav-bg2:#101E36;
  --nav-text:#A9B6CB;
  --nav-active:#FFFFFF;
}

/* ---------- 2. 基础排版 ---------- */
html{ -webkit-text-size-adjust:100%; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei","Helvetica Neue",sans-serif;
  font-size:14px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{ letter-spacing:-.01em; }
/* 数据类数字统一等宽，避免跳动 */
td.num,th.num,.kpi .k-v,.money,.mono{ font-variant-numeric:tabular-nums; }
::selection{ background:rgba(22,93,255,.16); }

/* 滚动条 */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:#D3DAE6; border-radius:8px; border:2px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover{ background:#B6C0D1; background-clip:content-box; }
*::-webkit-scrollbar-track{ background:transparent; }

/* 键盘可达性：所有可交互元素统一焦点环 */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,
.nav-item:focus-visible,[tabindex]:focus-visible{
  outline:none; box-shadow:0 0 0 3px rgba(22,93,255,.22); border-radius:var(--r-md);
}

/* ---------- 3. 统一侧边导航（注入到所有业务页） ---------- */
body.has-appnav{ padding-left:var(--nav-w); }
.appnav{
  position:fixed; inset:0 auto 0 0; width:var(--nav-w); z-index:60;
  background:linear-gradient(180deg,var(--nav-bg) 0%,var(--nav-bg2) 100%);
  display:flex; flex-direction:column; border-right:1px solid rgba(255,255,255,.06);
}
.appnav .an-brand{
  display:flex; align-items:center; gap:10px; padding:18px 18px 16px; flex:none;
}
.appnav .an-logo{
  width:34px; height:34px; border-radius:9px; flex:none; display:grid; place-items:center;
  background:linear-gradient(135deg,#165DFF,#4C8BFF); color:#fff; font-weight:700; font-size:15px;
  box-shadow:0 4px 12px rgba(22,93,255,.35);
}
.appnav .an-name{ color:#fff; font-size:13.5px; font-weight:600; line-height:1.3; }
.appnav .an-sub{ color:#5D6C85; font-size:10.5px; letter-spacing:1px; }
.appnav .an-body{ flex:1; overflow-y:auto; padding:6px 10px 14px; }
.appnav .an-cap{
  font-size:10.5px; color:#55637C; letter-spacing:1.2px; font-weight:600;
  padding:14px 12px 6px;
}
.appnav .an-item{
  position:relative; display:flex; align-items:center; gap:10px;
  height:38px; padding:0 12px; margin-bottom:2px; border-radius:8px;
  color:var(--nav-text); font-size:13.5px; text-decoration:none;
  transition:background var(--ease),color var(--ease);
}
.appnav .an-item:hover{ background:rgba(255,255,255,.06); color:#fff; }
.appnav .an-item.on{ background:rgba(22,93,255,.16); color:var(--nav-active); font-weight:600; }
.appnav .an-item.on::before{
  content:""; position:absolute; left:-10px; top:9px; bottom:9px; width:3px;
  border-radius:0 3px 3px 0; background:#4C8BFF;
}
.appnav .an-ico{ width:18px; height:18px; flex:none; display:grid; place-items:center; opacity:.85; }
.appnav .an-item.on .an-ico{ opacity:1; }
.appnav .an-ico svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.appnav .an-bdg{
  margin-left:auto; font-size:10.5px; padding:1px 7px; border-radius:999px;
  background:rgba(255,255,255,.12); color:#CBD6E8;
}
.appnav .an-foot{ padding:12px; border-top:1px solid rgba(255,255,255,.07); flex:none; }
.appnav .an-status{
  display:flex; align-items:center; gap:9px; padding:9px 11px; border-radius:9px;
  background:rgba(255,255,255,.05); color:#8FA0BA; font-size:11.5px; line-height:1.5;
}
.appnav .an-status b{ display:block; color:#D6DEEB; font-weight:600; font-size:11.5px; }
.appnav .an-dot{ width:7px; height:7px; border-radius:50%; background:#12B76A; box-shadow:0 0 0 3px rgba(18,183,106,.18); flex:none; }

/* 移动端：抽屉 + 遮罩 */
.an-toggle{
  display:none; position:fixed; left:14px; bottom:14px; z-index:80;
  width:48px; height:48px; border-radius:14px; border:none; cursor:pointer;
  background:var(--brand); color:#fff; box-shadow:0 8px 22px rgba(22,93,255,.4);
  align-items:center; justify-content:center;
}
.an-toggle svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; }
.an-mask{ display:none; position:fixed; inset:0; background:rgba(16,24,40,.45); z-index:55; }

@media (max-width:960px){
  body.has-appnav{ padding-left:0; }
  .appnav{ transform:translateX(-100%); transition:transform 180ms ease; box-shadow:var(--sh-3); }
  body.nav-open .appnav{ transform:none; }
  body.nav-open .an-mask{ display:block; }
  .an-toggle{ display:flex; }
  body.nav-open .an-toggle{ display:none; }
}

/* ---------- 4. 顶栏统一（兼容 #hd / header 两种旧结构） ---------- */
header#hd, body.has-appnav header{
  height:62px; background:rgba(255,255,255,.92); backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:16px; padding:0 24px;
  position:sticky; top:0; z-index:40;
  border-radius:0; margin:0 0 4px;
}
header#hd h1, body.has-appnav header h1{
  font-size:15px; font-weight:600; color:var(--text); line-height:1.3; margin:0;
}
header#hd .sub, body.has-appnav header .sub{
  font-size:11.5px; color:var(--text3); margin-top:1px; line-height:1.4;
}
header#hd > div:first-child, body.has-appnav header > div:first-child{ min-width:0; }
.hd-user{ display:flex; align-items:center; gap:8px; margin-left:auto; flex-wrap:wrap; justify-content:flex-end; }
.hd-user b{ font-size:13px; font-weight:600; }
.hd-user i, .hd-user span i{ font-size:11.5px; color:var(--text3); font-style:normal; }

/* 旧横向 emoji 导航：在注入侧栏后隐藏，避免双导航 */
body.has-appnav header nav.links{ display:none !important; }
body.has-appnav header > nav{ display:none !important; }

/* 顶栏按钮降噪：默认描边、主操作才实心 */
header .btn.sm, .hd-user .btn.sm{
  height:30px; padding:0 11px; font-size:12.5px; border-radius:var(--r-md);
}

/* ---------- 5. 按钮 ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:var(--h-ctl); padding:0 14px;
  border:1px solid var(--line); border-radius:var(--r-md);
  background:#fff; color:var(--text2); font-size:13px; font-weight:500;
  cursor:pointer; white-space:nowrap;
  transition:background var(--ease),border-color var(--ease),color var(--ease),box-shadow var(--ease);
}
.btn:hover{ border-color:#C6D2E4; color:var(--text); background:#FBFCFF; }
.btn:active{ transform:translateY(.5px); }
.btn.primary{ background:var(--brand); border-color:var(--brand); color:#fff; box-shadow:0 1px 2px rgba(22,93,255,.18); }
.btn.primary:hover{ background:var(--brand-dark); border-color:var(--brand-dark); color:#fff; }
.btn.danger{ color:var(--danger); }
.btn.danger:hover{ background:var(--danger-bg); border-color:#FDA29B; }
.btn.sm{ height:30px; padding:0 10px; font-size:12.5px; }
.btn.lg{ height:var(--h-ctl-lg); font-size:14px; }
.btn.block{ width:100%; }

/* ---------- 6. 卡片 ---------- */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-1); overflow:hidden; margin-bottom:16px;
}
.card-hd{
  padding:13px 16px; border-bottom:1px solid var(--line2); background:#fff;
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
.card-hd h2{ font-size:14.5px; font-weight:600; }
.card-bd{ padding:16px; }

/* ---------- 7. 表格 ---------- */
table{ border-collapse:separate; border-spacing:0; font-size:13px; }
th{
  background:#F8FAFC; color:var(--text2); font-weight:600; font-size:12px;
  letter-spacing:.02em; padding:9px 12px; border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:1; white-space:nowrap;
}
td{ padding:9px 12px; border-bottom:1px solid var(--line2); vertical-align:middle; }
tbody tr:hover td{ background:#FAFBFF; }
tbody tr:last-child td{ border-bottom:1px solid var(--line2); }
tfoot td{ background:#F8FAFC; font-weight:600; border-top:1px solid var(--line); }

/* ---------- 8. 表单 ---------- */
input[type=text],input[type=password],input[type=number],input[type=date],input[type=email],
input[type=tel],input[type=search],select,textarea{
  font-family:inherit; font-size:13px; color:var(--text);
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  min-height:var(--h-ctl); padding:0 10px;
  transition:border-color var(--ease),box-shadow var(--ease),background var(--ease);
}
input::placeholder,textarea::placeholder{ color:#B0B9C8; }
input:hover,select:hover,textarea:hover{ border-color:#C6D2E4; }
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(22,93,255,.12);
}
select{ cursor:pointer; padding-right:26px; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2398A2B3' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 9px center;
}
label{ font-size:12.5px; color:var(--text2); }

/* ---------- 9. 标签 / 状态 ---------- */
.badge,.tag{
  display:inline-flex; align-items:center; gap:4px; height:22px; padding:0 8px;
  border-radius:999px; font-size:11.5px; font-weight:500; line-height:1;
  background:#F2F4F7; color:var(--text2);
}
.badge.ok,.tag.ok{ background:var(--ok-bg); color:var(--ok); }
.badge.warn,.tag.warn{ background:var(--warn-bg); color:var(--warn); }
.badge.danger,.tag.danger{ background:var(--danger-bg); color:var(--danger); }
.badge.brand,.tag.brand{ background:var(--brand-light); color:var(--brand-dark); }

/* ---------- 10. 登录页统一 ---------- */
.auth-mask{
  background:
    radial-gradient(900px 500px at 15% 0%, #E8F0FF 0%, transparent 60%),
    radial-gradient(700px 420px at 100% 100%, #EAEFFA 0%, transparent 55%),
    #F4F7FC;
}
.auth-card{
  border-radius:var(--r-xl); box-shadow:var(--sh-3); border:1px solid rgba(16,24,40,.06);
  padding:0;
}
.auth-hd{
  background:#fff; color:var(--text); border-bottom:1px solid var(--line2);
  padding:22px 26px 16px; text-align:left;
}
.auth-hd h2{ font-size:18px; font-weight:600; letter-spacing:-.01em; }
.auth-hd p{ color:var(--text3); font-size:12.5px; margin-top:4px; }
.auth-bd{ padding:20px 26px 24px; }
.auth-bd .fld input{ height:40px; border-radius:var(--r-md); font-size:14px; }
.auth-foot{ color:var(--text3); }
.auth-hint{ background:var(--brand-light); border-color:#D1E0FF; color:var(--text2); }

/* ---------- 11. 空状态 / 加载 ---------- */
.empty{
  padding:40px 16px; text-align:center; color:var(--text3); font-size:13px;
}
.empty .empty-ic{
  width:44px; height:44px; margin:0 auto 10px; border-radius:12px;
  background:#F2F4F7; display:grid; place-items:center; color:#98A2B3;
}
.skeleton{
  background:linear-gradient(90deg,#F2F4F7 25%,#E9EDF4 37%,#F2F4F7 63%);
  background-size:400% 100%; animation:sk 1.3s ease infinite; border-radius:6px;
}
@keyframes sk{ 0%{background-position:100% 50%} 100%{background-position:0 50%} }

/* ---------- 12. 打印 ---------- */
@media print{
  .appnav,.an-toggle,.an-mask,header#hd,.topbar,.noprint{ display:none !important; }
  body.has-appnav{ padding-left:0 !important; }
  body{ background:#fff; }
  .card{ box-shadow:none; border:1px solid #ddd; }
  th{ position:static; }
}

/* ---------- 13. 减少动画偏好 ---------- */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ---------- 14. 首页原有侧栏的图标适配 ---------- */
.sidebar .nav-item .ic svg,.nav-item .ic svg{
  width:18px; height:18px; stroke:currentColor; fill:none;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; display:block;
}
.sidebar .nav-item{ color:#A9B6CB; }
.sidebar .nav-item.on{ background:rgba(22,93,255,.16); box-shadow:none; color:#fff; }
.sidebar .nav-item.on::before{
  content:""; position:absolute; left:0; top:9px; bottom:9px; width:3px;
  border-radius:0 3px 3px 0; background:#4C8BFF;
}
.sidebar .nav-item{ position:relative; }

/* ---------- 15. 工作台（index）视觉收敛 ---------- */
.sidebar{ background:linear-gradient(180deg,var(--nav-bg),var(--nav-bg2)); border-right:1px solid rgba(255,255,255,.06); }
.sb-head{ padding:18px 16px 14px; }
.sb-logo{ background:linear-gradient(135deg,#165DFF,#4C8BFF); box-shadow:0 4px 12px rgba(22,93,255,.35); }
.sb-head b{ font-size:13.5px; }
.sb-head i{ color:#5D6C85; font-size:10.5px; letter-spacing:1px; }
.sb-cap{ color:#55637C; font-size:10.5px; letter-spacing:1.2px; padding:14px 12px 6px; }
.nav-item{ height:38px; padding:0 12px; border-radius:8px; color:#A9B6CB; font-size:13.5px; }
.nav-item:hover{ background:rgba(255,255,255,.06); color:#fff; }
.sb-foot{ border-top:1px solid rgba(255,255,255,.07); }
.sb-status{ background:rgba(255,255,255,.05); border-radius:10px; color:#8FA0BA; }
.sb-status b{ color:#D6DEEB; }
.pulse{ background:#12B76A; box-shadow:0 0 0 3px rgba(18,183,106,.18); }

.topbar{ height:62px; background:rgba(255,255,255,.92); backdrop-filter:saturate(180%) blur(10px); }
.crumb{ color:var(--text3); font-size:12.5px; }
.avatar{ background:linear-gradient(135deg,#165DFF,#6C9DFF); }

.hero{
  border-radius:16px; padding:24px 26px; margin-bottom:18px;
  background:
    radial-gradient(600px 220px at 88% -20%, rgba(76,139,255,.55), transparent 70%),
    linear-gradient(120deg,#0B1F4B 0%,#123B9E 55%,#165DFF 100%);
  box-shadow:0 12px 28px rgba(11,31,75,.18);
}
.hero::after{ background:radial-gradient(circle,rgba(255,255,255,.16),transparent 62%); }
.hero h2{ font-size:21px; font-weight:650; letter-spacing:.2px; }
.hero p{ font-size:12.5px; opacity:.82; }
.hero-actions .btn{ background:#fff; color:#0E42D2; border-color:#fff; box-shadow:0 4px 14px rgba(0,0,0,.12); }
.hero-actions .btn.ghost{ background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.36); }
.hero-actions .btn.ghost:hover{ background:rgba(255,255,255,.2); }

.kpis{ gap:16px; }
.kpi{ border-radius:12px; padding:17px 18px; border-color:var(--line); box-shadow:var(--sh-1); }
.kpi .k-t{ font-size:12.5px; color:var(--text2); }
.kpi .k-dot{ width:7px; height:7px; }
.kpi .k-v{ font-size:28px; font-weight:650; letter-spacing:-.02em; margin-top:9px; }
.kpi .k-s{ font-size:11.5px; color:var(--text3); }

.quick{ border-radius:12px; padding:15px 16px; box-shadow:none; }
.quick:hover{ border-color:#BFD3FF; box-shadow:0 6px 18px rgba(16,24,40,.07); transform:translateY(-1px); }
.quick b{ font-size:13.5px; }
.quick span{ font-size:12px; }

.series-tabs button{ border-radius:999px; height:32px; padding:0 16px; font-size:13px; }
.series-tabs button.on{ background:var(--brand); border-color:var(--brand); }
.card{ border-radius:12px; }
.card-hd{ background:#fff; padding:13px 16px; }

/* ---------- 16. 移动端补强 ---------- */
@media (max-width:880px){
  .app .sidebar{
    display:flex !important; position:fixed; left:0; top:0; bottom:0;
    width:var(--nav-w); z-index:60; margin:0; flex-direction:column;
    transform:translateX(-102%); transition:transform 180ms ease; box-shadow:var(--sh-3);
  }
  body.nav-open .app .sidebar{ transform:none; }
  .app{ grid-template-columns:1fr !important; }
}
@media (max-width:700px){
  header#hd, body.has-appnav header{ padding:0 14px; gap:10px; height:56px; }
  .tb-user .btn.sm{ display:none !important; }
  .tb-user #btnLogout{ display:inline-flex !important; }
  .hd-user .btn.sm{ display:none !important; }
  .hd-user #btnLogout, .hd-user #btnHome, .hd-user #btnProducts{ display:inline-flex !important; }
  .hd-user .who i{ display:none; }
  .page{ padding:14px 14px 90px; }
  .hero{ padding:18px 16px; }
  .hero h2{ font-size:18px; }
  .hero-actions .btn{ flex:1 1 auto; }
  .kpis{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .kpi .k-v{ font-size:22px; }
}