/* ============================================================
   supply-chain-v6.5.2 — 全局 design token + 组件样式
   修复:style.css 缺失导致所有引用页 CSS 渲染崩
   包含:token / 任务卡片 / KPI 卡片 / Tab / FAQ / Table / Form
   ============================================================ */

:root{
  /* === 中性色 === */
  --gray-50:#f8fafc; --gray-100:#f1f5f9; --gray-200:#e2e8f0; --gray-300:#cbd5e1;
  --gray-400:#94a3b8; --gray-500:#64748b; --gray-600:#475569; --gray-700:#334155;
  --gray-800:#1e293b; --gray-900:#0f172a;

  /* === 强语义色 === */
  --primary:#1e3a8a;      /* 主 - 国内/库存 */
  --primary-light:#3b82f6;
  --primary-dark:#0f172a;
  --success:#047857;      /* 达标/达成/正向 */
  --success-light:#10b981;
  --success-bg:#ecfdf5;
  --warning:#f59e0b;      /* 警告/P1 */
  --warning-dark:#b45309;
  --warning-bg:#fef3c7;
  --danger:#dc2626;       /* 紧急/P0/送仓 */
  --danger-dark:#b91c1c;
  --danger-darker:#7c2d12;
  --danger-bg:#fee2e2;
  --urgent:#ea580c;       /* P1 - 橙色用于异常 */
  --info:#2563eb;
  --info-bg:#dbeafe;

  /* === 角色分类(task-card 用)== */
  --cat-core:#7c2d12;     /* 核心 - 棕色 */
  --cat-mgmt:#1e3a8a;     /* 管理 - 蓝色 */
  --cat-team:#047857;     /* 团队 - 绿色 */
  --cat-tech:#6d28d9;     /* 技术 - 紫色 */
  --cat-ai:#b91c1c;       /* AI - 红色 */

  /* === 间距 === */
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:24px;
}

*{box-sizing:border-box}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  margin:0;padding:0;
  background:var(--gray-50);
  color:var(--gray-900);
  line-height:1.6;
}

