/* 教学大纲平台 · 设计系统
 *
 * 目标风格：现代 Windows 桌面生产力软件（WPF / WinUI 3 / Fluent），
 * 不是网页后台。视觉层级靠排版、留白节奏、背景层次、1px 边框和对齐建立，
 * 而不是靠卡片、阴影和渐变。
 *
 * 组织：① Tokens → ② 基础排版 → ③ App Shell → ④ 控件 → ⑤ 容器与数据 → ⑥ 反馈
 *      → ⑦ 极简变体（min-ui）→ ⑧ 功能域配色（dom-*）
 * 页面里请只用这里的类，不要再手搓 bg-white / rounded-lg / shadow 卡片。
 *
 * 颜色的分工（第 ⑧ 段详述）：
 *   状态色（绿/琥珀/红）—— 只走内容面：行底纹、徽标、告警条、支撑度热力格
 *   强调色（蓝 --accent）—— 只走操作与选中：主按钮、选中态、焦点环、链接
 *   域色（--dom-*）      —— 只走身份面：导航指示条、命令栏色带、面板头、分节标记
 * 三套不共用同一块表面，否则读不出「这是哪个模块」「这一行有没有问题」「哪里能点」。
 */

/* ============================ ① Tokens ============================ */
:root {
  /* 间距节奏 4 / 8 / 12 / 16 / 24 / 32 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  /* 控件高度：全站只有这三种 */
  --control-h-sm: 28px;
  --control-h-md: 32px;
  --control-h-lg: 36px;

  /* ---- 中性阶梯：同一冷灰色相（~215°），十级够用，不再零散取色 ---- */
  --n-0:   #ffffff;
  --n-25:  #fafbfc;
  --n-50:  #f4f6f8;
  --n-75:  #f2f5f8;
  --n-100: #eef1f5;
  --n-150: #e7ebf0;
  --n-200: #dde2e9;
  --n-300: #c8d0da;
  /* 弱文字 #6b7483：白底 4.72:1（AA 达标）。状态栏等灰底上 4.2:1，
     但那里只用于 placeholder 与禁用态的「上一页/下一页」——WCAG 对禁用控件不设门槛。 */
  --n-400: #6b7483;
  --n-500: #5d6675;   /* 次要文字：白底 5.6:1、状态栏底 5.0:1 */
  --n-700: #414b5a;
  --n-900: #1f2328;

  /* 语义别名（页面只用这些，不直接用阶梯）。
     底色四层要真的分得开：应用底 n-100 → 面板白 n-0 → 面板头 n-25 → 状态栏 n-150。
     原来应用底是 n-50，和白只差一档，面板一去边框（min-ui）就贴平了。 */
  --bg-app: var(--n-100);
  --bg-content: var(--n-0);
  --bg-secondary: var(--n-150);
  --bg-subtle: var(--n-25);
  --bg-hover: var(--n-75);
  --bg-selected: var(--accent-50);

  --border: var(--n-200);
  --border-strong: var(--n-300);

  /* 文字四层：正文 → 字段标签 → 次要说明 → 弱。原来标签和说明共用一个色，
     表单里「这是标签」和「这是提示」分不出轻重。 */
  --text: var(--n-900);
  --text-label: var(--n-700);
  --text-secondary: var(--n-500);
  --text-muted: var(--n-400);

  /* ---- 深色导航窗格：与浅色工作区形成明显分界（VS Code / Fluent 活动栏的做法）。
         深底上的文字、强调蓝、状态色都要单独给一套，浅色那套在这里对比不够。 ---- */
  --nav-bg: #1e2430;
  --nav-bg-hover: #262f3d;
  --nav-bg-selected: #2b3546;
  --nav-border: #2c3542;        /* 窗格内部的分隔线 */
  --nav-text: #e6e9ee;          /* 深底上 11.8:1 */
  --nav-text-muted: #9aa4b2;    /* 深底上 5.9:1，仍达 AA */
  --nav-accent: #60a5fa;        /* 选中指示条与焦点环：深底上要更亮的蓝 */
  --nav-warn: #f2c057;          /* 待办计数：深底上的琥珀 */
  /* 深底上的四个域色（浅色那套在 #1e2430 上完全看不见），以及各自 40% 混入底色的
     暗一档——未选中的导航项用暗档，hover 时提到亮档，选中态仍由 --nav-accent 接管。 */
  --nav-dom-syllabus: #60a5fa;
  --nav-dom-program: #a78bfa;
  --nav-dom-people: #45c0cc;
  --nav-dom-system: #94a3b8;
  --nav-dom-syllabus-dim: #385881;
  --nav-dom-program-dim: #554d81;
  --nav-dom-people-dim: #2e626e;
  --nav-dom-system-dim: #4d5766;

  /* ---- 品牌蓝：一条同色相的浅→深，用于主按钮、选中态、焦点环 ---- */
  --accent-50: #eef4fe;
  --accent-100: #dce8fd;
  --accent-200: #b7cffb;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-active: #1b3fa8;
  --accent-subtle: var(--accent-50);
  --accent-border: var(--accent-200);

  /* ---- 状态四色：三家族亮度对齐（浅底 / 细边 / 深字），与蓝同一饱和度层级 ---- */
  --ok: #15703c;
  --ok-bg: #ecf6f0;
  --ok-border: #c0dfcb;
  --warn: #8a5300;
  --warn-bg: #fdf5e7;
  --warn-border: #efdcb4;
  --err: #a92e22;
  --err-bg: #fdefed;
  --err-border: #f0c9c3;
  --info: #1b5cba;
  --info-bg: var(--accent-50);
  --info-border: var(--accent-200);
  /* 非限选选修课的紫，也纳入同一体系 */
  --purple: #5b3fa8;
  --purple-bg: #f5f2fd;
  --purple-100: #ebe5fa;

  /* 整行/整列铺色用「弱一档」：一屏 300 个格子都上色时，
     浅底也会显得脏，弱一档才像 WinUI 的分组底纹。徽标与表头仍用上面的正常档。 */
  --ok-bg-hover: #dff0e6;
  --warn-bg-hover: #f9ead1;
  --err-bg-hover: #fadfdb;
  --info-bg-hover: #dbe8fb;
  --err-hover: #96190f;
  --ok-bg-weak: #f7fbf9;
  --warn-bg-weak: #fefbf4;
  --err-bg-weak: #fef8f7;
  --purple-bg-weak: #faf8fe;
  --purple-200: #d6c9f5;   /* 与 --accent-200 同强度，供分类标题底用 */
  --purple-border: #ded5f7;

  /* ---- 青：唯一新增的色相，给「课程与人员」域。
         色相 187°，与 --ok 的森林绿（146°）拉开 41°，并排不会读成「通过」。
         白底 7.66:1、自身浅底上 6.92:1，都远超 AA。 ---- */
  --teal: #0d5c66;
  --teal-bg: #ecf5f7;
  --teal-100: #d9ebef;
  --teal-200: #b6d7de;
  --teal-border: #cbe3e8;

  /* ---- 域色的语义别名：页面与组件只引用 --dom-*，由 body.dom-* 改写它。
         跨域页面（仪表盘、变更审批、个人资料）落回中性，不占色。 ---- */
  --dom: var(--n-300);
  --dom-weak: var(--n-100);
  --dom-tint: var(--bg-subtle);

  /* ---- 支撑度热力三档（H 实底 / M·L 浅底深字），与状态色同族 ---- */
  --lv-h-bg: #b4453a;
  --lv-h-fg: #ffffff;
  --lv-h-hover: #9d3b31;
  --lv-m-bg: #f7e2b8;
  --lv-m-fg: var(--warn);
  --lv-m-hover: #f2d69f;
  --lv-l-bg: #d2e8d9;
  --lv-l-fg: var(--ok);
  --lv-l-hover: #bfdfc9;

  /* ---- 图谱 / 关系图的线与标签，一律取自上面的阶梯 ---- */
  --graph-node-stroke: var(--n-300);
  --graph-link: var(--n-400);
  --graph-label: #1b4a8a;
  --graph-band: var(--n-25);

  --focus-ring: 0 0 0 2px rgba(37, 99, 235, .28);
  --shadow-flyout: 0 4px 12px rgba(16, 24, 40, .10);
  --shadow-dialog: 0 12px 32px rgba(16, 24, 40, .16);

  --font: "Segoe UI Variable", "Segoe UI", Inter, system-ui, -apple-system,
          "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  --font-mono: "Cascadia Mono", Consolas, "SF Mono", ui-monospace, monospace;

  --dur: 120ms;
}

