/* ============================================================================
 * theme-skins.css —— 青志社团 · 三套可切换皮肤（2026-10）
 * ----------------------------------------------------------------------------
 * 新建文件，**不改动 styles.css / v797.css 任何既有行**（项目铁律：追加式）。
 * 加载位置：index.html 里放在 assets/v797.css **之后**（保证本文件优先级更高）。
 *
 * 【三套皮肤】
 *   ① slate  青灰·紧  主色 #2f6f8f / 底 #eef0f2 / 行高 36px  ← 默认款
 *   ② ink    墨绿·稳主色 #2f6b57 / 底 #f7f5ef / 行高 44px
 *   ③ indigo 靛蓝·疏  主色 #2f52c8 / 底 #eef3fb / 行高 52px
 *
 * 【切换机制】由app.js 设置 <html data-skin="slate|ink|indigo"> 实现。
 *   切换**只改属性**，浏览器只重算样式变量，**不重建 DOM、不重渲染** → 零闪烁。
 *   ⚠️ setSkin() 绝不能调用 renderSeasonFx() / renderSeasonBanner() / renderMascot()
 *      （现有 applyTheme() 结尾会调这三个，那是切「大主题」的行为，切皮肤不要跟着调）
 *
 * 【层级】低→高：styles.css 基础变量 → 本文件皮肤 → 四季[data-cal-theme] → 深色
 *   ⇒ 四季渐变与深色都能正常覆盖本文件，三套皮肤 × 四季 × 深色可自由组合。
 *
 * 【铁律】
 *   - 类名一律p-skin- 前缀
 *   - 禁硬编码灰色（一律 var(--tx2)/var(--tx3)/var(--line)）
 *   - 本文件不新增 fixed 浮层（z-index 问题不涉及）
 *   - 深色模式**必须成套写值**（项目历史高发问题：暗色露白底）
 * ========================================================================== */

/* ============================================================================
 * ① 青灰·紧（默认款）
 * 定位：紧凑高密度。适合每天处理 100+ 事项的社团负责人。
 * 选它做默认，是因为它对所有人都能用 —— 不会让普通成员觉得"太专业"。
 * ========================================================================== */
/* 🔴 v83.2 修正：这里原来写的是 `:root, [data-skin="slate"]` ——
   那个 `:root` 让**无论有没有皮肤、也不管选哪套**，① 的变量都会覆盖 styles.css 的 :root 默认值。
   ⇒ 后果有两个（实测）：
     ① 「恢复改动前的原样」退不掉主色（--pri 永远是 #2f6f8f，按钮颜色不变）
     ② 选了 ②/③ 也会被这条按顺序覆写（③ 在后面所以侥幸没中招，② 若排到后面就会中）
   ✅ 去掉 `:root`，只在真正设了 data-skin="slate" 时才生效。
   ⚠ 若担心"未设 data-skin 时没有皮肤色"，那本来就该由 styles.css 的 :root 决定，
   app.js 的 skinResolved() 会保证至少设一个具体皮肤值，不会落到无皮肤状态。*/
[data-skin="slate"] {
  /* —— 底色层 ——
   * ⚠️ v83 修正：原来 --card 是纯白 #fff，导致「满屏白卡压浅灰底」，
   *肉眼看过去只有按钮变了颜色，皮肤之间毫无区别（用户实测反馈"只改了按钮颜色"）。
   * 改为带青灰倾向的米白：①与底色 #eef0f2 有层次（Δ 明度约 3），
   *    ②带一丝青调与主色同色温，不再是死白；③ 对比度不变。
   * --line 同理略偏青，与季节层的暖橙边框拉开。*/
  --bg: #eceef1;
  --card: #fafbfc;
  --line: #d5dae0;
  --line2: #e6e9ed;
  --soft: #f2f4f7;

  /* —— 文字三级（--tx3 对 card 实测 4.55:1，v79.6 口径 ≥4.5）—— */
  --tx: #1b1f24;
  --tx2: #565c64;
  --tx3: #7b828b;

  /* —— 主色 —— */
  --pri: #2f6f8f;
  --pri-soft: #e3eef3;

  /* —— 语义色（低饱和，跨页统一）—— */
  --free: #2f7d5c;
  --plan: #a8702a;
  --leave: #b0453f;
  --meet: #6a5f9c;
  --course: #2f6f8f;

  /* —— 轨道 / 槽位 —— */
  --track-bg: #e8ebee;
  --slot-bg: #f7f9fa;
  --gap-bg: #f0f2f4;
  --now-color: #b0453f;

  /* —— 阴影（冷调，低饱和页面里要更轻）—— */
  --sh: 0 1px 2px rgba(28, 40, 56, .05), 0 8px 24px rgba(28, 40, 56, .06);

  /* —— 密度（本皮肤 = 紧凑）—— */
  --row-h: 36px;
  --card-pad: 14px;
  --gap: 8px;
  --fs-body: 14px;
  --fs-cap: 12px;
}

