/* ============================================================================
 * p0-fixes.css —— 青志社团 · P0 缺陷修复（2026-10）
 * ----------------------------------------------------------------------------
 * 新建文件，**不改动 styles.css / v797.css 任何既有行**（项目铁律：追加式）。
 * 加载位置：index.html 里放在 assets/v797.css 之后。
 *
 * 【修什么】
 *   ① 季节横幅压住文字（P0，最严重，21 个视图每页顶部都有）
 *   ② 成员页操作按钮溢出（13 个按钮一行，最右被裁切）
 *   ③ 本周忙碌度图表星期标签与图例重叠
 *   ④ 移动端顶栏拥挤（"同步"竖排断行 / "切换身份"被裁）
 *   ⑤ 课程配色跨页不一致（课表网格用高饱和、日历用淡雅，两套色）
 *
 * 【铁律】
 *   - 类名一律 p0- 前缀（本文件不新增类，只覆盖既有类）
 *   - **颜色全部用变量**（跨三套皮肤工作，硬编码会破坏换肤）
 *   - 不新增 fixed 浮层
 * ========================================================================== */


/* ============================================================================
 * ① 季节横幅压字（P0）
 *
 * 【根因实测】
 *   .sb-art  position:absolute; inset:0; width:100%; height:100%   ← 整层 SVG
 *   .sb-txt  position:absolute; left:18px; ...（**无 z-index、无背景**）
 *   DOM 顺序：sb-art + sb-txt + sb-x 三兄弟，无 stacking context 差异
 *   ⇒ 飘落的叶子/雪花（SVG 内元素）**直接压在无底色的文字上**
 *
 * 【为什么不能只加 z-index】
 *   z-index 只改变"层内顺序"，SVG 是**不透明像素**，给文字加 z-index 只能让它
 *   在SVG **之上**，但 sb-art 在 DOM 里本就在后…实测无效。
 *   ⚠️ 实测确认：给 .sb-txt 加 z-index 是**无效解法**，唯一低成本解法是**铺底衬**。
 *
 * 【解法】给文字层铺一层「卡底色 → 透明」的横向渐变底衬。
 *   - 文字区域完全不透明 → 100% 可读
 *   - 右侧留透明 → 季节插画从文字底下透出来，**季节感与插画完整保留**
 *   - 底衬用 var(--card)，切皮肤自动跟随（跨三套皮肤工作）
 * ========================================================================== */
/* 🔴 v83.4：横幅换成 AI 手绘插画后，**白底衬彻底去掉**。
   为什么不需要了：
     · 插画是位图，不是 SVG 几何图形，**没有"叶子压住文字"的问题**（那本来就是
       原 SVG 的缺陷 —— .sb-art 与 .sb-txt 都 absolute 且无 z-index 导致层叠错乱）。
     · 横幅右侧本来就做了**渐隐留白区**（banner-*.jpg 右 42% 逐渐淡出），
       文字落在留白区上，天然高对比，不需要再垫一块白。
     · 用户此前两次反馈「白色的不好看」「贴了块补丁」，白底衬正是元凶。
   保留的只有极轻的文字投影，保证插画较亮处也读得清。*/
.season-banner .sb-txt {
  background: none !important;
  padding: 4px 0;
  text-shadow: 0 1px 2px rgba(255, 255, 255, .55), 0 0 6px rgba(255, 255, 255, .4);
}
/* 🔴 v83.20 暗色模式下**白色光晕会把字糊掉**（用户："夜间模式标语太亮都看不见文字"）
   ⚠ 上面那条白色投影是为**浅色底 + 彩色插画**设计的（让文字浮起来）。
      在暗色底上，白色光晕正好在字周围发散 ⇒ 文字被"泡"在光里，反而看不清。
   ✅ 暗色下改成**深色投影**（同样的作用方向：把字压出来），保证对比度。 */
:root[data-theme="dark"] .season-banner .sb-txt {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .75), 0 0 6px rgba(0, 0, 0, .55) !important;
}
:root[data-theme="dark"] .season-banner .sb-hi { text-shadow: 0 1px 2px rgba(0,0,0,.8) !important; }
:root[data-theme="dark"] .season-banner .sb-tip,
:root[data-theme="dark"] .season-banner .sb-cloth { text-shadow: 0 1px 2px rgba(0,0,0,.7) !important; }

