podo-ui 1.0.12 → 1.0.14

package/cdn/podo-datepicker.css

@@ -1,5 +1,5 @@
 /*!
- * Podo UI DatePicker CSS v1.0.12
+ * Podo UI DatePicker CSS v1.0.14
  * https://podoui.com
  * MIT License
  */
@@ -197,6 +197,59 @@
   flex-shrink: 0;
 }
 
+/* ============================================
+   Navigation (quickSelect + period mode, integrated in input)
+   ============================================ */
+.podo-datepicker__input--with-nav {
+  padding: 0;
+}
+
+.podo-datepicker__nav-arrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  min-height: 100%;
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: background 0.2s;
+  flex-shrink: 0;
+}
+
+.podo-datepicker__nav-arrow:hover:not(:disabled) {
+  background: var(--podo-default-hover);
+}
+
+.podo-datepicker__nav-arrow:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.podo-datepicker__nav-arrow i {
+  font-size: 16px;
+  color: var(--podo-text-body);
+}
+
+.podo-datepicker__nav-arrow--left {
+  border-right: 1px solid var(--podo-border);
+  border-radius: var(--podo-radius-md) 0 0 var(--podo-radius-md);
+}
+
+.podo-datepicker__nav-arrow--right {
+  border-left: 1px solid var(--podo-border);
+  border-radius: 0 var(--podo-radius-md) var(--podo-radius-md) 0;
+}
+
+.podo-datepicker__preset-label {
+  font-size: var(--podo-font-size-md);
+  color: var(--podo-text-body);
+  white-space: nowrap;
+  flex-shrink: 0;
+  padding-left: var(--podo-spacing-3);
+  font-weight: 600;
+}
+
 /* ============================================
    Dropdown
    ============================================ */
@@ -488,6 +541,57 @@
   background: var(--podo-primary-hover);
 }
 
+/* ==============================================
+   Quick Select Panel
+   ============================================== */
+
+.podo-datepicker__dropdown-body {
+  display: flex;
+  gap: var(--podo-spacing-4);
+  min-width: 0;
+}
+
+.podo-datepicker__quick-select-panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--podo-spacing-1);
+  min-width: 100px;
+  padding-right: var(--podo-spacing-4);
+  border-right: 1px solid var(--podo-border);
+  flex-shrink: 0;
+}
+
+.podo-datepicker__quick-select-item {
+  display: flex;
+  align-items: center;
+  padding: var(--podo-spacing-2) var(--podo-spacing-3);
+  background: none;
+  border: none;
+  border-radius: var(--podo-radius-sm);
+  cursor: pointer;
+  transition: background 0.2s, color 0.2s;
+  color: var(--podo-text-body);
+  white-space: nowrap;
+  text-align: left;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.podo-datepicker__quick-select-item:hover:not(.podo-datepicker__quick-select-item--disabled):not(.podo-datepicker__quick-select-item--active) {
+  background: var(--podo-default-hover);
+}
+
+.podo-datepicker__quick-select-item--active {
+  color: var(--podo-primary);
+  background: var(--podo-primary-fill, rgba(124, 58, 237, 0.08));
+  font-weight: 600;
+}
+
+.podo-datepicker__quick-select-item--disabled {
+  color: var(--podo-text-disabled, #adb5bd);
+  cursor: not-allowed;
+}
+
 /* ==============================================
    Responsive Styles (min 360px support)
    ============================================== */
@@ -497,6 +601,16 @@
   .podo-datepicker__period-calendar-right {
     display: none;
   }
+
+  .podo-datepicker__quick-select-panel {
+    min-width: 80px;
+    padding-right: var(--podo-spacing-3);
+  }
+
+  .podo-datepicker__quick-select-item {
+    font-size: 13px;
+    padding: var(--podo-spacing-2);
+  }
 }
 
 /* 480px 이하: padding/gap 축소 */
@@ -574,4 +688,20 @@
     height: 16px;
     font-size: 16px;
   }
+
+  .podo-datepicker__quick-select-panel {
+    display: none;
+  }
+
+  .podo-datepicker__nav-arrow {
+    width: 32px;
+  }
+
+  .podo-datepicker__nav-arrow i {
+    font-size: 14px;
+  }
+
+  .podo-datepicker__preset-label {
+    display: none;
+  }
 }

package/cdn/podo-datepicker.js

@@ -1,5 +1,5 @@
 /*!
- * Podo UI DatePicker v1.0.12
+ * Podo UI DatePicker v1.0.14
  * https://podoui.com
  * MIT License
  */
@@ -31,8 +31,115 @@
     yearSuffix: '년',
     reset: '초기화',
     apply: '적용',
+    quickSelect: {
+      today: '오늘',
+      yesterday: '어제',
+      thisWeek: '이번 주',
+      lastWeek: '지난 주',
+      last7Days: '최근 7일',
+      last30Days: '최근 30일',
+      thisMonth: '이번 달',
+      lastMonth: '지난 달',
+    },
   };
 
