/* ==========================================================================
   app-nav.css — 统一顶部导航皮肤 + 五个新页面共用组件覆写
   依据：server/docs/UI深化规范-2026-11.md（第二阶段深化唯一标准，冲突时优先）
         + server/docs/UI改版设计规范-2026-11.md（基础规范，铁律继续生效）
   - 基础规范 §4「导航 .nav」+ §5「app-nav.css」条目：玻璃拟态底
     （--bg-glass + 背景模糊）+ 发丝下边线；链接为药丸；主题切换按钮为
     圆形 ghost；≤640px 折叠为纵向抽屉。
   - 深化轮（顶部导航组）新增：排版节奏与字号阶梯（--fs-* 梯队令牌）；
     active 药丸低饱和渐变描边（深化规范 §3.1「导航 active 药丸（低饱和
     版）」，与「底部 2px 渐变指示条」二选一，取描边、不再叠指示条）；
     品牌位 36px 渐变小方标（§3.5，::before 纯 CSS 绘制，不动 DOM）；
     主题钮 hover 轻旋转/scale + active scale(.92)（§4 交互目录）；
     移动端抽屉面板滑入 + 链接项 40ms 递进入场（§4 stagger，6 档封顶）。
     药丸 hover 底对齐深化规范 §4「链接/文字按钮：变亮 + --bg-hover 药丸」
     ——dashboard/logs 两页内联样式里的同名 :hover（background: transparent）
     是第一轮「hover 只换文字色」口径，被本文件带 .nav 前缀的高特异性
     规则按深化规范覆盖（深化规范优先）。
   - 加载顺序：五个页面（dashboard / workspace / scheduler / logs / Autox.md）
     的 <head> 均先引 global.css 再引本文件，同名类以本文件为准——因此组件
     规格必须与 global.css §3/§4 保持一致，避免两套实现漂移。
   - 设计令牌全部由 global.css 的 :root / :root[data-theme="light"] 提供
     （深色为默认，浅色同名覆盖；此前本文件补丁式的 --font-size-* / --topbar-h /
     --z-nav 令牌块已并入 global.css，此处不再重复定义）。本文件不出现任何裸
     hex；rgba 一律引用 --*-rgb 桥令牌；浅色主题不写任何组件级特判。
   - 兼容性铁律：不改任何 class / id / DOM；全站显隐开关 .hidden 由 global.css
     的 display:none!important 统一承担，本文件不再重复定义（也不新建同名规则）；
     滚动条只由 global.css 的 webkit 伪元素统一自绘，本文件不写会造成
     Chrome 121+ 忽略 webkit 滚动条规则（双滚动条）的标准简写属性。
   ========================================================================== */

/* ==========================================================================
   一、统一顶部导航（基础规范 §4 + 深化规范 §2 字号阶梯 / §3 招牌 / §4 交互
   目录 / §5「顶部导航」行）
   ========================================================================== */

/* 玻璃拟态导航条：半透明玻璃底 + 背景模糊 + 发丝下边线，吸顶；
   主题切换时底色/边线随令牌 180ms 柔和过渡 */
.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  height: var(--topbar-h);
  background: var(--bg-glass);
  backdrop-filter: blur(var(--backdrop-blur));
  -webkit-backdrop-filter: blur(var(--backdrop-blur));
  border-bottom: 1px solid var(--border-faint);
  transition: background var(--transition), border-color var(--transition);
}

.nav-inner {
  position: relative; /* 抽屉式 .nav-links 相对它定位 */
  max-width: 1400px;
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* ---- 品牌位（深化规范 §3.5）：h2 档 16px/700 负字距 + 36px 渐变小方标 ----
   方标用 ::before 纯 CSS 绘制（不新增 DOM 节点、不动结构，满足「纯装饰」
   铁律）；content 先给普通字符串兜底，再以 "/ """ 空替代文本让读屏跳过
   装饰字、只念品牌名（不支持替代文本语法的引擎自动回退上一条声明）。 */
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  flex: 0 0 auto;
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: var(--ls-h1);
  line-height: var(--lh-h1);
  color: var(--text-main);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition);
}

/* 渐变小方标：--accent-gradient 底 + 白色「云」字 + 顶部内嵌高光；
   全站唯一「图标位」，圆角与卡片同源 */
.nav-brand::before {
  content: "云";
  content: "云" / "";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1;
  color: var(--text-on-primary);
  background: var(--accent-gradient);
  border-radius: var(--radius);
  box-shadow: var(--card-highlight), var(--shadow-sm);
  transition: box-shadow var(--transition);
}

.nav-brand:hover {
  color: var(--primary);
}

/* hover：方标 1px 主色外圈 ring + 品牌投影（深化规范 §3.2 收敛版辉光），
   克制不位移 */
