/* ============================================
   Theme Toggle Button Styles
   黑白主题切换按钮样式
   ============================================ */

/* 主题切换按钮容器 */
.theme-control-toggle.theme-control-toggle-slim {
    display: flex;
    align-items: center;
}

/* 主题切换按钮标签样式 */
.theme-control-toggle.theme-control-toggle-slim .theme-control-toggle-label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.75rem;
    height: auto;
    width: auto;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease-in-out;
    gap: 0.4rem;
}

/* Light模式下的按钮样式（显示Light按钮，绿色） */
[data-bs-theme="light"] .theme-control-toggle .theme-control-toggle-label {
    background-color: rgba(37, 211, 102, 0.2);
    color: #25d366;
}

[data-bs-theme="light"] .theme-control-toggle .theme-control-toggle-label:hover {
    background-color: rgba(37, 211, 102, 0.35);
    color: #2ecc71;
}

/* Dark模式下的按钮样式（显示Dark按钮，蓝色） */
[data-bs-theme="dark"] .theme-control-toggle .theme-control-toggle-label {
    background-color: rgba(56, 116, 255, 0.15);
    color: var(--phoenix-primary, #3874ff);
}

[data-bs-theme="dark"] .theme-control-toggle .theme-control-toggle-label:hover {
    background-color: rgba(56, 116, 255, 0.25);
    color: var(--phoenix-primary-dark, #2563eb);
}

/* 主题切换文字 */
.theme-toggle-text {
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
}

/* 主题切换图标 */
.theme-toggle-icon {
    font-size: 0.875rem;
    transition: transform 0.3s ease;
}

/* 悬停时图标旋转效果 */
.theme-control-toggle-label:hover .theme-toggle-icon {
    transform: rotate(45deg);
}

/* 隐藏原始checkbox */
.theme-control-toggle .theme-control-toggle-input {
    display: none;
}

/* 控制显示/隐藏 */
/* Dark模式：checkbox checked，显示Dark按钮，隐藏Light按钮 */
.theme-control-toggle .theme-control-toggle-input:checked ~ .theme-control-toggle-light {
    display: none !important;
}

.theme-control-toggle .theme-control-toggle-input:checked ~ .theme-control-toggle-dark {
    display: flex !important;
}

/* Light模式：checkbox unchecked，显示Light按钮，隐藏Dark按钮 */
.theme-control-toggle .theme-control-toggle-input:not(:checked) ~ .theme-control-toggle-dark {
    display: none !important;
}

.theme-control-toggle .theme-control-toggle-input:not(:checked) ~ .theme-control-toggle-light {
    display: flex !important;
}

/* 响应式调整 */
@media (max-width: 576px) {
    .theme-control-toggle.theme-control-toggle-slim .theme-control-toggle-label {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }
    
    .theme-toggle-icon {
        font-size: 0.75rem;
    }
}

/* ============================================
   Phoenix Theme Color Variables Override
   Phoenix主题颜色变量覆盖（确保兼容性）
   ============================================ */

:root,
[data-bs-theme="light"] {
    /* Body colors */
    --phoenix-body-color: #31374a;
    --phoenix-body-color-rgb: 49, 55, 74;
    --phoenix-body-bg: #f5f7fa;
    --phoenix-body-bg-rgb: 245, 247, 250;
    
    /* Secondary colors */
    --phoenix-secondary-color: #525b75;
    --phoenix-secondary-color-rgb: 82, 91, 117;
    --phoenix-secondary-bg: #e3e6ed;
    --phoenix-secondary-bg-rgb: 227, 230, 237;
    
    /* Tertiary colors */
    --phoenix-tertiary-color: #8a94ad;
    --phoenix-tertiary-color-rgb: 138, 148, 173;
    --phoenix-tertiary-bg: #eff2f6;
    --phoenix-tertiary-bg-rgb: 239, 242, 246;
    
    /* Quaternary colors */
    --phoenix-quaternary-color: #9fa6bc;
    --phoenix-quaternary-color-rgb: 159, 166, 188;
    --phoenix-quaternary-bg: #cbd0dd;
    --phoenix-quaternary-bg-rgb: 203, 208, 221;
    
    /* Body highlight colors */
    --phoenix-body-highlight-color: #222834;
    --phoenix-body-highlight-color-rgb: 34, 40, 52;
    --phoenix-body-highlight-bg: #eff2f6;
    --phoenix-body-highlight-bg-rgb: 239, 242, 246;
    
    /* Emphasis colors */
    --phoenix-emphasis-color: #141824;
    --phoenix-emphasis-color-rgb: 20, 24, 36;
    --phoenix-emphasis-bg: #fff;
    --phoenix-emphasis-bg-rgb: 255, 255, 255;
}

[data-bs-theme="dark"] {
    /* Body colors */
    --phoenix-body-color: #9fa6bc;
    --phoenix-body-color-rgb: 159, 166, 188;
    --phoenix-body-bg: #0f111a;
    --phoenix-body-bg-rgb: 15, 17, 26;
    
    /* Secondary colors */
    --phoenix-secondary-color: #8a94ad;
    --phoenix-secondary-color-rgb: 138, 148, 173;
    --phoenix-secondary-bg: #222834;
    --phoenix-secondary-bg-rgb: 34, 40, 52;
    
    /* Tertiary colors */
    --phoenix-tertiary-color: #6e7891;
    --phoenix-tertiary-color-rgb: 110, 120, 145;
    --phoenix-tertiary-bg: #1e2433;
    --phoenix-tertiary-bg-rgb: 30, 36, 51;
    
    /* Quaternary colors */
    --phoenix-quaternary-color: #525b75;
    --phoenix-quaternary-color-rgb: 82, 91, 117;
    --phoenix-quaternary-bg: #141824;
    --phoenix-quaternary-bg-rgb: 20, 24, 36;
    
    /* Body highlight colors */
    --phoenix-body-highlight-color: #cbd0dd;
    --phoenix-body-highlight-color-rgb: 203, 208, 221;
    --phoenix-body-highlight-bg: #222834;
    --phoenix-body-highlight-bg-rgb: 34, 40, 52;
    
    /* Emphasis colors */
    --phoenix-emphasis-color: #eff2f6;
    --phoenix-emphasis-color-rgb: 239, 242, 246;
    --phoenix-emphasis-bg: #141824;
    --phoenix-emphasis-bg-rgb: 20, 24, 36;
}

/* ============================================
   Common Element Theme Styles
   通用元素主题样式
   ============================================ */

/* 文本颜色类 */
.text-body {
    color: var(--phoenix-body-color) !important;
}

.text-body-secondary {
    color: var(--phoenix-secondary-color) !important;
}

.text-body-tertiary {
    color: var(--phoenix-tertiary-color) !important;
}

.text-body-quaternary {
    color: var(--phoenix-quaternary-color) !important;
}

.text-body-highlight {
    color: var(--phoenix-body-highlight-color) !important;
}

.text-body-emphasis {
    color: var(--phoenix-emphasis-color) !important;
}

/* 背景颜色类 */
.bg-body {
    background-color: var(--phoenix-body-bg) !important;
}

.bg-body-secondary {
    background-color: var(--phoenix-secondary-bg) !important;
}

.bg-body-tertiary {
    background-color: var(--phoenix-tertiary-bg) !important;
}

.bg-body-quaternary {
    background-color: var(--phoenix-quaternary-bg) !important;
}

.bg-body-highlight {
    background-color: var(--phoenix-body-highlight-bg) !important;
}

.bg-body-emphasis {
    background-color: var(--phoenix-emphasis-bg) !important;
}

/* 平滑过渡效果 */
body,
.main,
.navbar,
.card,
.content {
    transition: background-color 0.3s ease, color 0.3s ease;
}