/*
 * Air Datepicker — สไตล์ shadcn/Radix popover (โทนเดียวกับ dropdown.css)
 * popover มน ขอบบาง เงานุ่ม / วันที่เป็นปุ่มกลม hover เทาอ่อน / วันที่เลือก = primary
 * โหลดต่อจาก app.css
 */

/* ===== กล่อง popover ===== */
.datepicker {
    padding: 8px !important;
    border: 1px solid #e4e4e7 !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow:
        0 12px 28px rgba(16, 24, 40, .12),
        0 2px 6px rgba(16, 24, 40, .06) !important;
    color: #18181b !important;
    font-family: 'Noto Sans Thai', sans-serif !important;
}

/* ซ่อนหัวลูกศร pointer ให้ดูสะอาดแบบ shadcn */
.datepicker--pointer {
    display: none !important;
}

/* ===== แถบนำทาง เดือน/ปี ===== */
.datepicker--nav {
    padding: 2px 4px 8px !important;
    border-bottom: 1px solid #f1f1f4 !important;
    margin-bottom: 6px;
}

.datepicker--nav-title {
    border-radius: 8px;
    color: #18181b !important;
    font-size: 14px;
    font-weight: 600;
    transition: background-color .12s ease;
}

.datepicker--nav-title:hover {
    background: #f4f4f5 !important;
}

.datepicker--nav-title i {
    color: #71717a !important;
    font-style: normal;
}

.datepicker--nav-action {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: transparent !important;
    transition: background-color .12s ease;
}

.datepicker--nav-action:hover {
    background: #f4f4f5 !important;
}

.datepicker--nav-action path {
    stroke: #52525b !important;
}

.datepicker--nav-action.-disabled- {
    opacity: .4;
}

/* ===== ชื่อวัน (อา จ อ ...) ===== */
.datepicker--day-name {
    color: #a1a1aa !important;
    font-size: 12px;
    font-weight: 600;
    text-transform: none;
}

/* ===== ช่องวันที่ ===== */
.datepicker--cell {
    border-radius: 8px !important;
    font-size: 13px;
    transition: background-color .12s ease, color .12s ease;
}

.datepicker--cell.-focus- {
    background: #f4f4f5 !important;
    color: #18181b !important;
}

/* วันนี้ */
.datepicker--cell.-current- {
    color: #1d4ed8 !important;
    font-weight: 700;
}

.datepicker--cell.-current-.-focus- {
    color: #1d4ed8 !important;
    background: #eff6ff !important;
}

/* วันที่เลือก = primary */
.datepicker--cell.-selected-,
.datepicker--cell.-selected-.-current-,
.datepicker--cell.-selected-.-focus- {
    background: var(--bento-primary, #1877f2) !important;
    color: #fff !important;
    font-weight: 600;
    box-shadow: none !important;
}

/* ช่วง (range) */
.datepicker--cell.-in-range- {
    background: rgba(24, 119, 242, .10) !important;
    color: #18181b !important;
    border-radius: 0 !important;
}

.datepicker--cell.-range-from- {
    border-radius: 8px 0 0 8px !important;
    border: 0 !important;
    background: rgba(24, 119, 242, .18) !important;
}

.datepicker--cell.-range-to- {
    border-radius: 0 8px 8px 0 !important;
    border: 0 !important;
    background: rgba(24, 119, 242, .18) !important;
}

.datepicker--cell.-disabled- {
    color: #d4d4d8 !important;
}

/* เดือน/ปี (มุมมองเลือกเดือน-ปี) */
.datepicker--cell-month,
.datepicker--cell-year {
    border-radius: 8px !important;
}

/* ===== ปุ่ม วันนี้ / ล้าง ===== */
.datepicker--buttons {
    padding: 8px 4px 2px !important;
    border-top: 1px solid #f1f1f4 !important;
    margin-top: 6px;
}

.datepicker--button {
    height: 34px;
    border-radius: 8px;
    color: #3f3f46 !important;
    font-size: 13px;
    font-weight: 600;
    transition: background-color .12s ease, color .12s ease;
}

.datepicker--button:hover {
    background: #f4f4f5 !important;
    color: #18181b !important;
}

/* ===== เวลา (ถ้ามี) ===== */
.datepicker--time {
    border-top: 1px solid #f1f1f4 !important;
}

.datepicker--time-current-hours,
.datepicker--time-current-minutes {
    font-weight: 600;
}

.datepicker--time-current-hours.-focus-::after,
.datepicker--time-current-minutes.-focus-::after {
    background: #eff6ff !important;
}

.datepicker--time-row input[type='range']::-webkit-slider-thumb {
    background: var(--bento-primary, #1877f2) !important;
}