/* LoK Control Panel - 主题样式 */
/* 支持亮色和暗色主题 */

/* ===== 暗色主题 ===== */
[data-theme="dark"] {
    /* 基础颜色 */
    --bg-color: #212529;
    --text-color: #f8f9fa;
    --card-bg-color: #343a40;
    --border-color: #6c757d;
    
    /* 阴影 */
    --shadow-color: rgba(13, 110, 253, .5);
    --shadow-sm: 0 .125rem .25rem rgba(255,255,255,.075);
    --shadow-md: 0 .5rem 1rem rgba(255,255,255,.15);
    --shadow-lg: 0 1rem 3rem rgba(255,255,255,.175);
    
    /* 状态颜色 */
    --status-info-bg: #031633;
    --status-info-text: #a1c9ff;
    --status-success-bg: #052b15;
    --status-success-text: #75b798;
    --status-error-bg: #340a0e;
    --status-error-text: #f1aeb5;
    --status-warning-bg: #332701;
    --status-warning-text: #ffda6a;
    
    /* 表格颜色 */
    --table-header-bg: #495057;
    --table-border-color: #495057;
    --table-hover-bg: rgba(13, 110, 253, 0.2);
    --table-stripe-bg: rgba(13, 110, 253, 0.1);
    
    /* 配置区域 */
    --config-area-bg: #2d3439;
}

/* ===== 主题切换动画 ===== */
[data-theme="dark"] * {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ===== 暗色主题特殊样式 ===== */
[data-theme="dark"] .navbar {
    background-color: #1a1d20 !important;
}

[data-theme="dark"] .card {
    background-color: var(--card-bg-color);
    border-color: var(--border-color);
}

[data-theme="dark"] .dropdown-menu {
    background-color: var(--card-bg-color);
    border-color: var(--border-color);
}

[data-theme="dark"] .dropdown-item {
    color: var(--text-color);
}

[data-theme="dark"] .dropdown-item:hover {
    background-color: var(--bg-color);
}

[data-theme="dark"] .modal-content {
    background-color: var(--card-bg-color);
    color: var(--text-color);
}

[data-theme="dark"] .form-control {
    background-color: var(--bg-color);
    color: var(--text-color);
    border-color: var(--border-color);
}

[data-theme="dark"] .form-control:focus {
    background-color: var(--bg-color);
    color: var(--text-color);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: #adb5bd;
}

/* ===== 主题切换按钮样式 ===== */
#theme-toggle {
    transition: transform 0.3s ease;
}

#theme-toggle:hover {
    transform: rotate(20deg);
}

[data-theme="dark"] #theme-icon::before {
    content: '☀️';
}

[data-theme="light"] #theme-icon::before {
    content: '🌙';
}

/* ===== Bootstrap组件暗色主题适配 ===== */
[data-theme="dark"] .nav-tabs {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--text-color);
}

[data-theme="dark"] .nav-tabs .nav-link:hover {
    border-color: var(--border-color);
}

[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--card-bg-color);
    border-color: var(--border-color) var(--border-color) transparent;
    color: var(--text-color);
}

[data-theme="dark"] .tab-content {
    background-color: var(--card-bg-color);
    border-color: var(--border-color);
}

[data-theme="dark"] .alert {
    color: var(--text-color);
}

[data-theme="dark"] .alert-success {
    background-color: var(--status-success-bg);
    border-color: var(--status-success-text);
    color: var(--status-success-text);
}

[data-theme="dark"] .alert-danger {
    background-color: var(--status-error-bg);
    border-color: var(--status-error-text);
    color: var(--status-error-text);
}

[data-theme="dark"] .alert-info {
    background-color: var(--status-info-bg);
    border-color: var(--status-info-text);
    color: var(--status-info-text);
}

[data-theme="dark"] .alert-warning {
    background-color: var(--status-warning-bg);
    border-color: var(--status-warning-text);
    color: var(--status-warning-text);
}

/* ===== Badge适配 ===== */
[data-theme="dark"] .badge {
    color: #fff;
}

/* ===== 代码块适配 ===== */
[data-theme="dark"] code {
    background-color: var(--bg-color);
    color: #f8f9fa;
}

/* ===== ECharts图表适配 ===== */
[data-theme="dark"] .chart-container {
    background-color: var(--card-bg-color);
}

/* ===== 主题切换过渡效果 ===== */
html[data-theme-transition] *,
html[data-theme-transition] *::before,
html[data-theme-transition] *::after {
    transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease !important;
}