/* ============================================================================
   calendar.css · 活动日历
   ----------------------------------------------------------------------------
   配色沿用 components.css 里徽章的那一套（red / metal / green / amber / dim），
   保证同一个"活动类型"在列表页和日历页是同一个颜色。
   ========================================================================== */

/* 类型色：底色 + 文字色，五个色系与 .badge--* 一一对应 */
.cal-dot--red   { background: var(--red-500); }
.cal-dot--metal { background: var(--silver-100, #C9CFDA); }
.cal-dot--green { background: #18A060; }
.cal-dot--amber { background: #D69E1A; }
.cal-dot--dim   { background: var(--text-4); }

/* ── 布局：左日历 + 右侧栏 ──────────────────────────────────────── */
.cal-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 336px;
  gap: var(--sp-5);
  align-items: start;
}
@media (max-width: 1024px) {
  .cal-layout { grid-template-columns: minmax(0, 1fr); }
}

.cal-main { padding: var(--sp-4) var(--sp-4) var(--sp-5); }
@media (max-width: 560px) {
  .cal-main { padding: var(--sp-3); }
}

/* ── 工具条 ─────────────────────────────────────────────────────── */
.cal-toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}
.cal-title {
  font-size: var(--fs-lg);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  min-width: 128px;
}
.cal-toolbar__right {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-left: auto;
  flex-wrap: wrap;
}
.cal-count {
  font-size: var(--fs-2xs);
  color: var(--text-3);
  font-weight: 700;
  white-space: nowrap;
}

.cal-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background: var(--glass-2);
  border: 1px solid var(--stroke-1);
  color: var(--text-2);
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.cal-nav svg { width: 16px; height: 16px; }
.cal-nav:hover {
  background: var(--glass-3);
  border-color: var(--stroke-2);
  color: var(--text-1);
}

.cal-jump {
  height: 32px;
  padding: 0 var(--sp-2);
  border-radius: var(--r-sm);
  background: var(--glass-2);
  border: 1px solid var(--stroke-1);
  color: var(--text-2);
  font-size: var(--fs-xs);
  font-family: inherit;
  color-scheme: dark;
}
.cal-jump:focus-visible { outline: 2px solid var(--stroke-red); outline-offset: 1px; }

/* ── 星期表头 ───────────────────────────────────────────────────── */
.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--sp-1);
  margin-bottom: var(--sp-1);
}
.cal-weekday {
  text-align: center;
  font-size: var(--fs-2xs);
  font-weight: 800;
  color: var(--text-3);
  letter-spacing: .08em;
  padding: var(--sp-1) 0;
}
.cal-weekday.is-weekend { color: var(--red-300); opacity: .82; }

/* ── 月历网格 ───────────────────────────────────────────────────── */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  /* 显式声明行，避免内容变化时格子高度跳动 */
  grid-auto-rows: minmax(74px, auto);
  gap: var(--sp-1);
}
@media (max-width: 560px) {
  .cal-grid { grid-auto-rows: minmax(52px, auto); gap: 3px; }
}

.cal-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  padding: 5px 5px 4px;
  border-radius: var(--r-sm);
  background: var(--glass-1);
  border: 1px solid transparent;
  text-align: left;
  color: var(--text-2);
  transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
  min-width: 0;
  overflow: hidden;
}
.cal-cell:hover { background: var(--glass-2); border-color: var(--stroke-1); }

