/* 深色模式样式 */
:root {
  --bg-color: #f9fafb;
  --text-color: #333333;
  --card-bg: #ffffff;
  --border-color: #e5e7eb;
  --highlight-bg: #f3f4f6;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  --icon-brightness: 100%;
  --font-family: "Inter", sans-serif;
}

[data-theme="dark"] {
  --bg-color: #1a1a1a;
  --text-color: #e5e7eb;
  --card-bg: #2d2d2d;
  --border-color: #4b4b4b;
  --highlight-bg: #3a3a3a;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  --icon-brightness: 80%;
}

/* 基础样式 */
body {
  background-color: var(--bg-color) !important;
  color: var(--text-color) !important;
  transition: background-color 0.3s, color 0.3s;
  font-family: var(--font-family) !important;
}

/* 卡片样式 */
.card, .bg-white, .content-area, .search-result-item, .alarm-item {
  background-color: var(--card-bg) !important;
  color: var(--text-color) !important;
}

/* 边框颜色 */
.border, .border-t, .border-b, .border-l, .border-r,
.border-gray-100, .border-gray-200, .border-gray-300 {
  border-color: var(--border-color) !important;
}

/* 高亮背景 */
.hover\:bg-gray-50:hover, .bg-gray-50, .bg-gray-100 {
  background-color: var(--highlight-bg) !important;
}

/* 文本颜色 */
.text-gray-500, .text-gray-700 {
  color: var(--text-color) !important;
  opacity: 0.7;
}

/* 搜索框 */
.bg-gray-100 input {
  background-color: var(--highlight-bg) !important;
  color: var(--text-color) !important;
}

/* 深色模式切换按钮 */
.theme-toggle {
  display: none !important;
}

/* 状态栏颜色 */
[data-theme="dark"] .status-bar {
  background-color: black !important;
}

/* 告警标签颜色调整 */
[data-theme="dark"] .bg-red-100 {
  background-color: rgba(220, 38, 38, 0.2) !important;
}
[data-theme="dark"] .bg-yellow-100 {
  background-color: rgba(245, 158, 11, 0.2) !important;
}
[data-theme="dark"] .bg-blue-100 {
  background-color: rgba(59, 130, 246, 0.2) !important;
}

/* 进度条背景 */
[data-theme="dark"] .bg-gray-200 {
  background-color: #3a3a3a !important;
}

/* SVG元素样式调整 */
[data-theme="dark"] svg text {
  fill: var(--text-color) !important;
}

[data-theme="dark"] svg line,
[data-theme="dark"] svg path[stroke="#e5e7eb"],
[data-theme="dark"] svg pattern path {
  stroke: #4b4b4b !important;
}

[data-theme="dark"] svg rect[fill="url(#grid)"],
[data-theme="dark"] svg rect[fill="url(#grid2)"] {
  fill: var(--highlight-bg) !important;
}

/* 图表容器 */
[data-theme="dark"] .bg-gray-50.rounded-lg.border {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) !important;
}

/* 趋势图填充区域 */
[data-theme="dark"] svg path[fill="#dbeafe"] {
  fill: rgba(59, 130, 246, 0.2) !important;
}

/* 统计卡片背景 */
[data-theme="dark"] .bg-blue-50,
[data-theme="dark"] .bg-green-50,
[data-theme="dark"] .bg-yellow-50,
[data-theme="dark"] .bg-red-50 {
  background-color: var(--card-bg) !important;
}

/* 调整按钮样式 */
[data-theme="dark"] button.bg-gray-100,
[data-theme="dark"] button.bg-blue-50,
[data-theme="dark"] .bg-gray-100 {
  background-color: #3a3a3a !important;
  color: var(--text-color) !important;
}

/* 调整图例区域 */
[data-theme="dark"] .bg-white.bg-opacity-70 {
  background-color: rgba(45, 45, 45, 0.7) !important;
}

/* 底部导航栏样式修改 */
[data-theme="dark"] .nav-bar {
  background-color: #252525 !important;
  border-color: #3d3d3d !important;
}

[data-theme="dark"] .nav-item {
  color: var(--text-color) !important;
  opacity: 0.8;
}

[data-theme="dark"] .nav-item i {
  opacity: 0.8;
}

[data-theme="dark"] .nav-item i.text-blue-500 {
  color: #60a5fa !important;
  opacity: 1;
}

/* 站点选择样式修改 */
[data-theme="dark"] .hover\:bg-blue-50:hover {
  background-color: rgba(59, 130, 246, 0.15) !important;
}

[data-theme="dark"] .rounded-lg.hover\:bg-blue-50.mb-1 {
  transition: background-color 0.2s;
}

/* 选中站点状态 */
[data-theme="dark"] .site-selected,
[data-theme="dark"] .rounded-lg.hover\:bg-blue-50.mb-1.active {
  background-color: rgba(59, 130, 246, 0.2) !important;
  border: 1px solid rgba(59, 130, 246, 0.4);
}

/* 调整图标亮度 */
[data-theme="dark"] .fa,
[data-theme="dark"] .fas,
[data-theme="dark"] .far {
  filter: brightness(var(--icon-brightness));
}

/* 调整站点筛选按钮样式 */
[data-theme="dark"] .bg-blue-500 {
  background-color: #3b82f6 !important;
}

[data-theme="dark"] .bg-blue-500 i {
  filter: brightness(100%) !important;
}

/* 调整tabbar圆角按钮 */
[data-theme="dark"] .rounded-full.bg-gray-100 {
  background-color: #3a3a3a !important;
}

/* 调整站点选择弹窗中的图标和文字 */
[data-theme="dark"] .text-gray-500.text-xs {
  color: rgba(229, 231, 235, 0.7) !important;
}