:root {
    --danger-shadowColor: 0 0 0 0.2rem rgba(var(--danger-btn-button-rgb), 0.5);
}

.btn-danger, .btn-danger:disabled,
.btn-primary, .btn-primary:disabled {
    background-color: var(--danger-btn-button) !important;
    border-color: var(--danger-btn-border) !important;
    color: #fff;
}

    .btn-danger:hover,
    .btn-primary:hover {
        background-color: var(--danger-btn-button-hover) !important;
        border-color: var(--danger-btn-border-hover) !important;
        color: #fff;
    }

    .btn-danger:active, .btn-danger.active, .show > .btn-danger.dropdown-toggle,
    .btn-primary:active, .btn-primary.active, .show > .btn-primary.dropdown-toggle {
        background-color: #37b4c5 !important;
        border-color: var(--danger-btn-border-active) !important;
        color: #000;
    }

    .btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active, .show > .btn-danger.dropdown-toggle,
    .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
        color: #000;
        background-color: var(--danger-btn-button-active);
        border-color: var(--danger-btn-border-active) !important;
    }

        .btn-danger:not(:disabled):not(.disabled):active:focus, .btn-danger:not(:disabled):not(.disabled).active:focus, .show > .btn-danger.dropdown-toggle:focus,
        .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-primary.dropdown-toggle:focus {
            box-shadow: var(--danger-shadowColor) !important;
        }

.btn-outline-danger {
    color: var(--danger-btn-button) !important;
    background-color: transparent !important;
    background-image: none !important;
    border-color: var(--danger-btn-border) !important;
}

    .btn-outline-danger:hover, .btn-outline-danger:active {
        background-color: var(--danger-btn-button-hover) !important;
        border-color: var(--danger-btn-border-hover) !important;
        color: #fff !important;
    }

    .btn-outline-danger:active, .btn-outline-danger.active, .show > .btn-outline-danger.dropdown-toggle {
        background-color: var(--danger-btn-button-active) !important;
        border-color: var(--danger-btn-border-active) !important;
        color: #fff;
    }

    .btn-outline-danger:not(:disabled):not(.disabled):active, .btn-outline-danger:not(:disabled):not(.disabled).active, .show > .btn-outline-danger.dropdown-toggle {
        color: #fff;
        background-color: var(--danger-btn-button) !important;
        border-color: var(--danger-btn-border) !important;
    }

        .btn-outline-danger:not(:disabled):not(.disabled):active:focus, .btn-danger:not(:disabled):not(.disabled).active:focus, .show > .btn-danger.dropdown-toggle:focus {
            box-shadow: var(--danger-shadowColor) !important;
        }

.table > thead > tr > th {
    color: var(--danger-btn-button) !important;
    border-bottom: 2px solid #808080;
    border-bottom-style: solid;
}
.table > tbody > tr:last-child {
    border-bottom: 2px solid #808080;
}
.menu-toggle {
    background-color: var(--danger-btn-button) !important;
}

/* ── แผงเลือกเวลา (tempusdominus) ─────────────────────────────────────────────
   ใช้ร่วมกันสองที่: คอลัมน์ขวาของ date-time-picker และ time-picker เดี่ยว

   เลิกใช้กฎเดิมที่ทา color แบรนด์ทับ a/th/span ทุกตัวด้วย !important — เมื่อทุกอย่าง
   เป็นสีเดียวกันหมด สีก็ไม่เหลือความหมาย และยังทับ state ที่ควรต่างกันไปด้วย
   ที่นี่ใช้สีแบรนด์จุดเดียว: ค่าที่ถูกเลือกอยู่ ที่เหลือเป็นสีหมึกกับเทาจาง
   ── */
