/* =====================================================================
   aurora_fresh · 组件层（Components）
   ---------------------------------------------------------------------
   职责：卡片 / 按钮 / 表单 / 表格 / 徽章 / 分页 / 弹窗 / 面包屑 /
         下拉 / 提示 / 空状态 / 标签页 / 导航
   原则：
     · Bootstrap 原生类名一律"重新赋值"，不删除（旧页面与业务 JS 依赖）
     · 新增 .f-* 前缀类只供新写页面使用，与旧类零冲突
   加载顺序：fresh-tokens → fresh-layout → fresh-components（本文件）
   ===================================================================== */

/* =====================================================================
   1. 卡片（.card / .f-card）
   ===================================================================== */
.card {
  background: var(--f-surface);
  border: 1px solid var(--f-border) !important;
  border-radius: var(--f-radius-md);
  box-shadow: var(--f-shadow-xs);
  margin-bottom: var(--f-space-5);
  transition: box-shadow var(--f-dur) var(--f-ease),
              transform var(--f-dur) var(--f-ease);
}

.card:hover {
  box-shadow: var(--f-shadow-sm);
}

.card-body {
  padding: var(--f-space-5);
}

.card-header {
  padding: var(--f-space-4) var(--f-space-5);
  background: var(--f-surface);
  border-bottom: 1px solid var(--f-divider);
  border-radius: var(--f-radius-md) var(--f-radius-md) 0 0;
}

.card-footer {
  padding: var(--f-space-4) var(--f-space-5);
  background: var(--f-surface-alt);
  border-top: 1px solid var(--f-divider);
  border-radius: 0 0 var(--f-radius-md) var(--f-radius-md);
}

.card-title {
  font-size: var(--f-fs-md);
  font-weight: var(--f-fw-semibold);
  color: var(--f-ink-800);
  margin: 0;
}

/* 新写页面用的卡片（带 hover 抬升） */
.f-card {
  background: var(--f-surface);
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius-md);
  box-shadow: var(--f-shadow-xs);
  margin-bottom: var(--f-space-5);
  transition: box-shadow var(--f-dur) var(--f-ease),
              transform var(--f-dur) var(--f-ease);
}

.f-card:hover,
.f-card.is-hover {
  transform: translateY(-2px);
  box-shadow: var(--f-shadow-sm);
}

.f-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--f-space-4);
  padding: var(--f-space-4) var(--f-space-5);
  border-bottom: 1px solid var(--f-divider);
}

.f-card__title {
  font-size: var(--f-fs-md);
  font-weight: var(--f-fw-semibold);
  color: var(--f-ink-800);
  margin: 0;
}

.f-card__body {
  padding: var(--f-space-5);
}

.f-card__foot {
  padding: var(--f-space-4) var(--f-space-5);
  background: var(--f-surface-alt);
  border-top: 1px solid var(--f-divider);
  border-radius: 0 0 var(--f-radius-md) var(--f-radius-md);
}

/* 无内边距卡片（表格容器） */
.f-card--flush .f-card__body {
  padding: 0;
}

/* =====================================================================
   2. 按钮（.btn 系列）
   ⚠️ .btn-secondary / .btn-outline-light 必须保留（modal.js 动态生成依赖）
   ===================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: .5rem 1rem;
  font-size: var(--f-fs-base);
  font-weight: var(--f-fw-medium);
  line-height: 1.5;
  border-radius: var(--f-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--f-dur-fast) var(--f-ease),
              border-color var(--f-dur-fast) var(--f-ease),
              color var(--f-dur-fast) var(--f-ease),
              box-shadow var(--f-dur-fast) var(--f-ease),
              transform var(--f-dur-fast) var(--f-ease);
}

.btn:active {
  transform: translateY(1px);
}

.btn i {
  font-size: 1.05em;
  line-height: 1;
}

.btn:focus,
.btn.focus {
  box-shadow: none;
  outline: 0;
}

/* ⚠️ 实底按钮的底色必须够深，白字才能过 4.5:1 —— 这是本文件所有「实底 + 白字」的通用纪律。
   品牌薄荷青 --f-primary(#2FA98A) 配白字只有 2.93:1（原主题的 Bootstrap 靛蓝是 4.41:1，
   属本次重写引入的可读性回归），故实底一律下探到同色系深档：
     --f-primary-active #1F7D64 → 白字 5.07:1
     hover #1B6E58 → 6.2:1 ；active --f-primary-deep #17614E → 8.1:1 */