/* ======================== ② 基础排版 ======================== */
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg-app);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.5;
}

/* 界面的三层结构，每层用「尺寸 + 字重 + 字间距 + 结构标记」四件事同时标记。
   这四件事不含颜色，是为了让层级在跨域页面（没有域色）上照样成立；
   有域色时（第 ⑧ 段）竖条与底色再叠一层身份信息上去。
     L1 页面   .page-title   16px / 650 / 收紧字距   命令栏 44px 高 + 粗下边线
     L2 区块   .panel-hd     13px / 600 / 放开字距   面板头 36px 高 + 左侧 3px 竖条
     L3 分节   .section-hd   12.5px / 600 / 常规     上方分隔线 + 前置短横
   正文 13px 不变。L2 与正文同字号是有意的——桌面软件的标题不靠字号变大取胜，
   但必须靠别的手段拉开，否则就是现在这种「标题和数据一样大」的糊状。 */
.page-title { font-size: 16px; font-weight: 650; line-height: 1.3; letter-spacing: -.01em; }
.section-hd {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: 12.5px; font-weight: 600; color: var(--text);
  margin-bottom: var(--space-2);
}
.section-hd::before {
  content: ""; flex: none; width: 8px; height: 1px;
  background: var(--border-strong);
}
/* 分节标题后面跟一条填满剩余宽度的细线：一眼看出「这里开始一节」，且不占额外高度 */
.section-hd::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--border);
}
.section-hd .meta { flex: none; font-size: 12px; font-weight: 400; color: var(--text-secondary); }

/* 电子签名图：按高度约束，宽度随原图比例。与导出 Word 的 0.9cm 观感一致，
   浅底衬出来才看得清白底签名的边界。 */
.sign-img {
  display: block; height: 34px; width: auto; max-width: 100%;
  padding: var(--space-1) var(--space-2);
  background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.sign-img-sm { height: 22px; padding: 2px 4px; }

/* 支撑矩阵：课程负责人暂存未提交的标定，用虚线框标出来 */
.lv-dirty { outline: 2px dashed var(--accent); outline-offset: -2px; }

/* 大纲章节标题：四级，序号与《课程教学大纲》模板一一对应
   一、…（sec-1）→（一）…（sec-2）→ 1、…（sec-3）→（1）…（sec-4）
   层级靠三件事同时递进：缩进、颜色、左侧标记。字号只在 1px 内微调，
   免得标题比正文还抢眼——桌面软件的层级不靠字号变大取胜。 */
.sec-1 {
  /* 编辑器里没有面板，一级章节标题就是那一页的「区块名」，
     所以和 .panel-hd 用同一个字间距信号 */
  font-size: 13.5px; font-weight: 600; letter-spacing: .04em; color: var(--text);
  padding-bottom: var(--space-1); border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-3);
}
.sec-2 { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: var(--space-2); }
.sec-3 { font-size: 12.5px; font-weight: 600; color: var(--text); margin-bottom: var(--space-2); }
.sec-4 { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); margin-bottom: var(--space-2); }
/* 缩进阶梯 8 / 16 / 24：第 2、3 层各带一条竖线，深浅区分；第 4 层不再加线，
   改用一个短横标记，避免三条竖线并排糊成一片。 */