+  // ============================================
+  // Quick Select Presets
+  // ============================================
+
+  const QUICK_SELECT_KEYS = [
+    'today', 'yesterday', 'thisWeek', 'lastWeek',
+    'last7Days', 'last30Days', 'thisMonth', 'lastMonth',
+  ];
+
+  function getPresetRange(key) {
+    const today = new Date();
+    const todayStart = new Date(today.getFullYear(), today.getMonth(), today.getDate());
+
+    switch (key) {
+      case 'today':
+        return { start: new Date(todayStart), end: new Date(todayStart) };
+      case 'yesterday': {
+        const d = new Date(todayStart);
+        d.setDate(d.getDate() - 1);
+        return { start: d, end: new Date(d) };
+      }
+      case 'thisWeek': {
+        const dayOfWeek = todayStart.getDay();
+        const start = new Date(todayStart);
+        start.setDate(start.getDate() - dayOfWeek);
+        const end = new Date(start);
+        end.setDate(end.getDate() + 6);
+        return { start, end };
+      }
+      case 'lastWeek': {
+        const dayOfWeek = todayStart.getDay();
+        const thisWeekStart = new Date(todayStart);
+        thisWeekStart.setDate(thisWeekStart.getDate() - dayOfWeek);
+        const start = new Date(thisWeekStart);
+        start.setDate(start.getDate() - 7);
+        const end = new Date(start);
+        end.setDate(end.getDate() + 6);
+        return { start, end };
+      }
+      case 'last7Days': {
+        const start = new Date(todayStart);
+        start.setDate(start.getDate() - 6);
+        return { start, end: new Date(todayStart) };
+      }
+      case 'last30Days': {
+        const start = new Date(todayStart);
+        start.setDate(start.getDate() - 29);
+        return { start, end: new Date(todayStart) };
+      }
+      case 'thisMonth': {
+        const start = new Date(todayStart.getFullYear(), todayStart.getMonth(), 1);
+        const end = new Date(todayStart.getFullYear(), todayStart.getMonth() + 1, 0);
+        return { start, end };
+      }
+      case 'lastMonth': {
+        const start = new Date(todayStart.getFullYear(), todayStart.getMonth() - 1, 1);
+        const end = new Date(todayStart.getFullYear(), todayStart.getMonth(), 0);
+        return { start, end };
+      }
+      default:
+        return { start: todayStart, end: todayStart };
+    }
+  }
+
+  // ============================================
+  // Navigation Helpers
+  // ============================================
+
+  function getNavigationStepForPreset(key) {
+    switch (key) {
+      case 'today': case 'yesterday': return { type: 'days', count: 1 };
+      case 'thisWeek': case 'lastWeek': case 'last7Days': return { type: 'days', count: 7 };
+      case 'last30Days': return { type: 'days', count: 30 };
+      case 'thisMonth': case 'lastMonth': return { type: 'month', count: 1 };
+      default: return { type: 'days', count: 1 };
+    }
+  }
+
+  function calculateNavigationStep(start, end) {
+    const diffMs = new Date(end.getFullYear(), end.getMonth(), end.getDate()).getTime()
+      - new Date(start.getFullYear(), start.getMonth(), start.getDate()).getTime();
+    return { type: 'days', count: Math.round(diffMs / 86400000) + 1 };
+  }
+
+  function shiftDateRange(start, end, step, dir) {
+    if (step.type === 'month') {
+      const shift = step.count * dir;
+      const newStart = new Date(start.getFullYear(), start.getMonth() + shift, 1);
+      const newEnd = new Date(newStart.getFullYear(), newStart.getMonth() + 1, 0);
+      return { start: newStart, end: newEnd };
+    }
+    const shift = step.count * dir;
+    const s = new Date(start); s.setDate(s.getDate() + shift);
+    const e = new Date(end); e.setDate(e.getDate() + shift);
+    return { start: s, end: e };
+  }
+
   // ============================================
   // Helper Functions
   // ============================================
@@ -234,6 +341,7 @@
      * @param {string} [options.format] - Date/time format (y: year, m: month, d: day, h: hour, i: minute)
      * @param {Object} [options.initialCalendar] - Initial calendar display month { start, end }
      * @param {Object} [options.yearRange] - Year range for year selector { min, max }
+     * @param {boolean} [options.quickSelect=false] - Show quick select preset panel (period mode only)
      */
     constructor(container, options = {}) {
       this.container =
@@ -268,10 +376,17 @@
       this.format = options.format;
       this.initialCalendar = options.initialCalendar || {};
       this.yearRange = options.yearRange;
+      this.quickSelect = options.quickSelect || false;
+
+      // Merge quickSelect texts
+      if (options.texts?.quickSelect) {
+        this.texts.quickSelect = { ...DEFAULT_TEXTS.quickSelect, ...options.texts.quickSelect };
+      }
 
       // State
       this.isOpen = false;
       this.selectingPart = null;
+      this.navigationStep = null;
 
       // 초기 달력 표시 월 계산
       if (this.value.date) {
@@ -330,6 +445,8 @@
       this.container.innerHTML = '';
       this.container.className = PREFIX;
 
+      const showNavigation = this.quickSelect && this.mode === 'period';
+
       // Input wrapper
       this.inputEl = createElement('div', `${PREFIX}__input`);
       if (this.disabled) this.inputEl.classList.add(`${PREFIX}__input--disabled`);
@@ -343,6 +460,36 @@
       this.iconEl = createElement('i', `${PREFIX}__icon ${iconClass}`);
       this.inputEl.appendChild(this.iconEl);
 
+      if (showNavigation) {
+        this.inputEl.classList.add(`${PREFIX}__input--with-nav`);
+
+        // Left arrow (prepend before inputContent)
+        this._prevArrowBtn = createElement('button', `${PREFIX}__nav-arrow ${PREFIX}__nav-arrow--left`);
+        this._prevArrowBtn.type = 'button';
+        this._prevArrowBtn.innerHTML = '<i class="icon-expand-left"></i>';
+        this._prevArrowBtn.disabled = this.disabled || this.isNavDisabled(-1);
+        this._prevArrowBtn.addEventListener('click', (e) => { e.stopPropagation(); this.handleNavigate(-1); });
+        this.inputEl.insertBefore(this._prevArrowBtn, this.inputContentEl);
+
+        // Preset label
+        this._presetLabelEl = createElement('span', `${PREFIX}__preset-label`);
+        this.updatePresetLabel();
+        this.inputEl.insertBefore(this._presetLabelEl, this.inputContentEl);
+
+        // Remove calendar icon
+        if (this.iconEl && this.iconEl.parentNode) {
+          this.iconEl.parentNode.removeChild(this.iconEl);
+        }
+
+        // Right arrow (append after content)
+        this._nextArrowBtn = createElement('button', `${PREFIX}__nav-arrow ${PREFIX}__nav-arrow--right`);
+        this._nextArrowBtn.type = 'button';
+        this._nextArrowBtn.innerHTML = '<i class="icon-expand-right"></i>';
+        this._nextArrowBtn.disabled = this.disabled || this.isNavDisabled(1);
+        this._nextArrowBtn.addEventListener('click', (e) => { e.stopPropagation(); this.handleNavigate(1); });
+        this.inputEl.appendChild(this._nextArrowBtn);
+      }
+
       this.container.appendChild(this.inputEl);
 
       // Dropdown
@@ -550,7 +697,18 @@
 
       // Calendar(s)
       if (this.mode === 'period') {
-        this.renderPeriodCalendars();
+        const showQS = this.quickSelect && this.mode === 'period';
+
+        if (showQS) {
+          const body = createElement('div', `${PREFIX}__dropdown-body`);
+          body.appendChild(this.renderQuickSelectPanel());
+          const calWrapper = createElement('div', `${PREFIX}__period-calendars-wrapper`);
+          this.renderPeriodCalendarsInto(calWrapper);
+          body.appendChild(calWrapper);
+          this.dropdownEl.appendChild(body);
+        } else {
+          this.renderPeriodCalendars();
+        }
       } else {
         this.renderCalendar(this.viewDate, (date) => this.handleViewDateChange(date));
       }
@@ -561,6 +719,123 @@
       }
     }
 
