/* ระบบผลิต PE — สไตล์หลักทั้งเว็บ (PC เป็นหลัก มือถือแค่ใช้งานได้ พิมพ์ A4 ขาวดำ) */

/* ---------- ฟอนต์ Sarabun (bundled, OFL — ดู fonts/OFL.txt) ---------- */
@font-face{font-family:'Sarabun';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/sarabun-thai-400-normal.7d95714498a0.woff2") format('woff2');unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;}
@font-face{font-family:'Sarabun';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/sarabun-latin-400-normal.651078015294.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Sarabun';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/sarabun-thai-500-normal.959e07d0b874.woff2") format('woff2');unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;}
@font-face{font-family:'Sarabun';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/sarabun-latin-500-normal.393a87b50336.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Sarabun';font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/sarabun-thai-600-normal.8e52188954eb.woff2") format('woff2');unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;}
@font-face{font-family:'Sarabun';font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/sarabun-latin-600-normal.5563c6ca10fc.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Sarabun';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/sarabun-thai-700-normal.1ace28bd66da.woff2") format('woff2');unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;}
@font-face{font-family:'Sarabun';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/sarabun-latin-700-normal.ef146f9c480e.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ---------- tokens ---------- */
:root{
  --primary:#1D4ED8; --primary-dark:#1E40AF; --accent:#3B82F6;
  --bg:#EFF6FF; --card:#FFFFFF; --text:#334155; --heading:#1E293B; --muted:#64748B;
  --line:#E2E8F0; --line-strong:#CBD5E1; --tint:#F8FAFF; --hover:#EAF2FF;
  --ok:#15803D; --ok-bg:#DCFCE7;
  --amber:#B45309; --amber-bg:#FEF3C7;
  --danger:#B91C1C; --danger-bg:#FEE2E2;
  --info-bg:#DBEAFE;
  --radius:12px; --radius-sm:8px;
  --shadow:0 1px 2px rgba(15,23,42,.05), 0 4px 14px rgba(29,78,216,.07);
  --focus:0 0 0 3px rgba(59,130,246,.45);
  --sidebar-w:248px; --topbar-h:64px;
  --sans:'Sarabun','Noto Sans Thai','Leelawadee UI','Tahoma',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Sarabun','Leelawadee UI',system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--sans); font-size:15px; line-height:1.5;}
h1,h2,h3,h4{color:var(--heading); line-height:1.3;}
a{color:var(--primary);}
code{background:var(--info-bg); color:var(--primary-dark); padding:1px 6px; border-radius:6px; font-size:.9em;}
.icon{width:20px; height:20px; flex:none; display:inline-block; vertical-align:middle;}
.icon.sm{width:16px; height:16px;}

/* โฟกัสคีย์บอร์ดชัดเจนทุกจุด */
:focus{outline:none;}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-radius:6px;}
input:focus-visible, select:focus-visible, textarea:focus-visible{outline:3px solid rgba(59,130,246,.55); outline-offset:1px; border-color:var(--accent);}

.skip-link{position:absolute; left:12px; top:-60px; z-index:100; background:var(--primary); color:#fff; padding:10px 16px; border-radius:var(--radius-sm); text-decoration:none; font-weight:600;}
.skip-link:focus{top:12px;}
[id]{scroll-margin-top:calc(var(--topbar-h) + 16px);}
.visually-hidden{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

/* ---------- โครงหน้า: sidebar + topbar + content ---------- */
.sidebar{position:fixed; inset:0 auto 0 0; width:var(--sidebar-w); z-index:40; display:flex; flex-direction:column;
  background:linear-gradient(180deg,var(--primary) 0%,var(--primary-dark) 100%); color:#fff;}
.brand{display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:18px 20px 16px; border-bottom:1px solid rgba(255,255,255,.14);}
.brand-name{font-weight:700; font-size:1.02rem; line-height:1.2;}
/* โลโก้มีตัวอักษรสีน้ำเงินเข้ม จึงวางบนป้ายพื้นขาวเมื่ออยู่บนพื้นสีน้ำเงิน */
.logo-badge{display:inline-flex; align-items:center; justify-content:center; background:#fff; border-radius:10px; padding:6px 10px;
  box-shadow:0 2px 8px rgba(15,23,42,.18); flex:none;}
.logo-badge img{display:block; height:auto;}
.brand-badge{width:100%;}
.brand-badge .logo-full{width:100%; max-width:200px;}
.brand-badge .logo-icon{display:none; width:32px; height:32px;}
.nav{display:flex; flex-direction:column; gap:4px; padding:16px 12px; flex:1; overflow-y:auto;}
.nav-link{display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:10px; color:rgba(255,255,255,.88);
  text-decoration:none; font-weight:500; font-size:.95rem;}
.nav-link:hover{background:rgba(255,255,255,.12); color:#fff;}
.nav-link.active{background:#fff; color:var(--primary); font-weight:700; box-shadow:0 2px 8px rgba(15,23,42,.18);}
.sidebar :focus-visible{outline-color:#fff;}
.sidebar-footer{padding:14px 12px 16px; border-top:1px solid rgba(255,255,255,.14); display:flex; flex-direction:column; gap:8px;}
.user-card{display:flex; align-items:center; gap:10px; padding:4px 6px;}
.avatar{width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.18); display:grid; place-items:center; font-weight:700; flex:none;}
.user-name{font-weight:600; font-size:.92rem; line-height:1.2; word-break:break-word;}
.user-role{font-size:.78rem; color:rgba(255,255,255,.75);}
.nav-link.small{padding:8px 12px; font-size:.85rem;}
.btn-logout{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:9px 12px; border-radius:10px;
  border:1px solid rgba(255,255,255,.45); background:transparent; color:#fff; font:inherit; font-size:.88rem; font-weight:600; cursor:pointer;}
.btn-logout:hover{background:rgba(255,255,255,.12);}

.main{margin-left:var(--sidebar-w); min-width:0; min-height:100vh;}
.topbar{position:sticky; top:0; z-index:30; background:rgba(255,255,255,.96); border-bottom:1px solid var(--line);
  box-shadow:0 1px 3px rgba(15,23,42,.04);}
.topbar-inner{max-width:1440px; margin:0 auto; min-height:var(--topbar-h); padding:10px 28px; display:flex; align-items:center; gap:16px;}
.page-heading{min-width:0; flex:1;}
.page-heading h1{margin:0; font-size:1.3rem; font-weight:700;}
.page-subtitle{margin:2px 0 0; font-size:.85rem; color:var(--muted);}
.page-actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end;}
.page-actions form{margin:0;}
.page-actions select{width:auto; max-width:260px;}
.nav-toggle{display:none; width:42px; height:42px; border-radius:10px; border:1px solid var(--line-strong); background:#fff; color:var(--primary); cursor:pointer; place-items:center; flex:none;}
.backdrop{display:none;}
.content{max-width:1440px; margin:0 auto; padding:24px 28px 56px;}

/* ---------- การ์ด ---------- */
.card{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid #E6EEFB; margin:0 0 20px; min-width:0;}
.card-header{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:14px 20px; border-bottom:1px solid var(--line);}
.card-title{margin:0; font-size:1.02rem; font-weight:700; display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.card-title .icon{color:var(--primary);}
.card-body{padding:18px 20px;}
.card-body > :last-child{margin-bottom:0;}
.card-footer{padding:12px 20px; border-top:1px solid var(--line); display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap;}
.card.danger-card{border-top:4px solid var(--danger);}
.section-title{margin:28px 0 12px; font-size:1.05rem; font-weight:700;}

.layout-2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:start;}
.layout-3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:start;}
.layout-2 > .card, .layout-3 > .card{margin:0;}
.stack-gap{margin-bottom:20px;}

/* การ์ดสรุป (stat) */
.stat-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin:0 0 20px;}
.stat-grid.three{grid-template-columns:repeat(3,minmax(0,1fr));}
.stat{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid #E6EEFB; padding:16px 18px; display:flex; gap:14px; align-items:flex-start; min-width:0;}
.stat-icon{width:42px; height:42px; border-radius:10px; display:grid; place-items:center; background:var(--info-bg); color:var(--primary); flex:none;}
.stat-label{font-size:.82rem; color:var(--muted); font-weight:500;}
.stat-value{font-size:1.45rem; font-weight:700; color:var(--heading); font-variant-numeric:tabular-nums; line-height:1.25;}
.stat-value small{font-size:.8rem; font-weight:500; color:var(--muted);}
.stat-sub{font-size:.8rem; color:var(--muted); margin-top:2px;}
.stat.ok .stat-icon{background:var(--ok-bg); color:var(--ok);} .stat.ok .stat-value{color:var(--ok);}
.stat.amber .stat-icon{background:var(--amber-bg); color:var(--amber);} .stat.amber .stat-value{color:var(--amber);}
.stat.danger .stat-icon{background:var(--danger-bg); color:var(--danger);} .stat.danger .stat-value{color:var(--danger);}

/* ---------- ปุ่ม ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:38px; padding:8px 16px; border-radius:10px;
  border:1px solid var(--primary); background:var(--primary); color:#fff; font:inherit; font-size:.92rem; font-weight:600;
  cursor:pointer; text-decoration:none; white-space:nowrap; transition:background .15s, border-color .15s, color .15s;}
.btn:hover{background:var(--primary-dark); border-color:var(--primary-dark);}
.btn.secondary{background:#fff; color:var(--primary); border-color:var(--primary);}
.btn.secondary:hover{background:var(--hover);}
.btn.danger{background:#fff; color:var(--danger); border-color:var(--danger);}
.btn.danger:hover{background:var(--danger-bg);}
.btn.danger-solid{background:var(--danger); border-color:var(--danger); color:#fff;}
.btn.danger-solid:hover{background:#991B1B;}
.btn.amber{background:#fff; color:var(--amber); border-color:#D97706;}
.btn.amber:hover{background:var(--amber-bg);}
.btn.success{background:var(--ok); border-color:var(--ok); color:#fff;}
.btn.success:hover{background:#166534;}
.btn.small{min-height:30px; padding:4px 10px; font-size:.8rem; border-radius:8px; gap:5px;}
.btn.block{width:100%;}
.btn .icon{width:18px; height:18px;}
.btn.small .icon{width:15px; height:15px;}
.row-actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:12px;}

/* ---------- ฟอร์ม ---------- */
label, .label{display:block; font-size:.84rem; font-weight:600; color:var(--heading); margin:0 0 5px;}
input[type=text], input[type=number], input[type=date], input[type=password], input[type=file], textarea, select{
  width:100%; min-height:38px; padding:7px 11px; border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  font:inherit; font-size:.92rem; background:#fff; color:var(--heading);}
input[type=number]{font-variant-numeric:tabular-nums;}
input[type=file]{padding:6px 8px; background:var(--tint);}
textarea{min-height:70px; resize:vertical;}
input::placeholder, textarea::placeholder{color:#94A3B8;}
/* สเปกที่ล็อกตามงาน — อ่านได้ชัด แต่ดูออกว่าแก้ไม่ได้ */
input:disabled, select:disabled, textarea:disabled{background:var(--tint); color:var(--heading); border-style:dashed; cursor:not-allowed; opacity:1;}
input:disabled::placeholder{color:transparent;}
/* combobox เลือกงาน */
.combo{position:relative;}
.combo-list{position:absolute; z-index:30; left:0; right:0; top:calc(100% + 4px); margin:0; padding:4px; list-style:none;
  background:var(--card); border:1px solid var(--line-strong); border-radius:var(--radius-sm); box-shadow:var(--shadow);
  max-height:320px; overflow-y:auto;}
.combo-list [role=option]{padding:7px 10px; border-radius:6px; cursor:pointer;}
.combo-list [role=option].active{background:var(--hover); box-shadow:inset 3px 0 0 var(--primary);}
.combo-list .opt-name{display:block; font-weight:600; color:var(--heading);}
.combo-list .opt-sub{display:block; font-size:.8rem; color:var(--muted);}
.combo-empty{padding:8px 10px; color:var(--muted);}
.error-list{margin:0; padding-left:18px; color:var(--danger);}
.change-list{margin:0; padding-left:18px;}
.change-list del{color:var(--muted);}
.mix-table input.invalid{border-color:var(--danger); background:var(--danger-bg);}
table.data tr.row-remove td{background:var(--danger-bg); color:#7F1D1D;}
.card.danger{border-color:#FCA5A5;}
.card.danger .card-title{color:var(--danger);}
input[type=checkbox]{width:18px; height:18px; accent-color:var(--primary); vertical-align:middle; margin:0;}
.grid4,.grid3,.grid2{display:grid; gap:14px; margin-bottom:16px;}
.grid4{grid-template-columns:repeat(4,minmax(0,1fr));}
.grid3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid2{grid-template-columns:repeat(2,minmax(0,1fr));}
.span-2{grid-column:span 2;} .span-all{grid-column:1/-1;}
.field-end{display:flex; align-items:flex-end;}
.check-inline{display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:.88rem; cursor:pointer; margin:0;}
.chip-list{display:flex; flex-wrap:wrap; gap:8px;}
.chip{display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border:1px solid var(--line-strong); border-radius:999px; background:#fff; font-weight:500; font-size:.86rem; margin:0; cursor:pointer;}
.chip.disabled{opacity:.55; cursor:not-allowed;}
p.hint, .hint{font-size:.85rem; color:var(--muted); margin:0 0 14px; line-height:1.55;}

/* ---------- ข้อความแจ้ง ---------- */
.status{display:flex; gap:10px; align-items:flex-start; font-size:.9rem; padding:11px 14px; border-radius:10px; margin:0 0 14px; border:1px solid; border-left-width:4px; background:#fff;}
.status.success{background:var(--ok-bg); color:#14532D; border-color:#86EFAC; border-left-color:var(--ok);}
.status.error{background:var(--danger-bg); color:#7F1D1D; border-color:#FCA5A5; border-left-color:var(--danger);}
.status.warning{background:var(--amber-bg); color:#78350F; border-color:#FCD34D; border-left-color:#D97706;}
.status.info{background:var(--info-bg); color:#1E3A8A; border-color:#93C5FD; border-left-color:var(--primary);}

/* ---------- ป้ายสถานะ ---------- */
.badge{display:inline-flex; align-items:center; gap:4px; padding:2px 10px; border-radius:999px; font-size:.76rem; font-weight:700; white-space:nowrap; line-height:1.6;}
.badge.done{background:var(--ok-bg); color:var(--ok);}
.badge.pending{background:var(--amber-bg); color:var(--amber);}
.badge.ng{background:var(--danger-bg); color:var(--danger);}
.badge.info{background:var(--info-bg); color:var(--primary);}
.badge .icon{width:13px; height:13px;}
.count-pill{display:inline-block; background:var(--info-bg); color:var(--primary); font-size:.8rem; font-weight:700; padding:2px 10px; border-radius:999px; font-variant-numeric:tabular-nums;}
.count-pill.ng{background:var(--danger-bg); color:var(--danger);}
.text-ok{color:var(--ok);} .text-amber{color:var(--amber);} .text-danger{color:var(--danger);} .text-muted{color:var(--muted);}

/* ---------- ตาราง ---------- */
.table-wrap{position:relative; border:1px solid var(--line); border-radius:10px; background:#fff;}
.table-wrap.scroll{max-height:440px; overflow:auto;}
.card > .table-wrap{border:0; border-radius:0 0 var(--radius) var(--radius);}
table.data{width:100%; border-collapse:separate; border-spacing:0; font-size:.86rem;}
table.data th, table.data td{padding:8px 10px; text-align:left; vertical-align:middle; border-bottom:1px solid var(--line);}
table.data thead th{position:sticky; top:var(--topbar-h); z-index:5; background:#F1F6FF; color:var(--heading); font-weight:700; font-size:.8rem;
  border-bottom:2px solid #BFD3F6; white-space:nowrap;}
.table-wrap.scroll table.data thead th{top:0;}
table.data thead th:first-child{border-top-left-radius:10px;} table.data thead th:last-child{border-top-right-radius:10px;}
table.data tbody tr:nth-child(even) td{background:var(--tint);}
table.data tbody tr:hover td{background:var(--hover);}
table.data th.num, table.data td.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;}
table.data th.center, table.data td.center{text-align:center;}
table.data td.nowrap{white-space:nowrap;}
table.data tr.group-row th{position:static; background:#E8F0FE; color:var(--primary-dark); text-align:left; font-size:.85rem; border-bottom:1px solid #BFD3F6;}
table.data tr.totals td{background:#F1F6FF !important; font-weight:700; color:var(--heading); border-top:1px solid #BFD3F6;}
table.data tr.grand td{background:var(--info-bg) !important;}
table.data td form{margin:0;}
table.data td .inline-form{display:flex; gap:6px; align-items:center;}
table.data td input[type=text], table.data td input[type=number], table.data td select{min-height:32px; padding:4px 8px; font-size:.85rem;}
table.data tbody tr:last-child td{border-bottom:0;}
.sub{display:block; font-size:.76rem; color:var(--muted);}
.piece-note{color:var(--muted); font-size:.82rem;}
div.piece-note{font-size:.78rem; line-height:1.3;}
.empty{text-align:center; padding:36px 20px; color:var(--muted);}
.empty .icon{width:36px; height:36px; color:#93C5FD; display:block; margin:0 auto 8px;}

/* progress bar */
.progress{background:#DBEAFE; border-radius:999px; height:8px; overflow:hidden;}
.progress > span{display:block; height:100%; background:var(--accent); border-radius:999px;}
.progress.done > span{background:var(--ok);}
.progress.mini{height:5px; margin-top:4px; min-width:56px;}

/* ---------- ใบสั่งผลิต (ตามแบบฟอร์มกระดาษ) ---------- */
.sheet{overflow:hidden;}
.sheet-head{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding:10px 20px; border-bottom:3px solid var(--primary); background:linear-gradient(90deg,#fff 0%,#F5F9FF 100%);}
.doc-brand{display:flex; align-items:center; gap:14px;}
.doc-logo{display:block; width:170px; height:auto; flex:none;}
.sheet-head .company-name{font-weight:700; font-size:1.05rem; color:var(--heading);}
.sheet-head .company-sub{font-size:.8rem; color:var(--muted);}
.sheet-head .form-title{text-align:right;}
.sheet-head .form-title .th{font-weight:700; font-size:1.15rem; color:var(--primary);}
.sheet-head .form-title .en{font-size:.78rem; color:var(--muted);}
.sheet-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.15fr);}
.sheet-box{padding:12px 18px 4px; border-right:1px solid var(--line); min-width:0;}
.sheet-box:last-child{border-right:0;}
.sheet-col-3 .sheet-box{border-right:0; padding-bottom:8px;}
.sheet-col-3 .sheet-box + .sheet-box{border-top:1px solid var(--line);}
.sheet-wide{border-top:1px solid var(--line); padding:14px 20px 4px;}
.box-title{display:flex; align-items:center; gap:8px; font-weight:700; font-size:.92rem; color:var(--primary); margin:0 0 10px;}
.box-title::before{content:''; width:4px; height:16px; border-radius:2px; background:var(--accent);}
.fields{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 12px; margin-bottom:10px;}
.fields label{font-size:.8rem; margin-bottom:3px;}
.fields input, .fields select{min-height:34px; padding:5px 10px;}
.calc-box{background:#F7FAFF;}
.calc-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:10px;}
.calc-tile{border:1px solid #D6E4FB; border-radius:10px; padding:8px 12px; background:#fff;}
.calc-tile .lbl{font-size:.76rem; color:var(--muted);}
.calc-tile .val{font-weight:700; font-size:1.05rem; font-variant-numeric:tabular-nums; text-align:right; color:var(--heading);}
.calc-tile.warn .val{color:var(--danger);}
.calc-tile.ok .val{color:var(--ok);}
table.mix-table{width:100%; border-collapse:collapse; font-size:.84rem; margin-bottom:6px;}
table.mix-table th{background:#F1F6FF; color:var(--heading); font-size:.78rem; font-weight:700; padding:6px; text-align:left; border-bottom:2px solid #BFD3F6;}
table.mix-table th.num{text-align:right;}
table.mix-table td{padding:2px 4px; border-bottom:1px solid var(--line);}
table.mix-table td input{min-height:28px; padding:2px 8px; font-size:.85rem;}
table.mix-table td.num input{text-align:right;}
table.mix-table .del-cell{width:44px; text-align:center;}

.sheet-col-3 .calc-grid{grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px;}
.sheet-col-3 .calc-tile{padding:6px 8px;}
.sheet-col-3 .calc-tile .lbl{font-size:.72rem; line-height:1.25; min-height:2.5em;}

/* ---------- ใบส่งมอบ ---------- */
.doc-meta{display:flex; flex-wrap:wrap; gap:6px 24px; font-size:.88rem; margin-bottom:12px;}
.doc-meta b{color:var(--heading);}
.sig{display:flex; justify-content:space-between; margin-top:40px; gap:40px;}
.sig div{flex:1; text-align:center; font-size:.85rem;}
.sig .line{border-top:1px solid var(--text); margin-top:36px; padding-top:6px;}
.rw-mark{color:var(--danger); font-weight:700;}

/* ---------- QR (รูปแบบเดิมสำหรับพิมพ์) ---------- */
#qrGridWrap .qrPage{border:2px solid #000; margin-bottom:26px; background:#fff; color:#000;}
#qrGridWrap .pageHead{padding:10px 16px; border-bottom:2px solid #000;}
#qrGridWrap .pageHead h3{margin:0 0 8px; font-size:1.5rem; font-weight:800; text-align:center; color:#000;}
#qrGridWrap .pageMeta{display:flex; gap:22px; font-size:.85rem; flex-wrap:wrap;}
.qrCells{display:grid; grid-template-columns:repeat(3,1fr);}
.qrLabel{border:1px dashed #000; padding:8px; background:#fff; color:#000; display:flex; flex-direction:column; min-height:190px;}
.qrLabel.rw{border-color:#a83a3a;}
.qrLabel .rw-tag{color:#a83a3a;}
.qrLabel .tpk{text-align:center; font-weight:800; font-size:.78rem; margin-bottom:3px;}
.qrLabel .labelLine{font-family:Consolas,'Courier New',monospace; font-size:.6rem; line-height:1.25; margin-bottom:4px; word-break:break-all;}
.qrLabel .labelLine.rw-tag{font-family:var(--sans);}
.qrLabel .midRow{display:flex; align-items:center; justify-content:space-evenly; flex:1; gap:8px;}
.qrLabel .bigNo{font-size:2rem; font-weight:800; line-height:1;}
.qrLabel .stamp{text-align:center; font-size:.72rem; margin-top:4px;}
.qrLabel .formcode{text-align:center; font-size:.58rem; color:#333; border-top:1px solid #999; margin-top:3px; padding-top:2px;}
.page-block{page-break-after:always;}

/* ---------- หน้าเข้าสู่ระบบ / ล็อก ---------- */
.auth-page{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px 16px;
  background:radial-gradient(circle at 15% 15%,rgba(255,255,255,.14) 0,transparent 40%),linear-gradient(135deg,#1E3A8A 0%,var(--primary) 45%,var(--accent) 100%);}
.auth-shell{width:100%; max-width:420px;}
.auth-brand{text-align:center; color:#fff; margin-bottom:22px;}
.auth-brand .company{font-size:1.35rem; font-weight:700; margin:0; color:#fff;}
.auth-brand .company-en{font-size:.88rem; color:rgba(255,255,255,.8);}
.auth-card{background:#fff; border-radius:16px; box-shadow:0 20px 50px rgba(15,23,42,.28); padding:28px 28px 26px;}
.auth-logo{display:block; width:100%; max-width:280px; height:auto; margin:0 auto 18px;}
.auth-card h2{margin:0 0 4px; font-size:1.2rem;}
.auth-card .hint{margin-bottom:18px;}
.auth-card .field{margin-bottom:14px;}
.auth-card input{min-height:44px; font-size:1rem;}
.auth-card .btn{width:100%; min-height:46px; font-size:1rem; margin-top:6px;}
.auth-foot{text-align:center; color:rgba(255,255,255,.75); font-size:.8rem; margin-top:18px;}
.auth-card.lock h2{color:var(--danger);}
.auth-card.lock p{margin:0 0 12px;}

/* ---------- จอเล็กกว่า PC ทั่วไป ---------- */
/* ---------- แดชบอร์ดฝ่ายเป่า (PC และทีวี 1920x1080) ---------- */
.blow{--fg:#15803D; --fg-bg:#DCFCE7; --ng:#B91C1C; --ng-bg:#FEE2E2; --rw:#1E3A8A; --rw-bg:#DBEAFE; --team-b:#0EA5E9;}
.blow-page .content{max-width:1880px;}
.blow-head{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; background:linear-gradient(90deg,var(--primary) 0%,var(--accent) 100%);
  color:#fff; border-radius:var(--radius); padding:14px 20px; margin-bottom:12px; box-shadow:var(--shadow);}
.blow-brand{display:flex; align-items:center;}
.blow-brand .logo-badge img{width:220px;}
.blow-center{display:flex; flex-direction:column; align-items:center; gap:2px; min-width:0;}
.blow-clock{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; font-size:.92rem; color:rgba(255,255,255,.92);
  font-variant-numeric:tabular-nums;}
.blow-clock [data-clock]{font-weight:700; color:#fff;}
.blow-clock [data-shift-now]{font-weight:600;}
.blow-clock [data-updated]{opacity:.85;}
.blow-controls .btn.is-current{background:var(--hover); box-shadow:inset 0 0 0 2px #fff;}
.blow-title{margin:0; color:#fff; font-size:1.7rem; letter-spacing:.06em; font-weight:700; text-align:center; white-space:nowrap;}
.blow-controls{display:flex; justify-content:flex-end; align-items:center; gap:10px; flex-wrap:wrap;}
.blow-date{display:flex; align-items:center; gap:8px; margin:0;}
.blow-date label{color:#fff; margin:0; font-weight:600;}
.blow-date input{width:auto; background:#fff;}
.blow-controls .btn{background:#fff; color:var(--primary); border-color:#fff;}
.blow-controls .btn:hover{background:var(--hover); color:var(--primary-dark);}
.blow-day{margin:0 0 10px; color:var(--muted); display:flex; gap:12px; align-items:center; flex-wrap:wrap;}
/* แถบสถานะเครื่อง: การ์ดละเครื่อง เรียงแถวเดียว สูงราว 140 px */
.blow-status{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:10px; margin-bottom:12px;}
.status-card{display:flex; gap:10px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:8px 12px; min-width:0; font-size:.8rem; line-height:1.35; border-left:4px solid var(--primary);}
.status-machine{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; flex:none; width:48px;}
.status-machine img{width:34px; height:42px; object-fit:contain;}
.status-machine strong{font-size:1.05rem; color:var(--heading);}
.status-body{min-width:0; flex:1; display:flex; flex-direction:column; gap:2px;}
.status-line, .status-next, .status-meta{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.status-label{display:inline-block; font-size:.7rem; font-weight:700; color:var(--primary); background:var(--info-bg); border-radius:4px; padding:0 5px; margin-right:4px;}
.status-job{font-weight:700; color:var(--heading); text-decoration:none;}
.status-meta{color:var(--muted); font-size:.75rem;}
.status-meta .badge{font-size:.68rem; padding:0 6px;}
.status-bar{height:6px; background:var(--info-bg); border-radius:3px; overflow:hidden; margin:2px 0;}
.status-bar span{display:block; height:100%; background:var(--ok);}
.status-idle{font-weight:700; color:var(--muted);}
.status-next{border-top:1px dashed var(--line); padding-top:3px; margin-top:auto;}
.status-next a{color:var(--heading); font-weight:600; text-decoration:none;}
.blow-panels{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px;}
.blow-panel{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:14px 16px; border-top:5px solid var(--primary);}
.blow-panel + .blow-panel{border-top-color:var(--team-b);}
.blow-panel-head{display:flex; justify-content:space-between; gap:16px; align-items:center; margin-bottom:10px;}
.blow-team-name{font-size:1.45rem; font-weight:700; color:var(--heading);}
.blow-team-shift{color:var(--muted); font-size:.9rem; margin-bottom:6px;}
.blow-leaders{display:flex; gap:14px;}
.blow-leader{margin:0; text-align:center; width:88px;}
.blow-leader img, .blow-leader-blank{width:72px; height:72px; border-radius:50%; object-fit:cover; border:3px solid var(--info-bg); display:block; margin:0 auto 4px;}
.blow-leader-blank{display:grid; place-items:center; background:var(--hover); color:var(--primary); font-weight:700; font-size:1.6rem;}
.blow-leader figcaption{font-size:.82rem; line-height:1.2; color:var(--heading);}
.blow-noleader{margin:0; font-size:.85rem;}
.blow-gauge{position:relative; width:150px; height:150px; flex:none;}
.blow-gauge svg{width:100%; height:100%;}
.gauge-track{fill:none; stroke:var(--info-bg); stroke-width:12;}
.gauge-fill{fill:none; stroke:var(--primary); stroke-width:12; stroke-linecap:round;}
.blow-panel + .blow-panel .gauge-fill{stroke:var(--team-b);}
.gauge-text{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.gauge-value{font-size:1.75rem; font-weight:700; color:var(--heading);}
.gauge-label{font-size:.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em;}
.blow-rows{display:flex; flex-direction:column; gap:8px;}
.blow-row{display:grid; grid-template-columns:136px repeat(3,1fr); gap:8px; align-items:stretch;}
.blow-machine{display:flex; align-items:center; gap:8px; background:var(--tint); border:1px solid var(--line); border-radius:var(--radius-sm); padding:4px 8px;}
.blow-machine img{width:40px; height:50px; object-fit:contain; flex:none;}
.blow-machine strong{display:block; font-size:1.15rem; color:var(--heading); line-height:1.2;}
.blow-machine span{display:block; font-size:.75rem; color:var(--muted); white-space:nowrap;}
.blow-tile{border-radius:var(--radius-sm); padding:6px 10px; border:1px solid transparent;}
.tile-fg{background:var(--fg-bg); color:var(--fg); border-color:#BBF7D0;}
.tile-ng{background:var(--ng-bg); color:var(--ng); border-color:#FECACA;}
.tile-rw{background:var(--rw-bg); color:var(--rw); border-color:#BFDBFE;}
.tile-top{display:flex; justify-content:space-between; font-weight:700; font-size:.85rem;}
.tile-kg{font-size:1.2rem; font-weight:700; color:var(--heading); white-space:nowrap;}
.tile-kg small{font-size:.75rem; font-weight:500; color:var(--muted);}
.tile-bar{height:6px; border-radius:3px; background:rgba(255,255,255,.8); overflow:hidden; margin-top:4px;}
.tile-bar span{display:block; height:100%; background:currentColor; border-radius:3px;}
.blow-panel-foot{margin-top:10px; font-size:.85rem; color:var(--muted); text-align:right;}
.blow-bottom{display:grid; grid-template-columns:3fr 2fr; gap:14px;}
.blow-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:14px 16px;}
.blow-card-title{margin:0 0 8px; font-size:1.05rem;}
.blow-legend{display:flex; gap:16px; font-size:.82rem; margin-bottom:8px;}
.blow-legend span::before{content:''; display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:6px; vertical-align:-1px;}
.legend-1::before, .bar-1 span{background:var(--primary);}
.legend-2::before, .bar-2 span{background:var(--team-b);}
.blow-chart{display:flex; flex-direction:column; gap:10px;}
.chart-group{display:grid; grid-template-columns:56px 1fr; gap:10px; align-items:center;}
.chart-label{font-weight:700; color:var(--heading);}
.chart-bars{display:flex; flex-direction:column; gap:3px;}
.chart-bar{position:relative; display:flex; align-items:center; height:22px; background:var(--tint); border-radius:4px;}
.chart-bar span{flex:none; height:100%; border-radius:4px; min-width:2px;}
/* ค่าอยู่ต่อท้ายแท่ง — แท่งเกือบเต็มให้อยู่ในแท่งเป็นตัวขาว */
.chart-bar em{margin-left:6px; font-style:normal; font-size:.82rem; font-weight:700; color:var(--heading); white-space:nowrap;}
.chart-bar.inside em{position:absolute; right:8px; margin:0; color:#fff;}
.blow-remark{display:grid; grid-template-columns:56px 1fr; gap:8px; align-items:start; margin-bottom:8px;}
.blow-remark label, .blow-remark > strong{font-weight:700; color:var(--heading); margin:6px 0 0;}
.blow-remark textarea{min-height:42px;}
.blow-remark-text{margin:4px 0 0; white-space:normal;}
.blow-remarks-form .blow-remark-text{display:none;}
.blow-note{font-size:.85rem; color:var(--amber); background:var(--amber-bg); border-radius:var(--radius-sm); padding:8px 12px; margin:12px 0 0;}
.blow-updated{font-size:.75rem; color:var(--muted); text-align:right; margin:8px 0 0;}
.rework-form{display:flex; gap:4px; align-items:center; flex-wrap:wrap; margin:0;}
.rework-form input{width:78px; min-height:32px; padding:4px 6px;}
.rework-form input[name=splices]{width:76px;}
.machine-photo-field{display:flex; align-items:center; gap:10px;}
.machine-photo-field img{width:48px; height:60px; object-fit:contain; flex:none;}
.team-photo-preview{display:block; width:64px; height:64px; border-radius:50%; object-fit:cover; margin:4px 0 6px;}

/* TV mode: เต็มจอ ไม่มีแถบเมนู ไม่มีฟอร์ม — ตัวอักษรใหญ่ขึ้นสำหรับทีวี 1920x1080 */
body.tv-mode .sidebar, body.tv-mode .topbar, body.tv-mode .nav-toggle, body.tv-mode .backdrop, body.tv-mode .content > .status{display:none;}
body.tv-mode .main{margin-left:0;}
body.tv-mode .content{max-width:none; padding:12px 16px;}
body.tv-mode .blow-remarks-form textarea, body.tv-mode .blow-remarks-form label + textarea, body.tv-mode .blow-remark-save{display:none;}
body.tv-mode .blow-remarks-form .blow-remark-text{display:block;}
body.tv-mode .blow-date label, body.tv-mode .blow-date input{font-size:1rem;}
body.tv-mode .blow-head{padding:10px 18px; margin-bottom:8px;}
body.tv-mode .blow-panel{padding:10px 14px;}
body.tv-mode .blow-leader img, body.tv-mode .blow-leader-blank{width:60px; height:60px;}
body.tv-mode .blow-gauge{width:112px; height:112px;}
body.tv-mode .gauge-value{font-size:1.25rem;}
body.tv-mode .gauge-label{font-size:.56rem; letter-spacing:0;}
body.tv-mode .blow-panels{margin-bottom:8px; gap:10px;}
/* TV: ทุกส่วน (แถบสถานะ ทีม กราฟ หมายเหตุ) อยู่ในจอ 1920x1080 จอเดียว */
body.tv-mode .blow-day{margin-bottom:6px;}
body.tv-mode .blow-status{margin-bottom:8px;}
body.tv-mode .blow-panel-head{margin-bottom:6px;}
body.tv-mode .blow-team-shift{margin-bottom:2px;}
body.tv-mode .blow-leader{width:auto; min-width:60px; max-width:130px;}
body.tv-mode .blow-leader figcaption{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
body.tv-mode .blow-leader img, body.tv-mode .blow-leader-blank{width:46px; height:46px; font-size:1.2rem; margin-bottom:2px;}
body.tv-mode .blow-rows{gap:6px;}
body.tv-mode .blow-tile{padding:4px 10px;}
body.tv-mode .blow-machine img{width:32px; height:40px;}
body.tv-mode .blow-panel-foot{margin-top:4px;}
body.tv-mode .blow-bottom{gap:10px;}
body.tv-mode .blow-card{padding:8px 14px;}
body.tv-mode .blow-card-title{margin-bottom:4px;}
body.tv-mode .blow-legend{margin-bottom:4px;}
body.tv-mode .blow-chart{gap:5px;}
body.tv-mode .chart-bar{height:15px;}
body.tv-mode .blow-remark{margin-bottom:2px;}
body.tv-mode .blow-note{margin-top:6px; padding:4px 10px;}
body.tv-mode .blow-updated{margin-top:2px;}
@media (min-width:1600px){
  body.tv-mode{font-size:17px;}
  body.tv-mode .tile-kg{font-size:1.45rem;}
}
@media screen and (max-width:1100px){
  .blow-head{grid-template-columns:1fr; text-align:center;}
  .blow-brand, .blow-controls{justify-content:center;}
  .blow-panels, .blow-bottom{grid-template-columns:1fr;}
}
@media screen and (max-width:600px){
  .blow-title{font-size:1.2rem; white-space:normal;}
  .blow-row{grid-template-columns:1fr 1fr;}
  .blow-machine{grid-column:1 / -1;}
  .blow-panel-head{flex-direction:column; align-items:flex-start;}
}

@media screen and (max-width:1279px){
  .sheet-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .sheet-col-3{grid-column:1/-1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid var(--line);}
  .sheet-col-3 .sheet-box + .sheet-box{border-top:0; border-left:1px solid var(--line);}
  .sheet-grid > .sheet-box:nth-child(2){border-right:0;}
  .layout-3{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* ---------- ใบส่งมอบ T-PD-FM-07: A4 แนวตั้ง หน้าละ 2 ฝั่ง ฝั่งละ 30 ม้วน ---------- */
.dn-page{--dn-fill:#E2EFDA; position:relative; width:210mm; max-width:100%; min-height:297mm; margin:0 auto 18px; padding:8mm 8mm 14mm;
  background:#fff; box-shadow:var(--shadow); color:#000; font-size:8.6pt; overflow-x:auto;}
.dn-table{width:100%; border-collapse:collapse; table-layout:fixed;}
.dn-table td, .dn-table th{border:1px solid #000; padding:0 3px; height:6.3mm; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.dn-table col.c-no{width:6%;} .dn-table col.c-m{width:7%;} .dn-table col.c-w{width:7%;} .dn-table col.c-j{width:4%;} .dn-table col.c-k{width:6%;}
.dn-table tbody td{border-top:0; border-bottom:1px solid #BBB; height:7mm;}
.dn-table tbody td:nth-child(8){border-right:2px solid #000;}
.dn-table thead td:nth-child(8), .dn-cols th:nth-child(8){border-right:2px solid #000;}
.dn-table .dn-company{font-size:12pt; font-weight:700; text-align:center;}
.dn-table .dn-label{text-align:center; font-weight:600; font-size:7.8pt; overflow:visible; text-overflow:clip; padding:0 1px;}
.dn-value{text-align:center;}
.dn-fill, .dn-total td{background:var(--dn-fill); -webkit-print-color-adjust:exact; print-color-adjust:exact;}
.dn-strong{font-weight:700;}
/* ขีดคั่นความหนา Min - Max บนเส้นแบ่งช่อง เหมือนแบบฟอร์มกระดาษ */
.dn-table .dn-dash{position:relative; overflow:visible;}
.dn-dash::before{content:'-'; position:absolute; left:-3px; font-weight:700;}
.dn-jot{font-size:13pt; font-weight:700; text-align:center;}
.dn-jot span{margin-right:14px;}
.dn-cols th{font-weight:600; font-size:8pt; text-align:center; vertical-align:top; height:9mm; border-bottom:2px solid #000; white-space:normal;
  padding:0 1px; letter-spacing:-.01em;}
.dn-cols th small{display:block; font-weight:400; font-size:6.2pt;}
.dn-table .num{text-align:right;} .dn-table .center{text-align:center;}
.dn-total td{font-weight:700; border-top:2px solid #000; height:7mm;}
.dn-sign{display:grid; grid-template-columns:1fr 1fr; gap:2mm 10mm; margin-top:3mm; font-size:10pt;}
.dn-sign div{display:flex; align-items:baseline; gap:4mm;}
.dn-sign span{width:26mm; text-align:right;}
.dn-sign b{flex:1; font-weight:400; text-align:center; border-bottom:1px dotted #000; min-height:5mm;}
.dn-footer{position:absolute; left:8mm; right:8mm; bottom:5mm; display:flex; justify-content:space-between; gap:6mm; font-size:7pt; white-space:nowrap;}
@media screen and (max-width:900px){ .dn-page{min-height:0; padding:4mm;} .dn-footer{position:static; margin-top:4mm; flex-wrap:wrap;} }

/* ---------- แผนการผลิตรายสัปดาห์ ---------- */
.plan-page .content{max-width:1880px;}
.plan-print-title{display:none;}
.plan-legend{display:flex; gap:18px; flex-wrap:wrap; align-items:center; margin:0 0 10px; font-size:.88rem;}
.plan-legend > span{display:inline-flex; align-items:center; gap:6px;}
.seg-swatch{display:inline-block; width:22px; height:14px; border-radius:3px;}
.plan-wrap{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);}
.plan-table{width:100%; border-collapse:collapse; table-layout:fixed; min-width:1100px;}
.plan-table th, .plan-table td{border:1px solid var(--line); padding:6px; vertical-align:top;}
.plan-table thead th{background:var(--tint); font-size:.88rem; text-align:center; color:var(--heading);}
.plan-machine-col{width:110px; text-align:left;}
.plan-table tbody th{background:var(--tint);}
.plan-table tbody th strong{display:block; font-size:1.1rem; color:var(--heading);}
.plan-table tbody th span{display:block; font-size:.75rem; color:var(--muted); font-weight:400;}
.plan-table .is-today{background:#FFF7DB;}
.plan-table thead th.is-today{background:#FDE68A;}
.today-tag{display:inline-block; font-size:.7rem; background:var(--amber); color:#fff; border-radius:6px; padding:0 6px; margin-left:4px;}
.plan-table td{height:92px;}
.plan-seg{display:block; border-radius:6px; padding:4px 6px; margin-bottom:5px; text-decoration:none; font-size:.8rem; line-height:1.3;
  color:var(--heading); border:1px solid transparent;}
.plan-seg:last-child{margin-bottom:0;}
.plan-seg span{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.seg-job{font-weight:700;} .seg-jot{font-size:.74rem; color:var(--muted);} .seg-kg{font-weight:700;}
.seg-done{white-space:normal !important; margin-top:2px; font-size:.68rem;}
/* ผลิตจริง = ทึบ / แผน = จาง มีลายทาง ขอบประ */
.plan-seg.actual, .seg-swatch.actual{background:var(--primary); border-color:var(--primary-dark); color:#fff;}
.plan-seg.actual .seg-jot{color:rgba(255,255,255,.85);}
.plan-seg.forecast, .seg-swatch.forecast{background:repeating-linear-gradient(135deg,#EAF2FF 0 6px,#D6E6FF 6px 12px);
  border:1px dashed var(--accent);}
.plan-seg:hover{filter:brightness(.96); text-decoration:none;}
.plan-note{margin:10px 0 0; font-size:.85rem; color:var(--muted);}
.plan-setting{display:flex; align-items:center; gap:8px; margin-top:12px; flex-wrap:wrap;}
.plan-setting label{margin:0;} .plan-setting input{width:110px;}
/* คิวงาน */
.queue-current{background:var(--tint); border:1px solid var(--line); border-radius:var(--radius-sm); padding:10px 12px; margin-bottom:12px;}
.queue-current .label{font-size:.78rem; color:var(--muted); font-weight:600;}
.queue-list{margin:0 0 12px; padding-left:22px;}
.queue-list li{display:flex; justify-content:space-between; gap:10px; align-items:center; padding:6px 0; border-bottom:1px solid var(--line);}
.queue-empty{margin:0 0 12px;}
.queue-item{display:flex; flex-direction:column; gap:2px; min-width:0;}
.queue-actions{display:flex; gap:4px; flex:none; margin:0;}
.queue-add{display:flex; gap:8px; align-items:center;}
.queue-add select{flex:1; min-width:0;}

/* ---------- มือถือ / แท็บเล็ต: ใช้งานได้ ---------- */
@media screen and (max-width:900px){
  body{font-size:15px;}
  .sidebar{transform:translateX(-100%); transition:transform .2s ease; width:min(84vw,280px); box-shadow:none; visibility:hidden;}
  body.nav-open .sidebar{transform:none; visibility:visible; box-shadow:0 0 40px rgba(15,23,42,.35);}
  body.nav-open .backdrop{display:block; position:fixed; inset:0; z-index:35; background:rgba(15,23,42,.45);}
  .brand{flex-direction:row; align-items:center;}
  .brand-badge{width:auto; padding:6px;}
  .brand-badge .logo-full{display:none;}
  .brand-badge .logo-icon{display:block;}
  .main{margin-left:0;}
  .nav-toggle{display:grid;}
  .topbar-inner{padding:10px 16px; flex-wrap:wrap; gap:10px;}
  .page-heading h1{font-size:1.1rem;}
  .page-actions{width:100%; justify-content:flex-start;}
  .page-actions select{max-width:100%; flex:1 1 100%;}
  .content{padding:16px 16px 40px;}
  .grid4,.grid3,.grid2,.layout-2,.layout-3,.fields,.sheet-grid,.sheet-col-3{grid-template-columns:minmax(0,1fr);}
  .calc-grid,.sheet-col-3 .calc-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .span-2{grid-column:auto;}
  .sheet-box{border-right:0; border-bottom:1px solid var(--line);}
  .sheet-col-3 .sheet-box + .sheet-box{border-left:0;}
  .stat-grid,.stat-grid.three{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;}
  .stat{padding:12px; gap:10px;} .stat-icon{display:none;} .stat-value{font-size:1.2rem;}
  /* ตารางกว้างเลื่อนข้างในการ์ด หน้าไม่เลื่อนข้าง */
  .table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch;}
  table.data thead th{position:static;}
  .table-wrap.scroll table.data thead th{position:sticky; top:0;}
  table.data{min-width:640px;}
  .qrCells{grid-template-columns:repeat(2,1fr);}
  .sheet-head .form-title{text-align:left;}
  .sig{gap:16px;}
}

/* ---------- พิมพ์ A4 ขาวดำ ---------- */
@page{size:A4 portrait; margin:12mm;}
@page dn{size:A4 portrait; margin:8mm 9mm;}
@page plan{size:A4 landscape; margin:8mm;}
@media print{
  :root{--topbar-h:0px;}
  html,body{background:#fff !important; color:#000; font-size:10.5pt;}
  .sidebar,.backdrop,.nav-toggle,.skip-link,.page-actions,.no-print{display:none !important;}
  .main{margin:0;}
  .topbar{position:static; border:0; box-shadow:none; background:#fff;}
  .topbar-inner{padding:0 0 6px; min-height:0; max-width:none;}
  .page-heading h1{font-size:15pt; color:#000;}
  .page-subtitle{display:none;}
  body.print-bare .topbar{display:none;}
  .content{padding:0; max-width:none;}
  h1,h2,h3,h4,.card-title,.box-title,.stat-value,.stat-label,.stat-sub,.hint,.sub,.piece-note,a{color:#000 !important;}
  .card,.stat{box-shadow:none; border:1px solid #000; border-radius:0; margin-bottom:8px; break-inside:avoid;}
  .card-header{padding:6px 10px; border-bottom:1px solid #000;}
  .card-body{padding:8px 10px;}
  .stat-grid{gap:6px; margin-bottom:8px;}
  .stat{padding:6px 8px;} .stat-icon{display:none;} .stat-value{font-size:12pt;}
  .table-wrap{border:0; overflow:visible !important; max-height:none !important;}
  table.data{font-size:9pt; min-width:0;}
  table.data th, table.data td{border:1px solid #000 !important; background:#fff !important; color:#000 !important; padding:3px 5px;}
  table.data thead th{position:static; font-size:8.5pt;}
  table.data thead{display:table-header-group;}
  table.data tr{break-inside:avoid;}
  table.data tr.group-row th, table.data tr.totals td{font-weight:700;}
  .badge,.count-pill{background:none !important; color:#000 !important; border:1px solid #000; padding:0 6px;}
  .status{background:none !important; color:#000 !important; border:1px solid #000 !important;}
  .progress{border:1px solid #000; background:#fff;} .progress > span{background:#000 !important;}
  input,select,textarea{border:0 !important; border-bottom:1px solid #666 !important; border-radius:0 !important; background:none !important;
    color:#000 !important; min-height:0 !important; padding:1px 2px !important; -webkit-appearance:none; appearance:none; box-shadow:none !important;}
  input::placeholder,textarea::placeholder{color:transparent;}
  input[type=checkbox]{-webkit-appearance:auto; appearance:auto;}
  .sheet{border:1.5px solid #000;}
  .sheet-head{background:#fff; border-bottom:1.5px solid #000; padding:6px 10px;}
  .sheet-head .form-title .th,.sheet-head .company-name{color:#000;}
  /* โลโก้พิมพ์ขาวดำ: แปลงเป็นเทาและเพิ่ม contrast ให้ขอบคม ไม่เป็นจุดสีจาง */
  .doc-logo{width:42mm; filter:grayscale(1) contrast(1.35);}
  /* แผนการผลิต: A4 แนวนอน ขาวดำ หนึ่งสัปดาห์ต่อหน้า */
  body.plan-page .content{page:plan;}
  body.plan-page .topbar{display:none;}
  .plan-print-title{display:block; font-size:13pt; margin:0 0 4mm; color:#000;}
  .plan-wrap{border:0; box-shadow:none; border-radius:0;}
  .plan-table{min-width:0; font-size:7.5pt; break-inside:avoid;}
  .plan-table th, .plan-table td{border:1px solid #000 !important; background:#fff !important; color:#000 !important; padding:2px 3px;}
  .plan-table td{height:auto;}
  .plan-table thead th.is-today, .plan-table .is-today{border-width:2px !important;}
  .today-tag{background:none; color:#000; border:1px solid #000;}
  .plan-machine-col{width:20mm;}
  .plan-seg{font-size:7pt; padding:1px 3px; margin-bottom:2px; color:#000 !important; border-radius:2px;
    -webkit-print-color-adjust:exact; print-color-adjust:exact;}
  .plan-seg.actual, .seg-swatch.actual{background:#BDBDBD !important; border:1.5px solid #000 !important;}
  .plan-seg .seg-jot{color:#000 !important;}
  .plan-seg.forecast, .seg-swatch.forecast{background:repeating-linear-gradient(135deg,#fff 0 3px,#E0E0E0 3px 6px) !important;
    border:1px dashed #000 !important;}
  .seg-swatch{-webkit-print-color-adjust:exact; print-color-adjust:exact;}
  .plan-legend{font-size:8pt; margin-bottom:2mm;}
  .plan-note{color:#000; font-size:8pt;}
  /* ใบส่งมอบ: หน้า A4 แนวตั้งตามแบบฟอร์ม ขึ้นหน้าใหม่ทุกหน้า ความสูงคงที่ให้ท้ายกระดาษอยู่ล่างสุดเสมอ */
  body.delivery-page .content > :not(.dn-page){display:none !important;}
  .dn-page{page:dn; width:auto; height:280mm; min-height:0; margin:0; padding:0 0 8mm; box-shadow:none; overflow:hidden;
    break-after:page; page-break-after:always;}
  .dn-page:last-of-type{break-after:auto; page-break-after:auto;}
  .dn-footer{left:0; right:0; bottom:0;}
  .sheet-grid{grid-template-columns:1fr 1fr 1.15fr;}
  .sheet-col-3{display:block; grid-column:auto; border-top:0;}
  .sheet-box,.sheet-wide{border-color:#000 !important; padding:6px 8px 2px;}
  .sheet-col-3 .sheet-box + .sheet-box{border-left:0; border-top:1px solid #000;}
  .box-title{margin-bottom:6px;} .box-title::before{background:#000;}
  .fields{gap:4px 8px; margin-bottom:4px;}
  .fields label{font-size:7.5pt; margin:0;}
  .calc-box{background:#fff;} .calc-tile{border-color:#000; padding:3px 6px;} .calc-tile .val{font-size:10pt; color:#000 !important;}
  table.mix-table th{background:#fff; border-bottom:1px solid #000; color:#000;}
  table.mix-table td{border-bottom:1px solid #999;}
  .sig .line{border-top-color:#000;}
  .qrLabel.rw{border-color:#000;} .qrLabel .rw-tag{color:#000;}
  #qrGridWrap .qrPage{margin:0; break-inside:avoid;}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;}}