@import url('../webfonts/prompt.css');
@import url('../lib/toastr/toastr.min.css');

/* ============================================================================
   Active WMS — base styles
   ยึดชุดเดียวกับ Active HRM / Yard.Management.Web เพื่อให้หน้าตาระบบในเครือ
   ไปทางเดียวกัน  ตารางข้อมูลอยู่ที่ css/table.css (โหลดถัดจากไฟล์นี้)
   ============================================================================ */

:root {
    --bs-body-font-family: Prompt, sans-serif;
    --bs-body-font-size: 0.85rem;
}

/* ============================================================
   ชุดสีกลาง ใช้ร่วมกันระหว่างตารางผลค้นหา หน้า Details และโมดัล
   (table.css อ้างอิงตัวแปรชุดนี้)
   ============================================================ */
:root {
    --sr-head-bg: #f7f8fa;
    --sr-head-fg: #64748b;
    --sr-head-line: #e2e5ea;
    --sr-row-line: #eef0f3;
    --sr-col-line: #d9dde3;   /* เส้นคั่นคอลัมน์ — light ต้องเข้มกว่าเส้นแถวนิดถึงจะเห็น */
    --sr-stripe: #fafbfc;
    --sr-hover: rgba(var(--bs-primary-rgb), .08);
    --sr-foot-bg: #f7f8fa;
    --sr-label-fg: #6b7280;
    --sr-readonly-bg: rgba(0, 0, 0, .035);
    --sr-group-bg: #eef2f7;
    /* ความเข้มพื้นแถวสถานะ (tr.table-danger / -warning / ...) — table.css
       .30 บนพื้นขาว = สีเดียวกับ .alert-danger ของธีม (--bs-danger-bg-subtle) */
    --sr-tint-bg: .30;
    --sr-tint-stripe: .05;
    --sr-tint-hover: .12;
}

[data-bs-theme=dark] {
    --sr-head-bg: #262d33;
    --sr-head-fg: #9aa5b1;
    --sr-head-line: rgba(255, 255, 255, .09);
    --sr-row-line: rgba(255, 255, 255, .06);
    --sr-col-line: rgba(255, 255, 255, .08);   /* dark ต้องเข้มกว่าเส้นแถวถึงจะเห็นการแบ่งคอลัมน์บนพื้นเข้ม */
    --sr-stripe: rgba(255, 255, 255, .025);
    --sr-hover: rgba(var(--bs-primary-rgb), .18);
    --sr-foot-bg: #262d33;
    --sr-label-fg: #9aa5b1;
    --sr-readonly-bg: rgba(255, 255, 255, .05);
    --sr-group-bg: rgba(255, 255, 255, .05);
    --sr-tint-bg: .14;
    --sr-tint-stripe: .05;
    --sr-tint-hover: .14;
}

/* บนมือถือ ย่อฟอนต์ฐานทั้งเว็บ */
@media (max-width: 768px) {
    :root {
        --bs-body-font-size: 0.72rem;
    }

    table {
        font-size: 0.68rem;
    }

    .btn {
        font-size: 0.7rem;
        padding: 2px 6px;
    }

    .btn i {
        font-size: 0.65rem;
    }

    nav[aria-label="Page navigation"] .pagination.justify-content-end {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start !important;
        -webkit-overflow-scrolling: touch;
    }

    .navbar-nav {
        display: none !important;
    }
}

@media (max-width: 480px) {
    :root {
        --bs-body-font-size: 0.68rem;
    }

    table {
        font-size: 0.58rem;
    }
}

/* ------------------------------------------------------------- page buttons */

/* ปุ่มมุมขวาบนของหน้า (@section PageButton ใน _Layout)
   บางหน้าเผลอติด utility margin (mb-10px ฯลฯ) หรือใส่ fa-lg เฉพาะบางปุ่ม
   ทำให้ปุ่มสูงไม่เท่ากัน/ไม่อยู่ระดับเดียวกัน จัดเป็น flex + ล้าง margin
   แล้วเว้นระยะด้วย gap แทน ทุกหน้าจึงเรียงระดับเดียวกันหมด */
#div-page-button {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .375rem;
}

