/* =========================================================
   原型_v3 / 自适应补丁
   复用 体育中考(1)/体育中考/assets/css/common.css 主样式。
   本文件只补「响应式 + v3 通用增强」——后续改主样式仍只动 :root。
   ========================================================= */

/* === 侧边栏菜单图标 ===
   图标容器样式（浅色药丸式的 .nav-ico）已上收 common.css，本文件不再重复定义。 */

/* === 自适应：窗口变窄时侧边栏收起、内容区全宽 === */
@media (max-width: 1180px) {
    :root {
        --sidebar-w: 64px;        /* 侧边栏收成图标条 */
        --sidebar-label: none;    /* 隐藏菜单文字 */
    }
    .nav-group-title { display: none; }              /* 分组标题一并收起 */
    .nav-item {
        justify-content: center;                     /* 只剩图标，居中排布 */
        margin-left: 8px; margin-right: 8px;
        padding-left: 0; padding-right: 0;
    }
    .nav-item .nav-text { display: var(--sidebar-label, inline); }
    .sidebar-footer { display: none; }
}
@media (max-width: 760px) {
    :root {
        --sidebar-w: 0px;         /* 极窄屏彻底隐藏 */
        --topbar-h: 52px;
    }
    .sidebar { display: none; }
    .main { margin-left: 0; padding: calc(var(--topbar-h) + 14px) 14px 20px; }
    .topbar { padding: 0 14px; }
    .topbar-logo-name { display: none; }
}

/* === 表格容器自动横向滚动 === */
.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.content-table { min-width: 100%; }

/* === v3 通用：信息条 / 描述文字 / 空状态强调 === */
.notice {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--info-bg);
    color: var(--info);
    border-radius: var(--radius-sm);
    font-size: 13px;
    margin-bottom: 16px;
}
.notice svg { flex-shrink: 0; }

.kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.kpi {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
}
.kpi-label { font-size: 12px; color: var(--text-lighter); margin-bottom: 4px; }
.kpi-value { font-size: 22px; font-weight: 600; color: var(--text); line-height: 1.2; }
.kpi-value .unit { font-size: 12px; font-weight: 400; color: var(--text-lighter); margin-left: 2px; }
.kpi-foot { font-size: 12px; color: var(--text-lighter); margin-top: 4px; }
.kpi.accent .kpi-value { color: var(--accent); }
.kpi.success .kpi-value { color: var(--success); }
.kpi.warning .kpi-value { color: var(--warning); }
.kpi.danger .kpi-value { color: var(--danger); }

/* === v3 通用：表头说明条 === */
.section-desc {
    font-size: 13px;
    color: var(--text-light);
    margin-bottom: 12px;
    line-height: 1.6;
}
.section-desc strong { color: var(--text); }

/* === v3 通用：轻提示（操作结果反馈，2.4s 自动消失） ===
   用法：showToast('已通过')  —— 见各页内联脚本 */
