/* ============================================================
   火灵ERP · 主题/皮肤切换系统 themes v1.0
   落地：豆包 2026-10-25（R5 主题皮肤）
   - 5 套主题：赛博蓝(默认)/暗夜黑金/极简白/翡翠绿/火灵橙
   - 3 档皮肤：standard(默认)/compact/comfort
   - 由 <html data-theme data-skin> 驱动 CSS 变量，配合 theme-switcher.js 切换记忆
   - 置于页面 </head> 末尾加载，变量覆盖内联 :root 硬编码色
   - 零外部素材，系统字体，纯 CSS 原创；署名 东莞市世炬科技有限公司 李培俊
   ============================================================ */

/* ---------- 主题色板（变量层） ---------- */
:root[data-theme="cyber"] {
  --side: #0e2a5c; --side2: #0b1e4a; --brand: #3b6db8; --brand2: #5a8fd6;
  --bg: #f4f6f8; --card: #ffffff; --txt: #1A1B1C; --txt2: #6B7280;
  --border: #E3E8EF; --ok: #16A34A; --warn: #D97706; --err: #DC2626;
  --glow: rgba(59,109,184,.18); --glow2: rgba(90,143,214,.18);
  --th1: #1a3a6e; --th2: #152d57; --th3: #0f2244; --th-txt: #e8f1ff;
}
:root[data-theme="dark"] {
  --side: #0b1020; --side2: #060a14; --brand: #6b8fc9; --brand2: #7fb3d9;
  --bg: #0d1117; --card: #161b22; --txt: #e6edf3; --txt2: #9db1c7;
  --border: #2a3644; --ok: #3fb950; --warn: #d29922; --err: #f85149;
  --glow: rgba(107,143,201,.15); --glow2: rgba(127,179,217,.15);
  --th1: #2a3a5e; --th2: #1a2545; --th3: #121a30; --th-txt: #dce9ff;
}
:root[data-theme="white"] {
  --side: #0f3d8c; --side2: #0a2a63; --brand: #4a6fa5; --brand2: #6b8fc0;
  --bg: #f8fafc; --card: #ffffff; --txt: #0f172a; --txt2: #64748b;
  --border: #e2e8f0; --ok: #16a34a; --warn: #d97706; --err: #dc2626;
  --glow: rgba(74,111,165,.15); --glow2: rgba(107,143,192,.15);
  --th1: #3b5a8a; --th2: #2d4a75; --th3: #1e3a5f; --th-txt: #ffffff;
}
:root[data-theme="green"] {
  --side: #064e3b; --side2: #022c22; --brand: #4a7a68; --brand2: #6b9a88;
  --bg: #f3f6f4; --card: #ffffff; --txt: #1c2b24; --txt2: #5f7268;
  --border: #dce7e1; --ok: #16a34a; --warn: #b45309; --err: #dc2626;
  --glow: rgba(74,122,104,.15); --glow2: rgba(107,154,136,.15);
  --th1: #3a6a58; --th2: #2d5748; --th3: #1e3a30; --th-txt: #eafff5;
}
:root[data-theme="gold"] {
  --side: #4a2f0a; --side2: #2e1c05; --brand: #a67c3a; --brand2: #c49a5a;
  --bg: #faf7f0; --card: #ffffff; --txt: #292524; --txt2: #78716c;
  --border: #ece4d5; --ok: #16a34a; --warn: #d97706; --err: #dc2626;
  --glow: rgba(166,124,58,.15); --glow2: rgba(196,154,90,.15);
  --th1: #7a5a2a; --th2: #5c4520; --th3: #3e2e15; --th-txt: #fff7e6;
}
:root[data-theme="lightblue"] {
  --side: #4a7ab8; --side2: #3a68a5; --brand: #5a85c4; --brand2: #7a9fd4;
  --bg: #f0f7ff; --card: #ffffff; --txt: #1e3a5f; --txt2: #64748b;
  --border: #dbeafe; --ok: #10b981; --warn: #f59e0b; --err: #ef4444;
  --glow: rgba(90,133,196,.15); --glow2: rgba(122,159,212,.15);
  --th1: #6a95d4; --th2: #5a85c4; --th3: #4a75b4; --th-txt: #ffffff;
}
:root[data-theme="deepblue"] {
  --side: #1e3a8a; --side2: #172554; --brand: #3a5a9a; --brand2: #5a7ab8;
  --bg: #f8fafc; --card: #ffffff; --txt: #0f172a; --txt2: #475569;
  --border: #e2e8f0; --ok: #16a34a; --warn: #d97706; --err: #dc2626;
  --glow: rgba(58,90,154,.15); --glow2: rgba(90,122,184,.15);
  --th1: #2d4a8a; --th2: #223a70; --th3: #172a55; --th-txt: #e0e7ff;
}
:root[data-theme="grassland"] {
  --side: #2d5a3d; --side2: #1f422c; --brand: #4a7a5a; --brand2: #6b9a7b;
  --bg: #f5f9f5; --card: #ffffff; --txt: #1e2e22; --txt2: #5f7268;
  --border: #dce7e1; --ok: #16a34a; --warn: #b45309; --err: #dc2626;
  --glow: rgba(74,122,90,.15); --glow2: rgba(107,154,123,.15);
  --th1: #3a6a48; --th2: #2d5a3d; --th3: #1f422c; --th-txt: #eafff0;
}

/* ---------- 皮肤档（密度/圆角/字号） ---------- */
:root[data-skin="standard"] { --td-pad: 8px 10px; --radius: 8px; --fs: 13.5px; --h1: 22px; }
:root[data-skin="compact"] { --td-pad: 4px 8px; --radius: 4px; --fs: 12px; --h1: 19px; }
:root[data-skin="comfort"] { --td-pad: 12px 16px; --radius: 12px; --fs: 14.5px; --h1: 26px; }

