/* 页面外壳 */
.page-shell {
  min-height: 100vh;
  background: var(--bg-base-default);
}
body { padding: 0; overflow-x: hidden; }

/* 顶部导航栏 */
.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 var(--spacer-24);
  background: var(--bg-base-secondary);
  border-bottom: 1px solid var(--border-neutral-l1);
}
.navbar__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--spacer-8);
  font-family: var(--heading-sm-font-family);
  font-size: var(--heading-sm-font-size);
  line-height: var(--heading-sm-line-height);
  font-weight: var(--heading-sm-font-weight);
  color: var(--text-default);
}
.navbar__brand-icon { width: 36px; height: 36px; object-fit: contain; }
.navbar__nav {
  display: inline-flex;
  align-items: center;
  gap: var(--spacer-4);
}
.navbar__link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacer-6);
  height: 32px;
  padding: 0 var(--spacer-12);
  border-radius: var(--radius-8);
  font-size: var(--body-base-font-size);
  line-height: var(--body-base-line-height);
  color: var(--text-secondary);
  text-decoration: none;
  transition: background .12s ease, color .12s ease;
}
.navbar__link:hover {
  background: var(--bg-overlay-l2);
  color: var(--text-default);
}
.navbar__link.is-active {
  background: var(--bg-overlay-l1);
  color: var(--text-default);
  font-weight: var(--font-weight-medium);
}
.navbar__divider {
  width: 1px;
  height: 20px;
  background: var(--border-neutral-l1);
  margin: 0 var(--spacer-8);
}
.navbar__user {
  display: inline-flex;
  align-items: center;
  gap: var(--spacer-8);
  font-size: var(--body-sm-font-size);
  color: var(--text-secondary);
}

/* 主内容区（贴边，不留白边） */
.main-content {
  padding: 0;
}

/* 页面标题区 */
.page-header {
  margin-bottom: var(--spacer-24);
}
.page-title {
  font-family: var(--heading-md-font-family);
  font-size: var(--heading-md-font-size);
  line-height: var(--heading-md-line-height);
  font-weight: var(--heading-md-font-weight);
  color: var(--text-default);
  margin-bottom: var(--spacer-4);
}
.page-subtitle {
  font-size: var(--body-base-font-size);
  line-height: var(--body-base-line-height);
  color: var(--text-secondary);
}

/* 筛选面板 */
.filter-panel {
  background: var(--bg-base-secondary);
  border: 1px solid var(--border-neutral-l1);
  border-radius: var(--radius-12);
  padding: var(--spacer-16) var(--spacer-20);
  margin-bottom: var(--spacer-16);
}
.filter-grid {
  display: grid;
  /* 单行 7 项：关键字 / 状态 / 合同类型 / 立场 / 强度 / 提交日期 / 操作，中间四个下拉等宽窄列 */
  grid-template-columns: 1.8fr 0.8fr 0.8fr 0.8fr 0.8fr 2fr 1.4fr;
  gap: var(--spacer-16);
  align-items: end;
}
.filter-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacer-6);
  min-width: 0;
}
.filter-label {
  font-size: var(--body-sm-font-size);
  line-height: var(--body-sm-line-height);
  color: var(--text-secondary);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}
.filter-label--spacer { visibility: hidden; }
.filter-search {
  display: flex;
  gap: var(--spacer-8);
}
.filter-search .ds-input { flex: 1; min-width: 0; }
.filter-search .ds-btn { flex-shrink: 0; }
.filter-range {
  display: flex;
  align-items: center;
  gap: var(--spacer-6);
}
.filter-range .ds-input { flex: 1; min-width: 0; width: 100%; }
.filter-range__sep {
  color: var(--text-tertiary);
  font-size: var(--body-sm-font-size);
  flex-shrink: 0;
}
.filter-actions {
  display: flex;
  gap: var(--spacer-8);
  align-items: center;
}
.filter-actions .ds-btn { flex: 1; justify-content: center; }
/* 操作按钮与其余控件同高 */
.filter-actions .ds-btn--sm,
.filter-search .ds-btn--sm { height: 32px; }

