/* ==========================================================================
   LongPT · 日期时间选择器美化（jquery-datetimepicker / xdsoft）
   --------------------------------------------------------------------------
   用途：把种子发布页（upload.php / edit.php）等处的 datetimepicker 弹层
         改造成与设计系统一致的现代外观。

   为什么独立成共享层：
     该选择器由 include/functions.php 的 datetimepicker_input() 输出，
     在 stdhead() 之后才通过 Nexus::css(..., 'footer', true) 加载
     → 厂商 CSS 的「源顺序」在本文件之后！同特异性下厂商样式会赢。
     因此本文件的每条声明都必须带 !important，
     或者用比厂商更高的特异性（这里两者并用做双保险）。

   选择器策略：
     厂商的规则形如 .xdsoft_datetimepicker .xdsoft_calendar td
     = (0,2,1)。本文件统一加一层 .xdsoft_datetimepicker 前缀（(0,3,1)），
     再加 !important —— 既能压过厂商，也不会误伤页面其他表格。

   主题无关性：
     通篇只用 --nx-* 语义令牌，三主题（Cyber / Nebula / Kawaii）与
     明暗模式（data-nx-theme）自动适配，无需分支。
   ========================================================================== */

/* ==========================================================================
   1. 弹层容器
   ========================================================================== */

.xdsoft_datetimepicker.xdsoft_datetimepicker {
    padding: 12px !important;
    background: var(--nx-surface) !important;
    color: var(--nx-text) !important;
    border: var(--nx-border-thin) solid var(--nx-border) !important;
    border-radius: var(--nx-radius-lg) !important;
    box-shadow: var(--nx-shadow-xl) !important;
    font-family: inherit !important;
    /* 让内部圆角不被子元素方角顶出来 */
    overflow: hidden !important;
    z-index: var(--nx-z-popover, 1100) !important;
}

/* ⚠️ 厂商靠 float:left + 写死宽度拼两栏：日期区 224px / 时间区 58px / 各 8px 外距。
   日期区里 monthpicker 变 flex 后需要约 240px，224px 会把右侧箭头挤出去。
   稍放宽到 240px 即可（20px 箭头 + 两个标签 + gap 刚好放得下）。
   ⚠️⚠️ 千万不要把 float 改成 none —— float 在这里是「两栏并排」的唯一机制，
   去掉后时间列会掉到日历下方（实测过）。只放宽宽度即可。 */
.xdsoft_datetimepicker.xdsoft_datetimepicker .xdsoft_datepicker {
    width: 240px !important;
}

.xdsoft_datetimepicker.xdsoft_datetimepicker.xdsoft_showweeks .xdsoft_datepicker {
    width: 272px !important;
}

.xdsoft_datetimepicker.xdsoft_datetimepicker .xdsoft_timepicker {
    width: 64px !important;
    margin-left: 10px !important;
}

/* 厂商给 .xdsoft_datetimepicker iframe 固定了 75x210 的「垫片」，
   是给老 IE 遮 select 用的，现代浏览器下只会在弹层里留一块空白。
   保持它存在（JS 依赖其位移计算）但缩小到不可见。 */
.xdsoft_datetimepicker.xdsoft_datetimepicker > iframe {
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
}

/* 内部所有元素继承主题文字色，避免厂商写死的 #333/#666 */
.xdsoft_datetimepicker.xdsoft_datetimepicker * {
    font-family: inherit !important;
}

/* ==========================================================================
   2. 顶部月份/年份栏
   ========================================================================== */

/* 真实 DOM（来自 jquery.datetimepicker.js）：
     <div class="xdsoft_monthpicker">
       <button class="xdsoft_prev">
       <button class="xdsoft_today_button">
       <div class="xdsoft_label xdsoft_month"><span></span><i></i><div class="xdsoft_select…"></div></div>
       <div class="xdsoft_label xdsoft_year"><span></span><i></i><div class="xdsoft_select…"></div></div>
       <button class="xdsoft_next">
     </div>
   厂商原布局 = float:left/right + 写死 width:182px。
   改成 flex 后可以让左右箭头自动贴边；但 ⚠️ .xdsoft_select 是 .xdsoft_label 的
   子元素，label 一旦变成 flex 容器，下拉面板会被当成 flex item 参与排版
   → 必须给 .xdsoft_select 保持 position:absolute 并 absolute 定位。 */
