/**
 * StarSaltTheme 财务中心页样式（P2）
 *
 * 结构：余额卡（整幅）+ 财务记录卡（通栏 Tab + 表格 + 分页）
 * 只保留这两块：合同 / 发票 / 提现这些入口在侧栏已有，不再重复摆一遍卡片。
 * 配色全部取自 theme-vars.css 的 --ss-* 与 theme/{配色}/index.css 的 --color-primary
 * 单位：px（1920 设计稿按 1:100 折算固化）
 */

/* ===== 余额卡（.ss-card 提供描边 / 圆角 / 底色，这里只写布局） ===== */
.ss-fin-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: var(--space-20) var(--space-24);
}
.ss-fin-hero-main {
  min-width: 0;
}
.ss-fin-hero-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-13);
  color: var(--ss-text-3);
}
.ss-fin-hero-label .el-icon-wallet {
  font-size: var(--fs-16);
  color: var(--ss-primary);
}
.ss-fin-hero-label-extra {
  color: var(--ss-warning);
  margin-left: 8px;
}
.ss-fin-hero-amount {
  margin-top: 10px;
  font-size: var(--fs-36);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ss-text-1);
  font-family: "DIN Alternate", "Bahnschrift", "Arial", sans-serif;
}
.ss-fin-hero-prefix {
  font-size: var(--fs-22);
  margin-right: 2px;
}
.ss-fin-hero-stats {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.ss-fin-hero-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ss-fin-hero-stat-label {
  font-size: var(--fs-12);
  color: var(--ss-text-3);
  display: flex;
  align-items: center;
  gap: 4px;
}
.ss-help-icon {
  color: var(--ss-text-3);
  font-size: var(--fs-14);
  cursor: help;
}
.ss-fin-hero-stat-val {
  font-size: var(--fs-16);
  font-weight: 700;
  color: var(--ss-text-1);
}
.ss-fin-hero-stat-prefix {
  font-size: var(--fs-12);
}
.ss-fin-hero-stat-link {
  font-size: var(--fs-12);
  color: var(--ss-primary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.ss-fin-hero-stat-link:hover {
  text-decoration: underline;
}

.ss-fin-hero-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ss-fin-hero-actions .el-button {
  height: 40px;
  border-radius: var(--ss-radius-btn);
  margin-left: 0;
}
.ss-fin-hero-link {
  position: relative;
  font-size: var(--fs-13);
  color: var(--ss-text-2);
  cursor: pointer;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
}
.ss-fin-hero-link:hover {
  color: var(--ss-primary);
}
.ss-fin-hero-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ss-danger);
}

/* ===== 记录区：一张通栏卡 =====
   以前是「main-card > content_box > content_tab（又一张带描边的卡）」三层，
   每层各写一套 padding（24 / 24 / 16），左右边缘形成 24→48→72 的阶梯，
   表格因此对不齐。现在只留最外层一张卡：tab 行贴卡头，内容 24px。 */
.finance.main-card.ss-fin-panel {
  padding: 0;
  overflow: hidden;
}
.finance .content_box {
  margin: 0;
  padding: 0;
  background: transparent;
}
.finance .content_box .content_tab {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}
/* tab 行当作卡头：贴边、等高、有分隔线 */
.ss-fin-panel .el-tabs__header {
  margin: 0;
  padding: 0 var(--space-24);
}
.ss-fin-panel .el-tabs__nav-wrap::after {
  height: 1px;
  background: var(--divider);
}
.ss-fin-panel .el-tabs__item {
  height: 54px;
  line-height: 54px;
  font-size: var(--fs-14);
  font-weight: 600;
}
.ss-fin-panel .el-tabs__content {
  padding: var(--space-16) var(--space-24) var(--space-20);
}
/* 老代码把内容区撑到 500 高，短列表下面会留一大片空白 */
.finance .el-tabs__content {
  min-height: 0;
}
/* 工具条与表格的间距也收进卡内节奏里 */
.ss-fin-panel .content_searchbar {
  margin: 0 0 var(--space-16);
}
/* 工具条里的控件原来各写 margin-left:20px、按钮用 size="mini"（28 高），
   和全站 32 高的 .ss-panel-btn 不是一套。这里统一尺寸，间距交给 flex gap。 */
.ss-fin-panel .content_searchbar .searchbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.ss-fin-panel .content_searchbar .searchbar > * {
  margin-left: 0 !important;
}
.ss-fin-panel .content_searchbar .el-button {
  height: 32px;
  padding: 0 14px;
  border-radius: var(--ss-radius-btn);
  font-size: var(--fs-12);
  font-weight: 700;
}
.ss-fin-panel .content_searchbar .el-input__inner {
  height: 32px;
  line-height: 32px;
  border-radius: var(--ss-radius-btn);
  font-size: var(--fs-12);
}
.ss-fin-panel .content_searchbar .left_tips {
  column-gap: 12px;
  row-gap: 6px;
}
.ss-fin-panel .content_searchbar .tips_item {
  font-size: var(--fs-12);
  color: var(--text-5);
}
/* 表格与分页之间不留 20px 空档（老代码写死在行内样式里） */
.ss-fin-panel .tabledata > .el-table {
  margin-bottom: 0 !important;
}
.ss-fin-panel .el-pagination {
  padding-top: var(--space-12);
}

/* ===== 响应式 ===== */
@media (max-width: 768px) {
  .ss-fin-hero {
    padding: var(--space-16);
  }
  .ss-fin-hero-amount {
    font-size: var(--fs-32);
  }
  .ss-fin-panel .el-tabs__header,
  .ss-fin-panel .el-tabs__content {
    padding-left: var(--space-16);
    padding-right: var(--space-16);
  }
}