/* ==========================================================================
   XBOSS 深空暗色金融主题 (Dark Fintech) — 方案B
   2026-08-03 用户选定，全局生效
   深蓝黑底 + 霓虹青强调 + 金额高可读，盯盘/夜间监控友好
   ========================================================================== */

/* ---------- 1. 根变量覆盖（light 槽位直接换暗色值，全局单一主题） ---------- */
:root,
html.dark,
html[data-xb-theme] {
  --background: 226 36% 7%;        /* #0b0e17 深空蓝黑 */
  --foreground: 222 44% 95%;       /* #eef1f8 */
  --card: 226 34% 11%;             /* #121625 */
  --card-foreground: 222 44% 95%;
  --popover: 227 32% 12%;
  --popover-foreground: 222 44% 95%;
  --primary: 199 93% 60%;          /* #38bdf8 霓虹青 */
  --primary-foreground: 226 40% 8%;
  --secondary: 226 25% 16%;
  --secondary-foreground: 222 30% 90%;
  --muted: 226 22% 14%;
  --muted-foreground: 222 15% 62%;
  --accent: 215 32% 19%;
  --accent-foreground: 222 44% 95%;
  --border: 226 25% 22%;
  --input: 226 25% 24%;
  --ring: 199 93% 60%;
  --success: 160 65% 52%;          /* #34d399 */
  --warning: 45 97% 56%;           /* #fbbf24 */
  --destructive: 0 91% 71%;        /* #f87171 */
  --destructive-foreground: 0 0% 100%;
  --info: 217 85% 65%;
  --chart-1: 199 93% 60%;
  --chart-2: 160 65% 52%;
  --chart-3: 45 97% 56%;
  --chart-4: 266 80% 70%;
  --chart-5: 340 80% 68%;
  --sidebar-background: 227 35% 9%;
  --sidebar-foreground: 222 20% 80%;
  --sidebar-primary: 199 93% 60%;
  --sidebar-accent: 215 35% 17%;
  --sidebar-border: 226 25% 18%;
  --radius: 0.6rem;
}

/* ---------- 2. 基础底色与滚动条 ---------- */
html, body {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}
::selection { background: hsl(var(--primary) / .3); }
* { scrollbar-width: thin; scrollbar-color: hsl(var(--border)) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: hsl(var(--border)); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground) / .5); }
*::-webkit-scrollbar-track { background: transparent; }

/* ---------- 3. Tailwind 硬编码浅色类兜底（SPA 页面残留） ---------- */
.bg-white   { background-color: hsl(var(--card)) !important; }
.bg-gray-50, .bg-slate-50   { background-color: hsl(var(--muted) / .55) !important; }
.bg-gray-100, .bg-slate-100 { background-color: hsl(var(--muted)) !important; }
.bg-gray-200, .bg-slate-200 { background-color: hsl(var(--accent)) !important; }

.text-gray-900, .text-slate-900,
.text-gray-800, .text-slate-800,
.text-gray-700, .text-slate-700 { color: hsl(var(--foreground)) !important; }
.text-gray-600, .text-slate-600 { color: hsl(222 15% 72%) !important; }
.text-gray-500, .text-slate-500,
.text-gray-400, .text-slate-400 { color: hsl(var(--muted-foreground)) !important; }

.border-gray-100, .border-slate-100,
.border-gray-200, .border-slate-200,
.border-gray-300, .border-slate-300 { border-color: hsl(var(--border)) !important; }
.divide-gray-100 > * + *, .divide-gray-200 > * + *,
.divide-slate-100 > * + *, .divide-slate-200 > * + * { border-color: hsl(var(--border)) !important; }