.btn-primary {
  background: var(--f-primary-active);
  border-color: var(--f-primary-active);
  color: var(--f-primary-on);
}

.btn-primary:hover,
.btn-primary:focus {
  background: #1B6E58;
  border-color: #1B6E58;
  color: var(--f-primary-on);
  box-shadow: var(--f-shadow-primary);
}

.btn-primary:not(:disabled):not(.disabled):active {
  background: var(--f-primary-deep);
  border-color: var(--f-primary-deep);
  color: var(--f-primary-on);
}

/* ⚠️ 底座里埋着一处带 !important 的陷阱：bootstrap.min.css 第 10229 行是
     Skote 的浅色主题覆盖段，写了 `.btn-dark, .btn-secondary { color: #eff2f7 !important }`。
   无差别的 `.btn-secondary { color: var(--f-text-2) }` 因为没有 !important，必然输给它，
   于是「取消 / 返回」这类次要按钮变成浅灰字 + 白底 —— 实测只有 1.12:1，几乎看不见。
   该色值在全主题 23 个模板、上百处模态框按钮上生效，所以这里必须用 !important 抢回来。
   （.btn-dark 不受影响：白字落在 #343A40 上是 13.75:1） */
.btn-secondary {
  background: var(--f-surface) !important;
  border-color: var(--f-border-strong) !important;
  color: var(--f-text-2) !important;
}

.btn-secondary:hover,
.btn-secondary:focus {
  background: var(--f-surface-alt) !important;
  border-color: var(--f-ink-300) !important;
  color: var(--f-text) !important;
}

/* 语义实底按钮：一律用「深档 ink + 白字」，白字对比度均已 ≥5:1
   （中间色 #10B981/#F5A623/#EF5F6C 配白字只有 2.0~3.2:1，不可用于实底白字） */
.btn-success {
  background: var(--f-success-ink);
  border-color: var(--f-success-ink);
  color: #fff;
}

.btn-success:hover {
  background: #096B4F;
  border-color: #096B4F;
}

.btn-danger {
  background: var(--f-danger-ink);
  border-color: var(--f-danger-ink);
  color: #fff;
}

.btn-danger:hover {
  background: #9C2A35;
  border-color: #9C2A35;
}

.btn-warning {
  background: var(--f-warning-ink);
  border-color: var(--f-warning-ink);
  color: #fff;
}

.btn-info {
  background: var(--f-info-ink);
  border-color: var(--f-info-ink);
  color: #fff;
}

.btn-info:hover {
  background: #275CAD;
  border-color: #275CAD;
}

/* ⚠️ 必须补 focus/active：底座 Bootstrap 的
   `.btn-success:not(:disabled):not(.disabled).active`（特异性 0,4,0）会盖过上面的基础规则，
   把底色打回中间色（如 #299B71，白字仅 3.49:1），hover 同理（#2CA579 / #EEA529…）。
   这里把每个语义按钮的 focus / active 一并钉到深档，保证任何交互态都 ≥4.5:1。 */
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:not(:disabled):not(.disabled).active,
.btn-warning:not(:disabled):not(.disabled):active {
  background: #855606;
  border-color: #855606;
  color: #fff;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:not(:disabled):not(.disabled).active,
.btn-success:not(:disabled):not(.disabled):active {
  background: #096B4F;
  border-color: #096B4F;
  color: #fff;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:not(:disabled):not(.disabled).active,
.btn-danger:not(:disabled):not(.disabled):active {
  background: #9C2A35;
  border-color: #9C2A35;
  color: #fff;
}

.btn-info:focus,
.btn-info:not(:disabled):not(.disabled).active,
.btn-info:not(:disabled):not(.disabled):active {
  background: #275CAD;
  border-color: #275CAD;
  color: #fff;
}

.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled).active {
  background: #1B6E58;
  border-color: #1B6E58;
  color: var(--f-primary-on);
}

.btn-light {
  background: var(--f-surface-alt);
  border-color: var(--f-border);
  color: var(--f-text-2);
}

.btn-light:hover {
  background: var(--f-ink-100);
  color: var(--f-text);
}

.btn-outline-light {
  background: var(--f-surface);
  border-color: var(--f-border-strong);
  color: var(--f-text-2);
}

.btn-outline-light:hover {
  background: var(--f-surface-alt);
  color: var(--f-text);
}

/* 描边按钮：白底上的彩色文字同样要 ≥4.5:1，故文字/描边都用深档（--f-primary 白底 3.28:1 不达标）。
   hover 反相为实底深档 + 白字（5.07:1）。 */
.btn-outline-primary {
  border-color: var(--f-primary-active);
  color: var(--f-primary-active);
  background: transparent;
}

.btn-outline-primary:hover {
  background: var(--f-primary-active);
  border-color: var(--f-primary-active);
  color: #fff;
}

.btn-link {
  color: var(--f-primary-active);
  background: transparent;
  border-color: transparent;
}

.btn-link:hover {
  /* hover 必须比常态（--f-primary-active 5.03:1）更深：--f-primary-hover #279478
     在白底只有 3.76:1，不达标 */
  color: var(--f-primary-deep);
}

.btn-sm {
  padding: .3rem .7rem;
  font-size: var(--f-fs-sm);
  border-radius: var(--f-radius-xs);
}

.btn-lg {
  padding: .65rem 1.4rem;
  font-size: var(--f-fs-md);
}

.btn-block {
  width: 100%;
}

.btn-rounded {
  border-radius: var(--f-radius-pill);
}

/* 文字按钮（表格操作列常用） */
.f-btn--text {
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--f-primary-active);
  font-weight: var(--f-fw-medium);
}

