/* 黑暗模式样式 */
:root {
  /* 浅色模式变量 */
  --bg-primary: #f8fafc;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f3f4f6;
  --bg-hover: #f9fafb;
  --text-primary: #1f2937;
  --text-secondary: #6b7280;
  --text-tertiary: #9ca3af;
  --border-color: #e5e7eb;
  --border-hover: #d1d5db;
  --shadow-color: rgba(0, 0, 0, 0.03);
  --shadow-hover: rgba(0, 0, 0, 0.1);
  --accent-blue: #3b82f6;
  --accent-blue-bg: #eff6ff;
  --accent-green: #10b981;
  --accent-purple: #8b5cf6;
  --progress-bg: #e5e7eb;
  --chart-grid: rgba(0, 0, 0, 0.1);
  --chart-text: #374151;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* 黑暗模式变量 */
    --bg-primary: #111827;
    --bg-secondary: #1f2937;
    --bg-tertiary: #374151;
    --bg-hover: #2d3748;
    --text-primary: #f9fafb;
    --text-secondary: #d1d5db;
    --text-tertiary: #9ca3af;
    --border-color: #4b5563;
    --border-hover: #6b7280;
    --shadow-color: rgba(0, 0, 0, 0.3);
    --shadow-hover: rgba(0, 0, 0, 0.5);
    --accent-blue: #60a5fa;
    --accent-blue-bg: #1e3a8a;
    --accent-green: #34d399;
    --accent-purple: #a78bfa;
    --progress-bg: #4b5563;
    --chart-grid: rgba(255, 255, 255, 0.1);
    --chart-text: #d1d5db;
  }
}

/* 通用样式应用 */
body {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.bg-white {
  background-color: var(--bg-secondary) !important;
}

.bg-gray-50 {
  background-color: var(--bg-tertiary) !important;
}

.bg-gray-100 {
  background-color: var(--bg-tertiary) !important;
}

.bg-gray-200 {
  background-color: var(--progress-bg) !important;
}

.bg-gray-300 {
  background-color: var(--border-hover) !important;
}

.text-gray-800,
.text-gray-900 {
  color: var(--text-primary) !important;
}

.text-gray-600,
.text-gray-700 {
  color: var(--text-secondary) !important;
}

.text-gray-500,
.text-gray-400 {
  color: var(--text-tertiary) !important;
}

.border-gray-100 {
  border-color: var(--border-color) !important;
}

.card-shadow {
  box-shadow: 0 1px 2px 0 var(--shadow-color), 
              0 1px 6px -1px var(--shadow-color), 
              0 2px 4px 0 var(--shadow-color) !important;
}

/* 选项按钮样式 */
.option-button {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

.option-button:hover {
  background-color: var(--bg-hover) !important;
}

.option-button[data-checked="true"] {
  background-color: var(--accent-blue-bg) !important;
  border-color: var(--accent-blue) !important;
}

/* 按钮样式 */
.bg-blue-100 {
  background-color: var(--accent-blue-bg) !important;
}

.text-blue-600 {
  color: var(--accent-blue) !important;
}

.bg-purple-500 {
  background-color: var(--accent-purple) !important;
}

.bg-blue-500 {
  background-color: var(--accent-blue) !important;
}

/* 特殊元素 */
.progress-bar {
  background: var(--accent-blue) !important;
}

/* 导航按钮 */
.nav-button:hover {
  background-color: var(--bg-hover) !important;
}

/* 输入框样式 (用于管理员登录等) */
input[type="password"],
input[type="text"] {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

input[type="password"]:focus,
input[type="text"]:focus {
  border-color: var(--accent-blue) !important;
}

/* 表格样式 (用于管理员页面) */
table {
  background-color: var(--bg-secondary) !important;
}

th {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}

td {
  color: var(--text-secondary) !important;
  border-color: var(--border-color) !important;
}

.ant-table th, .ant-table td {
  border-color: var(--border-color) !important;
}

.ant-table th {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}

/* 严重程度颜色类 - 保持原有颜色 */
.severity-normal {
  color: #10b981 !important;
}

.severity-mild {
  color: #f59e0b !important;
}

.severity-moderate {
  color: #f97316 !important;
}

.severity-severe {
  color: #ef4444 !important;
}

.status-positive {
  color: #ef4444 !important;
  font-weight: bold;
}

.status-negative {
  color: #10b981 !important;
  font-weight: bold;
}

/* 背景颜色类 - 保持原有颜色 */
.bg-green-500 {
  background-color: #10b981 !important;
}

.bg-yellow-500 {
  background-color: #eab308 !important;
}

.bg-orange-500 {
  background-color: #f97316 !important;
}

.bg-red-500 {
  background-color: #ef4444 !important;
}

/* 登录页面特殊处理 */
.login-card {
  background: var(--bg-secondary) !important;
  opacity: 0.95;
}

@media (prefers-color-scheme: dark) {
  .login-card {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
  }
}

/* 特殊状态样式 */
.hover\:bg-gray-200:hover {
  background-color: var(--bg-hover) !important;
}

.hover\:bg-blue-700:hover {
  background-color: #1d4ed8 !important;
}

/* Chart.js 黑暗模式适配 */
@media (prefers-color-scheme: dark) {
  canvas {
    filter: brightness(0.9);
  }
  
  /* 确保Chart.js文本没有背景色 */
  .chartjs-render-monitor {
    background: transparent !important;
  }
}

/* 确保所有文本颜色都正确 */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}