/* ============================================================
 * 言犀 CRM + BI · 全局主题引擎
 * 5 套主题 + 基础样式（玻璃卡 / 极光背景 / Toast / 抽屉 …）
 * 任意页面只需 <link rel="stylesheet" href="assets/themes.css"> + body class
 * ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* —— 默认（深色科技 — 不加 body class 时落在这里）—— */
:root {
    --bg-main: #f8fafc;                                 /* 默认走纯白极简，避免裸 root 时一片黑 */
    --bg-card: rgba(255, 255, 255, 0.65);
    --border-main: rgba(0, 0, 0, 0.06);
    --text-main: #0f172a;
    --text-muted: #64748b;
    --bg-hover: rgba(0, 0, 0, 0.04);
    --accent: #007aff;
    --accent-muted: rgba(0, 122, 255, 0.1);
    --accent-border: rgba(0, 122, 255, 0.3);
    --accent-glow: 0 0 15px rgba(0, 122, 255, 0.3);
    --shadow-accent: 0 4px 15px rgba(0, 122, 255, 0.25);
    --chart-text: #64748b;
    --glow-1: rgba(0, 122, 255, 0.08);
    --glow-2: rgba(16, 185, 129, 0.05);
    --shadow-card: 0 4px 24px -1px rgba(0, 0, 0, 0.05);
    --shadow-inset: inset 0 1px 0 0 rgba(255, 255, 255, 0.8);
    --shadow-hover: 0 12px 32px -4px rgba(0, 0, 0, 0.1);
    --border-hover: rgba(0, 0, 0, 0.12);
    --bg-glass-input: rgba(255, 255, 255, 0.5);
}

body.theme-light {
    --bg-main: #f8fafc;
    --bg-card: rgba(255, 255, 255, 0.65);
    --border-main: rgba(0, 0, 0, 0.06);
    --text-main: #0f172a;
    --text-muted: #64748b;
    --bg-hover: rgba(0, 0, 0, 0.04);
    --accent: #007aff;
    --accent-muted: rgba(0, 122, 255, 0.1);
    --accent-border: rgba(0, 122, 255, 0.3);
    --accent-glow: 0 0 15px rgba(0, 122, 255, 0.3);
    --shadow-accent: 0 4px 15px rgba(0, 122, 255, 0.25);
    --chart-text: #64748b;
    --glow-1: rgba(0, 122, 255, 0.08);
    --glow-2: rgba(16, 185, 129, 0.05);
    --shadow-card: 0 4px 24px -1px rgba(0, 0, 0, 0.05);
    --shadow-inset: inset 0 1px 0 0 rgba(255, 255, 255, 0.8);
    --shadow-hover: 0 12px 32px -4px rgba(0, 0, 0, 0.1);
    --border-hover: rgba(0, 0, 0, 0.12);
    --bg-glass-input: rgba(255, 255, 255, 0.5);
}

body.theme-dark {
    --bg-main: #0c0a09;
    --bg-card: rgba(28, 25, 23, 0.45);
    --border-main: rgba(255, 255, 255, 0.06);
    --text-main: #f5f5f4;
    --text-muted: #a8a29e;
    --bg-hover: rgba(255, 255, 255, 0.08);
    --accent: #f97316;
    --accent-muted: rgba(249, 115, 22, 0.1);
    --accent-border: rgba(249, 115, 22, 0.3);
    --accent-glow: 0 0 15px rgba(249, 115, 22, 0.4);
    --shadow-accent: 0 4px 15px rgba(249, 115, 22, 0.3);
    --chart-text: #a8a29e;
    --glow-1: rgba(249, 115, 22, 0.12);
    --glow-2: rgba(16, 185, 129, 0.08);
    --shadow-card: 0 4px 24px -1px rgba(0, 0, 0, 0.2);
    --shadow-inset: inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
    --shadow-hover: 0 12px 32px -4px rgba(0, 0, 0, 0.3);
    --border-hover: rgba(255, 255, 255, 0.12);
    --bg-glass-input: rgba(0, 0, 0, 0.2);
}

