/* FinchUI 日期时间选择器样式 */
/* 遮罩层 */
.fui-datetime-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.3);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:all 0.3s ease;z-index:9998;display:none;}
.fui-datetime-overlay.active{opacity:1;visibility:visible;display:block;}
/* 选择器容器 */
.fui-datetime-picker-popup{position:absolute;background:#fff;border:1px solid #ededed;border-radius:12px;box-shadow:0 3px 5px rgba(0,0,0,0.1);padding:16px;min-width:320px;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all 0.3s ease;z-index:9999;display:none;}
.fui-datetime-picker-popup.active{opacity:1;visibility:visible;transform:translateY(0);display:block;}
/* 位置在上方时的动画方向 */
.fui-datetime-picker-popup.position-above{transform:translateY(10px);}
.fui-datetime-picker-popup.position-above.active{transform:translateY(0);}
/* 快捷选择区域 */
.time-preset-section{display:flex;gap:8px;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid #e5e7eb;}
.time-preset-btn{padding:6px 12px;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:6px;font-size:13px;color:#374151;cursor:pointer;transition:all 0.2s;}
.time-preset-btn:hover{background:#e5e7eb;border-color:#0069cc;color:#0069cc;}
/* 日期部分 */
.time-date-section{padding-top:5px;}
/* 年月选择器 */
.time-year-month-selector{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:8px;}
.time-year-month-display{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:#111827;}
.time-nav-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:6px;font-size:16px;color:#6b7280;cursor:pointer;transition:all 0.2s;}
.time-nav-btn:hover{background:#0069cc;border-color:#0069cc;color:#fff;}
/* 星期标题 */
.time-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:8px;}
.time-weekday{text-align:center;font-size:12px;color:#6b7280;font-weight:500;padding:4px;}
/* 日期网格 */
.time-days-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.time-day-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:14px;color:#374151;border-radius:6px;cursor:pointer;transition:all 0.2s;border:1px solid transparent;}
.time-day-cell:hover{background:#f3f4f6;border-color:#e5e7eb;}
.time-day-cell.today{background:#dbeafe;color:#0069cc;font-weight:600;}
.time-day-cell.selected{background:#0069cc;color:#fff;font-weight:600;}
.time-day-cell.other-month{color:#9ca3af;}
.time-day-cell.disabled{color:#d1d5db;cursor:not-allowed;}
.time-day-cell.disabled:hover{background:transparent;border-color:transparent;}
/* 时间部分 */
.time-section{padding-top:12px;border-top:1px solid #e5e7eb;}
/* 第一个子元素(日期或时间)没有上边框 */
.fui-datetime-picker-popup>:first-child{padding-top:5px;border-top:none;}
/* 时间控制 */
.time-controls{display:flex;gap:12px;justify-content:center;}
.time-control{display:flex;flex-direction:column;align-items:center;}
.time-scroll{width:70px;height:180px;overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory;scrollbar-width:none;-ms-overflow-style:none;position:relative;box-sizing:border-box;max-height:200px;}
.time-scroll::-webkit-scrollbar{display:none;}
.time-option{height:36px;display:flex;align-items:center;justify-content:center;font-size:14px;color:#d1d5db;cursor:pointer;scroll-snap-align:center;transition:all 0.15s ease;flex-shrink:0;background:transparent;}
.time-option:hover{color:#6b7280;}
.time-option.selected{font-size:22px;font-weight:700;color:#0069cc;background:transparent;height:36px;}
.time-option.near-selected{font-size:18px;color:#9ca3af;}
/* 底部操作 */
.time-actions{display:flex;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid #e5e7eb;}
.time-btn{flex:1;padding:8px 16px;border:1px solid #e5e7eb;border-radius:6px;font-size:14px;cursor:pointer;transition:all 0.2s;font-weight:500;}
.time-btn-now{background:#10b981;color:#fff;border-color:#10b981;}
.time-btn-now:hover{background:#059669;border-color:#059669;}
.time-btn-clear{background:#fff;color:#6b7280;}
.time-btn-clear:hover{background:#f3f4f6;border-color:#9ca3af;}
.time-btn-cancel{background:#fff;color:#6b7280;}
.time-btn-cancel:hover{background:#f3f4f6;border-color:#9ca3af;}
.time-btn-confirm{background:#0069cc;color:#fff;border-color:#0069cc;}
.time-btn-confirm:hover{background:#0051a8;border-color:#0051a8;}
/* 深色模式 */
.fui-dark .fui-datetime-overlay{background:rgba(0,0,0,0.6);}
.fui-dark .fui-datetime-picker-popup{background:#333;border-color:#444;box-shadow:0 3px 5px rgba(0,0,0,0.2);}
.fui-dark .time-preset-section{border-bottom-color:#374151;}
.fui-dark .time-preset-btn{background:#374151;border-color:#4b5563;color:#d1d5db;}
.fui-dark .time-preset-btn:hover{background:#4b5563;border-color:#0069cc;color:#60a5fa;}
.fui-dark .time-year-month-display{color:#f9fafb;}
.fui-dark .time-nav-btn{background:#374151;border-color:#4b5563;color:#9ca3af;}
.fui-dark .time-nav-btn:hover{background:#0069cc;border-color:#0069cc;color:#fff;}
.fui-dark .time-weekday{color:#9ca3af;}
.fui-dark .time-day-cell{color:#d1d5db;}
.fui-dark .time-day-cell:hover{background:#374151;border-color:#4b5563;}
.fui-dark .time-day-cell.today{background:#1e3a5f;color:#60a5fa;}
.fui-dark .time-day-cell.selected{background:#0069cc;color:#fff;}
.fui-dark .time-day-cell.other-month{color:#6b7280;}
.fui-dark .time-day-cell.disabled{color:#4b5563;}
.fui-dark .time-section{border-top-color:#374151;}
.fui-dark .fui-datetime-picker-popup>:first-child{border-top:none;}
.fui-dark .time-control::before{border-color:#60a5fa;}
.fui-dark .time-option{color:#4b5563;}
.fui-dark .time-option:hover{color:#9ca3af;}
.fui-dark .time-option.selected{color:#60a5fa;background:transparent;}
.fui-dark .time-option.near-selected{color:#6b7280;}
.fui-dark .time-value{color:#f9fafb;background:#374151;}
.fui-dark .time-actions{border-top-color:#374151;}
.fui-dark .time-btn-now{background:#10b981;border-color:#10b981;}
.fui-dark .time-btn-now:hover{background:#059669;border-color:#059669;}
.fui-dark .time-btn-clear,.fui-dark .time-btn-cancel{background:#374151;color:#d1d5db;border-color:#4b5563;}
.fui-dark .time-btn-clear:hover,.fui-dark .time-btn-cancel:hover{background:#4b5563;border-color:#6b7280;}
.fui-dark .time-btn-confirm{background:#0069cc;border-color:#0069cc;}
.fui-dark .time-btn-confirm:hover{background:#0051a8;border-color:#0051a8;}
/* 移动端适配 */
@media (max-width:768px){
.fui-datetime-picker-popup{position:fixed!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;max-width:90%;max-height:90vh;overflow-y:auto;}
.fui-datetime-picker-popup.active{transform:translate(-50%,-50%)!important;}
.time-option{height:44px;font-size:18px;}
.time-nav-btn{min-height:44px;min-width:44px;}
.time-day-cell{min-height:40px;}
}