/* ============================================================
   学序 2.0 · 日历月视图（calendar-engineer）
   1) 选中态：日期数字变成蓝色胶囊（白字），单元格只做极轻 tint，
      不再用整格 inset box-shadow 画方框（那会在外框圆角处被裁成断线/方角）
   2) 外框：第一/最后一行、第一/最后一列与 .cal-wrap 圆角一致，
      末行/末列不再与外框边框叠成双线
   3) 今天：蓝色数字 + 「今天」小标签；手机端标签收敛成小圆点，
      选中今天时数字进胶囊、圆点仍保留，两种状态不打架
   4) 桌面文字条与手机点阵共用 .cal-cell 上的同一套选中态
   ============================================================ */

:root {
  --cal-radius: 18px;
  --cal-radius-inner: calc(var(--cal-radius) - 1px);
  --cal-blue: var(--v2-blue, #0a6cff);
  --cal-sel-fg: #ffffff;
  --cal-sel-tint: color-mix(in srgb, var(--cal-blue) 7%, transparent);
  --cal-sel-tint-strong: color-mix(in srgb, var(--cal-blue) 11%, transparent);
  --cal-today-tint: color-mix(in srgb, var(--cal-blue) 5%, transparent);
  --cal-today-fg: var(--cal-blue);
  --cal-line: var(--mat-hairline-soft, var(--line));
  --cal-line-outer: var(--mat-hairline, var(--line));
  --cal-surface: var(--mat-surface, var(--surface));
}

:root[data-theme="dark"] {
  --cal-sel-tint: rgba(123, 143, 255, 0.13);
  --cal-sel-tint-strong: rgba(123, 143, 255, 0.18);
  --cal-today-tint: rgba(123, 143, 255, 0.1);
  --cal-today-fg: #8fa6ff;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cal-sel-tint: rgba(123, 143, 255, 0.13);
    --cal-sel-tint-strong: rgba(123, 143, 255, 0.18);
    --cal-today-tint: rgba(123, 143, 255, 0.1);
    --cal-today-fg: #8fa6ff;
  }
}

/* ---------------- 外框与发丝线：和 2.0 材质层一致 ---------------- */
.cal-wrap {
  border: 0.5px solid var(--cal-line-outer);
  border-radius: var(--cal-radius);
  overflow: hidden;
  background: var(--cal-surface);
  box-shadow: var(--mat-shadow, var(--shadow-xs));
}

.cal-dow {
  border-bottom-color: var(--cal-line);
}

.cal-grid {
  background: var(--cal-surface);
}

.cal-cell {
  position: relative;
  border-color: var(--cal-line);
  transition: background-color 0.14s ease;
  -webkit-tap-highlight-color: transparent;
}

/* 末行/末列不再画内线：外框发丝线本身就是唯一的一条，避免双线 */
.cal-cell.is-first-row {
  border-top-width: 0;
}
.cal-cell.is-first-col {
  border-left-width: 0;
}
.cal-cell.is-last-row {
  border-bottom-width: 0;
}
.cal-cell.is-last-col {
  border-right-width: 0;
}

/* 四角单元格圆角与 .cal-wrap 内圆角一致，不被外层裁出方角 */
.cal-cell.is-corner-tl {
  border-top-left-radius: var(--cal-radius-inner);
}
.cal-cell.is-corner-tr {
  border-top-right-radius: var(--cal-radius-inner);
}
.cal-cell.is-corner-bl {
  border-bottom-left-radius: var(--cal-radius-inner);
}
.cal-cell.is-corner-br {
  border-bottom-right-radius: var(--cal-radius-inner);
}

/* ---------------- 选中态：极轻 tint（不再整格方框） ---------------- */
.cal-cell.today {
  background: var(--cal-today-tint);
}
.cal-cell.sel {
  background: var(--cal-sel-tint);
}
.cal-cell.sel.today {
  background: var(--cal-sel-tint-strong);
}
/* 选到上/下月的日期时，保持高亮可辨，不再被 .out 的半透明压暗 */
.cal-cell.out.sel {
  opacity: 1;
}

