/* ==========================================================================
   SingClan SCADA — 浅色日班模式覆盖层（light day-mode）
   仅在 <html data-theme="light"> 时生效，不改动默认深色主题。
   通过覆盖设计令牌 + 逐项覆盖硬编码深色字面量实现整体浅色化。
   ========================================================================== */

/* =========================== 设计令牌（浅色） =========================== */
html[data-theme="light"] {
  --bg-0: #eef1f6;
  --bg-1: #e8edf4;
  --bg-2: #dde4ee;
  --bg-3: #d3dce8;

  --panel-1: rgba(255, 255, 255, 0.92);
  --panel-2: rgba(250, 252, 255, 0.96);
  --panel-3: rgba(240, 244, 250, 0.92);
  --panel-solid: #ffffff;

  --line-1: rgba(20, 38, 64, 0.10);
  --line-2: rgba(20, 38, 64, 0.18);
  --line-3: rgba(20, 38, 64, 0.30);

  --tx-1: #16243c;
  --tx-2: #41526b;
  --tx-3: #4f6079;
  --tx-4: #5c6e88;

  /* 语义色文字态：浅色底上加深，保证正文/数值 ≥4.5:1 对比度 */
  --brand-tx: #c2410c;
  --cyan-tx:  #0b6470;
  --green-tx: #0b6b46;
  --amber-tx: #9a6700;
  --red-tx:   #be123c;
  --purple-tx: #6d28d9;
  --st-run-tx:   #0b6b46;
  --st-warn-tx:  #9a6700;
  --st-alarm-tx: #be123c;
  --st-crit-tx:  #b30b2e;
  --st-stop-tx:  #4a5a70;

  --chip-bg: rgba(20, 38, 64, 0.05);
  --flow-node: rgba(255, 255, 255, 0.95);

  /* 反应器剖面图：改为浅色金属质感，避免浅色底上出现深色块 */
  --rx-body-1: #dae4f1;
  --rx-body-2: #c3d1e4;
  --rx-body-3: #a9bbd4;
  --rx-nozzle: #8fa6c4;
  --rx-heater: #e9d2b6;
  --rx-rotor: #5b7099;
  --rx-rotor-2: #7d93bb;

  --sh-1: 0 2px 10px rgba(20, 38, 64, 0.10);
  --sh-2: 0 8px 28px rgba(20, 38, 64, 0.14);
  --sh-3: 0 18px 48px rgba(20, 38, 64, 0.18);
}

/* =========================== 页面底色 / 网格底纹 =========================== */
html[data-theme="light"] body {
  background-color: var(--bg-0);
  background-image:
    radial-gradient(1100px 620px at 12% -8%, rgba(255, 122, 53, 0.10), transparent 62%),
    radial-gradient(980px 560px at 92% 4%, rgba(34, 211, 238, 0.09), transparent 60%),
    radial-gradient(900px 700px at 50% 112%, rgba(129, 140, 248, 0.08), transparent 62%),
    linear-gradient(158deg, #eef2f8 0%, #e6ecf3 46%, #dde4ee 100%);
}

html[data-theme="light"] body::before {
  background-image:
    linear-gradient(rgba(20, 38, 64, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 38, 64, 0.05) 1px, transparent 1px);
}

/* =========================== 滚动条 =========================== */
html[data-theme="light"] * { scrollbar-color: rgba(20, 38, 64, 0.28) transparent; }
html[data-theme="light"] ::-webkit-scrollbar-track { background: rgba(20, 38, 64, 0.05); }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(20, 38, 64, 0.26); }
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(20, 38, 64, 0.42); }

/* =========================== 导航 / 页脚 =========================== */
html[data-theme="light"] .nav {
  background: rgba(255, 255, 255, 0.82);
  border-bottom-color: var(--line-2);
}
html[data-theme="light"] .nav-link:hover { background: rgba(20, 38, 64, 0.05); color: var(--tx-1); }
html[data-theme="light"] .nav-pill { background: rgba(20, 38, 64, 0.05); }
html[data-theme="light"] .icon-btn { background: rgba(20, 38, 64, 0.05); }
html[data-theme="light"] .icon-btn:hover { background: rgba(20, 38, 64, 0.09); border-color: var(--line-3); }
html[data-theme="light"] .foot { background: rgba(255, 255, 255, 0.7); border-top-color: var(--line-2); }
html[data-theme="light"] .fs-toggle { background: rgba(255, 255, 255, 0.95); border-color: var(--line-2); }