.sec-2 { padding-left: var(--space-2); border-left: 2px solid var(--border-strong); }
.sec-3 { padding-left: var(--space-2); margin-left: var(--space-3); border-left: 2px solid var(--border); }
.sec-4 { padding-left: var(--space-2); margin-left: var(--space-4); }
.sec-4::before {
  content: ""; display: inline-block; width: 10px; height: 1px; vertical-align: middle;
  background: var(--border-strong); margin-right: var(--space-2);
}
.sec-1 + .sec-2, .sec-2 + .sec-3, .sec-3 + .sec-4 { margin-top: 0; }
/* 页签内的序号徽标：让屏幕上的位置和 Word 里的章节号对得上 */
.tab-no { color: var(--text-muted); font-size: 11.5px; letter-spacing: -.02em; margin-right: 4px; }
.tab.on .tab-no { color: var(--accent); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-warn { color: var(--warn); }
.text-err { color: var(--err); }
.text-ok { color: var(--ok); }
.mono { font-family: var(--font-mono); font-size: 12px; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a.plain, a.plain:hover { color: inherit; text-decoration: none; }

*:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ======================== ③ App Shell ======================== */
.shell { display: flex; min-height: 100vh; }

/* 导航窗格：深色 Fluent 活动栏。深底与浅色工作区形成明显分界，
   一眼分得清「导航」与「内容」；窗格内的文字与控件都走 --nav-* 这套色。 */
.nav-pane {
  position: relative;
  width: 224px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  background: var(--nav-bg);
  border-right: 1px solid var(--nav-border);
  color: var(--nav-text);
}
.nav-brand {
  padding: var(--space-3) var(--space-3) var(--space-3) 20px;
  border-bottom: 1px solid var(--nav-border);
}
.nav-brand b { display: block; font-size: 13px; font-weight: 600; }
.nav-brand span { display: block; font-size: 11px; color: var(--nav-text-muted); }

.nav-user {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2) var(--space-2) 20px;
  border-bottom: 1px solid var(--nav-border);
}
.nav-user-name { font-size: 12px; font-weight: 500; }
.nav-user-role { font-size: 11px; color: var(--nav-text-muted); }

.nav-list { padding: var(--space-2); flex: 1 1 auto; }
/* 导航分组：小字号 + 放开字距已经把它和导航项分开了，再加一条上方发丝线，
   「这里换了一组」就成了结构信号而不只是排版差异 */
.nav-group {
  margin: var(--space-3) 0 var(--space-1);
  padding: var(--space-3) var(--space-3) 0;   /* 与导航项文字同一条 20px 线 */
  border-top: 1px solid var(--nav-border);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--nav-text-muted);
}
/* 导航项：34px 高，选中态是「提亮一档的底 + 左侧指示条」而不是实心蓝块 */
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 34px;
  padding: 0 var(--space-2) 0 var(--space-3);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--nav-text);
  transition: background var(--dur) ease-out;
}
.nav-item:hover { background: var(--nav-bg-hover); text-decoration: none; }
.nav-item:active { background: var(--nav-bg-selected); }
.nav-item.on { background: var(--nav-bg-selected); font-weight: 600; }
.nav-item.on::before {
  content: "";
  position: absolute;
  left: 2px; top: 7px; bottom: 7px;
  width: 3px;
  border-radius: 2px;
  background: var(--nav-accent);
}
.nav-item .count { margin-left: auto; }

/* 窗格里的控件与徽标跟着深底走（浅色那套在这里会看不清） */
.nav-pane .btn-ghost { color: var(--nav-text-muted); }
.nav-pane .btn-ghost:hover { background: var(--nav-bg-hover); color: var(--nav-text); }
.nav-pane .count.count-warn {
  background: transparent;
  border-color: transparent;
  color: var(--nav-warn);
  font-weight: 600;
}
.nav-pane *:focus-visible { outline-color: var(--nav-accent); }

/* 命令栏：页面标题 + 上下文信息 + 页面级命令，紧凑一行（WinUI CommandBar）

   这是结构的第 1 层（页面）。与第 2 层（面板）的区分不靠颜色——两者都是白底——
   而靠三件事同时递进：更高的行高（44 vs 36）、更粗的下边线（border-strong）、
   以及下方一段真实的留白（原来间隙是 0，命令栏直接贴住面板，层级被压平）。 */
.workspace { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
/* 命令栏 / 内容区 / 状态栏共用 16px 页边距：页面标题、面板外框、状态栏文字左边缘对齐同一条线 */
.command-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-1) var(--space-4);
  background: var(--bg-content);
  border-bottom: 1px solid var(--border-strong);
}
.command-bar-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  font-size: 12px;
  color: var(--text-secondary);
}
/* 页面级命令（导入 / 导出 / 批量…）统一收在这里，不再散落在内容区顶部 */
.command-bar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
}
/* 内容区顶部留 16px：命令栏与第一个面板之间要有真实的呼吸，不能贴在一起 */
.page-body { flex: 1 1 auto; padding: var(--space-4); }

/* 状态栏：页面级汇总（记录数、当前版本、筛选说明）固定在工作区底部 */
.statusbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 26px;
  padding: 0 var(--space-4);
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-secondary);
}
.statusbar-sep { width: 1px; height: 12px; background: var(--border-strong); }
.statusbar-right { margin-left: auto; }

/* 独立页（登录 / 找回口令）：居中窄栏 */
.standalone { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-5); }
.standalone-card {
  width: 320px;
  background: var(--bg-content);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-flyout);
  padding: var(--space-5);
}

/* ========================= ④ 控件 ========================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  height: var(--control-h-md);
  padding: 0 var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur) ease-out, border-color var(--dur) ease-out;
}
.btn-sm { height: var(--control-h-sm); padding: 0 var(--space-2); font-size: 12px; }
.btn-lg { height: var(--control-h-lg); padding: 0 var(--space-4); }

.btn-primary { background: var(--accent); color: var(--n-0); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { background: var(--accent-active); }

.btn-plain { background: var(--bg-content); color: var(--text); border-color: var(--border-strong); }
.btn-plain:hover { background: var(--bg-hover); }
.btn-plain:active { background: var(--bg-secondary); }

.btn-ghost { background: transparent; color: var(--text); }
.btn-ghost:hover { background: var(--bg-hover); }

.btn-danger { background: var(--err); color: var(--n-0); }
.btn-danger:hover { background: var(--err-hover); }

.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; }
/* 加载态：文字保留，前面加一个转圈 */
.btn.is-loading { pointer-events: none; }
.btn.is-loading::before {
  content: "";
  width: 12px; height: 12px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(1turn); } }

/* 行内文字动作：数据表格里的「设为不编 / 创建大纲 / 恢复」这类。
   28px 的按钮会把 34px 的行撑到 50px，所以行内动作用文字按钮，保持行高一致。 */