+    /**
+     * Quick Select 패널 렌더링
+     * @returns {HTMLElement}
+     */
+    renderQuickSelectPanel() {
+      const panel = createElement('div', `${PREFIX}__quick-select-panel`);
+
+      QUICK_SELECT_KEYS.forEach((key) => {
+        const label = this.texts.quickSelect?.[key] || key;
+        const disabled = this.isQSPresetDisabled(key);
+        const active = this.isQSPresetActive(key);
+
+        const btn = document.createElement('button');
+        btn.type = 'button';
+        btn.textContent = label;
+        btn.className = `${PREFIX}__quick-select-item`;
+        if (active) btn.classList.add(`${PREFIX}__quick-select-item--active`);
+        if (disabled) {
+          btn.classList.add(`${PREFIX}__quick-select-item--disabled`);
+          btn.disabled = true;
+        }
+
+        if (!disabled) {
+          btn.addEventListener('mousedown', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            this.handleQuickSelect(key);
+          });
+        }
+
+        panel.appendChild(btn);
+      });
+
+      return panel;
+    }
+
+    isQSPresetDisabled(key) {
+      const { start, end } = getPresetRange(key);
+
+      if (this.minDate) {
+        const min = this.minDate instanceof Date ? this.minDate : this.minDate.date;
+        const minDay = new Date(min.getFullYear(), min.getMonth(), min.getDate());
+        if (end < minDay) return true;
+      }
+
+      if (this.maxDate) {
+        const max = this.maxDate instanceof Date ? this.maxDate : this.maxDate.date;
+        const maxDay = new Date(max.getFullYear(), max.getMonth(), max.getDate());
+        if (start > maxDay) return true;
+      }
+
+      return false;
+    }
+
+    isQSPresetActive(key) {
+      if (!this.tempValue.date || !this.tempValue.endDate) return false;
+      const { start, end } = getPresetRange(key);
+      return isSameDay(this.tempValue.date, start) && isSameDay(this.tempValue.endDate, end);
+    }
+
+    handleQuickSelect(key) {
+      let { start, end } = getPresetRange(key);
+      // minDate/maxDate로 클램핑
+      if (this.minDate) {
+        const min = this.minDate instanceof Date ? this.minDate : this.minDate.date;
+        const minDay = new Date(min.getFullYear(), min.getMonth(), min.getDate());
+        if (start < minDay) start = minDay;
+      }
+      if (this.maxDate) {
+        const max = this.maxDate instanceof Date ? this.maxDate : this.maxDate.date;
+        const maxDay = new Date(max.getFullYear(), max.getMonth(), max.getDate());
+        if (end > maxDay) end = maxDay;
+      }
+      this.tempValue = { date: start, endDate: end, time: this.tempValue.time, endTime: this.tempValue.endTime };
+      this.viewDate = new Date(start.getFullYear(), start.getMonth(), 1);
+      this.endViewDate = new Date(end.getFullYear(), end.getMonth(), 1);
+      this.navigationStep = getNavigationStepForPreset(key);
+
+      if (!this.showActions) {
+        this.value = { ...this.tempValue };
+        this.onChange?.(this.value);
+        this.close();
+      }
+      this.renderInputContent();
+      this.updateNavArrows();
+      this.renderDropdown();
+    }
+
+    /**
+     * PeriodCalendars를 지정된 컨테이너에 렌더링
+     * @param {HTMLElement} container
+     */
+    renderPeriodCalendarsInto(container) {
+      const wrapper = createElement('div', `${PREFIX}__period-calendars`);
+      const isMobile = this.isMobileView();
+
+      const leftCal = createElement('div', `${PREFIX}__period-calendar-left`);
+      const leftCalendar = this.createCalendarElement(
+        this.viewDate,
+        (date) => this.handleViewDateChange(date),
+        { maxViewDate: isMobile ? undefined : this.endViewDate }
+      );
+      leftCal.appendChild(leftCalendar);
+      wrapper.appendChild(leftCal);
+
+      const rightCal = createElement('div', `${PREFIX}__period-calendar-right`);
+      const rightCalendar = this.createCalendarElement(
+        this.endViewDate,
+        (date) => this.handleEndViewDateChange(date),
+        { minViewDate: this.viewDate }
+      );
+      rightCal.appendChild(rightCalendar);
+      wrapper.appendChild(rightCal);
+
+      container.appendChild(wrapper);
+    }
+
     renderCalendar(viewDate, onViewDateChange, opts = {}) {
       const calendar = createElement('div', `${PREFIX}__calendar`);
 
@@ -1033,9 +1308,11 @@
             endDate: existingStartDate,
             endTime: adjustedEndTime,
           };
