/* pages.css —— 各页面专属样式 */

/* ================= 聚焦工作区 ================= */
.page-heading { flex: 1 1 auto; min-width: 0; }
.page-subtitle { margin-top: var(--space-1); font-size: var(--font-size-sm); color: var(--color-text-muted); }
.workspace-tabs { display: flex; flex-wrap: wrap; gap: var(--space-1); border-bottom: 1px solid var(--color-border); }
.workspace-tab { border: 0; border-bottom: 3px solid transparent; background: transparent; padding: var(--space-3) var(--space-4); min-height: var(--tap-target); font-weight: var(--font-weight-medium); color: var(--color-text-muted); cursor: pointer; }
.workspace-tab:hover { color: var(--color-text); background: var(--color-surface-2); }
.workspace-tab[aria-selected="true"] { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.workspace-panel { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.help-trigger { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; min-width: 28px; margin-left: var(--space-2); padding: var(--space-1) var(--space-2); border: 1px solid var(--color-border-strong); border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); cursor: pointer; vertical-align: middle; }
.help-trigger:hover { color: var(--color-primary); border-color: var(--color-primary); background: var(--color-primary-soft); }
.help-content { line-height: var(--line-height-relaxed); white-space: pre-line; overflow-wrap: anywhere; }
.help-label-line { display: flex; align-items: center; gap: var(--space-2); flex: 1 1 auto; min-width: 0; }
.help-label-line .help-trigger { margin-left: 0; flex-shrink: 0; }
.help-label-line .card__title { flex: 0 1 auto; }
.help-label-line .form-section__title { border-bottom: 0; padding-bottom: 0; }
.form-section > .help-label-line { padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border); }
.action-dock { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-primary-soft); border: 1px solid var(--color-border); }
.action-dock .toolbar__grow { flex: 0 1 auto; }
.toolbar + .action-dock { margin-top: var(--space-3); }
.fusion-grid .fusion-picks__head { justify-content: flex-start; }
.plan-preview { font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; }
.advanced-options { border-top: 1px solid var(--color-border); padding-top: var(--space-4); }
.advanced-options > summary { cursor: pointer; font-weight: var(--font-weight-semibold); min-height: var(--tap-target); }
.advanced-options[open] > summary { margin-bottom: var(--space-3); }
#notify-form { max-width: 880px; }
#notify-form .action-dock { position: sticky; bottom: var(--space-3); z-index: 2; box-shadow: var(--shadow-md); }
#run-profiles { max-height: 160px; overflow-y: auto; }
#run-profiles .check, #run-periods .check { padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); overflow-wrap: anywhere; }
#run-profiles .check:has(:checked), #run-periods .check:has(:checked) { border-color: var(--color-primary); background: var(--color-primary-soft); }
#stat-grid { gap: var(--space-3); }
#stat-grid .stat-card:nth-child(n + 5) { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); padding-block: var(--space-3); background: transparent; box-shadow: none; }
#stat-grid .stat-card:nth-child(n + 5) .stat-card__value { font-size: var(--font-size-md); }
#stat-grid .stat-card:nth-child(n + 5) .stat-card__hint { flex-basis: 100%; }
.app-user .btn--ghost { color: var(--color-sidebar-text); }
.app-user .btn--ghost:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.app-sidebar .nav-link { font-size: var(--font-size-sm); }

@media (max-width: 768px) {
  .workspace-tab { flex: 1 1 auto; padding-inline: var(--space-2); font-size: var(--font-size-sm); }
  .help-trigger { min-height: var(--tap-target); min-width: var(--tap-target); }
  .action-dock { padding: var(--space-3); }
  #stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #stat-grid .stat-card { padding: var(--space-3); }
  #stat-grid .stat-card__value { font-size: var(--font-size-xl); }
}

/* ================= 登录页 ================= */
.login-page {
  min-height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: linear-gradient(160deg, #0f172a 0%, #1e3a8a 55%, #2563eb 100%);
}

.login-shell {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.login-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: #fff;
}

.login-brand__logo {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
}

.login-brand__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

.login-brand__sub {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.72);
}

.login-card {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.login-foot {
  font-size: var(--font-size-xs);
  color: var(--color-text-faint);
  text-align: center;
}

/* ================= 监控面板 ================= */
.dashboard-chart {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.chart-legend__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.chart-legend__swatch {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-sm);
  flex: 0 0 auto;
}

.chart-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ================= 任务页 ================= */
.task-name {
  font-weight: var(--font-weight-medium);
}

.task-ranks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.task-schedule {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--font-size-sm);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
}

.form-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-2);
}

.form-section__title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.form-section__hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.run-progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.run-progress__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.run-progress__stats {
  font-variant-numeric: tabular-nums;
}

/* ================= 文件页 ================= */
.file-name {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  /* 限宽，避免不换行的长文件名+路径把"操作"等列挤扁（桌面端行高会被拖到 130px+） */
  max-width: 32ch;
}

.file-name__path {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 32ch;
}

@media (max-width: 768px) {
  /* 卡片布局下每行独占宽度，不需要限宽 */
  .file-name,
  .file-name__path {
    max-width: none;
  }
}

.preview-items {
  max-height: 420px;
  overflow: auto;
}

.preview-items--text {
  padding: var(--space-2) 0;
}

