/* ============================================================
   版面层：统一页面骨架（页头 → 筛选 → 操作 → 数据 → 分页）
   新页面按此结构编写；老页面改造时逐页套用。
   ============================================================ */

/* ---- 应用外壳 ---- */
.app-shell {
  display: flex;
  align-items: flex-start;
  min-height: 100vh;
}

.app-main {
  flex: 1;
  min-width: 0;              /* 允许表格在窄屏收缩，避免横向溢出 */
  padding: var(--sp-4) var(--sp-6) 60px;
}

/* ---- 页头 ---- */
.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-3);
}

.page-title {
  font-size: var(--fs-title);
  font-weight: 600;
  line-height: 1.4;
  color: var(--c-text);
}

.page-title .sub {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--c-text-3);
}

.page-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
}

/* ---- 区块容器 ---- */
.panel {
  background: var(--c-white);
  border: 1px solid var(--c-border-light);
  border-radius: var(--radius-base);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-3);
}

.panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-3);
  font-size: var(--fs-section);
  font-weight: 600;
}

/* ---- 筛选区 ---- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
}

.filter-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-body);
  color: var(--c-text-2);
}

/* 控件宽度档位 */
.w-xs { width: var(--w-xs); }
.w-sm { width: var(--w-sm); }
.w-md { width: var(--w-md); }
.w-lg { width: var(--w-lg); }
.w-xl { width: var(--w-xl); }

/* ---- 操作区 ---- */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.toolbar .spacer {
  flex: 1;
}

.toolbar .sel-count {
  margin-left: auto;
  font-size: var(--fs-sm);
  color: var(--c-text-3);
}

/* ---- 左侧导航（可收起） ---- */
.side-nav {
  width: var(--w-sidebar);
  flex: none;
  background: var(--c-white);
  border-right: 1px solid var(--c-border-light);
  padding-bottom: var(--sp-6);
  transition: width 0.18s ease;
}

.side-nav .nav-group {
  padding: 10px var(--sp-4) var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--c-text-3);
}

.side-nav .nav-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-body);
  color: var(--c-text-2);
  border-left: 3px solid transparent;
  cursor: pointer;
}

.side-nav .nav-item:hover {
  background: var(--c-bg-page);
}

.side-nav .nav-item.active {
  background: var(--c-brand-light);
  color: var(--c-brand);
  font-weight: 600;
  border-left-color: var(--c-brand);
}

/* ---- 分页 ---- */
.pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
  padding-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--c-text-2);
}

/* 窄屏（<1280px）：筛选项换行，左侧导航默认收起由脚本控制 */
@media (max-width: 1280px) {
  .app-main {
    padding: var(--sp-3) var(--sp-4) 48px;
  }
}

/* ============================================================
   全站左侧导航（阶段 C）：一级菜单 + 资料分类二级
   —— 顶栏只留“平台名 / 当前页 / 属期 / 账号与任务”，页面切换一律走左侧。
   ============================================================ */
.app-root { min-height: 100vh; }

.app-aside {
  flex: none;
  background: var(--c-white);
  border-right: 1px solid var(--c-border-light);
  /* 默认收起成图标栏；二级导航条目不多，不做独立滚动 */
  width: var(--w-sidebar-collapsed);
  overflow: hidden;
  transition: width 0.24s ease-out;
}

.app-aside .side-nav {
  width: 100%;
  height: 100%;
  border-right: none;
}

.side-nav .nav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 var(--sp-4);
  border-bottom: 1px solid var(--c-border-light);
  font-size: var(--fs-section);
  font-weight: 600;
  color: var(--c-text);
  white-space: nowrap;
}

.side-nav .nav-head .toggle {
  cursor: pointer;
  user-select: none;
  color: var(--c-text-3);
}

.side-nav .nav-head .toggle:hover { color: var(--c-brand); }

/* 二级项（资料分类）：缩进 + 小一号字 */
.side-nav .nav-item.nav-sub {
  padding-left: calc(var(--sp-4) + var(--sp-4));
  font-size: var(--fs-sm);
}

/* 导航圆点的中性/品牌色（不使用内联色值） */
.side-nav .nav-item .dot.dot-brand { background: var(--c-brand); }
.side-nav .nav-item .dot.dot-done { background: var(--c-zone-processed); }
.side-nav .nav-item .dot.dot-plain { background: var(--c-border); }

/* 顶栏：平台名 + 当前页 + 属期 */
.header-context {
  font-size: var(--fs-sm);
  color: var(--c-text-3);
  white-space: nowrap;
}

.header-left .page-name { color: var(--c-text-2); }

.header-left .page-name { white-space: nowrap; }

