/**
 * 亮色主题覆盖层（深色专属硬编码）
 * 由 theme.css 按选择器拆分，与 dark/css/common.css 结构对应。
 * 规则保持原 theme.css 先后次序；仅命中 html[data-theme="light"]，暗色零影响。
 */

/**
 * AI 智能客服平台 - 亮色主题覆盖层
 * 在 dark 全套样式之后按需加载（data-theme="light" 时由 theme.js 注入），
 * 通过覆盖 CSS 变量与少量深色专属硬编码，将界面整体切换为亮色主题。
 * 组件大多经 var(--xxx) 取色，故只需重定义 :root 变量 + 背景/玻璃/输入等关键覆盖。
 * 作者: Calvin Liu <calvinliu@hk.chinamobile.com>
 * 版本: V1.0.0
 * 版权: MIT
 */

/* ===== 亮色设计令牌（经典 B 端商务白：浅灰底 + 纯白卡片） =====
   注意：本样式表常驻加载（不再动态注入），所有规则必须带 html[data-theme="light"] 前缀，
   仅在亮色主题下生效，暗色主题零影响 */


/* ===== 全局背景：纯净浅灰，无彩色光晕（商务白基底，衬托白卡片层次） ===== */
html[data-theme="light"] body {
    background: var(--bg-deep);
    color: var(--text-primary);
}

html[data-theme="light"] body::before {
    background: linear-gradient(180deg, #f5f6fa 0%, #eef0f6 100%);
}

/* 极光层隐藏：商务白主题不需要动态彩色背景 */
html[data-theme="light"] body::after {
    display: none;
}

/* ===== 面板卡片：纯白实体卡片 + 柔和投影（商务白层次） ===== */
html[data-theme="light"] .glass {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.08);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.07);
}

/* 弹窗卡片提亮 */
html[data-theme="light"] .usermenu-modal-card,
html[data-theme="light"] .cdr-modal-card,
html[data-theme="light"] .incoming-card {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(15, 23, 42, 0.1);
}

/* ===== 通用按钮：浅色底 ===== */
html[data-theme="light"] .btn {
    background: rgba(15, 23, 42, 0.05);
    color: var(--text-primary);
    border-color: var(--bg-glass-border);
}

html[data-theme="light"] .btn:hover {
    background: rgba(96, 165, 250, 0.12);
}

/* 主按钮：白底 + 彩虹描边（同暗色结构，内层由深改浅），文字转深色保证可读 */
html[data-theme="light"] .btn-primary {
    background: linear-gradient(rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.94)) padding-box,
                var(--rainbow) border-box;
    border: 1px solid transparent;
    color: var(--text-primary);
}

html[data-theme="light"] .btn-primary:hover:not(:disabled) {
    box-shadow: var(--glow-cyan);
}

/* ===== 输入/下拉/文本域：浅色底深字（排除 checkbox/radio，避免压住其选中配色） ===== */
html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="light"] select,
html[data-theme="light"] textarea {
    background: rgba(255, 255, 255, 0.9) !important;
    color: var(--text-primary) !important;
    border-color: rgba(15, 23, 42, 0.16) !important;
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
    color: #94a3b8;
}

/* ===== 下拉/弹层深色底提亮 ===== */
html[data-theme="light"] .lang-dropdown,
html[data-theme="light"] .dropdown-list,
html[data-theme="light"] .app-dropdown-list {
    background: var(--bg-dropdown) !important;
    color: var(--text-primary) !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
}

/* ===== 滚动条浅色 ===== */
html[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.18);
}

html[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(15, 23, 42, 0.32);
}

/* ===== 4. 下拉组件：可见边框 + 浅色弹层 + 悬停态 ===== */
html[data-theme="light"] .lang-btn,
html[data-theme="light"] .app-dropdown-btn {
    background: rgba(255, 255, 255, 0.85) !important;
    color: var(--text-primary) !important;
    border: 1px solid rgba(15, 23, 42, 0.22) !important;
}