+          this.navigationStep = calculateNavigationStep(newDate, existingStartDate);
         } else {
           const adjustedEndTime = this.adjustTimeForDate(newDate, this.tempValue.endTime);
           this.tempValue = { ...this.tempValue, endDate: newDate, endTime: adjustedEndTime };
+          this.navigationStep = calculateNavigationStep(existingStartDate, newDate);
         }
       } else {
         const adjustedTime = this.adjustTimeForDate(newDate, this.tempValue.time);
@@ -1131,6 +1408,81 @@
       this.renderInputContent();
     }
 
+    handleNavigate(direction) {
+      const dv = this.showActions ? this.tempValue : this.value;
+      if (!dv?.date || !dv?.endDate || !this.navigationStep) return;
+
+      const { start, end } = shiftDateRange(dv.date, dv.endDate, this.navigationStep, direction);
+
+      if (this.minDate) {
+        const min = this.minDate instanceof Date ? this.minDate : this.minDate.date;
+        if (start < new Date(min.getFullYear(), min.getMonth(), min.getDate())) return;
+      }
+      if (this.maxDate) {
+        const max = this.maxDate instanceof Date ? this.maxDate : this.maxDate.date;
+        if (end > new Date(max.getFullYear(), max.getMonth(), max.getDate())) return;
+      }
+
+      const newValue = { date: start, endDate: end, time: dv.time, endTime: dv.endTime };
+      this.tempValue = newValue;
+      this.value = { ...newValue };
+      this.viewDate = new Date(start.getFullYear(), start.getMonth(), 1);
+      this.endViewDate = new Date(end.getFullYear(), end.getMonth(), 1);
+      this.emitChange();
+      this.renderInputContent();
+      this.updateNavArrows();
+      if (this.isOpen) this.renderDropdown();
+    }
+
+    isNavDisabled(direction) {
+      const dv = this.showActions ? this.tempValue : this.value;
+      if (!dv?.date || !dv?.endDate || !this.navigationStep) return true;
+      const { start, end } = shiftDateRange(dv.date, dv.endDate, this.navigationStep, direction);
+      if (direction === -1 && this.minDate) {
+        const min = this.minDate instanceof Date ? this.minDate : this.minDate.date;
+        return start < new Date(min.getFullYear(), min.getMonth(), min.getDate());
+      }
+      if (direction === 1 && this.maxDate) {
+        const max = this.maxDate instanceof Date ? this.maxDate : this.maxDate.date;
+        return end > new Date(max.getFullYear(), max.getMonth(), max.getDate());
+      }
+      return false;
+    }
+
+    updateNavArrows() {
+      if (this._prevArrowBtn) {
+        this._prevArrowBtn.disabled = this.disabled || this.isNavDisabled(-1);
+      }
+      if (this._nextArrowBtn) {
+        this._nextArrowBtn.disabled = this.disabled || this.isNavDisabled(1);
+      }
+      this.updatePresetLabel();
+    }
+
+    getActivePresetLabel() {
+      const dv = this.showActions ? this.tempValue : this.value;
+      if (!dv?.date || !dv?.endDate) return null;
+      for (const key of QUICK_SELECT_KEYS) {
+        const { start, end } = getPresetRange(key);
+        if (isSameDay(dv.date, start) && isSameDay(dv.endDate, end)) {
+          return this.texts.quickSelect?.[key] || key;
+        }
+      }
+      return null;
+    }
+
+    updatePresetLabel() {
+      if (!this._presetLabelEl) return;
+      const label = this.getActivePresetLabel();
+      if (label) {
+        this._presetLabelEl.textContent = `${label} :`;
+        this._presetLabelEl.style.display = '';
+      } else {
+        this._presetLabelEl.textContent = '';
+        this._presetLabelEl.style.display = 'none';
+      }
+    }
+
     handleReset() {
       this.tempValue = {};
       this.close();

package/cdn/podo-datepicker.min.css

@@ -1,2 +1,2 @@
-/*! Podo UI DatePicker CSS v1.0.12 | MIT License | https://podoui.com */
-.podo-datepicker{--podo-bg-block:var(--color-bg-block,#ffffff);--podo-bg-modal:var(--color-bg-modal,#ffffff);--podo-bg-disabled:var(--color-bg-disabled,#f5f5f5);--podo-border:var(--color-border,#e0e0e0);--podo-border-hover:var(--color-border-hover,#bdbdbd);--podo-text-body:var(--color-text-body,#212121);--podo-text-sub:var(--color-text-sub,#757575);--podo-text-disabled:var(--color-text-disabled,#9e9e9e);--podo-primary:var(--color-primary,#7c3aed);--podo-primary-hover:var(--color-primary-hover,#6d28d9);--podo-primary-fill:var(--color-primary-fill,rgba(124,58,237,0.1));--podo-primary-reverse:var(--color-primary-reverse,#ffffff);--podo-default:var(--color-default,#f5f5f5);--podo-default-fill:var(--color-default-fill,#eeeeee);--podo-default-hover:var(--color-default-hover,#e0e0e0);--podo-default-reverse:var(--color-default-reverse,#212121);--podo-radius-sm:var(--radius-2,4px);--podo-radius-md:var(--radius-3,8px);--podo-spacing-1:var(--spacing-1,4px);--podo-spacing-2:var(--spacing-2,8px);--podo-spacing-3:var(--spacing-3,12px);--podo-spacing-4:var(--spacing-4,16px);--podo-spacing-5:var(--spacing-5,20px);--podo-font-size-sm:13px;--podo-font-size-md:14px;--podo-font-size-lg:16px;}.podo-datepicker{position:relative;display:inline-block;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-size:var(--podo-font-size-md);line-height:1.5;}.podo-datepicker__input{display:flex;align-items:center;gap:var(--podo-spacing-2);padding:var(--podo-spacing-3) var(--podo-spacing-4);background:var(--podo-bg-block);border:1px solid var(--podo-border);border-radius:var(--podo-radius-md);cursor:pointer;transition:border-color 0.2s;}.podo-datepicker__input:hover{border-color:var(--podo-border-hover);}.podo-datepicker__input--active{border-color:var(--podo-primary);}.podo-datepicker__input--disabled{background:var(--podo-bg-disabled);cursor:not-allowed;opacity:0.6;}.podo-datepicker__input-content{flex:1;display:flex;align-items:center;gap:var(--podo-spacing-2);}.podo-datepicker__part{display:flex;flex:1;align-items:center;justify-content:center;padding:0 var(--podo-spacing-2);background:none;border:none;border-radius:var(--podo-radius-sm);cursor:pointer;transition:background 0.2s;color:var(--podo-text-body);white-space:nowrap;font-variant-numeric:tabular-nums;font-family:inherit;font-size:var(--podo-font-size-md);}.podo-datepicker__part:hover{background:var(--podo-default);}.podo-datepicker__part--active{background:var(--podo-default-fill);}.podo-datepicker__part--placeholder{color:var(--podo-text-disabled);}.podo-datepicker__separator{color:var(--podo-text-body);padding:0 var(--podo-spacing-1);font-size:var(--podo-font-size-md);}.podo-datepicker__time-section{display:flex;align-items:center;justify-content:center;gap:0;}.podo-datepicker__time-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:none;border:none;padding:0 var(--podo-spacing-2);flex:1;text-align:center;text-align-last:center;color:var(--podo-text-body);cursor:pointer;border-radius:var(--podo-radius-sm);transition:background 0.2s;font-variant-numeric:tabular-nums;font-family:inherit;font-size:var(--podo-font-size-md);}.podo-datepicker__time-select:hover{background:var(--podo-default);}.podo-datepicker__time-select:focus{outline:none;background:var(--podo-default-fill);}.podo-datepicker__time-select--placeholder{color:var(--podo-text-disabled);}.podo-datepicker__time-select:disabled{cursor:not-allowed;opacity:0.6;}.podo-datepicker__time-separator{color:var(--podo-text-body);font-size:var(--podo-font-size-md);}.podo-datepicker__icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;font-size:20px;line-height:1;color:var(--podo-text-sub);flex-shrink:0;}.podo-datepicker__dropdown{position:absolute;top:calc(100%+var(--podo-spacing-2));left:0;z-index:1000;display:flex;flex-direction:column;gap:10px;padding:var(--podo-spacing-5);background:var(--podo-bg-modal);border-radius:var(--podo-radius-md);box-shadow:0 6px 18px -3px rgba(50,50,50,0.12);}.podo-datepicker__dropdown--right{left:auto;right:0;}.podo-datepicker__calendar{display:flex;flex-direction:column;gap:10px;min-width:280px;max-width:100%;}.podo-datepicker__calendar-nav{display:flex;align-items:center;gap:var(--podo-spacing-4);height:40px;}.podo-datepicker__nav-button{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--podo-default);border:none;border-radius:var(--podo-radius-md);cursor:pointer;transition:background 0.2s;}.podo-datepicker__nav-button:hover{background:var(--podo-default-hover);}.podo-datepicker__nav-button:disabled{opacity:0.5;cursor:not-allowed;}.podo-datepicker__nav-button i{font-size:20px;color:var(--podo-text-body);}.podo-datepicker__nav-title{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--podo-spacing-1);}.podo-datepicker__nav-select-wrapper{position:relative;display:flex;align-items:center;}.podo-datepicker__nav-select-wrapper::after{content:'';position:absolute;right:var(--podo-spacing-2);top:50%;transform:translateY(-50%);width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--podo-text-body);pointer-events:none;}.podo-datepicker__nav-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:none;border:none;padding:var(--podo-spacing-2) 24px var(--podo-spacing-2) var(--podo-spacing-2);border-radius:var(--podo-radius-sm);cursor:pointer;transition:background 0.2s;color:var(--podo-text-body);font-family:inherit;font-size:var(--podo-font-size-lg);font-weight:600;}.podo-datepicker__nav-select:hover{background:var(--podo-default);}.podo-datepicker__nav-select:focus{outline:none;background:var(--podo-default-fill);}.podo-datepicker__calendar-grid{display:flex;flex-direction:column;gap:var(--podo-spacing-2);padding-top:var(--podo-spacing-3);border-top:1px solid var(--podo-border);}.podo-datepicker__calendar-row{display:flex;width:100%;min-width:0;}.podo-datepicker__calendar-cell{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;height:40px;font-size:var(--podo-font-size-md);background:none;border:none;border-radius:var(--podo-radius-md);cursor:pointer;transition:background 0.2s;font-family:inherit;color:var(--podo-text-body);}.podo-datepicker__calendar-cell--header{color:var(--podo-text-sub);cursor:default;font-weight:500;}.podo-datepicker__calendar-cell--other{color:var(--podo-text-disabled);}.podo-datepicker__calendar-cell--today{font-weight:600;color:var(--podo-primary);}.podo-datepicker__calendar-cell--selected{background:var(--podo-primary);color:var(--podo-primary-reverse);font-weight:600;}.podo-datepicker__calendar-cell--in-range{background:var(--podo-primary-fill);border-radius:0;}.podo-datepicker__calendar-cell--range-start{background:var(--podo-primary);color:var(--podo-primary-reverse);font-weight:600;border-radius:var(--podo-radius-md);}.podo-datepicker__calendar-cell--range-end{background:var(--podo-primary);color:var(--podo-primary-reverse);font-weight:600;border-radius:var(--podo-radius-md);}.podo-datepicker__calendar-cell--disabled{color:var(--podo-text-disabled);background:var(--podo-default);border:none;border-radius:0;outline:none;cursor:not-allowed;}.podo-datepicker__calendar-cell--disabled:hover{background:var(--podo-default);}.podo-datepicker__calendar-cell:not(.podo-datepicker__calendar-cell--header):not(.podo-datepicker__calendar-cell--selected):not(.podo-datepicker__calendar-cell--disabled):not(.podo-datepicker__calendar-cell--range-start):not(.podo-datepicker__calendar-cell--range-end):not(.podo-datepicker__calendar-cell--in-range):hover{background:var(--podo-default);}.podo-datepicker__period-calendars{display:flex;gap:var(--podo-spacing-4);}.podo-datepicker__period-calendar-left,.podo-datepicker__period-calendar-right{flex:1;}.podo-datepicker__actions{display:flex;align-items:center;justify-content:space-between;gap:var(--podo-spacing-3);padding-top:var(--podo-spacing-3);border-top:1px solid var(--podo-border);}.podo-datepicker__period-text{font-size:var(--podo-font-size-md);color:var(--podo-primary);flex:1;}.podo-datepicker__action-buttons{display:flex;gap:var(--podo-spacing-3);flex-shrink:0;}.podo-datepicker__action-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--podo-spacing-2);padding:var(--podo-spacing-3) var(--podo-spacing-4);border-radius:var(--podo-radius-md);cursor:pointer;transition:background 0.2s;white-space:nowrap;font-family:inherit;font-size:var(--podo-font-size-md);}.podo-datepicker__action-button i{display:flex;align-items:center;justify-content:center;width:18px;height:18px;font-size:18px;line-height:1;}.podo-datepicker__action-button--reset{background:var(--podo-default-fill);border:1px solid var(--podo-border);color:var(--podo-default-reverse);}.podo-datepicker__action-button--reset:hover{background:var(--podo-default-hover);}.podo-datepicker__action-button--apply{background:var(--podo-primary);border:none;color:var(--podo-primary-reverse);}.podo-datepicker__action-button--apply:hover{background:var(--podo-primary-hover);}@media screen and (max-width:600px){.podo-datepicker__period-calendar-right{display:none;}}@media screen and (max-width:480px){.podo-datepicker__dropdown{padding:var(--podo-spacing-4);gap:var(--podo-spacing-3);}.podo-datepicker__calendar{min-width:260px;gap:var(--podo-spacing-3);}.podo-datepicker__calendar-nav{height:36px;gap:var(--podo-spacing-3);}.podo-datepicker__nav-button{width:36px;height:36px;}.podo-datepicker__calendar-cell{height:36px;}}@media screen and (max-width:400px){.podo-datepicker__dropdown{padding:var(--podo-spacing-3);gap:var(--podo-spacing-2);max-width:calc(100vw - var(--podo-spacing-4));box-sizing:border-box;}.podo-datepicker__calendar{min-width:0;width:100%;gap:var(--podo-spacing-2);}.podo-datepicker__calendar-nav{height:32px;gap:var(--podo-spacing-2);}.podo-datepicker__nav-button{width:32px;height:32px;}.podo-datepicker__nav-button i{font-size:18px;}.podo-datepicker__calendar-cell{height:32px;}.podo-datepicker__actions{flex-wrap:wrap;gap:var(--podo-spacing-2);}.podo-datepicker__action-button{padding:var(--podo-spacing-2) var(--podo-spacing-3);}.podo-datepicker__action-button i{width:16px;height:16px;font-size:16px;}}
+/*! Podo UI DatePicker CSS v1.0.14 | MIT License | https://podoui.com */
+.podo-datepicker{--podo-bg-block:var(--color-bg-block,#ffffff);--podo-bg-modal:var(--color-bg-modal,#ffffff);--podo-bg-disabled:var(--color-bg-disabled,#f5f5f5);--podo-border:var(--color-border,#e0e0e0);--podo-border-hover:var(--color-border-hover,#bdbdbd);--podo-text-body:var(--color-text-body,#212121);--podo-text-sub:var(--color-text-sub,#757575);--podo-text-disabled:var(--color-text-disabled,#9e9e9e);--podo-primary:var(--color-primary,#7c3aed);--podo-primary-hover:var(--color-primary-hover,#6d28d9);--podo-primary-fill:var(--color-primary-fill,rgba(124,58,237,0.1));--podo-primary-reverse:var(--color-primary-reverse,#ffffff);--podo-default:var(--color-default,#f5f5f5);--podo-default-fill:var(--color-default-fill,#eeeeee);--podo-default-hover:var(--color-default-hover,#e0e0e0);--podo-default-reverse:var(--color-default-reverse,#212121);--podo-radius-sm:var(--radius-2,4px);--podo-radius-md:var(--radius-3,8px);--podo-spacing-1:var(--spacing-1,4px);--podo-spacing-2:var(--spacing-2,8px);--podo-spacing-3:var(--spacing-3,12px);--podo-spacing-4:var(--spacing-4,16px);--podo-spacing-5:var(--spacing-5,20px);--podo-font-size-sm:13px;--podo-font-size-md:14px;--podo-font-size-lg:16px;}.podo-datepicker{position:relative;display:inline-block;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-size:var(--podo-font-size-md);line-height:1.5;}.podo-datepicker__input{display:flex;align-items:center;gap:var(--podo-spacing-2);padding:var(--podo-spacing-3) var(--podo-spacing-4);background:var(--podo-bg-block);border:1px solid var(--podo-border);border-radius:var(--podo-radius-md);cursor:pointer;transition:border-color 0.2s;}.podo-datepicker__input:hover{border-color:var(--podo-border-hover);}.podo-datepicker__input--active{border-color:var(--podo-primary);}.podo-datepicker__input--disabled{background:var(--podo-bg-disabled);cursor:not-allowed;opacity:0.6;}.podo-datepicker__input-content{flex:1;display:flex;align-items:center;gap:var(--podo-spacing-2);}.podo-datepicker__part{display:flex;flex:1;align-items:center;justify-content:center;padding:0 var(--podo-spacing-2);background:none;border:none;border-radius:var(--podo-radius-sm);cursor:pointer;transition:background 0.2s;color:var(--podo-text-body);white-space:nowrap;font-variant-numeric:tabular-nums;font-family:inherit;font-size:var(--podo-font-size-md);}.podo-datepicker__part:hover{background:var(--podo-default);}.podo-datepicker__part--active{background:var(--podo-default-fill);}.podo-datepicker__part--placeholder{color:var(--podo-text-disabled);}.podo-datepicker__separator{color:var(--podo-text-body);padding:0 var(--podo-spacing-1);font-size:var(--podo-font-size-md);}.podo-datepicker__time-section{display:flex;align-items:center;justify-content:center;gap:0;}.podo-datepicker__time-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:none;border:none;padding:0 var(--podo-spacing-2);flex:1;text-align:center;text-align-last:center;color:var(--podo-text-body);cursor:pointer;border-radius:var(--podo-radius-sm);transition:background 0.2s;font-variant-numeric:tabular-nums;font-family:inherit;font-size:var(--podo-font-size-md);}.podo-datepicker__time-select:hover{background:var(--podo-default);}.podo-datepicker__time-select:focus{outline:none;background:var(--podo-default-fill);}.podo-datepicker__time-select--placeholder{color:var(--podo-text-disabled);}.podo-datepicker__time-select:disabled{cursor:not-allowed;opacity:0.6;}.podo-datepicker__time-separator{color:var(--podo-text-body);font-size:var(--podo-font-size-md);}.podo-datepicker__icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;font-size:20px;line-height:1;color:var(--podo-text-sub);flex-shrink:0;}.podo-datepicker__input--with-nav{padding:0;}.podo-datepicker__nav-arrow{display:flex;align-items:center;justify-content:center;width:40px;min-height:100%;background:none;border:none;cursor:pointer;transition:background 0.2s;flex-shrink:0;}.podo-datepicker__nav-arrow:hover:not(:disabled){background:var(--podo-default-hover);}.podo-datepicker__nav-arrow:disabled{opacity:0.4;cursor:not-allowed;}.podo-datepicker__nav-arrow i{font-size:16px;color:var(--podo-text-body);}.podo-datepicker__nav-arrow--left{border-right:1px solid var(--podo-border);border-radius:var(--podo-radius-md) 0 0 var(--podo-radius-md);}.podo-datepicker__nav-arrow--right{border-left:1px solid var(--podo-border);border-radius:0 var(--podo-radius-md) var(--podo-radius-md) 0;}.podo-datepicker__preset-label{font-size:var(--podo-font-size-md);color:var(--podo-text-body);white-space:nowrap;flex-shrink:0;padding-left:var(--podo-spacing-3);font-weight:600;}.podo-datepicker__dropdown{position:absolute;top:calc(100%+var(--podo-spacing-2));left:0;z-index:1000;display:flex;flex-direction:column;gap:10px;padding:var(--podo-spacing-5);background:var(--podo-bg-modal);border-radius:var(--podo-radius-md);box-shadow:0 6px 18px -3px rgba(50,50,50,0.12);}.podo-datepicker__dropdown--right{left:auto;right:0;}.podo-datepicker__calendar{display:flex;flex-direction:column;gap:10px;min-width:280px;max-width:100%;}.podo-datepicker__calendar-nav{display:flex;align-items:center;gap:var(--podo-spacing-4);height:40px;}.podo-datepicker__nav-button{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--podo-default);border:none;border-radius:var(--podo-radius-md);cursor:pointer;transition:background 0.2s;}.podo-datepicker__nav-button:hover{background:var(--podo-default-hover);}.podo-datepicker__nav-button:disabled{opacity:0.5;cursor:not-allowed;}.podo-datepicker__nav-button i{font-size:20px;color:var(--podo-text-body);}.podo-datepicker__nav-title{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--podo-spacing-1);}.podo-datepicker__nav-select-wrapper{position:relative;display:flex;align-items:center;}.podo-datepicker__nav-select-wrapper::after{content:'';position:absolute;right:var(--podo-spacing-2);top:50%;transform:translateY(-50%);width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--podo-text-body);pointer-events:none;}.podo-datepicker__nav-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:none;border:none;padding:var(--podo-spacing-2) 24px var(--podo-spacing-2) var(--podo-spacing-2);border-radius:var(--podo-radius-sm);cursor:pointer;transition:background 0.2s;color:var(--podo-text-body);font-family:inherit;font-size:var(--podo-font-size-lg);font-weight:600;}.podo-datepicker__nav-select:hover{background:var(--podo-default);}.podo-datepicker__nav-select:focus{outline:none;background:var(--podo-default-fill);}.podo-datepicker__calendar-grid{display:flex;flex-direction:column;gap:var(--podo-spacing-2);padding-top:var(--podo-spacing-3);border-top:1px solid var(--podo-border);}.podo-datepicker__calendar-row{display:flex;width:100%;min-width:0;}.podo-datepicker__calendar-cell{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;height:40px;font-size:var(--podo-font-size-md);background:none;border:none;border-radius:var(--podo-radius-md);cursor:pointer;transition:background 0.2s;font-family:inherit;color:var(--podo-text-body);}.podo-datepicker__calendar-cell--header{color:var(--podo-text-sub);cursor:default;font-weight:500;}.podo-datepicker__calendar-cell--other{color:var(--podo-text-disabled);}.podo-datepicker__calendar-cell--today{font-weight:600;color:var(--podo-primary);}.podo-datepicker__calendar-cell--selected{background:var(--podo-primary);color:var(--podo-primary-reverse);font-weight:600;}.podo-datepicker__calendar-cell--in-range{background:var(--podo-primary-fill);border-radius:0;}.podo-datepicker__calendar-cell--range-start{background:var(--podo-primary);color:var(--podo-primary-reverse);font-weight:600;border-radius:var(--podo-radius-md);}.podo-datepicker__calendar-cell--range-end{background:var(--podo-primary);color:var(--podo-primary-reverse);font-weight:600;border-radius:var(--podo-radius-md);}.podo-datepicker__calendar-cell--disabled{color:var(--podo-text-disabled);background:var(--podo-default);border:none;border-radius:0;outline:none;cursor:not-allowed;}.podo-datepicker__calendar-cell--disabled:hover{background:var(--podo-default);}.podo-datepicker__calendar-cell:not(.podo-datepicker__calendar-cell--header):not(.podo-datepicker__calendar-cell--selected):not(.podo-datepicker__calendar-cell--disabled):not(.podo-datepicker__calendar-cell--range-start):not(.podo-datepicker__calendar-cell--range-end):not(.podo-datepicker__calendar-cell--in-range):hover{background:var(--podo-default);}.podo-datepicker__period-calendars{display:flex;gap:var(--podo-spacing-4);}.podo-datepicker__period-calendar-left,.podo-datepicker__period-calendar-right{flex:1;}.podo-datepicker__actions{display:flex;align-items:center;justify-content:space-between;gap:var(--podo-spacing-3);padding-top:var(--podo-spacing-3);border-top:1px solid var(--podo-border);}.podo-datepicker__period-text{font-size:var(--podo-font-size-md);color:var(--podo-primary);flex:1;}.podo-datepicker__action-buttons{display:flex;gap:var(--podo-spacing-3);flex-shrink:0;}.podo-datepicker__action-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--podo-spacing-2);padding:var(--podo-spacing-3) var(--podo-spacing-4);border-radius:var(--podo-radius-md);cursor:pointer;transition:background 0.2s;white-space:nowrap;font-family:inherit;font-size:var(--podo-font-size-md);}.podo-datepicker__action-button i{display:flex;align-items:center;justify-content:center;width:18px;height:18px;font-size:18px;line-height:1;}.podo-datepicker__action-button--reset{background:var(--podo-default-fill);border:1px solid var(--podo-border);color:var(--podo-default-reverse);}.podo-datepicker__action-button--reset:hover{background:var(--podo-default-hover);}.podo-datepicker__action-button--apply{background:var(--podo-primary);border:none;color:var(--podo-primary-reverse);}.podo-datepicker__action-button--apply:hover{background:var(--podo-primary-hover);}.podo-datepicker__dropdown-body{display:flex;gap:var(--podo-spacing-4);min-width:0;}.podo-datepicker__quick-select-panel{display:flex;flex-direction:column;gap:var(--podo-spacing-1);min-width:100px;padding-right:var(--podo-spacing-4);border-right:1px solid var(--podo-border);flex-shrink:0;}.podo-datepicker__quick-select-item{display:flex;align-items:center;padding:var(--podo-spacing-2) var(--podo-spacing-3);background:none;border:none;border-radius:var(--podo-radius-sm);cursor:pointer;transition:background 0.2s,color 0.2s;color:var(--podo-text-body);white-space:nowrap;text-align:left;font-size:14px;line-height:1.5;}.podo-datepicker__quick-select-item:hover:not(.podo-datepicker__quick-select-item--disabled):not(.podo-datepicker__quick-select-item--active){background:var(--podo-default-hover);}.podo-datepicker__quick-select-item--active{color:var(--podo-primary);background:var(--podo-primary-fill,rgba(124,58,237,0.08));font-weight:600;}.podo-datepicker__quick-select-item--disabled{color:var(--podo-text-disabled,#adb5bd);cursor:not-allowed;}@media screen and (max-width:600px){.podo-datepicker__period-calendar-right{display:none;}.podo-datepicker__quick-select-panel{min-width:80px;padding-right:var(--podo-spacing-3);}.podo-datepicker__quick-select-item{font-size:13px;padding:var(--podo-spacing-2);}}@media screen and (max-width:480px){.podo-datepicker__dropdown{padding:var(--podo-spacing-4);gap:var(--podo-spacing-3);}.podo-datepicker__calendar{min-width:260px;gap:var(--podo-spacing-3);}.podo-datepicker__calendar-nav{height:36px;gap:var(--podo-spacing-3);}.podo-datepicker__nav-button{width:36px;height:36px;}.podo-datepicker__calendar-cell{height:36px;}}@media screen and (max-width:400px){.podo-datepicker__dropdown{padding:var(--podo-spacing-3);gap:var(--podo-spacing-2);max-width:calc(100vw - var(--podo-spacing-4));box-sizing:border-box;}.podo-datepicker__calendar{min-width:0;width:100%;gap:var(--podo-spacing-2);}.podo-datepicker__calendar-nav{height:32px;gap:var(--podo-spacing-2);}.podo-datepicker__nav-button{width:32px;height:32px;}.podo-datepicker__nav-button i{font-size:18px;}.podo-datepicker__calendar-cell{height:32px;}.podo-datepicker__actions{flex-wrap:wrap;gap:var(--podo-spacing-2);}.podo-datepicker__action-button{padding:var(--podo-spacing-2) var(--podo-spacing-3);}.podo-datepicker__action-button i{width:16px;height:16px;font-size:16px;}.podo-datepicker__quick-select-panel{display:none;}.podo-datepicker__nav-arrow{width:32px;}.podo-datepicker__nav-arrow i{font-size:14px;}.podo-datepicker__preset-label{display:none;}}