/**
 * Advanced Dark Theme System
 *
 * 设计目标: Apple / Linear / Vercel / Stripe 风格的开发者控制台暗色模式
 * 特点:
 * - 避免纯黑背景，使用 neutral-900/950 层级
 * - 清晰的背景层级系统
 * - 柔和的阴影和边框
 * - 高对比度但不刺眼的文字
 * - 精心设计的交互状态
 */

/* ========== Dark Theme 颜色 Token ========== */

[data-theme="dark"] {
    /* ===== 背景层级系统 (从深到浅) ===== */

    /* 页面最底层背景 */
    --bg-base: #0a0a0a;                    /* neutral-950 */

    /* 主要背景（Sidebar, Header） */
    --bg-primary: #171717;                 /* neutral-900 */

    /* Section 背景 */
    --bg-secondary: #1f1f1f;               /* neutral-900 + 5% */

    /* Card 背景 */
    --card-bg: #262626;                    /* neutral-800 */

    /* Muted 背景（输入框、代码块） */
    --bg-muted: #2a2a2a;                   /* neutral-800 + 5% */

    /* Hover 背景（最浅） */
    --bg-hover: #333333;                   /* neutral-700 */

    /* ===== 文字颜色系统 ===== */

    /* 主要文字 */
    --text-primary: #fafafa;               /* neutral-50, 高对比度 */

    /* 次要文字 */
    --text-secondary: #d4d4d4;             /* neutral-300 */

    /* 辅助文字 */
    --text-tertiary: #a3a3a3;              /* neutral-400 */

    /* 占位文字 */
    --text-placeholder: #737373;           /* neutral-500 */

    /* 禁用文字 */
    --text-disabled: #525252;              /* neutral-600 */

    /* ===== 边框颜色系统 ===== */

    /* 极细边框（分隔线） */
    --border-subtle: #2a2a2a;              /* neutral-800 */

    /* 轻边框（卡片边框） */
    --border-light: #333333;               /* neutral-700 */

    /* 中等边框（输入框） */
    --border-medium: #404040;              /* neutral-700 + 10% */

    /* 强边框（分隔、强调） */
    --border-strong: #525252;              /* neutral-600 */

    /* Focus 边框 */
    --border-focus: #3b82f6;               /* blue-500 */

    /* ===== 品牌色系统 (Dark 优化) ===== */

    /* Primary（蓝色） */
    --brand-primary: #60a5fa;              /* blue-400 (暗色下提亮) */
    --brand-primary-hover: #3b82f6;        /* blue-500 */
    --brand-primary-active: #2563eb;       /* blue-600 */
    --brand-primary-bg: #1e40af;           /* blue-800 (暗色背景) */

    /* Accent（紫色） */
    --accent: #a78bfa;                     /* violet-400 */
    --accent-hover: #8b5cf6;               /* violet-500 */
    --accent-bg: rgba(139, 92, 246, 0.1); /* violet with opacity */

    /* ===== 语义色系统 (Dark 优化) ===== */

    /* Success（绿色） */
    --success: #4ade80;                    /* green-400 */
    --success-bg: rgba(34, 197, 94, 0.1);
    --success-border: rgba(34, 197, 94, 0.2);
    --success-text: #86efac;               /* green-300 */

    /* Warning（黄色） */
    --warning: #fbbf24;                    /* amber-400 */
    --warning-bg: rgba(251, 191, 36, 0.1);
    --warning-border: rgba(251, 191, 36, 0.2);
    --warning-text: #fcd34d;               /* amber-300 */

    /* Error（红色） */
    --error: #f87171;                      /* red-400 */
    --error-bg: rgba(239, 68, 68, 0.1);
    --error-border: rgba(239, 68, 68, 0.2);
    --error-text: #fca5a5;                 /* red-300 */

    /* Info（青色） */
    --info: #22d3ee;                       /* cyan-400 */
    --info-bg: rgba(6, 182, 212, 0.1);
    --info-border: rgba(6, 182, 212, 0.2);
    --info-text: #67e8f9;                  /* cyan-300 */

    /* ===== 按钮颜色系统 ===== */

    /* Primary 按钮 */
    --btn-primary-bg: #3b82f6;             /* blue-500 */
    --btn-primary-hover: #2563eb;          /* blue-600 */
    --btn-primary-active: #1d4ed8;         /* blue-700 */
    --btn-primary-text: #ffffff;

    /* Secondary 按钮 */
    --btn-secondary-bg: transparent;
    --btn-secondary-hover: var(--bg-hover);
    --btn-secondary-border: var(--border-medium);
    --btn-secondary-text: var(--text-secondary);

    /* Ghost 按钮 */
    --btn-ghost-hover: var(--bg-muted);
    --btn-ghost-text: var(--text-secondary);

    /* Danger 按钮 */
    --btn-danger-bg: #ef4444;              /* red-500 */
    --btn-danger-hover: #dc2626;           /* red-600 */
    --btn-danger-text: #ffffff;

    /* ===== 阴影系统 (Dark 优化) ===== */

    /* 极细阴影（分隔） */
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);

    /* 小阴影（卡片） */
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4),
                 0 1px 2px -1px rgba(0, 0, 0, 0.4);

    /* 中等阴影（浮动卡片） */
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5),
                 0 2px 4px -2px rgba(0, 0, 0, 0.5);

    /* 大阴影（Modal） */
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6),
                 0 4px 6px -4px rgba(0, 0, 0, 0.6);

    /* 超大阴影（Popover） */
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.7),
                 0 8px 10px -6px rgba(0, 0, 0, 0.7);

    /* ===== 其他系统色 ===== */

    /* Sidebar */
    --sidebar-bg: var(--bg-primary);
    --sidebar-border: var(--border-subtle);
    --sidebar-item-hover: var(--bg-hover);
    --sidebar-item-active: var(--brand-primary-bg);
    --sidebar-item-active-text: var(--brand-primary);

    /* Header */
    --header-bg: var(--bg-primary);
    --header-border: var(--border-subtle);

    /* Card */
    --card-border: var(--border-light);
    --card-hover-border: var(--border-medium);
    --card-hover-shadow: var(--shadow-md);

    /* Input */
    --input-bg: var(--bg-muted);
    --input-border: var(--border-medium);
    --input-focus-border: var(--border-focus);
    --input-text: var(--text-primary);

    /* Dropdown */
    --dropdown-bg: var(--card-bg);
    --dropdown-border: var(--border-light);
    --dropdown-shadow: var(--shadow-lg);
    --dropdown-item-hover: var(--bg-hover);

    /* Table */
    --table-header-bg: var(--bg-secondary);
    --table-row-hover: var(--bg-hover);
    --table-border: var(--border-subtle);

    /* Code */
    --code-bg: var(--bg-muted);
    --code-text: #e879f9;                  /* fuchsia-400 */
    --code-border: var(--border-light);
}

