@font-face{font-family:Kanit;src:url('fonts/Kanit-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Kanit;src:url('fonts/Kanit-SemiBold.ttf') format('truetype');font-weight:500 900;font-style:normal;font-display:swap}
.label-modal-backdrop{position:fixed;inset:0;z-index:1050;background:#152334a6;display:flex;align-items:center;justify-content:center;padding:24px}
.label-modal{background:#fff;border-radius:16px;box-shadow:0 20px 80px #10203955;width:min(1180px,100%);max-height:94dvh;display:flex;flex-direction:column;outline:none;font-family:Kanit,sans-serif}
.label-modal-header{display:flex;justify-content:space-between;gap:20px;padding:20px 24px;border-bottom:1px solid #e2e8f0}
.label-modal-header h2{font-size:1.4rem;margin:0 0 6px}.label-modal-header p{color:#64748b;margin:0;font-size:.9rem}
.label-modal-body{display:grid;grid-template-columns:260px minmax(0,1fr);gap:24px;padding:24px;overflow:auto}
.label-controls label{display:block;margin:12px 0 5px}.label-controls input{width:100%}
.label-preview-panel{min-width:0}.label-preview-caption{font-size:.9rem;color:#475569;margin-bottom:12px}
.label-preview-scroll{background:#e8edf3;overflow:auto;border:1px solid #cdd5df;border-radius:8px;padding:20px}
.label-sheet{--label-content-offset:5mm;box-sizing:border-box;position:relative;width:170mm;height:99.5mm;padding:0;background:#fff;color:#000;font-family:'Times New Roman','Angsana New',Kanit,serif;font-size:12pt;line-height:1.15;box-shadow:0 2px 8px #0003;overflow:hidden}
.label-sheet *{box-sizing:border-box}
.label-company{position:absolute;top:calc(2mm + var(--label-content-offset));left:5mm;right:5mm;display:flex;gap:4mm;align-items:flex-start;height:16mm}
.label-company .label-logo-slot{width:16mm;height:15mm;flex:none}.label-company img{display:block;width:15mm;height:15mm;object-fit:contain}.label-company>div:last-child{flex:1;min-width:0}
.label-company-name{font-family:'Angsana New',Kanit,serif;font-size:23.9pt;font-weight:700;text-align:left;line-height:1;white-space:nowrap;width:66.6667%;transform:scaleX(1.5);transform-origin:left top}
.label-contact{position:absolute;left:20mm;top:9.9mm;transform:scaleX(.8);transform-origin:left top;font-family:Tahoma,Kanit,sans-serif;font-size:10.3pt;font-weight:700;text-align:left;line-height:1;margin:0;white-space:nowrap}
.label-details{position:absolute;inset:0;pointer-events:none}
.label-fields{position:absolute;left:5.5mm;top:calc(20.5mm + var(--label-content-offset));width:105mm;display:grid;grid-template-rows:7.5mm 7.5mm;align-items:center;font-family:'Angsana New',Kanit,serif;font-size:18.65pt;font-weight:700;line-height:1}
.label-fields>div{white-space:nowrap}.label-pack{margin-left:5mm}.label-po{margin-left:6mm}.label-pack-value{font-size:25pt;margin-left:4mm}.label-pack-unit{font-size:24pt;margin-left:8mm}.label-pack-unit:empty{margin-left:0}.label-po-value{font-size:24pt;margin-left:3mm}
.label-cartons{position:absolute;left:112mm;top:calc(12.2mm + var(--label-content-offset));width:51.5mm;height:24mm;text-align:center;padding:1mm 2mm;font-family:'Angsana New',Kanit,serif;font-size:22pt;line-height:1.1}
.label-carton-border{position:absolute;inset:0;width:100%;height:100%}.label-cartons>div{white-space:nowrap}.label-cartons>div:first-of-type{font-size:13.1pt;font-weight:700;line-height:1.1}.label-cartons strong{display:block;font-family:'Angsana New',Kanit,serif;font-size:27pt;line-height:.9;margin:.5mm 0;font-weight:700}
.label-description{position:absolute;top:calc(35.5mm + var(--label-content-offset));left:5.5mm;right:5.5mm;height:8.5mm;display:flex;align-items:baseline;gap:1.5mm;font-family:'Angsana New',Kanit,serif;font-size:20pt;font-weight:700;line-height:1;white-space:nowrap}
.label-description>b{flex:none}.label-description-value{font-family:'Angsana New','Times New Roman',Kanit,serif;font-size:24pt;letter-spacing:.1mm;line-height:1}
.label-barcode{position:absolute;left:4.5mm;top:calc(44mm + var(--label-content-offset));width:160mm;height:40.9mm}.label-barcode svg{display:block;width:100%;height:100%}
.label-barcode-number{position:absolute;left:5mm;top:calc(84.9mm + var(--label-content-offset));width:160mm;font-family:'Arial Narrow',Arial,sans-serif;font-size:20pt;line-height:1.2;font-weight:700;text-align:center;white-space:pre}
.label-preview-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap}.label-modal-stacked .label-preview-actions .label-preview-caption{margin-bottom:0}.label-preview-actions .btn{font-size:.78rem}
.label-template-editor-body{flex:1;min-height:0;overflow:auto;padding:16px 18px}.label-template-editor-body .template-tools{position:static}
.label-modal-footer{border-top:1px solid #e2e8f0;padding:16px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px}
@media(max-width:900px){.label-modal-body{grid-template-columns:1fr}.label-modal-backdrop{padding:10px}.label-modal-body{padding:16px}.label-modal-header{padding:16px}.label-controls{display:grid;grid-template-columns:130px minmax(0,1fr);gap:8px;align-items:center}.label-controls h3,.label-controls p,.label-controls button{grid-column:1/-1}.label-controls label{margin:0}.label-modal-footer{flex-wrap:wrap}}
@page{size:170mm 99.5mm;margin:0}
@media print{
 html,body{margin:0!important;padding:0!important;background:#fff!important;width:170mm;font-family:Kanit,sans-serif}
 .label-sheet{margin:0;box-shadow:none;break-inside:avoid;break-after:page;page-break-after:always;print-color-adjust:exact;-webkit-print-color-adjust:exact}
 .label-sheet:last-child{break-after:auto;page-break-after:auto}
}




.label-modal-stacked .label-modal-body{display:flex;flex-direction:column;gap:16px}
.label-modal-stacked .label-preview-panel{order:0}
.label-modal-stacked .label-preview-scroll{max-height:38vh;padding:14px}
.label-modal-stacked .label-controls{display:block;order:1;border:1px solid #dce3ec;border-radius:8px;padding:14px;background:#fafbfd}
.label-modal-stacked .label-controls fieldset{min-width:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 14px;align-items:start}
.label-modal-stacked .print-setting-field{min-width:0}
.label-modal-stacked .print-setting-field label{display:block;margin:0 0 4px;font-size:.82rem}
.label-modal-stacked .print-setting-field .form-control,.label-modal-stacked .print-setting-field .form-select{width:100%;min-width:0;font-size:.85rem;padding-top:5px;padding-bottom:5px}
.label-modal-stacked .label-controls h3,.label-modal-stacked .label-controls p{grid-column:1/-1;margin:0}
.label-modal-stacked .label-controls h3{font-size:1rem}
.label-modal-stacked .label-controls button{justify-self:start;margin-top:0!important}
.label-modal-stacked .label-preview-panel>p{margin-top:8px!important;margin-bottom:0}
@media(max-width:900px){.label-modal-stacked .label-controls fieldset{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.label-modal-stacked .label-controls fieldset{grid-template-columns:minmax(0,1fr)}}

.label-modal-stacked{height:94dvh}
.label-modal-stacked .label-modal-header{padding:12px 18px;flex:none}
.label-modal-stacked .label-modal-header h2{font-size:1.15rem;margin-bottom:3px}
.label-modal-stacked .label-modal-body{flex:1;min-height:0;overflow:hidden;padding:12px 18px;gap:10px}
.label-modal-stacked .label-preview-panel{flex:none;min-height:0}
.label-modal-stacked .label-preview-caption{font-size:.8rem;margin-bottom:5px}
.label-modal-stacked .label-preview-scroll{max-height:30dvh;padding:8px}
.label-modal-stacked .label-preview-panel>p{font-size:.72rem;margin-top:4px!important}
.label-modal-stacked .label-controls{flex:1;min-height:100px;overflow:auto;padding:10px}
.label-modal-stacked .label-controls fieldset{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px 10px}
.label-modal-stacked .print-setting-field label{font-size:.75rem;margin-bottom:2px}
.label-modal-stacked .print-setting-field .form-control,.label-modal-stacked .print-setting-field .form-select{font-size:.8rem;min-height:29px;padding:3px 7px}
.label-modal-stacked .print-setting-field .form-select{padding-right:26px}
.label-modal-stacked .label-controls h3{font-size:.88rem}
.print-settings-summary{grid-column:1/-1;font-size:.75rem;color:#596779}
.print-settings-help{grid-column:1/-1;font-size:.75rem;color:#596779}
.print-settings-help summary{cursor:pointer;width:max-content}.print-settings-help p{margin-top:5px!important}
.label-modal-stacked .label-controls button{font-size:.78rem;padding:4px 9px}
.label-modal-stacked .label-modal-footer{flex:none;padding:10px 18px;font-size:.82rem}
@media(max-width:900px){.label-modal-stacked .label-controls fieldset{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:540px){.label-modal-stacked .label-controls fieldset{grid-template-columns:repeat(2,minmax(0,1fr))}.label-modal-stacked .label-modal-body{padding:10px}.label-modal-stacked .label-preview-scroll{max-height:26dvh}}

.label-preview-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:5px}.label-preview-toolbar label{display:flex;align-items:center;gap:6px;font-size:.78rem;white-space:nowrap}.label-preview-toolbar select{width:95px}.label-modal-stacked .label-controls .printer-refresh{align-self:end;justify-self:start}

/* Let the preview determine its height; scroll the dialog instead of clipping the label. */
.label-modal-backdrop:has(> .label-modal-stacked){padding:12px}
.label-modal-stacked{width:calc(100vw - 24px);max-width:none;height:calc(100dvh - 24px);max-height:calc(100dvh - 24px)}
.label-modal-stacked .label-modal-body{flex:1 1 auto;display:grid;grid-template-columns:minmax(0,1fr) clamp(390px,38vw,600px);gap:20px;overflow:hidden;min-height:0;padding:18px;background:#f5f7fb;align-items:stretch}
.label-modal-stacked .label-preview-panel{display:flex;flex-direction:column;min-height:0;min-width:0}
.label-modal-stacked .label-preview-toolbar{flex:none;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.label-modal-stacked .label-preview-actions{gap:14px}
.label-modal-stacked .label-preview-caption{font-size:.9rem;margin:0}
.label-modal-stacked .label-preview-scroll{flex:1;min-height:0;max-height:none;height:auto;overflow:auto;display:flex;align-items:flex-start;padding:24px;border-radius:12px;background:#e7edf5}
.label-modal-stacked .label-column-preview{flex:none;margin:auto;box-shadow:0 5px 20px #1727441a}
.label-modal-stacked .label-preview-panel>p{flex:none;font-size:.78rem;line-height:1.6;margin-top:10px!important}
.label-modal-stacked .label-controls{min-height:0;overflow:auto;padding:20px;border-radius:12px;background:#fff;border-color:#dfe6f0;box-shadow:0 3px 12px #17274406}
.label-modal-stacked .label-controls fieldset{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}
.label-modal-stacked .label-controls h3{font-size:1.05rem;padding-bottom:12px;border-bottom:1px solid #e5ebf3;margin:0 0 2px}
.label-product-search{grid-column:1/-1;background:#f2f6fd;border:1px solid #dbe6f7;border-radius:10px;padding:12px;margin-bottom:2px;min-width:0}
.label-modal-stacked .label-product-search>label{font-size:.86rem;font-weight:600;color:#253e64;margin:0 0 8px}
.label-product-search-input{display:flex;gap:8px}.label-product-search-input input{min-width:0}.label-product-search-input button{flex:none;white-space:nowrap}
.label-product-search-status{font-size:.76rem;color:#5c6c82;margin-top:8px}
.label-product-results{list-style:none;padding:0;margin:8px 0 0;max-height:240px;overflow:auto;background:#fff;border:1px solid #dfe6f0;border-radius:8px}
.label-modal-stacked .label-product-results button{display:grid;grid-template-columns:75px minmax(0,1fr);text-align:left;width:100%;border:0;border-bottom:1px solid #edf1f6;background:#fff;padding:10px;gap:3px 8px;color:#243853}
.label-product-results li:last-child button{border-bottom:0}.label-product-results button:hover,.label-product-results button:focus-visible{background:#eaf2ff}.label-product-results button span{overflow-wrap:anywhere}.label-product-results small{grid-column:2;font-size:.72rem;color:#687991}
.label-modal-stacked .print-setting-field label{font-size:.84rem;font-weight:500;color:#34445f;margin-bottom:6px}
.label-modal-stacked .print-setting-field .form-control,.label-modal-stacked .print-setting-field .form-select{font-size:.88rem;min-height:38px;padding:7px 10px;border-radius:7px}
.label-modal-stacked .print-setting-field .form-select{padding-right:30px}
.label-modal-stacked .print-setting-field:has(#single-template),.label-modal-stacked .print-setting-field:has(#print-printer),.label-modal-stacked .print-setting-field:has(#print-mode){grid-column:1/-1}
.label-modal-stacked .label-controls button{font-size:.84rem;padding:7px 12px}
.label-modal-stacked .label-controls p{font-size:.78rem;line-height:1.65}
.label-modal-stacked .print-settings-summary{font-size:.8rem;line-height:1.65;padding:10px 12px;background:#f2f6fc;border-radius:8px}
.label-modal-stacked .print-settings-help{font-size:.8rem}
.label-modal-stacked .label-modal-footer{padding:12px 20px;font-size:.9rem;background:#fff}
.label-modal-stacked .label-modal-footer .btn{padding:8px 20px}
@media(max-width:1000px){
 .label-modal-stacked .label-modal-body{grid-template-columns:minmax(0,1fr);overflow:auto;padding:12px;gap:14px}
 .label-modal-stacked .label-preview-panel{min-height:350px}
 .label-modal-stacked .label-preview-scroll{flex:none;height:clamp(220px,45dvh,480px);min-height:0;max-height:none;overflow:auto;padding:16px}
 .label-modal-stacked .label-controls{overflow:visible;padding:16px}
}
@media(max-width:480px){
 .label-modal-stacked .label-controls fieldset{grid-template-columns:minmax(0,1fr)}
 .label-modal-stacked .label-preview-toolbar{align-items:flex-start}
 .label-modal-stacked .label-preview-panel{min-height:0}
 .label-modal-stacked .label-preview-scroll{height:32dvh;min-height:180px}
}
.label-modal-stacked .print-frequent-field{background:#fff5d9;border:1px solid #e9c46a;border-left:4px solid #d99812;border-radius:9px;padding:10px}
.label-modal-stacked .print-frequent-field label{color:#714900;font-weight:600}
.label-modal-stacked .print-frequent-field .form-control{background:#fffdf5;border-color:#d6ad50}
.label-modal-stacked .print-frequent-field .form-control:focus{background:#fff;border-color:#b77b08;box-shadow:0 0 0 .2rem #d9981233}