html[data-theme="light"] .lang-btn:hover,
html[data-theme="light"] .app-dropdown-btn:hover {
    border-color: rgba(96, 165, 250, 0.55) !important;
    background: rgba(96, 165, 250, 0.08) !important;
}

html[data-theme="light"] .lang-dropdown,
html[data-theme="light"] .dropdown-list,
html[data-theme="light"] .app-dropdown-list {
    background: var(--bg-dropdown) !important;
    color: var(--text-primary) !important;
    border: 1px solid rgba(15, 23, 42, 0.2) !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.16) !important;
}

html[data-theme="light"] .lang-dropdown .lang-item,
html[data-theme="light"] .app-dropdown-list .dropdown-item,
html[data-theme="light"] .app-dropdown-list .lang-item {
    color: var(--text-primary) !important;
}

html[data-theme="light"] .lang-dropdown .lang-item:hover,
html[data-theme="light"] .app-dropdown-list .dropdown-item:hover,
html[data-theme="light"] .app-dropdown-list .lang-item:hover {
    background: rgba(96, 165, 250, 0.09) !important;
    color: var(--neon-cyan) !important;
}

html[data-theme="light"] .lang-dropdown .lang-item.active,
html[data-theme="light"] .app-dropdown-list .dropdown-item.active,
html[data-theme="light"] .app-dropdown-list .lang-item.active {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.14), rgba(96, 165, 250, 0.1)) !important;
    color: var(--neon-cyan) !important;
    font-weight: 700 !important;
}

/* ================= 第三轮：配色打磨（toast/徽章/时间线/小模块/玻璃面板） ================= */

/* ===== 顶部 toast：白底 + 彩虹描边 + 深色文字 ===== */
html[data-theme="light"] .app-toast {
    background: linear-gradient(rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.97)) padding-box,
                linear-gradient(90deg, rgba(96, 165, 250, 0.55), rgba(124, 58, 237, 0.55)) border-box;
    border: 1px solid transparent;
    color: var(--text-primary);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18), 0 0 12px rgba(96, 165, 250, 0.12);
}

