/* 深色模式样式 */
html[data-theme='dark'] {
  /* 主题色 */
  --color-bg-main: #121826;
  --color-bg-card: #1e293b;
  --color-text-primary: #f3f4f6;
  --color-text-secondary: #cbd5e1;
  --color-text-muted: #94a3b8;
  --color-border: #334155;
  
  /* 色彩重写 */
  color-scheme: dark;
}

/* 深色模式主体样式 */
html[data-theme='dark'] body {
  background-color: var(--color-bg-main);
  color: var(--color-text-primary);
}

/* 深色模式卡片样式 */
html[data-theme='dark'] .bg-white,
html[data-theme='dark'] .card {
  background-color: var(--color-bg-card);
  border-color: var(--color-border);
}

/* 深色模式表格样式 */
html[data-theme='dark'] .data-table thead {
  background-color: #1a2234;
}

html[data-theme='dark'] .data-table tbody tr {
  border-color: var(--color-border);
}

html[data-theme='dark'] .data-table tbody tr:hover {
  background-color: #273145;
}

/* 深色模式表单样式 */
html[data-theme='dark'] .form-control {
  background-color: #1a2234;
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

html[data-theme='dark'] .form-control:focus {
  border-color: #6366f1;
}

html[data-theme='dark'] .form-label {
  color: var(--color-text-secondary);
}

/* 深色模式文本样式 */
html[data-theme='dark'] .text-gray-800 {
  color: var(--color-text-primary);
}

html[data-theme='dark'] .text-gray-600, 
html[data-theme='dark'] .text-gray-700 {
  color: var(--color-text-secondary);
}

html[data-theme='dark'] .text-gray-500 {
  color: var(--color-text-muted);
}

/* 深色模式按钮样式 */
html[data-theme='dark'] .btn-secondary {
  background-color: #334155;
  border-color: #475569;
  color: var(--color-text-primary);
}

html[data-theme='dark'] .btn-secondary:hover {
  background-color: #475569;
}

/* 深色模式模态框 */
html[data-theme='dark'] .modal-content {
  background-color: var(--color-bg-card);
}

html[data-theme='dark'] .modal-header,
html[data-theme='dark'] .modal-footer {
  border-color: var(--color-border);
}

html[data-theme='dark'] .modal-footer {
  background-color: #1a2234;
}

/* 深色模式导航栏 */
html[data-theme='dark'] #mobile-menu .bg-white {
  background-color: var(--color-bg-card);
}

html[data-theme='dark'] #mobile-menu .border-gray-200 {
  border-color: var(--color-border);
}

html[data-theme='dark'] #mobile-menu .hover\:bg-gray-100:hover {
  background-color: #273145;
}

/* 深色模式高亮 */
html[data-theme='dark'] pre,
html[data-theme='dark'] code {
  background-color: #0f172a;
}