/* datetime-picker.css
   深色主題的日曆時間選擇器，搭配 /js/datetime-picker.js
   用法：<div class="dtp" data-name="in-start" data-placeholder="…"></div> */

.dtp { position: relative; }

/* 觸發區：顯示已選時間或提示文字 */
.dtp-trigger {
  width: 100%;
  background: #0D1F3C;
  border: 1px solid #2A4D82;
  border-radius: 10px;
  padding: 12px 42px 12px 14px;
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.92rem;
  font-family: inherit;
  color: #eaeaea;
  transition: border-color 0.15s;
  text-align: left;
}
.dtp-trigger:hover  { border-color: #3d6199; }
.dtp.open .dtp-trigger { border-color: #D4B76A; }
.dtp-trigger.placeholder { color: #6d84a0; }

.dtp-icon {
  position: absolute;
  right: 12px;
  top: 23px;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 1rem;
  opacity: 0.7;
}

/* 清除鈕（已選才顯示） */
.dtp-clear {
  position: absolute;
  right: 36px;
  top: 23px;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #6d84a0;
  font-size: 1rem;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
  display: none;
}
.dtp-clear:hover { color: #ff8a80; }
.dtp.has-value .dtp-clear { display: block; }

/* ── 展開的面板 ──
   用 fixed 定位（座標由 JS 計算），避免被 modal 的 overflow:auto 裁切 */
.dtp-panel {
  position: fixed;
  z-index: 1200;
  width: 302px;
  background: #16305c;
  border: 1px solid #3d6199;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  display: none;
}
.dtp.open .dtp-panel { display: block; }

/* 快捷列 */
.dtp-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #2A4D82;
}
.dtp-quick button {
  background: #0D1F3C;
  border: 1px solid #2A4D82;
  color: #B8CDE4;
  border-radius: 20px;
  padding: 5px 11px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.dtp-quick button:hover { border-color: #D4B76A; color: #D4B76A; }

/* 月份導覽 */
.dtp-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.dtp-nav-btn {
  background: none;
  border: none;
  color: #B8CDE4;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 6px;
  line-height: 1;
}
.dtp-nav-btn:hover { background: #24467e; color: #D4B76A; }
.dtp-nav-title {
  font-size: 0.9rem;
  font-weight: 800;
  color: #eaeaea;
}

/* 日曆格 */
.dtp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.dtp-dow {
  text-align: center;
  font-size: 0.7rem;
  font-weight: 800;
  color: #6d84a0;
  padding: 4px 0 6px;
}
.dtp-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: #eaeaea;
  font-size: 0.82rem;
  font-family: inherit;
  border-radius: 8px;
  cursor: pointer;
}
.dtp-day:hover:not(:disabled) { background: #24467e; }
.dtp-day.other  { color: #4E6B88; }
.dtp-day.today  { box-shadow: inset 0 0 0 1px #3d6199; font-weight: 800; }
.dtp-day.sel    { background: #D4B76A; color: #0D1F3C; font-weight: 800; }
.dtp-day:disabled { opacity: 0.28; cursor: not-allowed; }

/* 時間列 */
.dtp-time {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #2A4D82;
}
.dtp-time-label {
  font-size: 0.78rem;
  color: #8AA3C0;
  font-weight: 700;
  margin-right: 2px;
}
.dtp-time select {
  background: #0D1F3C;
  border: 1px solid #2A4D82;
  color: #eaeaea;
  border-radius: 7px;
  padding: 6px 8px;
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
}
.dtp-time select:focus { outline: none; border-color: #D4B76A; }
.dtp-time-sep { color: #6d84a0; font-weight: 800; }

.dtp-done {
  margin-left: auto;
  background: #D4B76A;
  color: #0D1F3C;
  border: none;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
}
.dtp-done:hover { background: #e0c67f; }

@media (max-width: 420px) {
  .dtp-panel { width: 100%; }
}

/* ──────────────────────────────────────────────────────────────
   淺色變體：<div class="dtp dtp-light" …>
   給白底頁面用（例如非同步測驗的建立視窗）
   ────────────────────────────────────────────────────────────── */
.dtp-light .dtp-trigger {
  background: #ffffff;
  border-color: #ccc;
  color: #1a1a2e;
}
.dtp-light .dtp-trigger:hover      { border-color: #60a5fa; }
.dtp-light.open .dtp-trigger       { border-color: #1B3A6B; }
.dtp-light .dtp-trigger.placeholder { color: #aaa; }

.dtp-light .dtp-panel {
  background: #ffffff;
  border-color: #d6dee9;
  box-shadow: 0 12px 32px rgba(27, 58, 107, 0.18);
}
.dtp-light .dtp-quick { border-bottom-color: #e3e9f2; }
.dtp-light .dtp-quick button {
  background: #f5f8fc;
  border-color: #d6dee9;
  color: #44557a;
}
.dtp-light .dtp-quick button:hover { border-color: #1B3A6B; color: #1B3A6B; }

.dtp-light .dtp-nav-btn        { color: #44557a; }
.dtp-light .dtp-nav-btn:hover  { background: #eef3fa; color: #1B3A6B; }
.dtp-light .dtp-nav-title      { color: #1a1a2e; }

.dtp-light .dtp-dow  { color: #90a0bb; }
.dtp-light .dtp-day  { color: #1a1a2e; }
.dtp-light .dtp-day:hover:not(:disabled) { background: #eef3fa; }
.dtp-light .dtp-day.other { color: #b6c2d4; }
.dtp-light .dtp-day.today { box-shadow: inset 0 0 0 1px #b6c2d4; }
.dtp-light .dtp-day.sel   { background: #1B3A6B; color: #ffffff; }

.dtp-light .dtp-time        { border-top-color: #e3e9f2; }
.dtp-light .dtp-time-label  { color: #6b7a99; }
.dtp-light .dtp-time select {
  background: #ffffff;
  border-color: #ccc;
  color: #1a1a2e;
}
.dtp-light .dtp-time select:focus { border-color: #1B3A6B; }
.dtp-light .dtp-time-sep { color: #90a0bb; }
.dtp-light .dtp-done {
  background: #1B3A6B;
  color: #ffffff;
}
.dtp-light .dtp-done:hover { background: #24467e; }
.dtp-light .dtp-clear { color: #90a0bb; }