/* === 顶部条 === */
.topbar{
  background:linear-gradient(135deg,var(--gray-900) 0%,var(--primary) 50%,var(--primary-light) 100%);
  color:#fff;padding:24px 32px;
}
.topbar h1, .topbar .xxl{color:#fff}
.topbar .meta{color:#e2e8f0}
.xxl{font-size:32px;font-weight:800;margin:0;letter-spacing:.5px}

/* === 面包屑 === */
.breadcrumb{
  background:#fff;padding:12px 32px;
  border-bottom:1px solid var(--gray-200);
  font-size:13px;color:var(--gray-600);
}
.breadcrumb a{color:var(--primary);text-decoration:none;font-weight:600}
.breadcrumb a:hover{text-decoration:underline}

/* === 主容器 === */
.container{max-width:1280px;margin:0 auto;padding:24px 32px}

/* ===== H 系列 ===== */
h1{font-size:28px;margin:0 0 16px;color:var(--gray-900);font-weight:800}
h2{font-size:22px;margin:32px 0 16px;color:var(--gray-900);font-weight:700;
   padding-bottom:8px;border-bottom:3px solid var(--primary);display:inline-block}
h3{font-size:18px;margin:20px 0 12px;color:var(--gray-800);font-weight:700}
h4{font-size:15px;margin:16px 0 8px;color:var(--gray-700);font-weight:600}

/* ===== 任务卡片网格(index 首页核心)== */
.task-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:18px;
  margin:24px 0;
}
.task-card{
  background:#fff;
  border-radius:var(--r-md);
  padding:18px 20px;
  text-decoration:none;
  color:inherit;
  border:1px solid var(--gray-200);
  border-left:6px solid var(--gray-300);
  transition:all .2s ease;
  display:flex;flex-direction:column;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.task-card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  border-left-width:8px;
}
.task-card.cat-core{border-left-color:var(--cat-core)}
.task-card.cat-mgmt{border-left-color:var(--cat-mgmt)}
.task-card.cat-team{border-left-color:var(--cat-team)}
.task-card.cat-tech{border-left-color:var(--cat-tech)}
.task-card.cat-ai{border-left-color:var(--cat-ai)}

.task-card .num{
  display:inline-block;
  font-size:11px;font-weight:700;
  padding:3px 10px;border-radius:4px;
  background:var(--gray-100);color:var(--gray-700);
  margin-bottom:10px;
  text-transform:uppercase;letter-spacing:.5px;
}
.task-card h3{
  font-size:16px;margin:6px 0;
  display:flex;align-items:center;gap:8px;
}
.task-card h3 .icon{font-size:20px}
.task-card .meta{
  font-size:12px;color:var(--gray-500);
  font-weight:600;margin:8px 0;
}
.task-card .desc{
  font-size:13px;color:var(--gray-600);
  line-height:1.6;margin:6px 0 14px;
  flex:1;
}
.task-card .go{
  display:inline-block;
  font-size:13px;font-weight:700;
  color:var(--primary);
  padding-top:8px;
  border-top:1px dashed var(--gray-200);
  margin-top:auto;
}
.task-card.cat-core .go{color:var(--cat-core)}
.task-card.cat-mgmt .go{color:var(--cat-mgmt)}
.task-card.cat-team .go{color:var(--cat-team)}
.task-card.cat-tech .go{color:var(--cat-tech)}
.task-card.cat-ai .go{color:var(--cat-ai)}

/* ===== KPI 大块(首页顶部 banner)== */
.kpi-big{
  background:linear-gradient(135deg,var(--danger-darker) 0%,var(--danger-dark) 50%,var(--danger) 100%);
  color:#fff;padding:36px;border-radius:var(--r-lg);
  margin:16px 0 32px;
  box-shadow:0 4px 16px rgba(220,38,38,.18);
}

/* ===== 数据表 ===== */
.data-table{
  width:100%;
  border-collapse:collapse;
  margin:16px 0;
  background:#fff;
  border-radius:var(--r-md);
  overflow:hidden;
  box-shadow:0 1px 4px rgba(0,0,0,.06);
}
.data-table th{
  background:var(--gray-100);
  padding:12px 14px;
  text-align:left;
  font-weight:700;font-size:13px;
  color:var(--gray-800);
  border-bottom:2px solid var(--gray-300);
  white-space:nowrap;
}
.data-table td{
  padding:12px 14px;
  border-bottom:1px solid var(--gray-200);
  font-size:13px;color:var(--gray-700);
  vertical-align:top;
}
.data-table tr:nth-child(even) td{background:var(--gray-50)}
.data-table tr:hover td{background:#fef9c3}

/* ===== 表格内的色块徽章 ===== */
.level,.badge{
  display:inline-block;padding:3px 10px;border-radius:4px;
  font-size:12px;font-weight:700;color:#fff;white-space:nowrap;
}
.level-critical,.badge.critical{background:var(--danger)}
.level-urgent,.badge.urgent{background:var(--urgent)}
.level-warning,.badge.warning{background:var(--warning);color:var(--gray-900)}
.level-success,.badge.success{background:var(--success)}
.level-info,.badge.info{background:var(--info)}

/* ===== FAQ 折叠 ===== */
details{
  background:#fff;
  border:1px solid var(--gray-200);
  border-radius:var(--r-md);
  margin:10px 0;
  padding:14px 18px;
  transition:all .2s;
}
details[open]{
  border-color:var(--primary);
  box-shadow:0 4px 12px rgba(30,58,138,.08);
}
summary{
  font-size:15px;font-weight:700;color:var(--gray-900);
  cursor:pointer;list-style:none;
  padding:4px 0;
  display:flex;align-items:center;gap:8px;
}
summary::before{
  content:'▶';
  font-size:11px;color:var(--primary);
  transition:transform .2s;
  display:inline-block;
  width:14px;
}
details[open] summary::before{transform:rotate(90deg)}
summary::-webkit-details-marker{display:none}
details>p{padding:12px 0 4px 22px;margin:0;color:var(--gray-600);line-height:1.7}

/* ===== 流程步骤(Stage 1-4)== */
.flow{
  display:flex;align-items:center;gap:8px;
  margin:20px 0;flex-wrap:wrap;
}
.step{
  padding:12px 20px;border-radius:var(--r-md);
  background:var(--gray-100);
  font-weight:700;font-size:14px;
  border-left:6px solid var(--gray-400);
}
.step.success{border-left-color:var(--success);background:var(--success-bg);color:#065f46}
.step.warn{border-left-color:var(--warning);background:var(--warning-bg);color:#92400e}
.step.danger{border-left-color:var(--danger);background:var(--danger-bg);color:#7f1d1d}
.arrow{font-size:20px;color:var(--gray-400);font-weight:700}

/* ===== 锁定框 / 警告框 ===== */
.lock-box{
  background:linear-gradient(135deg,#fef2f2,#fee2e2);
  border:2px solid var(--danger);
  border-radius:var(--r-md);
  padding:14px 20px;margin:14px 0;
}
.flow-updated{
  background:linear-gradient(135deg,#ecfdf5,#d1fae5);
  border:2px solid var(--success);
  border-radius:var(--r-md);
  padding:14px 20px;margin:14px 0;
}
.lock-tag,.flow-updated-tag{
  display:inline-block;color:#fff;
  font-size:12px;font-weight:800;
  padding:3px 10px;border-radius:4px;
  margin-right:8px;
}
.lock-tag{background:var(--danger)}
.flow-updated-tag{background:var(--success)}
.warn-box{
  background:var(--warning-bg);
  border-left:4px solid var(--warning);
  border-radius:var(--r-md);
  padding:12px 18px;margin:12px 0;
}
.warn-label{
  background:var(--warning);color:var(--gray-900);
  padding:2px 8px;border-radius:3px;
  font-size:11px;font-weight:800;text-transform:uppercase;
}

/* ===== Tab 切换(C 方案核心)== */
.role-tabs{
  display:grid;
  grid-template-columns:repeat(var(--cols,3),1fr);
  gap:0;margin:20px 0;
  background:var(--gray-100);
  border-radius:var(--r-md);
  padding:6px;
  border:2px solid var(--gray-200);
}
.role-tab{
  padding:14px 20px;text-align:center;
  cursor:pointer;border-radius:var(--r-sm);
  font-weight:700;color:var(--gray-600);
  transition:all .2s;
}
.role-tab.active{
  background:linear-gradient(135deg,var(--gray-900),var(--primary));
  color:#fff;
  box-shadow:0 4px 12px rgba(30,58,138,.3);
}
.role-tab .rt-icon{font-size:22px;display:block;margin-bottom:4px}
.role-tab .rt-title{font-size:14px}
.role-tab .rt-sub{font-size:11px;opacity:.85;margin-top:2px}
.role-content{display:none}
.role-content.active{display:block}

/* 大数字 KPI 卡片(C 方案 dashboard 化)==
   用于 4 区域 / 9 岗位 KPI 大数字摘要 */
.metric-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:14px;margin:20px 0;
}
.metric-card{
  background:#fff;border-radius:var(--r-md);
  padding:16px 18px;
  border:1px solid var(--gray-200);
  border-left:4px solid var(--primary);
  position:relative;
}
.metric-card.good{border-left-color:var(--success)}
.metric-card.warn{border-left-color:var(--warning)}
.metric-card.bad{border-left-color:var(--danger)}
.metric-card .ml{
  font-size:11px;color:var(--gray-500);
  text-transform:uppercase;
  letter-spacing:.5px;font-weight:600;
}
.metric-card .mv{
  font-size:28px;font-weight:800;
  color:var(--gray-900);margin:6px 0;line-height:1.1;
}
.metric-card.good .mv{color:var(--success)}
.metric-card.warn .mv{color:var(--warning-dark)}
.metric-card.bad .mv{color:var(--danger-dark)}
.metric-card .ms{font-size:11px;color:var(--gray-500);margin-top:4px}

/* 大区缩略表(C 方案:4 区域 KPI 行)== */
.region-tabs{
  display:flex;gap:6px;margin:20px 0;
  background:var(--gray-100);padding:6px;
  border-radius:var(--r-md);
  border:2px solid var(--gray-200);
  flex-wrap:wrap;
}
.region-tab{
  flex:1;min-width:120px;
  padding:10px 14px;text-align:center;
  cursor:pointer;border-radius:var(--r-sm);
  font-weight:700;color:var(--gray-600);
  font-size:14px;
  transition:all .2s;
}
.region-tab.active{
  background:#fff;color:var(--gray-900);
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.region-tab .rc-pct{
  display:block;font-size:20px;font-weight:800;
  margin-top:2px;
}
.region-content{display:none}
.region-content.active{display:block}

/* ===== 计算器面板(dashboard.html)== */
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:20px 0}
.calc-card{
  background:#fff;border-radius:var(--r-md);padding:20px;
  border:2px solid var(--gray-200);
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}
.calc-card.loss{border-top:6px solid var(--danger);background:#fef2f2}
.calc-card.gain{border-top:6px solid var(--success);background:#f0fdf4}
.calc-card h3{margin-top:0;font-size:18px}
.calc-card .field{margin:10px 0;display:flex;align-items:center;gap:10px}
.calc-card .field label{flex:1;font-size:13px;color:var(--gray-600);font-weight:600}
.calc-card .field input,.calc-card .field select{
  flex:0 0 100px;padding:8px;
  border:1px solid var(--gray-300);border-radius:var(--r-sm);
  font-size:14px;
}
.calc-card button{
  width:100%;padding:12px;border:0;
  border-radius:var(--r-sm);color:#fff;
  font-weight:bold;cursor:pointer;
  font-size:14px;margin-top:10px;
}
.calc-card.loss button{background:var(--danger)}
.calc-card.gain button{background:var(--success)}
.calc-card .result{
  margin-top:14px;padding:14px;border-radius:var(--r-sm);
  font-size:14px;line-height:1.8;
  background:#fff;border:1px solid var(--gray-200);
}
.calc-card.loss .result{border-left:5px solid var(--danger)}
.calc-card.gain .result{border-left:5px solid var(--success)}
.calc-highlight{font-size:24px;font-weight:800;margin:6px 0}
.calc-card.loss .calc-highlight{color:var(--danger)}
.calc-card.gain .calc-highlight{color:var(--success)}

/* 库存子页卡(inventory-management)== */
.inv-card{
  background:#fff;border:2px solid var(--primary);
  border-radius:var(--r-md);margin:16px 0;overflow:hidden;
  box-shadow:0 4px 12px rgba(30,58,138,.08);
}
.inv-card-header{
  background:linear-gradient(135deg,var(--gray-900),var(--primary),var(--info));
  color:#fff;padding:14px 20px;
}
.inv-card.critical{border-color:var(--danger)}
.inv-card.critical .inv-card-header{
  background:linear-gradient(135deg,var(--danger-darker),var(--danger-dark),var(--danger));
}
.inv-card.warning{border-color:var(--warning)}
.inv-card.warning .inv-card-header{
  background:linear-gradient(135deg,var(--danger-darker),var(--warning-dark),var(--warning));
}
.inv-card.success{border-color:var(--success)}
.inv-card.success .inv-card-header{
  background:linear-gradient(135deg,#064e3b,var(--success),var(--success-light));
}
.inv-section{padding:14px 20px;border-bottom:1px solid var(--gray-200)}
.inv-section:last-child{border-bottom:none}
.inv-section .sec-title{
  font-size:12px;font-weight:800;color:var(--primary);
  letter-spacing:.5px;margin-bottom:10px;
  text-transform:uppercase;
}
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.kpi-box{
  background:var(--gray-50);border:1px solid var(--gray-200);
  border-radius:var(--r-sm);padding:10px;
}
.kpi-box .kpi-lbl{
  font-size:10px;color:var(--gray-600);
  font-weight:600;text-transform:uppercase;
}
.kpi-box .kpi-val{
  font-size:18px;font-weight:800;color:var(--gray-900);
  margin:4px 0;
}
.kpi-box.bad .kpi-val{color:var(--danger-dark)}
.kpi-box.warn .kpi-val{color:var(--warning-dark)}
.kpi-box.good .kpi-val{color:var(--success)}
.alarm-level{
  display:inline-block;padding:3px 10px;
  border-radius:4px;font-size:12px;font-weight:700;color:#fff;
}
.alarm-critical{background:var(--danger)}
.alarm-urgent{background:var(--urgent)}
.alarm-warning{background:var(--warning)}
.alarm-info{background:var(--info)}
.alarm-success{background:var(--success)}

.formula{
  background:var(--gray-800);color:var(--gray-100);
  padding:14px;border-radius:var(--r-sm);
  font-family:'Consolas','Monaco',monospace;
  font-size:13px;line-height:1.7;
  overflow-x:auto;
}
.formula .key{color:#fbbf24;font-weight:700}
.formula .val{color:#86efac}
.formula .comment{color:#94a3b8;font-style:italic}

.callout{
  background:var(--info-bg);
  border-left:4px solid var(--info);
  border-radius:var(--r-sm);
  padding:12px 16px;margin:12px 0;
}

/* ===== Footer ===== */
.footer{
  background:var(--gray-900);color:var(--gray-300);
  padding:24px 32px;margin-top:48px;
  text-align:center;font-size:13px;
}
.footer a{color:var(--primary-light);text-decoration:none;margin:0 8px}
.footer a:hover{text-decoration:underline}

/* ===== 小工具类 ===== */
.btn{
  display:inline-block;padding:8px 16px;border-radius:var(--r-sm);
  background:var(--primary);color:#fff;font-weight:600;
  text-decoration:none;font-size:13px;
  transition:all .2s;
}
.btn:hover{background:var(--primary-dark);transform:translateY(-1px)}
.btn-success{background:var(--success)}
.btn-danger{background:var(--danger)}

blockquote{
  background:#fffbeb;border-left:4px solid var(--warning);
  padding:12px 18px;margin:14px 0;
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  color:var(--gray-700);
}
ul li,ol li{margin:4px 0}

p,li{font-size:14px}

/* ===== 响应式 ===== */
@media (max-width:768px){
  .topbar{padding:16px 20px}
  .container{padding:16px 20px}
  .task-grid{grid-template-columns:1fr}
  .role-tabs{grid-template-columns:1fr !important}
  .calc-grid{grid-template-columns:1fr}
  .kpi-row{grid-template-columns:1fr 1fr}
  .metric-grid{grid-template-columns:1fr 1fr}
}