/* v6.css —— V6 组件增量样式（仅使用既有令牌 var()，零硬编码色值；AC-41） */

/* 登录页隐藏侧栏与顶栏（V5 以内联 display 控制改为类控制，行为等价；
   2026-11-09 整改：顶栏含「登出」按钮，登录态下无业务意义，与侧栏一并隐藏） */
.sidebar.is-hidden { display: none; }
.topbar.is-hidden { display: none; }

/* Vue3 渲染产生的行内多节点容器（页面根渲染返回片段数组，宿主为块级容器） */
#view > .page-host { display: block; }

/* 渲染函数片段中 null 子节点占位清除 */
.template-comment { display: none; }

/* 2026-11-09 整改：登录验证码——移除独立刷新按钮（点击图片刷新）、验证码输入框加大
   （app.css .form-row 为两列 grid，验证码行被压在第二列仅约 194px，是旧版输入框仅约 112px 的根因；
   此处令验证码行跨满两列，输入框占满刷新按钮移除后的剩余空间，约 112px→204px；
   375 断点单列布局与 flex-wrap 兜底见 app.css:299/v5.css；图片高 48px 满足触控 ≥44px） */
/* 2026-11-09 整改 v2：验证码图片居左、输入框居右（LoginPage DOM 对调）+ 登录卡内表单单列化对齐——
   .login-card 作用域限内覆盖（app.css .form-row 两列 grid 为全站规则不可动）：
   label 统一在上、输入控件统一在下满宽 → 三输入框右缘全对齐、label/图片左缘与内容左缘对齐；
   .captcha-row 跨列规则在单列 grid 下即全宽（保留，语义不变）。 */
.login-card { max-width: 420px; }
.login-card .form-row { grid-template-columns: 1fr; }
.captcha-row { grid-column: 1 / -1; }
.captcha-row .inp { flex: 1 1 auto; min-width: 0; }
.captcha-img { flex: none; cursor: pointer; line-height: 0; border-radius: 4px; }
.captcha-img:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* 2026-11-09 整改：列表表格观感对齐 demo .table（差异 D3）
   仅覆写样式值，类名保持 .tbl 以保留 v5.css 768 断点「转卡片」响应式规则；
   色值全部取既有令牌（AC-41），动效仅 --duration-fast（视觉 7 条三档口径） */