body.theme-blue {
    --bg-main: #081229;
    --bg-card: rgba(15, 23, 42, 0.5);
    --border-main: rgba(255, 255, 255, 0.06);
    --text-main: #f0f9ff;
    --text-muted: #94a3b8;
    --bg-hover: rgba(0, 44, 205, 0.15);
    --accent: #4d7fff;
    --accent-muted: rgba(77, 127, 255, 0.18);
    --accent-border: rgba(77, 127, 255, 0.4);
    --accent-glow: 0 0 15px rgba(77, 127, 255, 0.5);
    --shadow-accent: 0 4px 15px rgba(77, 127, 255, 0.4);
    --accent-text: #ffffff;
    --chart-text: #94a3b8;
    --glow-1: rgba(0, 44, 205, 0.15);
    --glow-2: rgba(0, 44, 205, 0.1);
    --shadow-card: 0 4px 24px -1px rgba(0, 0, 0, 0.25);
    --shadow-inset: inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
    --shadow-hover: 0 12px 32px -4px rgba(0, 0, 0, 0.35);
    --border-hover: rgba(0, 44, 205, 0.4);
    --bg-glass-input: rgba(0, 0, 0, 0.3);
}

body.theme-galaxy {
    --bg-main: #0b0914;
    --bg-card: rgba(23, 21, 43, 0.45);
    --border-main: rgba(255, 255, 255, 0.05);
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --bg-hover: rgba(139, 92, 246, 0.15);
    --accent: #a855f7;
    --accent-muted: rgba(168, 85, 247, 0.1);
    --accent-border: rgba(168, 85, 247, 0.3);
    --accent-glow: 0 0 15px rgba(168, 85, 247, 0.4);
    --shadow-accent: 0 4px 15px rgba(168, 85, 247, 0.3);
    --chart-text: #94a3b8;
    --glow-1: rgba(139, 92, 246, 0.15);
    --glow-2: rgba(59, 130, 246, 0.12);
    --shadow-card: 0 4px 24px -1px rgba(0, 0, 0, 0.25);
    --shadow-inset: inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
    --shadow-hover: 0 12px 32px -4px rgba(0, 0, 0, 0.35);
    --border-hover: rgba(139, 92, 246, 0.3);
    --bg-glass-input: rgba(0, 0, 0, 0.3);
}

body.theme-black {
    --bg-main: #000000;
    --bg-card: rgba(15, 15, 15, 0.6);
    --border-main: rgba(255, 255, 255, 0.08);
    --text-main: #ffffff;
    --text-muted: #888888;
    --bg-hover: rgba(255, 255, 255, 0.1);
    --accent: #ffffff;
    --accent-muted: rgba(255, 255, 255, 0.1);
    --accent-border: rgba(255, 255, 255, 0.2);
    --accent-glow: 0 0 15px rgba(255, 255, 255, 0.2);
    --shadow-accent: 0 4px 15px rgba(255, 255, 255, 0.15);
    --chart-text: #888888;
    --glow-1: rgba(255, 255, 255, 0.03);
    --glow-2: transparent;
    --shadow-card: 0 4px 24px -1px rgba(0, 0, 0, 0.5);
    --shadow-inset: inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
    --shadow-hover: 0 12px 32px -4px rgba(0, 0, 0, 0.6);
    --border-hover: rgba(255, 255, 255, 0.15);
    --bg-glass-input: rgba(255, 255, 255, 0.05);
}

