/* ===================================================================
   finance.css — 财务页面 Spike 主题样式
   =================================================================== */
/* ===== 余额卡片顶部 ===== */
.finance-hero {
  background: var(--color-card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  margin-bottom: 20px;
  overflow: hidden;
}

.finance-hero .finance-title {
  padding: 20px 24px 16px;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border);
}
/* ===== 余额金额区 ===== */
.finance-hero .finance-money-main {
  padding: 20px 24px 24px;
}

.finance-hero .finance-money-main .finance-balance {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.finance-hero
  .finance-money-main
  .finance-balance
  .balance-left
  .balance-left-title {
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text-secondary);
}

.finance-hero
  .finance-money-main
  .finance-balance
  .balance-left
  .balance-left-title
  .balance-title-num {
  font-weight: 600;
  color: var(--color-text-primary);
}

.finance-hero
  .finance-money-main
  .finance-balance
  .balance-left
  .balance-left-num {
  margin-top: 10px;
  font-weight: 700;
  font-size: 36px;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
  line-height: 1;
}

.finance-hero
  .finance-money-main
  .finance-balance
  .balance-left
  .balance-left-num
  .prefix {
  font-size: 20px;
  font-weight: 600;
  margin-right: 2px;
}

.finance-hero .finance-money-main .finance-balance .balance-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.finance-hero .finance-money-main .finance-balance .balance-right .tx-list {
  font-size: 13px;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: color 0.2s;
}

.finance-hero
  .finance-money-main
  .finance-balance
  .balance-right
  .tx-list:hover {
  color: var(--color-primary);
}

/* ===== 次要余额条 ===== */
.finance-hero .finance-money-main .finance-other-money {
  margin-top: 20px;
  padding-top: 20px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  border-top: 1px dashed var(--color-border);
}

.finance-hero .finance-money-main .finance-other-money .other-money-item {
  display: flex;
  align-items: center;
  padding: 0 32px;
  border-left: 1px solid var(--color-border);
}

.finance-hero
  .finance-money-main
  .finance-other-money
  .other-money-item:first-of-type {
  padding-left: 0;
  border-left: none;
}

.finance-hero
  .finance-money-main
  .finance-other-money
  .other-money-item
  .other-money-item-title {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--color-text-secondary);
  font-size: 13px;
  margin-right: 8px;
}

.finance-hero
  .finance-money-main
  .finance-other-money
  .other-money-item
  .other-money-item-value {
  font-weight: 600;
  font-size: 16px;
  color: var(--color-text-primary);
}

.finance-hero
  .finance-money-main
  .finance-other-money
  .other-money-item
  .other-money-item-value
  .prefix {
  font-size: 12px;
}

.finance-hero
  .finance-money-main
  .finance-other-money
  .other-money-item
  .freeze-list {
  margin-left: 12px;
  font-size: 12px;
  color: var(--color-primary);
  text-decoration: underline;
  cursor: pointer;
}
/* ===== 内容区 ===== */
.finance-tabs-wrapper {
  padding-bottom: 20px;
}

/* ===== 订单类型图例行 ===== */
.tips-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 10px 24px;
  /*background: var(--color-bg-light);*/
  /*border-top: 1px solid var(--color-border);*/
  /*border-bottom: 1px solid var(--color-border);*/
}

.tips-legend .tips_item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.a-text {
  cursor: pointer;
  color: var(--color-primary);
  transition: opacity 0.2s;
}

.a-text:hover {
  opacity: 0.8;
  text-decoration: underline;
}

/* ===== 内容搜索/筛选行 ===== */
.content_searchbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0;
  flex-wrap: wrap;
}

.content_searchbar .left_tips {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.content_searchbar .left_tips .all-pay,
.content_searchbar .left_tips .all-del {
  height: 34px;
  padding: 0 14px;
}

.content_searchbar .left_tips .tips_item {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* tabs 最小高度 */
.finance-tabs-wrapper .el-tabs__content {
  min-height: 320px;
  overflow: visible !important;
}

/* ===== 类型点 ===== */
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
  flex-shrink: 0;
}

.dot.new {
  background: #0058ff;
}
.dot.renew,
.dot.on_demand {
  background: var(--color-success);
}
.dot.upgrade,
.dot.change_billing_cycle {
  background: var(--color-danger);
}
.dot.artificial {
  background: var(--color-warning);
}
.dot.recharge {
  background: #9c27b0;
}

/* ===== 支付二维码 ===== */
.pay-html {
  display: flex;
  justify-content: center;
  padding: 16px 0;
}

.pay-html > img {
  width: 200px;
  height: 200px;
}

/* ===== 订单状态标签（Spike 实色 pill）===== */
.status-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  border: none;
  white-space: nowrap;
  color: #fff;
}

