/* ============================================================
   全站日期選擇器（2026-09-02，跟用家俾嘅參考圖）
   前台（style.css）／後台（admin.css）／導師點名（rollcall.css）三個檔
   **各有一套 token**，所以呢度每個 var() 都要有 fallback ——
   實測 --bg-2 喺 rollcall.css 冇定義、--accent-text 同 --glass-border
   只有前台有、--accent-rgb 喺 admin.css 由頭到尾冇定義過
   （CLAUDE.md 記低過：admin 嗰個叫 --glow-rgb，有兩條規則因為用錯咗
   而由寫落去嗰日起一次都冇生效）。
   所以下面只用三個檔都有嘅：--bg-2 / --ink / --ink-dim / --surface-rgb
   / --orange / --on-accent，其餘一律自己 fallback。

   跟參考圖嘅係**形狀**（圓角卡、頂部一條短橫、‹ 月份 ›、MON–SUN、
   圓形日子格、揀中填實），顏色跟返本站主色 —— 參考圖嗰隻紫啱啱好就係
   前台日間主題個 --orange（#7a3ff2），即係跟返 token 反而更接近。
   ============================================================ */

.tldp {
  position: fixed; z-index: 400;
  width: 296px; max-width: calc(100vw - 16px);
  padding: 16px 16px 12px;
  border-radius: 20px;
  background: var(--bg-2, #16161a);
  border: 1px solid rgba(var(--surface-rgb, 255, 255, 255), 0.1);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
  color: var(--ink, #f5f3f0);
  font-size: 13px;
  /* 🔴 主色抽做自己一個 token —— 日間主題要落深先夠對比。
     實測（13px 要 4.5:1）：後台日間 --orange 係 #e35a00，白字疊落去
     同佢自己疊白底**兩樣都係 3.67**（CLAUDE.md 記低過 .btn--primary
     同一個數）。撈 16% 黑之後 4.94／4.94；前台日間（紫 #7a3ff2）
     由 5.50／4.91 升到 7.15／6.39。
     ⚠️ 用 color-mix 唔寫死一隻色：前台日間主色係**紫**、後台係橙，
        寫死就一定有一邊變咗第二隻色相。
     ⚠️ 舊瀏覽器唔識 color-mix 就會丟咗下面嗰句，跌返呢度呢個原值 ——
        即係退化成「同今日一樣」，唔會爛。 */
  --dp-accent: var(--orange, #7a5cff);
  /* 唔用 backdrop-filter：呢個面板會浮喺表單／彈窗／後台側欄上面，
     半透明就會將後面啲字透上嚟（.notif-panel 嗰段註釋記低過同一件事）。 */
}

/* 頂部嗰條短橫（參考圖有）。純裝飾，所以 aria-hidden ＋ 唔佔互動。 */
.tldp__grip {
  display: block; width: 42px; height: 3px; margin: -6px auto 12px;
  border-radius: 999px; background: var(--dp-accent); opacity: 0.85;
}

.tldp__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 12px;
}
.tldp__m { font-size: 14px; font-weight: 700; letter-spacing: 0.01em; }
.tldp__nav {
  width: 30px; height: 30px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 0; cursor: pointer;
  font: inherit; font-size: 19px; line-height: 1;
  color: var(--ink-dim, rgba(245, 243, 240, 0.62));
  background: rgba(var(--surface-rgb, 255, 255, 255), 0.06);
  transition: background 0.15s ease, color 0.15s ease;
}
.tldp__nav:hover { background: rgba(var(--surface-rgb, 255, 255, 255), 0.12); color: var(--ink, #f5f3f0); }

/* 星期列同日子格用**同一個 grid 定義**，唔係就會逐欄對唔齊
   （中文「一二三…」同英文「MON…」闊度差好遠）。 */
.tldp__wd,
.tldp__grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.tldp__wd {
  margin-bottom: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--ink-dim, rgba(245, 243, 240, 0.62));
}
.tldp__wd span { text-align: center; }

.tldp__grid { gap: 2px; }
.tldp__d {
  aspect-ratio: 1; min-height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600;
  color: var(--ink, #f5f3f0); background: none;
  transition: background 0.14s ease, color 0.14s ease;
}
.tldp__d:hover:not(:disabled) { background: rgba(var(--surface-rgb, 255, 255, 255), 0.1); }
/* 上／下個月嗰啲：淡色但**照樣撳得**（參考圖亦係灰住但喺格子入面）——
   月頭月尾嗰幾日跨月揀係好正常嘅事，封死咗就要多撳一次「上一個月」。 */
.tldp__d.is-out { color: var(--ink-dim, rgba(245, 243, 240, 0.62)); opacity: 0.5; }
.tldp__d.is-dis { opacity: 0.25; cursor: not-allowed; }
/* 今日：只出主色字，唔畫圈 —— 畫圈就會同「揀中」嗰個實心圓撞，
   一版兩個圓人分唔出邊個係邊個。 */
.tldp__d.is-today { color: var(--dp-accent); font-weight: 800; }
.tldp__d.is-sel {
  background: var(--dp-accent);
  color: var(--on-accent, #ffffff);
  font-weight: 800;
}
.tldp__d.is-sel:hover { background: var(--dp-accent); }

.tldp__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid rgba(var(--surface-rgb, 255, 255, 255), 0.09);
}
.tldp__b {
  border: 0; background: none; cursor: pointer; padding: 6px 2px;
  font: inherit; font-size: 12px; font-weight: 700;
  color: var(--dp-accent);
}
/* 「清除」貼右 —— 佢係破壞性嗰粒，同「今日」分開兩極先唔會撳錯。 */
.tldp__b--x { margin-left: auto; color: var(--ink-dim, rgba(245, 243, 240, 0.62)); }
.tldp__b:hover:not(:disabled) { text-decoration: underline; }
/* 「今日」落喺 min／max 範圍外就撳唔得（見 datepicker.js）。
   ⚠️ 唔可以淨靠 opacity 淡 —— 一粒淡咗但仲睇得出係掣嘅嘢，人一定會撳。
      連 cursor 一齊改先講得清楚。 */
.tldp__b:disabled { opacity: 0.38; cursor: not-allowed; }

/* 原生嗰粒日曆圖示：留住做 affordance，但佢撳落去唔會再開原生 picker
   （pointerdown 已經 preventDefault 咗，見 js/datepicker.js）。
   ⚠️ 特登唔 `display: none` —— 收咗之後個 input 就再冇任何「呢度撳得」
      嘅提示，而全站十六個日期欄好多都夾喺一堆文字欄中間。 */
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; }

/* 日間主題：主色落深 16%（見上面 --dp-accent 嗰段嘅實測數字）。 */
:root[data-theme="light"] .tldp {
  --dp-accent: color-mix(in srgb, var(--orange, #7a5cff) 84%, #000);
}

/* ── 彈出動效（2026-09-05，用家指定「我要彈出嘅動態效果」）──────
   由「貼住個 input 嗰條邊」長出嚟：`transform-origin` 跟住 place() 決定
   嘅方向走（面板喺下面 ＝ 由頂邊長；翻咗上去 ＝ 由底邊長），所以望落係
   「由格仔彈出嚟」，唔係「喺半空放大」。

   🔴 只用 opacity ＋ transform（GPU-only），一個影響版位嘅屬性都唔郁 ——
      呢個面板每次碌動都會重新 place()，一郁 top/height 就會逐幀 reflow。
      而且 transform 唔影響 layout box，即係 place() 嗰句 `pop.offsetHeight`
      量到嘅仍然係真高度（縮細咗嗰 6% 唔會令佢計錯位）。

   🔴 方向**只可以影響 `transform-origin`，唔可以影響 `animation-name`** ——
      改 animation-name 會令動畫由頭再播，而 place() 喺碌動嗰陣不停行，
      翻轉方向嗰一刻個面板就會喺半路彈多次。改 origin 唔會重播。

   ⚠️ 收埋特登唔做動畫：close() 有六條路（Escape／撳出面／撳返同一個
      input／揀咗日子／碌到個 input 出咗畫面／開第二個 input），逐條都等
      動畫完先 remove 嘅話，中間就有一段時間有個「望落已經收咗、但仲食緊
      click」嘅面板 —— 換一個收埋動畫唔值。 */
@keyframes tldpPop {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: none; }
}
.tldp {
  transform-origin: top center;
  animation: tldpPop 0.18s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.tldp.is-up { transform-origin: bottom center; }

@media (prefers-reduced-motion: reduce) {
  .tldp { animation: none; }
}