/* ==========================================================================
   学序 2.0 · 课表（周 / 日）精修
   加载顺序：v2.css → timetable-v2.css（见 index.html），因此本文件可以用
   「同特异性 + 更晚加载」覆盖 v2.css 里的手机课表规则。

   背景：v2.css 曾把手机课表改成「默认单日议程」并隐藏 `.tt-scroll`。
   按用户反馈回调为：
   1) 手机默认回到原版 7 列周课表（.tt-scroll / .tt-grid），桌面不变；
   2) 手机新增「周 / 日」切换（默认周），日视图沿用 .tt-mobile 单日议程；
   3) 手机横滑时左侧节次/时间列固定，日期表头在课表内纵滚时吸顶；
   4) 课程块字号 ≥ 11px，课程名最多两行截断；
   5) 调课/补课/停课/空态/点击课程等既有行为全部保留（只改呈现）。

   R3 追加：课程色块统一为 Apple 系统色板（shared/courseColors.ts）——
   周课表 14% 色相 tint + 3px 左色条 + 8px 圆角；日课表 4px 左色条 +
   28/24px 圆角色块（课程首字）+ 极轻 tint；浅色/深色各一套强调色。

   桌面端（> 640px）不加任何布局覆盖：两个「仅手机」控件默认 display:none，
   周课表保持原样。
   ========================================================================== */

/* 仅手机可见的控件：桌面/平板（> 640px）一律隐藏 */
.tt-view-switch,
.tt-hint {
  display: none;
}

/* 表头日期：原先是内联 10px，抽成类名以便手机提升到 11px（桌面值保持不变） */
.tt-head-date {
  font-size: 10px;
  font-weight: 400;
}

/* 调课 / 补课状态行：保持原来的 warn 色（原先是内联色） */
.tt-item .tt-status {
  color: var(--warn);
}

/* ==========================================================================
   课程色块（Apple 课程色板，色值见 shared/courseColors.ts）
   CoursesPage 把选好的颜色以内联 CSS 变量写到每个课程块，这里按主题选用：
   - --cc-accent / --cc-accent-d：左色条 + 实色圆角色块
   - --cc-tint   / --cc-tint-d  ：日课表行底的极轻 tint（rgba）
   - --cc-on     / --cc-on-d    ：实色块上的课程首字颜色
   深色 = 显式 data-theme="dark"，或 auto（无 data-theme）且系统深色。
   ========================================================================== */