.toast-box {
    position: fixed;
    top: 20px; left: 50%;
    transform: translateX(-50%) translateY(-12px);
    z-index: 3000;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    pointer-events: none;
}
.toast {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 38px; padding: 0 16px;
    font-size: 13px; color: #fff;
    background: rgba(0, 0, 0, .78);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
    opacity: 0;
    transition: opacity .18s, transform .18s;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.success { background: var(--success); }
.toast.danger  { background: var(--danger); }

/* === 标记徽标：放在学生行最右 === */
.tag-row { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.tag {
    display: inline-flex; align-items: center;
    height: 20px; padding: 0 7px;
    font-size: 11px; border-radius: 3px;
    background: var(--border-light); color: var(--text-light);
    white-space: nowrap;
}
.tag.special     { background: var(--warning-bg); color: var(--warning); }
.tag.approved    { background: var(--success-bg); color: var(--success); }
.tag.rejected    { background: var(--danger-bg);  color: var(--danger);  }
.tag.pending     { background: var(--info-bg);    color: var(--info);    }

/* === 表内操作按钮间距 === */
.op-row { display: inline-flex; gap: 12px; }

/* === 描述列表（弹框/详情页常用） === */
.desc-list { display: grid; grid-template-columns: 110px 1fr; gap: 8px 16px; font-size: 14px; }
.desc-list dt { color: var(--text-lighter); }
.desc-list dd { color: var(--text); }

/* 两栏并排（label|value|label|value）——字段多时省一半纵向空间
   整行字段给 dd 加 .val-full（占第 2~末列，下一项自动换行） */
.desc-list.cols-2 { grid-template-columns: 84px minmax(0, 1fr) 84px minmax(0, 1fr); }
.desc-list.cols-2 .val-full { grid-column: 2 / -1; word-break: break-all; }
/* 编码类字段（学籍号 / 身份证号 / 学校代码）等宽，便于逐位核对 */
.desc-list dd.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
/* 通用等宽（表格里的学籍号 / 身份证号 / 学校代码） */
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }

/* === 弹框内信息分块：块标题 + 内容 ===
   用法：<div class="info-block"><div class="info-title">申请信息</div>…</div> */
.info-block + .info-block { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-light); }
.info-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}
.info-title::before {
    content: '';
    width: 3px;
    height: 13px;
    border-radius: 2px;
    background: var(--primary);
}
.info-title .info-note { font-weight: 400; font-size: 12px; color: var(--text-lighter); }

/* =========================================================
   层级下钻（市 → 区 → 校 → 班）
   面包屑 + 层级说明条，用于市 / 区 / 班主任 / 体育老师端
   ========================================================= */
.crumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
    font-size: 13px;
}
.crumb-label { color: var(--text-lighter); margin-right: 2px; }
.crumb-item { color: var(--text-lighter); }
.crumb-item.link { color: var(--primary); cursor: pointer; }
.crumb-item.link:hover { text-decoration: underline; }
.crumb-item.current { color: var(--text); font-weight: 600; }
.crumb-sep { color: #c8ccd4; }

/* 填报进度下钻视图：面包屑（全市 › X区，公共组件，体测 / 大课间两个列表页共用） */
.pg-crumb { display: flex; align-items: center; gap: 8px; }
.pg-crumb b { color: var(--text); }

/* 层级提示条：说明「当前看到的是哪一层、上下各是什么」 */
.layer-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 14px;
    margin-bottom: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--text-light);
}
.layer-bar b { color: var(--text); }
.layer-bar .layer-actions { margin-left: auto; display: flex; gap: 8px; }

/* 卡片头部内的「层级切换」下拉（过滤区右边） */
.layer-switch { min-width: 168px; }

/* =========================================================
   横向条形图（各区 / 各校对比，纯 CSS，无外部库）
   用法：<div class="bar-row"><span class="bar-name">南山区</span>
          <span class="bar-track"><i class="bar-fill" style="width:82%"></i></span>
          <span class="bar-val">82.0%</span></div>
   ========================================================= */
.bar-list { display: flex; flex-direction: column; gap: 12px; }
.bar-row {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) 58px;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}
.bar-name { color: var(--text-light); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track {
    height: 8px;
    background: var(--border-light);
    border-radius: 999px;
    overflow: hidden;
}
.bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--primary);
    transition: width .3s;
}
.bar-fill.warn { background: var(--warning); }
.bar-fill.done { background: var(--success); }
.bar-val {
    text-align: right;
    color: var(--text-light);
    font-variant-numeric: tabular-nums;
}

/* 双栏图表区（左图右表 / 上下两图） */
.chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 980px) { .chart-grid { grid-template-columns: 1fr; } }

/* =========================================================
   侧边栏：本期未开放菜单项（灰显 + 点击提示，不做死链）
   ========================================================= */
.nav-item.soon { opacity: .42; cursor: not-allowed; }
.nav-item.soon:hover { background: transparent; color: var(--nav-color, rgba(255,255,255,.75)); }

/* =========================================================
   顶部「切换查看端口」下拉（市 / 区 / 校 / 班主任 / 体育老师）
   ========================================================= */