.cal-cell__n {
  font-size: var(--fs-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  line-height: 1.35;
}

/* 非本月的日子：弱化但不隐藏 */
.cal-cell.is-out { opacity: .34; }

/* 今天：红色数字 + 淡红底 */
.cal-cell.is-today {
  background: rgba(200, 16, 46, .12);
  border-color: rgba(200, 16, 46, .34);
}
.cal-cell.is-today .cal-cell__n { color: var(--red-300); font-weight: 900; }

/* 选中：高亮描边（选中态可以覆盖今天态，两者可叠加） */
.cal-cell.is-selected {
  background: var(--glass-3);
  border-color: var(--stroke-3);
  box-shadow: var(--shadow-sm), var(--shadow-inset-top);
}
.cal-cell.is-selected .cal-cell__n { color: var(--text-1); }
.cal-cell:focus-visible { outline: 2px solid var(--stroke-red); outline-offset: 1px; }

.cal-cell__items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* 活动标签：左侧一道类型色，文字截断 */
.cal-chip {
  display: block;
  padding: 1px 5px 1px 6px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-left: 2px solid currentColor;
  min-width: 0;
}
.cal-chip--red   { background: rgba(200,16,46,.18);  color: var(--red-300); }
.cal-chip--metal { background: rgba(255,255,255,.10); color: var(--silver-100, #C9CFDA); }
.cal-chip--green { background: rgba(24,160,96,.16);  color: #4ADE93; }
.cal-chip--amber { background: rgba(214,158,26,.16); color: #F0C05A; }
.cal-chip--dim   { background: var(--glass-2);       color: var(--text-3); }
.cal-chip.is-canceled { text-decoration: line-through; opacity: .6; }

.cal-more {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-4);
  padding-left: 4px;
}

/* 窄屏：文字标签放不下，退化成小圆点（数量仍然看得见） */
@media (max-width: 640px) {
  .cal-chip {
    width: 6px;
    height: 6px;
    padding: 0;
    border-radius: 50%;
    border-left: 0;
    background: currentColor;
    font-size: 0;
    line-height: 0;
    flex: 0 0 6px;
  }
  .cal-cell__items { flex-direction: row; flex-wrap: wrap; gap: 3px; padding-top: 1px; }
  .cal-more { font-size: 9px; padding-left: 1px; }
}

/* ── 图例 ───────────────────────────────────────────────────────── */
.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--stroke-1);
}
.cal-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-2xs);
  color: var(--text-3);
  font-weight: 600;
}
.cal-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 8px;
}

/* ── 右侧：当天明细 ─────────────────────────────────────────────── */
.cal-side {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  position: sticky;
  top: var(--sp-4);
}
@media (max-width: 1024px) {
  .cal-side { position: static; }
}

.cal-panel__date {
  font-size: var(--fs-lg);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.cal-empty {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--glass-1);
  border: 1px dashed var(--stroke-2);
}

/* 当天的一条活动 */
.cal-event {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--glass-1);
  border: 1px solid var(--stroke-1);
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
.cal-event:hover {
  background: var(--glass-3);
  border-color: var(--stroke-2);
  transform: translateX(2px);
}
.cal-event.is-canceled { opacity: .58; }
.cal-event:focus-visible { outline: 2px solid var(--stroke-red); outline-offset: 1px; }

.cal-event__thumb {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--glass-2);
}
.cal-event__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cal-event__title {
  font-size: var(--fs-sm);
  font-weight: 800;
  line-height: 1.45;
  margin-bottom: 3px;
}
.cal-event__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--sp-3);
  font-size: var(--fs-2xs);
  color: var(--text-3);
}
.cal-event__meta > span { align-items: center; }

/* ── 「接下来」快捷列表 ─────────────────────────────────────────── */
.cal-next {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--glass-1);
  border: 1px solid var(--stroke-1);
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.cal-next:hover { background: var(--glass-3); border-color: var(--stroke-2); }

.cal-next__d {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: var(--r-sm);
  background: rgba(200,16,46,.12);
  border: 1px solid rgba(200,16,46,.26);
  color: var(--red-300);
  line-height: 1.05;
}
.cal-next__d b { font-size: var(--fs-md); font-weight: 900; font-variant-numeric: tabular-nums; }
.cal-next__d span { font-size: 9px; font-weight: 700; opacity: .8; }

.cal-next__t {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-1);
  max-width: 100%;
}