/* ========== 全局 Dark Mode 基础样式 ========== */

[data-theme="dark"] body {
    background-color: var(--bg-base);
    color: var(--text-primary);
}

/* ========== Sidebar Dark Mode ========== */

[data-theme="dark"] .apple-sidebar,
[data-theme="dark"] .console-sidebar,
[data-theme="dark"] .sidebar {
    background-color: var(--sidebar-bg);
    border-right-color: var(--sidebar-border);
}

[data-theme="dark"] .console-nav-item,
[data-theme="dark"] .menu-item {
    color: var(--text-secondary);
}

[data-theme="dark"] .console-nav-item:hover,
[data-theme="dark"] .menu-item:hover {
    background-color: var(--sidebar-item-hover);
    color: var(--text-primary);
}

[data-theme="dark"] .console-nav-item.active,
[data-theme="dark"] .menu-item.active {
    background-color: var(--sidebar-item-active);
    color: var(--sidebar-item-active-text);
}

/* ========== Header Dark Mode ========== */

[data-theme="dark"] .apple-header,
[data-theme="dark"] .console-header,
[data-theme="dark"] header {
    background-color: var(--header-bg);
    border-bottom-color: var(--header-border);
}

/* ========== Card Dark Mode ========== */

[data-theme="dark"] .card,
[data-theme="dark"] .provider-card,
[data-theme="dark"] .unified-card,
[data-theme="dark"] .shadcn-card,
[data-theme="dark"] .stat-card {
    background-color: var(--card-bg);
    border-color: var(--card-border);
    box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .card:hover,
[data-theme="dark"] .provider-card:hover,
[data-theme="dark"] .unified-card:hover,
[data-theme="dark"] .stat-card:hover {
    border-color: var(--card-hover-border);
    box-shadow: var(--card-hover-shadow);
}

/* ========== Button Dark Mode ========== */

[data-theme="dark"] .btn-primary,
[data-theme="dark"] .provider-card-btn-config,
[data-theme="dark"] .unified-card-btn-primary {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border: none;
}

[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .provider-card-btn-config:hover,
[data-theme="dark"] .unified-card-btn-primary:hover {
    background-color: var(--btn-primary-hover);
}

[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .provider-card-btn-test,
[data-theme="dark"] .unified-card-btn-secondary {
    background-color: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    border: 1px solid var(--btn-secondary-border);
}

[data-theme="dark"] .btn-secondary:hover,
[data-theme="dark"] .provider-card-btn-test:hover,
[data-theme="dark"] .unified-card-btn-secondary:hover {
    background-color: var(--btn-secondary-hover);
    color: var(--text-primary);
    border-color: var(--border-strong);
}

/* ========== Input Dark Mode ========== */

[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--input-text);
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    border-color: var(--input-focus-border);
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--text-placeholder);
}

/* ========== Dropdown Dark Mode ========== */

[data-theme="dark"] .dropdown,
[data-theme="dark"] #languageMenu,
[data-theme="dark"] .menu {
    background-color: var(--dropdown-bg);
    border-color: var(--dropdown-border);
    box-shadow: var(--dropdown-shadow);
}

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

/* ========== Table Dark Mode ========== */

[data-theme="dark"] table thead {
    background-color: var(--table-header-bg);
}

[data-theme="dark"] table tbody tr:hover {
    background-color: var(--table-row-hover);
}

[data-theme="dark"] table {
    border-color: var(--table-border);
}

[data-theme="dark"] table td,
[data-theme="dark"] table th {
    border-color: var(--table-border);
}

/* ========== Badge/Status Dark Mode ========== */

[data-theme="dark"] .provider-card-status.configured,
[data-theme="dark"] .badge-success {
    background-color: var(--success-bg);
    color: var(--success-text);
    border: 1px solid var(--success-border);
}

[data-theme="dark"] .provider-card-status.unconfigured,
[data-theme="dark"] .badge-muted {
    background-color: var(--bg-hover);
    color: var(--text-tertiary);
    border: 1px solid var(--border-medium);
}

[data-theme="dark"] .badge-warning {
    background-color: var(--warning-bg);
    color: var(--warning-text);
    border: 1px solid var(--warning-border);
}

[data-theme="dark"] .badge-error {
    background-color: var(--error-bg);
    color: var(--error-text);
    border: 1px solid var(--error-border);
}

/* ========== Code Block Dark Mode ========== */

[data-theme="dark"] code,
[data-theme="dark"] pre,
[data-theme="dark"] .api-key-block {
    background-color: var(--code-bg);
    color: var(--code-text);
    border-color: var(--code-border);
}

/* ========== Divider Dark Mode ========== */

[data-theme="dark"] hr,
[data-theme="dark"] .divider {
    border-color: var(--border-subtle);
}

/* ========== Scrollbar Dark Mode ========== */

[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--text-placeholder);
}