html[data-theme="light"] .app-toast.toast-success i { color: #65a30d; }

html[data-theme="light"] .app-toast.toast-error i { color: #dc2626; }

html[data-theme="light"] .app-toast.toast-info i { color: #0891b2; }

/* ===== 玻璃面板/小卡片：纯白实体卡片（与首轮 .glass 一致，商务白） ===== */
html[data-theme="light"] .glass {
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.07);
}

/* ===== 通用按钮：浅灰底加深对比，悬停青调 ===== */
html[data-theme="light"] .btn {
    background: rgba(15, 23, 42, 0.06);
    border-color: rgba(15, 23, 42, 0.14);
}

html[data-theme="light"] .btn:hover:not(:disabled):not(.btn-primary) {
    background: rgba(96, 165, 250, 0.12);
    border-color: rgba(96, 165, 250, 0.4);
    color: var(--neon-cyan);
}

/* 危险/次要按钮保持语义色文字 */
html[data-theme="light"] .btn-danger {
    color: #dc2626;
    border-color: rgba(220, 38, 38, 0.35);
    background: rgba(220, 38, 38, 0.06);
}

html[data-theme="light"] .btn-danger:hover:not(:disabled) {
    background: rgba(220, 38, 38, 0.12);
    border-color: rgba(220, 38, 38, 0.55);
    color: #b91c1c;
}

html[data-theme="light"] .app-pager button {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.14);
    color: var(--text-primary);
}

html[data-theme="light"] .app-pager button:hover:not(:disabled) {
    border-color: rgba(96, 165, 250, 0.5);
    color: var(--neon-cyan);
}

html[data-theme="light"] .app-pager button.active {
    background: rgba(96, 165, 250, 0.14);
    border-color: rgba(96, 165, 250, 0.55);
    color: var(--neon-cyan);
    font-weight: 700;
}

/* ===== 下拉触发按钮：浅底 + 更清晰边框 ===== */
html[data-theme="light"] .app-dropdown-btn,
html[data-theme="light"] .lang-btn {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(15, 23, 42, 0.24) !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

html[data-theme="light"] .app-dropdown-btn:hover,
html[data-theme="light"] .lang-btn:hover {
    border-color: rgba(96, 165, 250, 0.6) !important;
    background: rgba(96, 165, 250, 0.07) !important;
    color: var(--neon-cyan) !important;
}

/* ===== 空态/占位文字 ===== */
html[data-theme="light"] .admin-empty,
html[data-theme="light"] .empty-text {
    color: var(--text-dim);
}

/* ===== 标签/键值对次要文字 ===== */
html[data-theme="light"] .form-label,
html[data-theme="light"] .admin-label {
    color: var(--text-secondary);
}

/* ===== 坐席状态卡片 ===== */
html[data-theme="light"] .status-card {
    background: rgba(255, 255, 255, 0.65);
    border-color: rgba(15, 23, 42, 0.1);
}

/* ===== AI 助手/质检高亮块 ===== */
html[data-theme="light"] .assist-card,
html[data-theme="light"] .qa-score-card,
html[data-theme="light"] .ai-card {
    background: rgba(255, 255, 255, 0.65);
    border-color: rgba(15, 23, 42, 0.1);
}

/* ===== 用户下拉浮层：阴影收敛（去深色重投影与光晕） ===== */
html[data-theme="light"] .dropdown-menu,
html[data-theme="light"] .usermenu-dropdown,
html[data-theme="light"] .app-dropdown-list,
html[data-theme="light"] .lang-dropdown,
html[data-theme="light"] .dropdown {
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(15, 23, 42, 0.06) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* ===== 按钮：商务白质感 ===== */
html[data-theme="light"] .btn {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.18);
    color: var(--text-primary);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

html[data-theme="light"] .btn:hover:not(:disabled):not(.btn-primary) {
    background: rgba(96, 165, 250, 0.06);
    border-color: rgba(96, 165, 250, 0.45);
    color: var(--neon-cyan);
    box-shadow: 0 1px 4px rgba(96, 165, 250, 0.12);
}

/* 主按钮：保持彩虹描边结构，文字深色 */
html[data-theme="light"] .btn-primary {
    background: linear-gradient(#ffffff, #ffffff) padding-box, var(--rainbow) border-box;
    border: 1px solid transparent;
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] .btn-primary:hover:not(:disabled) {
    box-shadow: 0 2px 8px rgba(96, 165, 250, 0.2);
}

/* 危险按钮 */
html[data-theme="light"] .btn-danger {
    background: #ffffff;
    color: #dc2626;
    border-color: rgba(220, 38, 38, 0.35);
}

html[data-theme="light"] .btn-danger:hover:not(:disabled) {
    background: rgba(220, 38, 38, 0.06);
    border-color: rgba(220, 38, 38, 0.55);
    color: #b91c1c;
}

/* ===== 文本输入框/下拉框/文本域：白底浅灰边 ===== */
html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="light"] select,
html[data-theme="light"] textarea {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.18) !important;
    color: var(--text-primary) !important;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus {
    border-color: rgba(96, 165, 250, 0.6) !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.12);
    outline: none;
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
    color: var(--text-dim);
}

/* ================= 第六轮：边框/阴影 100% 商务白规格 ================= */
/* 设计目标：白卡片 + 柔和中性投影 + 清晰中性灰边，聚焦仅一处青色高亮，杜绝光晕/重影/彩色边 */

/* ===== 按钮：白底 + 中性灰边 + 单层浅投影 ===== */
html[data-theme="light"] .btn {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.16);
    color: var(--text-primary);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

html[data-theme="light"] .btn:hover:not(:disabled):not(.btn-primary) {
    background: rgba(96, 165, 250, 0.05);
    border-color: rgba(96, 165, 250, 0.4);
    color: var(--neon-cyan);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.07);
}

/* 主按钮：白底 + 彩虹描边（无彩色发光，仅浅投影） */
html[data-theme="light"] .btn-primary {
    background: linear-gradient(#ffffff, #ffffff) padding-box, var(--rainbow) border-box;
    background-size: 100% 100%, 300% 100%;
    animation: rainbow-slide 6s linear infinite;
    border: 1px solid transparent;
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] .btn-primary:hover:not(:disabled) {
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
}

/* 危险按钮：白底红边红字（无红光） */
html[data-theme="light"] .btn-danger {
    background: #ffffff;
    color: #dc2626;
    border: 1px solid rgba(220, 38, 38, 0.32);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

html[data-theme="light"] .btn-danger:hover:not(:disabled) {
    background: rgba(220, 38, 38, 0.05);
    border-color: rgba(220, 38, 38, 0.5);
    color: #b91c1c;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.07);
}

/* ===== 文本输入框/下拉/文本域：白底 + 中性灰边 + 轻内阴影，聚焦单处青 ===== */
html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] .admin-input {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.18) !important;
    color: var(--text-primary) !important;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):hover:not(:focus),
html[data-theme="light"] select:hover:not(:focus),
html[data-theme="light"] textarea:hover:not(:focus),
html[data-theme="light"] .admin-input:hover:not(:focus) {
    border-color: rgba(15, 23, 42, 0.28) !important;
}

html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] .admin-input:focus {
    border-color: rgba(96, 165, 250, 0.6) !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.12);
    outline: none;
}

