// ============================================================
// 组件默认外观（静态令牌层）
// ------------------------------------------------------------
// 目的：不改任何业务页面模板，用全局样式把 Element 的默认观感
//       统一成"紧凑、清爽、专业"的一套。
// 重点：表格（斑马纹/去竖线/表头底色）、表单、按钮、弹窗、标签。
// 顺序：必须晚于 element-ui 与 ruoyi.scss（见 main.js）。
// ============================================================

// ---------- 全局排版 ----------
body {
  font-family: var(--opo-font-family-base);
  font-size: var(--opo-font-size-base);
  color: var(--opo-text-primary);
  background-color: var(--opo-bg-page);
}

// 覆盖 index.scss 里的 label { font-weight: 700 }
label {
  font-weight: 400;
}

.app-container {
  // 2026-10-22：统一收紧为 8/12/12（原 12/16），全站列表页一致
  padding: 8px 12px 12px;
}

// 数字类字段（金额/编号/身份证）可用此类获得等宽数字
.opo-number {
  font-family: var(--opo-font-family-number);
  font-variant-numeric: tabular-nums;
}

// ---------- 表格 ----------
// 2026-10-22：数据行字号与表头统一（14px / 常规字重）
// 注意：全局 size=small 会让每个表格带上 .el-table--small，
// Element 用它把字号写回 12px、单元格 padding 写回 8px，
// 所以这里必须同时提高选择器特异性，否则会被压回去。
.el-table,
.el-table.el-table--small,
.el-table.el-table--medium,
.el-table.el-table--mini,
.el-table.el-table--large {
  color: var(--opo-text-primary);
  font-size: var(--opo-font-size-sm);
}