/* ========== Selection Dark Mode ========== */

[data-theme="dark"] ::selection {
    background-color: rgba(59, 130, 246, 0.3);
    color: var(--text-primary);
}

/* ========== Focus Visible Dark Mode ========== */

[data-theme="dark"] *:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

/* ========== Glassmorphism Dark Mode ========== */

[data-theme="dark"] .glass {
    background: rgba(38, 38, 38, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-light);
}

/* ========== 移除渐变背景（Dashboard 余额卡片等） ========== */

[data-theme="dark"] .gradient-card,
[data-theme="dark"] .balance-card {
    background: var(--card-bg) !important;
    background-image: none !important;
    border-left: 3px solid var(--brand-primary);
}

/* ========== Alert Dark Mode ========== */

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

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

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

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

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

/* ========== Progress Bar Dark Mode ========== */

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

[data-theme="dark"] .progress-bar {
    background-color: var(--brand-primary);
}

/* ========== Tooltip Dark Mode ========== */

[data-theme="dark"] .tooltip {
    background-color: var(--card-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-lg);
}

/* ========== Modal Dark Mode ========== */

[data-theme="dark"] .modal {
    background-color: var(--card-bg);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-xl);
}

[data-theme="dark"] .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.8);
}

/* ========== Tabs Dark Mode ========== */

[data-theme="dark"] .tabs {
    border-bottom-color: var(--border-subtle);
}

[data-theme="dark"] .tab-button {
    color: var(--text-tertiary);
    border-bottom-color: transparent;
}

[data-theme="dark"] .tab-button:hover {
    color: var(--text-secondary);
}

[data-theme="dark"] .tab-button.active {
    color: var(--brand-primary);
    border-bottom-color: var(--brand-primary);
}

/* ========== Empty State Dark Mode ========== */

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

[data-theme="dark"] .empty-state-icon {
    opacity: 0.2;
}