#div-page-button > .btn,
#div-page-button > .btn-group {
    margin: 0 !important; /* utility ของธีมเป็น !important จึงต้องทับด้วย !important */
}

/* กัน fa-lg / fa-2x ทำให้ปุ่มใดปุ่มหนึ่งสูงกว่าเพื่อน (รวมปุ่ม dropdown ที่รวมปุ่มเอกสารไว้) */
#div-page-button > .btn > i,
#div-page-button > .btn-group > .btn > i {
    font-size: 1em;
    line-height: inherit;
    vertical-align: middle;
}

/* -------------------------------------------------------------- form fields */

.form-control {
    padding: .4375rem .8rem;
    font-size: var(--bs-body-font-size);
    font-weight: var(--bs-body-font-weight);
    line-height: var(--bs-body-line-height);
    -webkit-appearance: auto;
    appearance: auto;
}

/* ป้ายกำกับฟิลด์ — เล็กลง สีอ่อนลง ให้ค่าที่กรอกเด่นกว่าชื่อฟิลด์
   ใช้ทั้งฟอร์มค้นหา (หน้า list) และฟอร์มในหน้า details */
.form-label {
    margin-bottom: .2rem;
    font-size: .7rem;
    font-weight: 500;
    color: var(--sr-label-fg);
}

.form-label > i {
    opacity: .6;
    margin-right: .1rem;
}

label.required:after {
    content: "*";
    color: red;
    padding-left: 2px;
}

.form-group {
    margin-bottom: 7px;
}

.form-control::-moz-placeholder {
    color: #6c757d;
    opacity: 0.4;
}

.form-control::placeholder {
    color: #6c757d;
    opacity: 0.4;
}

input[type="text"].integer,
input[type="text"].number {
    text-align: right !important;
}

.text-right {
    text-align: right !important;
}

.pointer {
    cursor: pointer;
}

.text-small {
    font-size: smaller;
}

/* ----------------------------------------------------------------- tables */

.table thead th {
    text-align: center;
    vertical-align: middle;
}

table thead th.no {
    width: 60px;
}

/* ช่องที่เป็น input ล้วน ไม่ต้องมี padding ของ cell ซ้อนอีกชั้น */
table tbody td.input {
    padding: 0;
}

table.table-no tbody {
    counter-reset: rowNumber;
}

table.table-no tbody tr {
    counter-increment: rowNumber;
}

table.table-no tbody tr td:first-child:not([colspan])::before {
    content: counter(rowNumber);
    min-width: 1em;
    margin-right: 0.5em;
}

/* ------------------------------------------------------------------- pager */

.pagination .page-link {
    padding: 2px 8px;
    font-size: 0.72rem;
    min-width: 28px;
    text-align: center;
}

.page-size {
    height: 24px;
    border-radius: var(--bs-pagination-border-radius);
    position: relative;
    display: block;
    margin: 0 .4rem;
    padding: 0 .3rem;
    font-size: 0.72rem;
    color: var(--bs-pagination-color);
    text-decoration: none;
    background-color: var(--bs-pagination-bg);
    border: var(--bs-pagination-border-width) solid var(--bs-pagination-border-color);
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
}

nav[aria-label="Page navigation"] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

/* ยกเลิก float เดิม เพราะ flex จัดการให้แล้ว */
nav[aria-label="Page navigation"] .pagination.float-start {
    float: none !important;
    margin-bottom: 0;
    align-items: center;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}

nav[aria-label="Page navigation"] .pagination {
    flex-wrap: wrap;
    margin-bottom: 0;
}

/* แถบเลขหน้า = ส่วนท้ายของการ์ดผลค้นหา (ตารางชนขอบการ์ดแล้ว เลขหน้าจึงต้องมี
   ระยะขอบของตัวเอง) */
.app-pager {
    padding: .5rem .6rem;
    border-top: 1px solid var(--sr-row-line);
    background-color: var(--sr-foot-bg);
}

/* --------------------------------------------------------------- component */

.breadcrumb {
    --bs-breadcrumb-font-size: 0.75rem;
}

.panel .panel-body {
    padding: 10px;
}

