/*
#	Project: ImgToC - 图床系统
#	This is NOT a freeware, use is subject to license terms.
#	Website: http://www.imgtoc.com
#	Author: ImgToC Dev Team
#	Copyright (C) 2024-2025 ImgToC. All Rights Reserved.
*/

/* 主题切换按钮样式 */
.theme-switcher {
    position: relative;
}

.theme-toggle-btn {
    color: var(--primary-color) !important;
    padding: 0.5rem;
    border: none;
    background: transparent;
    font-size: 1.25rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
}

.theme-toggle-btn:hover {
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary-dark) !important;
    transform: scale(1.1);
}

.theme-toggle-btn:focus {
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.2);
    outline: none;
}

/* 主题菜单样式 */
.theme-menu {
    min-width: 180px;
    padding: 0.5rem 0;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.theme-menu .dropdown-header {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.5rem 1rem;
    margin-bottom: 0.25rem;
}

.theme-option {
    display: flex;
    align-items: center;
    padding: 0.625rem 1rem !important;
    transition: all 0.2s ease;
    cursor: pointer;
}

.theme-option:hover {
    background-color: rgba(var(--primary-rgb), 0.08) !important;
}

.theme-option.active {
    background-color: rgba(var(--primary-rgb), 0.1) !important;
    color: var(--primary-color) !important;
    font-weight: 600;
}

.theme-option.active::after {
    content: '✓';
    margin-left: auto;
    color: var(--primary-color);
    font-weight: bold;
}

/* 主题颜色指示器 */
.theme-color {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 0.75rem;
    border: 2px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.theme-color.blue {
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
}

.theme-color.green {
    background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
}

.theme-color.purple {
    background: linear-gradient(135deg, #9333ea 0%, #a855f7 100%);
}

/* 默认主题变量（蓝色） */
:root {
    --primary-color: #2563eb;
    --primary-dark: #1d4ed8;
    --primary-light: #3b82f6;
    --secondary-color: #64748b;
    --accent-color: #f59e0b;
    --dark-bg: #0f172a;
    --light-bg: #f8fafc;
    --gradient-start: #1e3a8a;
    --gradient-mid: #2563eb;
    --gradient-end: #3b82f6;
    --shadow-color: rgba(37, 99, 235, 0.3);
    --primary-rgb: 37, 99, 235;
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-white: #ffffff;
    --border-color: #e2e8f0;
    --success-color: #16a34a;
    --danger-color: #dc2626;
    --warning-color: #f59e0b;
    --info-color: #2563eb;
}

/* 蓝色主题（明确设置，确保优先级） */
:root[data-theme="blue"],
body[data-theme="blue"],
html[data-theme="blue"] {
    --primary-color: #2563eb;
    --primary-dark: #1d4ed8;
    --primary-light: #3b82f6;
    --gradient-start: #1e3a8a;
    --gradient-mid: #2563eb;
    --gradient-end: #3b82f6;
    --shadow-color: rgba(37, 99, 235, 0.3);
    --primary-rgb: 37, 99, 235;
    --info-color: #2563eb;
}

/* 绿色主题 */
:root[data-theme="green"],
body[data-theme="green"],
html[data-theme="green"] {
    --primary-color: #16a34a;
    --primary-dark: #15803d;
    --primary-light: #22c55e;
    --gradient-start: #14532d;
    --gradient-mid: #16a34a;
    --gradient-end: #22c55e;
    --shadow-color: rgba(22, 163, 74, 0.3);
    --primary-rgb: 22, 163, 74;
    --info-color: #16a34a;
}

/* 紫色主题 */
:root[data-theme="purple"],
body[data-theme="purple"],
html[data-theme="purple"] {
    --primary-color: #9333ea;
    --primary-dark: #7e22ce;
    --primary-light: #a855f7;
    --gradient-start: #581c87;
    --gradient-mid: #9333ea;
    --gradient-end: #a855f7;
    --shadow-color: rgba(147, 51, 234, 0.3);
    --primary-rgb: 147, 51, 234;
    --info-color: #9333ea;
}

/* 应用主题颜色到关键元素 */
body[data-theme="blue"] .navbar-brand,
body[data-theme="blue"] .theme-toggle-btn {
    color: #2563eb !important;
}

body[data-theme="green"] .navbar-brand,
body[data-theme="green"] .theme-toggle-btn {
    color: #16a34a !important;
}

body[data-theme="purple"] .navbar-brand,
body[data-theme="purple"] .theme-toggle-btn {
    color: #9333ea !important;
}

/* 版本徽标主题适配 */
body[data-theme="blue"] .version-badge {
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4);
}

body[data-theme="green"] .version-badge {
    background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.4);
}

body[data-theme="purple"] .version-badge {
    background: linear-gradient(135deg, #9333ea 0%, #a855f7 100%);
    box-shadow: 0 2px 8px rgba(147, 51, 234, 0.4);
}

/* 按钮主题适配 */
body[data-theme="blue"] .btn-primary {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}

body[data-theme="blue"] .btn-primary:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #ffffff !important;
}

body[data-theme="green"] .btn-primary {
    background: #16a34a;
    border-color: #16a34a;
    color: #ffffff;
}

body[data-theme="green"] .btn-primary:hover {
    background: #15803d;
    border-color: #15803d;
    color: #ffffff !important;
}

body[data-theme="purple"] .btn-primary {
    background: #9333ea;
    border-color: #9333ea;
    color: #ffffff;
}

body[data-theme="purple"] .btn-primary:hover {
    background: #7e22ce;
    border-color: #7e22ce;
    color: #ffffff !important;
}

body[data-theme="blue"] .btn-outline-primary {
    color: #2563eb !important;
    border-color: #2563eb;
    background-color: transparent;
}

body[data-theme="blue"] .btn-outline-primary:hover {
    background-color: #2563eb;
    border-color: #2563eb;
    color: #ffffff !important;
}

body[data-theme="green"] .btn-outline-primary {
    color: #16a34a !important;
    border-color: #16a34a;
    background-color: transparent;
}

body[data-theme="green"] .btn-outline-primary:hover {
    background-color: #16a34a;
    border-color: #16a34a;
    color: #ffffff !important;
}

body[data-theme="purple"] .btn-outline-primary {
    color: #9333ea !important;
    border-color: #9333ea;
    background-color: transparent;
}

body[data-theme="purple"] .btn-outline-primary:hover {
    background-color: #9333ea;
    border-color: #9333ea;
    color: #ffffff !important;
}

/* 导航链接主题适配 */
body[data-theme="blue"] .nav-link:hover,
body[data-theme="blue"] .nav-link.active {
    color: #2563eb !important;
}

body[data-theme="green"] .nav-link:hover,
body[data-theme="green"] .nav-link.active {
    color: #16a34a !important;
}

body[data-theme="purple"] .nav-link:hover,
body[data-theme="purple"] .nav-link.active {
    color: #9333ea !important;
}

body[data-theme="blue"] .nav-link::after {
    background: #2563eb;
}

body[data-theme="green"] .nav-link::after {
    background: #16a34a;
}

body[data-theme="purple"] .nav-link::after {
    background: #9333ea;
}

/* 主题切换按钮悬停效果 - 使用CSS变量 */
.theme-toggle-btn:hover {
    background: rgba(var(--primary-rgb), 0.1) !important;
    color: var(--primary-dark) !important;
}

/* 主题选项激活状态 - 使用CSS变量 */
.theme-option.active {
    background-color: rgba(var(--primary-rgb), 0.1) !important;
    color: var(--primary-color) !important;
}

/* 下拉菜单主题适配 - 使用CSS变量 */
#priceDropdownMenu .dropdown-item:hover,
#ecosystemDropdownMenu .dropdown-item:hover {
    background-color: rgba(var(--primary-rgb), 0.08) !important;
}

