/**
 * web-admin 全局主题（对齐 life-script 视觉风格）
 *
 * 目标：
 * - 深色基底 + 玻璃拟态（glassmorphism）
 * - 橙/蓝点缀色（accent）
 * - 更大的圆角、更柔和的阴影、更一致的 hover/active 反馈
 *
 * 说明：
 * - 仅做样式覆盖，不涉及任何业务逻辑与交互行为变更
 * - 通过 CSS Variables 覆盖 Element Plus 主题变量，并对常用 el-* 组件做全局外观微调
 */

/* 使用国内镜像加载字体，避免 Google Fonts 访问超时（与 life-script 保持一致） */
@import url('https://fonts.loli.net/css2?family=Noto+Serif+SC:wght@300;600&family=Noto+Sans+SC:wght@300;400;500&display=swap');

:root {
  /* ====== life-script tokens ====== */
  --ls-bg: #0a0c10;
  --ls-text: #e2e8f0;
  --ls-text-muted: rgba(226, 232, 240, 0.7);

  --ls-glass-bg: rgba(15, 17, 26, 0.4);
  --ls-glass-bg-strong: rgba(15, 17, 26, 0.55);
  --ls-glass-border: rgba(255, 255, 255, 0.08);
  --ls-glass-border-strong: rgba(255, 255, 255, 0.14);
  --ls-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.5);

  --ls-accent-orange: #ffab91;
  --ls-accent-blue: #81d4fa;

  --ls-radius-xl: 32px;
  --ls-radius-lg: 20px;
  --ls-radius-md: 16px;

  /* ====== Element Plus theme overrides（尽量使用官方变量名）====== */
  --el-color-primary: var(--ls-accent-orange);
  --el-color-success: #67c23a;
  --el-color-warning: #e6a23c;
  --el-color-danger: #f56c6c;
  --el-color-info: var(--ls-accent-blue);

  --el-bg-color: var(--ls-bg);
  --el-bg-color-overlay: var(--ls-glass-bg-strong);
  /**
   * Element Plus 填充色：
   * - 避免“白底控件”的观感，统一使用偏黑的玻璃面
   */
  --el-fill-color-blank: rgba(15, 17, 26, 0.28);
  --el-fill-color-light: rgba(15, 17, 26, 0.34);
  --el-fill-color: rgba(15, 17, 26, 0.40);
  --el-fill-color-dark: rgba(15, 17, 26, 0.46);

  --el-text-color-primary: var(--ls-text);
  --el-text-color-regular: rgba(226, 232, 240, 0.85);
  --el-text-color-secondary: rgba(226, 232, 240, 0.7);
  --el-text-color-placeholder: rgba(226, 232, 240, 0.45);
  --el-border-color: var(--ls-glass-border);
  --el-border-color-light: rgba(255, 255, 255, 0.06);
  --el-border-color-lighter: rgba(255, 255, 255, 0.05);
  --el-border-color-extra-light: rgba(255, 255, 255, 0.04);

  --el-border-radius-base: var(--ls-radius-md);
  --el-border-radius-round: 999px;
  --el-box-shadow-light: var(--ls-shadow);

  /**
   * Loading 遮罩层颜色（避免 v-loading 出现白色遮罩闪动）
   * Element Plus 内部会使用该变量作为 mask 背景色
   */
  --el-mask-color: rgba(10, 12, 16, 0.55);
  --el-mask-color-extra-light: rgba(10, 12, 16, 0.35);
}

* {
  box-sizing: border-box;
}

html,
body,
#app {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--ls-text);
  background-color: var(--ls-bg);
}

.font-serif {
  font-family: 'Noto Serif SC', serif;
}

/* ====== 背景层（给整个后台一个 life-script 风格的氛围底）====== */
#app {
  background:
    radial-gradient(1200px 800px at 10% 20%, rgba(255, 171, 145, 0.12), transparent 55%),
    radial-gradient(900px 700px at 90% 10%, rgba(129, 212, 250, 0.10), transparent 50%),
    radial-gradient(900px 700px at 70% 90%, rgba(255, 171, 145, 0.08), transparent 50%),
    var(--ls-bg);
}