.f-btn--text:hover {
  color: var(--f-primary-deep);
  box-shadow: none;
}

/* 图标按钮 */
.f-btn--icon {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: var(--f-radius-sm);
  color: var(--f-text-3);
  background: transparent;
  border: 1px solid transparent;
}

.f-btn--icon:hover {
  background: var(--f-primary-50);
  color: var(--f-primary-active);
}

/* 加载中按钮：旋转环 + 禁用点击 */
.btn.is-loading {
  position: relative;
  pointer-events: none;
  opacity: .75;
}

.btn.is-loading:after {
  content: "";
  width: 14px;
  height: 14px;
  margin-left: 6px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: f-spin .7s linear infinite;
}

.btn-outline-primary.is-loading:after,
.btn-light.is-loading:after,
.btn-outline-light.is-loading:after {
  border-color: rgba(47, 169, 138, .3);
  border-top-color: var(--f-primary);
}

/* =====================================================================
   3. 表单（.form-control / .form-group / .input-group）
   ⚠️ .is-invalid 必须保留：modal.js 用 classList.add('is-invalid')
   ===================================================================== */
.form-group {
  margin-bottom: var(--f-space-5);
}

label,
.col-form-label,
.form-control-label {
  margin-bottom: var(--f-space-2);
  color: var(--f-text-2);
  font-size: var(--f-fs-base);
  font-weight: var(--f-fw-medium);
}

.form-control {
  height: 40px;
  padding: .45rem .75rem;
  font-size: var(--f-fs-base);
  color: var(--f-text);
  background: var(--f-surface);
  border: 1px solid var(--f-border-strong);
  border-radius: var(--f-radius-sm);
  transition: border-color var(--f-dur-fast) var(--f-ease),
              box-shadow var(--f-dur-fast) var(--f-ease);
}

.form-control::placeholder {
  color: var(--f-text-4);
}

.form-control:hover {
  border-color: var(--f-ink-400);
}

.form-control:focus {
  border-color: var(--f-primary);
  box-shadow: var(--f-ring);
  outline: 0;
}

.form-control:disabled,
.form-control[readonly] {
  background: var(--f-surface-alt);
  color: var(--f-text-3);
  opacity: 1;
}

textarea.form-control {
  height: auto;
  min-height: 84px;
  line-height: var(--f-lh);
}

select.form-control {
  height: 40px;
  padding-right: 30px;
}

.form-control-sm {
  height: 34px;
  font-size: var(--f-fs-sm);
}

.form-control-lg {
  height: 48px;
  font-size: var(--f-fs-md);
}

/* 校验状态 */
.form-control.is-invalid,
.was-validated .form-control:invalid {
  border-color: var(--f-danger);
  background-image: none;
}

.form-control.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(239, 95, 108, .18);
}

.form-control.is-valid {
  border-color: var(--f-success);
  background-image: none;
}

.invalid-feedback {
  display: none;
  margin-top: var(--f-space-1);
  font-size: var(--f-fs-sm);
  color: var(--f-danger-ink);
}

.is-invalid ~ .invalid-feedback,
.is-invalid ~ .f-error,
.was-validated :invalid ~ .invalid-feedback {
  display: block;
}

/* 输入组 */
.input-group-text {
  display: inline-flex;
  align-items: center;
  padding: .45rem .75rem;
  background: var(--f-surface-alt);
  border: 1px solid var(--f-border-strong);
  color: var(--f-text-3);
  font-size: var(--f-fs-base);
  border-radius: var(--f-radius-sm);
}

