/* ================================================
   ToosterX — Calendar View（月曆視圖）
   命名空間：.evt-cal-*（避免 .calendar-* 全域污染、見 calendar-view-plan §12.P）
   ================================================ */

/* ── 運動色 CSS 變數（啟用 8 種 + 預留 7 種 fallback + 備援）── */
:root {
  /* 啟用運動 */
  --sport-football:   #2e7d32;
  --sport-basketball: #e65100;
  --sport-pickleball: #7b1fa2;
  --sport-dodgeball:  #c62828;
  --sport-running:    #0277bd;
  --sport-hiking:     #4e342e;
  --sport-badminton:  #f57f17;
  --sport-swimming:   #006064;
  /* 備援 */
  --sport-other:      #616161;
  /* 結構預留（自動 inherit 到備援、未來開啟改色即生效）*/
  --sport-volleyball:    var(--sport-other);
  --sport-tennis:        var(--sport-other);
  --sport-table-tennis:  var(--sport-other);
  --sport-baseball:      var(--sport-other);
  --sport-softball:      var(--sport-other);
  --sport-fitness:       var(--sport-other);
  --sport-cycling:       var(--sport-other);
}
[data-theme="dark"] {
  --sport-football:   #66bb6a;
  --sport-basketball: #ffa726;
  --sport-pickleball: #ba68c8;
  --sport-dodgeball:  #ef5350;
  --sport-running:    #4fc3f7;
  --sport-hiking:     #8d6e63;
  --sport-badminton:  #ffca28;
  --sport-swimming:   #4dd0e1;
  --sport-other:      #9e9e9e;
}

/* ── 容器：外層 flex、內層 scroll ── */
/* 讓 .evt-cal-head 天然凍結在月曆頂部（不依賴 sticky、外層不捲） */
#activity-calendar {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 220px);
  max-height: calc(100dvh - 220px);
  overflow: hidden;  /* 外層不捲、內層 container 才捲 */
}
#activity-calendar[hidden] { display: none !important; }

.evt-cal-container {
  position: relative;
  width: 100%;
  padding: .3rem 0 1rem;
  flex: 1;  /* 填滿 head 以下剩餘空間 */
  /* 普通捲動（不 scroll-snap）— 月份高度 > container 時讓用戶看到完整月 */
  overflow-y: auto;
  overscroll-behavior-y: contain;
  touch-action: pan-y;  /* 橫向留給左右滑切 tab */
}

/* ── 月份導覽列 + 週標題列（flex 布局下天然凍結在月曆頂部、不捲動）── */
.evt-cal-head {
  flex-shrink: 0;
  z-index: 3;
  background: var(--bg-card);
  padding-top: .3rem;
  box-shadow: 0 1px 0 var(--border);
}
.evt-cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .45rem .8rem;
  background: var(--bg-elevated, var(--bg-card));
  border-radius: var(--radius-sm, 6px);
  margin: 0 .6rem .4rem;
}
.evt-cal-nav-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: .9rem;
  padding: .28rem .55rem;
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  min-width: 44px;
  min-height: 32px;
}
.evt-cal-nav-btn:disabled { opacity: .3; cursor: not-allowed; }
.evt-cal-nav-label {
  font-weight: 700;
  font-size: .95rem;
  color: var(--text-primary);
  flex: 1;
  text-align: center;
}

/* ── 單月 ── */
.evt-cal-month {
  padding: 0 .4rem;
  margin-bottom: .8rem;
}