/* =========================== 页头标题渐变文字 =========================== */
html[data-theme="light"] .page-hd h1 {
  background: linear-gradient(100deg, #16243c 6%, var(--brand-d) 56%, var(--cyan-tx) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* =========================== 按钮 =========================== */
html[data-theme="light"] .btn:not(.btn-primary):not(.btn-cyan):not(.btn-green):not(.btn-red) { background: rgba(20, 38, 64, 0.05); }
html[data-theme="light"] .btn-ghost { background: rgba(20, 38, 64, 0.04); }

/* =========================== 面板 / 卡片 =========================== */
html[data-theme="light"] .panel-hd { background: rgba(20, 38, 64, 0.03); }
html[data-theme="light"] .panel::before { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent); }

html[data-theme="light"] .toolbar { background: rgba(20, 38, 64, 0.03); }
html[data-theme="light"] .seg { background: rgba(20, 38, 64, 0.06); }

html[data-theme="light"] .kpi {
  background: linear-gradient(158deg, rgba(255, 255, 255, 0.96), rgba(238, 243, 249, 0.98));
}
html[data-theme="light"] .sensor-row:hover { background: rgba(20, 38, 64, 0.045); }

html[data-theme="light"] .mod-card,
html[data-theme="light"] .md-card {
  background: linear-gradient(158deg, rgba(255, 255, 255, 0.96), rgba(238, 243, 249, 0.98));
}
html[data-theme="light"] .mc-metric { background: rgba(20, 38, 64, 0.05); }

/* 实时生产监控页：八大模块仪表卡与统计条在浅色模式下保持浅底 */
html[data-theme="light"] .stat-cell {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(238, 243, 249, 0.98));
}
html[data-theme="light"] .md-head {
  background: rgba(20, 38, 64, 0.03);
}
html[data-theme="light"] .md-head .mi svg {
  filter: brightness(0.55) saturate(1.05);
}
html[data-theme="light"] .gauge-cell {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.94), rgba(238, 243, 249, 0.96));
}
html[data-theme="light"] .heater-zone {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.92), rgba(238, 243, 249, 0.95));
}
html[data-theme="light"] .hc-side {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(238, 243, 249, 0.96));
  border-color: rgba(255, 122, 53, 0.32);
}

