/* ============================================================
   全站背景：夜空 + 三层星点缓缓上移
   ============================================================
   由 js/site-bg.js 在 DOMContentLoaded 时挂载（每个页面都引入它）。
   `.star-layer` 的 box-shadow 由脚本**生成**，不在这里手写 ——
   手写要抄一千多行星点坐标，改一次密度就得重抄，而且坐标写死之后
   屏幕一宽右侧就是一片没星星的空档。

   三个不能丢的点：
     · z-index:-1 + pointer-events:none —— 纯装饰层，不盖内容、不拦点击
     · 星点纵向只铺 2000px 再整体上移 2000px —— 首尾相接才能无缝循环
     · prefers-reduced-motion 关动画 —— 大面积移动的亮点会让人不适
   ============================================================ */

.starfield {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  /* 夜空底色：底部稍亮、四周压暗，视线收到中间 */
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
}

.star-layer {
  position: absolute;
  top: 0;
  left: 0;
  background: transparent;
  border-radius: 50%;
  will-change: transform;
  backface-visibility: hidden;
  animation-name: star-drift;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* 三层：1px 密集移动慢、2px 中等、3px 稀疏移动快 —— 层次感与视差都在这 */
.star-1 { width: 1px; height: 1px; animation-duration: 60s; }
.star-2 { width: 2px; height: 2px; animation-duration: 100s; }
.star-3 { width: 3px; height: 3px; animation-duration: 150s; opacity: .9; }

@keyframes star-drift {
  from { transform: translateY(0); }
  to   { transform: translateY(-2000px); }
}

@media (prefers-reduced-motion: reduce) {
  .star-layer { animation: none; }
}

/* ============================================================
   深色外壳（让星空真正透上来）
   ============================================================
   ⚠️ 关键一步：body 自己有不透明底色（var(--bg)），而 z-index:-1 的星空在
   **body 背景之下** —— 不让开的话星空一点都看不见（登录页当初能看见，
   只是因为它本来就没给 body 设底色）。

   做法是「深色毛玻璃外壳 + 白底业务卡片」：
     · 侧边栏 / 顶栏：半透明深色 + 背景模糊，导航文字翻成浅色
     · 内容区：全透明，星空直接可见（标题、说明、工具栏都在星空上）
     · 卡片 .dsh-card、弹窗 #modalOv、表单控件：**保持原来的浅色主题** ——
       表格 / 表单 / 按钮的可读性不能为了好看让路
   ============================================================ */
body.has-stars { background: transparent !important; color: #E7EAF0; }

body.has-stars #appSidebar {
  background: rgba(11, 17, 30, .58) !important;
  border-right: 1px solid rgba(255, 255, 255, .10) !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
body.has-stars header {
  background: rgba(11, 17, 30, .48) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .10) !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
body.has-stars #shellContent { background: transparent !important; }

/* ---------- 卡片外的一切：翻成深色主题 ----------
   只覆盖这套界面实际在用的那几个 Tailwind 颜色类（先扫过一遍：
   灰三档 + 蓝 + 状态色）。用 `[class^=]` / `[class*=" 空格"]` 两种写法
   **精确匹配独立类名** —— 不能只用 `[class*=...]`：那会把
   `hover:text-[#1F2329]`、`hover:bg-[#F7F8FA]` 也匹配掉，
   于是鼠标还没移上去颜色就变了。 */
body.has-stars :is(#appSidebar, header, #page-content) :is([class^="text-[#1F2329]"], [class*=" text-[#1F2329]"]):not(input):not(select):not(textarea) { color: #EEF1F6 !important; }
body.has-stars :is(#appSidebar, header, #page-content) :is([class^="text-[#646A73]"], [class*=" text-[#646A73]"]):not(input):not(select):not(textarea) { color: #C8CFDB !important; }
body.has-stars :is(#appSidebar, header, #page-content) :is([class^="text-[#8F959E]"], [class*=" text-[#8F959E]"]):not(input):not(select):not(textarea) { color: #98A2B3 !important; }
body.has-stars :is(#appSidebar, header, #page-content) :is([class^="text-[#2563EB]"], [class*=" text-[#2563EB]"]):not(input):not(select):not(textarea) { color: #8AB4FF !important; }
body.has-stars :is(#appSidebar, header, #page-content) :is([class^="text-[#EF4444]"], [class*=" text-[#EF4444]"],
                   [class^="text-[#B91C1C]"], [class*=" text-[#B91C1C]"]):not(input):not(select):not(textarea) { color: #FCA5A5 !important; }
body.has-stars :is(#appSidebar, header, #page-content) :is([class^="text-[#047857]"], [class*=" text-[#047857]"]):not(input):not(select):not(textarea) { color: #6EE7B7 !important; }
body.has-stars :is(#appSidebar, header, #page-content) :is([class^="text-[#B45309]"], [class*=" text-[#B45309]"]):not(input):not(select):not(textarea) { color: #FCD34D !important; }

/* 边框与浅色底：不换成半透明的话，星空上会浮出一块块白斑和白边。
   ⚠️ 每条翻转规则都带 `:not(input):not(select):not(textarea)` ——
   表单控件必须留在浅色主题里。踩过一次：顶栏那个「店铺筛选」下拉带着
   `bg-white` 类，被这条改成 7% 透明底，而它的文字被我另一条规则设成了深色，
   于是**深色字 + 透明底**在星空上完全看不见（截图里就是个空白的白框）。 */
body.has-stars :is(#appSidebar, header, #page-content) :is([class^="border-[#EDEFF2]"], [class*=" border-[#EDEFF2]"]):not(input):not(select):not(textarea) { border-color: rgba(255, 255, 255, .12) !important; }
body.has-stars :is(#appSidebar, header, #page-content) :is([class^="bg-white"], [class*=" bg-white"]):not(input):not(select):not(textarea) { background: rgba(255, 255, 255, .07) !important; }
body.has-stars :is(#appSidebar, header, #page-content) :is([class^="bg-[#F7F8FA]"], [class*=" bg-[#F7F8FA]"]):not(input):not(select):not(textarea) { background: rgba(255, 255, 255, .06) !important; }
body.has-stars :is(#appSidebar, header, #page-content) :is([class^="bg-[#EDEFF2]"], [class*=" bg-[#EDEFF2]"]):not(input):not(select):not(textarea) { background: rgba(255, 255, 255, .14) !important; }
body.has-stars [class*="hover:bg-[#F7F8FA]"]:hover { background: rgba(255, 255, 255, .10) !important; }
body.has-stars [class*="hover:bg-[#2563EB]/10"]:hover { background: rgba(138, 180, 255, .16) !important; }
body.has-stars .dsh-empty { color: #98A2B3 !important; }
body.has-stars ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); }

/* ---------- 翻回来：卡片 / 弹窗 / 表单控件仍是浅色主题 ----------
   这三处是「业务内容」，白底深字不能动。选择器比上面多一层，优先级更高。 */
body.has-stars #page-content .dsh-card,
body.has-stars #modalOv > div { color: #1F2329 !important; }
body.has-stars #page-content .dsh-card :is([class^="text-[#1F2329]"], [class*=" text-[#1F2329]"]),
body.has-stars #modalOv :is([class^="text-[#1F2329]"], [class*=" text-[#1F2329]"]):not(input):not(select):not(textarea) { color: #1F2329 !important; }
body.has-stars #page-content .dsh-card :is([class^="text-[#646A73]"], [class*=" text-[#646A73]"]),
body.has-stars #modalOv :is([class^="text-[#646A73]"], [class*=" text-[#646A73]"]):not(input):not(select):not(textarea) { color: #646A73 !important; }
body.has-stars #page-content .dsh-card :is([class^="text-[#8F959E]"], [class*=" text-[#8F959E]"]),
body.has-stars #modalOv :is([class^="text-[#8F959E]"], [class*=" text-[#8F959E]"]):not(input):not(select):not(textarea) { color: #8F959E !important; }
body.has-stars #page-content .dsh-card :is([class^="text-[#2563EB]"], [class*=" text-[#2563EB]"]),
body.has-stars #modalOv :is([class^="text-[#2563EB]"], [class*=" text-[#2563EB]"]):not(input):not(select):not(textarea) { color: #2563EB !important; }
body.has-stars #page-content .dsh-card :is([class^="text-[#EF4444]"], [class*=" text-[#EF4444]"], [class^="text-[#B91C1C]"], [class*=" text-[#B91C1C]"]),
body.has-stars #modalOv :is([class^="text-[#EF4444]"], [class*=" text-[#EF4444]"], [class^="text-[#B91C1C]"], [class*=" text-[#B91C1C]"]):not(input):not(select):not(textarea) { color: #EF4444 !important; }
body.has-stars #page-content .dsh-card :is([class^="text-[#047857]"], [class*=" text-[#047857]"]),
body.has-stars #modalOv :is([class^="text-[#047857]"], [class*=" text-[#047857]"]):not(input):not(select):not(textarea) { color: #047857 !important; }
body.has-stars #page-content .dsh-card :is([class^="text-[#B45309]"], [class*=" text-[#B45309]"]),
body.has-stars #modalOv :is([class^="text-[#B45309]"], [class*=" text-[#B45309]"]):not(input):not(select):not(textarea) { color: #B45309 !important; }
body.has-stars #page-content .dsh-card :is([class^="border-[#EDEFF2]"], [class*=" border-[#EDEFF2]"]),
body.has-stars #modalOv :is([class^="border-[#EDEFF2]"], [class*=" border-[#EDEFF2]"]) { border-color: #EDEFF2 !important; }
body.has-stars #page-content .dsh-card :is([class^="bg-white"], [class*=" bg-white"]),
body.has-stars #modalOv :is([class^="bg-white"], [class*=" bg-white"]) { background: #fff !important; }
body.has-stars #page-content .dsh-card :is([class^="bg-[#F7F8FA]"], [class*=" bg-[#F7F8FA]"]),
body.has-stars #modalOv :is([class^="bg-[#F7F8FA]"], [class*=" bg-[#F7F8FA]"]) { background: #F7F8FA !important; }
body.has-stars #page-content .dsh-card :is([class^="bg-[#EDEFF2]"], [class*=" bg-[#EDEFF2]"]),
body.has-stars #modalOv :is([class^="bg-[#EDEFF2]"], [class*=" bg-[#EDEFF2]"]) { background: #EDEFF2 !important; }
body.has-stars #page-content .dsh-card .dsh-empty { color: #8F959E !important; }

/* 表单控件永远白底深字：白底配浅字等于看不见。
   上面那几条翻转已经用 :not() 排除掉表单控件，这里再兜一道 ——
   卡片里的输入框、下拉框也必须保持浅色主题。 */
body.has-stars input,
body.has-stars select,
body.has-stars textarea { background: #fff !important; color: #1F2329 !important; }
/* 顶栏那个「店铺筛选」下拉在深色顶栏上，边框提亮一点更好认 */
body.has-stars #shopSwitcher { border-color: rgba(255, 255, 255, .30) !important; }

/* ---------- 侧边栏 / 顶栏：元素级兜底 ----------
   上面那套 `[class*=...]` 翻转在 `#page-content` 里稳定生效，但在侧边栏上
   实测**时好时坏**（同一份 CSS、同一个元素，不同页面结果不同；加 ID、
   加 !important 都没能稳定压住 Tailwind 运行时注入的工具类）。
   这两块区域结构固定（导航链接 + 图标 + 几个按钮），按元素写死更可靠 ——
   优先级恒定为 (1,0,1) 起步，工具类盖不过它。 */
body.has-stars #appSidebar a,
body.has-stars #appSidebar i { color: #C8CFDB !important; }
body.has-stars #appSidebar a:hover,
body.has-stars #appSidebar a:hover i { color: #EEF1F6 !important; }
/* 当前选中项：navItem 会给它加 font-medium，用这个区分，不必再读类名 */
body.has-stars #appSidebar a.font-medium,
body.has-stars #appSidebar a.font-medium i { color: #8AB4FF !important; }

body.has-stars header span,
body.has-stars header i,
body.has-stars header button,
body.has-stars header div { color: #C8CFDB !important; }
body.has-stars header button:hover,
body.has-stars header button:hover i { color: #EEF1F6 !important; }