/* 浅色语义底徽章 → 深色半透明底 */
.bg-blue-50   { background-color: rgb(56 189 248 / .12) !important; }
.bg-green-50, .bg-emerald-50 { background-color: rgb(52 211 153 / .12) !important; }
.bg-yellow-50, .bg-amber-50  { background-color: rgb(251 191 36 / .12) !important; }
.bg-red-50, .bg-rose-50      { background-color: rgb(248 113 113 / .12) !important; }
.bg-purple-50, .bg-violet-50 { background-color: rgb(167 139 250 / .12) !important; }
.bg-orange-50 { background-color: rgb(251 146 60 / .12) !important; }

/* 悬停浅色 → 暗色悬停 */
.hover\:bg-gray-50:hover, .hover\:bg-gray-100:hover,
.hover\:bg-slate-50:hover, .hover\:bg-slate-100:hover { background-color: hsl(var(--accent)) !important; }

/* ---------- 4. 组件细节打磨 ---------- */
/* 主按钮微发光 */
button.bg-primary,
.btn-primary,
[data-slot="button"].bg-primary {
  box-shadow: 0 0 16px hsl(var(--primary) / .22);
}
button.bg-primary:hover { box-shadow: 0 0 22px hsl(var(--primary) / .38); }

/* 表格行悬停 */
tr.hover\:bg-gray-50:hover, tr.hover\:bg-slate-50:hover,
tbody tr:hover { background-color: hsl(var(--accent) / .55); }
thead th { background-color: hsl(var(--muted) / .7); color: hsl(var(--muted-foreground)); }

/* 输入框聚焦 */
input:focus, select:focus, textarea:focus { outline: none; }

/* 浏览器自动填充在暗底下的黄底问题 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: hsl(var(--foreground));
  -webkit-box-shadow: 0 0 0 1000px hsl(var(--card)) inset;
  transition: background-color 9999s ease-in-out 0s;
}

/* 阴影在暗色下几乎不可见，统一换成暗色投影 */
.shadow-sm, .shadow, .shadow-md, .shadow-lg {
  box-shadow: 0 2px 12px rgb(0 0 0 / .35) !important;
}

/* 卡片边框可辨识度 */
.rounded-xl, .rounded-lg, .rounded-2xl { border-color: hsl(var(--border)); }

