/* 2026-10-29 夜间模式全局修正：Element Plus 缺暗色变量 + Metronic 分页/工具类兜底 */
html[data-bs-theme="dark"] {
  --el-color-primary: #0891B2;
  --el-bg-color: #15171C;
  --el-bg-color-page: #0F1014;
  --el-bg-color-overlay: #1C1D22;
  --el-text-color-primary: #F5F5F5;
  --el-text-color-regular: #C9CBD3;
  --el-text-color-secondary: #9A9CAE;
  --el-text-color-placeholder: #6F7180;
  --el-text-color-disabled: #6F7180;
  --el-border-color: #363843;
  --el-border-color-light: #2A2C36;
  --el-border-color-lighter: #26272F;
  --el-border-color-extra-light: #1B1C22;
  --el-border-color-dark: #464852;
  --el-border-color-darker: #636674;
  --el-fill-color: #26272F;
  --el-fill-color-light: #1E1F26;
  --el-fill-color-lighter: #1B1C22;
  --el-fill-color-extra-light: #17181E;
  --el-fill-color-dark: #2F313C;
  --el-fill-color-darker: #363843;
  --el-fill-color-blank: #15171C;
  --el-mask-color: rgba(0, 0, 0, 0.8);
  --el-mask-color-extra-light: rgba(0, 0, 0, 0.3);
  --el-box-shadow: 0 12px 32px 4px rgba(0, 0, 0, 0.5);
  --el-box-shadow-light: 0 0 12px rgba(0, 0, 0, 0.5);
  --el-disabled-bg-color: #1B1C22;
  --el-disabled-text-color: #6F7180;
  --el-disabled-border-color: #26272F;
  --el-overlay-color-lighter: rgba(0, 0, 0, 0.7);
  --el-table-border-color: #26272F;
  --el-table-bg-color: transparent;
  --el-table-tr-bg-color: transparent;
  --el-table-header-bg-color: #1B1C22;
  --el-table-header-text-color: #C9CBD3;
  --el-table-text-color: #C9CBD3;
  --el-table-row-hover-bg-color: #26272F;
  --el-table-current-row-bg-color: #26272F;
}
/* Metronic 分页 */
html[data-bs-theme="dark"] .pagination .page-link { color: #B5B5C3; background-color: transparent; border-color: #363843; }
html[data-bs-theme="dark"] .pagination .page-link:hover { color: #F5F5F5; background-color: #26272F; }
html[data-bs-theme="dark"] .pagination .page-item.active .page-link { color: #fff; background-color: #0891B2; border-color: #0891B2; }
html[data-bs-theme="dark"] .pagination .page-item.disabled .page-link { color: #636674; background-color: transparent; border-color: #26272F; }
/* 工具类 */
html[data-bs-theme="dark"] .text-dark { color: #C9CBD3 !important; }
html[data-bs-theme="dark"] .bg-white { background-color: #15171C !important; }
html[data-bs-theme="dark"] .bg-light { background-color: #1B1C22 !important; }
html[data-bs-theme="dark"] .bg-body { background-color: #15171C !important; }
html[data-bs-theme="dark"] .table-light { --bs-table-bg: #1B1C22; --bs-table-color: #C9CBD3; }
html[data-bs-theme="dark"] .apexcharts-legend-text { color: #C9CBD3 !important; }
html[data-bs-theme="dark"] .apexcharts-text tspan { fill: #9A9CAE !important; }
/* Element Plus 组件兜底 */
html[data-bs-theme="dark"] .el-card { background-color: #15171C; border-color: #26272F; color: #C9CBD3; }
html[data-bs-theme="dark"] .el-input__wrapper,
html[data-bs-theme="dark"] .el-textarea__inner,
html[data-bs-theme="dark"] .el-select__wrapper { background-color: #1B1C22; box-shadow: 0 0 0 1px #363843 inset; color: #C9CBD3; }
html[data-bs-theme="dark"] .el-input__inner,
html[data-bs-theme="dark"] .el-textarea__inner { color: #C9CBD3; background-color: transparent; }
html[data-bs-theme="dark"] .el-input-group__prepend,
html[data-bs-theme="dark"] .el-input-group__append { background-color: #1B1C22; color: #9A9CAE; box-shadow: 0 0 0 1px #363843 inset; }
html[data-bs-theme="dark"] .el-table { background-color: transparent; color: #C9CBD3; }
html[data-bs-theme="dark"] .el-table th.el-table__cell { background-color: #1B1C22; color: #C9CBD3; }
html[data-bs-theme="dark"] .el-table tr { background-color: transparent; }
html[data-bs-theme="dark"] .el-table td.el-table__cell { border-color: #26272F; }
html[data-bs-theme="dark"] .el-table--border .el-table__cell { border-color: #26272F; }
html[data-bs-theme="dark"] .el-table__empty-block { background: transparent; }
html[data-bs-theme="dark"] .el-table__body tr:hover > td.el-table__cell { background-color: #26272F; }
html[data-bs-theme="dark"] .el-pagination { color: #C9CBD3; }
html[data-bs-theme="dark"] .el-pagination button,
html[data-bs-theme="dark"] .el-pager li { background: transparent !important; color: #C9CBD3 !important; }
html[data-bs-theme="dark"] .el-pager li.is-active { background: #0891B2 !important; color: #fff !important; border-radius: 4px; }
html[data-bs-theme="dark"] .el-dialog,
html[data-bs-theme="dark"] .el-message-box { background-color: #15171C; border-color: #26272F; color: #C9CBD3; }
html[data-bs-theme="dark"] .el-dialog__title,
html[data-bs-theme="dark"] .el-message-box__title { color: #F5F5F5; }
html[data-bs-theme="dark"] .el-dropdown-menu,
html[data-bs-theme="dark"] .el-select-dropdown,
html[data-bs-theme="dark"] .el-picker-panel { background-color: #1C1D22; border-color: #26272F; }
html[data-bs-theme="dark"] .el-dropdown-menu__item,
html[data-bs-theme="dark"] .el-select-dropdown__item { color: #C9CBD3; }
html[data-bs-theme="dark"] .el-dropdown-menu__item:hover,
html[data-bs-theme="dark"] .el-select-dropdown__item.hover,
html[data-bs-theme="dark"] .el-select-dropdown__item:hover { background-color: #26272F; }
html[data-bs-theme="dark"] .el-form-item__label { color: #C9CBD3; }
html[data-bs-theme="dark"] .el-tag { --el-tag-bg-color: #26272F; border-color: transparent; }
html[data-bs-theme="dark"] .el-loading-mask { background-color: rgba(15, 16, 20, 0.8); }

/* 灰度文字工具类：dark 下 Metronic 的 gray 变量会翻成深色，导致 text-gray-400/500/600 看不清 */
html[data-bs-theme="dark"] .text-gray-300 { color: #8A8D9C !important; }
html[data-bs-theme="dark"] .text-gray-400 { color: #9A9CAE !important; }
html[data-bs-theme="dark"] .text-gray-500 { color: #B5B5C3 !important; }
html[data-bs-theme="dark"] .text-gray-600 { color: #C9CBD3 !important; }
/* Element Plus 按钮（站内主题把 primary 弄成淡底色，dark 下改回实心主色） */
html[data-bs-theme="dark"] .el-button--primary:not(.is-plain):not(.is-text):not(.is-link) { background-color: #0891B2; border-color: #0891B2; color: #fff; }
html[data-bs-theme="dark"] .el-button--success:not(.is-plain):not(.is-text):not(.is-link) { background-color: #1F9E5C; border-color: #1F9E5C; color: #fff; }
html[data-bs-theme="dark"] .el-button--warning:not(.is-plain):not(.is-text):not(.is-link) { background-color: #C77E12; border-color: #C77E12; color: #fff; }
html[data-bs-theme="dark"] .el-button--danger:not(.is-plain):not(.is-text):not(.is-link) { background-color: #C93B3B; border-color: #C93B3B; color: #fff; }
html[data-bs-theme="dark"] .text-charcoal { color: #C9CBD3 !important; }
/* kdb_sport（内嵌子应用 #root）白底 surface */
html[data-bs-theme="dark"] #root {
  --pf-surface: #15171C;
  --pf-surface-soft: #1B1C22;
  --pf-border: #26272F;
  --pf-text: #F5F5F5;
  --pf-text-sub: #9A9CAE;
  --pf-primary-soft: #0E3A42;
}
html[data-bs-theme="dark"] #root input,
html[data-bs-theme="dark"] #root select,
html[data-bs-theme="dark"] #root textarea { background: #1B1C22 !important; border-color: #363843 !important; color: #C9CBD3 !important; }
html[data-bs-theme="dark"] #root thead th { background: #1B1C22 !important; color: #C9CBD3 !important; border-bottom-color: #26272F !important; }
html[data-bs-theme="dark"] section#sport-reservations,
html[data-bs-theme="dark"] #sport-reservations header.sticky,
html[data-bs-theme="dark"] #sport-reservations .bg-surface { background-color: #15171C !important; color: #C9CBD3 !important; }

/* kdb_sport 内嵌子应用：白底按钮/卡片 */
html[data-bs-theme="dark"] #sport-reservations { background-color: #0F1014 !important; }
html[data-bs-theme="dark"] #sport-reservations .rounded-2xl,
html[data-bs-theme="dark"] #sport-reservations button,
html[data-bs-theme="dark"] #sport-reservations input { background-color: #15171C !important; color: #C9CBD3 !important; border-color: #26272F !important; }
/* Element Plus plain 按钮（暗色下改透明底 + 主题色描边） */
html[data-bs-theme="dark"] .el-button--primary.is-plain { background-color: transparent; border-color: #0891B2; color: #7DD3E8; }
html[data-bs-theme="dark"] .el-button--success.is-plain { background-color: transparent; border-color: #1F9E5C; color: #7ED9A6; }
html[data-bs-theme="dark"] .el-button--warning.is-plain { background-color: transparent; border-color: #C77E12; color: #F0C479; }

html[data-bs-theme="dark"] #root button.rounded-2xl,
html[data-bs-theme="dark"] #sport-reservations ~ * button.rounded-2xl,
html[data-bs-theme="dark"] button.text-left.rounded-2xl { background-color: #15171C !important; color: #C9CBD3 !important; border-color: #26272F !important; }