.xdsoft_datetimepicker.xdsoft_datetimepicker .xdsoft_monthpicker {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    padding: 0 0 10px !important;
    text-align: center !important;
    /* 20px 的箭头按钮两侧各留 2px，视觉上更透气 */
    box-sizing: border-box !important;
}

/* 月份、年份的可点击标签：做成胶囊按钮的观感 */
.xdsoft_datetimepicker.xdsoft_datetimepicker .xdsoft_label {
    display: inline-flex !important;
    align-items: center !important;
    float: none !important;
    width: auto !important;
    flex: 0 1 auto !important;
    padding: 5px 10px !important;
    margin: 0 !important;
    font-size: var(--nx-font-sm, 13px) !important;
    font-weight: var(--nx-weight-semibold, 600) !important;
    line-height: 1.4 !important;
    color: var(--nx-text) !important;
    background: transparent !important;
    border-radius: var(--nx-radius-sm) !important;
    cursor: pointer !important;
    transition: background-color .15s ease, color .15s ease !important;
}

.xdsoft_datetimepicker.xdsoft_datetimepicker .xdsoft_label:hover {
    background: var(--nx-surface-hover) !important;
}

.xdsoft_datetimepicker.xdsoft_datetimepicker .xdsoft_label > .xdsoft_month,
.xdsoft_datetimepicker.xdsoft_datetimepicker .xdsoft_label > .xdsoft_year {
    display: inline !important;
    color: inherit !important;
    font-weight: inherit !important;
    text-align: center !important;
}

/* 标签右侧那个下拉小三角（雪碧图，9x20 由厂商给定，这里只保证它居中） */
.xdsoft_datetimepicker.xdsoft_datetimepicker .xdsoft_label > i {
    display: inline-block !important;
    flex: 0 0 auto !important;
    min-width: 9px !important;
    height: 20px !important;
    margin-left: 2px !important;
    opacity: .55 !important;
}

/* ---- 年月下拉面板 ----
   ⚠️ 必须保持 absolute：label 是 flex 容器时，非 absolute 的子元素会被
   当成 flex item 挤在标签里（面板会「黏」在标签右侧而不是浮在下方）。 */
.xdsoft_datetimepicker.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
    display: none;
    background: var(--nx-surface) !important;
    border: var(--nx-border-thin) solid var(--nx-border) !important;
    border-radius: var(--nx-radius-md) !important;
    box-shadow: var(--nx-shadow-lg) !important;
    padding: 4px !important;
    margin-top: 4px !important;
    max-height: 200px !important;
    z-index: 1200 !important;
}

.xdsoft_datetimepicker.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option {
    padding: 6px 14px !important;
    color: var(--nx-text) !important;
    font-size: var(--nx-font-sm, 13px) !important;
    border-radius: var(--nx-radius-xs) !important;
    transition: background-color .12s ease, color .12s ease !important;
}

.xdsoft_datetimepicker.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option:hover {
    background: var(--nx-primary-soft) !important;
    color: var(--nx-primary-strong) !important;
}

.xdsoft_datetimepicker.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option.xdsoft_current {
    background: var(--nx-primary) !important;
    color: var(--nx-text-inverse) !important;
    font-weight: var(--nx-weight-semibold, 600) !important;
    box-shadow: none !important;
}

