/* 界面皮肤：整套系统统一换色。
   页面里的颜色已经全部走 theme.css 的 CSS 变量，所以这里只需按皮肤重定义变量值，
   深色皮肤再补几条结构性覆盖（原生控件、遮罩、打印设计器画布）。

   可用皮肤：blue（默认，不覆盖）/ teal 青绿 / violet 靛紫 / amber 暖橙 / dark 深色 */

html[data-skin="teal"] {
  --primary: #0d9488;
  --primary-dark: #0f766e;
  --primary-soft: #e7f9f5;
  --primary-line: #a2e2d7;
  --primary-grad-end: #14b8a6;
  --bg: #f2faf8;
  --surface-sub: #f4fbf9;
  --surface-hover: #eaf6f3;
  --surface-mute: #e2f1ed;
  --line: #dfece8;
  --line-soft: #eef5f3;
  --border-strong: #c8e1db;
}

html[data-skin="violet"] {
  --primary: #6d28d9;
  --primary-dark: #5b21b6;
  --primary-soft: #f4f0ff;
  --primary-line: #d6c8fb;
  --primary-grad-end: #8b5cf6;
  --bg: #f8f7fc;
  --surface-sub: #faf9fe;
  --surface-hover: #f3f0fb;
  --surface-mute: #ece7f8;
  --line: #eae6f4;
  --line-soft: #f2effa;
  --border-strong: #d4cbe9;
}

html[data-skin="amber"] {
  --primary: #c2410c;
  --primary-dark: #9a3412;
  --primary-soft: #fff4ec;
  --primary-line: #fbd5b7;
  --primary-grad-end: #f97316;
  --bg: #fdf9f5;
  --surface-sub: #fefbf8;
  --surface-hover: #faf2ea;
  --surface-mute: #f5eae0;
  --line: #f0e5db;
  --line-soft: #f7f1eb;
  --border-strong: #e2cfbe;
}

html[data-skin="dark"] {
  color-scheme: dark;
  --primary: #60a5fa;
  --primary-dark: #3b82f6;
  --primary-soft: #1b2a44;
  --primary-line: #2f4674;
  --primary-grad-end: #1e3a8a;
  --on-primary: #0b1220;
  --bg: #0e1622;
  --surface: #161f2e;
  --surface-sub: #1a2434;
  --surface-hover: #1d2839;
  --surface-mute: #101927;
  --text: #e6edf7;
  --text-sub: #93a4bd;
  --line: #26334a;
  --line-soft: #1e293b;
  --border-strong: #33415c;
  --danger: #f87171;
  --danger-soft: #361c1c;
  --danger-line: #5a2b2b;
  --success: #4ade80;
  --success-soft: #122c1d;
  --warning: #fbbf24;
  --warning-soft: #33270f;
  --shadow: 0 10px 40px rgba(0, 0, 0, .5);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
}

/* 深色下需要额外处理的：遮罩更暗、滚动条、按钮文字对比、打印设计器的白纸保持白 */
html[data-skin="dark"] dialog::backdrop { background: rgba(4, 8, 15, .68); }

html[data-skin="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-skin="dark"] ::-webkit-scrollbar-track { background: #101927; }
html[data-skin="dark"] ::-webkit-scrollbar-thumb { background: #2c3a52; border-radius: 6px; }
html[data-skin="dark"] ::-webkit-scrollbar-thumb:hover { background: #3a4c69; }

html[data-skin="dark"] button.primary { color: #0b1220; }
html[data-skin="dark"] .mark { color: #0b1220; }
html[data-skin="dark"] .avatar { color: #cfe0ff; }
html[data-skin="dark"] nav button.active { background: var(--surface-sub); }

/* 打印模板设计器：它自己的画布是"纸"，任何皮肤下都必须保持白纸 */
html[data-skin="dark"] #hiprint-printTemplate,
html[data-skin="dark"] .hiprint-printPaper,
html[data-skin="dark"] .hiprint-printPanel { background: #fff; }

/* hiprint 自带界面（元素面板、元素属性）不在我们的变量体系里，深色下单独覆盖 */
html[data-skin="dark"] .hiprintEpContainer,
html[data-skin="dark"] .hiprintEpContainer div,
html[data-skin="dark"] .hiprintEpContainer span,
html[data-skin="dark"] #PrintElementOptionSetting,
html[data-skin="dark"] #PrintElementOptionSetting div,
html[data-skin="dark"] #PrintElementOptionSetting span,
html[data-skin="dark"] #PrintElementOptionSetting label { color: var(--text); }
html[data-skin="dark"] .hiprintEpContainer input,
html[data-skin="dark"] #PrintElementOptionSetting input,
html[data-skin="dark"] #PrintElementOptionSetting select,
html[data-skin="dark"] #PrintElementOptionSetting textarea {
  background: var(--surface-sub);
  color: var(--text);
  border-color: var(--line);
}
html[data-skin="dark"] .hiprint-printPagination,
html[data-skin="dark"] .hiprint-printPagination * { color: var(--text-sub); }

/* MES 概览页的卡片已走变量，这里只兜底少数几条 */
html[data-skin="dark"] .ov-card,
html[data-skin="dark"] .ov-panel { background: var(--surface); border-color: var(--line); }
html[data-skin="dark"] .ov-list b { color: var(--text); }
html[data-skin="dark"] .ov-bars .track { background: var(--surface-mute); }

/* 深色下提示条与弹窗阴影 */
html[data-skin="dark"] dialog { box-shadow: var(--shadow); }
html[data-skin="dark"] .toast { background: #e6edf7; color: #0e1622; }
html[data-skin="dark"] .toast.error { background: #b91c1c; color: #fff; }
html[data-skin="dark"] .toast.success { background: #15803d; color: #fff; }
html[data-skin="dark"] .actions button.quit:hover:not(:disabled) { color: #1a0f0f; background: #ef4444; border-color: #ef4444; }