/* ==================== V14 bootstrap-datepicker 統一樣式 ==================== */
/* JW 2026/02/10 對齊 V14_datepicker.png 設計稿
   ⚠️ 嚴禁在 <tr> 上用 display:flex — 會破壞 table column layout
   ⚠️ 用 position:absolute 來重排箭頭，不動 display
*/

/* === 容器 === */
.datepicker-dropdown {
    z-index: 2050 !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12) !important;
    background: #fff !important;
    /* JW 2026/02/10 設計稿視覺偏寬；避免 day view 太窄 */
    width: 360px;
    max-width: calc(100vw - 32px);
    /* JW 2026/03/06 Safari/WebKit 不支援 table-internal element (thead/tr) 的 position:relative
       作為 containing block，因此統一改以 .datepicker-dropdown 本身（bootstrap 已設 position:absolute）
       作為箭頭的定位基準。34px = picker padding(12) + nav row 高度的一半(22) */
    --v14-dp-days-nav-center-y: 34px;
}

/* dropdown caret（三角指標）隱藏 */
.datepicker-dropdown::before,
.datepicker-dropdown::after {
    display: none !important;
}

/* === 全域去線條 === */
.datepicker-dropdown table,
.datepicker-dropdown table thead,
.datepicker-dropdown table thead tr,
.datepicker-dropdown table thead tr th,
.datepicker-dropdown table tbody,
.datepicker-dropdown table tbody tr,
.datepicker-dropdown table tbody td,
.datepicker-dropdown table tfoot,
.datepicker-dropdown table tfoot tr,
.datepicker-dropdown table tfoot th {
    border: 0 none !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    outline: none !important;
}

.datepicker-dropdown table {
    width: 100% !important;
    margin: 0 !important;
    table-layout: fixed !important;
}

/* JW 2026/03/03 僅鎖定 datepicker 主要導覽列，避免把隱藏 title 列撐開 */
.datepicker-dropdown .datepicker-days table thead tr:nth-child(2),
.datepicker-dropdown .datepicker-days table thead tr:nth-child(3),
.datepicker-dropdown .datepicker-months table thead tr:nth-child(2),
.datepicker-dropdown .datepicker-years table thead tr:nth-child(2),
.datepicker-dropdown .datepicker-decades table thead tr:nth-child(2) {
    display: table-row !important;
}

.datepicker-dropdown .datepicker-days table thead tr:nth-child(2) th,
.datepicker-dropdown .datepicker-days table thead tr:nth-child(3) th,
.datepicker-dropdown .datepicker-months table thead tr:nth-child(2) th,
.datepicker-dropdown .datepicker-years table thead tr:nth-child(2) th,
.datepicker-dropdown .datepicker-decades table thead tr:nth-child(2) th {
    display: table-cell !important;
    vertical-align: middle !important;
}

/* === 通用導覽列樣式 === */
.datepicker-dropdown table thead tr:nth-child(2) th {
    background: transparent !important;
    padding: 4px !important;
}

.datepicker-dropdown table thead tr:nth-child(2) th.datepicker-switch {
    font-weight: 700 !important;
    font-size: 20px !important;
    color: #000 !important;
    background: transparent !important;
    cursor: pointer;
    height: 32px !important;
    line-height: 32px !important;
}