.tt-item,
.tt-day-item {
  --cc-use: var(--cc-accent, #5856d6);
  --cc-tint-use: var(--cc-tint, transparent);
  --cc-on-use: var(--cc-on, #ffffff);
}

/* 周课表课程块：14% 色相 tint + 3px 左色条 + 8px 圆角，不做高饱和整块；
   课程名/教室文字继续用 --text / --muted，保证任何色相上都能读。 */
.tt-item {
  border-radius: 8px;
  border-left: 3px solid var(--cc-use);
  background: color-mix(in srgb, var(--cc-use) 14%, var(--mat-surface, var(--surface)));
}

/* 日课表课程行：4px 左色条 + 极轻 tint */
.tt-day-item {
  border-left: 4px solid var(--cc-use);
  background: var(--cc-tint-use);
}

/* 日课表圆角色块：课程首字（深色底上自动换黑/白字） */
.tt-day-chip {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--cc-use);
  color: var(--cc-on-use);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  user-select: none;
  -webkit-user-select: none;
}

/* 深色：切到 Apple 深色系统色（相对更亮，配合深色卡片底） */
html[data-theme='dark'] .tt-item,
html[data-theme='dark'] .tt-day-item {
  --cc-use: var(--cc-accent-d, var(--cc-accent, #5e5ce6));
  --cc-tint-use: var(--cc-tint-d, var(--cc-tint, transparent));
  --cc-on-use: var(--cc-on-d, var(--cc-on, #ffffff));
}
/* 深色下 14% 会偏灰，混入比例提到 16%（仍在 12–16% 约定内），保持色相可辨 */
html[data-theme='dark'] .tt-item {
  background: color-mix(in srgb, var(--cc-use) 16%, var(--mat-surface, var(--surface)));
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme='light']) .tt-item,
  html:not([data-theme='light']) .tt-day-item {
    --cc-use: var(--cc-accent-d, var(--cc-accent, #5e5ce6));
    --cc-tint-use: var(--cc-tint-d, var(--cc-tint, transparent));
    --cc-on-use: var(--cc-on-d, var(--cc-on, #ffffff));
  }
  html:not([data-theme='light']) .tt-item {
    background: color-mix(in srgb, var(--cc-use) 16%, var(--mat-surface, var(--surface)));
  }
}

@media (max-width: 640px) {
  /* ------------------------------------------------------------------
     1. 覆盖 v2.css 的「手机只显示单日议程」
     v2.css：.tt-scroll, .tt-legend { display: none } / .tt-mobile { display: block }
     这里同特异性覆盖，再由 [data-tt-view] 决定「周 / 日」显隐。
     ------------------------------------------------------------------ */
  .tt-scroll {
    display: block;
  }
  .tt-legend {
    display: flex;
  }
  .tt-mobile {
    display: none;
  }

  /* 「日」视图：隐藏周课表，显示单日议程（.tt-mobile 原样复用） */
  .tt-views[data-tt-view='day'] .tt-scroll,
  .tt-views[data-tt-view='day'] .tt-legend,
  .tt-views[data-tt-view='day'] .tt-hint {
    display: none;
  }
  .tt-views[data-tt-view='day'] .tt-mobile {
    display: block;
  }

  /* ------------------------------------------------------------------
     2. 周 / 日 切换：放在周切换工具栏右侧，桌面不显示
     ------------------------------------------------------------------ */
  .tt-view-switch {
    display: block;
    flex: none;
    margin-left: auto;
  }
  .tt-view-switch .seg {
    border-radius: 11px;
    border: 0.5px solid var(--v2-card-border, var(--line));
    background: color-mix(in srgb, var(--surface-3) 80%, transparent);
  }
  .tt-view-switch .seg-item {
    min-width: 42px;
    min-height: 34px;
    padding: 4px 12px;
    font-size: 12.5px;
    font-weight: 600;
  }
  .tt-toolbar {
    gap: 6px;
    margin-bottom: 10px;
  }
  .tt-toolbar .tt-range {
    display: none; /* 日期已在表头逐列显示，手机把工具栏空间让给「周 / 日」 */
  }
  .tt-week-label {
    min-width: 64px;
    font-size: 13px;
  }
  .tt-hint {
    display: block;
    margin: 0 2px 7px;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--muted);
  }

  /* ------------------------------------------------------------------
     3. 周课表：2.0 卡片 + 横向滑动
     ------------------------------------------------------------------ */
  .tt-scroll {
    /* 高度由 CoursesPage 按真实布局测量后写入 max-height；
       内层纵滚保留，日期表头才能 sticky；短屏/横屏不会压到悬浮 Tabbar。 */
    overflow: auto;
    overscroll-behavior-y: contain;
    border-radius: 18px;
    border-color: var(--v2-card-border, var(--line));
    background: var(--mat-surface, var(--surface));
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tt-scroll::-webkit-scrollbar {
    display: none;
  }
  .tt-grid {
    grid-template-columns: 44px repeat(7, minmax(86px, 1fr));
    min-width: 646px;
  }

  /* 左侧节次 / 时间列：横向滑动时固定 */
  .tt-period {
    position: sticky;
    left: 0;
    z-index: 2;
    border-right-color: var(--line-strong, var(--line));
    background: var(--surface-2);
    color: var(--muted);
    font-size: 11px;
    /* 横滑时给固定列一点右侧投影，避免课程块被"硬切" */
    box-shadow: 8px 0 12px -12px rgba(15, 23, 42, 0.45);
  }
  /* 日期表头：课表内纵向滚动时吸顶；横向滚动时随列移动 */
  .tt-grid > .tt-head {
    position: sticky;
    top: 0;
    z-index: 3;
    font-size: 12px;
    background: var(--mat-surface, var(--surface));
  }
  /* 左上角「节次」需要同时固定两个方向，且要压住横滑过来的日期头 */
  .tt-grid > .tt-head:first-child {
    left: 0;
    z-index: 4;
  }
  .tt-head-date {
    font-size: 11px;
  }

  /* ------------------------------------------------------------------
     4. 课程块：字号 ≥ 11px，课程名最多两行截断
        （8px 圆角 / 14% 色相底 / 3px 左色条由上方 Apple 色板规则统一处理）
     ------------------------------------------------------------------ */
  .tt-item {
    padding: 4px 5px;
    gap: 1px;
    font-size: 11px;
    line-height: 1.25;
  }
  .tt-item .tt-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-size: 11.5px;
    line-height: 1.25;
  }
  .tt-item .tt-room,
  .tt-item .tt-status {
    overflow: hidden;
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* ------------------------------------------------------------------
     5. 日课表：4px 色条 + 28px 首字色块，压缩内边距保证 320 也放得下
     ------------------------------------------------------------------ */
  .tt-day-item {
    gap: 11px;
    padding: 11px 14px 11px 11px;
  }
}

/* 极窄屏（320 一类）：首字色块收到 24px，把宽度让给课程名/教室 */
@media (max-width: 380px) {
  .tt-day-chip {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    font-size: 12px;
  }
}