.btn-link {
  display: inline;
  height: auto;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  color: var(--accent);
  cursor: pointer;
}
.btn-link:hover { text-decoration: underline; }
.btn-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.btn-link:disabled { color: var(--text-muted); cursor: not-allowed; text-decoration: none; }

/* 悬浮按钮：长表单底部跟随的「保存全部修改」，唯一允许带浮层阴影的按钮 */
.btn-floating { box-shadow: var(--shadow-flyout); }

/* 图标：全站只用一套 14–16px 的线性 SVG（跟随 currentColor），不用 emoji */
.icon { width: 14px; height: 14px; flex: 0 0 auto; }
.icon-16 { width: 16px; height: 16px; }

/* 图标按钮（表格行内的小操作） */
.btn-icon {
  height: var(--control-h-sm);
  width: var(--control-h-sm);
  padding: 0;
  color: var(--text-secondary);
}
.btn-icon:hover { background: var(--bg-hover); color: var(--text); }

.inp, .sel {
  width: 100%;
  height: var(--control-h-md);
  padding: 0 var(--space-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-content);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
}
textarea.inp { height: auto; min-height: var(--control-h-lg); padding: var(--space-2); line-height: 1.5; resize: vertical; }
.inp-sm { height: var(--control-h-sm); font-size: 12px; }
.inp:hover, .sel:hover { border-color: var(--n-300); }
.inp:focus, .sel:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.inp::placeholder { color: var(--text-muted); }
.inp:disabled, .inp[readonly] { background: var(--bg-subtle); color: var(--text-secondary); }
.inp.is-error { border-color: var(--err); }
.inp.is-warn { border-color: var(--warn-border); background: var(--warn-bg); }

/* 表单字段：标签 12px / 500，与控件间距 4px */
.field { display: block; }
/* 标签比提示重一档：标签是「这一格填什么」，提示是「怎么填」，不该同色同重 */
.field-label { display: block; margin-bottom: var(--space-1); font-size: 12px; font-weight: 600; color: var(--text-label); }
.field-hint { margin-top: var(--space-1); font-size: 12px; color: var(--text-secondary); }
.check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.check input { accent-color: var(--accent); width: 14px; height: 14px; margin: 0; }

/* 工具栏：贴在内容顶部的一行操作区，控件 28–32px */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-content);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  /* 与 .filter-bar 同理：工具条和它下面的内容是同一组，只留 8px */
  margin-bottom: var(--space-2);
  min-height: 40px;
}
.toolbar-sep { width: 1px; align-self: stretch; min-height: 20px; background: var(--border); margin: 0 var(--space-1); }
.toolbar-spacer { margin-left: auto; }

/* 筛选条：单行、标签内联。原来标签在控件上方，一行筛选要占 56px；
   内联后 36px，长列表页每屏多出两行数据。 */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-content);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  /* 只留 8px：筛选条与它下面那张表是同一组。与模块间距 24 对比，「成组」就读出来了 */
  margin-bottom: var(--space-2);
  min-height: 40px;
}
.filter { display: inline-flex; align-items: center; gap: 6px; }
.filter > span { font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.filter .inp, .filter .sel { height: var(--control-h-sm); font-size: 12px; }
/* 已生效的筛选项高亮一下，免得「怎么少了几行」找不到原因 */
.filter .inp.is-set, .filter .sel.is-set { border-color: var(--accent-border); background: var(--accent-subtle); }

/* 页签（大纲编辑器的 7 步） */
.tabs { display: flex; overflow-x: auto; background: var(--bg-content); border: 1px solid var(--border); border-bottom: 0; border-radius: var(--radius-md) var(--radius-md) 0 0; }
.tab {
  display: flex; align-items: center; gap: 6px;
  padding: var(--space-2) var(--space-3);
  border-bottom: 2px solid transparent;
  font-size: 13px; color: var(--text-secondary); white-space: nowrap;
}
.tab:hover { background: var(--bg-hover); text-decoration: none; color: var(--text); }
.tab.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; background: var(--bg-content); }

/* 大纲编辑器：页签 + 正文 + 右侧检查栏（本页组件，供 7 个页签共用） */
.editor-body {
  background: var(--bg-content);
  border: 1px solid var(--border);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  padding: var(--space-4);
  /* 表5 这类列很多的表在编辑区内部横向滚动，别把整页推出横向滚动条 */
  overflow-x: auto;
}
/* 编辑区通栏：操作都在命令栏里，页面不再留右侧栏 */
.editor-wrap { min-width: 0; }

/* 完成性校验条：页签上方一条，可展开逐条查看（原来是右栏的一块面板） */
.check-bar {
  margin-bottom: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--err-bg);
  border: 1px solid var(--err-border);
  border-radius: var(--radius-md);
  font-size: 12.5px;
}
.check-bar > summary {
  display: flex; align-items: center; gap: var(--space-2);
  cursor: pointer; list-style: none;
}
.check-bar > summary::-webkit-details-marker { display: none; }
.check-bar > summary::before { content: "▸"; color: var(--text-secondary); }
.check-bar[open] > summary::before { content: "▾"; }
.check-list {
  display: grid; gap: 2px;
  margin: var(--space-2) 0 var(--space-1) var(--space-3);
  font-size: 12px;
}
.check-list a { color: var(--err); }

/* 变更记录：低频信息，收在页面底部 */
.change-log { margin-top: var(--space-3); font-size: 12px; color: var(--text-secondary); }
.change-log > summary { cursor: pointer; }
.change-log-body { display: grid; gap: var(--space-1); margin-top: var(--space-2); }
.change-log-item {
  display: flex; align-items: center; gap: var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--border);
}
/* AI 辅助条：紧贴它所属的那张表/那个字段 */
.ai-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.ai-bar-status { flex: 0 0 100%; font-size: 12px; color: var(--text-secondary); }
/* 上一步 / 下一步 */
.wizard-nav { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-3); }
.wizard-step { font-size: 12px; color: var(--text-muted); }

/* ==================== ⑤ 容器与数据 ==================== */
/* Panel：桌面软件的主容器。没有阴影，1px 边框 + 6px 圆角。
   这是结构的第 2 层（区块）。 */