/* ================= 文件行的内嵌预览面板 ================= */
/*
 * 展开/收起过渡：用 grid-template-rows 的 0fr -> 1fr 做高度动画。
 * 相比 max-height 写死一个上限值，它不需要猜内容高度，内容异步加载后也能自然衔接。
 * （旧版浏览器不支持时只是退化为瞬间展开，不影响功能。）
 */
.preview-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 280ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease;
}

.preview-panel.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
}

/* grid 行高动画要求中间层 overflow:hidden 且 min-height:0 */
.preview-panel__inner {
  overflow: hidden;
  min-height: 0;
}

/* 内容区：左侧强调条 + 浅底，和普通文件行拉开层级 */
.preview-panel__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
}

.preview-panel__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  align-items: center;
  justify-content: space-between;
}

.preview-panel__title {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
  min-width: 0;
}

.preview-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.preview-panel__summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
}

/* 预览面板里的"显示长文本列"开关：比表单里的 .check 更紧凑 */
.preview-panel__toggle {
  align-self: flex-start;
  gap: var(--space-2);
  min-height: 0;
  padding: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* 预览表的行号列 */
.data-table td.cell-index,
.data-table th.cell-index {
  width: 3.5ch;
  color: var(--color-text-faint);
  font-variant-numeric: tabular-nums;
}

/* 内容加载完成后淡入，避免从骨架屏"啪"地变成表格 */
@keyframes preview-fade-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.preview-panel__body.is-loaded {
  animation: preview-fade-in 220ms ease both;
}

/* 预览面板里的表头不再吸顶（面板自身高度有限，吸顶反而挡内容） */
.preview-items .data-table th {
  position: static;
}

.preview-items .data-table {
  background: var(--color-surface);
}

/* 内嵌预览行：整行占满，自身不参与斑马纹与悬停高亮 */
.data-table tr.preview-row,
.data-table tr.preview-row:hover {
  background: var(--color-surface);
}

.data-table tr.preview-row > td.preview-cell {
  padding: var(--space-2) 0 var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

@media (max-width: 768px) {
  /* 移动端表格已变成卡片，预览行要退回到普通块级容器，且不显示字段标签 */
  .data-table tr.preview-row {
    padding: 0;
    border-style: dashed;
    box-shadow: none;
  }

  .data-table tr.preview-row > td.preview-cell {
    display: block;
    padding: var(--space-3);
    border-bottom: 0;
  }

  .data-table tr.preview-row > td.preview-cell::before {
    content: none;
  }

  .preview-items {
    max-height: 60vh;
  }

  /* 预览表在移动端同样转卡片，但要去掉外层早已有的一层阴影与间距，避免层层嵌套发重 */
  .preview-items .data-table tr {
    box-shadow: none;
    margin-bottom: var(--space-2);
  }

  .preview-items .data-table td {
    padding: var(--space-1) 0;
  }

  .preview-panel__content {
    padding: var(--space-3);
  }
}

/* 尊重系统的"减少动态效果"设置 */
@media (prefers-reduced-motion: reduce) {
  .preview-panel {
    transition: none;
  }

  .preview-panel__body.is-loaded {
    animation: none;
  }

  .data-table tbody tr {
    transition: none;
  }
}

/* ================= 设置页 ================= */
.settings-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.test-result {
  min-width: 0;
  font-size: var(--font-size-sm);
  overflow-wrap: anywhere;
}

.risk-note {
  display: none;
}

.risk-note.is-visible {
  display: flex;
}

.key-row {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  min-width: 0;
}

.key-row .input {
  flex: 1 1 auto;
  min-width: 0;
}

.key-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.alerts-empty {
  padding: var(--space-6);
  text-align: center;
  color: var(--color-text-muted);
}

/* ================= 融合页 ================= */
.fusion-grid {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(220px, 340px);
  gap: var(--space-4);
  align-items: start;
}

#fusion-start > .card:first-child > .card__body { display: flex; flex-direction: column; gap: var(--space-4); }

/* 时间点选择区：浅底 + 边框，与普通表单字段拉开层级 */
.fusion-picks {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
}

.fusion-picks__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

/*
 * 时间点数量会随抓取次数增长（每个抓取运行一个），必须限高。
 * 不限高的话，几十个时间点会把"立即融合"卡片撑到上千像素，
 * 下面的方案/任务表要滚动很久才能看到。
 */
.fusion-picks .check-grid {
  max-height: 240px;
  overflow: auto;
  padding-right: var(--space-1);
}

/* 结果预览弹窗 */
.result-preview {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.result-preview__report {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-2);
}

.result-preview__report > summary {
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  padding: var(--space-1) 0;
}

/* 校验报告：两列键值对表格，窄屏退化成单列 */
.kv-list {
  display: grid;
  grid-template-columns: minmax(150px, max-content) 1fr;
  gap: var(--space-1) var(--space-3);
  align-items: baseline;
  font-size: var(--font-size-sm);
}

.kv-list__key {
  color: var(--color-text-muted);
}

.kv-list__value {
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .fusion-grid {
    grid-template-columns: 1fr;
  }

  .kv-list {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .kv-list__value {
    padding-bottom: var(--space-2);
  }

  .fusion-picks .check-grid {
    max-height: 200px;
  }
}