.topbar-user { position: relative; cursor: pointer; }
.role-caret { display: inline-flex; margin-left: 6px; color: var(--text-lighter); vertical-align: middle; }
.topbar-user.open .role-caret { color: var(--primary); }

.role-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 60;
    width: 264px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 26px rgba(0, 0, 0, .14);
    display: none;
    cursor: default;
}
.topbar-user.open .role-menu { display: block; }
.role-menu-title {
    padding: 8px 10px 6px;
    font-size: 12px;
    color: var(--text-lighter);
}
.role-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    background: transparent;
    border-radius: var(--radius-sm);
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}
.role-opt:hover { background: var(--bg); }
.role-opt.active { background: rgba(51, 88, 192, .08); }
.role-opt-avatar {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 12px;
    line-height: 28px;
    text-align: center;
}
.role-opt.active .role-opt-avatar { background: var(--primary); }
.role-opt:not(.active) .role-opt-avatar { background: #c8ccd4; }
.role-opt-txt { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.role-opt-txt b { font-size: 13px; font-weight: 600; color: var(--text); }
.role-opt-txt i { font-size: 11px; font-style: normal; color: var(--text-lighter); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* =========================================================
   隶属类型徽标：市直属 / 区属
   用途：每个端口都要能看见本校（或本端口审核对象）的隶属类型，
         —— 决定大课间采集等业务的上级审核端口分流。
   由 assets/js/sidebar.js 统一注入到顶部身份区 / 端口切换菜单 / 侧边栏页脚。
   也可在页面内单独使用：<span class="aff-chip">市直属</span>
   ========================================================= */
.aff-chip {
    display: inline-flex;
    align-items: center;
    height: 17px;
    margin-left: 6px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    vertical-align: middle;
    color: var(--primary);
    background: rgba(51, 88, 192, .10);
    border-radius: 3px;
    white-space: nowrap;
}
.aff-chip.sm { height: 15px; margin-left: 5px; padding: 0 5px; font-size: 10px; font-weight: 400; }
/* 侧边栏页脚已改浅色底，徽标沿用默认浅色样式；此处仅微调尺寸避免换行 */
.sidebar-footer .aff-chip { height: 16px; padding: 0 5px; font-size: 10px; }

/* =========================================================
   通用：指标卡内的小进度条 / 迷你统计
   ========================================================= */
.mini-bar {
    height: 6px;
    background: var(--border-light);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 8px;
}
.mini-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--primary); }
.mini-bar > i.warn { background: var(--warning); }
.mini-bar > i.done { background: var(--success); }
.mini-bar > i.danger { background: var(--danger); }

/* 区块标题（比卡片标题低一级，用于表格上方分组） */
.block-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}
.block-title::before {
    content: '';
    width: 3px;
    height: 14px;
    border-radius: 2px;
    background: var(--primary);
}
.block-title .block-note { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--text-lighter); }

/* 行内进度（表格单元格里的小进度条 + 百分比） */
.cell-bar { display: flex; align-items: center; gap: 8px; min-width: 128px; }
.cell-bar .cb-track { flex: 1; height: 6px; background: var(--border-light); border-radius: 999px; overflow: hidden; }
.cell-bar .cb-fill { display: block; height: 100%; border-radius: 999px; background: var(--primary); }
.cell-bar .cb-fill.warn { background: var(--warning); }
.cell-bar .cb-fill.danger { background: var(--danger); }
.cell-bar .cb-fill.done { background: var(--success); }
.cell-bar .cb-val { flex: 0 0 auto; color: var(--text-light); font-variant-numeric: tabular-nums; }

/* 表格行的下钻链接按钮 */
.drill {
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--primary);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
}
.drill:hover { text-decoration: underline; }

/* =========================================================
   状态标签补充（锁定 / 进行中 / 已确认 / 待推送）
   ========================================================= */
