/* =====================================================================
 * 皮肤层（外观个性化）
 * ---------------------------------------------------------------------
 * 设计原则：不改动原 styles.css 的令牌体系，只在这里「在之上」重定义。
 * 原 :root 的令牌 = 经典深蓝（default），作为最低风险基线保留不动。
 * 切换靠 <html data-skin="a|b|c"> 这一根属性，组件统一消费 CSS 变量，
 * 因此三套皮肤共用同一套 DOM 与组件代码，无需三份实现。
 *
 * 优先级：个人选择（localStorage 'wb-skin'）> 公司默认（js/skin.js 的
 * COMPANY_SKIN 常量）。default 表示「跟随公司默认 / 经典深蓝」，不做覆盖。
 * ===================================================================== */

/* ---------- A 云白·留白型（克制蓝 #2f6bff，无边框卡片，低密度，大圆角） ---------- */
:root[data-skin="a"]{
  --primary:#2f6bff; --primary-600:#245ae0; --primary-700:#1d49c2;
  --primary-50:#eef3ff; --primary-100:#dbe6ff;
  --bg:#f7f8fb; --card:#ffffff; --text:#1a1d24; --text-2:#4b5160; --text-3:#7c8494; --muted:#a0a8b5;
  --border:#eceef3; --border-2:#f4f6f9;
  --radius:16px; --radius-sm:12px;
  --focus:0 0 0 3px rgba(47,107,255,.15);
  --shadow-sm:0 1px 2px rgba(16,24,40,.04);
  --shadow:0 1px 2px rgba(16,24,40,.04);
  --shadow-md:0 2px 8px rgba(16,24,40,.05);
  --shadow-lg:0 12px 30px rgba(16,24,40,.08);
  --side-bg:#ffffff;
  --avatar-grad:linear-gradient(135deg,var(--primary),var(--primary-600));
  --login-grad:radial-gradient(1200px 620px at 50% -12%, var(--primary-100), var(--bg) 58%);
}

/* ---------- B 墨栏·结构型（深色侧栏 #1b2230 + 靛蓝 #4f6bff，细边框，紧凑） ---------- */
:root[data-skin="b"]{
  --primary:#4f6bff; --primary-600:#3f57e6; --primary-700:#3246c4;
  --primary-50:#eef1ff; --primary-100:#dde3ff;
  --bg:#eef1f6; --card:#ffffff; --text:#1f2430; --text-2:#4a5160; --text-3:#737b8c; --muted:#9aa2b1;
  --border:#e3e7ef; --border-2:#eef1f6;
  --radius:12px; --radius-sm:9px;
  --focus:0 0 0 3px rgba(79,107,255,.18);
  --shadow-sm:0 1px 2px rgba(16,24,40,.04);
  --shadow:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.04);
  --shadow-md:0 4px 12px rgba(16,24,40,.06);
  --shadow-lg:0 14px 34px rgba(16,24,40,.12);
  --side-bg:#1b2230;
  --side-border:#232c3d;
  --side-text:#aeb6c6;
  --side-text-strong:#f3f5f9;
  --side-text-muted:#8a93a6;
  --side-hover:rgba(255,255,255,.06);
  --side-active-bg:rgba(79,107,255,.20);
  --side-active-text:#eaf0ff;
  --avatar-grad:linear-gradient(135deg,var(--primary),var(--primary-700));
  --login-grad:radial-gradient(1200px 620px at 50% -12%, var(--primary-100), var(--bg) 58%);
}

/* ---------- C 薄荷·亲和型（薄荷青 #15b8a6，大圆角，软阴影） ---------- */
:root[data-skin="c"]{
  --primary:#15b8a6; --primary-600:#11a391; --primary-700:#0d8a7a;
  --primary-50:#e6faf6; --primary-100:#c9f2eb;
  --bg:#f4f8f7; --card:#ffffff; --text:#173033; --text-2:#44585c; --text-3:#6d8185; --muted:#93a6a9;
  --border:#e2ecea; --border-2:#eef5f4;
  --radius:20px; --radius-sm:14px;
  --focus:0 0 0 3px rgba(21,184,166,.18);
  --shadow-sm:0 1px 2px rgba(16,40,36,.04);
  --shadow:0 2px 6px rgba(16,40,36,.05);
  --shadow-md:0 6px 16px rgba(16,40,36,.07);
  --shadow-lg:0 16px 36px rgba(16,40,36,.12);
  --side-bg:#ffffff;
  --avatar-grad:linear-gradient(135deg,var(--primary),var(--primary-600));
  --login-grad:radial-gradient(1200px 620px at 50% -12%, var(--primary-100), var(--bg) 58%);
}