.profile-header .profile-header-cover {
    background-image: url('');
}

.ui-autocomplete {
    max-height: 150px;
    overflow-y: auto;
    z-index: 2147483647;
}

/* Color Admin v6 จัด jQuery UI autocomplete เป็น .875rem + รายการตัวหนา (600) + padding ใหญ่
   (selector ของธีมคือ .ui-widget.ui-autocomplete ... จึงต้องใช้ตัวเดียวกันถึงจะทับได้)
   ให้กลับมาเป็นตัวปกติ ขนาดเดียวกับ option ใน select */
.ui-widget.ui-autocomplete {
    font-size: var(--bs-body-font-size);
    padding: .25rem 0;
}

.ui-widget.ui-autocomplete .ui-menu-item-wrapper {
    font-weight: 400;
    padding: .35rem .75rem;
}

.datepicker,
.datepicker-dropdown,
.ui-datepicker {
    z-index: 2147483647 !important;
}

input.hasDatepicker[disabled] + img.ui-datepicker-trigger {
    display: none;
}

li.list-group-item label.form-check-label {
    padding-left: 6px;
}

.table-container {
    height: 400px;
    overflow: auto;
    position: relative;
}

.table-container table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

.table-container table {
    width: 100%;
    border-collapse: collapse;
}

/* ทั้งสอง selector ต้องมี .table-container นำหน้า ถ้าเขียนเป็น ".table-container th, td"
   จะไปใส่กรอบ 1px #ddd กับ padding 10px ให้ <td> ทั้งระบบ */
.table-container th,
.table-container td {
    padding: 10px;
    text-align: left;
    border: 1px solid var(--bs-border-color);
}

/* ------------------------------------------------------------- dark theme */

[data-bs-theme=dark] .modal-content {
    --bs-modal-bg: var(--bs-component-modal-bg);
}

/* กล่องแจ้งเตือน/ยืนยันของ sysDialog (common.js) — มุมมน + กรอบให้เห็นเป็นกล่อง
   overflow:hidden ให้แถบสีของหัวกล่องโค้งตามมุมด้วย */
.sys-dialog .modal-content {
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}

[data-bs-theme=dark] .sys-dialog .modal-content {
    border-color: rgba(255, 255, 255, .2);
}