#priceDropdownMenu .dropdown-item.active,
#ecosystemDropdownMenu .dropdown-item.active {
    background-color: rgba(var(--primary-rgb), 0.1) !important;
}

#priceDropdownMenu .dropdown-item.active:hover,
#ecosystemDropdownMenu .dropdown-item.active:hover {
    background-color: rgba(var(--primary-rgb), 0.15) !important;
}

/* ============================================
   通用主题适配类 - 用于页面背景渐变、卡片等
   ============================================ */

/* 页面标题背景渐变 - 使用CSS变量 */
.theme-gradient-bg {
    background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-mid) 50%, var(--gradient-end) 100%) !important;
}

/* 卡片边框和阴影主题适配 */
.theme-card {
    border-color: rgba(var(--primary-rgb), 0.2) !important;
    box-shadow: 0 2px 10px rgba(var(--primary-rgb), 0.1) !important;
}

.theme-card:hover {
    box-shadow: 0 12px 30px rgba(var(--primary-rgb), 0.2) !important;
    border-color: var(--primary-color) !important;
}

/* 图标背景渐变主题适配 */
.theme-icon-bg {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%) !important;
}

/* 链接颜色主题适配 */
.theme-link {
    color: var(--primary-color) !important;
}

.theme-link:hover {
    color: var(--primary-dark) !important;
}

/* 文本颜色主题适配 */
.theme-text-primary {
    color: var(--primary-color) !important;
}

.theme-text-muted {
    color: var(--text-secondary) !important;
}

/* 徽章主题适配 */
.theme-badge-primary {
    background-color: var(--primary-color) !important;
    color: var(--text-white) !important;
}

.theme-badge-outline {
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}

/* 边框主题适配 */
.theme-border {
    border-color: rgba(var(--primary-rgb), 0.3) !important;
}

.theme-border-left {
    border-left-color: var(--primary-color) !important;
}

/* 阴影主题适配 */
.theme-shadow {
    box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.3) !important;
}

.theme-shadow-hover:hover {
    box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.4) !important;
}

/* 背景色主题适配 */
.theme-bg-primary {
    background-color: var(--primary-color) !important;
}

.theme-bg-light {
    background-color: rgba(var(--primary-rgb), 0.1) !important;
}

/* 按钮主题适配（补充） */
.btn-theme-primary {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--text-white) !important;
}

.btn-theme-primary:hover {
    background: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
    color: var(--text-white) !important;
}

.btn-theme-outline {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    background-color: transparent !important;
}

.btn-theme-outline:hover {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--text-white) !important;
}