/* ==========================================================================
   LessonMate 电脑端 · 暖中性兼容层（与手机端同一套视觉语言）
   --------------------------------------------------------------------------
   手机端语言：奶油渐变底 · 软陶白卡 · 炭黑主色 #111111 · Fin 橙 #ff5600
   唯一主按钮 · 暖色发丝线 #efe9e0 · 暖调柔影。
   电脑端曾经走冷灰 slate，与手机端明显割裂，这里统一到同一套色值：
   - 墨色 #111111 / #44403c / #78716c / #a8a29e（stone 暖灰阶，非 slate 蓝灰）
   - 发丝线与凹陷面用暖色（#efe9e0 / #f5f2ec / #faf8f3）
   - Fin 橙只用在每页唯一主行动按钮上
   ⚠️ 禁用琥珀色（amber），唯一例外：学员头像调色板（.event-amber）
   本文件与 js/app.js 的暖色原子类配合，只对 index.html 生效，不影响手机端。
   ========================================================================== */

:root {
  --lm-canvas-top: #fffdfa;
  --lm-canvas-mid: #fbf8f3;
  --lm-canvas-bot: #f7f2ea;

  --lm-ink: #111111;        /* 炭黑 主文字（手机端同色） */
  --lm-ink-2: #78716c;      /* stone-500 次文字 */
  --lm-ink-3: #a8a29e;      /* stone-400 弱文字 */

  --lm-fin: #ff5600;        /* Fin 橙：每页唯一主按钮（与手机端一致） */
  --lm-orange: #fe4c02;     /* 待续费 / 课时不足 */
  --lm-pink: #d5304f;       /* 欠课 / 危险（与手机端同色） */

  --lm-line: #efe9e0;       /* 暖色发丝线 */
  --lm-line-strong: #e3dbd0;

  /* 软陶阴影：暖调多层柔影，不用纯黑（手机端同款） */
  --lm-card-shadow: 0 1px 2px rgba(120, 100, 70, 0.07);
  --lm-card-shadow-lg: 0 8px 22px rgba(120, 100, 70, 0.11), 0 2px 5px rgba(120, 100, 70, 0.06);
  --lm-pill-shadow: 0 1px 3px rgba(120, 100, 70, 0.10);
}

/* ---- 左侧主导航分页按钮：激活态（选中靠白色胶囊滑块，文字统一灰字） ---- */
.nav-page-btn.active {
  color: #78716c !important;
}
.nav-page-btn.active i { color: inherit !important; }

/* ---- 文字层级 ---- */
.lm-t1 { color: var(--lm-ink) !important; }
.lm-t2 { color: var(--lm-ink-2) !important; }
.lm-t3 { color: var(--lm-ink-3) !important; }
.lm-warn { color: var(--lm-orange) !important; }