.header-left .page-name::before {
  content: "/";
  margin-right: var(--sp-2);
  color: var(--c-text-4);
}

/* ============================================================
   工作台：指标卡 + 待处理清单
   ============================================================ */
.wb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.wb-card {
  background: var(--c-white);
  border: 1px solid var(--c-border-light);
  border-radius: var(--radius-base);
  padding: var(--sp-3) var(--sp-4);
}

.wb-card .k { font-size: var(--fs-xs); color: var(--c-text-3); }
.wb-card .v {
  margin-top: var(--sp-1);
  font-size: var(--fs-title);
  font-weight: 600;
  line-height: 1.3;
}
.wb-card .hint { margin-top: 2px; font-size: var(--fs-xs); color: var(--c-text-4); }

/* 导航里“尚未建设”的占位项：可见但不可点，避免点进去什么都没有 */
.side-nav .nav-item.disabled {
  color: var(--c-text-4);
  cursor: not-allowed;
}

.side-nav .nav-item.disabled:hover { background: transparent; }

/* ============================================================
   顶部一级导航 + 左侧二级导航（阶段 C-2）
   —— 一级分组固定在顶栏，左侧只显示当前分组下的二级条目；
      导航收起后二级项只留小图标，点图标即可切换。
   ============================================================ */
.nav-primary {
  display: flex;
  align-items: stretch;
  gap: 2px;
  margin-left: var(--sp-4);
  height: 56px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.nav-primary::-webkit-scrollbar { display: none; }

.nav-primary-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 var(--sp-4);
  font-size: var(--fs-body);
  color: var(--c-text-2);
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}

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

.nav-primary-item.active {
  color: var(--c-brand);
  font-weight: 600;
  border-bottom-color: var(--c-brand);
  background: linear-gradient(180deg, var(--c-brand-light), var(--c-white));
}

.nav-primary-ico,
.nav-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: none;
}

.nav-primary-ico svg,
.nav-ico svg { display: block; }

/* 二级项：图标 + 文字，圆角高亮（替换原先的左侧竖线样式） */
.app-aside .side-nav .nav-item {
  gap: 10px;
  margin: 1px var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-left: none;
  border-radius: 6px;
}

.app-aside .side-nav .nav-item.active { border-left: none; }

/* ============================================================
   顶栏通栏 + 左栏下移（阶段 C-3）
   —— 顶栏跨满整个宽度，左侧二级导航移到顶栏下方；
      顶栏右侧只保留当前用户（详情 + 退出登录）。
   ============================================================ */
.app-root { flex-direction: column; }

.app-header { flex: none; }

.app-aside {
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  overflow-y: auto;
}

/* 当前用户：点击展开详情与退出登录 */
.user-chip {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: 34px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 17px;
  cursor: pointer;
  outline: none;
}

.user-chip:hover {
  background: var(--c-bg-page);
  border-color: var(--c-border-light);
}

.user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--c-brand);
  color: var(--c-white);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.user-name { font-size: var(--fs-sm); font-weight: 600; color: var(--c-text); }

.user-role {
  padding: 0 6px;
  border-radius: 3px;
  background: var(--c-brand-light);
  color: var(--c-brand);
  font-size: var(--fs-xs);
}

.user-caret { color: var(--c-text-3); font-size: var(--fs-xs); }

/* 公司列表：简称右侧的「复制税号」小按钮 */
.copy-tax {
  height: 18px;
  padding: 0 2px;
  margin-left: var(--sp-1);
  vertical-align: middle;
}

.copy-tax .copy-tax-ico {
  display: inline-flex;
  width: 14px;
  height: 14px;
  color: var(--c-text-4);
}

.copy-tax:hover .copy-tax-ico { color: var(--c-brand); }

.copy-tax.is-disabled .copy-tax-ico { color: var(--c-border); }

/* ============================================================
   扫描文件页（系统设置）：进度 + 结果 + 说明
   ============================================================ */
.scan-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-6);
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--c-text-2);
}

.scan-stats b { color: var(--c-text); }

.scan-stats .scan-err { color: var(--c-danger); }

.scan-tips {
  margin: 0;
  padding-left: 18px;
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  line-height: 2;
}

.scan-tips b { color: var(--c-text); }

/* 公司列表：纳税人类型只读展示（要改请进「编辑」弹窗，避免列表里误点） */
.taxpayer-text {
  font-weight: 600;
  cursor: default;
}

.taxpayer-text.is-small { color: var(--c-brand); }
.taxpayer-text.is-general { color: var(--c-warning); }