body.theme-bento {
    --bg-main: #f0f4f8;
    --bg-card: rgba(255, 255, 255, 0.6);
    --border-main: rgba(0, 0, 0, 0.05);
    --text-main: #0f172a;
    --text-muted: #64748b;
    --bg-hover: rgba(0, 0, 0, 0.04);
    --accent: #6366f1;
    --accent-muted: rgba(99, 102, 241, 0.12);
    --accent-border: rgba(99, 102, 241, 0.3);
    --accent-glow: 0 4px 15px rgba(99, 102, 241, 0.2);
    --shadow-accent: 0 4px 15px rgba(99, 102, 241, 0.25);
    --chart-text: #64748b;
    --glow-1: rgba(134, 239, 172, 0.7);
    --glow-2: rgba(249, 168, 212, 0.6);
    --shadow-card: 0 8px 30px -4px rgba(0, 0, 0, 0.08);
    --shadow-inset: inset 0 1px 0 0 rgba(255, 255, 255, 1);
    --border-hover: rgba(0, 0, 0, 0.1);
    --bg-glass-input: rgba(255, 255, 255, 0.8);
}

/* ── 基础 body 样式 + 极光背景 ────────────────────── */
body {
    background-color: var(--bg-main);
    color: var(--text-main);
    font-family: 'Inter', system-ui, sans-serif;
    transition: background-color .35s ease, color .35s ease;
    position: relative;
}
body::before, body::after {
    content: '';
    position: fixed;
    width: 60vw;
    height: 60vh;
    border-radius: 50%;
    filter: blur(120px);
    z-index: -1;
    pointer-events: none;
    opacity: 0.85;
    transition: background 1s ease;
    will-change: transform;
}
body::before {
    top: -20%; left: -10%;
    background: var(--glow-1);
    animation: yx-aurora-1 22s ease-in-out infinite alternate;
}
body::after {
    bottom: -20%; right: -10%;
    background: var(--glow-2);
    animation: yx-aurora-2 26s ease-in-out infinite alternate;
}
@keyframes yx-aurora-1 {
    0% { transform: translate(0,0) scale(1); }
    50% { transform: translate(20vw,20vh) scale(1.2); }
    100% { transform: translate(8vw,32vh) scale(0.85); }
}
@keyframes yx-aurora-2 {
    0% { transform: translate(0,0) scale(1); }
    50% { transform: translate(-22vw,-18vh) scale(1.15); }
    100% { transform: translate(-10vw,-30vh) scale(0.85); }
}

/* ── 滚动条统一 ────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(128,128,128,0.2); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(128,128,128,0.4); }

/* ============================================================
 *  全局弹窗 / 抽屉 → 居中 Modal
 *  历史代码用 .drawer / .drawer-overlay（从右侧滑入），
 *  这里全局覆盖成「居中弹出 + 遮罩淡入」的现代 Modal 体验。
 * ============================================================ */
.drawer-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(15, 23, 42, 0.45) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
    z-index: 100 !important;
}
.drawer-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
}

.drawer {
    /* 居中定位（覆盖 Tailwind 的 top-4 right-4 bottom-4 / inline translateX(100%) ） */
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) scale(0.96) !important;
    width: min(560px, 92vw) !important;
    max-height: min(86vh, 820px) !important;
    height: auto !important;
    z-index: 101 !important;
    opacity: 0;
    visibility: hidden;
    transition: transform .28s cubic-bezier(.34, 1.2, .64, 1), opacity .22s ease, visibility .22s ease !important;
    box-shadow: 0 24px 80px -10px rgba(15, 23, 42, .35), 0 8px 24px rgba(15, 23, 42, .15) !important;
    border-radius: 22px !important;
    /* 覆盖部分页面的 .drawer 阴影/box-shadow inline 样式（如 index.html 的 -10px 0 40px） */
    box-shadow: 0 24px 80px -10px rgba(15, 23, 42, .35), 0 8px 24px rgba(15, 23, 42, .15) !important;
}
.drawer.active {
    transform: translate(-50%, -50%) scale(1) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* 内部表单/正文滚动友好：drawer 内 form 自动 overflow */
.drawer > form,
.drawer > .modal-body { overflow-y: auto; }

/* 适配特别大的弹窗（如新建合同 540px、子账号 460px、商机 480px）— 走变量统一 */
@media (max-height: 720px) {
    .drawer { max-height: 96vh !important; }
}

/* 兼容用 ID 自定义的弹层（roles.html #rDrawer / #rOverlay 等）—— 把它们也居中 */
[id$="Drawer"][class*="fixed"] {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) scale(0.96) !important;
    width: min(560px, 92vw) !important;
    max-height: 86vh !important;
    border-radius: 22px !important;
    z-index: 101 !important;
    transition: transform .28s cubic-bezier(.34, 1.2, .64, 1), opacity .22s ease, visibility .22s ease !important;
    opacity: 0;
    visibility: hidden;
}
[id$="Drawer"][class*="fixed"].active {
    transform: translate(-50%, -50%) scale(1) !important;
    opacity: 1 !important;
    visibility: visible !important;
}
[id$="Overlay"][class*="fixed"] {
    background: rgba(15, 23, 42, 0.45) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 100 !important;
    transition: opacity .25s ease, visibility .25s ease !important;
}

