/* ============================================================================
 *  Macy 智能服务云平台 · 主题切换组件 V2
 *  2026-10-06
 *
 *  V2 变更：
 *    1. 后台页面挂到顶栏 .header-right（与平台自带按钮同位），不再出现两个按钮
 *    2. 主题从 4 套增加到 8 套（新增 绿色/橙色/青色/金色）
 *    3. 修复"换主题后字体发虚"：
 *        - 还原子像素抗锯齿（antialiased → auto）
 *        - 关闭 optimizeLegibility（Windows 上会导致发虚）
 *        - 提升 --text-muted 对比度到 4.5:1 以上
 *
 *  与平台自带 useTheme.js 完全兼容：
 *    localStorage['qqbot-theme'] / document.documentElement.dataset.theme / qqbot-theme-change
 * ==========================================================================*/

/* ---------- 1) 隐藏平台自带的那个切换按钮（避免出现两个） ---------- */
.theme-trigger {
    display: none !important;
}

/* ---------- 2) 字体清晰度修复（关键） ----------
 * 平台在 body 上设了 -webkit-font-smoothing:antialiased 与
 * text-rendering:optimizeLegibility，在 Windows/LCD 上会关闭子像素渲染，
 * 让笔画变细、发虚。这里还原为默认值，字体立刻变实。
 */
html,
body,
#app,
.ant-app {
    -webkit-font-smoothing: auto !important;
    -moz-osx-font-smoothing: auto !important;
    text-rendering: auto !important;
}

/* ---------- 3) 提升次要文字对比度（原来是 2.6~3:1，偏淡） ---------- */
:root[data-theme=light] {
    --text-secondary: #5b6472;
    --text-muted: #6e7684;
}

:root[data-theme=blue] {
    --text-secondary: #536278;
    --text-muted: #6b7a90;
}

:root[data-theme=pink] {
    --text-secondary: #705868;
    --text-muted: #7d6272;
}

:root[data-theme=dark] {
    --text-muted: #949daf;
}

/* ---------- 4) 新增主题：绿色 ---------- */
:root[data-theme=green] {
    --primary: #16a34a;
    --primary-light: #4ade80;
    --primary-dark: #15803d;
    --primary-bg: rgba(22, 163, 74, .09);
    --bg-page: #f4faf6;
    --bg-soft: #eef8f2;
    --bg-card: #ffffff;
    --bg-elevated: #ffffff;
    --bg-subtle: #f7fcf9;
    --text-primary: #14261b;
    --text-secondary: #4a6656;
    --text-muted: #5f7d6b;
    --border-light: rgba(22, 101, 52, .10);
    --border-medium: rgba(22, 101, 52, .18);
    --highlight-bg: rgba(22, 163, 74, .10);
}

/* ---------- 5) 新增主题：橙色 ---------- */
:root[data-theme=orange] {
    --primary: #ea580c;
    --primary-light: #fb923c;
    --primary-dark: #c2410c;
    --primary-bg: rgba(234, 88, 12, .09);
    --bg-page: #fdf7f3;
    --bg-soft: #faf0e9;
    --bg-card: #ffffff;
    --bg-elevated: #ffffff;
    --bg-subtle: #fdfaf8;
    --text-primary: #2b1a10;
    --text-secondary: #6b5546;
    --text-muted: #7d6553;
    --border-light: rgba(140, 60, 20, .10);
    --border-medium: rgba(140, 60, 20, .18);
    --highlight-bg: rgba(234, 88, 12, .10);
}

/* ---------- 6) 新增主题：青色 ---------- */
:root[data-theme=teal] {
    --primary: #0891b2;
    --primary-light: #22d3ee;
    --primary-dark: #0e7490;
    --primary-bg: rgba(8, 145, 178, .09);
    --bg-page: #f2fafc;
    --bg-soft: #e9f6fa;
    --bg-card: #ffffff;
    --bg-elevated: #ffffff;
    --bg-subtle: #f6fcfd;
    --text-primary: #102630;
    --text-secondary: #46626c;
    --text-muted: #587680;
    --border-light: rgba(8, 90, 110, .10);
    --border-medium: rgba(8, 90, 110, .18);
    --highlight-bg: rgba(8, 145, 178, .10);
}