/* 主色按钮上的图标用白色 */
.btn-icon--white { filter: brightness(0) invert(1); }

/* 统一筛选控件高度与对齐 */
.filter-item .ds-select-wrap { width: 100%; display: block; }
.filter-item .ds-select { width: 100%; height: 32px; }
.filter-item .ds-input {
  height: 32px;
  padding: 0 var(--spacer-10);
  font-size: var(--body-base-font-size);
  box-sizing: border-box;
}
.filter-item input[type="date"] { line-height: 30px; }

/* 表格区 */
.table-section {
  margin-bottom: var(--spacer-16);
}

/* 评分 */
.score-value {
  font-family: var(--font-family-metric);
  font-size: var(--body-base-font-size);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}
.score-high   { color: var(--status-success-default); }
.score-medium { color: var(--status-warning-default); }
.score-low    { color: var(--status-error-default); }

/* 操作按钮区 */
.action-btns {
  display: inline-flex;
  gap: var(--spacer-6);
  white-space: nowrap;
}

/* 分页区 */
.pagination-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacer-16);
  padding: var(--spacer-12) var(--spacer-16);
  background: var(--bg-base-secondary);
  border: 1px solid var(--border-neutral-l1);
  border-radius: var(--radius-12);
}
.pagination__range {
  color: var(--text-tertiary);
  font-family: var(--body-sm-font-family);
  font-size: var(--body-sm-font-size);
  line-height: var(--body-sm-line-height);
  font-weight: var(--body-sm-font-weight);
  letter-spacing: var(--body-sm-letter-spacing);
  white-space: nowrap;
}
.pagination-left {
  display: inline-flex;
  align-items: center;
  gap: var(--spacer-16);
}
.pagination__size { min-width: 104px; }
.pagination-right {
  display: inline-flex;
  align-items: center;
  gap: var(--spacer-16);
  flex-wrap: wrap;
}
.pagination-jump {
  display: inline-flex;
  align-items: center;
  gap: var(--spacer-6);
  font-size: var(--body-sm-font-size);
  color: var(--text-secondary);
  white-space: nowrap;
}
.pagination-jump .ds-input {
  width: 56px;
  height: 30px;
  padding: 0 var(--spacer-8);
  text-align: center;
}
/* 首页/末页双箭头用旋转复用左右箭头图标 */
#firstBtn img { transform: none; }
#firstBtn { position: relative; }
#lastBtn img { transform: none; }
/* 省略号 */
.pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  color: var(--text-tertiary);
  font-size: var(--body-sm-font-size);
  user-select: none;
}

/* 空状态 */
.empty-state-wrap {
  display: none;
}
.empty-state-wrap.is-visible {
  display: block;
}

/* 加载骨架 */
.skeleton-wrap {
  display: none;
  padding: var(--spacer-24);
}
.skeleton-wrap.is-visible {
  display: block;
}
.skeleton-row {
  display: flex;
  align-items: center;
  gap: var(--spacer-12);
  margin-bottom: var(--spacer-12);
}
.skeleton-row:last-child {
  margin-bottom: 0;
}

/* 文件名省略 */
.file-name {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-default);
  font-weight: var(--font-weight-medium);
  vertical-align: middle;
}

/* 表格行高紧凑 */
.ds-table-card .ds-table th,
.ds-table-card .ds-table td { padding: var(--spacer-8) var(--spacer-12); }

/* 固定关键列宽，剩余空间全部给文件名 */
#taskTable {
  table-layout: fixed;
  width: 100%;
}
#taskTable th,
#taskTable td {
  overflow: hidden;
}
#taskTable th:nth-child(1),
#taskTable td:nth-child(1) { width: 60px; }
#taskTable th:nth-child(2),
#taskTable td:nth-child(2) { width: auto; }
#taskTable th:nth-child(3),
#taskTable td:nth-child(3) { width: 100px; }
#taskTable th:nth-child(4),
#taskTable td:nth-child(4) { width: 80px; }
#taskTable th:nth-child(5),
#taskTable td:nth-child(5) { width: 200px; }
#taskTable th:nth-child(6),
#taskTable td:nth-child(6) { width: 80px; }
#taskTable th:nth-child(7),
#taskTable td:nth-child(7) { width: 130px; }
#taskTable th:nth-child(8),
#taskTable td:nth-child(8) { width: 130px; }
#taskTable th:nth-child(9),
#taskTable td:nth-child(9) { width: 260px; }

