/**
 * GLSYS 主题系统 - CSS变量版
 * 只定义一套变量，通过html属性切换主题，无闪烁
 */

/* ===== 暗色模式（默认）===== */
:root {
    /* 背景 */
    --bg-body: linear-gradient(135deg, #121212 0%, #1a1a1a 50%, #121212 100%);
    --bg-primary: #121212;
    --bg-secondary: rgba(30, 30, 30, 0.85);
    --bg-tertiary: rgba(40, 40, 40, 0.7);
    --bg-card: rgba(30, 30, 30, 0.7);
    --bg-input: rgba(255, 255, 255, 0.06);
    --bg-hover: rgba(255, 255, 255, 0.1);
    --bg-row-odd: rgba(255, 255, 255, 0.03);
    --bg-row-even: rgba(255, 255, 255, 0.06);
    
    /* 边框 */
    --border-color: rgba(255, 255, 255, 0.1);
    --border-focus: #FFD60A;
    
    /* 文字 */
    --text-primary: #ffffff;
    --text-secondary: #8E8E93;
    --text-muted: #636366;
    
    /* 按钮 */
    --btn-primary-bg: #FFD60A;
    --btn-primary-text: #000000;
    --btn-primary-hover: #ffcc00;
    --btn-secondary-bg: rgba(255, 255, 255, 0.1);
    --btn-secondary-text: #ffffff;
    --btn-secondary-hover: rgba(255, 255, 255, 0.15);
    
    /* 阴影 */
    --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.4);
    --shadow-focus: 0 0 0 3px rgba(255, 214, 10, 0.15);
    --shadow-btn: 0 4px 16px rgba(255, 214, 10, 0.3);
    
    /* 状态 */
    --color-success: #34C759;
    --color-success-bg: rgba(52, 199, 89, 0.15);
    --color-warning: #FF9F0A;
    --color-warning-bg: rgba(255, 159, 10, 0.15);
    --color-danger: #FF3B30;
    --color-danger-bg: rgba(255, 59, 48, 0.15);
    --color-info: #0A84FF;
    
    /* 强调色背景 */
    --accent-bg: rgba(255, 214, 10, 0.15);
    
    /* 悬停背景 */
    --hover-bg: rgba(255, 255, 255, 0.1);
    
    /* 按钮 */
    --button-secondary-bg: rgba(255, 255, 255, 0.1);

    /* 开关 */
    --toggle-bg: rgba(255, 255, 255, 0.15);
    
    /* 设置页面专用 */
    --accent-color: #FFD60A;           /* 强调色（用于滑块、tab激活等） */
    --border-color-light: rgba(255, 255, 255, 0.08);  /* 浅色分隔线 */
}

/* ===== 亮色模式 ===== */
html.light-mode {
    --bg-body: linear-gradient(135deg, #f5f5f7 0%, #e8e8ed 50%, #f5f5f7 100%);
    --bg-primary: #f5f5f7;
    --bg-secondary: rgba(255, 255, 255, 0.9);
    --bg-tertiary: rgba(240, 240, 240, 0.8);
    --bg-card: rgba(255, 255, 255, 0.7);
    --bg-input: rgba(0, 0, 0, 0.04);
    --bg-hover: rgba(0, 0, 0, 0.02);
    --bg-row-odd: rgba(0, 0, 0, 0.02);
    --bg-row-even: rgba(0, 0, 0, 0.04);

    --border-color: rgba(0, 0, 0, 0.1);
    --border-focus: #007AFF;

    --text-primary: #1D1D1F;
    --text-secondary: #6E6E73;
    --text-muted: #8E8E93;

    --btn-primary-bg: #007AFF;
    --btn-primary-text: #ffffff;
    --btn-primary-hover: #0051D5;
    --btn-secondary-bg: rgba(0, 0, 0, 0.05);
    --btn-secondary-text: #374151;
    --btn-secondary-hover: rgba(0, 0, 0, 0.08);

    --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.1);
    --shadow-focus: 0 0 0 3px rgba(0, 122, 255, 0.15);
    --shadow-btn: 0 4px 16px rgba(0, 122, 255, 0.3);

    /* 状态色（亮色模式覆盖） */
    --color-success: #28a745;
    --color-success-bg: rgba(40, 167, 69, 0.12);
    --color-warning: #fd7e14;
    --color-warning-bg: rgba(253, 126, 20, 0.12);
    --color-danger: #dc3545;
    --color-danger-bg: rgba(220, 53, 69, 0.12);
    --color-info: #007AFF;
    
    /* 强调色背景 */
    --accent-bg: rgba(0, 122, 255, 0.12);
    
    /* 悬停背景 */
    --hover-bg: rgba(0, 0, 0, 0.04);
    
    /* 按钮 */
    --button-secondary-bg: rgba(0, 0, 0, 0.05);

    /* 开关 */
    --toggle-bg: rgba(0, 0, 0, 0.15);
    
    /* 设置页面专用 */
    --accent-color: #007AFF;            /* 强调色 */
    --border-color-light: rgba(0, 0, 0, 0.06);  /* 浅色分隔线 */
}

/* ===== 基础样式（使用变量）===== */
body {
    background: var(--bg-body);
    background-size: 400% 400%;
    animation: gradientFlow 8s ease infinite;
    color: var(--text-primary);
}

@keyframes gradientFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.glass {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: var(--shadow-card);
}

.glass-input {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-primary);
    transition: all 0.3s ease;
}

.glass-input:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: var(--shadow-focus);
    background: var(--bg-hover);
}

.glass-input::placeholder {
    color: var(--text-muted);
}

.btn-primary {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-btn);
}

.btn-primary:hover {
    background: var(--btn-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.btn-secondary {
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background: var(--btn-secondary-hover);
}

/* 表格 */
.data-table thead th {
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-card);
}

.data-table tbody tr:nth-child(odd) {
    background: var(--bg-row-odd);
}

.data-table tbody tr:nth-child(even) {
    background: var(--bg-row-even);
}

.data-table tbody tr:hover {
    background: var(--bg-hover);
}

.data-table tbody td {
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

/* 下拉框 */
select {
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

select:focus {
    border-color: var(--border-focus);
    outline: none;
}

/* 文字工具类 */
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-muted { color: var(--text-muted) !important; }