/**
 * 业务系统统一深色模式覆盖
 * 通过 @media (prefers-color-scheme: dark) 跟随系统
 * 覆盖 Tailwind 工具类的浅色方案为深色方案
 */

/* ===== 全局布局：可视区域 = 视口 - 底部导航栏高度 =====
   所有加载本 CSS 的业务页面均含 <bottom-nav>（fixed, 56px），
   body 加 padding-bottom 让出导航栏空间，h-screen/min-h-screen 均适用
   （Tailwind preflight 已设 * { box-sizing: border-box }，padding 内含于高度） */
:root {
  --bottom-nav-height: 56px;
}
body {
  padding-bottom: var(--bottom-nav-height, 56px);
}

@media (prefers-color-scheme: dark) {
  /* ===== 基础 ===== */
  html, body {
    background-color: #111827 !important; /* gray-900 */
    color: #e5e7eb !important; /* gray-200 */
  }

  /* ===== 背景色覆盖 ===== */
  .bg-white {
    background-color: #1f2937 !important; /* gray-800 */
  }
  .bg-gray-50, .bg-neutral-50 {
    background-color: #374151 !important; /* gray-700 */
  }
  .bg-gray-100, .bg-neutral-100 {
    background-color: #374151 !important; /* gray-700 */
  }
  .bg-gray-200, .bg-neutral-200 {
    background-color: #4b5563 !important; /* gray-600 */
  }
  .bg-gray-300, .bg-neutral-300 {
    background-color: #4b5563 !important; /* gray-600 */
  }

  /* ===== 文字色覆盖 ===== */
  .text-gray-800, .text-neutral-800 {
    color: #e5e7eb !important; /* gray-200 */
  }
  .text-gray-700, .text-neutral-700 {
    color: #d1d5db !important; /* gray-300 */
  }
  .text-gray-600, .text-neutral-600 {
    color: #9ca3af !important; /* gray-400 */
  }
  .text-gray-500, .text-neutral-500 {
    color: #9ca3af !important; /* gray-400 */
  }
  .text-gray-400, .text-neutral-400 {
    color: #6b7280 !important; /* gray-500 */
  }

  /* ===== 边框色覆盖 ===== */
  .border-gray-200, .border-neutral-200 {
    border-color: #374151 !important; /* gray-700 */
  }
  .border-gray-300, .border-neutral-300 {
    border-color: #374151 !important; /* gray-700 */
  }

  /* ===== hover 背景覆盖 ===== */
  .hover\:bg-gray-50:hover, .hover\:bg-neutral-50:hover {
    background-color: #374151 !important; /* gray-700 */
  }
  .hover\:bg-gray-100:hover, .hover\:bg-neutral-100:hover {
    background-color: #374151 !important; /* gray-700 */
  }
  .hover\:bg-gray-200:hover {
    background-color: #4b5563 !important; /* gray-600 */
  }
  .hover\:bg-gray-300:hover {
    background-color: #6b7280 !important; /* gray-500 */
  }

  /* ===== 输入框 ===== */
  input[type="text"], input[type="number"], input[type="email"],
  input[type="password"], input[type="date"], input[type="tel"],
  input[type="search"], textarea, select {
    background-color: #1f2937 !important; /* gray-800 */
    color: #e5e7eb !important; /* gray-200 */
    border-color: #374151 !important; /* gray-700 */
  }
  input::placeholder, textarea::placeholder {
    color: #6b7280 !important; /* gray-500 */
  }

  /* ===== 表格 ===== */
  table thead {
    background-color: #374151 !important; /* gray-700 */
  }
  /* 商品行统一深灰背景（gray-800），避免奇数行透明导致深浅不一 */
  table tbody tr:not(.bg-neutral-100) {
    background-color: #1f2937 !important; /* gray-800 */
  }
  /* 日期行（bg-neutral-100）用稍浅灰（gray-700）作为分组底色 */
  table tbody tr.bg-neutral-100 {
    background-color: #374151 !important; /* gray-700 */
  }

  /* ===== 滚动条 ===== */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  ::-webkit-scrollbar-track {
    background: #111827; /* gray-900 */
  }
  ::-webkit-scrollbar-thumb {
    background: #4b5563; /* gray-600 */
    border-radius: 4px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #6b7280; /* gray-500 */
  }

  /* ===== 模态框遮罩 ===== */
  .modal-overlay, [class*="overlay"] {
    background-color: rgba(0, 0, 0, 0.6) !important;
  }

  /* ===== shadow 调整 ===== */
  .shadow, .shadow-sm, .shadow-md, .shadow-lg, .shadow-xl {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2) !important;
  }

  /* ===== 选中行高亮 =====
     亮色模式：JS 内联 #e3f2fd（浅蓝）生效；
     深色模式：JS 内联色会被浏览器规范化为 rgb()，[style*=#e3f2fd] 属性选择器匹配不到，
     故用 .selected 类覆盖为高亮蓝（blue-700）。置于文件末尾 + 提高特定性，
     确保覆盖上面行背景类（table tbody tr.bg-neutral-100 / :not(...)） */
  table tbody tr.selected {
    background-color: #1d4ed8 !important; /* blue-700 */
  }
}