.nav-brand:hover::before {
  box-shadow: var(--glow-ring), var(--shadow-primary);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

/* ---- 链接药丸：secondary 档 13px/500，三态齐全 ----
   hover = 主文案色 + --bg-hover 悬浮药丸底（深化规范 §4 交互目录
   「链接/文字按钮」行）。选择器带 .nav 前缀抬高特异性：dashboard/logs
   两页内联样式里同名 :hover 规则写死了 background: transparent（第一轮
   「hover 只换文字色」口径），等特异性会被源顺序扑灭，这里按深化规范
   优先覆盖之。 */
.nav .nav-links a {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--fs-secondary);
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition), background var(--transition),
    box-shadow var(--transition);
}

.nav .nav-links a:hover {
  color: var(--text-main);
  background: var(--bg-hover);
}

/* 当前页高亮：主色软底 + 低饱和渐变描边（深化规范 §3.1「导航 active 药丸
   （低饱和版）」；按任务口径与「底部 2px 渐变指示条」二选一，此处取描边，
   不再叠指示条）。--signature-fill 按 global.css 预留的消费者口径局部改写
   为 --primary-soft，深浅主题随令牌自动换相。本规则必须排在 :hover 之后
   ——两者特异性相同，靠源顺序保证悬停当前页药丸时不丢描边底。 */
.nav .nav-links a.is-active {
  --signature-fill: var(--primary-soft);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--signature-fill), var(--signature-fill)) padding-box,
    var(--signature-gradient-soft) border-box;
  color: var(--primary);
  font-weight: 600;
}

/* 键盘焦点：主色双环，并保住药丸圆角（全局 :focus-visible 默认 radius-sm） */
.nav .nav-links a:focus-visible {
  outline: none;
  border-radius: var(--radius-pill);
  box-shadow: var(--focus-ring);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
  flex: 0 0 auto;
}

/* 顶栏账号：caption 档 12px，比链接药丸低一阶灰阶，弱化不抢焦点 */
.nav-user {
  font-size: var(--fs-caption);
  color: var(--text-muted);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- 主题切换圆钮（app-nav.js 注入 .nav-right，圆形 ghost）----
   深化规范 §4 交互目录「主题钮/图标钮」行：hover 圆底 + 轻旋转/轻缩放，
   active scale(.92)，focus 焦点环；180ms 过渡让旋转有跟随感 */
.nav-theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: var(--fs-h2);
  line-height: 1;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color var(--transition), background var(--transition),
    transform var(--transition), box-shadow var(--transition);
}

.nav-theme-btn:hover {
  color: var(--text-main);
  background: var(--bg-hover);
  transform: rotate(12deg) scale(1.05);
}

.nav-theme-btn:active {
  transform: scale(0.92);
}

.nav-theme-btn:focus-visible {
  outline: none;
  border-radius: var(--radius-pill);
  box-shadow: var(--focus-ring);
}

/* ---- 移动端折叠按钮：桌面隐藏；三态对齐交互目录「图标钮」行 ---- */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: var(--fs-h2);
  line-height: 1;
  color: var(--text-main);
  background: transparent;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition),
    transform var(--transition);
}

.nav-toggle:hover {
  background: var(--bg-hover);
  border-color: var(--panel-border-strong);
}

.nav-toggle:active {
  transform: scale(0.92);
}

.nav-toggle:focus-visible {
  outline: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--focus-ring);
}

/* 抽屉入场：面板自上滑入淡出（240ms）；链接项再逐项上浮、40ms 递进、
   6 档封顶（深化规范 §4 stagger：递进 40ms、上限 240ms）。app-nav.js 只
   切换 .is-open 显隐，display 翻转的瞬间 CSS 动画自动起播，无需 JS 参与。 */