.tbl { border-collapse: collapse; }
.tbl th {
  text-align: left; font-size: var(--font-size-xs); font-weight: 500;
  color: var(--el-text-color-secondary); background: none;
  padding: var(--space-3); border-bottom: 1px solid var(--el-border-color-light); white-space: nowrap;
}
.tbl td { padding: var(--space-3); border-bottom: 1px solid var(--el-border-color-light); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tbody tr { transition: background var(--duration-fast) var(--ease-out); }
.tbl tbody tr:hover { background: var(--el-fill-color-light); }
/* 操作列多链接保持横排（对齐 demo .table td .btn-link { white-space: nowrap } 的不折行口径） */
.tbl td .row-actions { flex-wrap: nowrap; }

/* 2026-11-09 整改：375 顶栏拥挤时铃铛被 flex 收缩至 34px（触控 <44 违规）——
   V6 顶栏保留 user-badge/登出（RBAC 功能项，demo 无对应元素）导致空间不足；
   铃铛禁收缩保持 44px 触控，user-badge 文字 375 隐藏（avatar 圆徽已承载用户标识） */
.icon-btn { flex: none; }
@media (max-width: 375px) { .user-badge { display: none; } }

/* 2026-11-09 /fix「网站页面要有分页」：列表分页控件（ui/Pager.mjs）
   —— 色值全部取既有令牌（AC-41）；动效仅 --duration-fast（视觉 7 条三档口径）；
   按钮 min 44px 触控基线（同 .btn 口径）；flex-wrap 保证 375 零横滚 */
.pager {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  padding: var(--space-3) 0 0; font-size: var(--font-size-sm); color: var(--el-text-color-regular);
}
.pager-total { color: var(--el-text-color-secondary); white-space: nowrap; }
.pager-size { display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap; }
/* 2026-11-09 /fix：右侧 padding 为 select 自绘箭头让位（下方统一 select 规则 background-position
   right 12px → 箭头占右侧 12~22px 区域；0,2,0 特异性高于该规则，须在此显式留出，否则文本压箭头） */
.pager-size .pager-select { min-height: 44px; width: auto; padding: 0 26px 0 var(--space-2); }
.pager-btn {
  min-height: 44px; min-width: 44px; padding: 0 var(--space-3);
  border: 1px solid var(--el-border-color-light); border-radius: var(--radius-md);
  background: var(--color-bg-card); color: var(--el-text-color-regular);
  cursor: pointer; white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.pager-btn:hover:not(:disabled) { background: var(--el-fill-color-light); border-color: var(--el-color-primary-light-5); color: var(--color-primary); }
.pager-btn:disabled { color: var(--el-text-color-secondary); background: var(--el-fill-color-light); cursor: not-allowed; opacity: 0.7; }
.pager-num { min-width: 44px; padding: 0 var(--space-2); font-variant-numeric: tabular-nums; }
.pager-num.is-cur { background: var(--color-primary); border-color: var(--color-primary); color: var(--el-bg-color); font-weight: 500; }
.pager-num.is-cur:hover:not(:disabled) { background: var(--color-primary); color: var(--el-bg-color); }
.pager-ellipsis { min-width: 24px; text-align: center; color: var(--el-text-color-secondary); }

/* 2026-11-09 /fix「产业链图谱库列表展示上下游关联关系」：行内长文本截断
   —— line-clamp 2 行防行高暴涨；全文悬浮 title + 详情页完整承载；
   色值取既有令牌（AC-41）；零动效新增（视觉 7 条）；min-width:0 保 768 转卡片不溢出（375 零横滚） */
.rel-cell {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; min-width: 0; color: var(--el-text-color-regular);
}

/* 2026-11-09 整改：列表工具栏按钮水平对齐（根因防御）——
   .btn-row 自带 margin:8px 0（v5.css，本为独立按钮行留白设计），置于 .filters
   （align-items:flex-end）内时按 margin box 对齐致整组抬升 8px，与查询按钮/筛选框错位。
   graph/pool 两页动作按钮已归位页头 .row-actions（demo 范式）；此规则兜底任何
   现存/未来置于 .filters 内的 .btn-row 不再被垂直 margin 抬升。仅布局值，无色值动效。 */
.filters .btn-row { margin: 0; }

/* 2026-11-09 整改（续）：窄屏（≤768，含 375）.filters 纵排下恢复 app.css 断点内的 align-items:stretch——
   v5.css 全局 .filters { align-items:flex-end }（同特异性、加载序在后）覆盖了断点声明，
   致纵排时查询按钮按尾对齐缩在右下（375 实测 left=287/w=60）而非随控件全宽拉伸。
   桌面横排（>768）仍保持 v5 flex-end 底对齐语义不变。 */
@media (max-width: 768px) {
  .filters { align-items: stretch; }
}

/* 2026-11-09 整改（续）：页头动作区换行后保持靠右——
   .page-head 为 space-between 两栏，但副标题超长（如图谱库统计口径文案）时标题块占满整行，
   .row-actions 被 flex-wrap 挤到次行并按行首靠左、悬在副标题左下方。
   margin-left:auto 在同行时与 space-between 等效（无观感变化），换行时吸收剩余空间推至右缘。 */
.page-head .row-actions { margin-left: auto; }

/* 2026-11-09 /fix「下拉框箭头太靠右」：原生 select 外观统一——
   根因：页面 select 挂 .input 类（app.css 设计系统 .inp/.select 不命中），实际样式由
   v5.css select.input{padding:8px} 承载（特异性 0,1,1、加载序在后）；appearance:auto 下
   UA 把箭头绘制在右边框内缘固定位置，padding-right 不参与箭头定位 → 箭头贴边（实测约 2px）。
   方案：appearance:none 去原生箭头 + 自绘 10×6 chevron（background-position 精确控位，
   箭头右缘距边框 12px 与左 padding 8px 平衡；padding-right:32px 使文本不压箭头）。
   选择器三命名并写（.input 现状命中 / .inp、.select 防御类名归一回退）；Pager 的
   input pager-select 同-prefix 自动命中，全站箭头一致（其 padding 覆盖见 .pager-size 规则处）。
   本规则即终局层：特异性 0,1,1 同 v5.css select.input，v6.css 最后加载胜出
   （落 app.css 会被 v5 覆盖回 8px）。
   AC-41 例外说明：SVG data URI 内无法引用 CSS 变量，URI 内 stroke=%23626a76（解码后即
   --el-text-color-secondary 令牌值）系令牌值的字面展开而非新色值（check:web 色值扫描剥
   data URI 段；disabled 态不另设浅色以不再引入第二色值）；data URI 内嵌零外部资源
   （离线 ✓）；无新增动效、触控 44px 不变（视觉 7 条不违反）。 */
select.input, select.inp, select.select {
  appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23626a76' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

/* 2026-11-09 /fix「登录页标题与下方内容多留空间」：
   v5.css .login-card h2 { margin:0 0 4px } 标题「钦州招商引资系统」下仅 4px
   （副标题删除后更显局促），提升至 var(--space-5)=24px（与登录卡 padding 同值令牌，
   标题区/表单区形成统一留白节奏，AC-41）；特异性 0,1,1 与 v5.css 同级，
   v6.css 最后加载胜出。仅布局值，无色值/动效新增（视觉 7 条不违反）。 */
.login-card h2 { margin-bottom: var(--space-5); }

/* 2026-11-10 /fix「登录页测试账号标注用户组」（整改报告_2026-11-10_登录页测试账号标注用户组.md）：
   底部提示由单行账号码改结构化清单——每个测试账号附 sys_role 用户组名
   （用户指令「写清楚 r10/r4/r6/r1/r3/r2 代表的那个用户组」），账号↔组名与
   db/migrate-v1.sql sys_role 种子逐字一致（check:web 第 12 节对账断言锁定）。
   纯展示零交互（不触 44px 触控口径）；色值全取令牌（AC-41）；无新增动效（视觉 7 条）。 */
.login-accounts-list { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: var(--space-1); }
.login-account-item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-xs); color: var(--el-text-color-secondary); }
.login-account-item code { min-width: 36px; padding: 1px var(--space-1); background: var(--color-neutral-bg); border-radius: var(--radius-sm); font-family: inherit; font-size: var(--font-size-xs); text-align: center; color: var(--color-neutral); }

/* 2026-11-09 /fix「重新设计工作台页面」（整改报告_2026-11-09_工作台页面重设计.md）：
   ① KPI 去外包白卡直接平铺（.metrics 既有栅格），有权限整卡可点（a.wb-kpi）hover 抬升；
   ② label 锁两行高（line-clamp+双行 min-height）四卡等齐（整改前 1280 断点 2×2 行高 130/114 不一）；
   ③ 消息条目改 .item-row 结构：类型 tag+标题省略+时间右对齐、正文两行截断（复用 .rel-cell 同款 line-clamp 手法）；
   ④ 快捷入口纵列信息卡（图标+名称+一句描述+箭头），行 min-height 64px 触控充裕；
   色值全部取既有令牌（AC-41）；动效仅 --duration-fast（视觉 7 条三档口径）；
   截断/收缩类全部 min-width:0 或 flex 收缩路径，375 零横滚。 */
.wb-kpis { margin-bottom: var(--space-4); }
/* KPI 平铺后四张 .card 成相邻兄弟，app.css .card + .card 的纵叠 margin（16px）在 grid 内
   参与 item 布局致 2/3/4 卡下坠 16px、行高 178/162 不齐（grid 间距已由 .metrics gap 提供），
   grid 容器内归零（1280/1440 headless-shell 实测四卡等高） */
.wb-kpis .card { margin-top: 0; }
/* 栅格子项收缩路径：grid 轨道 1fr/2fr 的 auto 最小尺寸（minmax(auto,Nfr)）会被子项
   min-content 撑破（1280 断点单列下实测左列 min-content=1283px，scrollW 溢出至 1539），
   子项 min-width:0 后轨道可正常收缩（headless-shell 实测恢复 1280 零横滚）；
   深层截断由 wb-ellipsis/wb-clamp/entry-desc 各自 overflow 路径承担。 */
.grid-2 > * { min-width: 0; }
a.wb-kpi {
  display: block; color: inherit;
  transition: box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
a.wb-kpi:hover { box-shadow: var(--shadow-pop); transform: translateY(-2px); }
.wb-kpi .metric-label {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  min-height: calc(var(--font-size-sm) * 3.2);   /* 行高 1.6 × 两行，与 body 行高口径一致 */
}
.wb-kpi-go { margin-top: var(--space-2); font-size: var(--font-size-xs); color: var(--color-primary); }
a.wb-kpi:hover .wb-kpi-go { color: var(--color-primary-active); }

.wb-notice-head { display: flex; align-items: center; gap: var(--space-2); }
.wb-notice-head .wb-ellipsis { min-width: 0; }
/* 标题省略收缩时 tag 不得被 flex 压缩竖排折行（「智能体任务」实测折成两行），
   参照 app.css R2-1 `.table td .tag { white-space: nowrap }` 同一口径 */
.wb-notice-head .tag { flex: none; white-space: nowrap; }
.wb-notice-head .wb-time { margin-left: auto; flex: none; font-size: var(--font-size-xs); color: var(--el-text-color-secondary); }
.wb-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-clamp {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; min-width: 0; margin-top: var(--space-1);
  font-size: var(--font-size-sm); color: var(--el-text-color-regular);
}
.wb-more {
  margin-top: var(--space-3); padding-top: var(--space-3);
  border-top: 1px solid var(--el-border-color-light);
}

.wb-entries { display: flex; flex-direction: column; }
.wb-entry {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 64px; padding: var(--space-2); border-radius: var(--radius-md);
  color: inherit;
  transition: background var(--duration-fast) var(--ease-out);
}
.wb-entry:hover { background: var(--el-fill-color-light); }
.wb-entry-ico {
  flex: none; width: 40px; height: 40px; border-radius: var(--radius-md);
  background: var(--color-primary-bg); color: var(--color-primary-active);
  display: flex; align-items: center; justify-content: center; font-size: var(--font-size-md);
}
.wb-entry-body { min-width: 0; }
.wb-entry-name { font-weight: 500; color: var(--el-text-color-primary); }
.wb-entry-desc {
  font-size: var(--font-size-sm); color: var(--el-text-color-secondary); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wb-entry-arrow {
  margin-left: auto; flex: none; color: var(--el-text-color-secondary);
  transition: color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.wb-entry:hover .wb-entry-arrow { color: var(--color-primary); transform: translateX(2px); }

/* ---------- 智能体任务详情 · 阶段时间线（2026-11-09 /fix，参考 opcteam9 阶段历史时间线形态） ---------- */
.ag-tl { display: flex; flex-direction: column; }
.ag-tl-item { display: flex; gap: var(--space-3); position: relative; padding-bottom: var(--space-4); }
.ag-tl-item:last-child { padding-bottom: 0; }
.ag-tl-rail { flex: none; display: flex; flex-direction: column; align-items: center; width: 14px; }
.ag-tl-rail::after { content: ''; flex: 1; width: 2px; margin-top: 2px; background: var(--el-border-color-light); }
.ag-tl-item:last-child .ag-tl-rail::after { display: none; }
.ag-tl-dot {
  flex: none; width: 10px; height: 10px; border-radius: var(--radius-full);
  background: var(--color-neutral); margin-top: 4px;
}
.ag-tl-dot--primary { background: var(--color-primary); }
.ag-tl-dot--success { background: var(--color-success); }
.ag-tl-dot--danger { background: var(--color-danger); }
.ag-tl-dot--warning { background: var(--color-warning); }
.ag-tl-dot--live {
  background: var(--color-primary);
  animation: ag-tl-pulse var(--duration-base) var(--ease-out) infinite alternate;
}
@keyframes ag-tl-pulse {
  from { box-shadow: 0 0 0 0 var(--color-primary-bg); }
  to { box-shadow: 0 0 0 4px var(--color-primary-bg); }
}
.ag-tl-body { min-width: 0; flex: 1; }
.ag-tl-head { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.ag-tl-time, .ag-tl-gap { font-size: var(--font-size-xs); color: var(--el-text-color-secondary); }
.ag-tl-detail {
  margin-top: var(--space-1); font-size: var(--font-size-sm);
  color: var(--el-text-color-regular); word-break: break-all;
}