/* ===== 下拉弹层：白底 + 中性浅投影 + 细边（统一所有浮层） ===== */
html[data-theme="light"] .dropdown,
html[data-theme="light"] .usermenu-dropdown,
html[data-theme="light"] .app-dropdown-list,
html[data-theme="light"] .lang-dropdown {
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(15, 23, 42, 0.05) !important;
}

/* ===== 6. 弹窗内 tab（tabpane 容器）：浅色 ===== */
html[data-theme="light"] .admin-tabpane {
    color: var(--text-primary);
}

/* ================= 第八轮：激活/聚焦改中性商务蓝灰（去青色） ================= */
/* 导航激活/滑过、tab 激活、文本框聚焦、组织树/二级 tab/chat-tab 选中，
   统一改为经典 B 端中性蓝灰 #60a5fa（青色系显得轻浮，商务白用稳重蓝灰） */
:root,
html[data-theme="light"] {
    --biz-primary: #60a5fa;
    --biz-primary-soft: rgba(96, 165, 250, 0.1);
    --biz-primary-border: rgba(96, 165, 250, 0.3);
    --biz-primary-ring: rgba(96, 165, 250, 0.14);
}

/* ===== 文本框/下拉/文本域聚焦 ===== */
html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] .admin-input:focus {
    border-color: rgba(96, 165, 250, 0.55) !important;
    box-shadow: 0 0 0 3px var(--biz-primary-ring) !important;
}

/* ===== 下拉项激活/悬停 ===== */
html[data-theme="light"] .lang-dropdown .lang-item.active,
html[data-theme="light"] .app-dropdown-list .dropdown-item.active,
html[data-theme="light"] .app-dropdown-list .lang-item.active {
    background: var(--biz-primary-soft) !important;
    color: var(--biz-primary) !important;
}

html[data-theme="light"] .lang-dropdown .lang-item:hover,
html[data-theme="light"] .app-dropdown-list .dropdown-item:hover,
html[data-theme="light"] .app-dropdown-list .lang-item:hover {
    background: rgba(96, 165, 250, 0.06) !important;
    color: var(--biz-primary) !important;
}

/* ===== 分页器激活页 ===== */
html[data-theme="light"] .app-pager button.active {
    background: var(--biz-primary-soft);
    border-color: var(--biz-primary-border);
    color: var(--biz-primary);
}

html[data-theme="light"] .app-pager button:hover:not(:disabled):not(.active) {
    border-color: var(--biz-primary-border);
    color: var(--biz-primary);
}

/* ================= 第九轮：按钮全面商务化 / 日期面板 / 全透明loading ================= */