/* ---- 左右翻月 / 回到今天 ---- */
/* ---- 左右翻月 / 回到今天 ----
   ⚠️⚠️ 这些按钮是「纯雪碧图按钮」：没有文字内容，靠 background-position 偏移
   显示图标。厂商给的基准尺寸是 **width:20px / height:30px / overflow:hidden**
   （雪碧图帧距正好 20px）：prev=-20px 0 / next=0 0 / today=-70px 0 / 月年小三角=-92px -19px。
   ⇒ 绝不能改 width！实测把 width 调成 28px 会让「下一帧图标」从右边漏出来
     （next 按钮右侧多出半个箭头的鬼影）。想扩大点击区只能靠 margin/gap，
     或者保持 20px 用 padding 撑开「透明」热区（padding 不参与 background 绘制）。
   这里保持 20x30 原尺寸 + 圆角悬停底。 */
.xdsoft_datetimepicker.xdsoft_datetimepicker .xdsoft_monthpicker > .xdsoft_prev,
.xdsoft_datetimepicker.xdsoft_datetimepicker .xdsoft_monthpicker > .xdsoft_next,
.xdsoft_datetimepicker.xdsoft_datetimepicker .xdsoft_monthpicker > .xdsoft_today_button {
    display: block !important;
    float: none !important;
    flex: 0 0 auto !important;
    width: 20px !important;
    height: 30px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: .8 !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    border: none !important;
    cursor: pointer !important;
    /* ⚠️ 不要加 border-radius / overflow:hidden / box-shadow：
       这三个属性 + filter 会让按钮自行建立绘制层，把雪碧图的
       「浅色底」一起反色，出现一块常驻的深色圆角方块（实测）。
       这里只保留厂商的 overflow:hidden（20px 帧距需要它裁掉邻帧）。 */
    overflow: hidden !important;
    text-indent: 100% !important;
    white-space: nowrap !important;
    transition: opacity .15s ease !important;
}

.xdsoft_datetimepicker.xdsoft_datetimepicker .xdsoft_monthpicker > .xdsoft_prev:hover,
.xdsoft_datetimepicker.xdsoft_datetimepicker .xdsoft_monthpicker > .xdsoft_next:hover,
.xdsoft_datetimepicker.xdsoft_datetimepicker .xdsoft_monthpicker > .xdsoft_today_button:hover {
    opacity: 1 !important;
}

/* 雪碧图图标在深色模式下是深色图 → 用滤镜反色保证可见。
   ⚠️ 只对「图标类」元素生效，且用 --nx-icon-filter 令牌（浅色档为 none）。 */
.xdsoft_datetimepicker.xdsoft_datetimepicker .xdsoft_prev,
.xdsoft_datetimepicker.xdsoft_datetimepicker .xdsoft_next,
.xdsoft_datetimepicker.xdsoft_datetimepicker .xdsoft_today_button,
.xdsoft_datetimepicker.xdsoft_datetimepicker .xdsoft_label > i {
    filter: var(--nx-icon-filter, none) !important;
}

/* ==========================================================================
   3. 日历网格
   ========================================================================== */

.xdsoft_datetimepicker.xdsoft_datetimepicker .xdsoft_calendar {
    clear: both !important;
}

.xdsoft_datetimepicker.xdsoft_datetimepicker .xdsoft_calendar table {
    width: 100% !important;
    border-collapse: separate !important;
    /* 单元格之间留缝，让圆角与悬停块能被看见 */
    border-spacing: 2px !important;
}

/* 星期表头：去掉底色与描边，只留小字 */
.xdsoft_datetimepicker.xdsoft_datetimepicker .xdsoft_calendar th {
    height: 30px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    color: var(--nx-text-tertiary) !important;
    font-size: var(--nx-font-xs, 12px) !important;
    font-weight: var(--nx-weight-medium, 500) !important;
    text-align: center !important;
    cursor: default !important;
}

/* 日期单元格 */
.xdsoft_datetimepicker.xdsoft_datetimepicker .xdsoft_calendar td {
    height: 32px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: var(--nx-radius-sm) !important;
    color: var(--nx-text) !important;
    font-size: var(--nx-font-sm, 13px) !important;
    font-weight: var(--nx-weight-normal, 400) !important;
    text-align: center !important;
    vertical-align: middle !important;
    cursor: pointer !important;
    transition: background-color .12s ease, color .12s ease !important;
}