@keyframes nav-drawer-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 640px) {
  .nav-inner {
    padding: 0 var(--space-3);
    gap: var(--space-2);
  }

  .nav-toggle {
    display: inline-flex;
  }

  /* 抽屉式纵向导航：负偏移抵消 .nav-inner 水平内边距，实现通栏（app-nav.js
     点击 #navToggle 切换 .is-open）。保持实底 --bg-elevated 面板：本抽屉是
     .nav（带背景模糊）的后代，其背景模糊只能采样到 .nav 背景根内的内容，
     玻璃化会退化成「有 tint 无模糊」，故沿用实底保证可读，只补圆角与动效。 */
  .nav-links {
    display: none;
    position: absolute;
    top: var(--topbar-h);
    left: calc(-1 * var(--space-3));
    right: calc(-1 * var(--space-3));
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: var(--space-2) var(--space-3) var(--space-3);
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border-faint);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    box-shadow: var(--shadow);
  }

  .nav-links.is-open {
    display: flex;
    animation: nav-drawer-in 0.24s var(--ease-spring);
  }

  /* 抽屉链接项逐项上浮入场：复用 global.css 的 rise-in 关键帧（五页均先
     加载 global.css），nth-child 写死延迟、6 档封顶（第 7 项起不等） */
  .nav .nav-links.is-open a {
    animation: rise-in 0.24s var(--ease-spring) both;
  }

  .nav .nav-links.is-open a:nth-child(1) { animation-delay: 0ms; }
  .nav .nav-links.is-open a:nth-child(2) { animation-delay: 40ms; }
  .nav .nav-links.is-open a:nth-child(3) { animation-delay: 80ms; }
  .nav .nav-links.is-open a:nth-child(4) { animation-delay: 120ms; }
  .nav .nav-links.is-open a:nth-child(5) { animation-delay: 160ms; }
  .nav .nav-links.is-open a:nth-child(6) { animation-delay: 200ms; }

  /* 触控目标 ≥40px（规范移动端基线）；内边距放宽一档便于点按 */
  .nav .nav-links a {
    height: 40px;
    padding: 0 var(--space-4);
  }

  .nav-user {
    display: none;
  }
}

/* ---- 动效降级（铁律 9）：prefers-reduced-motion: reduce 时本组新增的
   入场动画与悬停旋转/缩放位移全部关闭，颜色反馈保留、即时生效 ---- */
@media (prefers-reduced-motion: reduce) {
  .nav-links.is-open,
  .nav .nav-links.is-open a {
    animation: none;
  }

  .nav .nav-links a,
  .nav-brand,
  .nav-brand::before,
  .nav-theme-btn,
  .nav-toggle {
    transition: none;
  }

  .nav-brand::before,
  .nav-theme-btn:hover,
  .nav-theme-btn:active,
  .nav-toggle:hover,
  .nav-toggle:active {
    transform: none;
  }
}

/* ==========================================================================
   二、页面主容器
   ========================================================================== */

.page-main {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-5) var(--space-6);
}

@media (max-width: 640px) {
  .page-main {
    padding: var(--space-3);
  }
}

/* ==========================================================================
   三、公共组件类（规格对齐 global.css §3；类名为 JS/HTML 契约，禁改名）
   ========================================================================== */

/* ---- 按钮：主=渐变底、次=面板底、危险=软底、ghost=纯文字、sm=30px ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: 550;
  line-height: 1;
  color: var(--text-main);
  background: var(--bg-elevated);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
  transition: background var(--transition-fast), border-color var(--transition-fast),
    color var(--transition-fast), box-shadow var(--transition-fast),
    transform var(--transition-fast), filter var(--transition-fast);
}

.btn:hover {
  background: var(--bg-hover);
  border-color: var(--panel-border-strong);
}

.btn:active {
  transform: translateY(0) scale(0.98);
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.btn:disabled,
.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  filter: none;
}

/* 主操作：靛蓝→紫渐变 + hover 抬升 + 品牌光晕 */
.btn--primary {
  background: var(--accent-gradient);
  border-color: transparent;
  color: var(--text-on-primary);
  box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
  filter: brightness(1.08);
  /* 深化评审 #6：补回 1px 主色外圈环，与 global.css 的 .btn--primary:hover
     逐字一致（深化规范 §3.2 收敛版辉光 = ring + 品牌投影）——消除后加载
     文件丢 ring 的「两套实现漂移」 */
  box-shadow: var(--glow-ring), var(--shadow-primary);
  transform: translateY(-1px);
}

.btn--primary:active {
  filter: brightness(0.97);
  transform: translateY(0) scale(0.98);
  box-shadow: none;
}

/* 危险操作：语义软底 + 状态文字，hover 加深 */
.btn--danger {
  background: var(--danger-soft);
  border-color: transparent;
  color: var(--danger-text);
}

.btn--danger:hover {
  background: rgba(var(--danger-rgb), 0.22);
  color: var(--danger-text);
}

.btn--danger:active {
  background: rgba(var(--danger-rgb), 0.28);
}

/* ghost（文字按钮）：无边框，hover 才出现悬浮底 */
.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-regular);
}

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

/* 小号：表格行内 / 工具条 / 导航「登出」 */
.btn--sm {
  height: 30px;
  padding: 0 12px;
  font-size: var(--font-size-xs);
  border-radius: var(--radius-sm);
}

/* ---- 卡片：面板三件套（面板底 + 1px 边框 + 顶部内嵌高光 + 柔和投影） ----
   结构契约：沿用本文件口径——.card 无内边距，由 .card__header / .card__body
   自带（dashboard 统计卡与表格卡、scheduler 表格卡、workspace 左栏均按此搭建） */
