/* =========================================================================
   全站统一日历选择器 —— 替代浏览器原生 <input type=date / datetime-local>
   纯自绘，spark 配色，深色模式适配。配合 static/js/datepicker.js。
   原生 date 控件各端样式不一、无法定制，这里统一成「点选日历面板」。
   ========================================================================= */

/* 原始 input 被 JS 接管后隐藏，只留它承载 value 并随表单提交（display:none 仍会提交） */
.dp-source { display: none !important; }

.dp-wrap { position: relative; display: block; }

/* —— 触发器：外观对齐 .form-control —— */
.dp-input {
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  width: 100%; height: 2.5rem; padding: 0 0.75rem;
  font-size: 0.875rem; line-height: 1.25rem; font-family: inherit;
  color: #1e293b; background-color: #fff;
  border: 1px solid #cbd5e1; border-radius: 0.5rem;
  cursor: pointer; text-align: left;
  transition: border-color .15s, box-shadow .15s;
}
.dp-input:hover { border-color: #94a3b8; }
.dp-input:focus-visible, .dp-input.dp-open {
  outline: none; border-color: #18A9C4;
  box-shadow: 0 0 0 3px rgba(24, 169, 196, 0.25);
}
.dp-input .dp-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-input.dp-empty .dp-text { color: #94a3b8; }
.dp-input .dp-icon { flex-shrink: 0; width: 1rem; height: 1rem; color: #64748b; transition: color .15s; }
.dp-input:hover .dp-icon,
.dp-input.dp-open .dp-icon { color: #0E89A5; }
.dp-input:disabled { background-color: #f8fafc; color: #94a3b8; cursor: not-allowed; }

/* 紧凑变体（表格 / 筛选条里用） */
.dp-input.dp-sm { height: 2rem; font-size: 0.8125rem; padding: 0 0.625rem; }

/* —— 弹出面板 —— */
.dp-pop {
  position: absolute; z-index: 60;
  width: 17.5rem; padding: 0.75rem;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 0.75rem;
  box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.25), 0 4px 12px -4px rgba(15, 23, 42, 0.12);
  font-size: 0.875rem; color: #1e293b;
  user-select: none;
}
.dp-pop[hidden] { display: none; }

/* 进场动画：贴着触发器轻轻展开（居中模式只淡入，避免与 translate 居中冲突） */
.dp-pop:not(.dp-centered) { animation: dp-pop-in .16s cubic-bezier(.16, .84, .44, 1); }
.dp-pop.dp-centered { animation: dp-pop-fade .16s ease-out; }
@keyframes dp-pop-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes dp-pop-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .dp-pop, .dp-pop.dp-centered { animation: none; }
}

/* 头部：上/下 + 标题 */
.dp-head { display: flex; align-items: center; gap: 0.25rem; margin-bottom: 0.5rem; }
.dp-nav {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border: 0; border-radius: 0.5rem;
  background: transparent; color: #475569; cursor: pointer; transition: background-color .12s;
}
.dp-nav:hover { background: #f1f5f9; color: #06628C; }
.dp-nav svg { width: 1.125rem; height: 1.125rem; }
.dp-title {
  flex: 1; height: 2rem; border: 0; border-radius: 0.5rem;
  background: transparent; cursor: pointer;
  font-size: 0.9375rem; font-weight: 600; color: #1e293b;
  transition: background-color .12s, color .12s;
}
.dp-title:hover { background: #f1f5f9; color: #06628C; }

/* 星期表头 */
.dp-weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr);
  margin-bottom: 0.25rem;
}
.dp-weekdays span {
  text-align: center; font-size: 0.75rem; color: #94a3b8; padding: 0.25rem 0;
}
.dp-weekdays span.dp-we { color: #9A3E0C; }   /* 深橙：标准橙在白底 12px 字号下对比不足 */

/* 日期格子 */
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-cell {
  display: flex; align-items: center; justify-content: center;
  height: 2.125rem; border: 0; border-radius: 0.5rem;
  background: transparent; color: #334155; cursor: pointer;
  font-size: 0.8125rem; font-variant-numeric: tabular-nums;
  position: relative; transition: background-color .1s, color .1s;
}
.dp-cell:hover { background: #E6F4F8; color: #06628C; }
/* 相邻月溢出日：用中灰（slate-500），与禁用日(#e2e8f0)拉开差距，明确"可选"，
   避免被误以为不可点。真正不可选的过去溢出日仍由后面的 .dp-disabled 覆盖成浅灰。 */
.dp-cell.dp-other { color: #64748b; }
.dp-cell.dp-today { font-weight: 700; color: #06628C; }
.dp-cell.dp-today::after {
  content: ""; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: #18A9C4;
}
.dp-cell.dp-selected,
.dp-cell.dp-selected:hover {
  background: #06628C; color: #fff; font-weight: 600;
  box-shadow: 0 2px 8px -2px rgba(6, 98, 140, 0.55);
}
.dp-cell.dp-selected.dp-today::after { background: #fff; }
.dp-cell.dp-disabled,
.dp-cell.dp-disabled:hover {
  color: #e2e8f0; background: transparent; cursor: not-allowed;
}

/* 月 / 年 选择网格 */
.dp-months, .dp-years {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
}
.dp-months[hidden], .dp-years[hidden], .dp-grid[hidden], .dp-weekdays[hidden] { display: none; }
.dp-mcell {
  display: flex; align-items: center; justify-content: center;
  height: 2.75rem; border: 0; border-radius: 0.5rem;
  background: transparent; color: #334155; cursor: pointer;
  font-size: 0.8125rem; transition: background-color .1s, color .1s;
}
.dp-mcell:hover { background: #E6F4F8; color: #06628C; }
.dp-mcell.dp-selected { background: #06628C; color: #fff; font-weight: 600; }
.dp-mcell.dp-today-m { font-weight: 700; color: #06628C; }
.dp-mcell.dp-disabled, .dp-mcell.dp-disabled:hover {
  color: #e2e8f0; background: transparent; cursor: not-allowed;
}

/* 时间行（datetime-local 模式） */
.dp-time {
  display: flex; align-items: center; gap: 0.5rem;
  margin-top: 0.625rem; padding-top: 0.625rem; border-top: 1px solid #f1f5f9;
}
.dp-time[hidden] { display: none; }
.dp-time-label { font-size: 0.8125rem; color: #64748b; }
.dp-time select {
  height: 2rem; padding: 0 0.5rem; font-size: 0.8125rem; font-family: inherit;
  color: #1e293b; background: #fff; border: 1px solid #cbd5e1; border-radius: 0.375rem;
  cursor: pointer;
}
.dp-time select:focus-visible { outline: none; border-color: #18A9C4; }
.dp-time-sep { color: #94a3b8; }

/* 底部操作 */
.dp-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 0.625rem; padding-top: 0.625rem; border-top: 1px solid #f1f5f9;
}
.dp-foot-right { display: flex; align-items: center; gap: 0.25rem; }
.dp-foot-btn {
  height: 1.875rem; padding: 0 0.75rem; border: 0; border-radius: 0.375rem;
  background: transparent; cursor: pointer; font-size: 0.8125rem; font-family: inherit;
  transition: background-color .12s, color .12s;
}
.dp-foot-btn[hidden] { display: none; }
.dp-foot-today { color: #06628C; font-weight: 500; }
.dp-foot-today:hover { background: #E6F4F8; }
.dp-foot-clear { color: #64748b; }
.dp-foot-clear:hover { background: #f1f5f9; color: #FA6E1F; }
.dp-foot-ok {
  background: #06628C; color: #fff; font-weight: 500; padding: 0 1rem;
}
.dp-foot-ok:hover { background: #054E70; }

/* 移动端遮罩（小屏把面板居中） */
.dp-backdrop {
  position: fixed; inset: 0; z-index: 59; background: rgba(15, 23, 42, 0.35);
}
.dp-backdrop[hidden] { display: none; }

/* =========================  深色模式  ========================= */
.dark .dp-input {
  background-color: #1e293b; color: #f1f5f9; border-color: #475569;
}
.dark .dp-input:hover { border-color: #64748b; }
.dark .dp-input.dp-empty .dp-text { color: #64748b; }
.dark .dp-input .dp-icon { color: #94a3b8; }
.dark .dp-input:disabled { background-color: #0f172a; color: #64748b; }

.dark .dp-pop {
  background: #1e293b; border-color: #334155; color: #e2e8f0;
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.6);
}
.dark .dp-nav { color: #cbd5e1; }
.dark .dp-nav:hover { background: #334155; color: #6FB8CD; }
.dark .dp-title { color: #f1f5f9; }
.dark .dp-title:hover { background: #334155; color: #6FB8CD; }
.dark .dp-weekdays span { color: #64748b; }

.dark .dp-cell { color: #cbd5e1; }
.dark .dp-cell:hover { background: rgba(24, 169, 196, 0.18); color: #9ACFDF; }
.dark .dp-cell.dp-other { color: #94a3b8; }  /* 暗色下同样拉亮，明确可选、区别于禁用(#334155) */
.dark .dp-cell.dp-today { color: #6FB8CD; }
.dark .dp-cell.dp-disabled, .dark .dp-cell.dp-disabled:hover { color: #334155; }
.dark .dp-cell.dp-selected, .dark .dp-cell.dp-selected:hover {
  background: #0E89A5; color: #fff;
}

.dark .dp-mcell { color: #cbd5e1; }
.dark .dp-mcell:hover { background: rgba(24, 169, 196, 0.18); color: #9ACFDF; }
.dark .dp-mcell.dp-selected { background: #0E89A5; color: #fff; }
.dark .dp-mcell.dp-today-m { color: #6FB8CD; }
.dark .dp-mcell.dp-disabled, .dark .dp-mcell.dp-disabled:hover { color: #334155; }

.dark .dp-time { border-top-color: #334155; }
.dark .dp-time-label { color: #94a3b8; }
.dark .dp-time select {
  background: #0f172a; color: #f1f5f9; border-color: #475569;
}
.dark .dp-foot { border-top-color: #334155; }
.dark .dp-foot-today { color: #6FB8CD; }
.dark .dp-foot-today:hover { background: rgba(24, 169, 196, 0.18); }
.dark .dp-foot-clear { color: #94a3b8; }
.dark .dp-foot-clear:hover { background: #334155; }
.dark .dp-foot-ok { background: #0E89A5; }
.dark .dp-foot-ok:hover { background: #06628C; }

/* 小屏：面板居中放大，触控目标更大 */
@media (max-width: 480px) {
  .dp-pop.dp-centered {
    position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 20rem;
  }
  .dp-cell { height: 2.5rem; font-size: 0.875rem; }
  .dp-mcell { height: 3rem; }
  /* 上/下月箭头与底部操作按钮：移动端放大到接近 44px 触控目标 */
  .dp-nav { width: 2.5rem; height: 2.5rem; }
  .dp-foot-btn { height: 2.5rem; }
}