/* ---------- 7) 新增主题：金色 ---------- */
:root[data-theme=gold] {
    --primary: #ca8a04;
    --primary-light: #facc15;
    --primary-dark: #a16207;
    --primary-bg: rgba(202, 138, 4, .11);
    --bg-page: #fdfaf2;
    --bg-soft: #faf5e6;
    --bg-card: #ffffff;
    --bg-elevated: #ffffff;
    --bg-subtle: #fdfbf6;
    --text-primary: #2a2208;
    --text-secondary: #6a5b34;
    --text-muted: #7a6c46;
    --border-light: rgba(130, 100, 10, .12);
    --border-medium: rgba(130, 100, 10, .20);
    --highlight-bg: rgba(202, 138, 4, .12);
}

/* ============================================================================
 *  让 Ant Design Vue 组件跟随新主题的主色
 *  ---------------------------------------------------------------------------
 *  平台产物里写死了一张只有 4 色（light/dark/blue/pink）的主色映射表，
 *  给 AntDV 组件上色。新增的绿色/橙色/青色/金色不在里面，AntDV 会退回默认紫。
 *  产物入口文件名和 URL 都不能改动（一改 Vite 的 chunk 解析就崩），
 *  所以这里用 CSS 覆盖：只在自定义主题下生效，统一引用 --primary 变量，
 *  四套主题共用同一段规则，无需重复写色值。
 * ==========================================================================*/

:root.mq-custom-theme .ant-btn-primary {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
}

:root.mq-custom-theme .ant-btn-primary:not(:disabled):hover {
    background: var(--primary-light) !important;
    border-color: var(--primary-light) !important;
}

:root.mq-custom-theme .ant-btn-primary:not(:disabled):active {
    background: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
}

:root.mq-custom-theme .ant-btn-link,
:root.mq-custom-theme .ant-btn-text:not(:disabled):hover,
:root.mq-custom-theme .ant-btn-default:not(:disabled):hover {
    color: var(--primary) !important;
}

:root.mq-custom-theme .ant-btn-default:not(:disabled):hover {
    border-color: var(--primary) !important;
}

:root.mq-custom-theme .ant-menu-light .ant-menu-item-selected,
:root.mq-custom-theme .ant-menu-light .ant-menu-submenu-selected > .ant-menu-submenu-title {
    color: var(--primary) !important;
    background: var(--primary-bg) !important;
}

:root.mq-custom-theme .ant-menu-item-selected .anticon,
:root.mq-custom-theme .ant-menu-item-active,
:root.mq-custom-theme .ant-menu-submenu-active > .ant-menu-submenu-title {
    color: var(--primary) !important;
}

:root.mq-custom-theme .ant-switch-checked {
    background: var(--primary) !important;
}

:root.mq-custom-theme .ant-tabs-tab-active .ant-tabs-tab-btn,
:root.mq-custom-theme .ant-tabs-tab:hover {
    color: var(--primary) !important;
}

:root.mq-custom-theme .ant-tabs-ink-bar {
    background: var(--primary) !important;
}

:root.mq-custom-theme .ant-pagination-item-active {
    border-color: var(--primary) !important;
}

:root.mq-custom-theme .ant-pagination-item-active a,
:root.mq-custom-theme .ant-pagination-item:hover a,
:root.mq-custom-theme .ant-pagination-prev:hover .ant-pagination-item-link,
:root.mq-custom-theme .ant-pagination-next:hover .ant-pagination-item-link {
    color: var(--primary) !important;
}