.sys-dialog .modal-header {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

[data-bs-theme=dark] .modal-content :disabled {
    background-color: var(--bs-gray-600);
}

[data-bs-theme=dark] select.parsley-error,
[data-bs-theme=dark] input[type="text"].parsley-error,
[data-bs-theme=dark] textarea.parsley-error {
    background-color: var(--bs-gray-800) !important;
}

[data-bs-theme=dark] select.parsley-success,
[data-bs-theme=dark] input[type="text"].parsley-success,
[data-bs-theme=dark] textarea.parsley-success {
    background-color: var(--bs-gray-800) !important;
}

/* ธีมตรึงสีตัวอักษร/ขอบของ .btn-outline-dark เป็น #2d353c ตายตัวทั้งสองธีม
   พอสลับเป็น dark ปุ่มจะจมไปกับพื้นหลัง — ธีมมืดจึงพลิกเป็นเทาอ่อนแทน */
[data-bs-theme=dark] .btn-outline-dark {
    --bs-btn-color: #adb5bd;
    --bs-btn-border-color: #5c666f;
    --bs-btn-hover-color: #1d2225;
    --bs-btn-hover-bg: #adb5bd;
    --bs-btn-hover-border-color: #adb5bd;
    --bs-btn-focus-shadow-rgb: 173, 181, 189;
    --bs-btn-active-color: #1d2225;
    --bs-btn-active-bg: #adb5bd;
    --bs-btn-active-border-color: #adb5bd;
    --bs-btn-disabled-color: #6c757d;
    --bs-btn-disabled-border-color: #454d54;
}

/* ============================================================
   Sidebar — ลดขนาดตัวหนังสือลง ~20% จากค่าเดิมของธีม
   (โหลดหลัง app.min.css และ specificity เท่ากัน จึงทับค่าเดิมได้)
   ============================================================ */

.app-sidebar .menu .menu-item .menu-link {
    font-size: .85rem;
}

.app-sidebar .menu .menu-header {
    font-size: 9px;
}

.app-sidebar .menu .menu-item .menu-icon {
    font-size: .8rem;
}

.app-sidebar .menu .menu-caret {
    font-size: .55rem;
}

.app-sidebar .menu .menu-item .menu-link .menu-badge {
    font-size: 8px;
}

/* กล่องโปรไฟล์ใน sidebar ใช้หน้าตา default ของ Color Admin v6 (cover ภูเขาหิมะ, avatar ซ้อนบนชื่อ, ตัวอักษรขาว)
   ตัดชื่อผู้ใช้ที่ยาวเกินด้วย ellipsis เท่านั้น */
.app-sidebar .menu .menu-profile .menu-link .menu-profile-info .flex-grow-1 {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* เซลล์ตารางข้อความยาว (เช่น Remark บรรทัดใบแจ้งหนี้) — บรรทัดเดียว ตัดเป็น … ข้อความเต็มใส่ไว้ที่ title
   max-width: 0 ให้คอลัมน์ใช้ความกว้างจาก th แทนที่จะยืดตามข้อความ — ตั้ง width / min-width ที่ th ของคอลัมน์นั้น */
td.cell-ellipsis {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* จอลูกหนี้ — คอลัมน์ตัวเงินตั้งแคบไว้ (_DebtorResult) ยอดหลักล้านต้องไม่ตกบรรทัด ให้ขยายคอลัมน์เอง
   เฉพาะตารางนอก (>) ตารางใบแจ้งหนี้ที่กางอยู่ข้างในไม่โดน */
#table-debtor > :is(tbody, tfoot) > tr > td.text-end {
    white-space: nowrap;
}

/* ไอคอนบน header (bell / globe / moon) — demo v6 ใช้ iconify ขนาด ~1.44rem แต่เราใช้ Font Awesome
   ซึ่งจะได้ .875rem จาก .menu-link ถ้าไม่ขยาย */
.app-header .menu .menu-link > i.fa,
.app-header .menu .menu-link > i.fas,
.app-header .menu .menu-link > i.fa-solid {
    font-size: 1.125rem;
}


/* Multi-select dropdown (Html.MultiSelect* + multiSelect ใน site.js) — ปุ่มให้ดูเป็นช่อง select
   ตัวหนังสือที่เลือกยาวเกินตัดด้วย ellipsis ส่วนลูกศรอยู่ขวาสุดเสมอ */
.multi-select .dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.multi-select .dropdown-toggle .multi-select-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.multi-select .dropdown-menu {
    min-width: 100%;
    padding: .25rem 0;
}

.multi-select .dropdown-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem .75rem;
    margin: 0;
    cursor: pointer;
}

.multi-select .dropdown-item .form-check-input {
    margin: 0;
}

.multi-select .multi-select-actions {
    display: flex;
    gap: .5rem;
    padding: .25rem .75rem;
    font-size: .75rem;
}

.multi-select .multi-select-actions a {
    text-decoration: none;
}

.multi-select .multi-select-actions span {
    color: var(--bs-secondary-color);
}

/* jsTree (หน้า WorkTree) — หน้าตาหลักมาจาก Color Admin (app.min.css) ที่ทับ theme default ของ jsTree ไว้แล้ว
   เหลือแค่: แถวที่ติ๊กไม่ต้องไฮไลต์ (checkbox บอกอยู่แล้ว — jsTree ใส่ .jstree-checkbox-no-clicked ให้เมื่อ
   keep_selected_style: false แต่กฎของ Color Admin specificity สูงกว่าของ theme จึงต้องทับซ้ำตรงนี้) */
.work-tree.jstree.jstree-checkbox-no-clicked .jstree-container-ul .jstree-node .jstree-clicked,
.work-tree.jstree.jstree-checkbox-no-clicked .jstree-container-ul .jstree-node .jstree-wholerow-clicked {
    background: transparent;
}

/* ทุก node (กิ่ง Customer / Year และรายการใต้กิ่ง) ไม่ต้องหนา — Color Admin ทำทุก node เป็น 600
   ซึ่งเหมาะกับ tree สั้น ๆ ไม่ใช่รายชื่อร้อยกว่าแถว */
.work-tree.jstree .jstree-container-ul .jstree-node .jstree-anchor {
    font-size: var(--bs-body-font-size);
    font-weight: 400;
}

/* loader ของผลค้นหา (http.loadData / http.getPartialView)
   วางทับผลเดิมแทนการล้างทิ้ง — กล่องผลลัพธ์จึงไม่ยุบแล้วขยายกลับทุกครั้งที่โหลด */
.content-loading {
    position: relative;
}

.content-loading > .content-loader {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

/* พื้นทึบแยกเป็น ::before เพื่อให้ไอคอนไม่จางตามไปด้วย */
.content-loading > .content-loader::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--bs-component-bg, var(--bs-body-bg));
    opacity: .85;
}

