/* 页面外壳 */
.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);
}

/* 工具栏 */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacer-16);
  margin-bottom: var(--spacer-16);
}
.toolbar__left {
  display: inline-flex;
  align-items: center;
  gap: var(--spacer-8);
}
.toolbar__right {
  display: inline-flex;
  align-items: center;
  gap: var(--spacer-8);
}

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

/* 文件名省略 */
.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;
}

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

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

/* 固定关键列宽，剩余空间全部给文件名 */
#fileTable {
  table-layout: fixed;
  width: 100%;
}
#fileTable th,
#fileTable td {
  overflow: hidden;
}
#fileTable th:nth-child(1),
#fileTable td:nth-child(1) { width: 60px; text-align: center; }
#fileTable th:nth-child(2),
#fileTable td:nth-child(2) { width: auto; }
#fileTable th:nth-child(3),
#fileTable td:nth-child(3) { width: 80px; }
#fileTable th:nth-child(4),
#fileTable td:nth-child(4) { width: 100px; }
#fileTable th:nth-child(5),
#fileTable td:nth-child(5) { width: 160px; }
#fileTable th:nth-child(6),
#fileTable td:nth-child(6) { width: 180px; text-align: center; }

/* 空状态 */
.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;
}

/* 分页区 */
.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);
}

/* 页面与按钮过渡（去掉 fadeIn 动画，改用 navbar indicator 平滑滑动过渡） */
.page-shell,
.ds-card,
#fileTable 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: 768px) {
  .main-content { padding: var(--spacer-16); }
  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar__left, .toolbar__right { justify-content: center; }
  .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 聚焦放大 */
html.is-mobile .toolbar :is(input, select) { font-size: 16px; }

@media (max-width: 768px) {
  /* 工具栏：搜索框占满一行，按钮齐平 */
  .toolbar { gap: var(--spacer-8); margin-bottom: var(--spacer-12); }
  .toolbar__left { width: 100%; }
  .toolbar__left .ds-search { flex: 1; min-width: 0; }
  .toolbar__left .ds-search input { width: 100%; min-width: 0; }
  .toolbar__right { width: 100%; }
  .toolbar__right .ds-btn { flex: 1; justify-content: center; }

  /* 表格：卡片内横向滚动，保住列宽与数据 */
  .table-section { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #fileTable { min-width: 640px; }

  /* 分页纵向堆叠（与旧断点一致），信息文字可换行 */
  .pagination-section { padding: var(--spacer-12); align-items: flex-start; }
  .pagination__range { white-space: normal; }
}
@media (max-width: 480px) {
  .toolbar__left { flex-wrap: wrap; }
  .toolbar__left .ds-btn { flex: 1 1 100%; justify-content: center; }
}
/* 主按钮（紫色背景）内的黑色图标反转为白色 */
.ds-btn--brand img { filter: brightness(0) invert(1); }