.el-table {
  th,
  th.el-table__cell {
    background-color: var(--opo-bg-thead) !important;
    color: var(--opo-text-primary);
    // 表头不加粗（2026-10-22 反馈）
    font-weight: 400;
    font-size: var(--opo-font-size-sm);
    height: 40px;
    padding: 0;
  }

  td,
  td.el-table__cell,
  &.el-table--small td.el-table__cell,
  &.el-table--medium td.el-table__cell,
  &.el-table--mini td.el-table__cell {
    padding: 9px 0;
    // 行分隔线（2026-10-22 再加深一档）
    border-bottom: 1px solid var(--opo-table-border, #c8cfd8);
  }

  // 表格底部那条线
  &::before {
    background-color: var(--opo-table-border, #c8cfd8);
  }

  // 带边框的表格，外框线
  &.el-table--border {
    border-color: var(--opo-table-border, #c8cfd8);
  }

  .cell {
    line-height: 23px;
  }

  // 表头与内容区的分隔线（比行线再深一点，作为分界）
  .el-table__header-wrapper th {
    border-bottom: 1px solid var(--opo-table-border-strong, #b7c0cc);
  }

  // 斑马纹：用 CSS 实现，无需给 162 个表格逐个加 stripe 属性
  .el-table__body tr:nth-child(2n) > td,
  .el-table__body tr:nth-child(2n) > td.el-table__cell {
    background-color: var(--opo-bg-stripe);
  }

  // 鼠标行高亮（覆盖斑马纹；Element 默认 hover 色偏灰）
  .el-table__body tr:hover > td,
  .el-table__body tr:hover > td.el-table__cell {
    background-color: var(--opo-primary-light-95, #f5f9fd);
  }

  // 去掉竖线：border 属性仍保留在模板里，这里只让它在视觉上消失
  &.el-table--border td,
  &.el-table--border th,
  &.el-table--border th.el-table__cell,
  &.el-table--border td.el-table__cell {
    border-right: none;
  }

  &.el-table--border::after,
  &.el-table--group::after {
    display: none;
  }

  .el-table__empty-text {
    color: var(--opo-text-placeholder);
    font-size: var(--opo-font-size-sm);
  }
}

// 需要"强网格线"的明细录入表：模板上加 class="table-bordered" 即可恢复
.el-table.table-bordered {
  border: 1px solid var(--opo-table-border, #c8cfd8);

  td,
  th,
  td.el-table__cell,
  th.el-table__cell {
    border-right: 1px solid var(--opo-table-border, #c8cfd8);
  }
}

// 表格内按钮更紧凑，避免把行撑高
.el-table .el-button--mini,
.el-table .el-button--small {
  padding: 5px 8px;
}

// ---------- 表单 ----------
// 查询条件/表单整体收紧：Element 默认 margin-bottom 22px，行距明显偏大
.el-form-item {
  margin-bottom: 12px;

  &__label {
    font-weight: 400;
    color: var(--opo-text-regular);
    // 标签保持 14px：查询区大量使用 label-width="68px"/"70px"，
    // 标签若随正文升到 16px，4 个字（如"捐献案例"）就会换行、行高翻倍
    font-size: var(--opo-font-size-sm);
    padding-right: 8px;
    line-height: 32px;
  }

  &__content {
    line-height: 32px;
    min-height: 32px;
  }

  &.is-required:not(.is-no-asterisk) > .el-form-item__label:before {
    color: var(--opo-danger);
  }

  &__error {
    font-size: var(--opo-font-size-xs);
    line-height: 1.4;
    padding-top: 2px;
  }
}

// 横向排列的查询条件再紧凑一档
.el-form--inline .el-form-item {
  margin-right: 12px;
  margin-bottom: 8px;
}

// ---------- 紧凑查询区（opt-in） ----------
// 用法：给查询用的 el-form 加 class="opo-query-form"（列表页统一约定）
// 行距 8→4px、标签与控件对齐、最后一行（搜索/重置）去掉下边距
.opo-query-form {
  // 查询条件与下方"新增/导出"工具栏（对表格的操作）之间留出间距
  margin-bottom: 12px;

  .el-form-item {
    margin-right: 8px;
    margin-bottom: 4px;
  }

  .el-form-item__label {
    line-height: 32px;
    padding-right: 6px;
  }

  .el-form-item__content {
    line-height: 32px;
    min-height: 32px;
  }

  // 最后一行通常是"搜索/重置"，不再额外留白
  > .el-row:last-child .el-form-item {
    margin-bottom: 0;
  }
}

// 紧跟查询区之后的工具栏行（新增/导出）：贴近表格，与查询区由 margin-bottom 隔开
.opo-query-form + .el-row.mb8 {
  margin-bottom: 4px;
}

// 页面里的查询区常包在卡片或 el-row 中，去掉多余的外层留白
.el-card__body > .el-form:first-child,
.el-card__body > .el-row:first-child .el-form {
  margin-bottom: 0;
}

.el-input__inner,
.el-textarea__inner {
  border-radius: var(--opo-radius-base);
  color: var(--opo-text-primary);

  &::placeholder {
    color: var(--opo-text-placeholder);
  }
}

// ---------- 按钮 ----------
.el-button {
  border-radius: var(--opo-radius-base);
  font-weight: 400;

  [class*='el-icon-'] + span {
    margin-left: 4px;
  }
}

// 小/迷你按钮的字号在 Element 里是硬编码 12px，随正文一起上调（2026-10-22 再大一号 → 16px）
.el-button--small,
.el-button--mini {
  font-size: var(--opo-font-size-base);
}

// ---------- 弹窗 ----------
.el-dialog {
  border-radius: var(--opo-radius-lg);
  box-shadow: var(--opo-shadow-lg);
  overflow: hidden;

  &__header {
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--opo-border-light);
  }

  &__title {
    font-size: var(--opo-font-size-lg);
    font-weight: 600;
    color: var(--opo-text-primary);
  }

  &__body {
    padding: 16px 20px;
    color: var(--opo-text-regular);
  }

  &__footer {
    padding: 12px 20px 16px;
    border-top: 1px solid var(--opo-border-light);
  }
}

.el-drawer__header {
  padding: 16px 20px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--opo-border-light);
  color: var(--opo-text-primary);
  font-weight: 600;
}

// ---------- 标签 ----------
.el-tag {
  border-radius: var(--opo-radius-sm);
  font-size: var(--opo-font-size-xs);
}

// ---------- 卡片 ----------
.el-card {
  border-radius: var(--opo-radius-lg);
  border-color: var(--opo-border-light);
  box-shadow: var(--opo-shadow-sm) !important;

  &__header {
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--opo-border-light);
    font-weight: 600;
    color: var(--opo-text-primary);
  }

  &__body {
    padding: 12px 16px;
  }
}

// ---------- 分页 ----------
// Element 把分页文字写死 13px、字重 700，和 16px 的表格正文不搭 → 统一 14px/常规
.el-pagination {
  font-weight: 400;
  color: var(--opo-text-regular);
  font-size: var(--opo-font-size-sm);

  button,
  span:not([class*='suffix']) {
    font-size: var(--opo-font-size-sm);
  }

  .el-pager li {
    font-size: var(--opo-font-size-sm);
  }
}

.pagination-container {
  margin-top: 12px;
  height: auto;
  padding: 8px 16px !important;
}

// ---------- 面包屑 / 页签 ----------
.el-breadcrumb {
  font-size: var(--opo-font-size-sm);

  &__inner,
  &__inner a {
    font-weight: 400 !important;
    color: var(--opo-text-secondary);
  }

  &__item:last-child .el-breadcrumb__inner {
    color: var(--opo-text-primary);
  }
}

// ---------- 提示 / 消息 ----------
.el-message {
  border-radius: var(--opo-radius-base);
  box-shadow: var(--opo-shadow-md);
}

.el-tooltip__popper {
  font-size: var(--opo-font-size-xs);
}

// ---------- 滚动条（观感细节） ----------
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.18);
  border-radius: var(--opo-radius-pill);

  &:hover {
    background-color: rgba(0, 0, 0, 0.28);
  }
}

::-webkit-scrollbar-track {
  background-color: transparent;
}