/*NAVBAR */

        /* ==========================================
   ปรับพื้นหลัง Modal ให้มืด (สำหรับ Bootstrap 5.3+)
   ========================================== */
.modal-backdrop {
    --bs-backdrop-bg: #000000 !important;
    --bs-backdrop-opacity: 0.85 !important;
}
/* บังคับพื้นหลัง Modal ให้มืดสนิท */
body > .modal-backdrop {
    background-color: #000000 !important;
}
body > .modal-backdrop.show {
    opacity: 0.85 !important;
}

/* po.php หรือ style.css */

#wrapper {
    display: flex; /* ใช้ Flexbox เพื่อให้ Sidebar กับ Content วางขนานกัน */
    width: 100%;
    align-items: stretch;
}

#content {
    width: 100%; /* ให้กินพื้นที่ที่เหลือทั้งหมด */
    min-height: 100vh;
    transition: all 0.3s; /* ใส่ Transition ให้ขยับนุ่มนวลพร้อม Sidebar */
    flex-grow: 1; /* สำคัญ: ให้ขยายพื้นที่เต็มเมื่อ Sidebar หุบ */
}
  /* ── LABEL PRINT MODAL ── */
   .label-modal .modal-header {
       background: linear-gradient(135deg, var(--brand), var(--brand-mid));
       color: #fff;
   }

   .label-modal .modal-header .btn-close {
       filter: invert(1);
   }

   .label-modal .modal-title {
       font-weight: 700;
       font-size: 0.95rem;
   }

   @media print {
       @page {
           size: 55mm 35mm;
           margin: 0;
       }

       html,
       body {
           margin: 0 !important;
           padding: 0 !important;
           width: 55mm;
           background: #fff;
           font-size: 7pt;
       }

       body>*:not(#print-area) {
           display: none !important;
       }

       #print-area {
           display: block !important;
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           margin: 0;
           padding: 0;
       }

       .label-item {
           display: flex;
           flex-direction: column;
           justify-content: space-between;
           /* ดันส่วนล่างสุดไปติดขอบ */
           align-items: flex-start;
           width: 55mm;
           height: 35mm;
           box-sizing: border-box;
           padding: 2mm 2.5mm;
           page-break-inside: avoid;
           page-break-after: always;
           font-family: 'IBM Plex Sans Thai', sans-serif;
           background: #fff;
           color: #000;
           overflow: hidden;
       }

       .lbl-main-content {
           flex: 1;
           display: flex;
           flex-direction: column;
           width: 100%;
           min-width: 0;
           overflow: hidden;
           position: relative;
           /* 🟢 สำคัญ: เพื่อให้ QR ยึดมุมขวาของกรอบนี้ */
       }

       /* 🟢 ล็อกตำแหน่ง QR Code ให้อยู่มุมขวาล่างเสมอ */
       .lbl-qr-section {
           position: absolute;
           right: 0;
           bottom: 2mm;
           width: 13mm;
           height: 13mm;
       }

       .lbl-qr-zone {
           width: 100%;
           height: 100%;
           display: flex;
           justify-content: center;
           align-items: center;
       }

       /* 🟢 บังคับให้รูป QR Code ไม่ล้น 100% */
       .lbl-qr-zone img,
       .lbl-qr-zone canvas {
           width: 100% !important;
           height: 100% !important;
           object-fit: contain;
       }

       .lbl-row {
           display: flex;
           justify-content: space-between;
           align-items: flex-start;
           width: 100%;
           line-height: 1.1;
           min-width: 0;
       }

       .lbl-name {
           font-size: 8.5pt;
           font-weight: 700;
           flex: 1;
           white-space: normal;
           display: -webkit-box;
           -webkit-line-clamp: 2;
           -webkit-box-orient: vertical;
           overflow: hidden;
           line-height: 1.15;
           overflow-wrap: break-word;
           word-break: break-word;
           hyphens: auto;
       }

       .lbl-brand {
           font-size: 6.5pt;
           margin-left: 4px;
           white-space: nowrap;
           flex-shrink: 0;
           padding-top: 1px;
       }

       .lbl-model {
           font-size: 7pt;
           font-weight: 600;
           width: 100%;
           white-space: normal;
           display: -webkit-box;
           -webkit-line-clamp: 2;
           -webkit-box-orient: vertical;
           overflow: hidden;
           margin-top: 0.5mm;
           line-height: 1.1;
           overflow-wrap: break-word;
           word-break: break-word;
           hyphens: auto;
       }

       .lbl-info-row {
           font-size: 6.5pt;
           margin-top: 1mm;
           min-width: 0;
       }

       .lbl-sku {
           flex: 1;
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
           font-family: 'JetBrains Mono', monospace;
           min-width: 0;
       }

       .lbl-unit {
           margin-left: 4px;
           white-space: nowrap;
           flex-shrink: 0;
       }

       .lbl-location {
           font-size: 6.5pt;
           margin-top: 0.5mm;
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
           min-width: 0;
       }


       .lbl-qr-zone {
           width: 11mm;
           height: 11mm;
           flex-shrink: 0;
           display: flex;
           justify-content: center;
           align-items: center;
       }

       .lbl-qr-zone img,
       .lbl-qr-zone canvas {
           max-width: 100%;
           max-height: 100%;
           object-fit: contain;
       }

       /* 🟢 แถวล่างสุด: PN / FN */
       .lbl-footer-row {
           display: flex;
           justify-content: space-between;
           align-items: center;
           font-size: 5.5pt;
           font-family: 'JetBrains Mono', monospace;
           width: 100%;
           padding-top: 1mm;
           border-top: 0.5px solid #ddd;
           /* เส้นแบ่งบางๆ ให้ดูสะอาดตา */
       }

       .lbl-pn {
           flex: 1;
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
           min-width: 0;
       }

       .lbl-fn {
           flex: 1;
           text-align: right;
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
           margin-left: 4px;
           min-width: 0;
       }

       /* Fallback สำหรับเบราว์เซอร์เก่า */
       @supports not (-webkit-line-clamp: 2) {

           .lbl-name,
           .lbl-model {
               display: block;
               max-height: 2.3em;
               overflow: hidden;
               text-overflow: ellipsis;
           }
       }
   }