/* ---- 面 ---- */
.lm-soft { background: #faf8f3 !important; }
.lm-soft-2 { background: #f5f2ec !important; }
.lm-hairline { border-color: var(--lm-line) !important; }
.lm-scrim { background: rgba(28, 25, 23, 0.45) !important; }
.lm-scrim-soft { background: rgba(28, 25, 23, 0.28) !important; }
.lm-scrim-strong { background: rgba(28, 25, 23, 0.95) !important; }

/* ---- 表单控件：白底 + 发丝线 ---- */
.lm-field {
  background: #fff;
  border: 1px solid var(--lm-line-strong);
  border-radius: 0.75rem;
  color: var(--lm-ink);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lm-field:focus {
  border-color: var(--lm-ink);
  box-shadow: 0 0 0 3px rgba(28, 25, 23, 0.10);
}

/* ---- 炭黑主按钮（与手机端 .lm-btn-ink 同色） ---- */
.lm-btn-ink {
  background: #111111;
  color: #fff;
}
.lm-btn-ink:hover {
  background: #2b2b2b;
}

/* ---- 请假按钮：暖黄 + 弹窗右上角删除图标（与手机端同款，色值抄自 intercom-tokens.css） ----
   手机端的定义在 css/intercom-tokens.css，但那个文件只被 mobile.html 引用
   （本文件才是电脑端的兼容层），所以这里必须再写一份，否则两端会长得不一样。
   口径：请假=黄（这一节有变更但不破坏数据），删除=玫红角标（不可逆，别和请假抢重量）。 */
.lm-btn-leave {
  background: #FEF3C7;
  border: 1px solid #FDE68A;
  color: #7C4A03;
}
.lm-btn-leave:hover {
  background: #FDE68A;
}
.lm-sheet-del {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.05);
  color: #d5304f;
  font-size: 14px;
  line-height: 1;
  transition: background-color .15s ease;
}
.lm-sheet-del:hover {
  background: #ffe9ec;
}
/* 弹窗标题块：给角标让出位置，长学员名不会钻到图标底下 */
.lm-sheet-head {
  padding-right: 52px;
}

/* ---- 补课（F11）与行内小按钮 ----
   色值抄自 css/intercom-tokens.css（那个文件只被 mobile.html 引用，电脑端不引），
   不加这一段的话电脑端「排补课」是无底色的裸文字、补课小标会变成一支裸青色块。
   口径：补课 = 柔和青 #DAE9E3/#2E5D68（借学员绿同族，不新开色相）。 */
.lm-btn-makeup {
  background: #DAE9E3;
  border: 1px solid #BFD8CF;
  color: #2E5D68;
}
.lm-btn-makeup:hover {
  background: #BFD8CF;
}
.lm-chip-makeup {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  height: 16px;
  padding: 0 4px;
  border-radius: 6px;
  background: #DAE9E3;
  color: #2E5D68;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  margin-right: 4px;
}
.lm-mini-btn {
  display: inline-flex;
  align-items: center;
  flex: none;
  height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  background: #f0ebe2;
  color: #111;
  font-size: 11px;
  font-weight: 700;
}
.lm-mini-btn:hover {
  background: #e3dccf;
}

/* ---- 统计卡 / 分区块：纯白卡片 + 细边 ---- */
.lm-stat-card {
  background: #fff;
  border: 1px solid var(--lm-line);
  border-radius: 1rem;
  box-shadow: var(--lm-card-shadow);
}
.lm-section {
  background: #faf8f3;
  border: 1px solid var(--lm-line);
}

/* ---- 页面底：浅奶油渐变（不是纯白） ----
   覆盖 index.html body 上内联的 var(--surface-page) 与各分页的 bg-slate-50，
   让奶油渐变透出来；卡片本身仍保持纯白 + 细边。 */
body {
  background: linear-gradient(180deg, #fefdfb 0%, #fcfaf6 50%, #faf7f1 100%) !important;
  background-attachment: fixed !important;
}
#pageSchedule, #pageSchedule > main,
#pageDashboard, #pageStudents, #pageFinance, #pageSettings {
  background: transparent !important;
}
/* 局部浅底块（侧栏头、时间轴列等）跟着换成奶油调，避免冷白斑块 */
.bg-slate-50,
.bg-slate-50\/50,
.bg-slate-50\/60,
.bg-slate-50\/80 {
  background-color: rgba(253, 251, 248, 0.75) !important;
}

/* ---- 课表卡片：改版说明（2026-10） ----
   旧的「纯白底 + 左侧 4px 弧形色条」覆盖已移除：课卡改用整卡主题底色
   （见 styles.css 的 .event-* 变量方案），左侧色条方案废弃。
   状态色（消课绿、请假灰、冲突红边）属语义提示，仍由 styles.css 定义。 */

/* ---- 学员卡选中态（批量排课拖拽时） ---- */
.student-card.lm-picked {
  border-color: #111111 !important;
  box-shadow: 0 0 0 2px rgba(30, 41, 59, 0.85) !important;
}

/* ---- 环比徽章：本月累计 vs 上月整月（卡片标题行右上方，label 左 / 徽章右） ----
   升=绿（涨是好事）、降=玫红（沿用本项目「玫红=要跟进」的语义色）、持平=暖灰。
   只用绿/玫红/中性灰，**不碰琥珀色**（全站禁用）。
   .is-lg 给 11px 标题行的大卡用（卡片：财务页 4 卡、待排课抽屉的「本月经营」小卡）。
   ⚠️ 与手机端 css/intercom-tokens.css 里的同名类必须保持一致（那边是并行的一份）。 */
.lm-mom {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 999px;
  white-space: nowrap;
  flex: 0 0 auto;
}
.lm-mom.is-lg { font-size: 10px; padding: 2.5px 6px; }
.lm-mom.is-up { color: #0a7d52; background: #e6f6ee; }
.lm-mom.is-down { color: #b3233d; background: #fdecef; }
.lm-mom.is-flat { color: #78716c; background: #f3f0ea; font-weight: 700; }

/* ---- 待排课抽屉：分类筛选按钮 ----
   原样式写在 css/desktop-theme.css 里，但那个文件**没有被任何 HTML 引用**（历史遗留），
   等于选中态从来没生效过；按钮最初靠 HTML 上硬编码的 bg-[#111111] text-white 装样子，
   而 JS 只切 .active / .lm-t2 —— 于是点别的筛选项时旧按钮不脱色，出现"两个都像选中"。
   这里把规则搬回真正被引用的文件，选中态由 .active 独家驱动（.lm-t2 是 !important，
   故这里也用 !important 并用双类提高特异性压过它）。 */
.filter-student-btn {
  color: var(--lm-ink-2);
  border-radius: 8px;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.filter-student-btn:hover { background: rgba(17, 17, 17, 0.05); color: var(--lm-ink); }
.filter-student-btn.active { background: var(--lm-ink) !important; color: #fff !important; }