@import url("console.css");
/* ============================================================
   供应链管理系统演示原型 · 全局样式
   设计目标：零依赖（无任何 CDN）、离线可用、浅色后台风格
   结构说明：
     1) 设计令牌（颜色 / 间距 / 圆角 / 阴影）
     2) 基础重置与排版
     3) 布局骨架（左侧固定导航 + 右侧内容区）
     4) 通用组件（卡片 / 标签 / 按钮 / 表格 / 说明块 / 折叠面板）
     5) 教学专用组件（流程轨道 / 状态机 / 指标卡 / 图例 / 代码注释块）
   ============================================================ */

/* ---------- 1) 设计令牌 ---------- */
:root {
  /* 主色：蓝（与流程图保持一致） */
  --brand: #185fa5;
  --brand-dark: #0c447c;
  --brand-soft: #e6f1fb;
  --brand-line: #85b7eb;

  /* 辅助色 */
  --teal: #0f6e56;
  --teal-soft: #e1f5ee;
  --amber: #854f0b;
  --amber-soft: #faeeda;
  --red: #a32d2d;
  --red-soft: #fcebeb;
  --green: #3b6d11;
  --green-soft: #eaf3de;

  /* 中性色 */
  --text: #2c2c2a;
  --text-2: #5f5e5a;
  --text-3: #888780;
  --line: #e5e7eb;
  --line-2: #d3d1c7;
  --bg: #fafafa;
  --surface: #ffffff;
  --surface-2: #f1efe8;

  /* 尺寸 */
  --radius: 10px;
  --radius-lg: 14px;
  --sidebar-w: 268px;
  --font: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, -apple-system, sans-serif;
}

/* ---------- 2) 基础重置与排版 ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.4; }
h1 { font-size: 24px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }
h4 { font-size: 14px; }
p { margin: 0 0 10px; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { margin: 0 0 10px; padding-left: 20px; }
li { margin-bottom: 4px; }
code {
  font-family: "Cascadia Mono", Consolas, Menlo, monospace;
  font-size: 12.5px;
  background: var(--surface-2);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--brand-dark);
}
strong { font-weight: 600; }
hr { border: none; border-top: 1px solid var(--line); margin: 22px 0; }

/* ---------- 3) 布局骨架 ---------- */
/* 左侧固定导航（宽 268px，内容区右侧自适应） */
.sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--line);
  overflow-y: auto;
  padding: 16px 12px 40px;
  z-index: 20;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }

/* 窄屏适配（手机 / 平板访问）：侧边栏改为顶部可滚动区，内容区单列 */
@media (max-width: 980px) {
  .sidebar {
    position: static; width: 100%; height: auto; max-height: 44vh;
    border-right: none; border-bottom: 1px solid var(--line);
    padding: 12px 12px 16px;
  }
  .main { margin-left: 0; padding: 18px 16px 60px; }
  .grid.g2, .grid.g3, .grid.g4 { grid-template-columns: 1fr; }
  .grid { gap: 10px; }
  .flow-track { overflow-x: auto; padding-bottom: 6px; }
  .drawer { width: 100%; }
  .modal { width: 100%; }
  .toolbar { gap: 6px; }
  .toolbar input[type="text"] { width: 100% !important; }
}

.brand {
  display: flex; align-items: center; gap: 9px;
  padding: 4px 8px 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
  color: var(--text);
}
a.brand:hover { text-decoration: none; }
a.brand:hover .brand-name { color: var(--brand-dark); }
a.brand:hover .brand-mark { opacity: .88; }
.brand-mark {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; flex: none;
}
.brand-name { font-size: 14px; font-weight: 600; line-height: 1.2; }
.brand-sub { font-size: 11.5px; color: var(--text-3); }