/* ====== 通用 glass 外观（与 life-script 对齐）====== */
.glass-card,
.el-card,
.el-dialog,
.el-message-box,
.el-drawer {
  background: var(--ls-glass-bg) !important;
  border: 1px solid var(--ls-glass-border) !important;
  border-radius: var(--ls-radius-xl) !important;
  box-shadow: var(--ls-shadow) !important;
  backdrop-filter: blur(25px) saturate(180%);
  -webkit-backdrop-filter: blur(25px) saturate(180%);
}

.el-card__header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* ====== 按钮（玻璃按钮/强调按钮）====== */
.glass-btn,
.el-button {
  background: rgba(15, 17, 26, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--ls-text);
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.el-button:hover,
.glass-btn:hover {
  background: rgba(15, 17, 26, 0.25);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-2px);
}

.el-button:active,
.glass-btn:active {
  transform: scale(0.98);
}

.el-button.is-disabled,
.el-button.is-disabled:hover {
  opacity: 0.5;
  transform: none;
}

/* primary：用 life-script 的橙色作为主强调 */
.el-button--primary {
  background: rgba(255, 171, 145, 0.14) !important;
  border-color: rgba(255, 171, 145, 0.35) !important;
  color: var(--ls-accent-orange) !important;
}
.el-button--primary:hover {
  background: var(--ls-accent-orange) !important;
  color: #000 !important;
  border-color: var(--ls-accent-orange) !important;
}

/* link 按钮在深色底上更清晰 */
.el-button.is-link {
  background: transparent !important;
  border-color: transparent !important;
}
.el-button.is-link:hover {
  background: rgba(255, 171, 145, 0.08) !important;
  border-color: rgba(255, 171, 145, 0.12) !important;
}

/* ====== 输入框（glass-input 风格）====== */
.glass-input,
.el-input__wrapper,
.el-textarea__inner {
  background: rgba(0, 0, 0, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: var(--ls-radius-md) !important;
  color: var(--ls-text) !important;
  box-shadow: none !important;
}

.el-input__wrapper.is-focus,
.el-textarea__inner:focus {
  border-color: rgba(255, 171, 145, 0.55) !important;
  box-shadow: 0 0 20px rgba(255, 171, 145, 0.10) !important;
}

.el-input__inner::placeholder,
.el-textarea__inner::placeholder {
  color: rgba(255, 255, 255, 0.35) !important;
}

/**
 * 浏览器自动填充（尤其登录页）可能将输入框渲染为浅色/白底：
 * - 强制覆盖为深色玻璃背景，避免出现白底
 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ls-text) !important;
  box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.25) inset !important;
  -webkit-box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.25) inset !important;
  transition: background-color 9999s ease-out 0s;
}

/* ====== Tabs（border-card 默认面板偏白，统一改为深色玻璃）====== */
.el-tabs--border-card {
  background: var(--ls-glass-bg) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: var(--ls-radius-xl) !important;
  overflow: hidden;
}

.el-tabs--border-card > .el-tabs__header {
  background: rgba(15, 17, 26, 0.35) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.el-tabs--border-card > .el-tabs__header .el-tabs__item {
  color: rgba(226, 232, 240, 0.75) !important;
}

.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  color: var(--ls-accent-orange) !important;
}

.el-tabs__nav-wrap::after {
  background-color: rgba(255, 255, 255, 0.06) !important;
}

.el-tabs__content {
  background: transparent !important;
}

/* ====== Popper/Dropdown/Select/DatePicker 面板（避免白底）====== */
.el-popper,
.el-popper.is-light,
.el-select__popper,
.el-dropdown__popper,
.el-autocomplete__popper,
.el-tooltip__popper,
.el-picker__popper {
  background: rgba(15, 17, 26, 0.72) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  backdrop-filter: blur(25px) saturate(180%);
  -webkit-backdrop-filter: blur(25px) saturate(180%);
}

.el-popper__arrow::before {
  background: rgba(15, 17, 26, 0.72) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
}

.el-select-dropdown__item,
.el-dropdown-menu__item {
  color: rgba(226, 232, 240, 0.85) !important;
}

.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover,
.el-dropdown-menu__item:hover {
  background: rgba(255, 171, 145, 0.10) !important;
}

.el-select-dropdown__item.selected {
  color: var(--ls-accent-orange) !important;
}

/* ====== Loading（全站 v-loading 去白底闪动）====== */
/**
 * 适用场景：
 * - el-row / el-table / el-card 等容器上 v-loading
 * - ElLoading service 全屏 loading
 *
 * 目标：
 * - 遮罩层使用深色玻璃拟态，不出现白色闪动
 * - spinner 与文字使用主题色，观感统一
 */
.el-loading-mask {
  background-color: var(--el-mask-color) !important;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}

.el-loading-spinner .el-loading-text {
  color: rgba(226, 232, 240, 0.85) !important;
}

.el-loading-spinner .path {
  stroke: var(--ls-accent-orange) !important;
}

.el-loading-spinner i {
  color: var(--ls-accent-orange) !important;
}

/* ====== Skeleton（避免骨架屏浅色块）====== */
.el-skeleton {
  --el-skeleton-color: rgba(15, 17, 26, 0.40);
  --el-skeleton-to-color: rgba(15, 17, 26, 0.55);
}

.el-skeleton__item {
  background: rgba(15, 17, 26, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--ls-radius-md);
}

/* ====== 表格/分页（深色玻璃）====== */
.el-table {
  background: transparent !important;
  color: var(--ls-text) !important;
}
.el-table th.el-table__cell {
  background: rgba(255, 255, 255, 0.03) !important;
  color: rgba(226, 232, 240, 0.85) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.el-table td.el-table__cell {
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}
.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  background: rgba(255, 255, 255, 0.02) !important;
}
.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
  background: rgba(255, 171, 145, 0.06) !important;
}

