/* ============================================================
   全局自定义日期选择器 · 与弹窗同风格的日历面板
   替代原生 <input type="date"> 的小弹层（自动升级全站 date 输入）
   ============================================================ */

/* 输入框升级态：只读 + 日历图标 */
.dp-input { cursor: pointer; padding-right: 34px !important; position: relative; }
.dp-input[readonly] { background: #fff; }
.dp-input:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--gray-200)); }
.dp-wrap { position: relative; }
.dp-ico {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    width: 18px; height: 18px; color: var(--gray-400); pointer-events: none;
    display: inline-flex;
}
.dp-ico svg { width: 18px; height: 18px; }
.dp-input:focus ~ .dp-ico, .dp-wrap.open .dp-ico { color: var(--primary); }

/* ---------- 日历面板 ---------- */
.dp-panel {
    position: fixed; z-index: 120; /* 高于普通弹窗(#modalMask 100) */
    width: 280px; padding: 11px 11px 8px;
    background: var(--surface);
    border: 1px solid var(--gray-200); border-radius: var(--radius);
    box-shadow: var(--shadow-3);
    opacity: 0; transform: translateY(-6px) scale(.98); pointer-events: none;
    transition: opacity 180ms ease-out, transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.dp-panel.open { opacity: 1; transform: none; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .dp-panel { transition: none; } }

/* 头部：年月 + 前后翻月（标题可点击切换 年/月 层级） */
.dp-head { display: flex; align-items: center; gap: 5px; margin-bottom: 8px; }
.dp-title {
    flex: 1; height: 26px; display: inline-flex; align-items: center; justify-content: center; gap: 3px;
    text-align: center; font-size: 13px; font-weight: 700; color: var(--ink); letter-spacing: 0.02em;
    border: 0; background: transparent; font-family: inherit; cursor: pointer; border-radius: 8px;
    padding: 0 6px;
    transition: background 140ms ease-out, color 140ms ease-out;
}
.dp-title svg { width: 12px; height: 12px; opacity: 0.55; }
.dp-title:hover { color: var(--primary); background: var(--primary-light); }
.dp-title:hover svg { opacity: 1; }
.dp-title-plain { cursor: default; }
.dp-title-plain:hover { color: var(--ink); background: transparent; }
.dp-nav, .dp-today-btn {
    width: 26px; height: 26px; display: grid; place-items: center;
    border: 1px solid var(--gray-200); border-radius: 8px;
    color: var(--gray-500); background: #fff;
    transition: background 140ms ease-out, color 140ms ease-out, border-color 140ms ease-out;
}
.dp-nav svg { width: 14px; height: 14px; }
.dp-nav:hover { color: var(--primary); border-color: var(--primary-light); background: var(--primary-light); }
.dp-today-btn { width: auto; padding: 0 10px; font-size: 11px; font-weight: 600; }
.dp-today-btn:hover { color: var(--primary); border-color: var(--primary-light); background: var(--primary-light); }

/* 星期表头 */
.dp-week { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; }
.dp-week span { text-align: center; font-size: 10px; color: var(--gray-400); padding: 3px 0; letter-spacing: 0.06em; }
.dp-week span:first-child, .dp-week span:last-child { color: var(--gray-500); }

/* 日期网格 */
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
/* 月 / 年选择网格（3 列大格子） */
.dp-grid-cells { grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: 2px; }
.dp-cell {
    border: 0; background: transparent; font-family: inherit; cursor: pointer;
    height: 32px; display: grid; place-items: center;
    font-size: 12px; color: var(--ink); border-radius: 8px;
    font-variant-numeric: tabular-nums;
    transition: background 120ms ease-out, color 120ms ease-out, box-shadow 120ms ease-out;
}
.dp-cell:hover { background: var(--primary-light); color: var(--primary-dark); }
.dp-cell.today { box-shadow: inset 0 0 0 1.5px var(--primary); color: var(--primary); font-weight: 700; }
.dp-cell.sel { background: var(--primary); color: #fff; font-weight: 700; }
.dp-cell.sel:hover { background: var(--primary-dark); color: #fff; }
.dp-cell:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.dp-day {
    border: 0; background: transparent; font-family: inherit; cursor: pointer;
    height: 31px; display: grid; place-items: center;
    font-size: 12px; color: var(--ink); border-radius: 8px;
    font-variant-numeric: tabular-nums;
    transition: background 120ms ease-out, color 120ms ease-out, box-shadow 120ms ease-out;
}
.dp-day:hover { background: var(--primary-light); color: var(--primary-dark); }
.dp-day.dim { color: var(--gray-400); }
.dp-day.dim:hover { color: var(--primary-dark); }
.dp-day.today { box-shadow: inset 0 0 0 1.5px var(--primary); color: var(--primary); font-weight: 700; }
.dp-day.sel { background: var(--primary); color: #fff; font-weight: 700; }
.dp-day.sel:hover { background: var(--primary-dark); color: #fff; }
.dp-day:disabled { color: var(--gray-300); cursor: not-allowed; }
.dp-day:disabled:hover { background: none; }
.dp-day:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* 底部：快捷与说明 */
.dp-foot {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--gray-100);
    font-size: 11px; color: var(--gray-400);
}
.dp-quick { display: flex; gap: 5px; }
.dp-quick button {
    height: 23px; padding: 0 8px; font-size: 11px; color: var(--gray-500);
    border: 1px solid var(--gray-200); border-radius: 7px; background: #fff;
    transition: color 120ms ease-out, background 120ms ease-out, border-color 120ms ease-out;
}
.dp-quick button:hover { color: var(--primary); background: var(--primary-light); border-color: var(--primary-light); }