.panel {
  background: var(--bg-content);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
/* 间距阶梯：组内 8 → 模块内 12 → 模块间 24。
   原来模块间距 16、模块内 12，两者几乎分不出「块与块之间」和「块里面」；
   而且模块间距与页面内边距同为 16，连「成组」都读不出来。

   规则按「位置」写而不是枚举类名：内容区的每两个直接子块之间一律 24，这样临时用
   Tailwind 拼出来的块（仪表盘底部那两栏）也在节奏里。唯一的例外是控制条——
   筛选条 / 版本切换条与紧随其后的内容属于**同一组**，间距由控制条自己的 8px 决定。 */
.panel + .panel { margin-top: var(--space-5); }
.page-body > * + * { margin-top: var(--space-5); }
.page-body > .filter-bar + *, .page-body > .toolbar + * { margin-top: 0; }
.panel-hd {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 36px;
  padding: var(--space-1) var(--space-3);
  /* 左侧 3px 的中性竖条：区块标题的形状标记。用 inset 阴影而不是 border——
     border 会把文字推开 3px，破坏「面板头文字与表格首列对齐同一条 12px 线」。
     不用强调色：强调色留给关键操作，这里只要「这是一个块的名字」这一个信息。 */
  box-shadow: inset 3px 0 0 var(--border-strong);
  border-bottom: 1px solid var(--border);
  background: var(--bg-subtle);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  /* 与正文同为 13px，但字间距放到 .04em——中文没有大小写可用，字间距是造出
     「小标题」质感最直接的手段，比把字号推大更贴桌面软件。 */
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
}
.panel-hd .meta {
  margin-left: auto;
  font-size: 12px; font-weight: 400; letter-spacing: 0;
  color: var(--text-secondary);
}
.panel-bd { padding: var(--space-3); }
.panel-bd-tight { padding: var(--space-2); }
.panel-scroll { overflow-x: auto; border-radius: 0 0 var(--radius-md) var(--radius-md); }
.panel-ft {
  padding: var(--space-1) var(--space-3);
  min-height: 30px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border-top: 1px solid var(--border);
  background: var(--bg-subtle);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  font-size: 12px;
  color: var(--text-secondary);
}
/* 面板内分节：用分隔线而不是再套一层卡片 */
.section + .section { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.divider { height: 1px; background: var(--border); margin: var(--space-4) 0; }

/* 指标条（导入报告、仪表盘）：一条横向的「标签 值 说明」序列，不是一排大卡片。
   §31 点名要避免的就是「巨大标题 + 三张大卡」那种 AI Dashboard 版式：
   这里把数字压到 15px、格子挤在一行、用竖分隔线断开，读起来像桌面软件的汇总条。 */
.stats {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  background: var(--bg-content);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.stat {
  flex: 1 1 0;
  min-width: 150px;
  padding: var(--space-2) var(--space-3);
  border-left: 1px solid var(--border);
}
.stat:first-child { border-left: 0; }
.stat-k { font-size: 12px; color: var(--text-secondary); }
.stat-v {
  display: inline-block;
  margin-right: 6px;
  font-size: 15px; font-weight: 600;
  font-variant-numeric: tabular-nums; line-height: 1.4;
}
.stat-sub { display: inline; font-size: 12px; color: var(--text-muted); }
.stat.is-actionable { background: var(--warn-bg-weak); box-shadow: inset 2px 0 0 var(--warn); }
.stat.is-actionable .stat-v { color: var(--warn); }
a.stat:hover { background: var(--accent-subtle); text-decoration: none; }
a.stat.is-actionable:hover { background: var(--warn-bg); }
/* 导入报告那种独立成块的统计（不在一条里）仍可用 stats-tiles 拆开 */
.stats-tiles { border: 0; background: none; gap: var(--space-2); flex-wrap: wrap; }
.stats-tiles .stat {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-content);
}

/* DataGrid：34px 行高、行悬停、数字右对齐、表头可粘顶
   （类名沿用 grid：导入培养方案时生成的表格 HTML 已存库并带该类名。
     display:table 必须显式声明，否则 Tailwind 的 .grid{display:grid} 会拆散表格） */
table.grid { display: table; width: 100%; border-collapse: collapse; font-size: 13px; }
table.grid thead { display: table-header-group; }
table.grid tbody { display: table-row-group; }
table.grid tfoot { display: table-footer-group; }
table.grid th, table.grid td {
  border: 1px solid var(--border);
  padding: 6px var(--space-2);
  vertical-align: top;
  text-align: left;
  font-variant-numeric: tabular-nums;      /* 编号、日期、学时都能上下对齐 */
}
table.grid th {
  background: var(--bg-subtle);
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}
/* ---- grid-list：列表页的 DataGrid ----
   只留横向分隔线（竖线太多，一屏数据看着像网格纸），表头与内容同底色、靠一条略深的
   下边线分隔（WinUI DataGrid 的做法）。培养方案导入的表格沿用默认的四边框线，不受影响。 */
/* grid-stretch：同一行里的多行文本框拉到与本行最高的单元格齐高。
   课程目标表的「支撑的毕业要求指标点」列是 n 个勾选行，高度随指标点个数变（8 个指标点约 224px）；
   目标描述 / 考核内容 / 评价依据若固定 rows=4（90px），行底就会参差不齐。
   ——单元格 height 是 auto，子元素的百分比高度没有参照物，所以要三步：
     ① 给表一个 1px 定高当参照（表格的 height 是「最小高度」语义，实际仍由内容决定）；
     ② td 撑满行高；③ textarea 再撑满 td。
   课程目标表里这三个 textarea 的 rows 写 2 而不是 4：rows=4 时它自身 90px 会成为本行最高内容，
   反过来决定行高，就永远贴不上指标点列。rows 只是无 CSS 时的兜底；
   指标点少于 3 个时由 min-height 兜住，不至于缩成一条缝。 */
table.grid-stretch { height: 1px; }
table.grid-stretch tbody td { height: 100%; }
table.grid-stretch tbody td > textarea.inp {
  height: 100%;
  min-height: 76px;
}

table.grid-list th, table.grid-list td { border: 0; border-bottom: 1px solid var(--border); }
table.grid-list tbody tr:last-child > td { border-bottom: 0; }
/* 长表的扫读节奏：每 5 行一条略深的线。不铺斑马底色——底色是状态色的地盘（行内已有
   row-ok / row-warn / row-err），再加一层就分不清「这行有问题」还是「这行是偶数行」。
   短表（不足 5 行）自然不触发。 */
table.grid-list tbody tr:nth-child(5n) > td { border-bottom-color: var(--border-strong); }
table.grid-list tbody tr:nth-child(5n):last-child > td { border-bottom: 0; }
table.grid-list th {
  background: var(--bg-content);
  border-bottom: 1px solid var(--border-strong);
  font-size: 12px;
}
/* 首末列与面板标题同一内缩，文字左边缘对齐 */
table.grid-list th:first-child, table.grid-list td:first-child { padding-left: var(--space-3); }
table.grid-list th:last-child, table.grid-list td:last-child { padding-right: var(--space-3); }
table.grid tbody tr:hover > td { background: var(--bg-hover); }
table.grid tbody tr.is-selected > td { background: var(--bg-selected); }
/* 键盘选行：方向键移动的当前行（与「我负责」那类 is-selected 底色区分开，用左侧指示条） */
table.grid tbody tr.is-active > td { background: var(--bg-selected); }
table.grid tbody tr.is-active > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
table.grid tbody tr:focus { outline: none; }
table.grid tbody tr:focus-visible > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

/* 行级状态底色（导入报告的 新增/更新/跳过、受保护的备份…）。
   放在 hover 规则之后，保证悬停时仍能看出这一行是什么状态。 */
table.grid tbody tr.row-ok > td { background: var(--ok-bg); }
table.grid tbody tr.row-ok:hover > td { background: var(--ok-bg-hover); }
table.grid tbody tr.row-warn > td { background: var(--warn-bg); }
table.grid tbody tr.row-warn:hover > td { background: var(--warn-bg-hover); }
table.grid tbody tr.row-err > td { background: var(--err-bg); }
table.grid tbody tr.row-err:hover > td { background: var(--err-bg-hover); }
table.grid tbody tr.row-info > td { background: var(--info-bg); }
table.grid tbody tr.row-info:hover > td { background: var(--info-bg-hover); }
/* 变更审批：课程目标 = 蓝、支撑矩阵 = 紫，两类卡片一眼分得清。
   状态色（琥珀待审 / 绿通过 / 红退回）另有其义，所以分类只能用这两支品牌中性色；
   底色都压得很浅，表格文字仍近似在白底上，对比度不受影响。
   颜色不作唯一线索：类型列同时给同色标签。 */
/* 卡片底只上很浅一层（表格里字多，重了会脏）；真正让人一眼分清的是**标题**：
   饱和一档的底 + 同色标题文字 + 4px 左指示条。两个色相在浅底上区分度不够，
   信号得压在标题这一条上。 */
.panel-obj { background: var(--accent-50); border-color: var(--accent-border); }
.panel-obj > .panel-hd {
  background: var(--accent-200);
  color: var(--accent-active);
  border-bottom-color: var(--accent);
  box-shadow: inset 4px 0 0 var(--accent);
}
.panel-matrix { background: var(--purple-bg); border-color: var(--purple-border); }
.panel-matrix > .panel-hd {
  background: var(--purple-200);
  color: var(--purple);
  border-bottom-color: var(--purple);
  box-shadow: inset 4px 0 0 var(--purple);
}
.panel-obj > .panel-hd .meta, .panel-matrix > .panel-hd .meta { color: inherit; opacity: .8; }
/* 两类混排的那张表（我提交的申请）：逐行上色 */
table.grid tbody tr.row-obj > td { background: var(--accent-50); }
table.grid tbody tr.row-obj:hover > td { background: var(--accent-100); }
table.grid tbody tr.row-matrix > td { background: var(--purple-bg); }
table.grid tbody tr.row-matrix:hover > td { background: var(--purple-100); }

table.grid tbody tr.row-muted > td { background: var(--bg-subtle); }
table.grid tbody tr.row-muted:hover > td { background: var(--bg-secondary); }

/* ---- 五档评价标准的录入区（表6 / 表7）----
   表6 的数据本是「考核环节 × 课程目标」二维结构（Word 里靠评价方式列的合并单元格
   表达）。屏幕上拍平成一长串同构卡片就找不到北了，所以按考核环节分组：
   一个环节 = 一个 .band-grp，组内每个课程目标一行 .band-card。
   五档标题在组头写一次，组内各行的输入框对齐到同一栅格，省掉逐卡重复的 5 个标签。
   栅格与边框都在这里定义，不用 Tailwind 的 grid-cols-5 —— 这一段是全站最依赖
   多列布局的地方，CDN 万一没加载上，至少这里还站得住。 */
.band-grp {
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-subtle); margin-bottom: var(--space-4);
}
.band-grp-hd {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-secondary); border-bottom: 1px solid var(--border);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  font-size: 12.5px; font-weight: 600; color: var(--text);
}
.band-grp-hd .meta { font-weight: 400; color: var(--text-secondary); font-size: 12px; }
.band-grp-hd .spacer { margin-left: auto; }
.band-grp-body { padding: var(--space-2); display: grid; gap: var(--space-2); }

