/**
 * 全局主题样式
 * 用于设置整个站点的亮色/暗色主题变量
 */

:root {
    /* 基础变量 */
    --transition-speed: 0.3s;
    
    /* 亮色模式变量 */
    --primary-color: #2d8cf0;
    --primary-color-rgb: 45, 140, 240;
    --primary-dark: #2b85e4;
    --primary-light: #5cadff;
    --text-color: #333;
    --accent-color: #f39c12;
    --accent-color-rgb: 243, 156, 18;
    --bg-color: #f5f5f5;
    --card-bg: #fff;
    --cardbg-bg: #f5f5f5;
    --border-color: #e0e0e0;
    --success-color: #2ecc71;
    --success-color-rgb: 46, 204, 113;
    --warning-color: #f39c12;
    --warning-color-rgb: 243, 156, 18;
    --danger-color: #e74c3c;
    --danger-color-rgb: 231, 76, 60;
    --info-color: #3498db;
    --info-color-rgb: 52, 152, 219;
    --online-color: #2ecc71;
    --offline-color: #95a5a6;
    --input-bg: #f9f9f9;
    --label-color: #666;
    --table-header-bg: #f5f7fa;
    --table-border: #ebeef5;
    --table-hover: #f5f7fa;
    --text-secondary: #606266;
    --text-tertiary: #909399;
    --reset-btn-bg: #f5f5f5;
    --reset-btn-color: #666;
    --reset-btn-border: #ddd;
    --reset-btn-hover: #e9e9e9;
    --pagination-border: #d9d9d9;
    --pagination-color: #606266;
    --pagination-bg: #ffffff;
    --pagination-active-bg: #1890ff;
    --pagination-active-color: #ffffff;
    --pagination-active-shadow: rgba(24, 144, 255, 0.3);
    --pagination-disabled-bg: #f5f5f5;
    --pagination-disabled-color: #d9d9d9;
    --pagination-hover-color: #1890ff;
    
    /* 弹窗/模态框变量 */
    --modal-bg: #fff;
    --modal-header-bg: #fff;
    --modal-border: #e0e0e0;
    --modal-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    --modal-close-color: #606266;
    --modal-close-hover-color: #333;
    --modal-close-hover-bg: rgba(0, 0, 0, 0.05);
    --confirm-warning-bg: rgba(245, 34, 45, 0.1);
    --confirm-warning-color: #f5222d;
    --cancel-btn-bg: #f0f0f0;
    --cancel-btn-color: #666;
    --cancel-btn-hover-bg: #e0e0e0;
    --confirm-btn-bg: #f5222d;
    --confirm-btn-color: white;
    --confirm-btn-hover-bg: #cf1322;
    
    /* 报表相关变量 */
    --report-filter-bg: #f9f9f9;
    --report-filter-border: #e8e8e8;
    --report-header-bg: #f5f7fa;
    --report-row-hover: #f5f7fa;
    --report-summary-bg: #f0f6ff;
    --report-summary-border: #d6e6ff;
    --report-summary-text: #0056b3;
    --report-empty-text: #909399;
    --report-highlight: #fffbe6;
    --report-tab-color: #666;
    --report-tab-hover-color: #2d8cf0;
    --report-tab-active-color: #2d8cf0;
    --report-tab-border-color: #f0f0f0;
    --report-tab-active-border: #2d8cf0;
    --filter-label-color: #666;
    --filter-section-bg: transparent;
    
    /* 支付方式和二维码变量 */
    --payment-bg: #fff;
    --payment-border: #e0e0e0;
    --payment-method-bg: #f9f9f9;
    --payment-method-border: #e8e8e8;
    --payment-method-label: #333;
    --payment-method-value: #666;
    --qr-bg: #fff;
    
    /* 导航栏变量 */
    --sidebar-width: 70px;
    --sidebar-expanded-width: 240px;
    --topbar-height: 60px;
    --sidebar-bg: #001529;
    --sidebar-text: #bfcbd9;
    --sidebar-active: #409EFF;
}