.bootstrap-datetimepicker-widget {
    color: var(--ndpp-ink, #1f2329);
    font-size: 13px;
}

.bootstrap-datetimepicker-widget.dropdown-menu {
    width: auto;
    min-width: 0;
    padding: 14px;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 2px 4px rgba(16, 24, 40, .04), 0 20px 40px -14px rgba(16, 24, 40, .18);
}

.bootstrap-datetimepicker-widget.dropdown-menu:before,
.bootstrap-datetimepicker-widget.dropdown-menu:after { display: none; }

/* ⚠️ ต้องล้าง line-height ด้วย ไม่ใช่แค่ height — tempusdominus ตั้ง line-height: 54px */
/* ไว้ดันความสูงแถว ล้างแต่ height อย่างเดียวแถวจะยังห่างเท่าเดิม */
.bootstrap-datetimepicker-widget table td,
.bootstrap-datetimepicker-widget table th {
    width: auto;
    height: auto;
    line-height: normal;
    padding: 2px;
}

.bootstrap-datetimepicker-widget .timepicker-picker table { width: auto; margin: 0 auto; }

/* ลูกศรเพิ่ม/ลด — เทาจาง เข้มขึ้นตอนชี้ ไม่ใช่สีแบรนด์ค้างไว้ตลอด */
/* กว้างเท่ากล่องตัวเลขด้านล่าง ขอบตรงกันแล้วจะอ่านเป็นตัวควบคุมเดียว ไม่ใช่ของสามชิ้นลอย ๆ */
.bootstrap-datetimepicker-widget a[data-action] {
    width: 56px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 8px;
    color: #a0a8b4;
    transition: background-color .12s ease, color .12s ease;
}

.bootstrap-datetimepicker-widget a[data-action]:hover {
    background-color: #f4f5f7;
    color: var(--ndpp-ink, #1f2329);
}

.bootstrap-datetimepicker-widget a[data-action] > span { font-size: 12px; }

.bootstrap-datetimepicker-widget a[data-action] > .ndpp-ico {
    width: 18px;
    height: 18px;
}

/* ตัวเลขชั่วโมง/นาที — กล่องชุดเดียวกับ dropdown เดือน/ปีของปฏิทิน */
.bootstrap-datetimepicker-widget .timepicker-hour,
.bootstrap-datetimepicker-widget .timepicker-minute,
.bootstrap-datetimepicker-widget .timepicker-second {
    width: 56px;
    height: 38px;
    margin: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dce0e6;
    border-radius: 10px;
    color: var(--ndpp-ink, #1f2329);
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    background-color: #fff;
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease;
}

.bootstrap-datetimepicker-widget .timepicker-hour:hover,
.bootstrap-datetimepicker-widget .timepicker-minute:hover,
.bootstrap-datetimepicker-widget .timepicker-second:hover {
    border-color: #d3d8de;
    background-color: #fafbfc;
}

.bootstrap-datetimepicker-widget .separator {
    padding: 0 4px;
    color: var(--ndpp-muted, #737b86);
    font-weight: 600;
}

/* ตารางเลือกชั่วโมง/นาที ที่เปิดเมื่อกดที่ตัวเลข */
.bootstrap-datetimepicker-widget td.hour,
.bootstrap-datetimepicker-widget td.minute,
.bootstrap-datetimepicker-widget td.second {
    width: 46px;
    height: 36px;
    line-height: 36px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.bootstrap-datetimepicker-widget td.hour:hover,
.bootstrap-datetimepicker-widget td.minute:hover,
.bootstrap-datetimepicker-widget td.second:hover {
    background-color: #f4f5f7;
    color: var(--ndpp-ink, #1f2329);
}

.bootstrap-datetimepicker-widget.usetwentyfour td.hour,
.bootstrap-datetimepicker-widget.usetwentyfour td.minute,
.bootstrap-datetimepicker-widget.usetwentyfour td.second {
    height: 33px;
    line-height: 26px;
    padding: 12px;
}

/* จุดเดียวที่ใช้สีแบรนด์ — ค่าที่ถูกเลือกอยู่ */
.bootstrap-datetimepicker-widget td.hour.active,
.bootstrap-datetimepicker-widget td.minute.active,
.bootstrap-datetimepicker-widget td.second.active,
.bootstrap-datetimepicker-widget td.hour.active:hover,
.bootstrap-datetimepicker-widget td.minute.active:hover,
.bootstrap-datetimepicker-widget td.second.active:hover {
    background-color: var(--danger-btn-button);
    color: #fff;
}

.bootstrap-datetimepicker-widget .picker-switch a[data-action] {
    width: auto;
    padding: 4px 10px;
    color: var(--ndpp-muted, #737b86);
}

/* โผล่แบบนุ่ม — animation เริ่มใหม่เองทุกครั้งที่ element กลับมามองเห็น */
@keyframes ndppPopIn {
    from { opacity: 0; transform: translateY(-4px) scale(.98); }
    to { opacity: 1; transform: none; }
}

/* การ์ดถูก append ไว้ที่ body — ต้องสูงกว่า .modal ของระบบ (9999, master_style.css) ไม่งั้นปฏิทินที่เปิดจากใน modal
   ไปซ้อนอยู่ด้านหลัง (defect #4090) ค่าเดิมของ library คือ 3001 ซึ่งพอสำหรับ modal ของ bootstrap (1050) เท่านั้น */
.daterangepicker.dropdown-menu {
    z-index: 10010;
    animation: ndppPopIn .12s ease-out;
    padding: 20px;
    border: 0;
    border-radius: 18px;
    box-shadow: 0 2px 4px rgba(16, 24, 40, .04), 0 24px 48px -16px rgba(16, 24, 40, .16);
    font-size: 13px;
    color: var(--ndpp-ink, #1f2329);
    font-variant-numeric: tabular-nums;
}

.daterangepicker:before,
.daterangepicker:after { display: none; }

.daterangepicker .ranges {
    margin: 0;
    padding: 0px 25px 0px 0px;
}

.daterangepicker .ranges ul {
    width: auto;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

    .daterangepicker .ranges li {
        margin: 0 0 0 0px;
        padding: 10px 50px 10px 20px;
        border: 0;
        border-radius: 9px;
        background-color: transparent;
        font-size: 13px !important;
        color: #607D8B;
        font-size: 12px;
        white-space: nowrap;
        transition: background-color .12s ease, color .12s ease;
        font-weight: 300;
    }

.daterangepicker .ranges li:first-child { margin-bottom: 0px; }
.daterangepicker .ranges li:last-child { margin-top: 0px; }

.daterangepicker .ranges li:hover {
    background-color: #f4f5f7;
    color: var(--ndpp-ink, #1f2329);
}

.daterangepicker .ranges li.active,
.daterangepicker .ranges li.active:hover {
    background-color: rgba(var(--danger-btn-button-rgb), .09);
    color: var(--danger-btn-button);
    font-weight: 600;
}

.daterangepicker > .range_inputs {
    clear: both;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 0px;
}

.daterangepicker > .range_inputs > button.btn {
    height: 36px;
    padding: 0 20px;
    border: 0;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: none;
}

.daterangepicker > .range_inputs > button.cancelBtn {
    order: 1;
    background-color: transparent;
    color: var(--ndpp-muted, #737b86);
}

.daterangepicker > .range_inputs > button.cancelBtn:hover {
    background-color: #f4f5f7;
    color: var(--ndpp-ink, #1f2329);
}

.daterangepicker > .range_inputs > button.applyBtn {
    order: 2;
    background-color: var(--danger-btn-button);
    color: #fff;
    font-weight: 600;
}

.daterangepicker > .range_inputs > button.applyBtn:hover { filter: brightness(1.07); }

.daterangepicker > .range_inputs > button.applyBtn:disabled {
    opacity: .45;
    cursor: not-allowed;
    filter: none;
}

/* ── ปฏิทิน ── */
.daterangepicker .calendar {
    margin: 0;
    padding: 0;
    max-width: none;
}

.daterangepicker .calendar-table {
    padding: 0;
    border: 0;
    background-color: transparent;
}

.daterangepicker.ltr .calendar.left .calendar-table { padding-right: 0; }
.daterangepicker .calendar.right {
    padding-left: 40px;
    padding-right: 20px;
}

.daterangepicker .calendar th,
.daterangepicker .calendar td {
    min-width: 40px;
    padding: 8px;
}

.daterangepicker td,
.daterangepicker th {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 0;
    font-weight: 400;
}

.daterangepicker .ndpp-drp-lbl {
    margin-bottom: 12px;
    color: var(--ndpp-ink, #1f2329);
    font-size: 13px;
    font-weight: 600;
}

.daterangepicker th.month {
    width: auto;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.01em;
}

.daterangepicker thead tr + tr th {
    height: 44px;
    padding-bottom: 8px;
    vertical-align: bottom;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--ndpp-muted, #737b86);
}

.daterangepicker th.prev,
.daterangepicker th.next {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--ndpp-muted, #737b86);
}

.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
    height: 32px;
    margin: 0;
    padding: 0 26px 0 10px;
    border: 1px solid #e7eaee;
    border-radius: 9px;
    color: var(--ndpp-ink, #1f2329);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right .6rem center;
}

.daterangepicker select.monthselect:hover,
.daterangepicker select.yearselect:hover { border-color: #d3d8de; }

.daterangepicker select.monthselect { width: 116px; margin-right: 6px; }
.daterangepicker select.yearselect { width: 76px; }

.daterangepicker select.monthselect:focus,
.daterangepicker select.yearselect:focus {
    border-color: var(--danger-btn-button);
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--danger-btn-button-rgb), .14);
}

.daterangepicker th.prev > .ndpp-ico,
.daterangepicker th.next > .ndpp-ico {
    width: 17px;
    height: 17px;
    vertical-align: middle;
}

.daterangepicker th.available:hover {
    background-color: #f4f5f7;
    color: var(--ndpp-ink, #1f2329);
}

.daterangepicker td > b {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0 auto;
    border-radius: 50%;
    font-weight: inherit;
    pointer-events: none;
    transition: background-color .12s ease, color .12s ease;
}

/* ต้นตำรับทาพื้นทั้งช่องตอน hover (td.available:hover) ซึ่งเป็นสี่เหลี่ยมเต็มช่อง
   ซ้อนกับวงกลมใน <b> ที่เราใช้เป็นเม็ดวัน ต้องปิดของเดิมไม่งั้นได้สองชั้น */
.daterangepicker td.available:hover { background-color: transparent; }

.daterangepicker td.available:hover > b { background-color: #f4f5f7; }

/* วันล้นจากเดือนอื่นต้องไม่รับสถานะการเลือกใด ๆ
   library ตัดสิน active / today / in-range จากการเทียบสตริงวันที่อย่างเดียว ไม่ได้ดูว่าเซลล์นั้น
   อยู่ในเดือนที่ปฏิทินช่องนั้นแสดงอยู่หรือเปล่า (daterangepicker.js:818-826) วันเดียวกันจึงโผล่
   ซ้ำในปฏิทินสองช่องด้วยหน้าตาคนละแบบ เช่น 31 ส.ค. เป็นวงแหวนในช่องซ้ายแต่เป็นวงกลมทึบในช่องขวา
   ทั้งที่เป็นแค่วันทางผ่าน ไม่ใช่ปลายช่วง

   เราไม่ fork library จึงล้างสถานะทิ้งที่ชั้นแสดงผลแทน
   specificity ของทุกกฎในบล็อกนี้สูงกว่าคู่ของมันอยู่แล้ว จึงไม่ต้องพึ่งลำดับในไฟล์ */
.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.active,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date,
.daterangepicker td.off.today {
    background-color: transparent;
    color: #c6cbd2;
    border-radius: 0;
}

.daterangepicker td.disabled,
.daterangepicker option.disabled {
    color: #c6cbd2;
    text-decoration: none;
}

.daterangepicker td.today > b {
    font-weight: 600;
    color: var(--danger-btn-button);
    border: 1px solid var(--danger-btn-button);
}

.daterangepicker table {
    border-collapse: separate;
    border-spacing: 0;
}

.daterangepicker td.in-range {
    background-color: rgb(0 0 0 / 7%);
    border-radius: 0;
}

.daterangepicker td.in-range { color: var(--ndpp-ink, #1f2329); }

.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: rgb(0 0 0 / 7%);
}

.daterangepicker td.active.start-date.end-date { background-color: transparent; }

    .daterangepicker td.active.start-date {
        border-top-left-radius: 50%;
        border-bottom-left-radius: 50%;
    }

    .daterangepicker td.active.end-date {
        border-top-right-radius: 50%;
        border-bottom-right-radius: 50%;
    }

.daterangepicker td.active > b,
.daterangepicker td.active:hover > b {
    background-color: var(--danger-btn-button);
    color: #fff;
    font-weight: 600;
    box-shadow: none;
}


.daterangepicker td.off > b,
.daterangepicker td.off.active > b,
.daterangepicker td.off.active:hover > b,
.daterangepicker td.off.today > b {
    background-color: transparent;
    color: #c6cbd2;
    font-weight: 400;
    border: 0;
    box-shadow: none;
}

.daterangepicker .daterangepicker_input { display: none; }

.daterangepicker.ndpp-drp-time .daterangepicker_input { display: block; }

.input-group.ndpp-datefield-group > input.ndpp-datefield,
.input-group.ndpp-datefield-group > input.ndpp-datefield:not(:last-child),
.input-group.ndpp-datefield-group > input.ndpp-datefield:not(:first-child) {
    border-radius: 9px;
}

.daterangepicker.ndpp-drp-time .daterangepicker_input > input,
.daterangepicker.ndpp-drp-time .daterangepicker_input > i { display: none; }

.daterangepicker.ndpp-drp-time .calendar.left {
    display: flex !important;
    flex-direction: row-reverse;
    align-items: stretch;
    justify-content: flex-end;
}

.daterangepicker.ndpp-drp-time .daterangepicker_input {
    flex: 0 0 auto;
    min-width: 238px;
    margin-left: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.daterangepicker.ndpp-drp-time > .range_inputs { margin-top: 14px; }

.input-group > .input-group-addon {
    display: flex !important;
    align-items: center !important;
    align-self: stretch !important;
}


.input-group > .input-group-prepend > .input-group-text,
.input-group > .input-group-append > .input-group-text {
    height: 2.2rem;
    box-sizing: border-box;
}


[ng-click]:not([disabled]):not(.disabled),
[data-toggle]:not([disabled]):not(.disabled),
[data-target]:not([disabled]):not(.disabled),
[data-dismiss]:not([disabled]):not(.disabled),
[role="button"]:not([disabled]):not(.disabled),
[role="tab"]:not([disabled]):not(.disabled),
.nav-tabs > li > a,
.nav-pills > li > a,
.dropdown-toggle,
.dropdown-item {
    cursor: pointer;
}

body {
    display: none;
}

.color-template {
    color: var(--danger-btn-button) !important
}

.main-sidebar > section > ul > li.treeview.active > a,
.sidebar-collapse .treeview-menu > li > .active-sub-menu,
.main-sidebar > section > ul > li.treeview.active > ul > li > a.active-sub-menu {
    background-color: var(--active-sub-menu) !important;
    color: var(--danger-btn-button) !important;
}

.sidebar-collapse .main-sidebar > section > ul > li.treeview.active > a > span {
    background-color: var(--danger-sidebar-background) !important;
}

.main-sidebar > section > ul > li.treeview.active > a > i {
    color: var(--danger-btn-button) !important;
}

.content-wrapper {
    background-color: var(--danger-body-background) !important;
}

[anna-color-stroke] {
    stroke: var(--danger-btn-button) !important;
}

[anna-color-fill] {
    stroke: var(--danger-btn-button) !important;
}

/* Show / hide password eye-icon toggle */
.nsdx-password-wrapper {
    position: relative;
    display: block;
}

.nsdx-password-wrapper > .form-control {
    padding-right: 36px;
}

.nsdx-password-wrapper > .toggle-password {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    color: #888;
    cursor: pointer;
    z-index: 4;
    line-height: 1;
    background: transparent;
    border: 0;
    user-select: none;
}

    .nsdx-password-wrapper > .toggle-password:hover {
        color: #555;
    }

/* <select> จริงของ library ยังอยู่ใต้ผิวเป็นค่าที่มันอ่าน แค่ไม่ต้องแสดง — ตัวเลื่อนเป็นตัวแทน */
.daterangepicker .calendar-time { display: none; }

.daterangepicker .ndpp-drp-sum {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
}

.daterangepicker .ndpp-drp-sum__d {
    color: var(--ndpp-ink, #1f2329);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.daterangepicker .ndpp-drp-sum__t {
    color: #5b6472;
    font-size: 13px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.daterangepicker .ndpp-drp-now {
    height: 32px;
    padding: 0 16px;
    border: 1px solid #dce0e6;
    border-radius: 9px;
    background-color: #fff;
    color: #5b6472;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .12s ease, color .12s ease;
}

.daterangepicker .ndpp-drp-now:hover {
    border-color: #c8ced6;
    color: var(--ndpp-ink, #1f2329);
}

/* ไม่เอาวงโฟกัสตอนกด — ปุ่มลัดไม่ใช่ปลายทางของการเดิน tab อยู่แล้ว */
.daterangepicker .ndpp-drp-now:focus,
.daterangepicker .ndpp-drp-now:focus-visible,
.daterangepicker .ndpp-drp-now:active {
    outline: none;
    box-shadow: none;
    border-color: #c8ced6;
    color: var(--ndpp-ink, #1f2329);
}

/* ── แผงเลือกเวลาของ time-picker: วงล้อสองคอลัมน์ + แถบเลือกตรงกลาง ──────────── */
/* แผงถูก append ไว้ที่ body จึงต้องเป็น absolute + z-index สูงกว่า modal ของระบบ */
/* ตัวเลขทุกแถวสูง 34px (ITEM ใน directive ต้องตรงกันเสมอ) เห็นทีละ 5 แถว = คอลัมน์สูง 170px */
.ndpp-timewheel {
    animation: ndppPopIn .12s ease-out;
    position: absolute;
    z-index: 10011;
    display: flex;
    flex-direction: column;
    padding: 8px;
    border: 1px solid #eef0f3;
    border-radius: 12px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(16, 24, 40, .04), 0 16px 32px -12px rgba(16, 24, 40, .22);
}

.ndpp-timewheel__body {
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 2px;
}

/* แถบกลาง = ตัวบอกว่า "แถวนี้คือค่าที่เลือก" อยู่นิ่ง ให้ตัวเลขวิ่งเข้ามาหา */
.ndpp-timewheel__band {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 34px;
    transform: translateY(-50%);
    border-radius: 9px;
    background-color: #f5f7fa;
    box-shadow: inset 0 0 0 1px #eceff4;
    pointer-events: none;
}

.ndpp-timewheel__col {
    position: relative;
    width: 64px;
    height: 170px;
    padding: 68px 0;                 /* (170 - 34) / 2 — ให้แถวแรก/แถวท้ายขึ้นมาถึงกลางได้ */
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    /* เฟดหัวท้ายแทน scrollbar (เบราว์เซอร์รุ่นใหม่พอเจอ scrollbar-width จะเมิน ::-webkit-scrollbar) */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 70%, transparent 100%);
}

.ndpp-timewheel__col::-webkit-scrollbar { display: none; }

.ndpp-timewheel__i {
    width: 100%;
    height: 34px;
    display: block;
    padding: 0;
    border: 0;
    background-color: transparent;   /* แถบกลางเป็นตัวไฮไลต์ ไม่ใช่ตัวปุ่ม */
    color: #bcc3cd;
    font-size: 14px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    text-align: center;
    cursor: pointer;
    scroll-snap-align: center;
    transition: color .1s ease;
}

/* แถวข้างแถบกลางเข้มขึ้นหนึ่งขั้น — ให้ความรู้สึกวงล้อโค้งเข้าหาจุดเลือก */
.ndpp-timewheel__i.is-near { color: #6d7581; }

.ndpp-timewheel__i:hover { color: var(--ndpp-ink, #1f2329); }

.ndpp-timewheel__i:focus,
.ndpp-timewheel__i:focus-visible {
    outline: none;
    box-shadow: none;
}

.ndpp-timewheel__i.is-center {
    color: var(--ndpp-ink, #1f2329);
    font-weight: 700;
    font-size: 15px;
    cursor: text;   /* กดแล้วพิมพ์ค่าตรง ๆ ได้ */
}

/* จุดเดียวที่ใช้สีแบรนด์ — ค่าในแถบกลางของคอลัมน์ที่ลูกศรคีย์บอร์ดกระทำอยู่ (Tab สลับ) */
.ndpp-timewheel__col.is-focus .ndpp-timewheel__i.is-center {
    color: var(--danger-btn-button);
}

.ndpp-timewheel__sep {
    align-self: center;
    color: #c3c9d2;
    font-size: 15px;
    font-weight: 600;
    z-index: 1;
}

.ndpp-timewheel__grp {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ลูกศรหัว/ท้ายคอลัมน์ — บอกว่าเลื่อนได้ และกดจิ้มทีละขั้นได้ */
.ndpp-timewheel__nudge {
    width: 64px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background-color: transparent;
    color: #c3c9d2;
    cursor: pointer;
    z-index: 1;
    transition: color .12s ease;
}

.ndpp-timewheel__nudge .ndpp-ico { width: 12px; height: 12px; }

.ndpp-timewheel__nudge:hover { color: var(--ndpp-ink, #1f2329); }

.ndpp-timewheel__nudge:focus,
.ndpp-timewheel__nudge:focus-visible {
    outline: none;
    box-shadow: none;
}

/* ช่องพิมพ์ทับแถบกลาง โผล่เฉพาะตอนกดเลขที่เลือกอยู่ */
.ndpp-timewheel__edit {
    position: absolute;
    top: 50%;
    height: 34px;
    transform: translateY(-50%);
    display: none;
    z-index: 2;
    padding: 0;
    border: 1px solid var(--danger-btn-button);
    border-radius: 9px;
    background-color: #fff;
    color: var(--ndpp-ink, #1f2329);
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.ndpp-timewheel__edit:focus {
    outline: none;
    box-shadow: none;
}

.ndpp-timewheel__btns {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.ndpp-timewheel__btns > button { flex: 1; }

/* ปุ่ม pill ภาษาเดียวกับปุ่ม Now ในการ์ด date-time-picker */
.ndpp-timewheel__now {
    height: 32px;
    padding: 0 16px;
    border: 1px solid #dce0e6;
    border-radius: 9px;
    background-color: #fff;
    color: #5b6472;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .12s ease, color .12s ease;
}

.ndpp-timewheel__now:hover {
    border-color: #c8ced6;
    color: var(--ndpp-ink, #1f2329);
}

.ndpp-timewheel__now:focus,
.ndpp-timewheel__now:focus-visible,
.ndpp-timewheel__now:active {
    outline: none;
    box-shadow: none;
    border-color: #c8ced6;
    color: var(--ndpp-ink, #1f2329);
}

/* ปุ่มหลัก — โทนเดียวกับปุ่มยืนยันของการ์ด date-time-picker */
.ndpp-timewheel__ok {
    height: 32px;
    padding: 0 16px;
    border: 0;
    border-radius: 9px;
    background-color: var(--danger-btn-button);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: filter .12s ease;
}

.ndpp-timewheel__ok:hover { filter: brightness(1.07); }

.ndpp-timewheel__ok:focus,
.ndpp-timewheel__ok:focus-visible,
.ndpp-timewheel__ok:active {
    outline: none;
    box-shadow: none;
}

.ndpp-timewheel__keys {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-top: 8px;
    color: #a0a8b4;
    padding: 8px;
    font-size: 10px;
    white-space: nowrap;
}

/* ล้าง kbd ของ bootstrap (พื้นดำ+เงา) ให้เป็นชิปจาง ๆ ภาษาเดียวกับแผง */
.ndpp-timewheel__keys kbd {
    padding: 1px 4px;
    border: 1px solid #e5e8ed;
    border-radius: 4px;
    background-color: #fafbfc;
    color: #6d7581;
    font-family: inherit;
    font-size: 9px;
    box-shadow: none;
    margin-right: 3px;
}

.ndpp-timewheel__keys em { font-style: normal; }
/* ขนาดไอคอนทะเบียนเมื่ออยู่ในปุ่มมาตรฐานคู่ตัวหนังสือ (ตัว base 9px เล็กไปสำหรับปุ่ม) */
.ndpp-ico--btn {
    width: 12px;
    height: 12px;
    margin-top: -2px;
}

/* ปุ่มทึบสีแบรนด์ในแถบเครื่องมือ: ไอคอนต้องขาวตามตัวหนังสือ ทั้ง fa และ .ndpp-ico (currentColor)
   — กฎ .page-toolbar .btn > i ใน master_style.css ทาสีเข้มไว้สำหรับปุ่มพื้นขาว */
.page-toolbar .btn-danger > i,
.ndpp-btnbar .btn-danger > i {
    color: #fff;
}