:root.mq-custom-theme .ant-checkbox-checked .ant-checkbox-inner {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
}

:root.mq-custom-theme .ant-radio-checked .ant-radio-inner {
    border-color: var(--primary) !important;
}

:root.mq-custom-theme .ant-radio-checked .ant-radio-inner::after {
    background: var(--primary) !important;
}

:root.mq-custom-theme .ant-radio-button-wrapper-checked {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

:root.mq-custom-theme .ant-slider-track {
    background: var(--primary) !important;
}

:root.mq-custom-theme .ant-slider-handle::after {
    box-shadow: 0 0 0 2px var(--primary) !important;
}

:root.mq-custom-theme .ant-progress-bg {
    background: var(--primary) !important;
}

:root.mq-custom-theme .ant-spin-dot-item {
    background: var(--primary) !important;
}

:root.mq-custom-theme .ant-input:focus,
:root.mq-custom-theme .ant-input-focused,
:root.mq-custom-theme .ant-select-focused .ant-select-selector,
:root.mq-custom-theme .ant-picker-focused,
:root.mq-custom-theme .ant-input-affix-wrapper-focused {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 2px var(--primary-bg) !important;
}

:root.mq-custom-theme .ant-select-item-option-selected,
:root.mq-custom-theme .ant-dropdown-menu-item-selected {
    background: var(--primary-bg) !important;
    color: var(--primary) !important;
}

:root.mq-custom-theme .ant-steps-item-process .ant-steps-item-icon {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
}

:root.mq-custom-theme .ant-steps-item-finish .ant-steps-item-icon {
    border-color: var(--primary) !important;
}

:root.mq-custom-theme .ant-steps-item-finish .ant-steps-item-icon > .ant-steps-icon,
:root.mq-custom-theme .ant-steps-item-finish .ant-steps-item-title::after {
    color: var(--primary) !important;
    background: var(--primary) !important;
}

:root.mq-custom-theme .ant-table-tbody > tr.ant-table-row-selected > td {
    background: var(--primary-bg) !important;
}

:root.mq-custom-theme .ant-segmented-item-selected {
    color: var(--primary) !important;
}

:root.mq-custom-theme .ant-tag-checkable-checked {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
}

:root.mq-custom-theme .ant-float-btn-primary .ant-float-btn-body {
    background: var(--primary) !important;
}

:root.mq-custom-theme .ant-typography a,
:root.mq-custom-theme .ant-alert-info .ant-alert-message a {
    color: var(--primary) !important;
}

/* 落地页里写死的品牌色（连平台自带的蓝色/粉色主题都不跟随），
   只对新增主题做跟随，避免改动你原有 4 套主题的观感 */
:root.mq-custom-theme .stat-number {
    color: var(--primary) !important;
}

:root.mq-custom-theme .gradient-text {
    background: linear-gradient(135deg, var(--primary), var(--primary-light)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

:root.mq-custom-theme .hero-btn-secondary:hover,
:root.mq-custom-theme .navbar a:hover {
    color: var(--primary) !important;
}

/* ---------- 修复：默认按钮在夜间模式下"白底浅字"看不清 ----------
 * 平台自己的 global-modern.css 只给 .ant-btn-default 设了
 *   border / color: var(--text-primary)
 * 却没设背景色，背景完全交给 AntDV 的运行时算法。
 * 夜间模式下 CSS 变量让文字变浅了（--text-primary=#f3f4f6），
 * 一旦 AntDV 的暗色算法没生效（例如运行时切换主题），背景就还是白色，
 * 结果就是"白底浅字"、几乎看不见。
 * 这里补上背景，让它跟着主题变量走，任何情况下都清晰。
 * 浅色主题下 --bg-card 本来就是 #fff，与 AntDV 默认一致，不会有副作用。
 */
.ant-btn-default:not(.ant-btn-dangerous):not(:disabled):not(.ant-btn-loading) {
    background: var(--bg-card, #fff) !important;
}

.ant-btn-default:not(.ant-btn-dangerous):not(:disabled):not(.ant-btn-loading):hover {
    background: var(--primary-bg, rgba(79, 70, 229, .08)) !important;
}

/* 纯文本按钮（type=text）在夜间也不要出现浅底 */
.ant-btn-text:not(:disabled):hover {
    background: var(--primary-bg, rgba(79, 70, 229, .08)) !important;
}

/* 虚线/链接按钮同理：底色跟随主题 */
.ant-btn-dashed:not(.ant-btn-dangerous):not(:disabled) {
    background: var(--bg-card, #fff) !important;
}

/* ============================================================================
 *  以下为组件自身样式
 * ==========================================================================*/

.mq-theme {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-family: inherit;
}

.mq-theme-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 11px;
    border: 1px solid var(--border-light, rgba(0, 0, 0, .1));
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary, #5b6472);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease, background .2s ease;
    -webkit-tap-highlight-color: transparent;
}

.mq-theme-btn:hover,
.mq-theme.is-open .mq-theme-btn {
    color: var(--primary, #4f46e5);
    background: var(--primary-bg, rgba(79, 70, 229, .08));
    border-color: transparent;
}

.mq-theme-swatch {
    width: 12px;
    height: 12px;
    border-radius: 4px;
    border: 1px solid rgba(128, 136, 148, .55);
    flex: 0 0 auto;
}

/* 后台顶栏里与平台按钮同宽同位 */
.header-right .mq-theme-btn {
    width: 34px;
    min-width: 34px;
    height: 34px;
    padding: 0;
    justify-content: center;
    border-color: transparent;
    border-radius: 8px;
}

.header-right .mq-theme-swatch {
    display: none;
}

.header-right .mq-theme-btn svg {
    font-size: 18px;
}

/* ---------- 下拉菜单：4 列紧凑网格（8 套主题只占 2 行） ---------- */
.mq-theme-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
    width: 244px;
    padding: 8px;
    border: 1px solid var(--border-light, rgba(0, 0, 0, .08));
    border-radius: 12px;
    background: var(--bg-elevated, var(--bg-card, #fff));
    box-shadow: var(--shadow-lg, 0 10px 30px rgba(15, 23, 42, .16));
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
    z-index: 9999;
}

.mq-theme.is-open .mq-theme-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mq-theme-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 8px 2px 7px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--text-primary, #1e1e2d);
    font-family: inherit;
    font-size: 11.5px;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    transition: background .16s ease, color .16s ease;
}

.mq-theme-item:hover {
    background: var(--primary-bg, rgba(79, 70, 229, .08));
    color: var(--primary, #4f46e5);
}

.mq-theme-item.is-active {
    color: var(--primary, #4f46e5);
    font-weight: 700;
    background: var(--primary-bg, rgba(79, 70, 229, .08));
}

.mq-theme-dot {
    width: 17px;
    height: 17px;
    border-radius: 6px;
    border: 1px solid rgba(128, 136, 148, .55);
    flex: 0 0 auto;
}

.mq-theme-name {
    white-space: nowrap;
}

/* 勾选放在右上角，不占高度 */
.mq-theme-check {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 11px;
    height: 11px;
    opacity: 0;
    color: var(--primary, #4f46e5);
    transition: opacity .16s ease;
}

.mq-theme-item.is-active .mq-theme-check { opacity: 1; }

/* 旧的分组标题/分隔线样式保留但不再使用 */
.mq-theme-group,
.mq-theme-sep { display: none !important; }

/* ---------- 悬浮版：已废弃，强制不显示 ----------
 * 用户反馈右下角悬浮按钮多余，组件改为"只在顶栏出现"。
 * 这里保留一条强制隐藏，双保险。
 */
.mq-theme--floating {
    display: none !important;
}

@media print {
    .mq-theme { display: none !important; }
}