/* 导航分组 */
.nav-group { margin-bottom: 6px; }
.nav-group-title {
  font-size: 11.5px; color: var(--text-3);
  padding: 8px 10px 4px;
  letter-spacing: .3px;
}
.nav-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 8px;
  font-size: 13px; color: var(--text-2);
  cursor: pointer;
  border-left: 3px solid transparent;
}
.nav-item:hover { background: var(--surface-2); text-decoration: none; }
.nav-item.active {
  background: var(--brand-soft); color: var(--brand-dark);
  font-weight: 600; border-left-color: var(--brand);
}
.nav-item.todo { color: var(--text-3); cursor: not-allowed; }
.nav-item.todo:hover { background: transparent; }
.nav-num {
  font-size: 11px; color: var(--text-3);
  font-variant-numeric: tabular-nums; flex: none; min-width: 18px;
}
.nav-item.active .nav-num { color: var(--brand); }
.nav-dot {
  margin-left: auto; font-size: 10px; color: var(--text-3);
  border: 1px solid var(--line-2); border-radius: 4px; padding: 0 4px;
}
/* 含可操作功能演示区的页面：导航里用青色标记区分 */
.nav-dot.live { color: var(--teal); border-color: #9fe1cb; background: var(--teal-soft); }

/* 右侧内容区 */
.main { margin-left: var(--sidebar-w); padding: 26px 34px 80px; max-width: 1180px; }
.topbar {
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; color: var(--text-3); margin-bottom: 14px;
}
.topbar .sep { color: var(--line-2); }
.page-head { margin-bottom: 18px; }
.page-head h1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.page-tag {
  font-size: 12px; font-weight: 400; color: var(--brand);
  background: var(--brand-soft); border-radius: 6px; padding: 2px 8px;
}
.lead { color: var(--text-2); font-size: 14px; max-width: 820px; }

/* 上一页 / 下一页翻页条 */
.pager { display: flex; gap: 12px; margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--line); }
.pager a {
  flex: 1; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; background: var(--surface); color: var(--text-2);
}
.pager a:hover { border-color: var(--brand-line); text-decoration: none; }
.pager .pager-dir { font-size: 11.5px; color: var(--text-3); }
.pager .pager-title { font-size: 13.5px; color: var(--text); font-weight: 600; }
.pager .next { text-align: right; }

/* ---------- 4) 通用组件 ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  margin-bottom: 16px;
}
.card > h2, .card > h3 { margin-bottom: 12px; }
.card-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.card-hd h3 { margin: 0; }
.hint { font-size: 12.5px; color: var(--text-3); }

.grid { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .g3, .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 780px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }

/* 小卡片 / 磁贴 */
.tile {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px;
}
.tile.click { cursor: pointer; transition: border-color .15s, background .15s; }
.tile.click:hover { border-color: var(--brand-line); background: var(--brand-soft); }
.tile.click.on { border-color: var(--brand); background: var(--brand-soft); }
.tile h4 { margin-bottom: 4px; }
.tile p { margin: 0; font-size: 12.5px; color: var(--text-2); }

/* 标签 */
.tag {
  display: inline-block; font-size: 11.5px; line-height: 1.8;
  padding: 1px 8px; border-radius: 20px;
  background: var(--surface-2); color: var(--text-2); margin-right: 6px;
}
.tag.blue { background: var(--brand-soft); color: var(--brand-dark); }
.tag.green { background: var(--green-soft); color: var(--green); }
.tag.amber { background: var(--amber-soft); color: var(--amber); }
.tag.red { background: var(--red-soft); color: var(--red); }
.tag.teal { background: var(--teal-soft); color: var(--teal); }

/* 按钮 */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line-2); background: var(--surface);
  color: var(--text); border-radius: 8px;
  padding: 5px 12px; font-size: 13px; cursor: pointer;
  font-family: var(--font);
}
.btn:hover { border-color: var(--brand-line); color: var(--brand-dark); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { background: var(--brand-dark); color: #fff; }
.btn.sm { padding: 3px 9px; font-size: 12px; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }

/* 表格 */
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--surface); }
table.tbl th, table.tbl td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
table.tbl th { background: var(--surface-2); font-weight: 600; font-size: 12.5px; color: var(--text-2); }
table.tbl td.num, table.tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.tbl tr.hl td { background: var(--brand-soft); }
table.tbl tr.muted td { color: var(--text-3); }
.tbl-wrap { overflow-x: auto; margin-bottom: 14px; }