.status-tag.Unpaid {
  background: var(--color-primary);
}
.status-tag.Paid {
  background: #13deb9;
}
.status-tag.Wait {
  background: #ffb22c;
}
.status-tag.Refunded {
  background: #a0aec0;
}
.status-tag.Fail {
  background: var(--color-danger);
}

.gateway-pay {
  color: #5c5ee4;
  cursor: pointer;
  font-weight: 500;
  transition: opacity 0.2s;
}

.gateway-pay:hover {
  opacity: 0.8;
}

/* ===== 余额明细标签 ===== */
.balance-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-tag);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.balance-tag.Recharge,
.balance-tag.recharge {
  background: var(--color-info-light);
  color: var(--color-info);
}
.Applied {
  background: var(--color-warning-light);
  color: #9a6400;
}
.Refund {
  background: var(--color-danger-light);
  color: var(--color-danger);
}
.Withdraw {
  background: var(--color-success-light);
  color: var(--color-success);
}
.Artificial {
  background: var(--color-info-light);
  color: var(--color-info);
}
.Freeze {
  background: var(--color-danger-light);
  color: var(--color-danger);
}
.Unfreeze {
  background: var(--color-info-light);
  color: var(--color-info);
}

/* ===== 表格内跳转链接 ===== */
.orderid_a {
  cursor: pointer;
  color: var(--color-primary);
  font-weight: 500;
  transition: opacity 0.2s;
}

.orderid_a:hover {
  opacity: 0.8;
  text-decoration: underline;
}

/* ===== 充值输入行 ===== */
.cz-input {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ===== 表格展开图标修正 ===== */
.el-table__expand-icon {
  position: absolute;
  left: 8px;
}

.el-table__indent {
  padding: 0 !important;
}

/* ===== 操作列圆形图标按鈕组（Spike 风格）===== */
.action-btns {
  display: flex;
  align-items: center;
  gap: 8px;
}

.action-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background 0.2s,
    transform 0.15s;
  font-size: 15px;
  flex-shrink: 0;
}

.action-icon-btn:hover {
  transform: scale(1.1);
}

.action-icon-btn.pay-btn {
  background: rgba(19, 222, 185, 0.12);
  color: #13deb9;
}
.action-icon-btn.pay-btn:hover {
  background: rgba(19, 222, 185, 0.22);
}

.action-icon-btn.upload-btn {
  background: rgba(250, 137, 107, 0.12);
  color: var(--color-primary);
}
.action-icon-btn.upload-btn:hover {
  background: rgba(250, 137, 107, 0.22);
}

.action-icon-btn.del-btn {
  background: rgba(239, 83, 80, 0.08);
  color: #ef5350;
}
.action-icon-btn.del-btn:hover {
  background: rgba(239, 83, 80, 0.16);
}

.action-icon-btn.view-btn {
  background: rgba(84, 112, 255, 0.08);
  color: #5470ff;
}
.action-icon-btn.view-btn:hover {
  background: rgba(84, 112, 255, 0.15);
}

/* ===== 保留旧 popover 兼容（其他页面可能使用）===== */
.el-icon-more {
  font-size: 16px;
  color: var(--color-primary);
  cursor: pointer;
}

.operation-box {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
}

.operation-item {
  padding: 7px 12px;
  cursor: pointer;
  font-size: 13px;
  border-radius: 6px;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  transition:
    background 0.15s,
    color 0.15s;
}

.operation-item i {
  font-size: 14px;
  color: var(--color-primary);
  flex-shrink: 0;
}

.operation-item:hover {
  background: var(--color-hover);
  color: var(--color-primary);
}

/* ===== 合同状态 ===== */
.contract-status {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-tag);
  font-size: 12px;
  font-weight: 600;
}

/* ===== 帮助图标 ===== */
.help-icon {
  cursor: pointer;
  margin-left: 4px;
  color: var(--color-primary);
  vertical-align: middle;
}

/* ===== 弹窗公共结构（kd / info / cancel / mail / pre / delete）===== */
.dialog-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.dialog-dec {
  margin-top: 12px;
  font-size: 14px;
  color: var(--color-text-secondary);
}

.dialog-box {
  margin-top: 16px;
  padding: 16px;
  /*border: 1px solid var(--color-border);*/
  /*border-radius: var(--radius-card);*/
}

.kd-item {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 13px;
}

.kd-item:last-of-type {
  margin-bottom: 0;
}

.kd-label {
  color: var(--color-text-secondary);
  flex-shrink: 0;
}
.kd-value {
  color: var(--color-text-primary);
}

.dialog-fotter {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  gap: 10px;
}

/* 认证信息弹窗 */
.certification-info {
  margin: 10px 0 20px;
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}

.info-dialog .dialog-dec {
  font-size: 13px;
  padding: 10px 14px;
  margin-top: 16px;
  color: var(--color-danger);
  border-radius: var(--radius-button);
  background: var(--color-danger-light);
}