/* 暗色模式变量 */
html[data-theme="dark"], body.dark-theme {
    --text-color: #e0e0e0;
    --accent-color: #f39c12;
    --accent-color-rgb: 243, 156, 18;
    --bg-color: #121212;
    --card-bg: #1e1e1e;
    --cardbg-bg: #333;
    --border-color: #383838;
    --input-bg: #2c2c2c;
    --label-color: #aaaaaa;
    --success-color: #2ecc71;
    --success-color-rgb: 46, 204, 113;
    --warning-color: #ff9f43;
    --warning-color-rgb: 255, 159, 67;
    --danger-color: #ff4d4f;
    --danger-color-rgb: 255, 77, 79;
    --primary-color: #40a9ff;
    --primary-color-rgb: 64, 169, 255;
    --table-header-bg: #2c2c2c;
    --table-border: #383838;
    --table-hover: #2a2a2a;
    --text-secondary: #aaaaaa;
    --text-tertiary: #888888;
    --reset-btn-bg: #2c2c2c;
    --reset-btn-color: #aaaaaa;
    --reset-btn-border: #444444;
    --reset-btn-hover: #3c3c3c;
    --pagination-border: #444444;
    --pagination-color: #aaaaaa;
    --pagination-bg: #1e1e1e;
    --pagination-active-bg: #1890ff;
    --pagination-active-color: #ffffff;
    --pagination-active-shadow: rgba(24, 144, 255, 0.5);
    --pagination-disabled-bg: #2c2c2c;
    --pagination-disabled-color: #666666;
    --pagination-hover-color: #40a9ff;
    
    /* 弹窗/模态框暗色模式变量 */
    --modal-bg: #2a2a2a;
    --modal-header-bg: #2a2a2a;
    --modal-border: #383838;
    --modal-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    --modal-close-color: #aaaaaa;
    --modal-close-hover-color: #ffffff;
    --modal-close-hover-bg: rgba(255, 255, 255, 0.1);
    --confirm-warning-bg: rgba(245, 34, 45, 0.2);
    --confirm-warning-color: #ff4d4f;
    --cancel-btn-bg: #3d3d3d;
    --cancel-btn-color: #e0e0e0;
    --cancel-btn-hover-bg: #4a4a4a;
    --confirm-btn-bg: #d93026;
    --confirm-btn-color: white;
    --confirm-btn-hover-bg: #b71c1c;
    
    /* 报表暗色模式变量 */
    --report-filter-bg: #2c2c2c;
    --report-filter-border: #383838;
    --report-header-bg: #252a3d;
    --report-row-hover: #1e2233;
    --report-summary-bg: #1a2942;
    --report-summary-border: #2c4165;
    --report-summary-text: #6ba4ff;
    --report-empty-text: #777777;
    --report-highlight: #3d361f;
    --report-tab-color: #aaaaaa;
    --report-tab-hover-color: #5cadff;
    --report-tab-active-color: #5cadff;
    --report-tab-border-color: #383838;
    --report-tab-active-border: #5cadff;
    --filter-label-color: #aaaaaa;
    --filter-section-bg: rgba(0, 0, 0, 0.1);
    
    /* 支付方式和二维码暗色模式变量 */
    --payment-bg: #2a2a2a;
    --payment-border: #383838;
    --payment-method-bg: #333333;
    --payment-method-border: #444444;
    --payment-method-label: #e0e0e0;
    --payment-method-value: #aaaaaa;
    --qr-bg: #ffffff;
}

/* 基本样式覆盖 */
html[data-theme="dark"] body, body.dark-theme {
    background-color: var(--bg-color);
    color: var(--text-color);
}

/* 输入框暗色模式 */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
body.dark-theme input,
body.dark-theme select,
body.dark-theme textarea {
    background-color: var(--input-bg);
    color: var(--text-color);
    border-color: var(--border-color);
}

/* 占位符颜色 */
html[data-theme="dark"] input::placeholder,
body.dark-theme input::placeholder {
    color: #777777;
}