/* 内层 div 只负责居中（厂商原本靠 text-align:right + padding-right 右对齐） */
.xdsoft_datetimepicker.xdsoft_datetimepicker .xdsoft_calendar td > div {
    padding: 0 !important;
    text-align: center !important;
    line-height: inherit !important;
}

/* 悬停：主色柔底（厂商原本是刺眼的橙色 #ff8000 + !important，必须压掉） */
.xdsoft_datetimepicker.xdsoft_datetimepicker .xdsoft_calendar td:hover {
    background: var(--nx-primary-soft) !important;
    color: var(--nx-primary-strong) !important;
    box-shadow: none !important;
}

/* 选中 / 今天 */
.xdsoft_datetimepicker.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current,
.xdsoft_datetimepicker.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default {
    background: var(--nx-primary) !important;
    color: var(--nx-text-inverse) !important;
    font-weight: var(--nx-weight-semibold, 600) !important;
    box-shadow: none !important;
}

.xdsoft_datetimepicker.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current:hover {
    background: var(--nx-primary-hover) !important;
    color: var(--nx-text-inverse) !important;
}

/* 「今天」若未选中：只描边，不与选中态抢视觉 */
.xdsoft_datetimepicker.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today {
    color: var(--nx-primary-strong) !important;
    font-weight: var(--nx-weight-semibold, 600) !important;
    box-shadow: inset 0 0 0 1px var(--nx-primary-border) !important;
}

/* 非本月 / 禁用 */
.xdsoft_datetimepicker.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_other_month,
.xdsoft_datetimepicker.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_disabled {
    color: var(--nx-text-disabled) !important;
    opacity: .55 !important;
    cursor: default !important;
}

.xdsoft_datetimepicker.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_other_month:hover,
.xdsoft_datetimepicker.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_disabled:hover {
    background: transparent !important;
    color: var(--nx-text-disabled) !important;
    box-shadow: none !important;
}

/* ==========================================================================
   4. 时间列
   ========================================================================== */

.xdsoft_datetimepicker.xdsoft_datetimepicker .xdsoft_timepicker {
    width: 64px !important;
    margin-left: 10px !important;
    margin-top: 0 !important;
    text-align: center !important;
}

.xdsoft_datetimepicker.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box {
    height: 168px !important;
    border: var(--nx-border-thin) solid var(--nx-border) !important;
    border-radius: var(--nx-radius-md) !important;
    background: var(--nx-surface-sunken) !important;
    overflow: hidden !important;
}

.xdsoft_datetimepicker.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div {
    height: 30px !important;
    line-height: 30px !important;
    background: transparent !important;
    border: none !important;
    color: var(--nx-text-secondary) !important;
    font-size: var(--nx-font-sm, 13px) !important;
    border-radius: 0 !important;
    transition: background-color .12s ease, color .12s ease !important;
}

.xdsoft_datetimepicker.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div:hover {
    background: var(--nx-primary-soft) !important;
    color: var(--nx-primary-strong) !important;
    box-shadow: none !important;
}

.xdsoft_datetimepicker.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current {
    background: var(--nx-primary) !important;
    color: var(--nx-text-inverse) !important;
    font-weight: var(--nx-weight-semibold, 600) !important;
    box-shadow: none !important;
}

/* 时间列上下翻页箭头：同样是雪碧图按钮（30x15，background-position:-40px -15px）。
   ⚠️ 厂商用 display:block + margin-left:14px 让它在 58px 宽的时间列里居中；
   本主题把时间列放宽到 64px，所以左右 margin 改 auto 保持居中。
   绝不改 width/height/background —— 改了图标就错位。 */