/* ---------- 5. 注入页硬编码浅色适配 ---------- */
/* 订单核对行底色：浅绿/浅红 → 暗底半透明（保持高对比可辨识） */
tr.xb-order-reviewed--received > td { background-color: rgb(5 150 105 / .16) !important; }
tr.xb-order-reviewed--received:hover > td { background-color: rgb(5 150 105 / .28) !important; }
tr.xb-order-reviewed--not-received > td { background-color: rgb(220 38 38 / .18) !important; }
tr.xb-order-reviewed--not-received:hover > td { background-color: rgb(220 38 38 / .3) !important; }
tr.xb-order-reviewed--received > td:first-child { box-shadow: inset 4px 0 0 #34d399 !important; }
tr.xb-order-reviewed--not-received > td:first-child { box-shadow: inset 4px 0 0 #f87171 !important; }

/* 核销页支付方式徽章：浅底 → 暗底半透明 */
.xb-v-pay-method--alipay { border-color: rgb(56 189 248 / .35) !important; color: #7dd3fc !important; background: rgb(56 189 248 / .1) !important; }
.xb-v-pay-method--wechat { border-color: rgb(52 211 153 / .35) !important; color: #6ee7b7 !important; background: rgb(52 211 153 / .1) !important; }
.xb-v-pay-method--other { border-color: hsl(var(--border)) !important; color: hsl(var(--muted-foreground)) !important; background: hsl(var(--muted)) !important; }

/* 核销页卡片/面板阴影在暗底下加深 */
.xb-v-person-row, .xb-v-card { box-shadow: 0 2px 10px rgb(0 0 0 / .35); }
.xb-v-person-row:hover { box-shadow: 0 6px 20px rgb(0 0 0 / .5), 0 0 0 1px hsl(var(--primary) / .35); }

/* ---------- 6. 订单管理表格 · 参考风格（琥珀金额/细行分割/清晰层次） ---------- */
/* 表头：弱化底色，细字分明 */
table.xb-orders-table thead th,
table.responsive-table thead th {
  background: transparent !important;
  color: hsl(var(--muted-foreground)) !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  border-bottom: 1px solid hsl(var(--border));
}
/* 行：透明底 + 细分割线 + 悬停微亮 */
table.xb-orders-table tbody td,
table.responsive-table tbody td {
  border-bottom: 1px solid hsl(var(--border) / .5);
}
table.xb-orders-table tbody tr:last-child td,
table.responsive-table tbody tr:last-child td { border-bottom: 0; }
table.xb-orders-table tbody tr:hover td,
table.responsive-table tbody tr:hover td { background-color: hsl(var(--accent) / .4); }
/* 金额列：琥珀黄加粗微发光（参考图风格） */
table td.xb-amount,
table td.xb-amount * {
  color: #fbbf24 !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 14px rgb(251 191 36 / .18);
}
/* 状态标签页：弱化默认灰底，激活保持主色 */
.xb-orders-status-tabs button { color: hsl(var(--muted-foreground)); }
.xb-orders-status-tabs button:hover { color: hsl(var(--foreground)); }
/* 核对行固定列（sticky）浅色残留 → 不透明暗色底 */
.responsive-table tbody tr.xb-order-reviewed--received > td.sticky { background: #10201c !important; }
.responsive-table tbody tr.xb-order-reviewed--not-received > td.sticky { background: #20161a !important; }
/* 顶部汇总数字：暗底下改亮色（原为深绿/深橙不可读） */
.xb-orders-summary-item--reviewed strong { color: #34d399 !important; }
.xb-orders-summary-item--pending strong { color: #fbbf24 !important; }
/* 订单汇总卡背景与边框 */
.xb-orders-summary { background: hsl(var(--card)); border-color: hsl(var(--border)); }

/* 订单表格容器：解除内部独立滚动（DataTable 的 max-h-[calc(100vh-250px)] overflow-auto），整页跟随滚动（犀牛式） */
div:has(> table.responsive-table.xb-orders-table) {
  max-height: none !important;
  min-height: 0 !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
}
/* 表头取消吸顶（避免与顶部导航重叠），随整页滚动 */
.responsive-table.xb-orders-table thead { position: static !important; }

/* ---------- 8. 字体大小自适应（流式排版） ---------- */
/* 全局基准字号：随视口平滑缩放（1900px+ 16px → 1650px 15.3px → 1440px 14.2px → 1280px 13.4px），全站 rem 联动 */
html { font-size: clamp(13px, 0.5vw + 7px, 16px); }
/* 2K/4K 大屏适度放大 */
@media (min-width: 2560px) { html { font-size: 17px; } }

/* 订单表格：宽屏 13px，向下平滑缩到 11.5px，对齐犀牛密度 */
.responsive-table.xb-orders-table {
  font-size: clamp(11.5px, 0.3vw + 4px, 13px);
}
/* 单元格横向内边距同步收缩，窄屏挤出更多有效宽度 */
.responsive-table.xb-orders-table th,
.responsive-table.xb-orders-table td {
  padding-left: clamp(4px, 0.45vw, 10px) !important;
  padding-right: clamp(4px, 0.45vw, 10px) !important;
}
/* 纵向内边距压缩：行间隔收紧（原 py-2.5 ≈ 10px） */
.responsive-table.xb-orders-table td {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}
.responsive-table.xb-orders-table thead th {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}
.responsive-table.xb-orders-table thead th {
  font-size: clamp(9.5px, 0.3vw + 5px, 11px) !important;
}
/* 金额始终比正文大一号，保持醒目 */
.responsive-table.xb-orders-table td.xb-amount {
  font-size: clamp(12px, 0.35vw + 4.6px, 13.5px);
}
/* 汇总数字流式放大 */
.xb-orders-summary-item strong {
  font-size: clamp(16px, 0.6vw + 10px, 22px) !important;
}

/* ---------- 9. 订单表格全量显示：取消省略号截断，长文本自动换行（犀牛式） ---------- */
.responsive-table.xb-orders-table td {
  max-width: none !important;
  overflow-wrap: break-word;
  line-height: 1.35;
}
.responsive-table.xb-orders-table td.truncate,
.responsive-table.xb-orders-table td .truncate {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  max-width: none !important;
}

/* 犀牛式居中：表头与单元格内容全部居中（仅桌面表格模式） */
@media (min-width: 1200px) {
  .responsive-table.xb-orders-table th,
  .responsive-table.xb-orders-table td {
    text-align: center !important;
  }
  .responsive-table.xb-orders-table td [class*="flex"] {
    justify-content: center !important;
  }
}

/* ---------- 10. 订单表格列宽均衡：fixed 布局按百分比定宽（对齐犀牛） ---------- */
@media (min-width: 1200px) {
  .responsive-table.xb-orders-table { table-layout: fixed; }
  /* 订单号 / 来源 / 充值账号 / 核销商户 / 支付 / 状态 / IP设备 / 时间 / 操作 */
  .responsive-table.xb-orders-table th:nth-child(1) { width: 12%; }
  .responsive-table.xb-orders-table th:nth-child(2) { width: 9%; }
  .responsive-table.xb-orders-table th:nth-child(3) { width: 12%; }
  .responsive-table.xb-orders-table th:nth-child(4) { width: 7%; }
  .responsive-table.xb-orders-table th:nth-child(5) { width: 8%; }
  .responsive-table.xb-orders-table th:nth-child(6) { width: 8%; }
  .responsive-table.xb-orders-table th:nth-child(7) { width: 16%; }
  .responsive-table.xb-orders-table th:nth-child(8) { width: 13%; }
  .responsive-table.xb-orders-table th:nth-child(9) { width: 15%; }
}

/* ---------- 11. 订单表格控件紧凑化：按钮/徽章/图标随小字号缩放 ---------- */
.responsive-table.xb-orders-table td button {
  font-size: 10.5px !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 3px 10px !important;
  line-height: 1.35 !important;
}
.responsive-table.xb-orders-table td [class*="badge"],
.responsive-table.xb-orders-table td span[class*="rounded-full"] {
  font-size: 10.5px !important;
  padding-top: 1px !important;
  padding-bottom: 1px !important;
}
.responsive-table.xb-orders-table td svg {
  width: 12px !important;
  height: 12px !important;
}

/* ---------- 12. 订单表格视觉协调：支付徽章暗色品牌化 + 状态居中 + 金额对齐曲线 ---------- */
/* 支付方式徽章：内联浅色块改暗底品牌淡彩（犀牛式） */
span.xb-order-method {
  height: 20px !important;
  padding: 0 7px !important;
  gap: 4px !important;
  font-size: 10.5px !important;
}
span.xb-order-method > span:first-child {
  width: 13px !important;
  height: 13px !important;
  font-size: 8.5px !important;
}
/* 支付宝（图标内联色 #1677ff） */
span.xb-order-method:has(> span[style*="1677ff"]) {
  background-color: rgb(22 119 255 / .15) !important;
  border-color: rgb(22 119 255 / .45) !important;
  color: #6aa8ff !important;
}
/* 微信（图标内联色 #07c160） */
span.xb-order-method:has(> span[style*="07c160"]) {
  background-color: rgb(7 193 96 / .13) !important;
  border-color: rgb(7 193 96 / .4) !important;
  color: #4ade80 !important;
}
/* 其他方式兜底 */
span.xb-order-method:not(:has(> span[style*="1677ff"])):not(:has(> span[style*="07c160"])) {
  background-color: hsl(var(--accent) / .5) !important;
  border-color: hsl(var(--border)) !important;
  color: hsl(var(--muted-foreground)) !important;
}
/* 状态列内容居中（原为 grid 左对齐，与其他居中列不齐） */
.xb-order-status { justify-items: center !important; }
/* 状态药丸紧凑化 */
.xb-order-status > * {
  font-size: 10.5px !important;
  padding: 2px 9px !important;
  height: auto !important;
  min-height: 0 !important;
  gap: 5px !important;
}
/* 金额字号对齐全局小字号曲线 */
.responsive-table.xb-orders-table td .money {
  font-size: clamp(12px, 0.35vw + 4.6px, 13.5px) !important;
}

/* ---------- 7. 订单表格自适应：窄屏行变卡片（对齐犀牛堆叠式） ---------- */
@media (max-width: 1199px) {
  .responsive-table.xb-orders-table,
  .responsive-table.xb-orders-table tbody,
  .responsive-table.xb-orders-table tr,
  .responsive-table.xb-orders-table td {
    display: block;
    width: 100%;
  }
  .responsive-table.xb-orders-table { min-width: 0; }
  .responsive-table.xb-orders-table thead { display: none; }
  .responsive-table.xb-orders-table tbody {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(430px, 100%), 1fr));
    gap: 12px;
    padding: 12px;
  }
  .responsive-table.xb-orders-table tbody tr {
    min-width: 0;
    overflow: hidden;
    border: 1px solid hsl(var(--border));
    border-radius: 10px;
    padding: 10px 14px;
    background: hsl(var(--card));
    box-shadow: 0 2px 10px rgb(0 0 0 / .3);
  }
  /* 核对状态卡片底色与竖条（保持高辨识） */
  .responsive-table.xb-orders-table tbody tr.xb-order-reviewed--received {
    background: rgb(5 150 105 / .14) !important;
    box-shadow: inset 4px 0 0 #34d399, 0 2px 10px rgb(0 0 0 / .3) !important;
  }
  .responsive-table.xb-orders-table tbody tr.xb-order-reviewed--not-received {
    background: rgb(220 38 38 / .15) !important;
    box-shadow: inset 4px 0 0 #f87171, 0 2px 10px rgb(0 0 0 / .3) !important;
  }
  .responsive-table.xb-orders-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    max-width: none;
    min-height: 34px;
    padding: 5px 0 !important;
    border: 0 !important;
    background: transparent !important;
    text-align: right;
    position: static !important;
    font-size: 13px;
  }
  .responsive-table.xb-orders-table td.xb-amount { font-size: 14px; }
  .responsive-table.xb-orders-table td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    color: hsl(var(--muted-foreground));
    font-size: 12px;
  }
  .responsive-table.xb-orders-table td[data-primary="true"] {
    display: block;
    margin-bottom: 4px;
    padding-bottom: 8px !important;
    border-bottom: 1px solid hsl(var(--border)) !important;
    text-align: left;
  }
  .responsive-table.xb-orders-table td[data-primary="true"]::before { display: none; }
  /* 操作列按钮区回左对齐 */
  .responsive-table.xb-orders-table td:last-child { justify-content: flex-end; }
  .responsive-table.xb-orders-table td:last-child > div { flex-wrap: wrap; }
}

/* ---------- 登录页可读性修复（2026-08-05） ----------
   登录页根容器 text-slate-950（近黑）在暗底上不可见；预览卡 bg-white/85 与
   border-slate-200/70|80 未被 .bg-white/.border-slate-200 兜底覆盖。
   选择器锚定登录页根容器独有的 dark:bg-[#151618]，不影响其他页面与按钮。 */
[class~="dark:bg-[#151618]"] { color: hsl(var(--foreground)) !important; }
[class~="dark:bg-[#151618]"] .bg-white\/85 { background-color: hsl(var(--card) / .88) !important; }
[class~="dark:bg-[#151618]"] .border-slate-200\/80,
[class~="dark:bg-[#151618]"] .border-slate-200\/70 { border-color: hsl(var(--border)) !important; }