/* ============================================================
   方案A「经典深灰Pro」全局换肤
   黑菜单栏 + 白顶栏 + 米白内容区 / 金色 #ddbf5e 点缀
   说明：通过高优先级选择器覆盖 Tailwind CDN 生成的 gray 工具类，
   不改动 app.js / agent.js 的 DOM 结构。
   ============================================================ */
:root {
  --sb-bg: #263436;        /* 侧边栏深炭灰 */
  --sb-logo: #1c2a2b;      /* LOGO 区更深 */
  --sb-active: #314242;    /* 选中态背景提亮 */
  --sb-text: #b9c6c6;      /* 侧栏文字 */
  --gold: #ddbf5e;         /* 金色点缀（选中条/徽章/主操作） */
  --bg: #fafafa;           /* 内容区米白 */
  --card: #ffffff;         /* 卡片纯白 */
  --line: #e5e7eb;         /* 浅灰分隔线 */
  --line-2: #d1d5db;
  --ink: #1f2937;          /* 主文字 */
  --ink-2: #6b7280;        /* 次要文字 */
  --zebra: #f7f7f5;        /* 表格斑马纹 */
  --green: #16a34a;
  --red: #dc2626;
  --yellow: #d97706;
  --card-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
}

/* ---------- 全局基底 ---------- */
html, body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif !important;
}
body {
  background-color: var(--bg) !important;
  color: var(--ink) !important;
}