/* 插画铺满横幅；天气叠加层（SVG）画在它上面。
   ⚠ z-index 层次必须严格是：底衬 0 <插画 1 < 天气 2 < 文字 3。
   ⚠ 第一版忘了给 .sb-art 设z-index，导致 ::before 底衬把插画盖死。 */
.season-banner .sb-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* 🔴 v83.6 修「图像显示不全」：
     实测 banner 宽 1324px、图原始宽 1200px（比例 12.5:1，96px 高）。
     `object-fit:cover` 会把图**放大 1.1 倍**去填满（1324/1200），
     于是左右各裁掉约 62px —— 右侧特意留的「文字留白区」被切掉一角，
     左侧枫树也被切，用户看到的就是「图像显示不全」。
     ✅ 正解：**不放大、铺满宽度**，宽度按容器拉伸、高度自动裁一点点：
        object-fit: fill 会拉伸变形 ⇒ 改用 width:100% + height:100% + object-fit:contain 也不行
        （contain 会在上下留空）。
     ⇒ 采用 `width:100%; height:auto; min-height:100%; object-fit:cover; object-position:left center`
        —— 图片按容器宽等比缩放（不裁左右），高度超出部分才裁，且贴左对齐保住主体。 */
  object-fit: cover;
  object-position: right center;  /* v83.7：图案在右侧，贴右保住主体 */
  opacity: 1;
  border-radius: inherit;
  z-index: 1;              /* 在底衬之上、文字之下 */
}
.season-banner .sb-wx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;              /* 天气在插画之上 */
  pointer-events: none;
  border-radius: inherit;
}
.season-banner .sb-txt {
  z-index: 3;              /* 文字在最上 */
  padding-right: 120px;
}