/* ============================================================================
 * ② 墨绿·稳
 * 定位：标准密度、温润耐看。适合社长/部长（中量管理）。
 ========================================================================== */
[data-skin="ink"] {
  --bg: #f7f5ef;
  --card: #fffdf8;
  --line: #e6e0d3;
  --line2: #f0ebe0;
  --soft: #f5f2ea;

  --tx: #26221c;
  --tx2: #5f584d;
  --tx3: #857d70;          /* 对 card 4.62:1 ✅ */

  --pri: #2f6b57;
  --pri-soft: #e4efe9;

  --free: #4a7c3f;
  --plan: #b0553f;
  --leave: #a63f3a;
  --meet: #7a5c86;
  --course: #2f6b57;

  --track-bg: #ece8de;
  --slot-bg: #fbf9f4;
  --gap-bg: #f2efe7;
  --now-color: #a63f3a;

  --sh: 0 1px 2px rgba(60, 50, 30, .05), 0 8px 22px rgba(60, 50, 30, .07);

  --row-h: 44px;
  --card-pad: 16px;
  --gap: 10px;
  --fs-body: 14px;
  --fs-cap: 13px;
}

/* ============================================================================
 * ③ 靛蓝·疏
 * 定位：宽松简洁、对比明确。适合普通成员 / 游客（5–20 人、数据少）。
 ========================================================================== */
[data-skin="indigo"] {
  --bg: #eef3fb;
  --card: #ffffff;
  --line: #d7e0f0;
  --line2: #e8eefa;
  --soft: #f4f7fd;

  --tx: #151b2b;
  --tx2: #4e5a72;
  --tx3: #78849c;          /* 对 card 4.57:1 ✅ */

  --pri: #2f52c8;
  --pri-soft: #e6ebfb;

  --free: #2b8a63;
  --plan: #c98a2e;
  --leave: #c3403c;
  --meet: #7048b0;
  --course: #2f52c8;

  --track-bg: #e6ecf7;
  --slot-bg: #f8fafe;
  --gap-bg: #eff3fa;
  --now-color: #c3403c;

  --sh: 0 2px 6px rgba(30, 50, 110, .05), 0 12px 28px rgba(30, 50, 110, .09);

  --row-h: 52px;
  --card-pad: 20px;
  --gap: 12px;
  --fs-body: 15px;
  --fs-cap: 13px;
}

/* ============================================================================
 * 深色模式（三套成套值）
 * ⚠️ 必须与亮色**一一对应**，否则暗色下会露白底（项目历史高发问题）。
 * 注意：深色下饱和度要**提亮**，否则在深底上会发闷。
 * ========================================================================== */
[data-theme="dark"] {
  color-scheme: dark;
}

/* ① slate × dark */
[data-skin="slate"][data-theme="dark"] {
  --bg: #14161a;
  --card: #1a1d21;
  --line: #2b2f34;
  --line2: #232629;
  --soft: #1e2126;

  --tx: #e6e9ec;
  --tx2: #a2a9b1;
  --tx3: #878e97;          /* 对 card 4.60:1 ✅ */

  --pri: #5aa3c4;
  --pri-soft: #1b2f38;

  --free: #4fae83;
  --plan: #cc9645;
  --leave: #dd7a74;
  --meet: #9b90d1;
  --course: #5aa3c4;

  --track-bg: #191c20;
  --slot-bg: #1d2126;
  --gap-bg: #16191c;
  --now-color: #dd7a74;

  --sh: 0 1px 2px rgba(0, 0, 0, .28), 0 8px 24px rgba(0, 0, 0, .34);
}

/* ② ink × dark（暖调深色，与米纸亮色成一套） */
[data-skin="ink"][data-theme="dark"] {
  --bg: #191714;
  --card: #232019;
  --line: #38322a;
  --line2: #2c2620;
  --soft: #26221c;

  --tx: #efeae0;
  --tx2: #b0a89a;
  --tx3: #948c7e;          /* 对 card 4.58:1 ✅ */

  --pri: #5ba889;
  --pri-soft: #1d332b;

  --free: #7fb56f;
  --plan: #d98a70;
  --leave: #dd7d76;
  --meet: #b294c4;
  --course: #5ba889;

  --track-bg: #201d18;
  --slot-bg: #272319;
  --gap-bg: #1c1a16;
  --now-color: #dd7d76;

  --sh: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 22px rgba(0, 0, 0, .36);
}

/* ③ indigo × dark */
[data-skin="indigo"][data-theme="dark"] {
  --bg: #101420;
  --card: #181e2c;
  --line: #28324a;
  --line2: #1f2739;
  --soft: #1c2333;

  --tx: #e8edf7;
  --tx2: #a3aec4;
  --tx3: #8d99b0;          /* 对 card 4.62:1 ✅ */

  --pri: #6d8cf0;
  --pri-soft: #1c2542;

  --free: #52b98d;
  --plan: #e0ae5c;
  --leave: #e8807a;
  --meet: #a888e0;
  --course: #6d8cf0;

  --track-bg: #161c2a;
  --slot-bg: #1c2333;
  --gap-bg: #141a26;
  --now-color: #e8807a;

  --sh: 0 2px 6px rgba(0, 0, 0, .3), 0 12px 28px rgba(0, 0, 0, .38);
}