/* ---------- 主题应用层（覆盖硬编码） ---------- */
/* 全局背景/文字 */
:root[data-theme="dark"] body { background: var(--bg); color: var(--txt); }
:root[data-theme="dark"] .card, :root[data-theme="dark"] .hcol-panel { background: var(--card); color: var(--txt); box-shadow: 0 1px 3px rgba(0,0,0,.5); }

/* 侧边导航（erp-common .side / aside 系） */
:root[data-theme] .side, :root[data-theme] aside.side,
:root[data-theme] .sidebar, :root[data-theme] nav.menu,
:root[data-theme] .nav-pane, :root[data-theme] .side-nav {
  background: linear-gradient(180deg, var(--side) 0%, var(--side2) 100%);
}

/* 表头渐变（与 table-pro 同特异性，主题变量驱动） */
:root[data-theme] table thead th {
  background: linear-gradient(180deg, var(--th1) 0%, var(--th2) 60%, var(--th3) 100%) !important;
  color: var(--th-txt) !important;
  border-bottom-color: color-mix(in srgb, var(--brand) 55%, transparent) !important;
}
:root[data-theme] table thead th:hover {
  background: linear-gradient(180deg, var(--brand) 0%, var(--th2) 60%, var(--th3) 100%) !important;
  box-shadow: 0 0 14px var(--glow), 0 3px 10px rgba(2,20,60,.3);
}
:root[data-theme] table thead th.col-sort-asc::after,
:root[data-theme] table thead th.col-sort-desc::after { color: var(--brand2) !important; text-shadow: 0 0 6px var(--glow2); }

/* 主按钮 / 激活态 */
:root[data-theme] .btn-primary, :root[data-theme] .ltbtn.active, :root[data-theme] .hcol-btn {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand2) 100%);
  box-shadow: 0 4px 14px var(--glow);
}
:root[data-theme] .ltbar, :root[data-theme] .toolbar {
  background: color-mix(in srgb, var(--card) 78%, transparent);
  border-color: color-mix(in srgb, var(--brand) 15%, transparent);
  box-shadow: 0 4px 18px rgba(2,20,60,.08), inset 0 1px 0 rgba(255,255,255,.7);
}
:root[data-theme] .hcol-panel {
  background: color-mix(in srgb, var(--card) 94%, transparent);
  border-color: color-mix(in srgb, var(--brand) 28%, transparent);
}
:root[data-theme] .hcol-panel .hp-hd { background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 8%, var(--card)), var(--card)); color: var(--side); }
:root[data-theme] .hcol-panel .hp-opt:hover { background: color-mix(in srgb, var(--brand) 7%, transparent); }
:root[data-theme] .hcol-panel input[type=checkbox] { accent-color: var(--brand); }

/* 状态色 */
:root[data-theme] .st-ok, :root[data-theme] .st-green { color: var(--ok) !important; }
:root[data-theme] .st-warn, :root[data-theme] .st-yellow { color: var(--warn) !important; }
:root[data-theme] .st-err, :root[data-theme] .st-red { color: var(--err) !important; }

/* 皮肤应用层 */
:root[data-skin] table th, :root[data-skin] table td { padding: var(--td-pad); font-size: var(--fs); }
:root[data-skin] .btn, :root[data-skin] .ltbtn, :root[data-skin] .card { border-radius: var(--radius); }
:root[data-skin] .page-header h1, :root[data-skin] h1 { font-size: var(--h1); }

/* ---------- 主题切换悬浮球（theme-switcher.js 注入容器样式） ---------- */
#tswFab {
  position: fixed; right: 22px; bottom: 22px; z-index: 1002;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color: #fff; font-size: 18px;
  box-shadow: 0 6px 20px var(--glow), inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform .18s, box-shadow .18s;
  user-select: none;
}
#tswFab:hover { transform: scale(1.08) rotate(8deg); box-shadow: 0 10px 28px var(--glow); }
#tswPanel {
  position: fixed; right: 24px; bottom: 72px; z-index: 1002;
  min-width: 210px; border-radius: 14px;
  background: color-mix(in srgb, var(--card) 94%, transparent);
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent);
  box-shadow: 0 14px 44px rgba(2,20,60,.22), inset 0 1px 0 rgba(255,255,255,.7);
  font-size: 12.5px; display: none; padding: 12px 14px;
}
#tswPanel.on { display: block; }
#tswPanel .tsw-t { font-weight: 700; color: var(--side); margin-bottom: 8px; font-size: 12.5px; }
#tswPanel .tsw-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
#tswPanel .tsw-th { width: 30px; height: 30px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; position: relative; transition: transform .15s, border-color .15s; }
#tswPanel .tsw-th:hover { transform: scale(1.12); }
#tswPanel .tsw-th.on { border-color: var(--brand); box-shadow: 0 0 0 3px var(--glow); }
#tswPanel .tsw-th b { position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%); font-size: 9.5px; font-weight: 500; color: var(--txt2); white-space: nowrap; }
#tswPanel .tsw-sk { padding: 5px 12px; border-radius: 14px; cursor: pointer; font-size: 11.5px; border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent); color: var(--txt); background: transparent; transition: all .15s; }
#tswPanel .tsw-sk:hover { box-shadow: 0 0 0 3px var(--glow); }
#tswPanel .tsw-sk.on { background: linear-gradient(135deg, var(--brand), var(--brand2)); color: #fff; border-color: transparent; }