/* 说明块：这一页讲什么 / 关键概念 / 常见坑 */
.callout {
  border-radius: var(--radius); padding: 12px 16px; margin-bottom: 14px;
  font-size: 13.5px; border: 1px solid var(--line); background: var(--surface);
}
.callout .co-title { font-weight: 600; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.callout.info { background: var(--brand-soft); border-color: #b5d4f4; }
.callout.info .co-title { color: var(--brand-dark); }
.callout.tip { background: var(--teal-soft); border-color: #9fe1cb; }
.callout.tip .co-title { color: var(--teal); }
.callout.warn { background: var(--amber-soft); border-color: #fac775; }
.callout.warn .co-title { color: var(--amber); }
.callout.danger { background: var(--red-soft); border-color: #f7c1c1; }
.callout.danger .co-title { color: var(--red); }
.callout p:last-child, .callout ul:last-child { margin-bottom: 0; }

/* 三段式说明块容器 */
.brief { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
@media (max-width: 900px) { .brief { grid-template-columns: 1fr; } }
.brief .callout { margin-bottom: 0; }

/* 折叠面板（原生 details 美化，方便代码注释与展开查看） */
details.fold {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); margin-bottom: 10px; overflow: hidden;
}
details.fold > summary {
  cursor: pointer; padding: 10px 16px; font-size: 13.5px; font-weight: 600;
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::after { content: "展开 +"; font-size: 12px; color: var(--text-3); font-weight: 400; }
details.fold[open] > summary::after { content: "收起 −"; }
details.fold > summary:hover { background: var(--surface-2); }
details.fold .fold-body { padding: 2px 16px 14px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--text-2); }
details.fold .fold-body > :first-child { margin-top: 12px; }

/* ---------- 5) 教学专用组件 ---------- */
/* 流程轨道：横向节点 + 播放动画 */
.flow { margin: 6px 0 14px; }
.flow-track { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; }
.flow-node {
  flex: 1 1 120px; min-width: 120px; position: relative;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: 10px 12px; margin: 0 6px 10px 0;
  transition: all .25s ease;
}
.flow-node .fn-idx {
  font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums;
}
.flow-node .fn-name { font-size: 13.5px; font-weight: 600; }
.flow-node .fn-desc { font-size: 12px; color: var(--text-3); }
.flow-node.done { border-color: var(--brand-line); background: var(--brand-soft); }
/* 节点可点：给足可点性暗示（手型 + 悬停抬升 + 键盘焦点圈） */
.flow-node { cursor: pointer; transition: transform .12s, box-shadow .12s, border-color .12s; }
.flow-node:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, .07); border-color: var(--brand-line); }
.flow-node:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.flow-node.active {
  border-color: var(--brand); background: #fff;
  box-shadow: 0 0 0 3px rgba(24, 95, 165, .12);
}
.flow-node.active .fn-name { color: var(--brand-dark); }

/* 指标卡（数字看板通用） */
.metric {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px;
}
.metric .m-label { font-size: 12.5px; color: var(--text-2); }
.metric .m-value { font-size: 26px; font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums; }
.metric .m-unit { font-size: 13px; color: var(--text-3); font-weight: 400; margin-left: 3px; }
.metric .m-delta { font-size: 12px; }
.metric .m-delta.up { color: var(--green); }
.metric .m-delta.down { color: var(--red); }
.metric .m-note { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }

/* 进度条 / 水位条 */
.bar { background: var(--surface-2); border-radius: 20px; height: 10px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--brand); border-radius: 20px; transition: width .35s ease; }
.bar.warn > span { background: #ef9f27; }
.bar.danger > span { background: #e24b4a; }

/* 图例 */
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--text-2); margin-top: 10px; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }

/* Tab 切换视图 */
.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 14px; flex-wrap: wrap; }
.tab {
  padding: 7px 14px; font-size: 13px; cursor: pointer; color: var(--text-2);
  border-radius: 8px 8px 0 0; border: 1px solid transparent; border-bottom: none;
}
.tab:hover { background: var(--surface-2); }
.tab.on { background: var(--surface); border-color: var(--line); color: var(--brand-dark); font-weight: 600; margin-bottom: -1px; }
.pane { display: none; }
.pane.on { display: block; }

/* 键值清单（字段说明用） */
.kv { display: grid; grid-template-columns: 150px 1fr; gap: 6px 12px; font-size: 13px; }
.kv dt { color: var(--text-2); font-weight: 600; }
.kv dd { margin: 0; color: var(--text-2); }

/* 代码 / 公式块 */
.formula {
  background: var(--surface-2); border-radius: var(--radius);
  padding: 10px 14px; font-size: 13px; margin: 8px 0 12px;
  font-family: "Cascadia Mono", Consolas, monospace; color: var(--brand-dark);
}

/* 注释友好：页面里给新人的“看这里”提示 */
.sticky-note {
  border-left: 3px solid var(--amber); background: var(--amber-soft);
  padding: 8px 14px; font-size: 13px; border-radius: 0 8px 8px 0; margin: 10px 0;
}

/* 状态机节点（订单/采购单状态流转） */
.sm { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.sm-node {
  border: 1px solid var(--line); border-radius: 20px; padding: 4px 14px;
  font-size: 13px; background: var(--surface); cursor: pointer; color: var(--text-2);
}
.sm-node:hover { border-color: var(--brand-line); }
.sm-node.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.sm-detail {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: 14px 18px; font-size: 13.5px;
}

/* 学习路径勾选（首页） */
.check { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.check:last-child { border-bottom: none; }
.check input { margin-top: 5px; width: 15px; height: 15px; accent-color: var(--brand); }
.check label { font-size: 13.5px; cursor: pointer; }
.check.done label { color: var(--text-3); text-decoration: line-through; }

/* 模块地图磁贴（首页） */
.map-tile {
  display: block; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: 12px 14px; color: var(--text);
}
.map-tile:hover { border-color: var(--brand-line); background: var(--brand-soft); text-decoration: none; }
.map-tile .mt-no { font-size: 11px; color: var(--text-3); }
.map-tile .mt-name { font-size: 13.5px; font-weight: 600; }
.map-tile .mt-desc { font-size: 12px; color: var(--text-2); }
.map-tile.soon { opacity: .55; }

/* 页脚 */
.page-foot { margin-top: 40px; font-size: 12px; color: var(--text-3); border-top: 1px solid var(--line); padding-top: 14px; }

/* 打印/窄屏兜底：导航变窄 */
@media (max-width: 900px) {
  :root { --sidebar-w: 0px; }
  .sidebar { position: static; width: 100%; height: auto; border-right: none; border-bottom: 1px solid var(--line); }
  .main { margin-left: 0; padding: 18px; }
}

/* ---------- 6) 窄屏 / 超长内容 防溢出兜底 ----------
   背景：网格与弹性子项默认 min-width:auto，遇到宽表或超长单号（如 SCM-PO-2026-0917-001）
   会被内容撑开，把整页顶宽、右侧被裁。这里统一放开收缩 + 允许长串换行。 */
.card, .tile, .metric, .callout, .sm-detail, details.fold, .demo, .flow { min-width: 0; }
.grid > *, .brief > * { min-width: 0; }
.callout, .sticky-note, .lead, .hint, p, li, dd, dt, td, th, .map-tile { overflow-wrap: break-word; }
code, .formula, .fn-name, .fn-desc { overflow-wrap: anywhere; }
img { max-width: 100%; height: auto; }

/* 手机竖屏：键值清单改单列，收窄留白，流程节点竖排 */
@media (max-width: 560px) {
  .main { padding: 16px 12px 60px; }
  .card, .demo { padding: 14px; }
  .kv { grid-template-columns: 1fr; gap: 3px 0; }
  .kv dt { margin-top: 8px; }
  .flow-node { flex: 1 1 100%; margin-right: 0; }
  .pager { flex-direction: column; }
}