/* ===== Sitthi Truck Center · STC ===== */
:root{
  --bg:#f2f5f3;--card:#fff;--text:#16211b;--muted:#66736b;--line:#dfe6e1;--input:#fff;--hover:#f3f8f5;
  --brand:#0b5d34;--brand2:#14894c;--brand-soft:#e3f3ea;--accent:#facc15;
  --side:#0d2219;--side-text:#c7d6cd;--side-hover:#16362a;
  --slate:#64748b;--amber:#d97706;--orange:#ea580c;--blue:#2563eb;--violet:#7c3aed;--green:#15803d;--red:#dc2626;--line-green:#06c755;
  --radius:14px;--shadow:0 1px 2px rgba(16,40,28,.05),0 4px 14px rgba(16,40,28,.06);
}
:root[data-theme="dark"]{
  --bg:#0c1511;--card:#14201a;--text:#e3ece6;--muted:#93a69b;--line:#26362d;--input:#0f1a15;--hover:#1a2a22;--brand-soft:#173826;
  --side:#08110d;--side-hover:#132a20;--shadow:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--bg:#0c1511;--card:#14201a;--text:#e3ece6;--muted:#93a69b;--line:#26362d;--input:#0f1a15;--hover:#1a2a22;--brand-soft:#173826;--side:#08110d;--side-hover:#132a20;--shadow:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25)}
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:14px/1.55 'IBM Plex Sans Thai',system-ui,sans-serif}
a{color:var(--brand2);text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0 0 8px;line-height:1.3}h2{font-size:20px}h3{font-size:16px}h4{font-size:14px;margin-top:12px}
.muted{color:var(--muted)}.sm{font-size:12.5px}.center{text-align:center}.r{text-align:right}.nowrap{white-space:nowrap}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.ok{color:var(--green);font-weight:600}.neg{color:var(--red)!important;font-weight:600}.pos{color:var(--green)}
.mt{margin-top:10px}.pad{padding:10px 16px}.spacer{flex:1}.grow{flex:1;min-width:0}
.lead{color:var(--muted);margin:0 0 14px;max-width:900px}
[hidden]{display:none!important}