/* ============================================================
   侧边导航：悬停展开（72px → 240px）+ 锁定展开
   —— 宽度用缓出过渡；文字延迟 80ms 淡入，展开过程中不抖字。
   ============================================================ */
.app-aside:hover,
.app-aside.is-locked {
  width: var(--w-sidebar);
}

.side-nav .nav-head {
  position: relative;
  padding: 0 0 0 16px;
}

.app-aside .side-nav .nav-item {
  gap: 12px;
  margin: 1px 10px;
  padding: 9px 0 9px 16px;   /* 收起时图标居中在 70px 图标栏里 */
  border-radius: 6px;
}

.app-aside .side-nav .nav-item,
.side-nav .nav-head {
  white-space: nowrap;
  overflow: hidden;
}

/* 收起时文字不可见，展开时才淡入 */
.app-aside .side-nav .nav-item .nav-text,
.side-nav .nav-head .title {
  opacity: 0;
  transition: opacity 0.16s ease-out;
}

.app-aside:hover .side-nav .nav-item .nav-text,
.app-aside:hover .side-nav .nav-head .title,
.app-aside.is-locked .side-nav .nav-item .nav-text,
.app-aside.is-locked .side-nav .nav-head .title {
  opacity: 1;
  transition-delay: 80ms;
}

/* 导航右上角的锁：锁定后一直展开 */
.side-nav .nav-head .lock {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  color: var(--c-text-3);
  cursor: pointer;
}

.side-nav .nav-head .lock:hover {
  background: var(--c-bg-page);
  color: var(--c-brand);
}

.side-nav .nav-head .lock.on {
  background: var(--c-brand-light);
  color: var(--c-brand);
}

.side-nav .nav-head .lock .lock-ico {
  display: inline-flex;
  width: 16px;
  height: 16px;
}

/* ============================================================
   2026-09-21 配色方案 A（清爽蓝白）· 第一批：外壳与层次
   —— 只改观感：顶栏高度与当前项、侧栏高亮、内容底、卡片与
      指标卡层次、表格行高。不改业务结构、按钮、文案与权限。
   ============================================================ */

/* ---- 顶栏：56px，一级导航由下划线改为胶囊高亮 ---- */
.el-header.app-header {
  height: 56px;
  padding: 0 var(--sp-4) 0 var(--sp-6);
  background: var(--c-white);
  border-bottom: 1px solid var(--c-border-light);
}

.app-header .header-left .title { font-weight: 600; letter-spacing: .2px; }

.nav-primary {
  margin-left: var(--sp-6);
  height: 56px;
  gap: var(--sp-1);
}

.nav-primary-item {
  height: auto;
  align-self: center;
  padding: 7px 14px;
  border-bottom: none;
  border-radius: var(--radius-base);
  color: var(--c-text-2);
}

.nav-primary-item:hover { background: var(--c-bg-page); color: var(--c-brand); }

.nav-primary-item.active {
  background: var(--c-brand-light);
  color: var(--c-brand-strong);
  font-weight: 600;
  border-bottom-color: transparent;
}

/* ---- 侧栏：标题高度与顶栏对齐，当前项用浅品牌底 ---- */
.side-nav .nav-head {
  height: 56px;
  font-size: var(--fs-body);
  border-bottom: 1px solid var(--c-border-light);
}

.app-aside .side-nav .nav-item {
  margin: 2px 10px;
  padding: 9px 12px;
  border-radius: var(--radius-base);
}

.app-aside .side-nav .nav-item.active {
  background: var(--c-brand-light);
  color: var(--c-brand-strong);
}

/* ---- 内容区：页面底与白卡分离 ---- */
.el-main {
  background: var(--c-bg-page);
  padding: var(--sp-4) var(--sp-6) 64px;
}

/* ---- 卡片与面板：底、描边、圆角、投影统一 ---- */
.panel,
.wb-card,
.stat-card,
.asset-stat {
  background: var(--c-white);
  border: 1px solid var(--c-border-light);
  border-radius: var(--radius-base);
  box-shadow: var(--shadow-card);
}

.panel { padding: 16px 18px; margin-bottom: var(--sp-4); }
.wb-grid, .stats { gap: 14px; margin-bottom: var(--sp-4); }
.wb-card, .stat-card { padding: 16px 18px; }

.wb-card .k,
.stat-card .k,
.asset-stat .k {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--c-text-2);
  letter-spacing: .2px;
}

.wb-card .v,
.stat-card .v,
.asset-stat .v {
  margin-top: 6px;
  font-size: var(--fs-metric);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.4px;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
}

.wb-card .hint,
.stat-card .hint,
.asset-stat .s { margin-top: 4px; color: var(--c-text-3); }