/**
 * 主题切换器样式
 * 开发者：工联网学院 徐峰
 */

/* ========== 主题切换按钮 ========== */
.theme-switcher-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    z-index: 9999;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* 深色模式下的按钮（显示太阳图标，因为点击会切换到浅色） */
.dark .theme-switcher-btn {
    background: linear-gradient(135deg, #1e3a5f 0%, #2d4a6f 100%);
    color: #fbbf24;
}

.dark .theme-switcher-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(251, 191, 36, 0.3);
}

/* 浅色模式下的按钮（显示月亮图标，因为点击会切换到深色） */
html:not(.dark) .theme-switcher-btn {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    color: #6366f1;
    border: 1px solid #e2e8f0;
}

html:not(.dark) .theme-switcher-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.2);
}

/* ========== 浅色主题覆盖规则 ========== */

/* 页面背景 - 从深灰渐变改为浅灰白 */
html:not(.dark) body {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
    color: #1e293b !important;
}

/* 网格背景 */
html:not(.dark) .bg-grid {
    background-image:
        linear-gradient(to right, rgba(22, 93, 255, 0.08) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(22, 93, 255, 0.08) 1px, transparent 1px) !important;
}

/* 装饰性光晕 - 调淡 */
html:not(.dark) .blur-3xl {
    opacity: 0.5;
}

/* 卡片背景 */
html:not(.dark) .bg-slate-800\/60,
html:not(.dark) .bg-slate-800\/40 {
    background-color: rgba(255, 255, 255, 0.85) !important;
    border-color: #e2e8f0 !important;
}

/* 边框颜色 */
html:not(.dark) .border-slate-700 {
    border-color: #e2e8f0 !important;
}

html:not(.dark) .border-slate-600 {
    border-color: #cbd5e1 !important;
}

/* 灰色文字 - 变深以提高可读性 */
html:not(.dark) .text-slate-300,
html:not(.dark) .text-slate-400 {
    color: #64748b !important;
}

html:not(.dark) .text-light {
    color: #1e293b !important;
}

html:not(.dark) .text-white {
    color: #1e293b !important;
}

/* 标题渐变色保持原有效果，无需覆盖 */

/* 输入框 */
html:not(.dark) .bg-slate-700\/50 {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #1e293b !important;
}

html:not(.dark) input::placeholder {
    color: #94a3b8 !important;
}

/* 输入框图标 */
html:not(.dark) input+.fa,
html:not(.dark) .pointer-events-none .fa {
    color: #94a3b8 !important;
}

/* 按钮悬停状态 */
html:not(.dark) .bg-slate-700:hover {
    background-color: #e2e8f0 !important;
}

html:not(.dark) .bg-slate-700 {
    background-color: #f1f5f9 !important;
    color: #334155 !important;
}

/* 页脚分割线 */
html:not(.dark) .border-t.border-slate-700 {
    border-color: #e2e8f0 !important;
}

/* 错误/成功消息框保持原样 */

/* 表格样式 */
html:not(.dark) table th {
    background-color: #f1f5f9 !important;
    color: #334155 !important;
}

html:not(.dark) table td {
    border-color: #e2e8f0 !important;
}

html:not(.dark) tbody tr:hover {
    background-color: #f8fafc !important;
}

/* 模态框 */
html:not(.dark) .bg-slate-800 {
    background-color: #ffffff !important;
}

/* 过渡动画 */
body,
.bg-slate-800\/60,
.bg-slate-800\/40,
.bg-slate-700\/50,
.text-slate-300,
.text-slate-400,
.border-slate-700,
.border-slate-600 {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}