/* 五档栅格：档位标题行与每行输入框共用同一套列宽，天然对齐。
   目标列 120px 刚够放「课程目标7」+ 成绩比例，再宽就是从五档身上抢地方了。
   集中实践课程按成绩组成分表，组内要再用「评价方式」列区分环节，多一列（.has-eval）。 */
/* --band-cols 由模板给出：百分制 / 五级制是 5，二级制只有及格/不及格 2 档 */
.band-row { --band-cols: 5; display: grid;
            grid-template-columns: 120px repeat(var(--band-cols), 1fr); gap: var(--space-2); }
.band-row.has-eval { grid-template-columns: 120px 108px repeat(var(--band-cols), 1fr); }
.band-cap {
  font-size: 11.5px; font-weight: 600; color: var(--text-secondary);
  padding-bottom: var(--space-1); border-bottom: 1px solid var(--border);
}
.band-card { align-items: start; }
.band-card > .band-obj {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--bg-content); border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-size: 12px;
}
/* 表6 蓝 / 表7 紫：滚动到第 20 张卡时还知道自己在哪张表里 */
.band-card.is-t6 > .band-obj { box-shadow: inset 3px 0 0 var(--accent); }
.band-card.is-t7 > .band-obj { box-shadow: inset 3px 0 0 var(--purple); }
.band-obj .seq { font-weight: 600; color: var(--text); }
.band-obj .sub { color: var(--text-secondary); font-size: 11.5px; line-height: 1.35; }
/* 一档都没写的行给个极浅的提示底，扫一眼就知道还差哪几行 */
.band-card.is-empty > .band-obj { background: var(--warn-bg-weak); border-color: var(--warn-border); }