/* 状态单元格内的实时进度条 */
.status-progress {
  display: inline-flex;
  align-items: center;
  gap: var(--spacer-8);
  white-space: nowrap;
}
.status-progress .ds-tag {
  white-space: nowrap;
  flex-shrink: 0;
}
.status-progress .ds-progress {
  width: 120px;
  height: 6px;
  background: var(--bg-overlay-l2);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.status-progress .ds-progress__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--status-brand-default, var(--bg-brand)) 0%, var(--status-brand-hover, #6b8cff) 50%, var(--status-brand-default, var(--bg-brand)) 100%);
  background-size: 200% 100%;
  border-radius: var(--radius-full);
  transition: width .4s ease;
  animation: progressShimmer 1.6s linear infinite;
  box-shadow: 0 0 8px rgba(59, 91, 219, 0.35);
}

@keyframes progressShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* 页面与按钮过渡（去掉 fadeIn 动画，改用 navbar indicator 平滑滑动过渡） */
.page-shell,
.ds-card,
#taskTable tbody tr { animation: none; }

.ds-btn, .navbar__link, .ds-pagination__item, .ds-select {
  transition: opacity .15s ease, transform .1s ease, background .12s ease, color .12s ease, border-color .15s ease, box-shadow .15s ease;
}
.ds-btn:active, .navbar__link:active, .ds-pagination__item:active { transform: scale(0.97); opacity: .92; }

/* 响应式 */
@media (max-width: 1100px) {
  .filter-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .main-content { padding: var(--spacer-16); }
  .filter-grid { grid-template-columns: repeat(2, 1fr); }
  .pagination-section { flex-direction: column; gap: var(--spacer-12); }
  .navbar { padding: 0 var(--spacer-16); }
  .navbar__user span { display: none; }
}

/* ===== 移动端适配 (html.is-mobile / ≤768px) ===== */
/* 触屏输入控件 16px 防 iOS 聚焦放大（页面样式晚于 mobile-core 加载，按需补强） */
html.is-mobile .filter-item :is(input, select),
html.is-mobile .pagination-jump input,
html.is-mobile .pagination__size select { font-size: 16px; }

@media (max-width: 768px) {
  /* 筛选面板：紧凑单卡片，控件触屏可点 */
  .filter-panel {
    padding: var(--spacer-12) var(--spacer-12);
    border-radius: var(--radius-8);
  }
  .filter-grid { grid-template-columns: 1fr 1fr; gap: var(--spacer-12); }
  /* 关键字搜索占整行 */
  .filter-item--search { grid-column: 1 / -1; }
  /* 日期区间占整行，避免两个 date 输入挤在半列 */
  .filter-item--date { grid-column: 1 / -1; }
  /* 操作按钮（重置/刷新）与搜索同行尾部 */
  .filter-item--actions { grid-column: 1 / -1; }
  .filter-item--actions .filter-label--spacer { display: none; }
  .filter-actions .ds-btn { flex: 1; }

  /* 表格：卡片内横向滚动，保住列宽与数据完整性 */
  .table-section { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #taskTable { min-width: 880px; }
  .status-progress .ds-progress { width: 72px; }

  /* 分页：纵向堆叠（与旧断点一致），页码组可换行 */
  .pagination-section { padding: var(--spacer-12); }
  .pagination-left { flex-wrap: wrap; gap: var(--spacer-12); width: 100%; }
  .pagination__range { white-space: normal; }
  .pagination-right { width: 100%; }
  .pagination-jump { margin-left: auto; }
}
@media (max-width: 480px) {
  .filter-grid { grid-template-columns: 1fr; }
  .filter-actions .ds-btn { flex: 1 1 calc(50% - var(--spacer-8)); }
  .pagination-jump { display: none; }
}