/* ===== 主按钮：实心商务蓝底白字（彻底去除暗色霓虹彩虹描边与流光动画） ===== */
html[data-theme="light"] .btn-primary {
    background: #60a5fa;
    background-image: none;
    animation: none;
    border: 1px solid #60a5fa;
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(96, 165, 250, 0.18);
    text-shadow: none;
}

html[data-theme="light"] .btn-primary:hover:not(:disabled) {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.1), 0 4px 12px rgba(96, 165, 250, 0.26);
}

html[data-theme="light"] .btn-primary:active:not(:disabled) {
    background: #2563eb;
    border-color: #2563eb;
}

/* 成功按钮：白底绿边绿字，悬停淡绿底 */
html[data-theme="light"] .btn-success {
    background: #ffffff;
    color: #16a34a;
    border: 1px solid rgba(22, 163, 74, 0.35);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

html[data-theme="light"] .btn-success:hover:not(:disabled) {
    background: rgba(22, 163, 74, 0.06);
    border-color: rgba(22, 163, 74, 0.55);
    color: #15803d;
    box-shadow: 0 1px 4px rgba(22, 163, 74, 0.12);
}

/* 加载中按钮内置 spinner 与全局 spinner：蓝灰化 */
html[data-theme="light"] .spinner,
html[data-theme="light"] .view-loading-spinner {
    border-color: rgba(96, 165, 250, 0.2);
    border-top-color: #60a5fa;
}

html[data-theme="light"] .app-loading {
    color: var(--text-secondary);
}

html[data-theme="light"] .app-loading i {
    color: #60a5fa;
}

/* ===== 用户菜单弹窗卡片（资料/改密/关于）：纯白 ===== */
html[data-theme="light"] .usermenu-modal-card,
html[data-theme="light"] .cdr-modal-card,
html[data-theme="light"] .incoming-card {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.1);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: var(--text-primary);
}

/* ===== 2. 分页条与表格之间的分割线删除（表格已有卡片边框） ===== */
html[data-theme="light"] .app-pager {
    border-top: none;
}

/* ===== 4. 电话条：按钮 + 下拉内容商务白（去青色） ===== */
/* 下拉面板本体：清掉霓虹青边框 */
html[data-theme="light"] .dropdown {
    border: 1px solid rgba(15, 23, 42, 0.1);
}

/* ===== 修正：分页条分割线彻底删除（暗色保留） ===== */
html[data-theme="light"] .app-pager,
html[data-theme="light"] .cdr-pager,
html[data-theme="light"] .qa-pager-bottom .app-pager,
html[data-theme="light"] .logs-pager-bottom .app-pager {
    border-top: none !important;
    border-top-width: 0 !important;
}

/* ================= 第十七轮：全站扁平化 =================
   亮色主题统一扁平化设计：
   1) 去除一切投影、文字阴影、毛玻璃模糊（含伪元素），层级全靠 1px 中性细边框与留白表达；
   2) 页面背景由渐变改纯色；面板标题装饰条、下拉激活项等残留渐变改平面填充；
   3) 焦点态改用 outline 描边呈现（不受投影清除影响），可访问性不丢失；
   4) 登录页插画（.cc-*）同为平面色块风格，一并去除投影保持整体一致 */
html[data-theme="light"] *,
html[data-theme="light"] *::before,
html[data-theme="light"] *::after {
    box-shadow: none !important;
    text-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* 页面背景：纯色取代浅灰蓝渐变 */
html[data-theme="light"] body::before {
    background: #f1f3f8;
}

/* 下拉/语言菜单激活项：平面纯色取代双向渐变 */
html[data-theme="light"] .lang-dropdown .lang-item.active,
html[data-theme="light"] .app-dropdown-list .dropdown-item.active,
html[data-theme="light"] .app-dropdown-list .lang-item.active {
    background: rgba(96, 165, 250, 0.12) !important;
}

/* 焦点可见性：投影被清除后改用描边呈现焦点 */
html[data-theme="light"] *:focus-visible {
    outline: 2px solid rgba(96, 165, 250, 0.55);
    outline-offset: 1px;
}