.tag.done    { background: var(--success-bg); color: var(--success); }
.tag.locked  { background: var(--success-bg); color: var(--success); }
.tag.running { background: var(--warning-bg); color: var(--warning); }
.tag.empty-s { background: var(--border-light); color: var(--text-lighter); }
.tag.info    { background: var(--info-bg);    color: var(--info); }

/* === 行内搜索 === */
.inline-search {
    height: 32px;
    padding: 0 10px 0 32px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") no-repeat 10px center;
    outline: none;
    min-width: 200px;
    transition: border-color .15s;
}
.inline-search:focus { border-color: var(--primary); }

/* === 列表筛选条（搜索 + 下拉过滤，置于表格上方） === */
.filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.filter-bar .inline-search { min-width: 240px; }
.filter-count {
    margin-left: auto;
    font-size: 13px;
    color: var(--text-lighter);
}

/* === 空状态微调（继承 common） === */
.empty { padding: 36px 16px; }

/* === 批量操作条：勾选后出现 === */
.batch-bar {
    display: none;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
    padding: 10px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-light);
}
.batch-bar b { color: var(--text); }

/* === 详情页通用头部（v0.13 多个详情页共用） === */
.arc-detail-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.arc-detail-header .back-btn { display: inline-flex; align-items: center; gap: 6px; color: var(--text-light); cursor: pointer; font-size: 14px; }
.arc-detail-header .back-btn:hover { color: var(--primary); }
.arc-detail-header h1 { margin: 0; font-size: 20px; font-weight: 600; }
.cell-sub { color: var(--text-lighter); font-size: 12px; margin-left: 4px; }
/* 详情页顶部操作条（校管自服务：导出模板/上传盖章件/提交上级） */
.export-block { display: flex; gap: 12px; align-items: center; }
/* 班级维度条（v0.13 collect 页按班级拆分） */
.class-strip { display: flex; flex-wrap: wrap; gap: 10px; }
.class-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; background: #fff; font-size: 13px; cursor: pointer; }
.class-chip:hover { border-color: var(--primary); }
.class-chip.active { border-color: var(--primary); background: var(--primary-light); }
.class-chip.disabled { opacity: .55; cursor: not-allowed; }
.class-chip .cc-name { font-weight: 600; }
.class-chip .cc-code { color: var(--text-lighter); font-size: 12px; font-family: monospace; }

/* === 表格：整表居中（表头 + 单元格 + 操作列一并居中） ===
   用法：<table class="content-table center"> */
.content-table.center th,
.content-table.center td { text-align: center; }
/* 数值列 / 操作列在 common.css 里被单独右对齐，这里显式压回居中，
   避免依赖样式表加载顺序 */
.content-table.center th.num,
.content-table.center td.num,
.content-table.center .col-actions { text-align: center; }
/* 数据列不折行，整表排开由 .table-wrap 承担横向滚动 */
.content-table.center th,
.content-table.center td { white-space: nowrap; }
/* 长文本列（如家庭住址）允许折行 */
.content-table.center td.wrap { white-space: normal; min-width: 200px; }

/* === 首列固定（横向滚动时最左列不动，右侧列表横向滚动） ===
   用法：<table class="content-table center sticky-first">，首列即固定列
   如需前两列一起固定（如「序号 + 姓名」），再加一个 sticky-two：
        <table class="content-table center sticky-first sticky-two">
   注意：① 固定列必须有不透明底色，否则滚动内容会从下方穿过
        ② 第二列的 left 必须与首列宽度一致（本页首列固定 56px） */
