/**
 * 深色模式样式表
 * 提供完整的暗色主题
 */

/* 深色模式变量 */
:root {
    --dark-bg-primary: #1a1a2e;
    --dark-bg-secondary: #16213e;
    --dark-bg-tertiary: #0f3460;
    --dark-text-primary: #eaeaea;
    --dark-text-secondary: #a0a0a0;
    --dark-border: #2d3748;
    --dark-shadow: rgba(0, 0, 0, 0.5);
    --dark-accent: #667eea;
    --dark-accent-hover: #764ba2;
    --dark-success: #48bb78;
    --dark-warning: #ed8936;
    --dark-danger: #f56565;
}

/* 应用深色模式 */
body.dark-mode {
    background: linear-gradient(135deg, var(--dark-bg-primary) 0%, var(--dark-bg-secondary) 100%);
    color: var(--dark-text-primary);
}

/* 深色模式容器 */
body.dark-mode .container,
body.dark-mode .main-container,
body.dark-mode .content-wrapper {
    background: var(--dark-bg-secondary);
}

/* 深色模式卡片 */
body.dark-mode .card,
body.dark-mode .feature-card,
body.dark-mode .game-card,
body.dark-mode .music-card,
body.dark-mode .tool-card,
body.dark-mode .info-card {
    background: var(--dark-bg-tertiary);
    border: 1px solid var(--dark-border);
    box-shadow: 0 4px 6px var(--dark-shadow);
}

/* 深色模式文字 */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: var(--dark-text-primary);
}

body.dark-mode p,
body.dark-mode span,
body.dark-mode label {
    color: var(--dark-text-secondary);
}

/* 深色模式链接 */
body.dark-mode a {
    color: var(--dark-accent);
}

body.dark-mode a:hover {
    color: var(--dark-accent-hover);
}

/* 深色模式按钮 */
body.dark-mode button,
body.dark-mode .btn {
    background: var(--dark-accent);
    color: white;
    border: none;
}

body.dark-mode button:hover,
body.dark-mode .btn:hover {
    background: var(--dark-accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* 深色模式输入框 */
body.dark-mode input[type="text"],
body.dark-mode input[type="password"],
body.dark-mode input[type="email"],
body.dark-mode input[type="number"],
body.dark-mode textarea,
body.dark-mode select {
    background: var(--dark-bg-primary);
    color: var(--dark-text-primary);
    border: 1px solid var(--dark-border);
}

body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
    border-color: var(--dark-accent);
    outline: none;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

/* 深色模式滚动条 */
body.dark-mode ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

body.dark-mode ::-webkit-scrollbar-track {
    background: var(--dark-bg-primary);
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: var(--dark-border);
    border-radius: 5px;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: var(--dark-accent);
}

/* 深色模式特殊组件 */
body.dark-mode .modal {
    background: var(--dark-bg-primary);
}

body.dark-mode .modal-content {
    background: var(--dark-bg-secondary);
    border: 1px solid var(--dark-border);
}

body.dark-mode .dropdown-menu {
    background: var(--dark-bg-secondary);
    border: 1px solid var(--dark-border);
}

body.dark-mode .dropdown-item {
    color: var(--dark-text-secondary);
}

body.dark-mode .dropdown-item:hover {
    background: var(--dark-bg-tertiary);
    color: var(--dark-text-primary);
}

/* 深色模式表格 */
body.dark-mode table {
    background: var(--dark-bg-secondary);
    color: var(--dark-text-primary);
}

body.dark-mode th,
body.dark-mode td {
    border: 1px solid var(--dark-border);
}

body.dark-mode th {
    background: var(--dark-bg-tertiary);
}

/* 深色模式进度条 */
body.dark-mode .progress {
    background: var(--dark-bg-primary);
}

/* 深色模式徽章 */
body.dark-mode .badge {
    background: var(--dark-accent);
    color: white;
}

/* 深色模式警告/提示 */
body.dark-mode .alert {
    background: var(--dark-bg-tertiary);
    border-color: var(--dark-border);
    color: var(--dark-text-primary);
}

body.dark-mode .alert-success {
    border-left-color: var(--dark-success);
}

body.dark-mode .alert-warning {
    border-left-color: var(--dark-warning);
}

body.dark-mode .alert-danger {
    border-left-color: var(--dark-danger);
}

/* 深色模式切换按钮样式 */
.dark-mode-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--dark-accent);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.dark-mode-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
}

body.dark-mode .dark-mode-toggle {
    background: var(--dark-text-primary);
    color: var(--dark-bg-primary);
}

/* 深色模式过渡动画 */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

body.dark-mode *,
body.dark-mode *::before,
body.dark-mode *::after {
    transition: background-color 0.3s ease, 
                color 0.3s ease, 
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}