.content-loading > .content-loader > i {
    position: relative;
}

/* คอลัมน์ที่มีเฉพาะใบ Bonded (เช่น CIF / Total Tax ในแท็บ Items ของ StockIn) — ใส่ .hide-bonded ที่ table เพื่อซ่อน
   ใช้ CSS แทนการซ่อนทีละช่อง เพราะแถวถูกวาดใหม่ทุกครั้งที่แก้รายการ */
.hide-bonded .col-bonded {
    display: none;
}

/* ช่องกรองที่อยู่ในหัวตาราง (เช่น Doc No. / Entry No. ของบรรทัดใบแจ้งหนี้) — ตัวเล็กกว่าช่องฟอร์มปกติ ให้เลขเอกสารเต็มช่อง */
.form-control.header-filter {
    font-size: .75rem;
    padding: .2rem .4rem;
    min-height: 0;
    height: auto;
}

/* ===== หน้าต่างรอพิมพ์ PDF (printLoading ใน common.js) =====
   ใช้กับ downloadAndOpenPdf / downloadAndOpenPdfPost (site.js) ทุกใบ — รูปเครื่องพิมพ์กับกระดาษเลื่อนออกมา, ข้อความบอกว่ากำลังทำใบอะไร, เวลาที่รอไป
   สีมาจากตัวแปรของ bootstrap ทั้งหมด จึงใช้ได้ทั้งธีมสว่างและธีมมืด */
.print-loading {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, .45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility 0s linear .2s;
}

.print-loading.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .2s ease;
}

.print-loading-card {
    width: 100%;
    max-width: 340px;
    padding: 28px 28px 22px;
    border-radius: 18px;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    box-shadow: 0 24px 60px rgba(15, 23, 42, .28), 0 2px 6px rgba(15, 23, 42, .12);
    text-align: center;
    transform: translateY(12px) scale(.97);
    transition: transform .25s cubic-bezier(.2, .9, .3, 1.2);
}

.print-loading.is-open .print-loading-card {
    transform: none;
}

/* --- เครื่องพิมพ์ --- */
.print-loading-art {
    position: relative;
    width: 120px;
    height: 96px;
    margin: 0 auto 18px;
}

.print-loading-printer {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 26px;
    height: 36px;
    border-radius: 10px;
    background: var(--bs-primary);
    box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .12);
    z-index: 2;
}

/* ช่องกระดาษออก + ไฟสถานะ */
.print-loading-printer::before {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 8px;
    height: 4px;
    border-radius: 2px;
    background: rgba(0, 0, 0, .35);
}

.print-loading-printer::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 6px #4ade80;
    animation: print-led 1s ease-in-out infinite;
}

/* กระดาษต้นฉบับที่เสียบอยู่ด้านบน */
.print-loading-tray {
    position: absolute;
    left: 28px;
    right: 28px;
    top: 6px;
    height: 26px;
    border-radius: 3px 3px 0 0;
    background: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color);
    z-index: 1;
}