/* 卡片暗色模式 */
html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .logs-filter,
html[data-theme="dark"] .logs-table-container,
body.dark-theme .card,
body.dark-theme .panel,
body.dark-theme .logs-filter,
body.dark-theme .logs-table-container {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

/* 表格暗色模式 */
html[data-theme="dark"] table,
body.dark-theme table {
    color: var(--text-color);
}

html[data-theme="dark"] th,
body.dark-theme th {
    background-color: var(--table-header-bg);
    color: var(--text-secondary);
    border-color: var(--table-border);
}

html[data-theme="dark"] td,
body.dark-theme td {
    border-color: var(--table-border);
    color: var(--text-secondary);
}

html[data-theme="dark"] tr:hover,
body.dark-theme tr:hover {
    background-color: var(--table-hover);
}

/* 确保搜索按钮文字始终是白色 */
.search-btn {
    color: white !important;
}

/* 模态框/弹窗样式 */
.modal-overlay {
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-container,
.admin-modal,
.qr-popup {
    background-color: var(--modal-bg);
    box-shadow: var(--modal-shadow);
    border-color: var(--modal-border);
}

.modal-header {
    background-color: var(--modal-header-bg);
    border-color: var(--modal-border);
    color: var(--text-color);
}

.modal-header h3 {
    color: var(--text-color);
}

.close-btn,
.modal-close {
    color: var(--modal-close-color);
}

.close-btn:hover,
.modal-close:hover {
    color: var(--modal-close-hover-color);
    background-color: var(--modal-close-hover-bg);
}

.confirm-warning {
    background-color: var(--confirm-warning-bg);
}

.confirm-warning i,
.confirm-warning p {
    color: var(--confirm-warning-color);
}

.cancel-btn {
    background-color: var(--cancel-btn-bg);
    color: var(--cancel-btn-color);
}

.cancel-btn:hover {
    background-color: var(--cancel-btn-hover-bg);
}

.confirm-btn {
    background-color: var(--confirm-btn-bg);
    color: var(--confirm-btn-color);
}

.confirm-btn:hover {
    background-color: var(--confirm-btn-hover-bg);
}

/* 报表相关样式 */
.report-filter,
.logs-filter,
.data-filter {
    background-color: var(--report-filter-bg);
    border-color: var(--report-filter-border);
}

.data-table thead,
.data-table th,
.report-table thead,
.report-table th {
    background-color: var(--report-header-bg);
}

.data-table tr:hover,
.report-table tr:hover {
    background-color: var(--report-row-hover);
}

.report-summary,
.data-summary {
    background-color: var(--report-summary-bg);
    border-color: var(--report-summary-border);
    color: var(--report-summary-text);
}

.report-empty,
.no-data {
    color: var(--report-empty-text);
}

.report-highlight {
    background-color: var(--report-highlight);
}

/* 报表标签和过滤器样式 */
.report-tabs {
    border-bottom-color: var(--report-tab-border-color);
}

.report-tab {
    color: var(--report-tab-color);
}

.report-tab:hover {
    color: var(--report-tab-hover-color);
}

.report-tab.active {
    color: var(--report-tab-active-color);
}

.report-tab.active:after {
    background-color: var(--report-tab-active-color);
}

.filter-section {
    background-color: var(--filter-section-bg);
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 20px;
}

.filter-group label {
    color: var(--filter-label-color);
}

/* 表格滚动指示器 */
/* Removing the table-scroll-indicator CSS as requested */
/* .table-scroll-indicator {
    background-color: var(--modal-bg);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
} */

/* 收款方式和二维码弹窗样式 */
.qr-overlay {
    background-color: rgba(0, 0, 0, 0.5);
}

.qr-popup {
    background-color: var(--payment-bg);
    border-color: var(--payment-border);
}

.qr-popup h3 {
    color: var(--text-color);
}

.payment-methods {
    background-color: var(--modal-bg);
}

.payment-method-item {
    background-color: var(--payment-method-bg);
    border-color: var(--payment-method-border);
}

.payment-method-type {
    color: var(--payment-method-label);
}

.payment-method-value {
    color: var(--payment-method-value);
}

.qr-container {
    background-color: var(--qr-bg);
}

#qrUserInfo {
    color: var(--text-secondary);
}

/* 主题切换按钮 */
.theme-toggle {
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-color);
    transition: all 0.3s;
}

.theme-toggle:hover {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}