/* 长表格：表头粘在滚动容器顶部，翻到第 40 行还知道自己在看哪一列 */
.panel-scroll { position: relative; }
table.grid.sticky-head thead th {
  position: sticky; top: 0; z-index: 2;
  box-shadow: inset 0 -1px 0 var(--border-strong);   /* sticky 时边框会被裁掉，用内阴影画线 */
}
table.grid-list.sticky-head thead th { background: var(--bg-content); }

/* 可排序表头：整格可点，右侧留出箭头位；当前排序列的箭头用品牌色 */
table.grid th[data-sort] { cursor: pointer; user-select: none; padding-right: 18px; position: relative; }
table.grid th[data-sort]:hover { background: var(--bg-secondary); color: var(--text); }
table.grid th[data-sort]::after {
  content: "";
  position: absolute; right: 6px; top: 50%;
  width: 0; height: 0; margin-top: -2px;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 4px solid var(--text-muted);
  opacity: 0;
}
table.grid th[data-sort]:hover::after { opacity: .5; }
table.grid th[aria-sort="ascending"]::after {
  opacity: 1; border-top: 0; border-bottom: 4px solid var(--accent); margin-top: -2px;
}
table.grid th[aria-sort="descending"]::after { opacity: 1; border-top-color: var(--accent); }
table.grid th[aria-sort] { color: var(--text); }
/* 表头默认左对齐，但要能被列上的对齐类覆盖，保证标题与记录内容同一对齐方式 */
table.grid th.text-center, table.grid td.text-center { text-align: center; }
table.grid th.text-right, table.grid td.text-right { text-align: right; }
table.grid td.num, table.grid th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* 行内控件贴合 34px 行高 */
table.grid td .inp, table.grid td .sel { height: var(--control-h-sm); font-size: 12px; }
table.grid td .btn { height: var(--control-h-sm); padding: 0 var(--space-2); font-size: 12px; }

/* 培养方案原文：浏览器自带的 PDF 组件，占满面板宽度、一屏多一点高 */
.pdf-view { display: block; width: 100%; height: 76vh; border: 0; background: var(--bg-secondary); }

/* 关系图 / 图谱的画布面板：留 12px 呼吸位并自带滚动（限高由页面给 max-height） */
.graph-panel { padding: var(--space-3); margin-bottom: var(--space-3); overflow: auto; }
.graph-panel-body { padding: var(--space-3); overflow: auto; }

/* 空状态：小字一句话 + 一个操作，不要插画和大留白 */
.empty { padding: var(--space-5) var(--space-4); text-align: center; color: var(--text-secondary); font-size: 13px; }
.empty .btn { margin-top: var(--space-3); }
/* 表格内的空状态行：与 .empty 同一节奏，但保持在单元格里 */
td.empty-row { padding: var(--space-4) var(--space-3); text-align: center; color: var(--text-secondary); }

/* ======================== ⑥ 反馈 ======================== */
/* 状态徽标：浅底 + 细边 + 小字，不用高饱和大药丸 */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.tag-ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-border); }
.tag-warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-border); }
.tag-err { background: var(--err-bg); color: var(--err); border-color: var(--err-border); }
.tag-info { background: var(--info-bg); color: var(--info); border-color: var(--info-border); }
.tag-neutral { background: var(--bg-secondary); color: var(--text-secondary); border-color: var(--border); }
.tag-purple { background: var(--purple-bg); color: var(--purple); border-color: var(--purple-border); }
/* 支撑度三档：图例与矩阵共用同一组色，别再各页面写内联色 */
.tag-lv-h { background: var(--lv-h-bg); color: var(--lv-h-fg); border-color: var(--lv-h-hover); }
.tag-lv-m { background: var(--lv-m-bg); color: var(--lv-m-fg); border-color: var(--warn-border); }
.tag-lv-l { background: var(--lv-l-bg); color: var(--lv-l-fg); border-color: var(--ok-border); }
/* 计数气泡（导航里的待审数、页签上的未通过项数） */
.count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px;
  font-size: 11px; font-weight: 600; line-height: 1;
}
.count-err { background: var(--err); color: var(--n-0); }
.count-warn { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-border); }
.count-ok { color: var(--ok); }

/* 提示条：贴在内容顶部一行，不做成彩色大块 */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  font-size: 12.5px;
  margin-bottom: var(--space-4);
}
.alert-ok { background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok); }
.alert-warn { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn); }
.alert-err { background: var(--err-bg); border-color: var(--err-border); color: var(--err); }
.alert-info { background: var(--info-bg); border-color: var(--info-border); color: var(--info); }
.alert-tight { margin-bottom: 0; }

/* 列宽拖拽手柄（由 static/ui.js 注入到每个叶子表头） */
.col-resizer { position: absolute; top: 0; right: -2px; bottom: 0; width: 6px; cursor: col-resize;
               user-select: none; z-index: 40; }
.col-resizer:hover { background: var(--accent); opacity: .5; }
/* 左侧导航窗格宽度拖拽手柄 */
.sidebar-resizer { position: absolute; top: 0; right: -2px; bottom: 0; width: 6px; cursor: col-resize;
                   user-select: none; z-index: 40; }
.sidebar-resizer:hover { background: var(--nav-accent); opacity: .6; }   /* 深色窗格边上用亮蓝才看得见 */
/* 拖拽过程中禁止选中文本，并全局保持列宽光标 */
body.col-resizing { cursor: col-resize !important; user-select: none; }

/* ==================== ⑦ 极简变体（min-ui，试点） ====================
 * 只做减法：去掉「框」这类装饰，语义色（状态、行底纹、热力色、图例色块）全部保留。
 * 用法：页面 {% block body_class %}min-ui{% endblock %}；推广就是给别的页加同一个标记。
 * 现在试点在：仪表盘、教学大纲列表。
 */