.xdsoft_datetimepicker.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_prev,
.xdsoft_datetimepicker.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_next {
    float: none !important;
    display: block !important;
    width: 30px !important;
    height: 15px !important;
    /* 在 64px 宽的时间列内水平居中：(64-30)/2 = 17px */
    margin: 6px auto !important;
    padding: 0 !important;
    opacity: .8 !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    border: none !important;
    overflow: hidden !important;
    cursor: pointer !important;
}

.xdsoft_datetimepicker.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_prev:hover,
.xdsoft_datetimepicker.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_next:hover {
    opacity: 1 !important;
}

/* ==========================================================================
   5. 滚动条与版权行
   ========================================================================== */

.xdsoft_datetimepicker.xdsoft_datetimepicker .xdsoft_scrollbar {
    background: transparent !important;
    width: 6px !important;
    right: 2px !important;
}

.xdsoft_datetimepicker.xdsoft_datetimepicker .xdsoft_scrollbar > .xdsoft_scroller {
    background: var(--nx-scrollbar, var(--nx-border-strong)) !important;
    border-radius: var(--nx-radius-full) !important;
    transition: background-color .15s ease !important;
}

.xdsoft_datetimepicker.xdsoft_datetimepicker .xdsoft_scrollbar > .xdsoft_scroller:hover {
    background: var(--nx-scrollbar-hover, var(--nx-text-tertiary)) !important;
}

/* 底部的「清空 / 关闭 / 确定」等按钮（部分调用会带） */
.xdsoft_datetimepicker.xdsoft_datetimepicker .xdsoft_save_selected,
.xdsoft_datetimepicker.xdsoft_datetimepicker .blue-gradient-button {
    padding: 6px 14px !important;
    margin: 6px 6px 0 0 !important;
    background: var(--nx-primary) !important;
    background-image: none !important;
    color: var(--nx-text-inverse) !important;
    border: none !important;
    border-radius: var(--nx-radius-sm) !important;
    font-size: var(--nx-font-sm, 13px) !important;
    font-weight: var(--nx-weight-medium, 500) !important;
    cursor: pointer !important;
    transition: background-color .15s ease !important;
}

.xdsoft_datetimepicker.xdsoft_datetimepicker .xdsoft_save_selected:hover,
.xdsoft_datetimepicker.xdsoft_datetimepicker .blue-gradient-button:hover {
    background: var(--nx-primary-hover) !important;
}

.xdsoft_datetimepicker.xdsoft_datetimepicker .xdsoft_copyright {
    color: var(--nx-text-disabled) !important;
    font-size: 10px !important;
    margin-top: 4px !important;
}

.xdsoft_datetimepicker.xdsoft_datetimepicker .xdsoft_copyright a {
    color: var(--nx-text-tertiary) !important;
    text-decoration: none !important;
}

/* ==========================================================================
   6. 输入框本身（与设计系统表单控件对齐）
   ========================================================================== */

input[id^="datetime-picker-"] {
    background: var(--nx-input-bg-solid, var(--nx-input-bg)) !important;
    color: var(--nx-text) !important;
    border: var(--nx-border-thin) solid var(--nx-border) !important;
    border-radius: var(--nx-radius-sm) !important;
    padding: 6px 10px !important;
    font-size: var(--nx-font-sm, 13px) !important;
    line-height: 1.5 !important;
    min-width: 160px !important;
    box-sizing: border-box !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
}

input[id^="datetime-picker-"]::placeholder {
    color: var(--nx-text-tertiary) !important;
}

input[id^="datetime-picker-"]:focus {
    outline: none !important;
    border-color: var(--nx-primary) !important;
    box-shadow: var(--nx-shadow-focus) !important;
}

/* ==========================================================================
   7. RTL 兜底（厂商的 .xdsoft_rtl 用的是 float 布局，这里已改 flex）
   ========================================================================== */

.xdsoft_datetimepicker.xdsoft_datetimepicker.xdsoft_rtl .xdsoft_timepicker {
    margin-left: 0 !important;
    margin-right: 10px !important;
}