/* ── 週天標題列（凍結在 head 底部、月曆捲動時不動）── */
.evt-cal-weekhead {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  padding: 0 .4rem;
  margin-bottom: 2px;
}
.evt-cal-weekhead-cell {
  text-align: center;
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: .3rem 0;
  border-radius: 3px;
}
/* 週六綠底（rgba fallback → color-mix）*/
.evt-cal-weekhead-sat {
  background: rgba(34, 197, 94, 0.18);
  background: color-mix(in srgb, #22c55e 18%, transparent);
  color: #16a34a;
  font-weight: 700;
}
/* 週日紅底 */
.evt-cal-weekhead-sun {
  background: rgba(239, 68, 68, 0.18);
  background: color-mix(in srgb, #ef4444 18%, transparent);
  color: #dc2626;
  font-weight: 700;
}
/* dark mode 飽和度微調 */
[data-theme="dark"] .evt-cal-weekhead-sat { color: #4ade80; }
[data-theme="dark"] .evt-cal-weekhead-sun { color: #f87171; }

/* ── 日期格網格 ── */
.evt-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.evt-cal-day {
  position: relative;
  min-width: 44px;
  min-height: 80px;
  padding: .25rem .2rem;
  background: var(--bg-card);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  outline: 0 solid transparent;
  transition: outline-color .15s;
}
.evt-cal-day:focus-visible {
  outline: 2px solid var(--accent, #0d9488);
  outline-offset: -2px;
  z-index: 1;
}

.evt-cal-day-num {
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1;
  display: flex;
  align-items: center;
  gap: .2rem;
}

/* 今天（明顯外框 + 日期數字圓形 badge）*/
.evt-cal-day[data-today="1"] {
  background: rgba(13, 148, 136, 0.15);
  background: color-mix(in srgb, var(--accent, #0d9488) 15%, var(--bg-card));
  box-shadow: inset 0 0 0 2px var(--accent, #0d9488);
  z-index: 1;
}
.evt-cal-day[data-today="1"] .evt-cal-day-num {
  font-weight: 800;
  color: #fff;
  background: var(--accent, #0d9488);
  border-radius: 999px;
  padding: .1rem .4rem;
  line-height: 1.2;
  align-self: flex-start;  /* 縮到最小寬度、不撐滿 */
}

/* 跨月（上下月灰化）*/
.evt-cal-day[data-outside="1"] { opacity: .45; }
.evt-cal-day[data-outside="1"] .evt-cal-day-num { color: var(--text-muted); }

/* 本月內已過期（今天之前、跨月另由 data-outside 處理；今日以 data-today 優先）*/
.evt-cal-day[data-past="1"]:not([data-outside="1"]):not([data-today="1"]) {
  opacity: .6;
  filter: grayscale(.6);
  background: rgba(128, 128, 128, 0.1);
  background: color-mix(in srgb, var(--text-muted) 10%, var(--bg-card));
}
.evt-cal-day[data-past="1"]:not([data-outside="1"]):not([data-today="1"]) .evt-cal-day-num {
  color: var(--text-muted);
}

/* 空白日「—」符號 */
.evt-cal-empty-mark {
  color: var(--text-muted);
  opacity: .25;
  font-size: .85rem;
  text-align: center;
  display: block;
  margin-top: .25rem;
}

/* 置頂 📌 icon（日期格右上角絕對定位，避免與今日 badge 重疊）*/
.evt-cal-day[data-has-pinned="1"]::before {
  content: "📌";
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: .7rem;
  z-index: 2;
  pointer-events: none;
}

/* ── 活動格 ── */
.evt-cal-event {
  display: flex;
  align-items: center;
  gap: .2rem;
  padding: .15rem .22rem;
  border-radius: 3px;
  background: rgba(97, 97, 97, 0.15);
  background: color-mix(in srgb, var(--sport-color, var(--sport-other)) 15%, var(--bg-card));
  border-left: 2.5px solid var(--sport-color, var(--sport-other));
  cursor: pointer;
  overflow: hidden;
  min-height: 18px;
  line-height: 1.45;
  position: relative;
}
.evt-cal-event:hover,
.evt-cal-event:focus-visible {
  background: rgba(97, 97, 97, 0.25);
  background: color-mix(in srgb, var(--sport-color, var(--sport-other)) 25%, var(--bg-card));
  outline: 1px solid var(--sport-color, var(--sport-other));
  outline-offset: -1px;
}

/* 彈性字體階層（Q7：1-3 場依數量調大小）*/
.evt-cal-day[data-event-count="1"] .evt-cal-event { font-size: 14px; }
.evt-cal-day[data-event-count="2"] .evt-cal-event { font-size: 13px; }
.evt-cal-day[data-event-count="3"] .evt-cal-event,
.evt-cal-day[data-event-count="4+"] .evt-cal-event { font-size: 12px; }

.evt-cal-emoji { flex-shrink: 0; font-size: 1em; }
.evt-cal-time { flex-shrink: 0; color: var(--text-muted); font-size: .9em; }
.evt-cal-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
}

/* 已結束（opacity 0.5 + 降飽和）*/
.evt-cal-event[data-status="ended"] {
  opacity: .5;
  filter: grayscale(.3);
}
/* 已取消（刪除線 + opacity 0.35）*/
.evt-cal-event[data-status="cancelled"] {
  opacity: .35;
  text-decoration: line-through;
}

/* 已報名狀態：正取打勾 ✓（簽到式）、候補問號 ？（橘虛線）*/
.evt-cal-event.is-signed-up,
.evt-cal-event.is-waitlisted {
  /* 左側讓出打勾空間 */
  padding-left: 1.3em;
}
.evt-cal-event.is-signed-up::before {
  content: "✓";
  position: absolute;
  left: .2em;
  top: 50%;
  transform: translateY(-50%);
  width: 1em;
  height: 1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .95em;
  font-weight: 900;
  color: #fff;
  background: #22c55e;
  border-radius: 2px;
  line-height: 1;
  z-index: 1;
  pointer-events: none;
}
.evt-cal-event.is-waitlisted::before {
  content: "…";
  position: absolute;
  left: .2em;
  top: 50%;
  transform: translateY(-60%);
  width: 1em;
  height: 1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .95em;
  font-weight: 900;
  color: #fff;
  background: #f59e0b;
  border-radius: 2px;
  line-height: 1;
  z-index: 1;
  pointer-events: none;
}

/* 置頂高光（✨ 動畫 + 金色邊框）*/
.evt-cal-event.evt-cal-is-pinned {
  border-left-color: #f59e0b;
  background: rgba(245, 158, 11, 0.18);
  background: color-mix(in srgb, #f59e0b 18%, var(--bg-card));
  box-shadow: 0 0 0 1px #f59e0b inset;
}
.evt-cal-event.evt-cal-is-pinned::after {
  content: "✨";
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  font-size: .75em;
  animation: evt-cal-sparkle 1.8s ease-in-out infinite;
  speak: never;
  pointer-events: none;
}
@keyframes evt-cal-sparkle {
  0%, 100% { opacity: .55; transform: translateY(-50%) scale(1); }
  50%      { opacity: 1;   transform: translateY(-50%) scale(1.15); }
}

/* 減少動畫偏好 */
@media (prefers-reduced-motion: reduce) {
  .evt-cal-event.evt-cal-is-pinned::after { animation: none; }
}

/* ── 「還有 N 場」觸發區 ── */
.evt-cal-more {
  display: block;
  width: 100%;
  min-height: 18px;
  padding: .15rem 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  cursor: pointer;
  border-radius: 3px;
  background: rgba(128, 128, 128, 0.08);
  background: color-mix(in srgb, var(--text-muted) 8%, transparent);
}
.evt-cal-more:hover,
.evt-cal-more:focus-visible {
  background: rgba(128, 128, 128, 0.16);
  background: color-mix(in srgb, var(--text-muted) 16%, transparent);
  outline: 1px solid var(--border);
  outline-offset: -1px;
}

/* ── 骨架（冷啟動）── */
.evt-cal-skeleton {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  padding: 0 .4rem;
}
.evt-cal-skeleton-cell {
  min-height: 80px;
  background: linear-gradient(90deg, var(--bg-card) 0%, var(--border) 50%, var(--bg-card) 100%);
  background-size: 200% 100%;
  border-radius: 4px;
  animation: evt-cal-sk 1.6s ease-in-out infinite;
}
@keyframes evt-cal-sk {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── 無資料提示 ── */
.evt-cal-empty-tip {
  text-align: center;
  font-size: .78rem;
  color: var(--text-muted);
  padding: 1rem .5rem;
}

/* ── 窄版（手機 < 768px）── */
@media (max-width: 767px) {
  #activity-calendar { max-height: calc(100dvh - 200px); max-height: calc(100vh - 200px); }
  .evt-cal-day { min-height: 80px; padding: .2rem .15rem; }
  .evt-cal-day-num { font-size: .7rem; }
  .evt-cal-event { padding: .1rem .2rem; min-height: 16px; }
  .evt-cal-weekhead-cell { font-size: .62rem; padding: .18rem 0; }
}

/* ── 寬版（≥ 768px）── */
@media (min-width: 768px) {
  .evt-cal-day { min-height: 120px; padding: .35rem .3rem; }
  .evt-cal-day-num { font-size: .85rem; }
  .evt-cal-event { padding: .2rem .3rem; min-height: 22px; }
}