.content-table.sticky-first th:first-child,
.content-table.sticky-first td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--bg-card);
    box-shadow: 1px 0 0 var(--border-light);
}
.content-table.sticky-first th:first-child {
    z-index: 3;                                   /* 表头需压住表体固定列 */
    background: #f8f8f8;
    box-shadow: 1px 0 0 var(--border);
}
.content-table.sticky-first tbody tr:hover td:first-child { background: #fafbfc; }

/* 前两列同时固定：第二列贴在首列右侧；边界投影只留在固定组最右一列，
   否则两列之间会出现一条多余的竖线 */
.content-table.sticky-first.sticky-two th:nth-child(2),
.content-table.sticky-first.sticky-two td:nth-child(2) {
    position: sticky;
    left: 56px;                                   /* = 首列宽度 */
    z-index: 2;
    background: var(--bg-card);
    box-shadow: 1px 0 0 var(--border);
}
.content-table.sticky-first.sticky-two th:nth-child(2) {
    z-index: 3;
    background: #f8f8f8;
}
.content-table.sticky-first.sticky-two tbody tr:hover td:nth-child(2) { background: #fafbfc; }
.content-table.sticky-first.sticky-two th:first-child,
.content-table.sticky-first.sticky-two td:first-child { box-shadow: none; }

/* 前三列同时固定（勾选 + 序号 + 姓名）：列宽按 44 / 56 / 110 排布
   用法：<table class="content-table center sticky-first sticky-two sticky-three">
   边界投影只留在固定组最右一列（第 3 列），中间列必须清掉高光，否则出现竖线 */
.content-table.sticky-first.sticky-two.sticky-three th:nth-child(1),
.content-table.sticky-first.sticky-two.sticky-three td:nth-child(1) { left: 0; }
.content-table.sticky-first.sticky-two.sticky-three th:nth-child(2),
.content-table.sticky-first.sticky-two.sticky-three td:nth-child(2) {
    left: 44px;                                   /* = 首列（勾选）宽度 */
    box-shadow: none;
}
.content-table.sticky-first.sticky-two.sticky-three th:nth-child(3),
.content-table.sticky-first.sticky-two.sticky-three td:nth-child(3) {
    left: 100px;                                  /* = 勾选 44 + 序号 56 */
    background: var(--bg-card);
    box-shadow: 1px 0 0 var(--border);
}
.content-table.sticky-first.sticky-two.sticky-three tbody tr:hover td:nth-child(3) { background: #fafbfc; }
.content-table.sticky-first.sticky-two.sticky-three th:nth-child(3) { background: #f8f8f8; }

/* === 末列固定（横向滚动时最右列不动，如「操作」） ===
   用法：<table class="content-table center sticky-last">
   与 sticky-first 可叠加：首列固定 + 末列固定，中间列横向滚动。 */
.content-table.sticky-last th:last-child,
.content-table.sticky-last td:last-child {
    position: sticky;
    right: 0;
    z-index: 2;
    background: var(--bg-card);
    box-shadow: -1px 0 0 var(--border-light);
}
.content-table.sticky-last th:last-child {
    z-index: 3;                                   /* 表头需压住表体固定列 */
    background: #f8f8f8;
    box-shadow: -1px 0 0 var(--border);
}
.content-table.sticky-last tbody tr:hover td:last-child { background: #fafbfc; }

/* === 导入步骤条（批量导入：下载模板 → 上传 → 校验） ===
   用法：<ol class="steps" id="xx"><li class="active"><i>1</i>下载模板</li>…</ol>
   JS 只需在步骤上切 .active / .done */
.steps {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}
.steps li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-lighter);
}
.steps li i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--border-light);
    color: var(--text-lighter);
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
}
.steps li.active { color: var(--primary); font-weight: 600; }
.steps li.active i { background: var(--primary); color: #fff; }
.steps li.done { color: var(--success); }
.steps li.done i { background: var(--success); color: #fff; }
.steps li + li::before {
    content: '';
    width: 20px;
    height: 1px;
    background: var(--border);
}

/* === 表单两列栅格（弹窗 / 抽屉内编辑用） === */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
}
.form-grid .form-group { margin-bottom: 0; }
.form-grid .span-2 { grid-column: 1 / -1; }
.form-grid .form-input,
.form-grid .form-select,
.form-grid .form-textarea { width: 100%; }

/* === 卡片内状态页签（复用 common.css 的 .tab-nav / .tab-btn） ===
   用法：<div class="tab-nav card-tabs"><button class="tab-btn active" data-status="...">
   计数胶囊 .tab-count 随激活态自动反色 */
.tab-nav.card-tabs { padding: 4px 16px 0; }
.tab-nav.card-tabs .tab-btn:first-child { padding-left: 0; }
.tab-count {
    display: inline-block;
    min-width: 18px;
    margin-left: 6px;
    padding: 0 5px;
    font-size: 12px;
    line-height: 18px;
    font-weight: 500;
    text-align: center;
    color: var(--text-light);
    background: var(--bg);
    border-radius: 9px;
    transition: color .15s, background .15s;
}
.tab-btn.active .tab-count { color: #fff; background: var(--primary); }

/* === 上传区「已选择文件」状态（复用 common.css 的 .upload-zone） ===
   用法：上传成功后 JS 加 .done，虚线框转绿、图标转主色 */
.upload-zone.done {
    border-style: solid;
    border-color: var(--success);
    background: var(--success-bg);
}
.upload-zone.done .uz-icon,
.upload-zone.done .uz-title { color: var(--success); }

/* =========================================================
   工作台通用组件（学校工作台 / 班主任工作台共用）
   原先只写在 index.html 的内联 <style> 里，抽到这里供多页复用
   ========================================================= */
.welcome {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: #fff;
    border-radius: var(--radius);
    padding: 22px 24px;
    margin-bottom: 16px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
}
.welcome-title { font-size: 20px; font-weight: 600; }
.welcome-sub   { font-size: 13px; opacity: .85; margin-top: 4px; }
.welcome-meta  { font-size: 12px; opacity: .7; }

.two-col { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 980px) { .two-col { grid-template-columns: 1fr; } }

.quick-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
}
.quick-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    display: flex; flex-direction: column; gap: 6px;
    cursor: pointer; transition: border-color .15s, transform .1s;
}
.quick-card:hover { border-color: var(--primary); transform: translateY(-1px); }
.quick-card .qc-name { font-size: 15px; font-weight: 600; color: var(--text); }
.quick-card .qc-tip  { font-size: 12px; color: var(--text-lighter); }

/* 工作台卡片间距（多张卡片竖排时） */
.card + .card { margin-top: 16px; }
.card + .two-col,
.two-col + .card { margin-top: 16px; }
.kpi-row + .card { margin-bottom: 0; }

/* 通知公告条：日期 + 标签 + 标题 + 来源 */
.notice-item { display: flex; align-items: flex-start; gap: 10px; }
.notice-item .ni-date { flex: 0 0 auto; font-size: 12px; color: var(--text-lighter); font-variant-numeric: tabular-nums; }
.notice-item .ni-body { flex: 1; min-width: 0; }
.notice-item .ni-title { font-size: 13px; color: var(--text); line-height: 1.5; }
.notice-item .ni-from { font-size: 12px; color: var(--text-lighter); margin-top: 2px; }

/* 权限说明条（只读端口用） */
.role-note {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; margin-bottom: 16px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    background: var(--warning-bg); color: var(--warning);
}

/* =========================================================
   多步骤办理页：步骤卡（大课间数据采集等「多环节闭环」业务）
   用法：
   <div class="step-card active">
     <div class="sc-head">
       <span class="sc-no">1</span>
       <span class="sc-title">班主任确认班级名单</span>
       <span class="sc-state">进行中</span>
     </div>
     <div class="sc-body">…</div>
   </div>
   状态：active（当前环节，主色描边）/ done（已办结，绿色）/ locked（未开始，置灰）
   ========================================================= */
.step-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    margin-bottom: 12px;
}
.step-card:last-child { margin-bottom: 0; }
.step-card .sc-head {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-light);
}
.step-card .sc-no {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; flex-shrink: 0;
    border-radius: 50%;
    background: var(--border-light); color: var(--text-lighter);
    font-size: 12px; font-weight: 600;
}
.step-card .sc-title { font-size: 14px; font-weight: 600; color: var(--text); }
.step-card .sc-state { margin-left: auto; font-size: 12px; color: var(--text-lighter); flex-shrink: 0; }
.step-card .sc-body { padding: 16px; }