.input-group > .form-control:not(:last-child),
.input-group > .input-group-prepend > .input-group-text {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group > .form-control:not(:first-child),
.input-group > .input-group-append > .input-group-text,
.input-group > .input-group-append > .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group-append .btn,
.input-group-prepend .btn {
  height: 40px;
  border-radius: 0 var(--f-radius-sm) var(--f-radius-sm) 0;
}

.input-group-prepend .btn {
  border-radius: var(--f-radius-sm) 0 0 var(--f-radius-sm);
}

/* 自定义勾选（Bootstrap custom-control） */
.custom-control-label:before {
  background: var(--f-surface);
  border: 1px solid var(--f-border-strong);
  transition: background var(--f-dur-fast) var(--f-ease),
              border-color var(--f-dur-fast) var(--f-ease);
}

.custom-control-input:checked ~ .custom-control-label:before {
  background: var(--f-primary);
  border-color: var(--f-primary);
}

.custom-control-input:focus ~ .custom-control-label:before {
  box-shadow: var(--f-ring);
}

.custom-control-label:after {
  transition: none;
}

/* 新写页面表单栅格 */
.f-form__item {
  margin-bottom: var(--f-space-5);
}

.f-label {
  display: block;
  margin-bottom: var(--f-space-2);
  color: var(--f-text-2);
  font-size: var(--f-fs-base);
  font-weight: var(--f-fw-medium);
}

.f-label .f-req {
  color: var(--f-danger-ink);
  margin-left: 2px;
}

.f-hint {
  margin-top: var(--f-space-1);
  font-size: var(--f-fs-sm);
  color: var(--f-text-4);
}

.f-error {
  display: block;
  margin-top: var(--f-space-1);
  font-size: var(--f-fs-sm);
  color: var(--f-danger-ink);
}

/* =====================================================================
   4. 表格（.table / .table-container）
   ⚠️ thead.bg-light 是排序钩子，必须保留 class，只能改背景色
   ⚠️ .table-responsive / .tablelist / .no-data 结构不能动
   ===================================================================== */
.table-container {
  background: transparent;
}

.table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--f-space-4);
  flex-wrap: wrap;
  margin-bottom: var(--f-space-4);
}

.table-responsive {
  border-radius: var(--f-radius-md);
  border: 1px solid var(--f-border);
  /* ⚠️ 不可写 overflow:hidden —— 简写会一并覆盖 Bootstrap 的 overflow-x:auto，
        导致宽表超出容器的部分被直接裁掉且没有滚动条（responsive.css 的全局
        nowrap 会放大这个问题）。
     overflow-y 保持不写：按 CSS Overflow 规范，x:auto + y:visible 会把 y
        计算为 auto，border-radius 裁剪依然生效。若显式写 overflow-y:hidden，
        会额外裁掉表格内的 selectpicker / dropdown 下拉浮层。 */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table {
  width: 100%;
  margin-bottom: 0;
  color: var(--f-text);
  font-size: var(--f-fs-base);
}

.table thead th {
  padding: var(--f-space-3) var(--f-space-4);
  background: var(--f-surface-alt);
  color: var(--f-text-3);
  font-size: var(--f-fs-sm);
  font-weight: var(--f-fw-medium);
  white-space: nowrap;
  border-top: 0;
  border-bottom: 1px solid var(--f-border);
  vertical-align: middle;
}

/* 排序钩子：只改背景色，class 必须保留 */
.table thead.bg-light,
thead.bg-light {
  background: var(--f-surface-alt) !important;
}

.table thead th.pointer {
  cursor: pointer;
  user-select: none;
  transition: color var(--f-dur-fast) var(--f-ease);
}

.table thead th.pointer:hover {
  color: var(--f-primary-deep);
}

/* 排序箭头容器（tablesearch.tpl 的超长复合选择器依赖此结构） */
.table thead th .text-black-50 {
  color: var(--f-text-4) !important;
}

.table tbody td {
  padding: var(--f-space-3) var(--f-space-4);
  border-top: 0;
  border-bottom: 1px solid var(--f-divider);
  vertical-align: middle;
  word-break: break-word;
}

.table tbody tr {
  transition: background var(--f-dur-fast) var(--f-ease);
}

.table-hover tbody tr:hover,
.table tbody tr:hover {
  background: var(--f-primary-50);
}

.table tbody tr:last-child td {
  border-bottom: 0;
}

.table-striped tbody tr:nth-of-type(odd) {
  background: var(--f-bg-soft);
}

.table-striped tbody tr:nth-of-type(odd):hover {
  background: var(--f-primary-50);
}

.table-secondary,
.table-secondary > td,
.table-secondary > th {
  background: var(--f-surface-alt) !important;
}

.table-sm th,
.table-sm td {
  padding: var(--f-space-2) var(--f-space-3);
}

/* 表格底部工具条 */
.table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--f-space-4);
  flex-wrap: wrap;
  padding-top: var(--f-space-4);
}

