/* MBTI测试 - 夜间模式样式 */
/* 当 html 元素有 dark 类时启用 */

html.dark {
  color-scheme: dark;
}

/* 全局背景和文字 */
html.dark body {
  background-color: #1a1a2e !important;
  color: #e8e8e8 !important;
}

/* 主容器背景 */
html.dark .bg-white,
html.dark [class*="bg-white"] {
  background-color: #16213e !important;
}

html.dark .bg-gray-50,
html.dark .bg-gray-100 {
  background-color: #1a1a2e !important;
}

html.dark .bg-gray-200 {
  background-color: #252547 !important;
}

/* 卡片背景 */
html.dark [class*="bg-indigo"],
html.dark .bg-gradient-to-br {
  background: linear-gradient(135deg, #16213e 0%, #1a1a2e 100%) !important;
}

/* 文字颜色 */
html.dark .text-gray-600,
html.dark .text-gray-700,
html.dark [class*="text-gray"] {
  color: #b0b0b0 !important;
}

html.dark .text-gray-800,
html.dark .text-gray-900 {
  color: #e8e8e8 !important;
}

html.dark .text-indigo-600,
html.dark [class*="text-indigo"] {
  color: #818cf8 !important;
}

/* 输入框 */
html.dark input[type="text"],
html.dark input {
  background-color: #252547 !important;
  border-color: #3a3a5c !important;
  color: #e8e8e8 !important;
}

html.dark input::placeholder {
  color: #6b6b8b !important;
}

/* 按钮 */
html.dark button {
  background-color: #3a3a5c !important;
  color: #e8e8e8 !important;
  border-color: #4a4a6c !important;
}

html.dark button:hover {
  background-color: #4a4a6c !important;
}

html.dark [class*="bg-indigo-500"],
html.dark [class*="bg-indigo-600"] {
  background-color: #6366f1 !important;
}

/* 版本选择卡片 */
html.dark [class*="border-gray"] {
  border-color: #3a3a5c !important;
}

html.dark [class*="hover:border-indigo"] {
  border-color: #3a3a5c !important;
}

html.dark [class*="hover:border-indigo"]:hover {
  border-color: #6366f1 !important;
}

/* 禁用版本样式 */
html.dark .opacity-40 {
  opacity: 0.5 !important;
  background-color: #1a1a2e !important;
}

/* 进度条 */
html.dark [class*="bg-indigo-100"] {
  background-color: #252547 !important;
}

html.dark [class*="bg-indigo-500"] {
  background-color: #6366f1 !important;
}

/* 选项卡片 */
html.dark [class*="bg-gray-50"]:hover {
  background-color: #252547 !important;
}

html.dark [class*="border-2"][class*="border-gray-200"] {
  border-color: #3a3a5c !important;
}

html.dark [class*="border-indigo"] {
  border-color: #6366f1 !important;
}

/* 结果页面 */
html.dark [class*="bg-gradient"] {
  background: linear-gradient(135deg, #16213e 0%, #0f3460 100%) !important;
}

/* 阴影 */
html.dark [class*="shadow"] {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
}

/* 图表/雷达图背景 */
html.dark svg,
html.dark canvas {
  filter: invert(0.9) hue-rotate(180deg);
}

/* Toast消息 */
html.dark [class*="toast"] {
  background-color: #252547 !important;
  color: #e8e8e8 !important;
}

/* 首页测试类型选择 */
html.dark [class*="rounded-xl"] {
  background-color: #16213e !important;
}

/* 夜间模式切换按钮样式 - 左上角 */
.dark-mode-toggle {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 9999;
  background: #252547;
  border: 1px solid #3a3a5c;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  color: #e8e8e8;
  font-size: 20px;
}

.dark-mode-toggle:hover {
  background: #3a3a5c;
  transform: scale(1.1);
}

/* Light mode toggle button */
html:not(.dark) .dark-mode-toggle {
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  color: #374151;
}

html:not(.dark) .dark-mode-toggle:hover {
  background: #e5e7eb;
}

/* ========== 手机端适配 ========== */

/* 手机端夜间模式按钮 - 调整位置避免与header重叠 */
@media (max-width: 768px) {
  .dark-mode-toggle {
    top: 70px;
    left: 12px;
    width: 40px;
    height: 40px;
    font-size: 18px;
    z-index: 9998;
  }

  /* 手机端答题页面退出按钮位置调整 */
  [class*="absolute top-2 left-2"] {
    top: 8px !important;
    left: 8px !important;
  }

  /* 手机端header调整 */
  header [class*="max-w-4xl"] {
    padding-left: 60px !important;
  }
}

/* 小屏幕手机 */
@media (max-width: 480px) {
  .dark-mode-toggle {
    top: 65px;
    left: 8px;
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
}

/* 手机端答题页面布局优化 */
@media (max-width: 640px) {
  /* 确保答题页header有足够空间给退出按钮 */
  [class*="bg-white rounded-xl p-4"] {
    padding-top: 40px !important;
    padding-left: 12px !important;
  }

  /* 进度和计时器容器 */
  [class*="flex items-center justify-between"] {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* 退出按钮在手机端不遮挡其他元素 */
  button[class*="absolute"] {
    position: relative !important;
    margin-bottom: 8px !important;
  }
}