/* ---------- 通用覆盖：让侧栏 / 头像 / 登录页随皮肤变量走 ---------- */
.sidebar{ background:var(--side-bg,#fff); }
.avatar{
  background:var(--avatar-grad,linear-gradient(135deg,var(--primary),#2f6fc0));
}
.login{
  background:var(--login-grad,radial-gradient(1200px 620px at 50% -12%,#d9e6f6,#f3f5f9 58%));
}

/* ---------- B 深色侧栏专属细节（仅 data-skin=b 时生效） ---------- */
:root[data-skin="b"] .sidebar{ border-right:1px solid var(--side-border); }
:root[data-skin="b"] .side-brand{ border-bottom:1px solid var(--side-border); }
:root[data-skin="b"] .side-brand-text strong{ color:var(--side-text-strong); }
:root[data-skin="b"] .side-brand-text em{ color:var(--side-text-muted); }
/* 深蓝 ICAS logo 在深底上反白，保证可见 */
:root[data-skin="b"] .side-brand .brand-logo{ filter:brightness(0) invert(1); }
:root[data-skin="b"] .nav-item{ color:var(--side-text); }
:root[data-skin="b"] .nav-item:hover{ background:var(--side-hover); color:#ffffff; }
:root[data-skin="b"] .nav-item.active{ background:var(--side-active-bg); color:var(--side-active-text); }
:root[data-skin="b"] .nav-item.active svg{ color:var(--primary); }
:root[data-skin="b"] .nav-item svg{ color:var(--side-text-muted); }
:root[data-skin="b"] .nav-group-title{ color:var(--side-text-muted); }
:root[data-skin="b"] .nav-item .nav-count{ color:var(--side-text-muted); }
:root[data-skin="b"] .side-foot{ border-top:1px solid var(--side-border); }

/* =====================================================================
 * 外观个性化面板（由 js/skin.js 注入触发按钮与弹层）
 * ===================================================================== */
.skin-panel{
  position:fixed; top:60px; right:16px; z-index:300; width:300px;
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  box-shadow:var(--shadow-lg); padding:14px 14px 12px; font-family:inherit;
}
.skin-panel__title{ margin:0 0 4px; font-size:13.5px; font-weight:600; color:var(--text); }
.skin-panel__hint{ margin:0 0 12px; font-size:11.5px; color:var(--muted); line-height:1.55; }
.skin-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.skin-tile{
  display:block; width:100%; border:1.5px solid var(--border-2); border-radius:10px;
  overflow:hidden; background:#fff; cursor:pointer; padding:0; font-family:inherit; transition:.15s;
}
.skin-tile:hover{ border-color:var(--primary-100); }
.skin-tile.is-active{ border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-50); }
.skin-tile__sw{ height:48px; display:flex; overflow:hidden; }
.skin-tile__bar{ width:32%; }
.skin-tile__main{ width:68%; padding:7px; display:flex; flex-direction:column; gap:4px; }
.skin-tile__line{ height:6px; border-radius:3px; }
.skin-tile__line.short{ width:55%; }
.skin-tile__label{
  padding:7px 9px; font-size:12px; color:var(--text-2);
  border-top:1px solid var(--border-2); text-align:left;
}
.skin-tile.is-active .skin-tile__label{ color:var(--primary); font-weight:600; }
.skin-panel__reset{ margin-top:12px; text-align:center; font-size:12px; color:var(--muted); }
.skin-panel__reset a{ color:var(--primary); cursor:pointer; font-weight:500; }
.skin-panel__reset b{ color:var(--text-2); font-weight:600; }

/* 触发按钮（注入到顶栏用户区） */
#btn-skin{ gap:5px; }
#btn-skin svg{ width:15px; height:15px; }