/* กระดาษที่เลื่อนออกมา มีเส้นบรรทัดวิ่งตาม */
.print-loading-paper {
    position: absolute;
    left: 30px;
    right: 30px;
    top: 52px;
    height: 0;
    overflow: hidden;
    border-radius: 0 0 3px 3px;
    background:
        repeating-linear-gradient(to bottom, transparent 0 7px, var(--bs-border-color) 7px 9px) 8px 6px / calc(100% - 16px) 100% no-repeat,
        #fff;
    border: 1px solid var(--bs-border-color);
    border-top: 0;
    box-shadow: 0 4px 10px rgba(15, 23, 42, .12);
    z-index: 3;
    animation: print-feed 1.8s cubic-bezier(.45, .05, .35, 1) infinite;
}

/* --- ข้อความ --- */
.print-loading-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--bs-emphasis-color);
    margin-bottom: 4px;
}

.print-loading-step {
    min-height: 1.4em;
    font-size: .8rem;
    color: var(--bs-secondary-color);
    transition: opacity .25s ease;
}

.print-loading-step.is-changing {
    opacity: 0;
}

/* แถบวิ่งแบบไม่รู้ปลาย — ไม่แกล้งทำเป็นเปอร์เซ็นต์ เพราะ ReportService ไม่ได้บอกความคืบหน้า */
.print-loading-bar {
    position: relative;
    height: 4px;
    margin: 16px 0 10px;
    border-radius: 2px;
    overflow: hidden;
    background: var(--bs-secondary-bg);
}

.print-loading-bar::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40%;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--bs-primary), transparent);
    animation: print-bar 1.2s ease-in-out infinite;
}

.print-loading-time {
    font-size: .72rem;
    color: var(--bs-secondary-color);
    font-variant-numeric: tabular-nums;
}

.print-loading-open {
    display: none;
    margin-top: 14px;
}

/* --- เสร็จแล้ว: เครื่องพิมพ์หาย ติ๊กถูกขึ้นแทน --- */
.print-loading-done {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
    border-radius: 50%;
    background: var(--bs-success);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    opacity: 0;
    transform: scale(.4);
    z-index: 4;
}

.print-loading.is-done .print-loading-printer,
.print-loading.is-done .print-loading-tray,
.print-loading.is-done .print-loading-paper {
    opacity: 0;
    transition: opacity .15s ease;
}

.print-loading.is-done .print-loading-done {
    opacity: 1;
    transform: scale(1);
    transition: opacity .2s ease, transform .35s cubic-bezier(.2, .9, .3, 1.4);
}

.print-loading.is-done .print-loading-bar::after {
    animation: none;
    left: 0;
    width: 100%;
    background: var(--bs-success);
}

/* ป๊อปอัปถูกบล็อก: แสดงปุ่มให้กดเปิดเอง (การกดคือ user gesture เบราว์เซอร์จึงยอมเปิด) */
.print-loading.is-blocked .print-loading-open {
    display: block;
}

@keyframes print-feed {
    0%   { height: 0; }
    60%  { height: 40px; }
    80%  { height: 40px; opacity: 1; }
    100% { height: 40px; opacity: 0; }
}

@keyframes print-bar {
    0%   { left: -40%; }
    100% { left: 100%; }
}

@keyframes print-led {
    50% { opacity: .3; }
}

@media (prefers-reduced-motion: reduce) {
    .print-loading-paper { animation: none; height: 32px; }
    .print-loading-bar::after { animation-duration: 3s; }
}

/* --- โหมด Excel (http.postDownloadFile → printLoading.show(label, 'excel')) ---
   เครื่องพิมพ์ / แถบวิ่งเป็นสีเขียว Excel และกระดาษที่เลื่อนออกมาเป็นตารางแทนบรรทัดตัวหนังสือ */
.print-loading.is-excel .print-loading-printer {
    background: #217346;
}

.print-loading.is-excel .print-loading-paper {
    background:
        linear-gradient(to bottom, #c6e0b4 0 8px, transparent 8px) 0 0 / 100% 100% no-repeat,
        repeating-linear-gradient(to right, transparent 0 14px, var(--bs-border-color) 14px 15px),
        repeating-linear-gradient(to bottom, transparent 0 7px, var(--bs-border-color) 7px 8px),
        #fff;
}

.print-loading.is-excel .print-loading-bar::after {
    background: linear-gradient(90deg, transparent, #217346, transparent);
}

.print-loading.is-excel .print-loading-time {
    word-break: break-all;
}