/* ============================================================
   全局主题令牌（Web）
   ------------------------------------------------------------
   #28 主题选择界面：与小程序 `miniprogram/utils/theme.js` 同名同源，
   Web 端额外提供「经典浅色 light」作为默认主题（办公场景长读更友好）。

   变量前缀 --app-*（--ts-* 是 table-sticky 专用、--la* 是 login 专用、
   --th-* 是 invoice_hub 页内专用，互不冲突）。

   用法：
     1. <html> 的 data-theme 属性切主题（theme-core.js 维护）
     2. 组件样式只引用变量，不写死色值 —— 新增主题只需在本文件追加一块
   ============================================================ */

:root,
html[data-theme="light"] {
  /* 品牌 */
  --app-primary: #2563EB;
  --app-primary-dark: #1D4ED8;
  --app-primary-soft: #EFF6FF;
  --app-primary-border: #BFDBFE;
  /* 底色层 */
  --app-bg: #F8FAFC;
  --app-surface: #FFFFFF;
  --app-surface-2: #F1F5F9;
  /* 文字 */
  --app-text: #0F172A;
  --app-text-2: #475569;
  --app-text-3: #94A3B8;
  /* 线条与阴影 */
  --app-border: #E2E8F0;
  --app-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .04);
  --app-shadow-hover: 0 4px 12px rgba(37, 99, 235, .10), 0 2px 4px rgba(15, 23, 42, .06);
  /* 导航栏 */
  --app-navbar: #2563EB;
  --app-navbar-text: #FFFFFF;
  /* 语义色（仅用于状态，不作装饰） */
  --app-ok: #059669;
  --app-warn: #D97706;
  --app-danger: #DC2626;
}

/* ---------- 深空科技（与小程序 cyber 同源） ---------- */
html[data-theme="cyber"] {
  --app-primary: #38BDF8;
  --app-primary-dark: #0EA5E9;
  --app-primary-soft: rgba(56, 189, 248, .12);
  --app-primary-border: rgba(56, 189, 248, .35);
  --app-bg: #070B14;
  --app-surface: #0C1220;
  --app-surface-2: #111A2E;
  --app-text: #E2E8F0;
  --app-text-2: #94A3B8;
  --app-text-3: #64748B;
  --app-border: #1E2A44;
  --app-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 2px 8px rgba(56, 189, 248, .06);
  --app-shadow-hover: 0 4px 16px rgba(56, 189, 248, .16), 0 2px 6px rgba(0, 0, 0, .4);
  --app-navbar: #0A1222;
  --app-navbar-text: #E2E8F0;
  --app-ok: #34D399;
  --app-warn: #FBBF24;
  --app-danger: #F87171;
}

/* ---------- 曜石商务（与小程序 obsidian 同源） ---------- */
html[data-theme="obsidian"] {
  --app-primary: #A78BFA;
  --app-primary-dark: #8B5CF6;
  --app-primary-soft: rgba(167, 139, 250, .12);
  --app-primary-border: rgba(167, 139, 250, .35);
  --app-bg: #0A0C14;
  --app-surface: #10121C;
  --app-surface-2: #171A28;
  --app-text: #E4E2F0;
  --app-text-2: #9A96B4;
  --app-text-3: #6B6784;
  --app-border: #262A40;
  --app-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 8px rgba(124, 58, 237, .08);
  --app-shadow-hover: 0 4px 16px rgba(124, 58, 237, .18), 0 2px 6px rgba(0, 0, 0, .45);
  --app-navbar: #0D0F1A;
  --app-navbar-text: #E4E2F0;
  --app-ok: #34D399;
  --app-warn: #FBBF24;
  --app-danger: #F87171;
}

/* ---------- 深海幽蓝（与小程序 abyss 同源） ---------- */
html[data-theme="abyss"] {
  --app-primary: #2DD4BF;
  --app-primary-dark: #14B8A6;
  --app-primary-soft: rgba(45, 212, 191, .12);
  --app-primary-border: rgba(45, 212, 191, .35);
  --app-bg: #04121A;
  --app-surface: #071C28;
  --app-surface-2: #0B2636;
  --app-text: #DCEFED;
  --app-text-2: #8FB4B8;
  --app-text-3: #5E8288;
  --app-border: #143444;
  --app-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 8px rgba(13, 148, 136, .08);
  --app-shadow-hover: 0 4px 16px rgba(13, 148, 136, .2), 0 2px 6px rgba(0, 0, 0, .45);
  --app-navbar: #05202C;
  --app-navbar-text: #DCEFED;
  --app-ok: #34D399;
  --app-warn: #FBBF24;
  --app-danger: #F87171;
}