.table-pageinfo {
  color: var(--f-text-3);
  font-size: var(--f-fs-sm);
}

.table-pageinfo select {
  display: inline-block;
  width: auto;
  height: 32px;
  padding: 0 var(--f-space-2);
  margin: 0 var(--f-space-1);
  border: 1px solid var(--f-border-strong);
  border-radius: var(--f-radius-xs);
  color: var(--f-text-2);
  background: var(--f-surface);
}

/* 新写页面表格工具条 */
.f-table__tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--f-space-3);
  flex-wrap: wrap;
  padding: var(--f-space-4) var(--f-space-5);
  border-bottom: 1px solid var(--f-divider);
}

.f-toolbar {
  display: flex;
  align-items: center;
  gap: var(--f-space-3);
  flex-wrap: wrap;
}

.f-toolbar__spacer {
  flex: 1 1 auto;
}

/* 搜索框 */
.search-box {
  position: relative;
  width: 100%;
  max-width: 260px;
}

.search-box .form-control {
  height: 38px;
  padding-right: 38px;
  border-radius: var(--f-radius-sm);
}

.search-box .search-icon {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  color: var(--f-text-4);
  cursor: pointer;
  font-size: 16px;
  transition: color var(--f-dur-fast) var(--f-ease);
}

.search-box .search-icon:hover {
  color: var(--f-primary-deep);
}

/* 移动端表格横向滚动 */
@media (max-width: 767.98px) {
  .table-responsive {
    border-radius: var(--f-radius-md);
  }

  .table thead th,
  .table tbody td {
    padding: var(--f-space-2) var(--f-space-3);
    font-size: var(--f-fs-sm);
  }

  .table-footer {
    justify-content: center;
  }
}

/* =====================================================================
   5. 徽章 / 状态标签
   旧 .status* 保留白字实底（后端可能内联 background-color）
   新 .f-tag 为浅底 + 圆点，供新写页面使用
   ===================================================================== */
.badge {
  padding: .3em .6em;
  font-size: 75%;
  font-weight: var(--f-fw-medium);
  border-radius: var(--f-radius-xs);
  line-height: 1.4;
}

.badge-pill {
  border-radius: var(--f-radius-pill);
}

.status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--f-radius-pill);
  font-size: var(--f-fs-sm);
  font-weight: var(--f-fw-medium);
  line-height: 1.5;
  color: #fff;
  white-space: nowrap;
}

/* ⚠️ 语义状态色：必须是「深档实底 + 白字」。
   本轮修正一个隐性回归：此前把「浅色 *-ink 令牌」当**背景**用 ——
   而这些 *-ink（#6EE7B7 / #FCD34D / #FCA5A5 / #93C5FD）本是给**文字**用的前景色，
   再配白字，实测白字落在 #6EE7B7 上仅 1.4:1（几乎不可读）。
   现统一改为实底深色 + 白字，逐一保证白字 ≥4.5:1（见各条注释）。
   其中「已激活」按主题改用紫罗兰 --f-violet（用户指定：状态徽章底用主题紫色）。 */
.status-active {
  background-color: var(--f-violet) !important;   /* #8B3BFF 主题紫，白字 5.04:1 */
  color: #fff !important;
  box-shadow: 0 3px 12px rgba(139, 59, 255, .38);
}

.status-paid,
.status-success {
  background-color: #047857 !important;           /* 深翠绿，白字 5.49:1 */
  color: #fff !important;
}

.status-pending,
.status-unpaid {
  background-color: #B45309 !important;           /* 深琥珀，白字 5.02:1 */
  color: #fff !important;
}

.status-suspended,
.status-overdue_active,
.status-deleted,
.status-cancelled {
  background-color: #B91C1C !important;           /* 深红，白字 6.47:1 */
  color: #fff !important;
}

.status-verifiy_active,
.status-issue_active {
  background-color: #1D4ED8 !important;           /* 深蓝，白字 6.70:1 */
  color: #fff !important;
}