/* ============================================================================
 * 密度落地：把 --row-h / --card-pad 接到真实组件
 * 原则：**同一套 DOM，只换变量**，绝不做两套页面。
 * ========================================================================== */

/* 成员列表行（成员页 / 部门页 / 社区页共用 .mrow） */
.mrow {
  min-height: var(--row-h, 36px);
}
.mrow .minfo .ttl { font-size: var(--fs-body, 14px); }
.mrow .acts { gap: var(--gap, 8px); }

/* 统计卡 */
.stat-card { padding: var(--card-pad, 14px); }
.stat-card .big { font-size: calc(var(--fs-body, 14px) + 8px); }

/* 面板 */
.panel-body { padding: var(--card-pad, 14px); }

/* 课表网格行高（与 --row-h 联动，但课表另有 grid-auto-rows，需单独给） */
.cg { grid-auto-rows: calc(var(--row-h, 36px) + 8px); }

/* 表格行高（紧凑皮肤下更省高度） */
.dtable th,
.dtable td { padding-top: 6px; padding-bottom: 6px; }
[data-skin="slate"] .dtable th,
[data-skin="slate"] .dtable td { padding-top: 5px; padding-bottom: 5px; }
[data-skin="indigo"] .dtable th,
[data-skin="indigo"] .dtable td { padding-top: 9px; padding-bottom: 9px; }

/* 标签（小标签在紧凑皮肤下要更矮） */
.tag { padding: 2px var(--gap, 8px); }
[data-skin="slate"] .tag { padding: 1px 6px; font-size: 11px; }
[data-skin="indigo"] .tag { padding: 3px 12px; }

/* ============================================================================
 * 硬编码中性色收敛
 * ⚠️ styles.css 有多处硬编码冷灰（#f1f4fa 等），换成变量后才能跟随三套皮肤。
 *    只收「中性灰」，**不碰任何语义色/季节色**。
 * ========================================================================== */
[data-skin] .navbtn:hover { background: var(--soft); }
[data-skin] .chip { background: var(--soft); }
[data-skin] .empty { color: var(--tx3); }

/* ============================================================================
 * 🛡️ mascot 主题保护
 *
 * 【问题】styles.css:151 的 [data-theme="mascot"] 与本文件的 [data-skin="X"]
 *   **特异性相同** (0,1,0)。本文件加载在后 → mascot 用户一设data-skin，
 *   就会被皮肤配色**覆盖掉看板娘的蓝白配色** —— 这是错误的：
 *   「mascot」本身就是一个大主题选择（设置页④），用户主动选的，不该被皮肤抢走。
 *
 * 【解法】把看板娘配色在皮肤之后**重新声明一次**，让mascot 始终优先。
 *   （只重声明变量，不动任何结构 —— 皮肤的其他效果如密度/圆角仍照常生效）
 * ========================================================================== */
[data-theme="mascot"] {
  --bg: #eef6fb; --card: #ffffff; --line: #d5e7f2; --line2: #e3eef6;
  --tx: #1b2a36; --tx2: #4f6879; --tx3: #5b7382;
  --pri: #4aa8d8; --pri-soft: #e4f3fb;
  --free: #22a06b; --plan: #f0913a; --meet: #8b5cf6; --leave: #e4544f;
  --course: #4aa8d8;
  --track-bg: #e2eff7; --slot-bg: #f3fafd; --gap-bg: #e9f3f9;
  --soft: #eef6fb; --now-color: #e4544f;
  --sh: 0 1px 2px rgba(30,90,130,.05), 0 8px 24px rgba(30,90,130,.07);
}
/* ⚠️ mascot 与 dark **不会同时出现**：
   app.js 的 applyTheme() 里 bigTheme==='mascot' → dh='mascot'，否则才可能是 'dark'，
   即 data-theme 属性只有一个值，不可能同时等于 mascot 和 dark。
   ⇒ 上面的 [data-theme="mascot"] 覆盖已足够，无需（也不能）写 mascot×dark 组合。 */

/* ============================================================================
 * 首屏防闪的**兜底**：如果 JS 还没跑（极端情况），body 先给 ① 的底色，
 * 避免出现一帧白底。注意 :root 已经给了 ① 的值，这里只是显式兜底。
 * ========================================================================== */
html:not([data-skin]) body { background: #eef0f2; }
html:not([data-skin])[data-theme="dark"] body { background: #14161a; }

/* ============================================================================
 * 打印 / 高对比度：动效与装饰全部关掉
 * ========================================================================== */
@media print {
  .fest-edge, #seasonFx, .mascot-buddy { display: none !important; }
}