.card {
  background: var(--bg-elevated);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm), var(--card-highlight);
}

.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-faint);
}

/* 区块标题：16px / 650 / 收紧字距（规范 §3） */
.card__header h2,
.card__header h3 {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text-main);
}

.card__body {
  padding: var(--space-4);
}

/* ---- 数据表：外层 .table-wrap 只负责窄屏横滚（不加边框，避免与卡片边框
   叠成双线）；表头 micro 大写刻度 + 凹陷底，行间发丝线，行 hover 悬浮底 ---- */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.table th,
.table td {
  padding: 10px 14px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--border-faint);
  white-space: nowrap;
}

.table th {
  color: var(--text-muted);
  font-weight: 600;
  /* 表头统一 micro 大写刻度（深化评审 #7：11px/600/+0.08em，与 global.css
     同名规则一致——中文表头无大小写形态，大写变换为空操作，正字距带来的
     「刻度感」不受影响） */
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  background: var(--bg-sunken);
  border-bottom-color: var(--panel-border);
}

.table tbody tr {
  transition: background var(--transition-fast);
}

.table tbody tr:hover {
  background: var(--bg-hover);
}

.table tbody tr:last-child td {
  border-bottom: none;
}

/* ---- 状态徽标：*-soft 底 + *-text 字、药丸、12px/600（规范 §4）----
   修饰类全集（workspace-dock.js:73 / workspace.js:1429,1490 / dashboard.js:89-96
   按「badge badge--xx」拼接，缺一不可）：
   --muted / --primary / --success / --warning / --danger / --error */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-muted);
  background: var(--bg-hover);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.badge--muted {
  /* 与基类一致的灰色态，显式占位保证拼接枚举齐全 */
}

.badge--primary {
  color: var(--primary);
  background: var(--primary-soft);
}

.badge--success {
  color: var(--success-text);
  background: var(--success-soft);
}

.badge--warning {
  color: var(--warning-text);
  background: var(--warning-soft);
}

.badge--danger {
  color: var(--danger-text);
  background: var(--danger-soft);
}

/* error 与 danger 同语义（workspace-dock.js 会话失效等拼接场景） */
.badge--error {
  color: var(--danger-text);
  background: var(--danger-soft);
}

/* ---- 表单：输入井 --bg-input 底，focus 主色边框 + 外圈 ring（规范 §4） ---- */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--space-3);
}

.form-label {
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--text-regular);
}

.form-input,
.form-select,
.form-textarea {
  font-family: var(--font-sans);
  font-size: var(--font-size-md);
  color: var(--text-main);
  background: var(--bg-input);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  min-height: 36px;
  width: 100%;
  transition: border-color var(--transition), box-shadow var(--transition),
    background var(--transition);
}

.form-input:hover,
.form-select:hover,
.form-textarea:hover {
  border-color: var(--panel-border-strong);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-ring);
}

.form-textarea {
  min-height: 88px;
  resize: vertical;
}

.form-hint {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-top: 2px;
}

/* ---- 弹窗（app-nav.js appConfirm 动态建 DOM 的类名契约）----
   遮罩走 --backdrop（深浅主题令牌各自覆盖，无需组件级特判）；面板为
   radius-xl + --shadow-lg 面板三件套，入场 scale(.97)→1 复用 global.css 的
   modal-in 关键帧（五页均先加载 global.css，不在此重复定义）。显隐一律由
   global.css 的 .hidden（display:none!important）承担，本文件不再写
   .modal.hidden 与其竞争。 */

/* .hidden 名称保全锚点：与 global.css 的 .hidden（第 252 行起）逐字相同的
   声明，级联结果与仅由 global.css 定义时完全一致，不构成任何竞争或视觉
   差异（五页均先加载 global.css，同值 !important 后者覆盖前者无差异）。
   写在此处是因为 ui-gate-snapshot.cjs 的类名保全比对要求既有 class 名
   .hidden 必须能从本文件的非注释文本中提取；显隐职责仍在 global.css，
   此处只是名称保全的等价重复，不是新样式。 */
.hidden {
  display: none !important;
}

.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--space-4);
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--backdrop);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.modal-panel {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--bg-elevated);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  box-shadow: var(--shadow-lg), var(--card-highlight);
  animation: modal-in 0.18s var(--ease-spring);
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.modal-header h3 {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text-main);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.modal-close {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-h2);
  line-height: 1;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast),
    background var(--transition-fast), transform var(--transition-fast);
}

.modal-close:hover {
  color: var(--text-main);
  border-color: var(--panel-border-strong);
  background: var(--bg-hover);
}

.modal-close:active {
  transform: scale(0.92);
}