/* 已退款用中性深灰（浅灰 #94A3B8 配白字仅 2.56:1） */
.status-refunded {
  background-color: #475569 !important;           /* 板岩深灰，白字 7.58:1 */
  color: #fff !important;
}

/* ⚠️ 通用实底徽章 .badge-*（不同于上面的 .status-*，也不同于浅底的 .badge-soft-*）。
   原主题 aurora.css 给过它们「足够深的底 + 白字」：
     .badge-success{background:#059669} / .badge-danger{background:#dc2626} /
     .badge-info{background:linear-gradient(#0ea5e9,#0284c7)} ...
   本次重写停用 aurora.css 后这些覆盖一并失效，徽章退回 bootstrap.min.css 里
   Skote 的中间色，实测白字对比度（scripts/_audit/measure.html）：
     success  #34C38F → 2.25:1    warning #F1B44C → 1.85:1
     info     #50A5F1 → 2.63:1    danger  #F46A6A → 2.95:1
     secondary#74788D → 4.36:1    primary #6064FF → 4.41:1
   六个全部低于 AA 4.5:1 —— 这是本次重写引入的回归，必须补回。
   站点实际用到：security.tpl(实名认证) / credit.tpl(待还款) /
   downloads.tpl(分类文件数) / supporttickets.tpl(所属部门) / header.tpl(未读角标)。
   注意 .badge-light / .badge-dark 自身已达标（13.75:1 / 10.25:1），不动。 */
.badge-primary {
  background-color: var(--f-primary-active) !important;
  color: #fff !important;
}

.badge-secondary {
  background-color: var(--f-ink-500) !important;
  color: #fff !important;
}

.badge-success {
  background-color: var(--f-success-ink) !important;
  color: #fff !important;
}

.badge-info {
  background-color: var(--f-info-ink) !important;
  color: #fff !important;
}

.badge-warning {
  background-color: var(--f-warning-ink) !important;
  color: #fff !important;
}

.badge-danger {
  background-color: var(--f-danger-ink) !important;
  color: #fff !important;
}

/* 新标签：浅底 + 圆点 + 深字 */
.f-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--f-radius-pill);
  font-size: var(--f-fs-sm);
  font-weight: var(--f-fw-medium);
  line-height: 1.5;
  white-space: nowrap;
}

.f-tag__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 6px;
}

.f-tag--success {
  background: var(--f-success-bg);
  color: var(--f-success-ink);
}

.f-tag--warning {
  background: var(--f-warning-bg);
  color: var(--f-warning-ink);
}

.f-tag--danger {
  background: var(--f-danger-bg);
  color: var(--f-danger-ink);
}

.f-tag--info {
  background: var(--f-info-bg);
  color: var(--f-info-ink);
}

.f-tag--neutral {
  background: var(--f-neutral-bg);
  color: var(--f-ink-600);
}

/* =====================================================================
   6. 分页（.pagination）
   ⚠️ $Pages 为后端生成 HTML，.page-link 是 ajax 分页钩子，结构不改
   ===================================================================== */
.pagination {
  margin: 0;
  gap: 4px;
  flex-wrap: wrap;
}

.pagination .page-item {
  margin: 0;
}

.pagination .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 var(--f-space-2);
  margin: 0;
  font-size: var(--f-fs-sm);
  color: var(--f-text-2);
  background: var(--f-surface);
  border: 1px solid var(--f-border-strong);
  border-radius: var(--f-radius-sm);
  transition: all var(--f-dur-fast) var(--f-ease);
}

.pagination .page-link:hover {
  background: var(--f-primary-50);
  border-color: var(--f-primary-200);
  color: var(--f-primary-active);
}

.pagination .page-item.active .page-link {
  background: var(--f-primary-active);
  border-color: var(--f-primary-active);
  color: #fff;
  font-weight: var(--f-fw-medium);
}

.pagination .page-item.disabled .page-link {
  background: var(--f-surface-alt);
  border-color: var(--f-border);
  color: var(--f-text-4);
}
#moduleReinstall .modal-content{overflow:visible}
/* =====================================================================
   7. 弹窗（.modal）
   ⚠️ 只改外观，DOM id 与 .btn-outline-light / .btn-primary 全部保留
   ===================================================================== */
.modal-content {
  border: 0;
  border-radius: var(--f-radius-lg);
  box-shadow: var(--f-shadow-lg);
  overflow: hidden;
  background: var(--f-surface);
}

.modal-header {
  padding: var(--f-space-4) var(--f-space-5);
  border-bottom: 1px solid var(--f-divider);
  align-items: center;
}