/* =========================== 表单 / 表格 =========================== */
html[data-theme="light"] .field { background: rgba(255, 255, 255, 0.8); }
html[data-theme="light"] select.field option { background: #ffffff; color: #16243c; }
html[data-theme="light"] .kv-select option { background: #ffffff; color: #16243c; }
html[data-theme="light"] .tbl thead th { background: rgba(244, 247, 251, 0.97); }
html[data-theme="light"] .tbl tbody tr:hover { background: rgba(20, 38, 64, 0.045); }

/* =========================== 摄像头信息条（视频画面保持深色） =========================== */
html[data-theme="light"] .cam-meta { background: rgba(255, 255, 255, 0.95); border-top-color: var(--line-1); }

/* =========================== 报警条目 / 弹窗 =========================== */
html[data-theme="light"] .alarm-item { background: rgba(255, 255, 255, 0.55); border-color: var(--line-2); }
html[data-theme="light"] .alarm-item:hover { background: rgba(20, 38, 64, 0.04); }
/* 浅色版：已确认报警提亮（深色版保持 0.56 的弱化效果不变） */
html[data-theme="light"] .alarm-item.acked { opacity: 0.78; }
html[data-theme="light"] .alarm-item .ai-m { color: var(--tx-3); }
html[data-theme="light"] .alarm-modal {
  background: linear-gradient(160deg, #ffffff 0%, #fff1f4 100%);
  box-shadow: 0 30px 80px rgba(20, 38, 64, 0.3);
}
html[data-theme="light"] .alarm-modal .am-hd { background: rgba(255, 45, 85, 0.10); }

/* =========================== 通知 =========================== */
html[data-theme="light"] .toast {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 48px rgba(20, 38, 64, 0.18);
}

/* =========================== SVG 流程 / 平面图文字（兜底，内联已转变量） =========================== */
html[data-theme="light"] .iso-code  { fill: var(--tx-1); }
html[data-theme="light"] .iso-label { fill: var(--tx-2); }
html[data-theme="light"] .iso-sub   { fill: var(--tx-3); }

/* 浅色主题：布局图保持原始白底图纸 */
html[data-theme="light"] .plant-img { filter: none; }

/* =========================== 各页面内联卡片渐变 =========================== */
html[data-theme="light"] .safety-panel {
  border-color: rgba(52, 211, 153, 0.4);
  background: linear-gradient(150deg, rgba(220, 245, 236, 0.9), rgba(240, 250, 246, 0.95));
}
html[data-theme="light"] .safety-panel.warn {
  border-color: rgba(251, 191, 36, 0.55);
  background: linear-gradient(150deg, rgba(252, 244, 224, 0.92), rgba(248, 240, 220, 0.95));
}
html[data-theme="light"] .safety-panel.crit {
  border-color: rgba(255, 45, 85, 0.7);
  background: linear-gradient(150deg, rgba(255, 232, 238, 0.92), rgba(255, 240, 244, 0.95));
}

html[data-theme="light"] .rx-panel {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.94), rgba(238, 243, 249, 0.96));
}
html[data-theme="light"] .flow-stage {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.94), rgba(238, 243, 249, 0.96));
}
html[data-theme="light"] .fs-b .m span { background: rgba(20, 38, 64, 0.05); }
html[data-theme="light"] .perm-bar {
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.93), rgba(238, 243, 249, 0.96));
}
html[data-theme="light"] .dev-card {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.94), rgba(238, 243, 249, 0.96));
}
html[data-theme="light"] .mode-seg button:not(.on) { background: rgba(20, 38, 64, 0.05); }
html[data-theme="light"] .m-tab {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.93), rgba(238, 243, 249, 0.96));
}
html[data-theme="light"] .m-tab.on {
  background: linear-gradient(160deg, color-mix(in srgb, var(--mc) 14%, rgba(255, 255, 255, 0.95)), rgba(238, 243, 249, 0.96));
}
html[data-theme="light"] .hero-mod {
  background: linear-gradient(130deg, color-mix(in srgb, var(--mc) 12%, rgba(255, 255, 255, 0.96)), rgba(238, 243, 249, 0.94));
}
html[data-theme="light"] .stat-box {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.93), rgba(238, 243, 249, 0.96));
}
/* monitor.html 页内硬编码的深色统计格（深色版保持不变，仅浅色版覆盖） */
html[data-theme="light"] .stat-cell {
  background: rgba(20, 38, 64, 0.05);
  border-color: var(--line-1);
}
html[data-theme="light"] .cnt-card {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.93), rgba(238, 243, 249, 0.96));
}

/* =========================== 浅色版：语义色文字态兜底 =========================== */
html[data-theme="light"] .sp-pv { color: var(--cyan-tx); }
html[data-theme="light"] .sp-sv { color: var(--brand-tx); }

/* 通知图标在浅色底上加深，避免看不清 */
html[data-theme="light"] .toast.ok .ic { color: var(--green-tx); }
html[data-theme="light"] .toast.info .ic { color: var(--cyan-tx); }
html[data-theme="light"] .toast.warn .ic { color: var(--amber-tx); }
html[data-theme="light"] .toast.err .ic { color: var(--red-tx); }

/* 模块色图标在浅色底上减亮，保证可见 */
html[data-theme="light"] .mc-title .mi svg,
html[data-theme="light"] .m-tab .ti svg,
html[data-theme="light"] .hero-mod .hm-ic svg { filter: brightness(0.55) saturate(1.05); }

/* 其余语义色文字态（控制中心大字 / 日志 / 云台按钮） */
html[data-theme="light"] .hc-big b { color: var(--brand-tx); }
html[data-theme="light"] .log-item.lv-ok .lx { color: var(--green-tx); }
html[data-theme="light"] .log-item.lv-warn .lx { color: var(--amber-tx); }
html[data-theme="light"] .log-item.lv-err .lx { color: var(--red-tx); }
html[data-theme="light"] .ptz button:hover { color: var(--brand-tx); }