/*
 * ปุ่มแถบเครื่องมือหลักของหน้าเอกสาร (+ เพิ่มใหม่ / แก้ไข / ลบ / จัดเก็บ / พิมพ์ ...) ใช้ทั้งระบบ
 * ทุกหน้าห่อปุ่มด้วย .button-div จึงจับจากไฟล์นี้ไฟล์เดียว
 * ปุ่มค้นหาที่มีแค่ไอคอน fa-search อย่างเดียว (ทั้งระบบ)
 * หน้ารายการสินค้า: แถวปุ่มขวา (.toolbar-btns), ปุ่มแผงล่าง (.card2-btn) และปุ่ม ปกติ (#edit_type_button)
 * - เปลี่ยนเฉพาะหน้าตา (สี เงา มุมโค้ง) ไม่แตะขนาด/ระยะห่าง ปุ่มจึงกว้างสูงเท่าเดิม
 * - ใช้โทนส้มเดิม #ff9f43 (ดู refresh-button.css)
 */
:is(.button-div > .btn, .toolbar-btns > .btn, .card2-btn, #edit_type_button, .dataTables_paginate .btn, .top-left-button .btn, .btn:has(> i.fa-search:only-child), #upload_image_button).btn-primary {
    border: 1px solid #f58f2e !important;
    border-radius: 8px !important;
    background-color: #ff9f43 !important;
    background-image: linear-gradient(180deg, #ffac5c 0%, #ff9f43 100%) !important;
    color: #ffffff !important;
    font-weight: 500;
    letter-spacing: 0.01em;
    box-shadow: 0 1px 2px rgba(245, 143, 46, 0.35), 0 2px 6px rgba(255, 159, 67, 0.25) !important;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease, opacity 0.15s ease;
}

:is(.button-div > .btn, .toolbar-btns > .btn, .card2-btn, #edit_type_button, .dataTables_paginate .btn, .top-left-button .btn, .btn:has(> i.fa-search:only-child), #upload_image_button).btn-primary:hover:not(:disabled),
:is(.button-div > .btn, .toolbar-btns > .btn, .card2-btn, #edit_type_button, .dataTables_paginate .btn, .top-left-button .btn, .btn:has(> i.fa-search:only-child), #upload_image_button).btn-primary:focus-visible:not(:disabled) {
    background-image: linear-gradient(180deg, #ff9f43 0%, #f58f2e 100%) !important;
    border-color: #e8801f !important;
    box-shadow: 0 2px 4px rgba(245, 143, 46, 0.45), 0 4px 10px rgba(255, 159, 67, 0.3) !important;
}

:is(.button-div > .btn, .toolbar-btns > .btn, .card2-btn, #edit_type_button, .dataTables_paginate .btn, .top-left-button .btn, .btn:has(> i.fa-search:only-child), #upload_image_button).btn-primary:focus-visible {
    outline: 2px solid rgba(255, 159, 67, 0.45);
    outline-offset: 2px;
}

/* กดแล้ว/อยู่ในโหมดนั้น (คลาส active) = เขียวชัดเจนค้างไว้ */
:is(.button-div > .btn, .toolbar-btns > .btn, .card2-btn, #edit_type_button, .dataTables_paginate .btn, .top-left-button .btn, .btn:has(> i.fa-search:only-child), #upload_image_button).btn-primary.active,
:is(.button-div > .btn, .toolbar-btns > .btn, .card2-btn, #edit_type_button, .dataTables_paginate .btn, .top-left-button .btn, .btn:has(> i.fa-search:only-child), #upload_image_button).btn-primary.active:hover:not(:disabled),
:is(.button-div > .btn, .toolbar-btns > .btn, .card2-btn, #edit_type_button, .dataTables_paginate .btn, .top-left-button .btn, .btn:has(> i.fa-search:only-child), #upload_image_button).btn-primary:active:not(:disabled) {
    background-color: #28a745 !important;
    background-image: linear-gradient(180deg, #34b853 0%, #28a745 100%) !important;
    border-color: #1e8e3a !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.18) !important;
    transform: translateY(1px);
}

/* ปิดใช้งาน = พีชอ่อนเรียบ ไม่มีเงา ยังอยู่ในโทนส้มเดิม */
:is(.button-div > .btn, .toolbar-btns > .btn, .card2-btn, #edit_type_button, .dataTables_paginate .btn, .top-left-button .btn, .btn:has(> i.fa-search:only-child), #upload_image_button).btn-primary:disabled,
:is(.button-div > .btn, .toolbar-btns > .btn, .card2-btn, #edit_type_button, .dataTables_paginate .btn, .top-left-button .btn, .btn:has(> i.fa-search:only-child), #upload_image_button).btn-primary.disabled {
    border-color: #ffd6ad !important;
    background-color: #ffe0c2 !important;
    background-image: none !important;
    color: #b8691f !important;
    box-shadow: none !important;
    opacity: 1;
    cursor: not-allowed;
}

/*
 * แถบเลือกหน้า (ก่อนหน้า 1 2 … ถัดไป) ของตาราง .dataTables_paginate ใช้ทั้งระบบ
 * ปุ่ม ยืนยัน/แสดง/ซ่อน ข้างแถบนี้ใช้สไตล์ปุ่มส้มด้านบน (.dataTables_paginate .btn)
 * - หน้าปัจจุบัน = ส้มเดิม, เลขหน้าอื่น/ถัดไป = เทาน้ำเงินเดิม, กดไม่ได้ = ขาวขอบเทา
 * - ไม่แตะขนาด/ระยะห่าง
 */
.dataTables_paginate .pagination .page-link {
    border-radius: 8px !important;
    font-weight: 500;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.dataTables_paginate .pagination .page-item:not(.active):not(.disabled) .page-link {
    border-color: #566574 !important;
    background-color: #637381 !important;
    background-image: linear-gradient(180deg, #73828f 0%, #637381 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 2px rgba(60, 72, 84, 0.35), 0 2px 6px rgba(99, 115, 129, 0.2);
}

.dataTables_paginate .pagination .page-item:not(.active):not(.disabled) .page-link:hover {
    background-image: linear-gradient(180deg, #637381 0%, #4f5e6b 100%) !important;
    border-color: #475663 !important;
}

.dataTables_paginate .pagination .page-item.active .page-link {
    border-color: #f58f2e !important;
    background-color: #ff9f43 !important;
    background-image: linear-gradient(180deg, #ffac5c 0%, #ff9f43 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 2px rgba(245, 143, 46, 0.35), 0 2px 6px rgba(255, 159, 67, 0.25);
}

.dataTables_paginate .pagination .page-item.disabled .page-link {
    border-color: #e3e6ea !important;
    background-color: #ffffff !important;
    background-image: none !important;
    color: #9aa3ab !important;
    box-shadow: none;
}

.dataTables_paginate .pagination .page-item:not(.disabled) .page-link:active {
    transform: translateY(1px);
}

/*
 * ปุ่มกรองหัวหน้ารายการสินค้า: ทั้งหมด/ใช้งาน/ไม่ใช้งาน และปุ่มทุน/ขาย
 * - กรองสถานะ: เลือกอยู่ = เขียว, ไม่ได้เลือก = ขาวขอบส้ม (สีเดิม)
 * - ทุน/ขาย: เปิด = เขียว, ปิด = แดง (สีเดิม)
 * - ไม่แตะขนาด/ระยะห่าง
 */
:is(.product-status-filter, .party-status-filter) .btn {
    font-weight: 500;
    transition: background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

:is(.product-status-filter, .party-status-filter) .btn:first-child {
    border-radius: 8px 0 0 8px !important;
}

:is(.product-status-filter, .party-status-filter) .btn:last-child {
    border-radius: 0 8px 8px 0 !important;
}

:is(.product-status-filter, .party-status-filter) :is(.product-status-filter-btn, .party-status-filter-btn):not(.active) {
    border-color: #ff9f43 !important;
    background-color: #ffffff !important;
    background-image: none !important;
    color: #f58f2e !important;
}

:is(.product-status-filter, .party-status-filter) :is(.product-status-filter-btn, .party-status-filter-btn):not(.active):hover {
    background-color: #fff3e6 !important;
    color: #e8801f !important;
}

:is(.product-status-filter, .party-status-filter) :is(.product-status-filter-btn, .party-status-filter-btn).active {
    border-color: #1e8e3a !important;
    background-color: #28a745 !important;
    background-image: linear-gradient(180deg, #34b853 0%, #28a745 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 2px rgba(30, 142, 58, 0.4), 0 2px 6px rgba(40, 167, 69, 0.25);
}

.toggle-price-column-btn {
    border-radius: 8px !important;
    font-weight: 500;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.toggle-price-column-btn.active {
    border-color: #1e8e3a !important;
    background-color: #28a745 !important;
    background-image: linear-gradient(180deg, #34b853 0%, #28a745 100%) !important;
    box-shadow: 0 1px 2px rgba(30, 142, 58, 0.4), 0 2px 6px rgba(40, 167, 69, 0.25);
}

.toggle-price-column-btn.active:hover {
    background-image: linear-gradient(180deg, #28a745 0%, #218838 100%) !important;
}

.toggle-price-column-btn:not(.active) {
    border-color: #bd2130 !important;
    background-color: #dc3545 !important;
    background-image: linear-gradient(180deg, #e4606d 0%, #dc3545 100%) !important;
    box-shadow: 0 1px 2px rgba(189, 33, 48, 0.4), 0 2px 6px rgba(220, 53, 69, 0.25);
}

.toggle-price-column-btn:not(.active):hover {
    background-image: linear-gradient(180deg, #dc3545 0%, #c82333 100%) !important;
}

#product_sale_price_level_filter {
    border-radius: 8px;
    border-color: #ff9f43;
}

/*
 * แถวปุ่มบนสุดของหน้ารายการสินค้า (.top-left-button): เพิ่มรายการสินค้า, เพิ่มโดย EXCEL, อัพโหลด, ส่งออก ...
 * ใช้สไตล์ปุ่มส้มชุดเดียวกับด้านบน ปุ่มที่เป็นกลุ่ม (ปุ่ม + ลูกศร dropdown) โค้งเฉพาะปลายนอก
 */
/* ปุ่มหลักที่มีลูกศรแยก (เทียบ ▾) โค้งเฉพาะปลายนอก */
.top-left-button .btn-group > .btn:not(#_):has(+ .dropdown-toggle-split) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.top-left-button .btn-group > .dropdown-toggle-split.btn:not(#_) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/*
 * ปุ่มไอคอนเล็ก (.sm-btn) ข้างช่องจำนวนคงเหลือ: แก้ไข (เหลือง) / ย้ายที่เก็บ (เขียว)
 * เก็บสีความหมายเดิมไว้ เปลี่ยนเฉพาะหน้าตา ไม่แตะขนาด
 */
.btn.sm-btn.btn-warning,
.btn.sm-btn.btn-success {
    border-radius: 6px !important;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.btn.sm-btn.btn-warning:not(:disabled) {
    border-color: #e0a800 !important;
    background-color: #ffc107 !important;
    background-image: linear-gradient(180deg, #ffd04a 0%, #ffc107 100%) !important;
    color: #3d2f00 !important;
    box-shadow: 0 1px 2px rgba(224, 168, 0, 0.45), 0 2px 5px rgba(255, 193, 7, 0.25);
}

.btn.sm-btn.btn-warning:not(:disabled):hover {
    background-image: linear-gradient(180deg, #ffc107 0%, #e0a800 100%) !important;
}

.btn.sm-btn.btn-success:not(:disabled) {
    border-color: #1e8e3a !important;
    background-color: #28a745 !important;
    background-image: linear-gradient(180deg, #34b853 0%, #28a745 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 2px rgba(30, 142, 58, 0.4), 0 2px 5px rgba(40, 167, 69, 0.25);
}

.btn.sm-btn.btn-success:not(:disabled):hover {
    background-image: linear-gradient(180deg, #28a745 0%, #218838 100%) !important;
}

.btn.sm-btn.btn-warning:not(:disabled):active,
.btn.sm-btn.btn-success:not(:disabled):active {
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
    transform: translateY(1px);
}

.btn.sm-btn.btn-warning:disabled,
.btn.sm-btn.btn-success:disabled {
    box-shadow: none;
    background-image: none !important;
}

/* ปุ่ม "เพิ่มรูปภาพ": ไอคอนกล้อง + ข้อความ เหมือนปุ่มบนมือถือ (components/table/mobile/panel-image) */
#upload_image_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

#upload_image_button > i {
    font-size: 0.95em;
}

/*
 * หน้าต่างอัพโหลดรูปภาพ (#upload-image-modal): เลือกรูป (ส้ม) / ถ่ายรูป (เขียว) / ล้างรูปใหม่ (แดงขอบ) / บันทึก (ส้ม)
 * เก็บสีเดิม เปลี่ยนเฉพาะหน้าตา ไม่แตะขนาด
 */
#upload-image-modal #btn-open-gallery,
#upload-image-modal #btn-open-camera,
#upload-image-modal #btn-clear-new-images,
#upload-image-modal #upload_image_submit {
    border-radius: 8px !important;
    font-weight: 500;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease, color 0.15s ease;
}

#upload-image-modal #btn-open-gallery,
#upload-image-modal #upload_image_submit {
    border: 1px solid #f58f2e !important;
    background-color: #ff9f43 !important;
    background-image: linear-gradient(180deg, #ffac5c 0%, #ff9f43 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 2px rgba(245, 143, 46, 0.35), 0 2px 6px rgba(255, 159, 67, 0.25) !important;
}

#upload-image-modal #btn-open-gallery:hover:not(:disabled),
#upload-image-modal #upload_image_submit:hover:not(:disabled) {
    background-image: linear-gradient(180deg, #ff9f43 0%, #f58f2e 100%) !important;
    border-color: #e8801f !important;
}

#upload-image-modal #btn-open-camera {
    border: 1px solid #1e8e3a !important;
    background-color: #28a745 !important;
    background-image: linear-gradient(180deg, #34b853 0%, #28a745 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 2px rgba(30, 142, 58, 0.4), 0 2px 6px rgba(40, 167, 69, 0.25) !important;
}

#upload-image-modal #btn-open-camera:hover:not(:disabled) {
    background-image: linear-gradient(180deg, #28a745 0%, #218838 100%) !important;
}

#upload-image-modal #btn-clear-new-images {
    border: 1px solid #dc3545 !important;
    background-color: #ffffff !important;
    background-image: none !important;
    color: #dc3545 !important;
}

#upload-image-modal #btn-clear-new-images:hover:not(:disabled) {
    background-color: #dc3545 !important;
    color: #ffffff !important;
}

#upload-image-modal #btn-open-gallery:active:not(:disabled),
#upload-image-modal #btn-open-camera:active:not(:disabled),
#upload-image-modal #btn-clear-new-images:active:not(:disabled),
#upload-image-modal #upload_image_submit:active:not(:disabled) {
    transform: translateY(1px);
}

#upload-image-modal #upload_image_submit:disabled {
    border-color: #ffd6ad !important;
    background-color: #ffe0c2 !important;
    background-image: none !important;
    box-shadow: none !important;
}

/*
 * หน้าต่างแก้ไขคงเหลือ (#edit-remaining-modal / #edit-vat-remaining-modal)
 * MAX/MIN (ส้ม) / ยืนยัน (เขียว) / ยกเลิก (แดง) เก็บสีเดิม ไม่แตะขนาด
 */
:is(#edit-remaining-modal, #edit-vat-remaining-modal) .modal-storage-product-price,
:is(#edit-remaining-modal, #edit-vat-remaining-modal) .btn.w-100 {
    border-radius: 8px !important;
    font-weight: 500;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

:is(#edit-remaining-modal, #edit-vat-remaining-modal) .modal-storage-product-price {
    border: 1px solid #f58f2e !important;
    background-color: #ff9f43 !important;
    background-image: linear-gradient(180deg, #ffac5c 0%, #ff9f43 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 2px rgba(245, 143, 46, 0.35), 0 2px 6px rgba(255, 159, 67, 0.25);
}

:is(#edit-remaining-modal, #edit-vat-remaining-modal) .modal-storage-product-price:hover {
    background-image: linear-gradient(180deg, #ff9f43 0%, #f58f2e 100%) !important;
}

:is(#edit-remaining-modal, #edit-vat-remaining-modal) .btn-success.w-100:not(:disabled) {
    border: 1px solid #1e8e3a !important;
    background-color: #28a745 !important;
    background-image: linear-gradient(180deg, #34b853 0%, #28a745 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 2px rgba(30, 142, 58, 0.4), 0 2px 6px rgba(40, 167, 69, 0.25);
}

:is(#edit-remaining-modal, #edit-vat-remaining-modal) .btn-success.w-100:not(:disabled):hover {
    background-image: linear-gradient(180deg, #28a745 0%, #218838 100%) !important;
}

:is(#edit-remaining-modal, #edit-vat-remaining-modal) .btn-danger.w-100 {
    border: 1px solid #bd2130 !important;
    background-color: #dc3545 !important;
    background-image: linear-gradient(180deg, #e4606d 0%, #dc3545 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 2px rgba(189, 33, 48, 0.4), 0 2px 6px rgba(220, 53, 69, 0.25);
}

:is(#edit-remaining-modal, #edit-vat-remaining-modal) .btn-danger.w-100:hover {
    background-image: linear-gradient(180deg, #dc3545 0%, #c82333 100%) !important;
}

:is(#edit-remaining-modal, #edit-vat-remaining-modal) .btn.w-100:active:not(:disabled),
:is(#edit-remaining-modal, #edit-vat-remaining-modal) .modal-storage-product-price:active {
    transform: translateY(1px);
}

/*
 * หน้าต่างสั่งซื้อสินค้า (#ordering-product-modal)
 * O=… (ส้ม, ตัวที่เลือกอยู่ = เขียว) / ยืนยัน (เขียว) / จอง (ส้ม) / ยกเลิก (แดง) เก็บสีเดิม ไม่แตะขนาด
 */
#ordering-product-modal .ordering-product-set-order-amount,
#ordering-product-modal .btn.w-100 {
    border-radius: 8px !important;
    font-weight: 500;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

#ordering-product-modal .ordering-product-set-order-amount,
#ordering-product-modal .btn-primary.w-100 {
    border: 1px solid #f58f2e !important;
    background-color: #ff9f43 !important;
    background-image: linear-gradient(180deg, #ffac5c 0%, #ff9f43 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 2px rgba(245, 143, 46, 0.35), 0 2px 6px rgba(255, 159, 67, 0.25);
}

#ordering-product-modal .ordering-product-set-order-amount:hover:not(.active),
#ordering-product-modal .btn-primary.w-100:hover {
    background-image: linear-gradient(180deg, #ff9f43 0%, #f58f2e 100%) !important;
}

#ordering-product-modal .ordering-product-set-order-amount.active,
#ordering-product-modal .btn-success.w-100 {
    border: 1px solid #1e8e3a !important;
    background-color: #28a745 !important;
    background-image: linear-gradient(180deg, #34b853 0%, #28a745 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 2px rgba(30, 142, 58, 0.4), 0 2px 6px rgba(40, 167, 69, 0.25);
}

#ordering-product-modal .btn-success.w-100:hover {
    background-image: linear-gradient(180deg, #28a745 0%, #218838 100%) !important;
}

#ordering-product-modal .btn-danger.w-100 {
    border: 1px solid #bd2130 !important;
    background-color: #dc3545 !important;
    background-image: linear-gradient(180deg, #e4606d 0%, #dc3545 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 2px rgba(189, 33, 48, 0.4), 0 2px 6px rgba(220, 53, 69, 0.25);
}

#ordering-product-modal .btn-danger.w-100:hover {
    background-image: linear-gradient(180deg, #dc3545 0%, #c82333 100%) !important;
}

#ordering-product-modal .btn:active:not(:disabled) {
    transform: translateY(1px);
}

/*
 * ชั้นฐานสำหรับปุ่มสีหลักทั้งระบบ (primary/success/danger/warning) ที่ไม่ได้อยู่ในกลุ่มด้านบน
 * เช่น ปุ่มในหน้าต่างพิมพ์ป้าย, คัดลอก, แถวปุ่มหน้าโอน/สั่งซื้อ/เจ้าหนี้, ปุ่ม O=… และปุ่ม 3เดือน/6เดือน/1ปี
 * - เฉดสว่างเป็นสีขาวโปร่งใสซ้อนบนสีเดิมของปุ่ม จึงไม่ทับสีที่แต่ละหน้ากำหนดไว้
 * - ไม่ใช้ !important และไม่แตะขนาด กฎเฉพาะกลุ่มด้านบน/สไตล์ของหน้าจะชนะเสมอ
 */
.btn:is(.btn-primary, .btn-success, .btn-danger, .btn-warning) {
    border-radius: 8px;
    font-weight: 500;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 100%);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.07);
    transition: background-color 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease, transform 0.1s ease;
}

.btn:is(.btn-primary, .btn-success, .btn-danger, .btn-warning):hover:not(:disabled):not(.disabled) {
    filter: brightness(0.95);
}

.btn:is(.btn-primary, .btn-success, .btn-danger, .btn-warning):disabled,
.btn:is(.btn-primary, .btn-success, .btn-danger, .btn-warning).disabled {
    background-image: none;
    box-shadow: none;
}

/* ปุ่มที่ต่อกันเป็นกลุ่ม (ปุ่ม + ลูกศร dropdown): โค้งเฉพาะปลายนอก */
.btn-group > .btn:is(.btn-primary, .btn-success, .btn-danger, .btn-warning):not(#_):has(+ .btn) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.btn-group > .btn + .btn:is(.btn-primary, .btn-success, .btn-danger, .btn-warning):not(#_) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/*
 * ปุ่มเลือกวิธีชำระ/ช่องทางขาย (.pay-condition / .distribution-channel: หน้าร้าน ขนส่ง สด เชื่อ)
 * สีเดิม: ยังไม่เลือก = ชมพู, เลือกอยู่ (.active) = เขียว เปลี่ยนเฉพาะหน้าตา ไม่แตะขนาด
 */
.pay-condition,
.distribution-channel {
    border-radius: 8px !important;
    font-weight: 500;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
    transition: background-color 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.pay-condition.active,
.distribution-channel.active {
    border-color: #2e8f00 !important;
    box-shadow: 0 1px 2px rgba(46, 143, 0, 0.4), 0 2px 6px rgba(57, 178, 0, 0.28);
}

.pay-condition:hover:not(:disabled),
.distribution-channel:hover:not(:disabled) {
    filter: brightness(0.96);
}

.pay-condition:disabled,
.distribution-channel:disabled {
    box-shadow: none;
    background-image: none;
}

/*
 * หน้าต่างยืนยัน SweetAlert (ตกลง / ยกเลิก): สีน้ำเงิน/แดงเดิมจาก confirmButtonColor / cancelButtonColor
 */
.swal2-popup .swal2-styled {
    border-radius: 8px !important;
    font-weight: 500;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 100%) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.08) !important;
    transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.swal2-popup .swal2-styled:hover {
    filter: brightness(0.94);
}

.swal2-popup .swal2-styled:active {
    transform: translateY(1px);
}

.swal2-popup .swal2-styled:focus {
    box-shadow: 0 0 0 3px rgba(255, 159, 67, 0.35) !important;
}

/*
 * ลูกศรเลื่อนรูป (◀ ▶): สามเหลี่ยมส้ม ขนาดเดิม เพิ่มเงานุ่มและเอฟเฟกต์ตอนชี้เมาส์
 * (ขนาดสามเหลี่ยมมาจาก border ของแต่ละหน้า จึงไม่แตะ)
 */
.arrow-left,
.arrow-right {
    filter: drop-shadow(0 2px 3px rgba(245, 143, 46, 0.45));
    transition: filter 0.15s ease, transform 0.15s ease;
}

.arrow-left {
    border-right-color: #ff9f43;
}

.arrow-right {
    border-left-color: #ff9f43;
}

.arrow-left:hover:not(.slick-disabled) {
    filter: drop-shadow(0 3px 5px rgba(245, 143, 46, 0.6)) brightness(0.95);
    transform: translateX(-2px);
}

.arrow-right:hover:not(.slick-disabled) {
    filter: drop-shadow(0 3px 5px rgba(245, 143, 46, 0.6)) brightness(0.95);
    transform: translateX(2px);
}

.arrow-left:active:not(.slick-disabled),
.arrow-right:active:not(.slick-disabled) {
    transform: scale(0.94);
}

/*
 * ป้ายสถานะบิล (#bill_status / #print_status เช่น "ยังไม่ชำระ", "ยังไม่ได้พิมพ์")
 * สีพื้นมาจาก inline style ของแต่ละหน้า (แดง/เขียว/สีสถานะจากระบบ) จึงใช้เฉดขาวโปร่งใสซ้อนบน
 * ไม่แตะความสูง/ความกว้าง (หน้าตั้งความสูงให้เท่าปุ่มแยกบิลเอง)
 */
#bill_status,
#print_status {
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
    opacity: 1 !important;
    cursor: default;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
}

#bill_status:placeholder-shown,
#print_status:placeholder-shown {
    text-shadow: none;
}

/*
 * แท็บช่องทางชำระแบบแถวเดียว (เงินสด/โอน/เช็ค|QR/บัตร ...) ใน #payment-service-modal
 * ทำให้เหมือนแท็บแบบซ้อนสองแถวของหน้าขาย (.payment-tab-stacked ใน modal-payment-service.blade.php)
 * - กรอบโค้ง ช่องเท่ากัน ช่องที่เลือก = ส้มไล่เฉดตัวอักษรขาว ความสูง 80px เดิมไม่เปลี่ยน
 */
#payment-service-modal .payment-tab:not(.payment-tab-stacked) {
    border-radius: 12px;
    overflow: hidden;
    background-color: #f4f6f8;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

#payment-service-modal .payment-tab:not(.payment-tab-stacked) > ul {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

#payment-service-modal .payment-tab:not(.payment-tab-stacked) > ul li {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    margin: 0;
    padding: 0 8px;
    border: 1px solid #e2e8f0;
    border-bottom-width: 1px;
    background: #ffffff;
    color: #334155;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

#payment-service-modal .payment-tab:not(.payment-tab-stacked) > ul li > a {
    width: 100%;
    color: inherit;
    white-space: nowrap;
}

#payment-service-modal .payment-tab:not(.payment-tab-stacked) > ul li:hover {
    border-color: #ffd6ad;
    background: #fff7ee;
    color: #b45309;
}

#payment-service-modal .payment-tab:not(.payment-tab-stacked) > ul li.active,
#payment-service-modal .payment-tab:not(.payment-tab-stacked) > ul li.active:hover {
    border: 1px solid #f58f2e;
    background: linear-gradient(180deg, #ffac5c 0%, #ff9f43 100%);
    color: #ffffff;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.12);
}

/*
 * ไอคอน + ข้อความ บนปุ่มแถบเครื่องมือหลักของหน้าเอกสาร (.button-div) แบบเดียวกับปุ่มมือถือ (fa-camera + ข้อความ)
 * ใช้ ::before ตาม id ของปุ่ม เพราะบางหน้า JS เปลี่ยนข้อความปุ่ม (เช่น .text("พักบิล")) ซึ่งจะลบ <i> ทิ้ง
 * ปุ่ม "+ เพิ่มใหม่" มีเครื่องหมาย + ในข้อความอยู่แล้วจึงไม่ใส่ไอคอนซ้ำ
 */
.button-div > #edit_button::before,
.button-div > #delete_button::before,
.button-div > #save_button::before,
.button-div > #print_button::before,
.button-div > #payment_button::before,
.button-div > #cancel_bill_button::before,
.button-div > #hold_bill_button::before,
.button-div > #seek_product_button::before,
.button-div > #split_bill_button::before,
.button-div > #copy_button::before,
.button-div > #arrange_product_button::before,
.button-div > #merge_lines_button::before {
    display: inline-block;
    margin-right: 6px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 0.9em;
    font-style: normal;
    line-height: 1;
}

.button-div > #edit_button::before { content: "\f304"; }
.button-div > #delete_button::before { content: "\f2ed"; }
.button-div > #save_button::before { content: "\f0c7"; }
.button-div > #print_button::before { content: "\f02f"; }
.button-div > #payment_button::before { content: "\f53a"; }
.button-div > #cancel_bill_button::before { content: "\f05e"; }
.button-div > #hold_bill_button::before { content: "\f28b"; }
.button-div > #seek_product_button::before { content: "\f06e"; }
.button-div > #split_bill_button::before { content: "\f0c4"; }
.button-div > #copy_button::before { content: "\f0c5"; }
.button-div > #arrange_product_button::before { content: "\f468"; }
.button-div > #merge_lines_button::before { content: "\f5fd"; }

/* ไอคอน + ข้อความ ปุ่ม PASS และปุ่มแพ็ค (id เปลี่ยนจาก hold_bill_button เป็น packing_product_button ตอนดูบิลที่บันทึกแล้ว) */
.button-div > #pass_button::before,
.button-div > #packing_product_button::before,
.button-div > #mobile_packing_product_button::before {
    display: inline-block;
    margin-right: 6px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 0.9em;
    font-style: normal;
    line-height: 1;
}

.button-div > #pass_button::before { content: "\f058"; }
.button-div > #packing_product_button::before,
.button-div > #mobile_packing_product_button::before { content: "\f466"; }

/*
 * ปุ่มเลือกเงื่อนไข/ประเภทบิลของหน้าซื้อ (.purchase-condition: สด/เชื่อ, .bill-type: NO-VAT/VAT)
 * ใช้สไตล์เดียวกับ .pay-condition / .distribution-channel ของหน้าขาย (ชมพู = ยังไม่เลือก, เขียว = เลือกอยู่)
 */
.purchase-condition,
.bill-type {
    border-radius: 8px !important;
    font-weight: 500;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
    transition: background-color 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.purchase-condition.active,
.bill-type.active {
    border-color: #2e8f00 !important;
    box-shadow: 0 1px 2px rgba(46, 143, 0, 0.4), 0 2px 6px rgba(57, 178, 0, 0.28);
}

.purchase-condition:hover:not(:disabled),
.bill-type:hover:not(:disabled) {
    filter: brightness(0.96);
}

.purchase-condition:disabled,
.bill-type:disabled {
    box-shadow: none;
    background-image: none;
}

/* วงโฟกัสของปุ่มกลุ่มนี้: เดิมเป็นวงสีฟ้าของ Bootstrap เปลี่ยนเป็นโทนส้มของระบบ */
.pay-condition:focus,
.pay-condition:focus-visible,
.distribution-channel:focus,
.distribution-channel:focus-visible,
.purchase-condition:focus,
.purchase-condition:focus-visible,
.bill-type:focus,
.bill-type:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(255, 159, 67, 0.45) !important;
}

/* ปุ่มคืนสด/คืนเชื่อ (.purchase-return-condition หน้าส่งคืนซื้อ, .return-condition หน้ารับคืน/ลดหนี้ขาย) ใช้สไตล์เดียวกับกลุ่มด้านบน */
:is(.purchase-return-condition, .return-condition) {
    border-radius: 8px !important;
    font-weight: 500;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
    transition: background-color 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

:is(.purchase-return-condition, .return-condition).active {
    border-color: #2e8f00 !important;
    box-shadow: 0 1px 2px rgba(46, 143, 0, 0.4), 0 2px 6px rgba(57, 178, 0, 0.28);
}

:is(.purchase-return-condition, .return-condition):hover:not(:disabled) {
    filter: brightness(0.96);
}

:is(.purchase-return-condition, .return-condition):disabled {
    box-shadow: none;
    background-image: none;
}

:is(.purchase-return-condition, .return-condition):is(:focus, :focus-visible) {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(255, 159, 67, 0.45) !important;
}

/*
 * "รวมรายการสินค้า" (checkbox #is_accume + label) แสดงเป็นปุ่มสลับ ไอคอน + ข้อความ
 * - ไม่แก้ HTML: กล่องติ๊กยังอยู่ (ซ่อนด้วย opacity) JS/ฟอร์มอ่านค่า :checked และ disabled เหมือนเดิม
 * - ยังไม่เลือก = ขาวขอบส้ม, เลือกอยู่ = เขียว (เหมือนปุ่มทุน/ขาย), ปิดใช้งาน = จางลง
 */
.form-check:has(> input#is_accume) {
    display: inline-block;
    position: relative;
    min-height: 0;
    margin: 0;
    padding: 0;
}

.form-check > input#is_accume {
    position: absolute;
    float: none;
    width: 0;
    height: 0;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.form-check > input#is_accume + label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid #ff9f43;
    border-radius: 8px;
    background-color: #ffffff;
    color: #f58f2e;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.form-check > input#is_accume + label::before {
    content: "\f5fd";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 0.9em;
    line-height: 1;
}

.form-check > input#is_accume + label:hover {
    background-color: #fff3e6;
}

.form-check > input#is_accume:checked + label {
    border-color: #1e8e3a;
    background-color: #28a745;
    background-image: linear-gradient(180deg, #34b853 0%, #28a745 100%);
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(30, 142, 58, 0.4), 0 2px 6px rgba(40, 167, 69, 0.25);
}

.form-check > input#is_accume:focus-visible + label {
    box-shadow: 0 0 0 3px rgba(255, 159, 67, 0.45);
}

.form-check > input#is_accume:disabled + label {
    opacity: 0.6;
    cursor: not-allowed;
}

/*
 * ข้อความปุ่ม "รวมรายการ/แยกรายการ" เปลี่ยนตามสถานะของ checkbox #is_accume (ค่าเริ่มต้นของระบบ = ติ๊ก = รวม)
 * - ติ๊กอยู่ = เขียว "รวมรายการ"  | กดแล้วไม่ติ๊ก = ส้ม "แยกรายการ"
 * ข้อความเดิมใน label ถูกซ่อนด้วย font-size 0 แล้วแสดงข้อความตามสถานะด้วย ::after (HTML/JS ไม่เปลี่ยน)
 */
.form-check > input#is_accume + label {
    font-size: 0;
    border-color: #f58f2e;
    background-color: #ff9f43;
    background-image: linear-gradient(180deg, #ffac5c 0%, #ff9f43 100%);
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(245, 143, 46, 0.35), 0 2px 6px rgba(255, 159, 67, 0.25);
}

.form-check > input#is_accume + label:hover {
    background-image: linear-gradient(180deg, #ff9f43 0%, #f58f2e 100%);
    background-color: #f58f2e;
}

.form-check > input#is_accume + label::before,
.form-check > input#is_accume + label::after {
    font-size: 0.875rem;
}

.form-check > input#is_accume + label::before {
    content: "\f0db";
}

.form-check > input#is_accume + label::after {
    content: "แยกรายการ";
    font-family: inherit;
    font-weight: 500;
    line-height: 1;
}

.form-check > input#is_accume:checked + label::before {
    content: "\f5fd";
}

.form-check > input#is_accume:checked + label::after {
    content: "รวมรายการ";
}

.form-check > input#is_accume:checked + label:hover {
    background-color: #218838;
    background-image: linear-gradient(180deg, #28a745 0%, #218838 100%);
}

/*
 * ไอคอน + ข้อความ บนปุ่มเลือกช่องทางขาย/เงื่อนไขชำระ (หน้าร้าน ขนส่ง สด เชื่อ คืนสด คืนเชื่อ)
 * ปุ่มเหล่านี้เดิมเป็น <input type="button"> ซึ่งใส่ ::before ไม่ได้ จึงเปลี่ยนเป็น <button> (ค่า value เดิมคงไว้)
 * เลือกไอคอนตามค่า value จึงใช้ได้ทั้งหน้าขายและหน้าซื้อ
 */
:is(.distribution-channel, .pay-condition, .purchase-condition, .purchase-return-condition, .return-condition)::before {
    display: inline-block;
    margin-right: 6px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 0.9em;
    font-style: normal;
    line-height: 1;
}

:is(.distribution-channel, .pay-condition, .purchase-condition, .purchase-return-condition, .return-condition)[value="หน้าร้าน"]::before { content: "\f54e"; }
:is(.distribution-channel, .pay-condition, .purchase-condition, .purchase-return-condition, .return-condition)[value="ขนส่ง"]::before { content: "\f0d1"; }
:is(.distribution-channel, .pay-condition, .purchase-condition, .purchase-return-condition, .return-condition)[value="สด"]::before,
:is(.distribution-channel, .pay-condition, .purchase-condition, .purchase-return-condition, .return-condition)[value="คืนสด"]::before { content: "\f53a"; }
:is(.distribution-channel, .pay-condition, .purchase-condition, .purchase-return-condition, .return-condition)[value="เชื่อ"]::before,
:is(.distribution-channel, .pay-condition, .purchase-condition, .purchase-return-condition, .return-condition)[value="คืนเชื่อ"]::before { content: "\f09d"; }

/* ไอคอน + ข้อความ ปุ่มประเภทเอกสารของหน้าใบเสนอราคา/ใบสั่งจัด (.bill-type: ใบเสนอราคา / สั่งจัดสินค้า) เปลี่ยนจาก <input> เป็น <button> */
.bill-type[value="ใบเสนอราคา"]::before,
.bill-type[value="สั่งจัดสินค้า"]::before {
    display: inline-block;
    margin-right: 6px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 0.9em;
    font-style: normal;
    line-height: 1;
}

.bill-type[value="ใบเสนอราคา"]::before { content: "\f571"; }
.bill-type[value="สั่งจัดสินค้า"]::before { content: "\f49e"; }

/* ไอคอน + ข้อความ ปุ่มประเภทใบจัดแพ็ค (.bill-type: แตกแพ็ค / รวมแพ็ค) */
.bill-type[value="แตกแพ็ค"]::before,
.bill-type[value="รวมแพ็ค"]::before {
    display: inline-block;
    margin-right: 6px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 0.9em;
    font-style: normal;
    line-height: 1;
}

.bill-type[value="แตกแพ็ค"]::before { content: "\f0c4"; }
.bill-type[value="รวมแพ็ค"]::before { content: "\f466"; }

/* ไอคอน + ข้อความ ปุ่มประเภทใบเชื่อมโยง (.bill-type: ปรับราคาขาย / เลือกสินค้า / ปรับและเลือก) */
.bill-type[value="ปรับราคาขาย"]::before,
.bill-type[value="เลือกสินค้า"]::before,
.bill-type[value="ปรับและเลือก"]::before {
    display: inline-block;
    margin-right: 6px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 0.9em;
    font-style: normal;
    line-height: 1;
}

.bill-type[value="ปรับราคาขาย"]::before { content: "\f02c"; }
.bill-type[value="เลือกสินค้า"]::before { content: "\f14a"; }
.bill-type[value="ปรับและเลือก"]::before { content: "\f1de"; }

/* ไอคอน + ข้อความ ปุ่มกรองสถานะสินค้า (ทั้งหมด / ใช้งาน / ไม่ใช้งาน) */
:is(.product-status-filter-btn, .party-status-filter-btn)::before {
    display: inline-block;
    margin-right: 4px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 0.85em;
    font-style: normal;
    line-height: 1;
}

:is(.product-status-filter-btn, .party-status-filter-btn)[data-filter="all"]::before { content: "\f00a"; }
:is(.product-status-filter-btn, .party-status-filter-btn)[data-filter="active"]::before { content: "\f058"; }
:is(.product-status-filter-btn, .party-status-filter-btn)[data-filter="inactive"]::before { content: "\f05e"; }

/*
 * แถวหัวข้อรายการสินค้าแคบ (col-md-3): ไอคอนทำให้ปุ่มกรองกว้างขึ้นจนปุ่มรีเฟรชตกบรรทัด
 * จึงลด padding ซ้าย/ขวาของปุ่มกรองสถานะและปุ่มทุน/ขาย (ความสูงเดิมไม่เปลี่ยน)
 */
:is(.product-status-filter, .party-status-filter) .btn:is(.product-status-filter-btn, .party-status-filter-btn):not(.swal-btn) {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
}

:is(.product-status-filter-btn, .party-status-filter-btn)::before {
    margin-right: 3px;
}

.btn.toggle-price-column-btn:not(.swal-btn) {
    min-width: 34px;
    padding-left: 0.35rem !important;
    padding-right: 0.35rem !important;
}

/*
 * แถวปุ่มเล็กแนวนอนในคอลัมน์แคบ (เช่น รีเฟรช/คัดลอก/พิมพ์ ในหน้ารายงาน) พอดีเป๊ะ เกิน 1-2px ปุ่มก็ตัดบรรทัด
 * แล้วดันปุ่มข้าง ๆ ให้สูงเป็น 2 บรรทัด จึงไม่ให้ข้อความปุ่มในแถวแบบนี้ตัดบรรทัด
 */
.d-flex.gap-1 > .btn:is(.btn-primary, .btn-success, .btn-danger, .btn-warning) {
    white-space: nowrap;
}

/*
 * สวิตช์ "ค้นรวม" ของหน้ารายงาน (#search_toggle): เดิมเป็นกล่องติ๊กเปล่า ๆ ไม่มีข้อความ
 * (ติ๊ก = ค้นเพิ่มจากข้อมูลสินค้า/ข้อมูลที่เกี่ยวข้องด้วย ดู Report\*Controller เงื่อนไข search_toggle)
 * แสดงเป็นปุ่มสลับ ไอคอน + ข้อความ: ยังไม่เปิด = ขาวขอบส้ม, เปิดอยู่ = เขียว
 * ใช้ pseudo-element บนตัว input เอง (appearance: none) จึงไม่ต้องแก้ HTML ทุกหน้า ค่า :checked/ฟอร์มเหมือนเดิม
 */
.page-wrapper input#search_toggle.form-check-input {
    -webkit-appearance: none;
    appearance: none;
    float: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 74px;
    height: 28px;
    margin: 0;
    padding: 0 8px;
    border: 1px solid #ff9f43 !important;
    border-radius: 8px;
    background-color: #ffffff !important;
    background-image: none !important;
    color: #f58f2e;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.page-wrapper input#search_toggle.form-check-input::before {
    content: "\f00e";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 0.9em;
}

.page-wrapper input#search_toggle.form-check-input::after {
    content: "ค้นรวม";
    font-family: inherit;
}

.page-wrapper input#search_toggle.form-check-input:hover {
    background-color: #fff3e6 !important;
}

.page-wrapper input#search_toggle.form-check-input:checked {
    border-color: #1e8e3a !important;
    background-color: #28a745 !important;
    background-image: linear-gradient(180deg, #34b853 0%, #28a745 100%) !important;
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(30, 142, 58, 0.4), 0 2px 6px rgba(40, 167, 69, 0.25);
}

.page-wrapper input#search_toggle.form-check-input:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 159, 67, 0.45);
}

/*
 * ปุ่มสลับ "ค้นหาเจาะจง / ค้นหาโดยรวม" ของหน้ารายงาน (สร้างโดย components/sidebar-hamburger-report แทน select #search_option)
 * เจาะจง (ค่าเริ่มต้น) = ส้ม, โดยรวม = เขียว  ไอคอน + ข้อความ ขนาดเท่าช่องกรองเดิม
 */
.search-option-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px !important;
    white-space: nowrap;
}

.search-option-toggle.is-overall {
    border-color: #1e8e3a !important;
    background-color: #28a745 !important;
    background-image: linear-gradient(180deg, #34b853 0%, #28a745 100%) !important;
    box-shadow: 0 1px 2px rgba(30, 142, 58, 0.4), 0 2px 6px rgba(40, 167, 69, 0.25) !important;
}

/* สวิตช์ "ค้นรวม": สไตล์เดียวกับปุ่มสลับ "ค้นหาเจาะจง/ค้นหาโดยรวม" (ปิด = ส้มทึบ, เปิด = เขียว) ทับกฎขาวขอบส้มด้านบน */
.page-wrapper input#search_toggle.form-check-input {
    border-color: #f58f2e !important;
    background-color: #ff9f43 !important;
    background-image: linear-gradient(180deg, #ffac5c 0%, #ff9f43 100%) !important;
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(245, 143, 46, 0.35), 0 2px 6px rgba(255, 159, 67, 0.25);
}

.page-wrapper input#search_toggle.form-check-input:hover {
    background-color: #f58f2e !important;
    background-image: linear-gradient(180deg, #ff9f43 0%, #f58f2e 100%) !important;
}

.page-wrapper input#search_toggle.form-check-input:checked:hover {
    background-color: #218838 !important;
    background-image: linear-gradient(180deg, #28a745 0%, #218838 100%) !important;
}

/*
 * สวิตช์ #search_toggle ใช้คำและไอคอนเดียวกับปุ่ม "ค้นหาเจาะจง / ค้นหาโดยรวม" (.search-option-toggle)
 * ปิด = ค้นหาเจาะจง (ไอคอนเป้า) | เปิด = ค้นหาโดยรวม (ไอคอนลูกโลก) ทับข้อความ "ค้นรวม" ด้านบน
 */
.page-wrapper input#search_toggle.form-check-input {
    width: 108px;
}

.page-wrapper input#search_toggle.form-check-input::before {
    content: "\f05b";
}

.page-wrapper input#search_toggle.form-check-input::after {
    content: "ค้นหาเจาะจง";
}

.page-wrapper input#search_toggle.form-check-input:checked::before {
    content: "\f0ac";
}

.page-wrapper input#search_toggle.form-check-input:checked::after {
    content: "ค้นหาโดยรวม";
}