.modal-title {
  font-size: var(--f-fs-md);
  font-weight: var(--f-fw-semibold);
  color: var(--f-ink-800);
  margin: 0;
}

.modal-header .close {
  margin: 0;
  padding: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--f-radius-sm);
  font-size: 22px;
  font-weight: 300;
  color: var(--f-text-4);
  opacity: 1;
  text-shadow: none;
  transition: background var(--f-dur-fast) var(--f-ease),
              color var(--f-dur-fast) var(--f-ease);
}

.modal-header .close:hover {
  background: var(--f-bg);
  color: var(--f-text);
  opacity: 1;
}

.modal-body {
  padding: var(--f-space-5);
  color: var(--f-text-2);
  font-size: var(--f-fs-base);
}

.modal-footer {
  padding: var(--f-space-3) var(--f-space-5);
  border-top: 1px solid var(--f-divider);
  gap: var(--f-space-2);
}

/* 次面底色只给「正规」footer —— 即作为弹窗外壳一部分、.modal-content 的直接子元素。
   ⚠️ 不要写成无差别的 .modal-footer{ background }：includes/pay.tpl 的
   .modal-footer 是整段 HTML 被 $("#pay .modal-body").html(data) 注入进
   .modal-body 内部的（骨架 includes/paymodal.tpl 自身没有 footer），
   给它铺底色会在弹窗底部留下一条空的灰色横条（实测底色 #F8FAFC + 上边框 #EEF2F7）。
   全主题其余 40+ 处 .modal-footer 都是 .modal-body 的兄弟节点，不受影响。 */
.modal-content > .modal-footer {
  background: var(--f-surface-alt);
}

.modal-footer .btn {
  min-width: 84px;
}

.modal-backdrop.show {
  opacity: .38;
}

/* =====================================================================
   8. 面包屑（.breadcrumb）
   ===================================================================== */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  background: transparent;
  font-size: var(--f-fs-sm);
  list-style: none;
}

.breadcrumb-item {
  color: var(--f-text-4);
}

.breadcrumb-item a {
  color: var(--f-text-3);
}

.breadcrumb-item a:hover {
  color: var(--f-primary-deep);
}

.breadcrumb-item + .breadcrumb-item {
  padding-left: var(--f-space-2);
}

.breadcrumb-item + .breadcrumb-item:before {
  content: "›";
  padding-right: var(--f-space-2);
  color: var(--f-text-4);
}

.breadcrumb-item.active {
  color: var(--f-primary-active);
}

/* =====================================================================
   9. 空状态（.no-data / .f-empty）
   ===================================================================== */
.no-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--f-space-3);
  min-height: 150px;
  padding: var(--f-space-8) 0;
  color: var(--f-text-4);
  font-size: var(--f-fs-base);
}

.f-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--f-space-3);
  padding: var(--f-space-12) var(--f-space-4);
  color: var(--f-text-4);
}

.f-empty__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--f-surface-alt);
  /* 空状态图标：原来用 --f-ink-300(#CBD5E1) 在 #F8FAFC 上只有 1.42:1，几乎看不见 */
  color: var(--f-text-3);
  font-size: 28px;
}

.f-empty__text {
  font-size: var(--f-fs-base);
  color: var(--f-text-4);
}

/* =====================================================================
   10. 标签页 / 导航（.nav-tabs / .nav-pills）
   ===================================================================== */
.nav-tabs {
  border-bottom: 1px solid var(--f-border);
  gap: var(--f-space-1);
}

.nav-tabs .nav-link {
  padding: var(--f-space-2) var(--f-space-4);
  border: 0;
  border-radius: var(--f-radius-sm) var(--f-radius-sm) 0 0;
  color: var(--f-text-3);
  font-size: var(--f-fs-base);
  font-weight: var(--f-fw-medium);
  transition: background var(--f-dur-fast) var(--f-ease),
              color var(--f-dur-fast) var(--f-ease);
}

.nav-tabs .nav-link:hover {
  color: var(--f-primary-active);
  background: var(--f-primary-50);
}

.nav-tabs .nav-link.active {
  color: var(--f-primary-active);
  background: var(--f-primary-50);
  border: 0;
}

.nav-tabs-custom .nav-link.active {
  color: var(--f-primary-active);
  background: var(--f-primary-50);
  border-bottom: 2px solid var(--f-primary);
}

.nav-pills .nav-link {
  padding: var(--f-space-2) var(--f-space-4);
  border-radius: var(--f-radius-sm);
  color: var(--f-text-3);
  font-size: var(--f-fs-base);
}