/* ---------- shell ---------- */
.shell{display:flex;min-height:100vh}
.side{width:248px;flex:0 0 248px;background:var(--side);color:var(--side-text);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;z-index:30}
.brand{display:flex;gap:10px;align-items:center;padding:16px 16px 12px;color:#fff;text-decoration:none!important}
.brand b{display:block;font-size:14px;line-height:1.2}.brand small{display:block;color:var(--side-text);font-size:11.5px}
.logo{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background:linear-gradient(140deg,#22c55e,#0b5d34);color:#fff;font-weight:700;font-size:13px;letter-spacing:.5px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.logo.xl{width:76px;height:76px;font-size:24px;border-radius:18px}
.side nav{padding:4px 10px 16px;flex:1}
.nav-g{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:#7d9a8a;margin:14px 8px 4px}
.side nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;color:var(--side-text);text-decoration:none;font-size:13.5px}
.side nav a:hover{background:var(--side-hover);color:#fff}
.side nav a.on{background:#1b4a33;color:#fff;box-shadow:inset 3px 0 0 #4ade80}
.side nav a span{flex:1}.side nav a em{font-style:normal;font-size:11px;background:#2b5a43;color:#fff;border-radius:99px;padding:0 7px}
.side nav a em.warn{background:var(--amber)}
.i{width:18px;height:18px;flex:0 0 18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.side-foot{font-size:10.5px;color:#6f8b7c;padding:12px 16px;border-top:1px solid #1b3328}
.content{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:12px;padding:12px 24px;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.topbar h1{font-size:19px;margin:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-r{display:flex;align-items:center;gap:10px}
.who{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2;color:var(--text);text-decoration:none!important}.who small{color:var(--muted);font-size:11px}
.hamb{display:none;background:none;border:0;padding:4px;cursor:pointer;color:var(--text)}.hamb svg{width:24px;height:24px;stroke:currentColor;stroke-width:2;fill:none}
.main{padding:20px 24px 40px;max-width:1500px;width:100%}
.scrim{display:none}

/* ---------- controls ---------- */
label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin:10px 0 4px}
input,select,textarea{width:100%;font:inherit;color:var(--text);background:var(--input);border:1px solid var(--line);border-radius:9px;padding:8px 10px}
textarea{resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand2);outline-offset:-1px;border-color:transparent}
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--brand2)}
input[type=file]{padding:6px}
.req{color:var(--red);font-style:normal}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-weight:600;border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:9px;padding:8px 14px;cursor:pointer;text-decoration:none!important;white-space:nowrap;line-height:1.3}
.btn:hover{background:var(--hover)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}.btn.primary:hover{background:var(--brand2)}
.btn.line{background:var(--line-green);border-color:var(--line-green);color:#fff}
.btn.danger{background:var(--red);border-color:var(--red);color:#fff}
.btn.ghost{background:transparent}.btn.ghost.danger{color:var(--red);border-color:#f3c1c1;background:transparent}
.btn.sm{padding:6px 10px;font-size:13px}.btn.xs{padding:3px 8px;font-size:12px;border-radius:7px}
.btn.block{display:flex;width:100%;margin-top:12px}.btn.big{padding:12px;font-size:16px}
.btn:disabled,.btn.disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
.link{background:none;border:0;color:var(--brand2);font:inherit;cursor:pointer;padding:0}
.x{background:none;border:0;color:var(--muted);font-size:20px;line-height:1;cursor:pointer;padding:2px 6px}.x:hover{color:var(--red)}
.chk{display:flex;align-items:center;gap:8px;font-weight:500;color:var(--text);margin:6px 0}
.chk.inl,.inl{display:inline-flex;align-items:center;gap:6px;margin:0 8px 0 0;font-weight:500;color:var(--text)}
.w-sm{width:80px!important}.w-md{width:140px!important}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px}
.inline{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap;margin:0}.inline select,.inline input:not([type=checkbox]):not([type=radio]){width:auto;max-width:220px}
.between{display:flex;justify-content:space-between;align-items:center;gap:10px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.grid-form{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:0 14px}.grid-form .full{grid-column:1/-1}
.copy{width:auto;min-width:260px;font-size:12px;padding:4px 8px}

/* ---------- cards ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin:0 0 16px;box-shadow:var(--shadow)}
.card.flush{padding:0;overflow:hidden}
.card.narrow{max-width:420px}
.card-h{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line)}.card-h h3{margin:0}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.cols.wide-left{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}.cols>*{min-width:0}
.flash{padding:10px 14px;border-radius:10px;margin:0 0 12px;font-weight:500;border:1px solid}
.flash.ok{background:#e7f6ec;color:#14532d;border-color:#bfe5cb}.flash.err{background:#fdecec;color:#991b1b;border-color:#f6c9c9}.flash.warn{background:#fff7e0;color:#78450a;border-color:#f6dfa0}
:root[data-theme="dark"] .flash.ok{background:#12301f;color:#a7f3c3;border-color:#1f4d33}:root[data-theme="dark"] .flash.err{background:#3a1717;color:#fecaca;border-color:#5c2424}:root[data-theme="dark"] .flash.warn{background:#3a2c0d;color:#fde68a;border-color:#5c4615}
.dl{display:grid;grid-template-columns:120px 1fr;gap:4px 12px;margin:0 0 12px}.dl dt{color:var(--muted)}.dl dd{margin:0}

/* ---------- badges ---------- */
.badge{display:inline-block;font-size:11.5px;font-weight:600;border-radius:99px;padding:1px 9px;white-space:nowrap;background:#eef1f4;color:#475569;vertical-align:middle}
.badge.slate{background:#e9edf2;color:#475569}.badge.amber{background:#fef3c7;color:#92400e}.badge.orange{background:#ffedd5;color:#9a3412}
.badge.blue{background:#dbeafe;color:#1e40af}.badge.violet{background:#ede9fe;color:#5b21b6}.badge.green{background:#dcfce7;color:#166534}
.badge.red{background:#fee2e2;color:#991b1b}.badge.line{background:var(--line-green);color:#fff}
:root[data-theme="dark"] .badge{filter:saturate(.8) brightness(.85)}

/* ---------- tables ---------- */
.tbl-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-size:12px;font-weight:600;color:var(--muted);background:var(--hover);padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tfoot td{background:var(--hover);border-top:1px solid var(--line);border-bottom:0}
.tbl.hover tbody tr:hover,.tbl tr[data-href]:hover{background:var(--hover)}
.tbl tr[data-href]{cursor:pointer}
.tbl td.wrap{white-space:normal;max-width:380px}
.tbl tr.dim td{opacity:.55}.tbl tr.strike td:first-child{text-decoration:line-through}
.tbl tr.warnrow{background:#fffbeb}:root[data-theme="dark"] .tbl tr.warnrow{background:#2a2310}
.empty{text-align:center;color:var(--muted);padding:28px!important}
.tbl.check td,.tbl.check th{padding:6px 8px}.tbl.check input:not([type=radio]){padding:4px 8px}
.tbl.lines td{vertical-align:middle}

/* ---------- toolbars & filters ---------- */
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.toolbar input,.toolbar select{width:auto}.toolbar input.grow{flex:1;min-width:200px}
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;padding:12px 16px}
.filters .fld{min-width:140px;flex:1}.filters .fld label{margin-top:0}.filters .act{display:flex;gap:6px;flex:0 0 auto}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.chip{border:1px solid var(--line);background:var(--card);border-radius:99px;padding:4px 12px;font-size:13px;color:var(--text);text-decoration:none!important}
.chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.pager{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:-6px}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.tab{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:10px;background:var(--card);border:1px solid var(--line);color:var(--text);font-weight:500;text-decoration:none!important}
.tab em{font-style:normal;font-size:12px;background:var(--hover);border-radius:99px;padding:0 8px;color:var(--muted)}
.tab.on{background:var(--brand);color:#fff;border-color:var(--brand)}.tab.on em{background:rgba(255,255,255,.22);color:#fff}
.tab.right{margin-left:auto}
.tab.slate{box-shadow:inset 0 -3px 0 var(--slate)}.tab.amber{box-shadow:inset 0 -3px 0 var(--amber)}.tab.orange{box-shadow:inset 0 -3px 0 var(--orange)}
.tab.blue{box-shadow:inset 0 -3px 0 var(--blue)}.tab.violet{box-shadow:inset 0 -3px 0 var(--violet)}.tab.green{box-shadow:inset 0 -3px 0 var(--green)}

/* ---------- KPIs ---------- */
.chart-box{position:relative;height:260px}.chart-box.tall{height:320px}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow);color:var(--text);text-decoration:none!important;display:block}
.kpi small{display:block;color:var(--muted);font-size:12px}.kpi b{display:block;font-size:22px;margin:2px 0}.kpi span{font-size:12px;color:var(--muted)}
.kpi.warn{border-color:#f6d58b;background:linear-gradient(0deg,#fffbeb,var(--card))}:root[data-theme="dark"] .kpi.warn{background:#2a2310}
.kpis.small{grid-template-columns:repeat(3,1fr);gap:8px}.kpis.small>div{background:var(--hover);border-radius:10px;padding:8px 10px}.kpis.small small{display:block;color:var(--muted);font-size:11.5px}
.statusbar{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:16px}
.sb{border-radius:12px;padding:10px 14px;color:#fff;text-decoration:none!important;box-shadow:var(--shadow)}
.sb small{display:block;opacity:.9;font-size:12px}.sb b{font-size:24px}
.sb.slate{background:var(--slate)}.sb.amber{background:var(--amber)}.sb.orange{background:var(--orange)}.sb.blue{background:var(--blue)}.sb.violet{background:var(--violet)}.sb.green{background:var(--green)}

/* ---------- workshop ---------- */
.flowbar{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin-bottom:14px}
.fb-step{background:var(--brand-soft);color:var(--brand);font-weight:600;font-size:12.5px;padding:5px 12px 5px 16px;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,0 100%,8px 50%)}
:root[data-theme="dark"] .fb-step{color:#86efac}
.flowbar .btn{margin-left:auto}
.kanban{display:grid;grid-template-columns:repeat(7,minmax(165px,1fr));gap:10px;overflow-x:auto;padding-bottom:6px;margin-bottom:16px}
.lane{background:var(--hover);border:1px solid var(--line);border-radius:12px;min-height:120px}
.lane-h{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-radius:11px 11px 0 0;color:#fff;font-weight:600;font-size:13px}
.lane-h em{font-style:normal;background:rgba(255,255,255,.25);border-radius:99px;padding:0 8px;font-size:12px}
.lane-h.slate{background:var(--slate)}.lane-h.amber{background:var(--amber)}.lane-h.orange{background:var(--orange)}.lane-h.blue{background:var(--blue)}.lane-h.violet{background:var(--violet)}.lane-h.green{background:var(--green)}.lane-h.red{background:var(--red)}
.kcard{display:block;background:var(--card);border:1px solid var(--line);border-radius:10px;margin:8px;padding:9px 10px;color:var(--text);text-decoration:none!important;box-shadow:var(--shadow)}
.kcard:hover{border-color:var(--brand2)}
.clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kfoot{display:flex;gap:6px;align-items:center;justify-content:space-between;margin-top:6px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.lgroup{margin:0}.lgroup .lane-h{border-radius:0}

/* ---------- job page ---------- */
.jobhead{display:grid;grid-template-columns:1fr auto;gap:12px}
.jh-main{display:flex;gap:16px;align-items:center}
.jh-plate{background:#fff;color:#111;border:2px solid #111;border-radius:8px;padding:4px 14px;font-weight:700;font-size:22px;text-align:center;line-height:1.15;min-width:140px}
.jh-plate small{display:block;font-size:12px;font-weight:500}
.jh-title{font-size:18px;font-weight:700;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.jh-act{display:flex;gap:8px;align-items:flex-start}
.stepper{grid-column:1/-1;display:flex;list-style:none;margin:6px 0 0;padding:0;counter-reset:s;overflow-x:auto}
.stepper li{flex:1;min-width:92px;text-align:center;font-size:12px;color:var(--muted);position:relative;padding-top:30px}
.stepper li span{position:absolute;top:0;left:50%;transform:translateX(-50%);width:26px;height:26px;border-radius:50%;background:var(--hover);border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;z-index:1}
.stepper li::before{content:'';position:absolute;top:12px;left:-50%;width:100%;height:2px;background:var(--line)}
.stepper li:first-child::before{display:none}
.stepper li.done{color:var(--green)}.stepper li.done span{background:var(--green);border-color:var(--green);color:#fff}.stepper li.done::before{background:var(--green)}
.stepper li.cur{color:var(--text);font-weight:700}.stepper li.cur span{background:var(--accent);border-color:#ca8a04;color:#111}.stepper li.cur::before{background:var(--green)}
.card.next{border-left:4px solid var(--accent)}
.menu{position:relative}.menu summary{list-style:none}.menu summary::-webkit-details-marker{display:none}
.menu-list{position:absolute;right:0;top:110%;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);min-width:220px;z-index:10;padding:6px}
.menu-list a{display:block;padding:7px 10px;border-radius:7px;color:var(--text)}.menu-list a:hover{background:var(--hover);text-decoration:none}
.totals{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:12px 16px;border-top:1px solid var(--line);flex-wrap:wrap}
.totals dl{display:grid;grid-template-columns:auto auto;gap:3px 24px;margin:0 0 0 auto;text-align:right}.totals dd{margin:0}
.totals .big{font-size:18px;font-weight:700;color:var(--brand2)}
.additem{padding:12px 16px;border-top:1px dashed var(--line);background:var(--hover)}
.grid-add{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}.grid-add>div{min-width:110px}.grid-add .grow{flex:1;min-width:200px}.grid-add label{margin-top:4px}
.grid-add .act{min-width:0}
.thumbs{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0}
.thumbs img{width:110px;height:84px;object-fit:cover;border-radius:8px;border:1px solid var(--line);display:block}
.th{position:relative}.th form{position:absolute;top:-6px;right:-6px}.th .x{background:var(--card);border-radius:99px;box-shadow:var(--shadow);font-size:16px}
canvas.sign{width:100%;height:160px;border:1px dashed #9fb3a7;border-radius:10px;background:#fff;touch-action:none;display:block;margin:4px 0}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{display:flex;gap:10px;padding:6px 0;position:relative}
.timeline li:not(:last-child)::after{content:'';position:absolute;left:5px;top:20px;bottom:-6px;width:2px;background:var(--line)}
.dot{width:12px;height:12px;border-radius:50%;margin-top:5px;flex:0 0 12px;background:var(--slate)}
.dot.amber{background:var(--amber)}.dot.orange{background:var(--orange)}.dot.blue{background:var(--blue)}.dot.violet{background:var(--violet)}.dot.green{background:var(--green)}.dot.red{background:var(--red)}
details>summary{cursor:pointer}summary.danger{color:var(--red);font-weight:600}
.docbtns{display:flex;gap:4px;flex-wrap:wrap}
.code6{font-size:34px;font-weight:700;letter-spacing:8px;margin:6px 0;font-family:ui-monospace,monospace}
.qrbox{display:inline-block;background:#fff;padding:10px;border-radius:12px}
.logo-prev{max-height:70px;display:block;margin:6px 0}
.seg2{display:flex;gap:6px;margin-bottom:6px}.seg2 label{flex:1;margin:0}.seg2 input{display:none}
.seg2 span{display:block;text-align:center;border:1px solid var(--line);border-radius:9px;padding:8px;font-weight:600;color:var(--text);cursor:pointer}
.seg2 input:checked+span{background:var(--brand);color:#fff;border-color:var(--brand)}

/* ---------- reports ---------- */
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.rcard{position:relative;display:flex;flex-direction:column;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;color:var(--text);text-decoration:none!important;box-shadow:var(--shadow)}
.rcard:hover{border-color:var(--brand2)}.rcard .i{width:26px;height:26px;color:var(--brand2);margin-bottom:4px}
.rcard small{color:var(--muted)}.rn{position:absolute;top:12px;right:14px;font-size:12px;color:var(--muted);font-weight:700}

/* ---------- dialogs ---------- */
dialog.dlg{border:0;border-radius:16px;padding:18px 20px;width:min(520px,94vw);max-height:90vh;background:var(--card);color:var(--text);box-shadow:0 20px 60px rgba(0,0,0,.3)}
dialog.dlg.wide{width:min(860px,96vw)}
dialog.dlg::backdrop{background:rgba(8,20,14,.55)}
.dlg-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.dlg-h h3{margin:0}
.dlg-f{display:flex;gap:8px;align-items:center;margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}

/* ---------- searchable select ---------- */
.ss{position:relative}.ss input.ss-q{margin-bottom:4px;font-size:13px;padding:6px 10px}

/* ---------- login / public ---------- */
.login-bg{background:radial-gradient(1200px 600px at 20% -10%,#1f7a4a 0%,transparent 60%),linear-gradient(160deg,#0b2a1c,#0d2219 50%,#06120c);min-height:100vh}
.login{max-width:400px;margin:0 auto;padding:60px 16px}
.login-brand{text-align:center;color:#fff;margin-bottom:20px}.login-brand h1{margin:12px 0 2px;font-size:24px}.login-brand p{margin:0;color:#a7c4b4}
.login .card h2{margin-bottom:4px}.login .muted{color:#94b3a3}.login .card .muted{color:var(--muted)}
.public{max-width:640px;margin:0 auto;padding:24px 16px}

@media (max-width:1100px){.cols,.cols.wide-left{grid-template-columns:minmax(0,1fr)}.statusbar{grid-template-columns:repeat(3,1fr)}}
@media (max-width:860px){
  .side{position:fixed;left:-260px;transition:left .2s}.side.open{left:0}
  .scrim.show{display:block;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:25}
  .hamb{display:block}.topbar{padding:10px 16px}.main{padding:16px}
  .who small,.tb-r .ghost.sm:first-child{display:none}
  .jobhead{grid-template-columns:1fr}.jh-main{flex-direction:column;align-items:flex-start}
  .statusbar{grid-template-columns:repeat(2,1fr)}.grid2{grid-template-columns:1fr}.kpis.small{grid-template-columns:1fr}
  .tab.right{margin-left:0}
}
@media print{
  .side,.topbar,.toolbar,.chips,.filters,.noprint,.pager,.btn,.tabs,.flowbar{display:none!important}
  body,.card{background:#fff!important;color:#000}.main{padding:0}.card{box-shadow:none;border:1px solid #ccc;break-inside:avoid}
}

/* ===== v1.2.0: พนักงาน ===== */
.c{text-align:center}
.who-row{display:flex;gap:10px;align-items:center}
.avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(140deg,#4ade80,#0b5d34);color:#fff;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:0 0 34px;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar.xl{width:72px;height:72px;flex-basis:72px;font-size:28px}
.emp-head{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.emp-head h2{margin:0 0 2px}
.meter{height:8px;border-radius:99px;background:var(--hover);overflow:hidden;min-width:80px;flex:1}
.meter span{display:block;height:100%;background:var(--brand2);border-radius:99px}
.meter.blue span{background:var(--blue)}.meter.amber span{background:var(--amber)}.meter.violet span{background:var(--violet)}
.tbl.emp td .meter{display:inline-block;width:90px;vertical-align:middle;margin-right:6px}
.grade{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:26px;border-radius:7px;font-weight:700;color:#fff;padding:0 6px;background:var(--slate)}
.grade.green{background:var(--green)}.grade.blue{background:var(--blue)}.grade.amber{background:var(--amber)}.grade.red{background:var(--red)}
.grade.big{min-width:56px;height:48px;font-size:24px;border-radius:12px;margin-bottom:6px}
.score-top{display:flex;gap:18px;align-items:center;margin-bottom:8px}
.ring{--v:0;width:118px;height:118px;border-radius:50%;flex:0 0 118px;background:conic-gradient(var(--brand2) calc(var(--v)*1%),var(--hover) 0);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}
.ring::before{content:'';position:absolute;inset:11px;border-radius:50%;background:var(--card)}
.ring b,.ring small{position:relative}.ring b{font-size:26px;line-height:1}.ring small{color:var(--muted);font-size:11px}
.bar-row{display:grid;grid-template-columns:170px 1fr 56px;gap:10px;align-items:center;margin:7px 0;font-size:13px}.bar-row b{text-align:right}
.callout-s{background:var(--hover);border-radius:10px;padding:10px 12px;margin-top:10px;font-size:13px}
.tbl.stars input{width:18px;height:18px}

/* ===== v1.2.0: เรียกรถโมบาย ===== */
.kanban.k4{grid-template-columns:repeat(4,minmax(200px,1fr))}
.kcard.urgent{border-left:4px solid var(--red)}
.mapframe{width:100%;height:260px;border:0;display:block}

/* ===== v1.2.0: พอร์ทัล ===== */
.portal-bg{background:var(--bg)}
.portal{max-width:560px;margin:0 auto;padding:0 12px 24px}
.ph-head{display:flex;gap:10px;align-items:center;padding:14px 4px;position:sticky;top:0;background:var(--bg);z-index:5}
.ph-head b{display:block;font-size:14px;line-height:1.2}.ph-head small{color:var(--muted);font-size:12px}
.ptabs{display:flex;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:4px;margin-bottom:12px;position:sticky;top:66px;z-index:4}
.ptabs a{flex:1;text-align:center;padding:8px 4px;border-radius:9px;color:var(--text);font-weight:600;font-size:13px;text-decoration:none!important}
.ptabs a.on{background:var(--brand);color:#fff}.ptabs em{font-style:normal;background:var(--red);color:#fff;border-radius:99px;padding:0 6px;font-size:11px}
.jh-plate.sm{font-size:17px;min-width:110px;padding:2px 10px}
.pstatus{background:#fff7e6;border-radius:10px;padding:10px 12px;margin:10px 0}.pstatus b{display:block}
.pstatus.ok-soft{background:#e9f7ef}
:root[data-theme="dark"] .pstatus{background:#2a2310}:root[data-theme="dark"] .pstatus.ok-soft{background:#12301f}
.pbar{display:flex;margin:10px 0 4px}.pbar span{flex:1;text-align:center;font-size:10.5px;color:var(--muted);position:relative;padding-top:16px}
.pbar i{position:absolute;top:0;left:50%;transform:translateX(-50%);width:12px;height:12px;border-radius:50%;background:var(--line);z-index:1}
.pbar span::before{content:'';position:absolute;top:5px;left:-50%;width:100%;height:2px;background:var(--line)}.pbar span:first-child::before{display:none}
.pbar span.done i,.pbar span.done::before,.pbar span.cur::before{background:var(--green)}.pbar span.cur i{background:var(--accent);box-shadow:0 0 0 3px rgba(250,204,21,.35)}
.pbar span.done,.pbar span.cur{color:var(--text);font-weight:600}
.pm{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;font-size:13px;border-top:1px dashed var(--line);padding-top:8px}.pm span:first-child{color:var(--muted)}
.plink{display:block;color:var(--text);text-decoration:none!important}.big-g{color:var(--brand2);font-size:18px}
.tbl.emp td:nth-child(2){min-width:200px}.tbl.emp td:nth-child(7){min-width:130px}