.el-pagination {
  color: rgba(226, 232, 240, 0.85) !important;
}

/* ====== 弹窗（对话框/MessageBox）====== */
.el-dialog__header {
  margin-right: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.el-dialog__title {
  color: var(--ls-text) !important;
}

/* ====== Tag/Statistic 等小组件可读性 ====== */
.el-tag {
  /**
   * Tag 在深色玻璃主题下默认背景会偏亮，导致“白底字段”观感：
   * - 统一改为深色玻璃底
   * - 不同 type 使用对应色系做文字/边框强调
   */
  background: rgba(15, 17, 26, 0.38) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  color: rgba(226, 232, 240, 0.85) !important;
}

/* Tag 颜色语义：保持可读性与 life-script 点缀风格一致 */
.el-tag--primary {
  background: rgba(255, 171, 145, 0.12) !important;
  border-color: rgba(255, 171, 145, 0.28) !important;
  color: var(--ls-accent-orange) !important;
}

.el-tag--success {
  background: rgba(103, 194, 58, 0.12) !important;
  border-color: rgba(103, 194, 58, 0.28) !important;
  color: rgba(199, 255, 176, 0.95) !important;
}

.el-tag--warning {
  background: rgba(230, 162, 60, 0.12) !important;
  border-color: rgba(230, 162, 60, 0.28) !important;
  color: rgba(255, 220, 160, 0.95) !important;
}

.el-tag--danger {
  background: rgba(245, 108, 108, 0.12) !important;
  border-color: rgba(245, 108, 108, 0.30) !important;
  color: rgba(255, 190, 190, 0.95) !important;
}

.el-tag--info {
  background: rgba(129, 212, 250, 0.10) !important;
  border-color: rgba(129, 212, 250, 0.26) !important;
  color: var(--ls-accent-blue) !important;
}

/* plain 模式也避免浅底 */
.el-tag.is-plain {
  background: rgba(15, 17, 26, 0.28) !important;
}

/* ====== Descriptions（详情展示默认也可能偏白）====== */
.el-descriptions,
.el-descriptions__body,
.el-descriptions__table {
  background: transparent !important;
  color: var(--ls-text) !important;
}

.el-descriptions__cell {
  background: rgba(15, 17, 26, 0.24) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
  color: rgba(226, 232, 240, 0.85) !important;
}

.el-descriptions__label {
  color: rgba(226, 232, 240, 0.65) !important;
}

.el-descriptions__content {
  color: rgba(226, 232, 240, 0.90) !important;
}
.el-statistic__head {
  color: rgba(226, 232, 240, 0.7) !important;
}
.el-statistic__content {
  color: var(--ls-text) !important;
}

/* ====== 滚动条（与 life-script 接近）====== */
*::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.15);
}