.nav-pills .nav-link:hover {
  background: var(--f-primary-50);
  color: var(--f-primary-active);
}

.nav-pills .nav-link.active {
  background: var(--f-primary-active);
  color: #fff;
}

.tab-content {
  padding-top: var(--f-space-4);
}

/* =====================================================================
   11. 下拉菜单（.dropdown-menu）
   ===================================================================== */
.dropdown-menu {
  padding: var(--f-space-1);
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius-md);
  box-shadow: var(--f-shadow-md);
  font-size: var(--f-fs-base);
}

.dropdown-item {
  padding: var(--f-space-2) var(--f-space-3);
  border-radius: var(--f-radius-sm);
  color: var(--f-text-2);
  font-size: var(--f-fs-base);
  transition: background var(--f-dur-fast) var(--f-ease),
              color var(--f-dur-fast) var(--f-ease);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--f-primary-50);
  color: var(--f-primary-active);
}

.dropdown-item.active,
.dropdown-item:active {
  background: var(--f-primary-active);
  color: #fff;
}

.dropdown-divider {
  margin: var(--f-space-1) 0;
  border-top: 1px solid var(--f-divider);
}

/* =====================================================================
   12. 提示框（.alert）与 toastr
   ===================================================================== */
.alert {
  padding: var(--f-space-3) var(--f-space-4);
  border: 1px solid transparent;
  border-radius: var(--f-radius-sm);
  font-size: var(--f-fs-base);
}

.alert-success {
  background: var(--f-success-bg);
  border-color: rgba(16, 185, 129, .25);
  color: var(--f-success-ink);
}

.alert-warning {
  background: var(--f-warning-bg);
  border-color: rgba(245, 166, 35, .25);
  color: var(--f-warning-ink);
}

.alert-danger {
  background: var(--f-danger-bg);
  border-color: rgba(239, 95, 108, .25);
  color: var(--f-danger-ink);
}

.alert-info {
  background: var(--f-info-bg);
  border-color: rgba(74, 143, 231, .25);
  color: var(--f-info-ink);
}

/* toastr 提示条：圆角浅底 */
#toast-container > div {
  border-radius: var(--f-radius-md) !important;
  box-shadow: var(--f-shadow-md) !important;
  opacity: 1 !important;
  padding: var(--f-space-3) var(--f-space-4) var(--f-space-3) 50px !important;
  font-size: var(--f-fs-base);
}

#toast-container > .toast-success {
  background-color: var(--f-success-bg) !important;
  color: var(--f-success-ink) !important;
  border-left: 3px solid var(--f-success);
}

#toast-container > .toast-error {
  background-color: var(--f-danger-bg) !important;
  color: var(--f-danger-ink) !important;
  border-left: 3px solid var(--f-danger);
}

#toast-container > .toast-info {
  background-color: var(--f-info-bg) !important;
  color: var(--f-info-ink) !important;
  border-left: 3px solid var(--f-accent);
}

#toast-container > .toast-warning {
  background-color: var(--f-warning-bg) !important;
  color: var(--f-warning-ink) !important;
  border-left: 3px solid var(--f-warning);
}

/* =====================================================================
   13. 杂项
   ===================================================================== */
/* 进度条 */
.progress {
  height: 8px;
  background: var(--f-ink-100);
  border-radius: var(--f-radius-pill);
  overflow: hidden;
}

.progress-bar {
  background: var(--f-primary);
  border-radius: var(--f-radius-pill);
  transition: width var(--f-dur-slow) var(--f-ease);
}

/* 列表组 */
.list-group-item {
  padding: var(--f-space-3) var(--f-space-4);
  border-color: var(--f-divider);
  color: var(--f-text-2);
  transition: background var(--f-dur-fast) var(--f-ease);
}

.list-group-item:hover {
  background: var(--f-bg-soft);
}

.list-group-item.active {
  background: var(--f-primary);
  border-color: var(--f-primary);
}

/* 工具提示 */
.tooltip-inner {
  padding: var(--f-space-1) var(--f-space-2);
  background: var(--f-ink-800);
  border-radius: var(--f-radius-xs);
  font-size: var(--f-fs-sm);
}

/* 代码块 / 预格式化 */
pre,
code {
  font-family: var(--f-font-num), Consolas, Monaco, monospace;
  font-size: var(--f-fs-sm);
}

pre {
  padding: var(--f-space-3) var(--f-space-4);
  background: var(--f-surface-alt);
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius-sm);
}

/* 波浪动效（waves）降噪 */
.waves-effect {
  -webkit-tap-highlight-color: transparent;
}