.step-card.active { border-color: var(--primary); }
.step-card.active .sc-no { background: var(--primary); color: #fff; }
.step-card.active .sc-state { color: var(--primary); font-weight: 600; }

.step-card.done .sc-no { background: var(--success); color: #fff; }
.step-card.done .sc-state { color: var(--success); }

.step-card.locked { background: var(--bg); }
.step-card.locked .sc-title { color: var(--text-lighter); }

/* 步骤卡内的操作条（按钮右对齐） */
.step-actions {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-top: 14px;
}
.step-actions .sa-note { font-size: 12px; color: var(--text-lighter); margin-right: auto; }

/* =========================================================
   多步骤办理页：横向步骤导航（1→N）+ 单内容区
  用途：bk-collect（6 步）/ pt-collect（7 步）/ pe-class（3 步）的「办理步骤」——
       步骤横向排成一行，点某一步，下方只展示该步骤的信息与表格（不再纵向堆卡片）。
       三页同款组件，所有端口（市 / 区 / 校 / 班主任 / 体育老师）呈现一致。
   用法：
   <div class="step-nav" id="stepNav">
     <button class="sn-item active cur">
       <i class="sn-no">1</i>
       <span class="sn-txt"><b>市下发任务</b><em>已完成</em></span>
     </button> …
   </div>
   <div class="step-pane" id="stepPane"> … 当前步骤内容 … </div>
   状态：done / active / locked（同 .step-card）；.cur = 正在查看的那一步
   ========================================================= */
.step-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.sn-item {
    flex: 1 1 140px;
    min-width: 0;
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    font-family: inherit;
    text-align: left;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.sn-item:hover { border-color: var(--primary); }
.sn-item .sn-no {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; flex-shrink: 0;
    border-radius: 50%;
    background: var(--border-light); color: var(--text-lighter);
    font-size: 12px; font-style: normal; font-weight: 600;
}
.sn-item .sn-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sn-item .sn-txt b {
    font-size: 13px; font-weight: 600; color: var(--text-light);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sn-item .sn-txt em {
    font-size: 11px; font-style: normal; color: var(--text-lighter);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sn-item.done { background: var(--bg-card); }
.sn-item.done .sn-no { background: var(--success); color: #fff; }
.sn-item.done .sn-txt em { color: var(--success); }
.sn-item.active { background: var(--bg-card); border-color: var(--primary); }
.sn-item.active .sn-no { background: var(--primary); color: #fff; }
.sn-item.active .sn-txt b { color: var(--primary); }
.sn-item.active .sn-txt em { color: var(--primary); }
.sn-item.locked .sn-txt b { color: var(--text-lighter); }
/* 正在查看的那一步：底部主色压条（与「办理状态」区分开） */
.sn-item.cur { box-shadow: inset 0 -2px 0 var(--primary); }

.step-pane .sp-head {
    display: flex; align-items: center; gap: 10px;
    padding-bottom: 12px; margin-bottom: 14px;
    border-bottom: 1px solid var(--border-light);
}
.step-pane .sp-no {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; flex-shrink: 0;
    border-radius: 50%;
    background: var(--border-light); color: var(--text-lighter);
    font-size: 12px; font-weight: 600;
}
.step-pane .sp-title { font-size: 15px; font-weight: 600; color: var(--text); }
.step-pane .sp-state { margin-left: auto; font-size: 12px; color: var(--text-lighter); }
.step-pane .sp-state.ok { color: var(--success); }
.step-pane .sp-state.now { color: var(--primary); font-weight: 600; }
/* 内容区标题行右侧的操作按钮（如「批量导入」）：不参与压缩，紧贴状态文字左侧 */
.step-pane .sp-act { flex-shrink: 0; }
.step-pane.done .sp-no { background: var(--success); color: #fff; }
.step-pane.active .sp-no { background: var(--primary); color: #fff; }
.step-pane.locked .sp-title { color: var(--text-lighter); }

/* 表格内联录入框（考勤次数 / 备注），比 .form-input 紧凑 */
.att-input {
    width: 76px; height: 30px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.att-input:focus { outline: none; border-color: var(--primary); }
.att-input.wide { width: 160px; text-align: left; }
.att-input:disabled { background: var(--bg); color: var(--text-lighter); }

/* 留痕时间轴（任务办理记录） */
.trace-list { display: flex; flex-direction: column; gap: 10px; }
.trace-item { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; }
.trace-item .ti-time {
    flex: 0 0 auto; width: 132px;
    color: var(--text-lighter); font-variant-numeric: tabular-nums;
}
.trace-item .ti-dot {
    flex: 0 0 auto; width: 8px; height: 8px; margin-top: 6px;
    border-radius: 50%; background: var(--primary);
}
.trace-item .ti-dot.done { background: var(--success); }
.trace-item .ti-dot.wait { background: var(--border); }
.trace-item .ti-text { color: var(--text); }
.trace-item .ti-who { color: var(--text-lighter); }

/* =========================================================
   下发任务页（pt-issue.html / bk-issue.html）
   由原「下发弹窗」抽出为独立页面组件，两页共用
   ========================================================= */
/* 涉及年级：多选横向排布 */
.opt-row { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.opt-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); cursor: pointer; }
.opt-item input { margin: 0; flex-shrink: 0; }

/* 表单模板 / 任务附件上传区（页面内不需要弹窗那种紧凑化） */
.issue-up .upload-zone { padding: 16px 14px; gap: 5px; }
.issue-up .upload-zone .uz-title { font-size: 13px; }
.issue-up .file-list { margin-top: 8px; }

/* 表单底部操作条（右对齐） */
.form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }

/* 树状选择器：左行政区 / 右学校 */
.tree-picker { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg-card); }
.tree-head {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 8px 12px; background: #fafbfc; border-bottom: 1px solid var(--border-light);
}
.tree-title { font-size: 13px; font-weight: 600; color: var(--text); }
.tree-head .tree-search { width: 200px; padding: 5px 10px; font-size: 13px; }
.tree-count { font-size: 13px; color: var(--text-light); }
.tree-count b { color: var(--primary); }
.tree-ops { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.tree-body { display: flex; }
.tree-side {
    width: 200px; flex-shrink: 0; max-height: 320px; overflow-y: auto;
    border-right: 1px solid var(--border-light); background: #fcfcfd;
}
.tree-dist {
    display: flex; align-items: center; gap: 6px; padding: 8px 12px;
    font-size: 13px; color: var(--text); cursor: pointer;
    border-left: 3px solid transparent;
}
.tree-dist:hover { background: #f5f7fa; }
.tree-dist.cur { background: rgba(51, 88, 192, .07); border-left-color: var(--primary); color: var(--primary); font-weight: 600; }
.tree-dist input { margin: 0; flex-shrink: 0; }
.tree-dist .td-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-dist .td-num { font-size: 11px; color: var(--text-lighter); flex-shrink: 0; }
.tree-dist.cur .td-num { color: var(--primary); }
.tree-main { flex: 1; min-width: 0; }
.tree-main-head {
    display: flex; align-items: center; gap: 12px; padding: 7px 12px;
    border-bottom: 1px dashed var(--border-light);
}
.tree-schools {
    max-height: 272px; overflow-y: auto; padding: 10px 12px;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 14px;
}
.scope-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); cursor: pointer; }
.scope-item input { margin: 0; flex-shrink: 0; }
.scope-item .si-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scope-item .si-name:hover { color: var(--primary); }
.scope-item .si-aff { font-size: 11px; color: var(--text-lighter); flex-shrink: 0; }
.scope-item .si-dist {
    font-size: 11px; line-height: 16px; padding: 0 4px; border-radius: 3px;
    color: var(--primary); background: rgba(51, 88, 192, .08); flex-shrink: 0;
}
.scope-empty { grid-column: 1 / -1; font-size: 13px; line-height: 1.7; color: var(--text-lighter); }