.info-dialog .dialog-dec p {
  margin: 0;
}
.info-form .el-form-item__label {
  padding: 0 !important;
}
.info-dialog .first-save-tip {
  font-size: 12px;
  color: var(--color-danger);
}

/* mail-dialog 底部 */
.mail-dialog .dialog-fotter {
  justify-content: space-between;
  align-items: center;
}
.mail-dialog .fotter-left {
  font-size: 14px;
  color: var(--color-text-primary);
}
.mail-dialog .fotter-left .price-blue {
  font-weight: 700;
  color: var(--color-primary);
}

/* delete-order-dialog */
.delete-order-dialog .delete-box {
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 32px 24px;
}

.delete-order-dialog .delete-content {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
  text-align: center;
}

.delete-order-dialog .delete-btn {
  display: flex;
  justify-content: center;
  gap: 12px;
}

/* pre-dialog */
.pre-dialog .dialog-box {
  text-align: center;
}
.pre-dialog .dialog-box .tit {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 16px;
}

.pre-dialog .dialog-box .con .item {
  margin: 6px 0;
  font-size: 13px;
}
.pre-dialog .s-tip {
  margin-top: 12px;
  font-size: 12px;
  color: var(--color-text-secondary);
}

/* creat-dia — 表格表头与 list-card 统一 */
.creat-dia .el-table th.el-table__cell {
  background-color: transparent !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--color-border) !important;
}

.creat-dia .el-table td.el-table__cell {
  padding: 14px 16px !important;
  font-size: 14px !important;
}

.creat-dia .el-table::before,
.creat-dia .el-table--border::after {
  display: none !important;
}

.creat-dia .el-table__body tr:last-child td.el-table__cell {
  border-bottom: none !important;
}

/* creat-dia */
.creat-dia .dialog-tips {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ===== 信用额 — 整体布局 ===== */
.credit-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ===== 信用额 — 卡片区 ===== */
.credit-cards-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.credit-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: linear-gradient(135deg, var(--color-primary) 0%, #f5a580 100%);
  padding: 14px 20px 18px;
  color: #fff;
  box-shadow: 0 4px 20px rgba(244, 124, 71, 0.28);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.credit-card::before {
  content: "";
  position: absolute;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  top: -35px;
  right: -30px;
  pointer-events: none;
}

.credit-card::after {
  content: "";
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  bottom: -20px;
  right: 70px;
  pointer-events: none;
}

.credit-card-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  margin-bottom: 2px;
}

.credit-card-label {
  font-size: 13px;
  font-weight: 500;
  opacity: 0.85;
}

.credit-card-amount {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin: 2px 0;
}

.credit-card-meta {
  font-size: 12px;
  opacity: 0.78;
  line-height: 1.6;
}

.credit-card-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.25);
  align-self: flex-start;
}

.credit-card-badge.is-overdue {
  background: #fff;
  color: #b91c1c;
  font-weight: 700;
}

.credit-card-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.credit-card-btn {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.2s;
  user-select: none;
}

.credit-card-btn.ghost-btn {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  cursor: default;
}

.credit-card-btn.solid-btn {
  background: #fff;
  color: var(--color-primary);
}

.credit-card-btn.solid-btn:hover {
  opacity: 0.88;
}

/* ===== 信用额 — 列表区 ===== */
.credit-list-section {
  margin-top: 0;
}

/* ===== 信用额 — 状态 pill ===== */
.credit-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.credit-status-pill.status-overdue {
  font-weight: 700;
}

/* ===== 表单通用 ===== */
.dialog-form {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.form-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.true-money {
  color: var(--color-warning);
  font-weight: 600;
}
/* 签章上传样式 */
.seal-upload .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
}
.seal-upload .el-upload:hover {
  border-color: var(--color-primary);
}
.seal-upload-content {
  width: 150px;
  height: 150px;
  position: relative;
}
.seal-upload-content .seal-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.seal-upload-content .seal-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s;
}
.seal-upload-content:hover .seal-mask {
  opacity: 1;
}
.seal-mask-actions {
  display: flex;
  gap: 20px;
}
.seal-mask-actions i {
  font-size: 20px;
  cursor: pointer;
  transition: transform 0.2s;
}
.seal-upload-placeholder {
  width: 150px;
  height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #8c939d;
}
.seal-upload-placeholder i {
  font-size: 32px;
  color: #8c939d;
}
.seal-upload-text {
  margin-top: 8px;
  font-size: 12px;
  color: #606266;
}
.seal-upload-tip {
  margin-top: 4px;
  font-size: 11px;
  color: #909399;
  text-align: center;
  line-height: 1.4;
}

/* ===================================================================
   finance-tabs-wrapper — el-tabs 样式已迁移至公共类 page-tabs-wrapper
   (spike-components.css)，finance.php 中使用双类名保持兼容。
   =================================================================== */