.datepicker-dropdown table thead tr:nth-child(2) th.prev,
.datepicker-dropdown table thead tr:nth-child(2) th.next {
    width: 40px !important;
    height: 40px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    color: #999 !important;
    background: transparent !important;
    border-radius: 50% !important;
    cursor: pointer;
    padding: 0 !important;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.datepicker-dropdown table thead tr:nth-child(2) th.prev:hover,
.datepicker-dropdown table thead tr:nth-child(2) th.next:hover {
    background: #f5f5f5 !important;
}

.datepicker-dropdown table thead tr:nth-child(2) th.disabled,
.datepicker-dropdown table thead tr:nth-child(2) th.disabled:hover {
    color: #ddd !important;
    cursor: not-allowed !important;
    background: transparent !important;
}

/* ─── 日期視圖 (datepicker-days)：標題靠左，箭頭靠右 ─── */
/* JW 2026/03/06 定位容器改為 .datepicker-dropdown（bootstrap-datepicker 已設 position:absolute）
   不用 thead，因 Safari 對 table-internal element 的 position:relative 不建立 containing block */
.datepicker-dropdown .datepicker-days table thead tr:nth-child(2) {
    height: 44px !important;
}

.datepicker-dropdown .datepicker-days table thead tr:nth-child(2) th.datepicker-switch {
    text-align: left !important;
    padding-left: 4px !important;
}

.datepicker-dropdown .datepicker-days table thead tr:nth-child(2) th.prev {
    position: absolute !important;
    right: 44px !important;
    top: var(--v14-dp-days-nav-center-y) !important;
    transform: translateY(-50%) !important;
    z-index: 1;
}

.datepicker-dropdown .datepicker-days table thead tr:nth-child(2) th.next {
    position: absolute !important;
    right: 4px !important;
    top: var(--v14-dp-days-nav-center-y) !important;
    transform: translateY(-50%) !important;
    z-index: 1;
}

/* ─── 星期行 ─── */
.datepicker-dropdown .datepicker-days table thead tr:nth-child(3) th.dow {
    color: #999 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    padding: 4px 0 !important;
    text-align: center !important;
    background: transparent !important;
}

/* ─── 日期格子 ─── */
.datepicker-dropdown .datepicker-days table tbody td {
    text-align: center !important;
    font-size: 14px !important;
    color: #333 !important;
    background: transparent !important;
    border-radius: 50% !important;
    /* JW 2026/02/10 強制寬高一致，避免 active 變橢圓 */
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
    padding: 0 !important;
    text-shadow: none !important;
}

.datepicker-dropdown .datepicker-days table tbody td:hover {
    background: #f5f5f5 !important;
}

.datepicker-dropdown .datepicker-days table tbody td.old,
.datepicker-dropdown .datepicker-days table tbody td.new {
    color: #ccc !important;
}

.datepicker-dropdown .datepicker-days table tbody td.disabled,
.datepicker-dropdown .datepicker-days table tbody td.disabled:hover {
    color: #ddd !important;
    background: transparent !important;
    cursor: not-allowed !important;
}

/* Active 日期 */
.datepicker-dropdown .datepicker-days table tbody td.active,
.datepicker-dropdown .datepicker-days table tbody td.active:hover,
.datepicker-dropdown .datepicker-days table tbody td.active.today,
.datepicker-dropdown .datepicker-days table tbody td.active.today:hover {
    background: linear-gradient(to bottom, #ff769d, #ff3c74) !important;
    color: #fff !important;
    border-radius: 50% !important;
}

/* Today（非 active）：淡粉底 */
.datepicker-dropdown .datepicker-days table tbody td.today:not(.active) {
    background: #fff0f6 !important;
    color: #ff3c74 !important;
    border-radius: 50% !important;
}

/* ─── 月 / 年 / decade 視圖 ─── */
/* 箭頭保持最左最右（設計稿原樣），標題置中 */
.datepicker-dropdown .datepicker-months table thead tr:nth-child(2) th.datepicker-switch,
.datepicker-dropdown .datepicker-years table thead tr:nth-child(2) th.datepicker-switch,
.datepicker-dropdown .datepicker-decades table thead tr:nth-child(2) th.datepicker-switch {
    text-align: center !important;
}

/* JW 2026/03/06 月/年/十年視圖箭頭光學校正：整體上提 2px */
.datepicker-dropdown .datepicker-months table thead tr:nth-child(2) th.prev,
.datepicker-dropdown .datepicker-months table thead tr:nth-child(2) th.next,
.datepicker-dropdown .datepicker-years table thead tr:nth-child(2) th.prev,
.datepicker-dropdown .datepicker-years table thead tr:nth-child(2) th.next,
.datepicker-dropdown .datepicker-decades table thead tr:nth-child(2) th.prev,
.datepicker-dropdown .datepicker-decades table thead tr:nth-child(2) th.next {
    position: relative !important;
    top: -2px !important;
}

.datepicker-dropdown .datepicker-months table tbody span,
.datepicker-dropdown .datepicker-years table tbody span,
.datepicker-dropdown .datepicker-decades table tbody span {
    /* JW 2026/02/10 三欄均分 + 置中 */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: calc(33.333% - 8px) !important;
    border-radius: 999px !important;
    height: 44px !important;
    line-height: 44px !important;
    margin: 4px !important;
    background: transparent !important;
    color: #333 !important;
    border: 0 none !important;
}

/* JW 2026/02/10 month/year grid 讓每列 3 個均分且不偏左 */
.datepicker-dropdown .datepicker-months table tbody td,
.datepicker-dropdown .datepicker-years table tbody td,
.datepicker-dropdown .datepicker-decades table tbody td {
    text-align: center !important;
    padding: 0 !important;
}

.datepicker-dropdown .datepicker-months table tbody span:hover,
.datepicker-dropdown .datepicker-years table tbody span:hover,
.datepicker-dropdown .datepicker-decades table tbody span:hover {
    background: #f5f5f5 !important;
}

.datepicker-dropdown .datepicker-months table tbody span.active,
.datepicker-dropdown .datepicker-months table tbody span.active:hover,
.datepicker-dropdown .datepicker-years table tbody span.active,
.datepicker-dropdown .datepicker-years table tbody span.active:hover,
.datepicker-dropdown .datepicker-decades table tbody span.active,
.datepicker-dropdown .datepicker-decades table tbody span.active:hover {
    background: linear-gradient(to bottom, #ff769d, #ff3c74) !important;
    color: #fff !important;
    border-radius: 999px !important;
}

.datepicker-dropdown .datepicker-months table tbody span.disabled,
.datepicker-dropdown .datepicker-years table tbody span.disabled,
.datepicker-dropdown .datepicker-decades table tbody span.disabled {
    color: #ddd !important;
    cursor: not-allowed !important;
}

/* === 取消按鈕：用原生 clearBtn，樣式化成粉紅膠囊 === */
.datepicker-dropdown table tfoot th.clear {
    background: transparent !important;
    padding: 8px 0 4px !important;
}

.datepicker-dropdown table tfoot th.clear {
    font-size: 0 !important;
}

.datepicker-dropdown table tfoot th.clear::after {
    content: '取消';
    display: inline-block;
    padding: 6px 32px;
    border: 1px solid #ff3c74;
    border-radius: 20px;
    background: transparent;
    color: #ff3c74;
    font-size: 14px;
    cursor: pointer;
    line-height: 1;
}

.datepicker-dropdown table tfoot th.clear:hover::after {
    background: #fff0f6;
}

/* today 按鈕隱藏（不需要） */
.datepicker-dropdown table tfoot th.today {
    display: none !important;
}

/* === iPhone focus zoom 防護：只套用在 datepicker 輸入欄位 === */
@media (max-width: 767px) {
    input.v14-datepicker-mobile-input,
    .form-control.v14-datepicker-mobile-input,
    .form-input.v14-datepicker-mobile-input {
        font-size: 16px !important;
    }

    .datepicker-dropdown.v14-datepicker-mobile-centered {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
    }
}