/* ── Popover / 下拉浮层（不透明，避免文字穿透看不清）── */
.popover-solid {
    background: var(--bg-elev, #ffffff) !important;
    border: 1px solid var(--card-border, var(--border-main, rgba(15,23,42,.12))) !important;
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    box-shadow: 0 16px 48px rgba(15,23,42,.18), 0 4px 12px rgba(15,23,42,.08);
    color: var(--text-main, var(--text, #0f172a));
}
body.theme-dark   .popover-solid,
body.theme-galaxy .popover-solid,
body.theme-black  .popover-solid {
    background: rgba(20, 24, 38, 0.98) !important;
    border-color: rgba(255,255,255,.12) !important;
    color: #e5e7eb !important;
}

/* ── 通用工具类（避免重复在内联样式里写）────────── */
.accent-bg { background: var(--accent); }
.accent-text { color: var(--accent-text, var(--accent)); }
.accent-border { border-color: var(--accent); }
.accent-glow { box-shadow: var(--accent-glow); }
.accent-shadow { box-shadow: var(--shadow-accent); }
.accent-muted-bg { background: var(--accent-muted); }
.accent-muted-border { border-color: var(--accent-border); }

/* ============================================================
 *  暗色主题 · 子面板背景统一修补
 *  历史代码里写死了 rgba(255,255,255,X) 作为子面板/卡片底色，
 *  在「深色科技 / 极客蓝 / 银河紫 / 极夜黑」下会变成偏白的雾面，
 *  与主背景反差不足导致 UI 看起来"灰糊"。这里集中覆盖。
 * ============================================================ */
body.theme-dark   .kanban-col-head,
body.theme-blue   .kanban-col-head,
body.theme-galaxy .kanban-col-head,
body.theme-black  .kanban-col-head {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: var(--border-main) !important;
}

body.theme-dark   .opp-card,
body.theme-blue   .opp-card,
body.theme-galaxy .opp-card,
body.theme-black  .opp-card {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: var(--border-main) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}
body.theme-dark   .opp-card:hover,
body.theme-blue   .opp-card:hover,
body.theme-galaxy .opp-card:hover,
body.theme-black  .opp-card:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: var(--border-hover) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4) !important;
}

body.theme-dark   .cal-cell,
body.theme-blue   .cal-cell,
body.theme-galaxy .cal-cell,
body.theme-black  .cal-cell {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: var(--border-main) !important;
}

body.theme-dark   .week-cell,
body.theme-blue   .week-cell,
body.theme-galaxy .week-cell,
body.theme-black  .week-cell {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: var(--border-main) !important;
}

body.theme-dark   .ct-wrap,
body.theme-blue   .ct-wrap,
body.theme-galaxy .ct-wrap,
body.theme-black  .ct-wrap {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: var(--border-main) !important;
}
body.theme-dark   .inc-row td,
body.theme-blue   .inc-row td,
body.theme-galaxy .inc-row td,
body.theme-black  .inc-row td {
    background: rgba(255, 255, 255, 0.02) !important;
    color: var(--text-main) !important;
}

body.theme-dark   .perm-group,
body.theme-blue   .perm-group,
body.theme-galaxy .perm-group,
body.theme-black  .perm-group {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: var(--border-main) !important;
}

/* Tailwind 浅色进度条底色（slate-100）在暗色主题里显得过亮；统一压暗 */
body.theme-dark   .bg-slate-100,
body.theme-blue   .bg-slate-100,
body.theme-galaxy .bg-slate-100,
body.theme-black  .bg-slate-100 {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

/* 编辑/聚焦态白底（customer-detail / dict 内联）—— 暗色主题改透明白 */
body.theme-dark   .ed-input:focus,
body.theme-blue   .ed-input:focus,
body.theme-galaxy .ed-input:focus,
body.theme-black  .ed-input:focus,
body.theme-dark   .editable:focus,
body.theme-blue   .editable:focus,
body.theme-galaxy .editable:focus,
body.theme-black  .editable:focus {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--text-main) !important;
}

/* 看板列内部"小金额"文字（原本 text-sys-muted）在暗色下保持可读 */
body.theme-dark   .kanban-col-body,
body.theme-blue   .kanban-col-body,
body.theme-galaxy .kanban-col-body,
body.theme-black  .kanban-col-body {
    color: var(--text-main);
}

/* 列表行 hover 在暗色下用统一 hover 变量，避免穿透 */
body.theme-dark   tr:hover td,
body.theme-blue   tr:hover td,
body.theme-galaxy tr:hover td,
body.theme-black  tr:hover td {
    background: var(--bg-hover) !important;
}

/* ============================================================
 *  极夜黑特化修正
 *  --accent = #fff，会跟历史 .accent-bg + Tailwind .text-white
 *  组合成"白底白字"。统一把强调底色上的文字改成纯黑。
 * ============================================================ */
body.theme-black .accent-bg,
body.theme-black .accent-bg.text-white,
body.theme-black .accent-bg .text-white,
body.theme-black button.accent-bg,
body.theme-black .bg-sys-accent,
body.theme-black .accent-shadow.accent-bg {
    color: #000 !important;
}
/* 高亮按钮里的图标也要变黑 */
body.theme-black .accent-bg i,
body.theme-black .accent-bg svg {
    color: #000 !important;
}
/* accent-text（=白）落在白底上同样不可见，针对极夜黑里的"白底"组件改深色 */
body.theme-black .bg-white .accent-text,
body.theme-black .bg-white\/70 .accent-text,
body.theme-black .bg-white\/80 .accent-text {
    color: #000 !important;
}
/* 极夜黑去掉 accent-shadow 的发光（白发光在黑底上看着像光晕断层） */
body.theme-black .accent-shadow {
    box-shadow: 0 4px 14px rgba(255, 255, 255, 0.18) !important;
}
/* 商机看板 / 列表上的 view-tab.active（硬编码 color:#fff）— 在极夜黑下改成黑字 */
body.theme-black .view-tab.active {
    color: #000 !important;
}
/* 列表 badge / chip 用 accent-muted-bg + accent-text 时，
   极夜黑里 accent-text=白，accent-muted-bg=半透白，可能糊在一起。
   把 muted 上的 accent-text 改成稍亮的浅灰，保留可读 */
body.theme-black .accent-muted-bg.accent-text,
body.theme-black .accent-muted-bg .accent-text {
    color: #f5f5f5 !important;
}

/* 通用分页（pagination.js 注入的样式里 .yx-pager-num.active
   写死了 color:#fff，落在白底上看不到）—— 极夜黑改为黑字 */
body.theme-black .yx-pager .yx-pager-num.active {
    color: #000 !important;
    border-color: rgba(0, 0, 0, 0.4) !important;
}
body.theme-black .yx-pager button:hover:not(:disabled),
body.theme-black .yx-pager .yx-pager-num:hover:not(.active) {
    color: var(--text-main) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

/* 佣金结算行操作里 .row-actions button.primary 同样是白底白字 */
body.theme-black .row-actions button.primary {
    color: #000 !important;
    border-color: rgba(0, 0, 0, 0.4) !important;
}
body.theme-black .row-actions button.primary:hover {
    color: #000 !important;
    opacity: .85;
}