/* ---------- 暗夜琥珀（与小程序 solar 同源） ---------- */
html[data-theme="solar"] {
  --app-primary: #FBBF24;
  --app-primary-dark: #F59E0B;
  --app-primary-soft: rgba(251, 191, 36, .12);
  --app-primary-border: rgba(251, 191, 36, .35);
  --app-bg: #120D08;
  --app-surface: #1A130B;
  --app-surface-2: #241A10;
  --app-text: #F1E8DC;
  --app-text-2: #B5A48E;
  --app-text-3: #7D6D58;
  --app-border: #38291A;
  --app-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 8px rgba(234, 88, 12, .08);
  --app-shadow-hover: 0 4px 16px rgba(234, 88, 12, .2), 0 2px 6px rgba(0, 0, 0, .45);
  --app-navbar: #171008;
  --app-navbar-text: #F1E8DC;
  --app-ok: #34D399;
  --app-warn: #FBBF24;
  --app-danger: #F87171;
}

/* ============================================================
   组件换肤：只引用令牌，页面零改动即整体切换
   ============================================================ */

/* 画布与正文 */
body {
  background-color: var(--app-bg);
  color: var(--app-text);
}

/* 导航栏 */
.navbar.bg-primary {
  background-color: var(--app-navbar) !important;
}
.navbar-dark .navbar-brand,
.navbar-dark .navbar-nav .nav-link {
  color: var(--app-navbar-text);
}
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover {
  color: var(--app-navbar-text);
  opacity: 1;
}

/* 卡片 / 面板 */
.card {
  background-color: var(--app-surface);
  color: var(--app-text);
  border-color: var(--app-border);
  box-shadow: var(--app-shadow);
}
.card-header,
.card-footer {
  background-color: var(--app-surface-2);
  color: var(--app-text);
  border-color: var(--app-border);
}

/* 表格 */
.table {
  color: var(--app-text);
  border-color: var(--app-border);
}
.table > :not(caption) > * > * {
  background-color: transparent;
  color: var(--app-text);
  border-color: var(--app-border);
}
.table-hover > tbody > tr:hover > * {
  background-color: var(--app-surface-2);
  color: var(--app-text);
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: var(--app-surface-2);
}
thead.table-light th {
  background-color: var(--app-surface-2) !important;
  color: var(--app-text-2) !important;
}

/* 表单控件 */
.form-control,
.form-select {
  background-color: var(--app-surface);
  color: var(--app-text);
  border-color: var(--app-border);
}
.form-control:focus,
.form-select:focus {
  background-color: var(--app-surface);
  color: var(--app-text);
  border-color: var(--app-primary);
  box-shadow: 0 0 0 .2rem var(--app-primary-soft);
}
.form-control::placeholder {
  color: var(--app-text-3);
}
.form-check-input {
  background-color: var(--app-surface);
  border-color: var(--app-border);
}
.form-check-input:checked {
  background-color: var(--app-primary);
  border-color: var(--app-primary);
}
.input-group-text {
  background-color: var(--app-surface-2);
  color: var(--app-text-2);
  border-color: var(--app-border);
}

/* 按钮 */
.btn-primary {
  background-color: var(--app-primary);
  border-color: var(--app-primary);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--app-primary-dark);
  border-color: var(--app-primary-dark);
}
.btn-outline-primary {
  color: var(--app-primary);
  border-color: var(--app-primary);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--app-primary);
  border-color: var(--app-primary);
  color: var(--app-surface);
}
.btn-light {
  background-color: var(--app-surface-2);
  border-color: var(--app-border);
  color: var(--app-text);
}
.btn-light:hover {
  background-color: var(--app-border);
  border-color: var(--app-border);
  color: var(--app-text);
}