/* 面板：去外框与圆角，白底直接落在应用底色上，靠表头那条发丝线分层。
   框没了，层级就全靠排版与间距——所以区块标题的左竖条和 24px 的模块间距在这里
   比在标准版更要紧，不做复位。 */
.min-ui .panel { border: 0; border-radius: 0; }
.min-ui .panel-hd {
  background: none;
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
  color: var(--text);
}
.min-ui .panel-ft { background: none; }
.min-ui .panel-scroll { border-radius: 0; }

/* 筛选条：只留一行控件，去掉包围的盒子（左内缩保持 12px，仍在面板那条竖线上） */
.min-ui .filter-bar, .min-ui .toolbar { background: none; border: 0; }

/* 次要按钮去边框，只有主操作与危险操作保留填充 */
.min-ui .btn-plain { background: none; border-color: transparent; }
.min-ui .btn-plain:hover { background: var(--bg-hover); }
.min-ui .btn-plain:disabled { background: none; }

/* 徽标：去底色与边框，改「小圆点 + 文字」，颜色仍表状态。
   .tag-swatch 是图例色块（它本身就是「颜色键」），保留原样不做复位。 */
.min-ui .tag:not(.tag-swatch) {
  padding: 0;
  border: 0;
  background: none;
  font-weight: 500;
  color: var(--text-secondary);
}
.min-ui .tag:not(.tag-swatch)::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.min-ui .tag-ok:not(.tag-swatch) { color: var(--ok); }
.min-ui .tag-warn:not(.tag-swatch) { color: var(--warn); }
.min-ui .tag-err:not(.tag-swatch) { color: var(--err); }
.min-ui .tag-info:not(.tag-swatch) { color: var(--info); }
.min-ui .tag-neutral:not(.tag-swatch) { color: var(--text-secondary); }

/* 计数气泡：改成普通数字，颜色区分轻重 */
.min-ui .count { background: none; border: 0; min-width: 0; padding: 0; }
.min-ui .count-err { color: var(--err); }
.min-ui .count-warn { color: var(--warn); }

/* 指标条：去掉整条外框，只留格与格之间的竖线 */
.min-ui .stats { background: none; border: 0; }
.min-ui .stat { border-left: 1px solid var(--border); }
.min-ui .stat:first-child { border-left: 0; padding-left: 0; }

/* ==================== ⑧ 功能域配色（dom-*） ====================
 * 分工：域色只走「身份面」——导航项指示条、命令栏左侧色带、面板头竖条、分节标记。
 *       状态色只走「内容面」——行底纹、徽标、告警条、按钮、支撑度热力格。
 *       两套永不落在同一块表面上，否则读不出「这是方案模块」还是「这一行有问题」。
 *
 * 域的划分见 app/templating.py 的 DOMAINS（模板与样式共用一份定义）：
 *   syllabus 教学大纲 = 蓝    program 培养方案 = 紫
 *   people   课程与人员 = 青   system  系统管理 = 中性石板
 * 仪表盘 / 变更审批 / 个人资料跨域，body 上没有 dom-*，--dom-* 落回中性。
 */
body.dom-syllabus { --dom: var(--accent); --dom-weak: var(--accent-200); --dom-tint: var(--accent-50); }
body.dom-program  { --dom: var(--purple); --dom-weak: var(--purple-200); --dom-tint: var(--purple-bg); }
body.dom-people   { --dom: var(--teal);   --dom-weak: var(--teal-200);   --dom-tint: var(--teal-bg); }
body.dom-system   { --dom: var(--n-500);  --dom-weak: var(--n-300);      --dom-tint: var(--n-25); }

/* 命令栏：左侧 4px 域色带。整条不铺色——命令栏里有按钮，铺了色按钮的层次就没了。
   页面标题不加下划线（会读成链接），身份靠这条带 + 下面面板头的域色底。 */
body[class*="dom-"] .command-bar { box-shadow: inset 4px 0 0 var(--dom); }

/* 面板头：左竖条与底色都吃域色。中性版（跨域页）仍是 --n-300 + --bg-subtle（见第 ⑤ 段）。
   审批页那两类卡片自带分类色（课程目标蓝 / 支撑矩阵紫），选择器更具体，不受这里影响。 */
body[class*="dom-"] .panel-hd { box-shadow: inset 3px 0 0 var(--dom); background: var(--dom-tint); }

/* 第三层跟着一起走：分节标题的前置短横用域色，尾线用域色浅档 */
body[class*="dom-"] .section-hd::before { background: var(--dom); }
body[class*="dom-"] .section-hd::after { background: var(--dom-weak); }

/* 大纲编辑器没有面板，一级章节标题下那条线用域色浅档，四级层级的第一层就有了身份 */
body[class*="dom-"] .sec-1 { border-bottom-color: var(--dom-weak); }

/* 列表页表头下那条重线用域色浅档：长表滚动时表头不再和数据糊在一起 */
body[class*="dom-"] table.grid-list th { border-bottom-color: var(--dom-weak); }

/* 导航项：每项左侧 3px 域色条，复用 .nav-item.on::before 那一个元素（同位置只换颜色），
   免得选中时出现两条并排的竖条。未选中用暗一档（不抢戏），hover 提亮。 */
.nav-item.dom-syllabus { --nav-dom: var(--nav-dom-syllabus); --nav-dom-dim: var(--nav-dom-syllabus-dim); }
.nav-item.dom-program { --nav-dom: var(--nav-dom-program); --nav-dom-dim: var(--nav-dom-program-dim); }
.nav-item.dom-people { --nav-dom: var(--nav-dom-people); --nav-dom-dim: var(--nav-dom-people-dim); }
.nav-item.dom-system { --nav-dom: var(--nav-dom-system); --nav-dom-dim: var(--nav-dom-system-dim); }
.nav-item[class*="dom-"]::before {
  content: "";
  position: absolute;
  left: 2px; top: 7px; bottom: 7px;
  width: 3px;
  border-radius: 2px;
  background: var(--nav-dom-dim);
}
.nav-item[class*="dom-"]:hover::before { background: var(--nav-dom); }
/* 选中项仍用 --nav-accent：「当前在哪」比「属于哪个域」优先。
   这条要写在后面且更具体，否则上面的域色会盖掉选中指示条。 */
.nav-item.on[class*="dom-"]::before { background: var(--nav-accent); }