/* ============================================================
   css/panels/panels-datepicker.css — 自定义日期选择器
   韩系法式唯美风：暖米色底 · 玫瑰色今日 · 金色细线
   设计系统: 遵循 DESIGN-SYSTEM.md 配色/字体/动效
   ============================================================ */

/* Trigger input — 在 prof-input 基础上增加日历图标 */
.dp-trigger {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' width='16' height='16' fill='none' stroke='%238A8278' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 38px;
}
.dp-trigger:focus { outline: none; }

/* Overlay backdrop */
.dp-overlay {
    position: fixed; inset: 0; z-index: 2100;
    background: transparent;
    animation: dpOverlayIn 0.15s ease;
}
/* ★ iOS standalone（加到主屏当 App）视口 bug：fixed inset:0 会锚到去掉安全区后的布局视口，
   bottom 停在 Home 条上方、下方露一条空白。standalone + 移动宽度时改用 100vh 整屏。 */
@media (display-mode: standalone) and (max-width: 767px) {
    .dp-overlay { bottom: auto; height: 100vh; }
}
@keyframes dpOverlayIn { from { opacity: 0; } to { opacity: 1; } }

/* Calendar panel
   ★ 2028-09 健康第 2 窗口：原来写死 min-width:280px，小屏（尤其是带侧边距的容器里）
   会被挤到贴着两侧；月份格子在窄屏也点不准。现在宽度按可视宽算、只留下限，
   并给上下月按钮补足 44 的命中区（视觉本体仍可小一点）。 */
.dp-panel {
    position: absolute;
    background: var(--surface);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-md), var(--shadow-lg), var(--shadow-glow);
    padding: 14px 14px 10px;
    min-width: 0;
    width: min(100%, calc(100vw - 32px));
    max-width: 300px;
    box-sizing: border-box;
    animation: dpPanelIn 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
    z-index: 2101;
}
@keyframes dpPanelIn {
    from { opacity: 0; transform: translateY(-8px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Header: month/year navigator */
.dp-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px; padding: 0 4px;
}
/* 命中区 ≥44：视觉本体保持 32，但按钮自己带足最小高度（长期规则 #214） */
.dp-nav-btn {
    position: relative;
    width: 32px; min-width: 32px; height: 32px; min-height: 44px;
    border-radius: 50%; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: transparent; color: var(--text-secondary);
    transition: background 0.15s ease, color 0.15s ease;
    padding: 0;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.dp-nav-btn::before { content: ''; position: absolute; left: -6px; right: -6px; top: 0; bottom: 0; }
.dp-nav-btn:hover { background: var(--rose-light); color: var(--accent-rose); }
.dp-nav-btn:active { transform: scale(0.92); }
.dp-month-year {
    display: flex; align-items: center; gap: 6px;
    font-family: var(--font-body); font-size: 15px; font-weight: 600;
    color: var(--text-primary); letter-spacing: 0.5px;
    cursor: pointer; user-select: none; -webkit-user-select: none;
    padding: 4px 8px; border-radius: 6px;
    transition: background 0.15s ease;
}
.dp-month-year:hover { background: var(--rose-light); }
.dp-year {
    font-family: 'Playfair Display', var(--font-decorative); font-style: italic;
    font-size: 14px; color: var(--gold); font-weight: 400;
}

/* Weekday row */
.dp-weekdays {
    display: grid; grid-template-columns: repeat(7, 1fr);
    text-align: center; margin-bottom: 4px;
}
.dp-weekday {
    font-size: 10px; font-weight: 500; color: var(--text-muted);
    letter-spacing: 0.8px; padding: 4px 0;
    font-family: var(--font-body);
}

/* Day grid */
.dp-days {
    display: grid; grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.dp-day {
    position: relative;
    aspect-ratio: 1; min-height: 36px; display: flex; align-items: center; justify-content: center;
    border-radius: 10px; border: none; cursor: pointer;
    font-family: var(--font-body);
    font-size: 13px; color: var(--text-primary);
    background: transparent; padding: 0;
    transition: background 0.12s ease, transform 0.12s ease;
    /* iOS：禁双击放大（消除 ~300ms 点击延迟 + 防止点击坐标被缩放算偏，回"点30选中16"）+ 关点击高亮闪现 */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
/* 命中区 ≥44（视觉格子保持方形、网格对齐；只补上下各 4px，避免相邻格互相抢点击） */
.dp-day::before { content: ''; position: absolute; left: 0; right: 0; top: -4px; bottom: -4px; }
.dp-day:hover { background: var(--rose-light); }
.dp-day:active { transform: scale(0.9); }
/* Adjacent month days */
.dp-day-adjacent { color: var(--text-muted); opacity: 0.35; }
/* Today */
.dp-day-today {
    font-weight: 700;
    color: var(--accent-rose);
}
.dp-day-today::after {
    content: ''; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
    width: 4px; height: 4px; border-radius: 50%; background: var(--accent-rose);
}
/* Selected */
.dp-day-selected {
    background: var(--accent-rose); color: #fff;
    box-shadow: var(--shadow-sm), var(--shadow-glow);
}
.dp-day-selected:hover { background: var(--accent-rose); color: #fff; }
.dp-day-selected.dp-day-today::after { background: rgba(255,255,255,0.7); }
/* 不可选日期（已有一篇日记）：灰色 + 斜线，不可点 */
.dp-day-disabled {
    color: var(--text-muted); opacity: 0.42; cursor: not-allowed;
    text-decoration: line-through;
}
.dp-day-disabled:hover { background: transparent; }
.dp-day-disabled:active { transform: none; }

/* Year selector overlay */
.dp-year-panel {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
    padding: 8px 4px 4px;
}
.dp-year-item {
    padding: 8px 4px; border-radius: 8px; border: none; cursor: pointer;
    font-family: var(--font-body); font-size: 13px;
    color: var(--text-primary); background: transparent;
    transition: all 0.12s ease; text-align: center;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.dp-year-item:hover { background: var(--rose-light); }
.dp-year-item:active { transform: scale(0.93); }
.dp-year-current {
    background: var(--accent-rose); color: #fff;
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}
.dp-year-current:hover { background: var(--accent-rose); color: #fff; }

/* Footer */
.dp-footer {
    display: flex; justify-content: flex-end; gap: 8px;
    margin-top: 8px; padding-top: 8px;
    border-top: 1px solid var(--gold); border-top-color: rgba(196,168,106,0.2);
}
.dp-footer-btn {
    padding: 6px 16px; border-radius: var(--radius-full); border: none; cursor: pointer;
    font-family: inherit; font-size: 12px; letter-spacing: 0.5px;
    transition: all 0.15s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.dp-footer-clear {
    background: transparent; color: var(--text-secondary);
}
.dp-footer-clear:hover { color: var(--accent-rose); background: var(--rose-light); }
.dp-footer-today {
    background: var(--rose-light); color: var(--accent-rose);
    font-weight: 500;
}
.dp-footer-today:hover { background: var(--accent-rose); color: #fff; }

@media (max-width: 370px) {
    .dp-panel { min-width: 260px; padding: 10px; }
    .dp-day { font-size: 12px; }
}