/* 页签 */
.nav-tabs {
  border-bottom-color: var(--app-border);
}
.nav-tabs .nav-link {
  color: var(--app-text-2);
}
.nav-tabs .nav-link:hover {
  color: var(--app-primary);
  border-color: var(--app-border) var(--app-border) transparent;
}
.nav-tabs .nav-link.active {
  background-color: var(--app-surface);
  color: var(--app-primary);
  border-color: var(--app-border) var(--app-border) var(--app-surface);
}
.nav-pills .nav-link {
  color: var(--app-text-2);
}
.nav-pills .nav-link.active {
  background-color: var(--app-primary);
  color: var(--app-surface);
}

/* 徽标 */
.badge.bg-primary {
  background-color: var(--app-primary) !important;
}
.badge.bg-light {
  background-color: var(--app-surface-2) !important;
  color: var(--app-text-2) !important;
  border: 1px solid var(--app-border);
}
.badge.bg-dark {
  background-color: var(--app-text) !important;
  color: var(--app-surface) !important;
}

/* 弹窗 / 下拉 / 折叠 */
.modal-content {
  background-color: var(--app-surface);
  color: var(--app-text);
  border-color: var(--app-border);
}
.modal-header,
.modal-footer {
  border-color: var(--app-border);
}
.dropdown-menu {
  background-color: var(--app-surface);
  border-color: var(--app-border);
}
.dropdown-item {
  color: var(--app-text);
}
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--app-surface-2);
  color: var(--app-text);
}
.accordion-item {
  background-color: var(--app-surface);
  color: var(--app-text);
  border-color: var(--app-border);
}
.accordion-button {
  background-color: var(--app-surface-2);
  color: var(--app-text);
}
.accordion-button:not(.collapsed) {
  background-color: var(--app-primary-soft);
  color: var(--app-primary-dark);
}
.accordion-body {
  background-color: var(--app-surface);
  color: var(--app-text);
}
.list-group-item {
  background-color: var(--app-surface);
  color: var(--app-text);
  border-color: var(--app-border);
}

/* 提示条与文字 */
.alert {
  color: var(--app-text);
  border-color: var(--app-border);
}
.alert-info {
  background-color: var(--app-primary-soft);
  color: var(--app-text);
}
.alert-warning {
  background-color: color-mix(in srgb, var(--app-warn) 15%, var(--app-surface));
  color: var(--app-text);
  border-color: color-mix(in srgb, var(--app-warn) 35%, var(--app-border));
}
.alert-danger {
  background-color: color-mix(in srgb, var(--app-danger) 15%, var(--app-surface));
  color: var(--app-text);
  border-color: color-mix(in srgb, var(--app-danger) 35%, var(--app-border));
}
.text-muted {
  color: var(--app-text-3) !important;
}
a {
  color: var(--app-primary);
}
a:hover {
  color: var(--app-primary-dark);
}

/* 分页 / 进度 */
.pagination .page-link {
  background-color: var(--app-surface);
  color: var(--app-primary);
  border-color: var(--app-border);
}
.pagination .page-item.active .page-link {
  background-color: var(--app-primary);
  border-color: var(--app-primary);
  color: var(--app-surface);
}
.progress {
  background-color: var(--app-surface-2);
}

/* 深色主题下统一处理 img/阴影背景，避免白块刺眼 */
html[data-theme="cyber"] .table > :not(caption) > * > *,
html[data-theme="obsidian"] .table > :not(caption) > * > *,
html[data-theme="abyss"] .table > :not(caption) > * > *,
html[data-theme="solar"] .table > :not(caption) > * > * {
  box-shadow: none;
}
html[data-theme="cyber"] .card-img-top,
html[data-theme="obsidian"] .card-img-top,
html[data-theme="abyss"] .card-img-top,
html[data-theme="solar"] .card-img-top {
  background-color: var(--app-surface-2);
}

/* 深色主题下的滚动条 */
html[data-theme="cyber"] ::-webkit-scrollbar-track,
html[data-theme="obsidian"] ::-webkit-scrollbar-track,
html[data-theme="abyss"] ::-webkit-scrollbar-track,
html[data-theme="solar"] ::-webkit-scrollbar-track {
  background: var(--app-bg);
}
html[data-theme="cyber"] ::-webkit-scrollbar-thumb,
html[data-theme="obsidian"] ::-webkit-scrollbar-thumb,
html[data-theme="abyss"] ::-webkit-scrollbar-thumb,
html[data-theme="solar"] ::-webkit-scrollbar-thumb {
  background: var(--app-border);
  border-radius: 6px;
}