/* 深色模式：底衬必须成套（否则暗色下露白底块） */
:root[data-theme="dark"] .season-banner .sb-txt {
  background: linear-gradient(90deg,
      var(--card) 0%,
      var(--card) 62%,
      rgba(26, 29, 33, 0) 100%);
}
/* 深色下文字原本就是浅色，投影要用深色才有效 */
:root[data-theme="dark"] .season-banner .sb-hi,
:root[data-theme="dark"] .season-banner .sb-tip,
:root[data-theme="dark"] .season-banner .sb-cloth {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

/* 移动端：文字占比更大，底衬要跟着加宽 */
@media (max-width: 820px) {
  .season-banner .sb-txt {
    background: linear-gradient(90deg,
        var(--card) 0%,
        var(--card) 78%,
        rgba(255, 255, 255, 0) 100%);
    padding: 5px 10px;
  }
  :root[data-theme="dark"] .season-banner .sb-txt {
    background: linear-gradient(90deg,
        var(--card) 0%,
        var(--card) 78%,
        rgba(26, 29, 33, 0) 100%);
  }
}

/* 关闭按钮：底衬之后仍需可点，保持原有层级 */
.season-banner .sb-x { z-index: 2; }


/* ============================================================================
 * ② 成员页操作按钮溢出
 *
 * 【根因实测】
 *   .mrow .acts{flex-wrap:nowrap; overflow-x:auto}     ← 横向滚动 = 把按钮藏起来
 *   .mrow .acts .btn, .mrow .acts select{flex:none; white-space:nowrap}
 *   ⇒ 13 个 flex:none 元素挤在一行 → 「项目部」标签被压成竖排单字、
 *     最右侧按钮溢出裁切（实测 overflowX=6）
 *
 * 【解法】
 *   ① 改成 wrap（换行），不再横向滚动 —— 让按钮换行也要看得见
 *   ② 标签 nowrap —— 根治「竖排单字」
 *   ③ 行内按钮数收敛：高频操作行内可见，其余交给点开后的详情/名片
 *      （本CSS 只做 ①②，③ 需要 JS 改动，见接入说明）
 * ========================================================================== */
.mrow .acts {
  flex-wrap: wrap !important;      /* 覆盖 nowrap */
  overflow-x: visible;             /* 取消横向滚动 */
  gap: 6px;
  row-gap: 6px;
  max-width: 100%;
}

/* 根治「项目部」等标签被压成竖排单字 */
.mrow .acts .tag,
.mrow .tag {
  white-space: nowrap;
  flex: none;
  writing-mode: horizontal-tb;      /* 明确禁止竖排 */
}

/* 行内按钮/下拉不再被挤压变形 */
.mrow .acts .btn,
.mrow .acts select {
  flex: none;
  white-space: nowrap;
  max-width: 100%;
}

/* 下拉被压缩时给最小宽度，避免「项目部」这类文字挤成竖排 */
.mrow .acts select { min-width: 88px; }

/* 移动端：按钮占满一行更好点 */
@media (max-width: 820px) {
  .mrow .acts .btn { padding: 6px 12px; }
}


/* ============================================================================
 * ③ 本周忙碌度：星期标签与图例重叠
 *
 * 【根因实测（几何推算，基于 styles.css:3527-3537 硬事实）】
 *   .bh-row{ height:56px; align-items:flex-end }      柱底贴 row 底
 *   .bh-bar{ height: 8px(空) ~ 42px(满) }             高度由 app.js inline 写入
 *   .bh-bar em{ position:absolute; bottom:-18px }     标签在柱底**下方** 18px
 *   .bh-legend{ margin-top:22px }
 *
 *   ⇒ 标签顶 = 56 + 18 = 74px，但 row 高只有 56px → **标签溢出到 row 外**
 *   ⇒ legend 顶 = 56 + 22 = 78px，标签占 74~87px → **标签压住图例**
 *
 * 【解法】给 row 留出底部空间（不改 DOM、不改 app.js）
 *   标签要落在 row 内：padding-bottom ≥ 18(偏移) + 13(标签高) = 31px
 *   ⇒ height 56→ 88px，padding-bottom 34px（内容区 54px，足够放 42px 的柱）
 *   ⇒ legend 的 margin-top 从 22px 降到 6px（标签已占位，不必再留 22px）
 * ========================================================================== */
.busy-heat .bh-row {
  height: 88px;
  padding-bottom: 34px;      /* ★ 关键：给标签留位*/
}

/* 标签：脱离absolute 定位，改用 flex 定位到预留区，避免溢出 + 去掉定位依赖 */
.busy-heat .bh-bar em {
  position: absolute;
  bottom: 4px;               /* 落在 padding-bottom 预留区里 */
  left: 0;
  right: 0;
  text-align: center;
  font-style: normal;
  font-size: 11px;
  line-height: 1.3;
  /* 标签底衬：确保在任何柱子颜色下都清晰（用卡片色+ 淡边框）*/
  background: var(--card);
  border-radius: var(--r-xs);
  padding: 1px 0;
  color: var(--tx2);
}

/* 当天标签「今」保持主色 + 加粗（与v78.4 原有设计一致） */
.busy-heat .bh-bar.today em {
  color: var(--pri);
  font-weight: 600;
}

/* 图例：标签已占位，间距收窄 */
.busy-heat .bh-legend {
  margin-top: 6px;
}

/* 柱内数字：确保在柱顶可读（暗色下加投影） */
.busy-heat .bh-bar i {
  text-shadow: 0 1px 0 var(--card);
}
:root[data-theme="dark"] .busy-heat .bh-bar i {
  text-shadow: 0 1px 1px rgba(0, 0, 0, .45);
}


/* ============================================================================
 * ④ 移动端顶栏拥挤
 *
 * 【根因实测】
 *   #nav{ display:flex; flex:1; flex-wrap:wrap }   ← 换行 + 挤压
 *   右侧区（同步/主题/当前用户/切换身份）没有 flex:none 保护
 *   ⇒ 390px 下「同步」竖排断行、「切换身份」被裁掉一半
 *
 * 【解法】导航横向滚动代替换行挤压；右侧操作区禁止收缩
 * ========================================================================== */
@media (max-width: 820px) {
  /* 导航改横向滚动：不换行、不挤压 */
  #nav {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* 顶部栏其余元素不收缩，把空间让给可滚动的导航 */
    min-width: 0;
  }
  #nav::-webkit-scrollbar { display: none; }

  /* 右侧操作区：不许被压扁 */
  .topbar .me,
  .topbar .chip,
  .topbar .btn {
    flex: none;
  }

  /* 「同步」「切换身份」这类文字按钮不竖排断行 */
  .topbar .btn,
  .topbar .chip {
    white-space: nowrap;
  }
}