/* ---------- 灰阶语义重映射（内容区深色系 -> 白卡片体系） ---------- */
body .bg-gray-900 { background-color: var(--bg) !important; }
body .bg-gray-800 { background-color: var(--card) !important; }
body .bg-gray-700 { background-color: #f3f4f6 !important; }
body .bg-gray-700\/50 { background-color: rgba(243, 244, 246, .6) !important; }
body .bg-gray-600 { background-color: #e5e7eb !important; }
body .bg-gray-500 { background-color: #9ca3af !important; }

body .border-gray-700 { border-color: var(--line) !important; }
body .border-gray-600 { border-color: var(--line-2) !important; }
body .border-gray-500 { border-color: var(--line-2) !important; }
body .divide-gray-700 > * + * { border-color: var(--line) !important; }

/* 文字颜色翻转 */
body .text-gray-100, body .text-gray-200, body .text-gray-300 { color: var(--ink) !important; }
body .text-gray-400, body .text-gray-500 { color: var(--ink-2) !important; }

/* 卡片内的纯白文字转深色（标题、段落、单元格等） */
body .bg-gray-800 :is(h1, h2, h3, h4, h5, p, td, th, div, span, a, label).text-white,
body .card-stat :is(h1, h2, h3, h4, h5, p, td, th, div, span, a, label).text-white,
body .bg-gray-700 :is(h1, h2, h3, h4, h5, p, td, th, div, span, a, label).text-white {
  color: var(--ink) !important;
}
/* 但彩色徽章 / 彩色按钮上的白字保持白色 */
body .text-white:is(.bg-primary, .bg-secondary, .bg-danger, .bg-success, .bg-warning,
  .bg-red-600, .bg-red-500, .bg-green-600, .bg-green-500, .bg-green-700,
  .bg-yellow-600, .bg-yellow-500, .bg-blue-600, .bg-blue-500, .bg-blue-700,
  .bg-orange-500, .bg-orange-600, .bg-purple-600, .bg-pink-500, .bg-pink-600,
  .bg-teal-500, .bg-teal-600, .bg-indigo-500, .bg-indigo-600, .bg-cyan-600,
  [class*="bg-gradient"]),
body button.text-white, body a.text-white:is([class*="bg-red"], [class*="bg-green"], [class*="bg-blue"], [class*="bg-yellow"], [class*="bg-primary"]) {
  color: #ffffff !important;
}

/* ---------- 卡片：纯白 + 8px 圆角 + 轻阴影 ---------- */
body .bg-gray-800:is(.rounded-xl, .rounded-lg, .rounded-2xl) {
  border-radius: 8px !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--card-shadow) !important;
}
/* 仪表盘统计卡（原深色渐变） -> 白卡 + 金色左边条 */
body .card-stat {
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-left: 3px solid var(--gold) !important;
  border-radius: 8px !important;
  box-shadow: var(--card-shadow) !important;
}
body .glow-effect { box-shadow: var(--card-shadow) !important; }

/* 彩色实心按钮统一白字（原深色主题按钮无文字色类，靠 body 继承白色） */
body button:is(.bg-primary, .bg-danger, .bg-success, .bg-warning,
  [class~="bg-blue-600"], [class~="bg-blue-500"], [class~="bg-blue-700"],
  [class~="bg-red-600"], [class~="bg-red-500"], [class~="bg-red-700"],
  [class~="bg-green-600"], [class~="bg-green-500"], [class~="bg-green-700"],
  [class~="bg-yellow-600"], [class~="bg-yellow-500"],
  [class~="bg-orange-500"], [class~="bg-orange-600"],
  [class~="bg-purple-600"], [class~="bg-purple-500"],
  [class~="bg-pink-500"], [class~="bg-pink-600"],
  [class~="bg-teal-500"], [class~="bg-teal-600"],
  [class~="bg-indigo-600"], [class~="bg-indigo-500"], [class~="bg-cyan-600"],
  [class*="bg-gradient"]),
body button:is(.bg-primary, .bg-danger, .bg-success, .bg-warning,
  [class~="bg-blue-600"], [class~="bg-blue-500"], [class~="bg-blue-700"],
  [class~="bg-red-600"], [class~="bg-red-500"], [class~="bg-red-700"],
  [class~="bg-green-600"], [class~="bg-green-500"], [class~="bg-green-700"],
  [class~="bg-yellow-600"], [class~="bg-yellow-500"],
  [class~="bg-orange-500"], [class~="bg-orange-600"],
  [class~="bg-purple-600"], [class~="bg-purple-500"],
  [class~="bg-pink-500"], [class~="bg-pink-600"],
  [class~="bg-teal-500"], [class~="bg-teal-600"],
  [class~="bg-indigo-600"], [class~="bg-indigo-500"], [class~="bg-cyan-600"],
  [class*="bg-gradient"]) :is(span, i, p, div, strong) {
  color: #ffffff !important;
}

/* 代理门户统计卡（原彩色渐变） -> 白卡 + 金色左边条 */
body [class*="from-blue-600"], body [class*="from-green-600"],
body [class*="from-purple-600"], body [class*="from-orange-600"],
body [class*="from-blue-600"].text-white, body [class*="from-green-600"].text-white,
body [class*="from-purple-600"].text-white, body [class*="from-orange-600"].text-white {
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-left: 3px solid var(--gold) !important;
  border-radius: 8px !important;
  box-shadow: var(--card-shadow) !important;
  color: var(--ink) !important;
}
body [class*="from-blue-600"] i, body [class*="from-green-600"] i,
body [class*="from-purple-600"] i, body [class*="from-orange-600"] i {
  color: var(--gold) !important;
}

/* ---------- 表单控件：白底浅灰边 ---------- */
body input:is(.bg-gray-700, .bg-gray-800, .bg-gray-900),
body select:is(.bg-gray-700, .bg-gray-800, .bg-gray-900),
body textarea:is(.bg-gray-700, .bg-gray-800, .bg-gray-900) {
  background-color: #ffffff !important;
  border-color: var(--line-2) !important;
  color: var(--ink) !important;
}
body input::placeholder, body textarea::placeholder { color: #9ca3af !important; }
body input:focus, body select:focus, body textarea:focus {
  border-color: var(--gold) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(221, 191, 94, .25) !important;
}

/* ---------- 表格：白底 / 浅灰线 / 斑马纹 / 表头浅灰 ---------- */
body table { background-color: transparent; }
body thead.bg-gray-700, body .data-table thead, body table thead {
  background-color: #f3f4f6 !important;
}
body thead th { color: var(--ink-2) !important; font-weight: 600; }
body .data-table tbody tr:nth-child(even),
body table tbody tr:nth-child(even) { background-color: var(--zebra); }
body .data-table tr:hover,
body table tbody tr:hover { background-color: #eef3f2 !important; }
body .hover\:bg-gray-750:hover { background-color: var(--zebra) !important; }
body td, body th { font-variant-numeric: tabular-nums; }

/* 金额 / 数字等宽 */
.num, .amount, .money, [class*="amount"], [class*="balance"] {
  font-variant-numeric: tabular-nums !important;
}

/* ---------- 弹窗：统一遮罩 + 白卡 ---------- */
body .modal-overlay:not(.login-hero) { background: rgba(20, 30, 31, .55) !important; }
body .bg-opacity-75, body .bg-opacity-50 { --tw-bg-opacity: .55 !important; }
body .fixed.inset-0 > .bg-gray-800 {
  border-radius: 8px !important;
  box-shadow: 0 10px 30px rgba(16, 24, 40, .18) !important;
}

/* ---------- 侧边栏（220px 深炭灰 + 金色选中条） ---------- */
.adm-sidebar {
  width: 220px !important;
  background-color: var(--sb-bg) !important;
  border-right: none !important;
}
.adm-sidebar-logo {
  background-color: var(--sb-logo);
  border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
}
.adm-sidebar-logo h1 { color: #ffffff !important; }
.adm-sidebar-logo p { color: #7e9395 !important; }
.adm-group {
  color: #63787a !important;
  font-size: 11px !important;
  letter-spacing: .1em;
  font-weight: 600;
}
.adm-sidebar .sidebar-item {
  color: var(--sb-text) !important;
  border-left: 3px solid transparent !important;
  border-radius: 6px !important;
  background: transparent !important;
}
.adm-sidebar .sidebar-item i { color: #8fa3a3 !important; }
.adm-sidebar .sidebar-item:hover {
  background: rgba(255, 255, 255, .06) !important;
  color: #ffffff !important;
}
.adm-sidebar .sidebar-item.active {
  background: var(--sb-active) !important;
  border-left: 3px solid var(--gold) !important;
  color: #ffffff !important;
}
.adm-sidebar .sidebar-item.active i { color: var(--gold) !important; }
/* 侧栏内徽章颜色保持 */
.adm-sidebar .sidebar-item span[class*="bg-"] { color: #fff !important; }

/* ---------- 顶栏（白底） ---------- */
.adm-topbar {
  background-color: #ffffff !important;
  border-bottom: 1px solid var(--line) !important;
}
.adm-topbar h2, .adm-topbar h1 { color: var(--ink) !important; }
.adm-topbar .text-gray-400 { color: var(--ink-2) !important; }

/* ---------- 主内容区间距（220px 侧栏） ---------- */
.adm-main { margin-left: 220px !important; }

/* ---------- 登录页（深炭灰背景 + 白卡片） ---------- */
.login-hero {
  background: linear-gradient(135deg, #1c2a2b 0%, #263436 60%, #314242 100%) !important;
}
.login-card {
  background: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  border-radius: 8px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .35) !important;
}
.login-card h1 { color: var(--ink) !important; }
.login-card label { color: var(--ink-2) !important; }

/* ---------- 滚动条（浅色） ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f1f1f0; }
::-webkit-scrollbar-thumb { background: #c9cfcf; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #aab3b3; }

/* ---------- 全局 Toast 提示（白卡 + 金色点缀） ---------- */
.app-toast {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  color: var(--ink) !important;
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, .15);
  padding: 12px 18px;
  font-size: 14px;
  max-width: 420px;
  animation: toast-slide-in .25s ease-out;
}
.app-toast i { font-size: 16px; }
.app-toast.toast-success i { color: var(--green); }
.app-toast.toast-error i { color: var(--red); }
.app-toast.toast-warning i { color: var(--yellow); }
.app-toast.toast-info i { color: var(--gold); }
.app-toast.toast-out {
  opacity: 0;
  transform: translateX(100%);
  transition: all .3s ease-in-out;
}
@keyframes toast-slide-in {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ---------- 全局确认弹窗（白卡 + 金色主按钮） ---------- */
.app-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(20, 30, 31, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.app-confirm-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba(16, 24, 40, .25);
  width: 100%;
  max-width: 400px;
  padding: 24px;
  animation: toast-slide-in .2s ease-out;
}
.app-confirm-card h3 {
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.app-confirm-card h3 i { color: var(--gold); }
.app-confirm-msg {
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-line;
  margin-bottom: 20px;
}
.app-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.app-confirm-actions .btn-cancel {
  background: #f3f4f6;
  color: var(--ink) !important;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  padding: 8px 18px;
  font-size: 14px;
  cursor: pointer;
}
.app-confirm-actions .btn-cancel:hover { background: #e5e7eb; }
.app-confirm-actions .btn-ok {
  background: var(--gold);
  color: #263436 !important;
  border: none;
  border-radius: 6px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.app-confirm-actions .btn-ok:hover { filter: brightness(1.05); }