:root{--bg:#f4f6f8;--card:#fff;--ink:#1d2733;--mute:#66727f;--line:#dde3e9;--pri:#0f6e8c;--pri2:#e3f2f7;--ok:#1f8a4c;--okb:#e2f5ea;--warn:#b26a00;--warnb:#fff3dc;--bad:#c0392b;--badb:#fde8e6;--y:#fff6bf;--g:#d9f2c7;--r:#ffd9d6;--side:#12384a}
*{box-sizing:border-box}
body{margin:0;font:14px/1.45 "Sarabun","Leelawadee UI","Segoe UI",Tahoma,sans-serif;color:var(--ink);background:var(--bg)}
a{color:var(--pri)}
button,input,select,textarea{font:inherit}
.layout{display:flex;min-height:100vh}
.side{width:220px;background:var(--side);color:#cfe3ec;flex-shrink:0;padding:12px 0;position:sticky;top:0;height:100vh;overflow:auto}
.side .brand{font-weight:700;color:#fff;padding:4px 18px 14px;font-size:16px}
.side a{display:flex;justify-content:space-between;color:#cfe3ec;text-decoration:none;padding:8px 18px}
.side a.on,.side a:hover{background:#1d5068;color:#fff}
.side .who{padding:14px 18px;font-size:12px;border-top:1px solid #23506a;margin-top:10px}
.badge{background:#e85d4a;color:#fff;border-radius:10px;padding:0 7px;font-size:12px;line-height:18px}
.main{flex:1;min-width:0;padding:16px 20px 40px}
h1{font-size:20px;margin:0 0 12px}
h3{font-size:15px;margin:14px 0 6px}
.card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin-bottom:12px}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:end}
.filters label{display:flex;flex-direction:column;font-size:12px;color:var(--mute);gap:2px}
input,select,textarea{border:1px solid #c5ced6;border-radius:6px;padding:5px 7px;background:#fff;color:var(--ink)}
textarea{width:100%;min-height:60px}
.btn{border:1px solid var(--pri);background:var(--pri);color:#fff;border-radius:6px;padding:6px 12px;cursor:pointer;white-space:nowrap}
.btn.sec{background:#fff;color:var(--pri)}
.btn.ok{background:var(--ok);border-color:var(--ok)}
.btn.bad{background:var(--bad);border-color:var(--bad)}
.btn.sm{padding:3px 8px;font-size:12px}
.btn:disabled{opacity:.5;cursor:default}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.chip{border:1px solid var(--line);background:#fff;border-radius:16px;padding:3px 10px;cursor:pointer;font-size:13px}
.chip.on{background:var(--pri);color:#fff;border-color:var(--pri)}
.chip b{font-weight:600;margin-left:4px}
.tbl-wrap{overflow:auto;max-height:calc(100vh - 290px);border:1px solid var(--line);border-radius:6px;background:#fff}
table{border-collapse:collapse;width:100%}
th,td{border-bottom:1px solid var(--line);padding:5px 7px;text-align:left;vertical-align:top;font-size:13px}
th{position:sticky;top:0;background:#eef2f5;z-index:1;white-space:nowrap;font-weight:600}
th.y{background:var(--y)}th.g{background:var(--g)}th.r{background:var(--r)}
td.num,th.num{text-align:right;white-space:nowrap}
tbody tr:hover{background:#f6fafc}
tr.click{cursor:pointer}
.tag{display:inline-block;border-radius:4px;padding:0 6px;margin:1px 2px 1px 0;font-size:12px;background:#eef1f4;color:#334;white-space:nowrap}
.tag.pair{background:#e5e1ff}.tag.samecust{background:#dff0ff}.tag.project,.tag.contract{background:#ffe7c2}.tag.wire,.tag.pipe,.tag.plug{background:#ffe0e0}.tag.salt,.tag.ro{background:#e2f5ea}.tag.cross,.tag.wash{background:#f1e6d6}
.st{display:inline-block;border-radius:4px;padding:0 6px;font-size:12px;white-space:nowrap}
.st.ok{background:var(--okb);color:var(--ok)}.st.check{background:var(--warnb);color:var(--warn)}.st.wrong,.st.cs{background:var(--badb);color:var(--bad)}.st.nopay,.st.noeval{background:#eef1f4;color:var(--mute)}
.rv-ok{background:var(--okb);color:var(--ok)}.rv-wait{background:var(--warnb);color:var(--warn)}.rv-cswrong{background:var(--badb);color:var(--bad)}.rv-extra{background:#e5e1ff;color:#4b3aa8}
.mute{color:var(--mute)}.small{font-size:12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kv{display:grid;grid-template-columns:140px 1fr;gap:3px 10px;font-size:13px}
.kv div:nth-child(odd){color:var(--mute)}
.imgs{display:flex;flex-wrap:wrap;gap:6px}
.imgs img{width:110px;height:110px;object-fit:cover;border-radius:6px;border:1px solid var(--line);cursor:zoom-in}
.modal{position:fixed;inset:0;background:rgba(15,30,40,.45);display:flex;align-items:flex-start;justify-content:center;z-index:50;overflow:auto;padding:24px 10px}
.modal.hidden{display:none}
.modal-box{background:#fff;border-radius:10px;max-width:1100px;width:100%;padding:18px 20px;position:relative}
.modal-x{position:absolute;right:10px;top:8px;border:0;background:none;font-size:20px;cursor:pointer}
.toast{position:fixed;right:18px;bottom:18px;background:#173a4c;color:#fff;padding:10px 16px;border-radius:8px;z-index:60}
.toast.hidden{display:none}.toast.err{background:var(--bad)}
.issue{border-left:4px solid var(--bad);background:var(--badb);padding:5px 9px;margin:4px 0;border-radius:4px}
.sugg{border-left:4px solid var(--warn);background:var(--warnb);padding:5px 9px;margin:4px 0;border-radius:4px;display:flex;justify-content:space-between;gap:8px;align-items:center}
.okbox{border-left:4px solid var(--ok);background:var(--okb);padding:5px 9px;border-radius:4px}
.radio{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0}
.radio label{border:1px solid var(--line);border-radius:6px;padding:5px 10px;cursor:pointer}
.radio input{margin-right:5px}
.radio label.on{border-color:var(--pri);background:var(--pri2)}
.addrow{display:grid;grid-template-columns:130px 100px 170px 1fr 30px;gap:6px;margin:4px 0}
.login{max-width:340px;margin:12vh auto;background:#fff;border:1px solid var(--line);border-radius:10px;padding:24px}
.login input{width:100%;margin:4px 0 10px;padding:8px}
.stats{display:flex;gap:10px;flex-wrap:wrap}
.stat{background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px 14px;min-width:110px}
.stat b{display:block;font-size:20px}
canvas.sign{border:1px dashed #9aa;border-radius:6px;background:#fff;touch-action:none}
.right{margin-left:auto}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.print-only{display:none}
/* columns: clear dividers, resize handle, drag to move */
th,td{border-right:1px solid #cdd6de}
th{border-bottom:2px solid #b8c4ce}
th.mv{position:sticky;cursor:grab;user-select:none;overflow:hidden;text-overflow:ellipsis}
td{overflow-wrap:anywhere}
th .rz{position:absolute;right:-1px;top:0;bottom:0;width:7px;cursor:col-resize;z-index:2}
th .rz:hover,th .rz:active{background:var(--pri);opacity:.5}
th.dragging{opacity:.4}
th.dropto{box-shadow:inset 3px 0 0 var(--pri)}
.col-reset{margin:2px 0 4px}
a.fl{text-decoration:none;font-weight:600}
a.fl:hover{text-decoration:underline}
/* side menu collapse */
.side .brand{display:flex;justify-content:space-between;align-items:center}
.side-tg{background:none;border:1px solid #3b6b80;color:#cfe3ec;border-radius:5px;cursor:pointer;padding:0 7px}
.side-open{display:none;position:fixed;left:8px;top:8px;z-index:20;background:var(--side);color:#fff;border:0;border-radius:6px;padding:5px 10px;cursor:pointer;font-size:16px}
.layout.mini .side{display:none}
.layout.mini .side-open{display:block}
.layout.mini .main{padding-left:52px}
/* image viewer */
.vimg{cursor:zoom-in}
.lb{position:fixed;inset:0;background:rgba(5,12,18,.92);z-index:80;display:flex;flex-direction:column}
.lb-bar{display:flex;gap:6px;align-items:center;justify-content:center;padding:8px;flex-wrap:wrap}
.lb-bar button,.lb-bar a{background:#24323c;color:#fff;border:1px solid #3d505e;border-radius:6px;min-width:38px;height:34px;font-size:17px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.lb-bar button:hover{background:#34505f}
.lb-n{color:#cfe3ec;margin-right:10px}
.lb-stage{flex:1;overflow:hidden;display:flex;align-items:center;justify-content:center;touch-action:none}
.lb-stage img{max-width:92vw;max-height:84vh;transition:transform .12s;cursor:grab;user-select:none}
@media (max-width:800px){.side{display:none}.side-open{display:block}.main{padding-left:52px!important}
  .layout.open .side{display:block;position:fixed;left:0;top:0;z-index:40;box-shadow:4px 0 18px rgba(0,0,0,.3)}.grid2{grid-template-columns:1fr}.main{padding:12px}.addrow{grid-template-columns:1fr 1fr}}
@media print{
  @page{size:A4 landscape;margin:8mm}
  body{background:#fff;font-size:11px}
  .side,.no-print,.filters,.btn,.toast,.modal{display:none!important}
  .main{padding:0}
  .print-only{display:block}
  .card{border:0;padding:0}
  .tbl-wrap{max-height:none;overflow:visible;border:0}
  table{font-size:10px;width:100%!important;table-layout:auto!important}
  th{width:auto!important}
  th .rz,.col-reset,.side-open,.lb{display:none!important}
  a.fl{color:inherit}
  thead{display:table-header-group}
  th{position:static;background:#e8e8e8!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  tr{page-break-inside:avoid}
  th,td{padding:3px 4px;font-size:10px}
}