/* ============================================================================
 * ⑤ 课程配色跨页不一致
 *
 * 【根因实测】
 *   课表网格（.cg-* / .cg-cell）用高饱和硬编码亮绿/亮紫/亮青
 *   日历页课程块走另一套淡雅季节色 → 同类元素跨页两套色
 *
 * 【解法】课块统一走 5 个语义色变量 + 中性底 + 左竖条
 *   → 跨页引用同一变量 ⇒ **天然一致**，且切皮肤自动跟随
 * ========================================================================== */

/* 课表网格单元：中性底（不再用高饱和彩块） */
.cg-cell { background: var(--card); }

/* 课块本体：中性底 + 左侧语义色条（不用彩块，长时段课表不刺眼） */
.cg-cell.has-course,
[class*="cg-"] .course-chip {
  border-left: 3px solid var(--course);
  background: var(--card);
}

/* 若课程块用的是内联背景色，统一降权为淡底（避免高饱和刺眼） */
.cg-cell[style*="background"] {
  background: var(--card) !important;
}

/* 日历页课程块：引用同一变量 ⇒ 与课表页一致 */
.wv-col .course,
.wv-day .course,
.sched-course {
  border-left: 3px solid var(--course);
  background: var(--card);
}

/* 空闲格弱化，让课程块自然浮出来（顺带解决"分不清空闲和有事"） */
.cg-cell:not(.has-course) { background: var(--slot-bg); }
.cg-gap { background: var(--gap-bg); }


/* ============================================================================
 * ⑥ 倒数日 / 空状态占位过大
 * 【问题】空态块撑满整块面板高度，浪费首屏空间
 * 【解法】限高 + 图标缩小，不改 DOM
 * ========================================================================== */
.empty {
  max-height: 120px;
  overflow: hidden;
}
.empty .em,
.empty > :first-child {
  font-size: 32px;            /* 原 56px → 32px */
}
.busy-heat + .empty,
.stat-card .empty { max-height: 96px; }


/* ============================================================================
 * ⑦ 顶栏季节感（面板左缘季节色条）
 * 【目标】不铺色块（保住可读性），只给每张卡左缘一条季节色 → 有换季感但干净
 * 复用既有 [data-cal-theme] 属性选择器，零新增变量
 * ========================================================================== */
[data-cal-theme="spring"] .panel-head { border-left: 3px solid #f0a7c0; }
[data-cal-theme="summer"] .panel-head { border-left: 3px solid #5ec8a8; }
[data-cal-theme="autumn"] .panel-head { border-left: 3px solid #e8944a; }
[data-cal-theme="winter"] .panel-head { border-left: 3px solid #9cc8e8; }

/* 深色下季节色要提亮才看得见 */
:root[data-theme="dark"][data-cal-theme="spring"] .panel-head { border-left-color: #c98da4; }
:root[data-theme="dark"][data-cal-theme="summer"] .panel-head { border-left-color: #4ca887; }
:root[data-theme="dark"][data-cal-theme="autumn"] .panel-head { border-left-color: #c47a3a; }
:root[data-theme="dark"][data-cal-theme="winter"] .panel-head { border-left-color: #6d9cc8; }

/* 经典主题（非四季）下不加季节条，保持中性 */
:root:not([data-cal-theme="classic"]) .panel-head { border-left-width: 3px; }


/* ============================================================================
 * ⑧ 减弱动效时，P0 修复里的动画一律关掉
 * （本文件没加动画，这里兜底保证将来若有人在此加动效也会被覆盖）
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .season-banner .sb-art { opacity: .92; }
}