/* ---------------- 日期数字：默认裸数字，选中 = 蓝色胶囊白字 ---------------- */
.cal-num {
  gap: 4px;
  min-height: 20px;
  font-variant-numeric: tabular-nums;
}

.cal-day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: inherit;
  transition:
    background-color 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.12s ease;
}

/* 今天：蓝色数字（选中时后面的 .sel 规则会接管成白字），不与选中态冲突 */
.cal-cell.today .cal-day {
  color: var(--cal-today-fg);
  font-weight: 700;
}

.cal-cell.sel .cal-day {
  background: var(--cal-blue);
  color: var(--cal-sel-fg);
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--cal-blue) 30%, transparent),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.3);
}

.cal-today-tag {
  flex: none;
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--cal-today-fg);
}

/* ---------------- 交互反馈 ---------------- */
@media (hover: hover) and (pointer: fine) {
  .cal-cell:not(.sel):not(.out):hover {
    background: color-mix(in srgb, var(--cal-blue) 4%, transparent);
  }
  .cal-cell.today:not(.sel):hover {
    background: color-mix(in srgb, var(--cal-blue) 8%, transparent);
  }
  .cal-cell.sel:hover {
    background: var(--cal-sel-tint-strong);
  }
}

.cal-cell:active .cal-day {
  transform: scale(0.9);
}

.cal-cell:focus-visible {
  outline: none;
}
.cal-cell:focus-visible .cal-day {
  box-shadow:
    0 0 0 2px var(--cal-surface),
    0 0 0 4px color-mix(in srgb, var(--cal-blue) 45%, transparent);
}
.cal-cell.sel:focus-visible .cal-day {
  box-shadow:
    0 0 0 2px var(--cal-surface),
    0 0 0 4px color-mix(in srgb, var(--cal-blue) 45%, transparent),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.3);
}

/* ---------------- 手机：点阵月视图（与桌面共用 .cal-cell 选中态） ---------------- */
@media (max-width: 640px) {
  /* 320×568/700 首屏要能看到今天与「当天的安排」：
     月导航一行，视图切换一行，课程/项目筛选并成一行两列。 */
  .cal-head {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 8px;
  }
  .cal-head > .row-gap {
    width: 100%;
  }
  .cal-head > .row-gap:first-child {
    justify-content: space-between;
  }
  .cal-head > .row-gap:last-child {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
  }
  .cal-head > .row-gap:last-child .seg {
    grid-column: 1 / -1;
    justify-self: start;
  }
  .cal-head > .row-gap:last-child .select {
    width: 100% !important;
    min-width: 0 !important;
    height: 44px;
  }
  .cal-cell {
    min-height: 54px;
    padding: 3px 2px;
  }
  .cal-wrap {
    margin-top: 0;
  }
  .cal-agenda {
    margin-top: 10px !important;
  }
  /* 390/320 的当天安排：时间列保持一行，避免 14:00– / 15:30 折行 */
  .cal-agenda .day-time {
    width: 74px;
    flex: none;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  .cal-num {
    min-height: 19px;
    /* 小屏时「今天」已收敛成小圆点：贴着数字胶囊放，不飘到格子右侧 */
    justify-content: flex-start;
    gap: 3px;
  }
  .cal-day {
    min-width: 19px;
    height: 19px;
    padding: 0 3px;
    font-size: 11px;
  }
  /* 「今天」文字标签在小屏收敛成 4px 小圆点，避免挤占数字胶囊的宽度 */
  .cal-today-tag {
    width: 4px;
    height: 4px;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    color: transparent;
    background: var(--cal-today-fg);
    border-radius: 50%;
  }
}

@media (max-width: 420px) {
  .cal-cell {
    min-height: 50px;
  }
}
@media (max-width: 360px) {
  .cal-cell {
    min-height: 48px;
  }
}

/* ---------------- 降低动态效果 ---------------- */
@media (prefers-reduced-motion: reduce) {
  .cal-cell,
  .cal-day {
    transition: none;
  }
  .cal-cell:active .cal-day {
    transform: none;
  }
}