/* ============================================================================
   LogisticsOS — product classes for page Components.

   Loaded after themes/mock/public/mock.css and uses its custom properties
   (--s1, --border, --t1 … --ac). Prefix every class with `lo-`.
   ========================================================================== */

/* Module landing page (src/apps/shared/module-home.ts) */
.lo-screens{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.lo-screen{background:var(--s1);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;font-size:var(--fs);color:var(--t1)}

/* Shared bits */
.lo-mono{font-family:var(--font-mono);font-size:12.5px}
.lo-muted{color:var(--t3)}
.lo-sub{font-size:11.5px;color:var(--t3);margin-top:2px}
.lo-count{font-family:var(--font-mono);font-size:11px;opacity:.75;margin-left:4px}
.lo-good{color:#15803d}.lo-warn{color:var(--color-accent-800)}.lo-bad{color:#b91c1c}
.lo-alert{padding:10px 14px;border-radius:var(--radius);background:#fee2e2;color:#991b1b;font-size:13px}
.lo-note{padding:8px 12px;border-radius:var(--radius);background:var(--s2);color:var(--t2);font-size:12.5px}

/* Status pill — ckn-table badge colorMap and the drawer header (tones from helper/flow) */
.ckn-badge.lo-pill,.lo-pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:500;line-height:1.6;white-space:nowrap;vertical-align:middle}
.lo-pill--draft{background:var(--color-accent-100);color:var(--color-accent-800)}
.lo-pill--pending{background:#fff4d6;color:#8a5a00;box-shadow:inset 0 0 0 1px #f5d48a}
.lo-pill--sent{background:var(--s3);color:var(--t2)}
.lo-pill--ok{background:#dcfce7;color:#15803d}
.lo-pill--bad{background:#fee2e2;color:#991b1b}
.lo-pill--idle{background:var(--s3);color:var(--t3)}

/* Drawer — the mock's right-hand document panel */
.lo-scrim{position:fixed;inset:0;background:rgba(18,18,18,.28);z-index:20}
.lo-drawer{position:fixed;top:0;right:0;bottom:0;width:min(760px,100vw);background:#fff;z-index:21;display:flex;flex-direction:column;box-shadow:-12px 0 32px rgba(0,0,0,.12)}
.lo-drawer-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:22px 26px 16px;border-bottom:1px solid var(--border)}
.lo-drawer-title{font-size:22px;font-weight:600;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lo-x{border:0;background:transparent;font-size:26px;line-height:1;color:var(--t3);cursor:pointer;padding:0 4px}
.lo-x:hover{color:var(--t1)}
.lo-drawer-body{flex:1;overflow-y:auto;padding:18px 26px 24px;display:flex;flex-direction:column;gap:16px}
/* The body scrolls as a whole; its blocks keep their height (an overflow:auto child would shrink). */
.lo-drawer-body>*{flex:none}
.lo-drawer-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:14px 26px;border-top:1px solid var(--border);background:var(--s2)}
.lo-eye-dark{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--t2);margin-right:auto}

.lo-steps{display:flex;gap:6px;flex-wrap:wrap}
.lo-step{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid var(--border);font-size:12.5px;color:var(--t3)}
.lo-step i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--color-neutral-400);flex:none}
.lo-step small{font-size:11px;color:var(--t3)}
.lo-step.done{color:var(--t1)}.lo-step.done i{background:#15803d;border-color:#15803d}
.lo-step.now{color:var(--t1);font-weight:600;border-color:var(--t1)}.lo-step.now i{background:var(--color-accent);border-color:var(--color-accent)}
.lo-step.end{color:#991b1b;border-color:#fca5a5}.lo-step.end i{background:#b91c1c;border-color:#b91c1c}

.lo-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px 18px}
.lo-field{display:flex;flex-direction:column;gap:2px}
.lo-field span{font-size:11.5px;color:var(--t3)}
.lo-field b{font-weight:500;font-size:13.5px}
.lo-sec{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent-700)}
.lo-lines-wrap{border:1px solid var(--border);border-radius:8px;overflow-x:auto}
.lo-lines{width:100%;border-collapse:collapse;font-size:13px}
.lo-lines th{background:var(--s2);color:var(--t2);font-size:11.5px;font-weight:600;text-align:left;padding:8px 10px;white-space:nowrap}
.lo-lines td{padding:8px 10px;border-top:1px solid var(--border);vertical-align:top}
.lo-lines .r{text-align:right}
.lo-totals{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.lo-total{display:flex;gap:24px;font-size:13px;color:var(--t2)}
.lo-total b{min-width:120px;text-align:right;color:var(--t1)}
.lo-total:last-child{font-size:15px;font-weight:600;color:var(--t1);border-top:1px solid var(--border);padding-top:6px}
.lo-margin{font-size:12.5px;text-align:right}
.lo-pill--dark{background:var(--color-ink);color:#fff}
.lo-link{font-weight:500;font-size:13.5px;color:var(--color-accent-700);text-decoration:none}
.lo-link:hover{color:var(--t1);text-decoration:underline}
/* Document numbers, amounts and dates stay on one line in lists. */
.ckn-datatable td.lo-mono{white-space:nowrap}

/* Drawer tabs — "รายละเอียด" | "ขั้นถัดไป · Document chain" (the mock's drawer) */
.lo-dtabs{display:flex;gap:4px;padding:0 26px;border-bottom:1px solid var(--border);flex:none}
.lo-dtab{padding:10px 12px;border:0;border-bottom:2px solid transparent;background:transparent;font-family:inherit;font-size:13.5px;color:var(--t3);cursor:pointer;display:flex;align-items:center;gap:6px}
.lo-dtab:hover{color:var(--t1)}
.lo-dtab.on{color:var(--t1);font-weight:600;border-bottom-color:var(--color-accent)}
.lo-dtab .lo-count{padding:0 7px;border-radius:999px;background:var(--s3);opacity:1}
.lo-dtab.on .lo-count{background:var(--color-ink);color:var(--color-accent)}

/* Next steps — "+ Sales Order" cards */
.lo-nexts{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.lo-next{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:11px 13px;border-radius:8px;border:1px solid var(--t1);background:#fff;font-family:inherit;text-align:left;color:var(--t1);cursor:pointer}
.lo-next:hover{border-color:var(--t1);background:var(--color-accent-100)}
.lo-next.made{border-color:var(--border-hi);background:var(--s2)}
.lo-next.off,.lo-next:disabled{border-color:var(--border-hi);background:var(--s2);cursor:not-allowed;color:var(--t2)}
.lo-next-hd{display:flex;align-items:center;gap:8px;width:100%}
.lo-next-hd b{font-size:13.5px;font-weight:600}
.lo-next-hd small{margin-left:auto;font-size:10.5px;color:var(--t3)}
.lo-next-hint{font-size:12px;color:var(--t2);text-wrap:pretty}
.lo-next-why{font-size:11.5px;color:var(--color-accent-800)}

/* Document chain */
.lo-chain{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.lo-chain-row{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--s3);background:#fff;color:var(--t1);text-decoration:none}
.lo-chain>div:last-child .lo-chain-row{border-bottom:0}
a.lo-chain-row:hover{background:var(--color-accent-100)}
.lo-chain-row.now{background:var(--color-accent-100)}
.lo-chain-row.now .lo-chain-no{font-weight:600}
.lo-chain-row.off{color:var(--t3)}
.lo-d1{padding-left:28px}.lo-d2{padding-left:44px}.lo-d3{padding-left:60px}.lo-d4{padding-left:76px}
.lo-chain-glyph{width:10px;color:var(--color-neutral-400);font-family:var(--font-mono);font-size:11px}
.lo-chain-p{width:34px;font-size:10.5px;color:var(--t2)}
.lo-chain-no{font-size:12.5px}
.lo-chain-st{margin-left:auto;font-size:11.5px;color:var(--t2);white-space:nowrap}
.lo-money{font-size:10.5px;padding:0 6px;border-radius:999px;border:1px solid currentColor}
.lo-money--rev{color:#15803d}.lo-money--exp{color:#b91c1c}

/* My Work — the mock's inbox: group summary, four columns of task cards */
.lo-stats{display:flex;gap:10px;flex-wrap:wrap}
.lo-stat{display:flex;flex-direction:column;gap:2px;padding:10px 16px;border:1px solid var(--border);border-radius:8px;background:#fff;min-width:130px;border-top:3px solid var(--color-neutral-400)}
.lo-stat span{font-size:12px;color:var(--t2)}
.lo-stat b{font-size:20px;font-weight:500}
.lo-stat--today,.lo-wgroup--today{border-top-color:var(--color-accent)}
.lo-stat--wait,.lo-wgroup--wait{border-top-color:var(--color-neutral-500)}
.lo-stat--over,.lo-wgroup--over{border-top-color:#b91c1c}
.lo-stat--done,.lo-wgroup--done{border-top-color:#15803d}
.lo-wgroups{display:grid;grid-template-columns:repeat(4,minmax(240px,1fr));gap:12px;align-items:start;overflow-x:auto;padding-bottom:6px}
.lo-wgroup{display:flex;flex-direction:column;gap:8px;background:var(--s2);border-radius:10px;padding:10px;border-top:3px solid var(--color-neutral-400);min-height:160px}
.lo-wgroup-hd{display:flex;align-items:center;gap:8px;padding:2px 4px}
.lo-wgroup-hd b{font-size:14px}
.lo-wgroup-hd .lo-count{padding:0 7px;border-radius:999px;background:#fff;opacity:1}
.lo-wgroup-note{font-size:11.5px;color:var(--t2);padding:0 4px}
.lo-wempty{font-size:12.5px;color:var(--t3);padding:12px 4px}
.lo-witem{display:flex;flex-direction:column;gap:5px;padding:11px 12px;border-radius:8px;border:1px solid var(--border);background:#fff;color:var(--t1);text-decoration:none}
.lo-witem:hover{box-shadow:0 4px 12px rgba(0,0,0,.08);border-color:var(--border-hi)}
.lo-witem-top{display:flex;align-items:center;gap:8px;font-size:12px}
.lo-witem-st{margin-left:auto;font-size:11px;color:var(--t2)}
.lo-wtag{font-family:var(--font-mono);font-size:10.5px;font-weight:600;padding:1px 6px;border-radius:4px}
.lo-wtag--qt{background:var(--color-accent-100);color:var(--color-accent-800)}
.lo-wtag--so{background:var(--color-ink);color:#fff}
.lo-witem-task{font-size:14px;font-weight:600;line-height:1.35}
.lo-witem-who{font-size:12.5px}
.lo-witem-sub{font-size:12px;color:var(--t2);line-height:1.4}
.lo-witem-wait{font-size:11.5px;color:var(--t2);padding:3px 8px;border-radius:6px;background:var(--s3);align-self:flex-start}
.lo-witem-foot{display:flex;align-items:center;gap:8px;font-size:11.5px;margin-top:2px}
.lo-witem-foot .lo-mono{margin-left:auto;font-size:11.5px;color:var(--t2)}
.lo-witem-open{font-size:11.5px;font-weight:600;color:var(--color-accent-700)}
@media(max-width:1100px){.lo-wgroups{grid-template-columns:repeat(2,minmax(240px,1fr))}}
@media(max-width:640px){.lo-wgroups{grid-template-columns:1fr}}
/* Footer: the due date on its own line, then amount and the open link — nothing wraps mid-value. */
.lo-witem-foot{flex-wrap:wrap;row-gap:4px}
.lo-witem-foot>*{white-space:nowrap}
.lo-witem-foot>:first-child{flex-basis:100%}
.lo-witem-foot .lo-mono{margin-left:0;margin-right:auto}

/* Quotation line editor — the mock's qeView (draft / pending approval) */
.lo-drawer--wide{width:min(1240px,100vw)}
.lo-in{height:30px;padding:0 8px;border-radius:5px;border:1px solid var(--border-hi);font:inherit;font-size:12.5px;color:var(--t1);background:#fff;width:100%;min-width:160px}
.lo-in:focus{outline:2px solid var(--color-accent);outline-offset:0;border-color:var(--color-accent-600)}
.lo-in--num{text-align:right;font-family:var(--font-mono);min-width:0;width:96px}
.lo-in--sm{min-width:0;width:64px}
.lo-in--xs{min-width:0;width:56px}
.lo-lines--edit{min-width:1130px;font-size:12.5px}
.lo-lines--edit td{padding:6px 8px;vertical-align:middle}
.lo-lines--edit th{padding:8px}
.lo-shade{background:var(--s2)}
.lo-lines th.lo-shade{background:var(--s3)}
.lo-in-unit{display:inline-flex;align-items:center;gap:3px;font-size:12px;color:var(--t2)}
.lo-disc{display:inline-flex;align-items:center;gap:4px}
.lo-segs{display:inline-flex;border:1px solid var(--border-hi);border-radius:5px;overflow:hidden}
.lo-seg{height:28px;width:28px;border:0;background:#fff;color:var(--t1);font-family:var(--font-mono);font-size:12px;cursor:pointer}
.lo-seg.on{background:var(--color-ink);color:var(--color-accent)}
.lo-del{border:0;background:transparent;color:var(--t3);font-size:18px;line-height:1;cursor:pointer;padding:2px 6px;border-radius:4px}
.lo-del:hover{color:#b91c1c;background:#fee2e2}
.lo-tmg{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--s2)}
.lo-tmg b{font-size:12.5px;font-weight:500;white-space:nowrap}
.lo-tmg span{font-size:12px;color:var(--t2)}
.lo-tmg small{flex:1;min-width:220px;font-size:11.5px;color:var(--t2);text-wrap:pretty}
.lo-editbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.lo-editsum{margin-left:auto;font-size:12px;color:var(--t2)}
.lo-editsum b{color:var(--t1);font-weight:500}
.lo-drawer-save{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 26px;border-top:1px solid #f5d48a;background:var(--color-accent-100);font-size:12.5px;color:var(--color-accent-800)}
.lo-drawer-save span{margin-right:auto}

/* Job drawer — one block per Work Order with the team's step buttons */
.lo-drawer--mid{width:min(900px,100vw)}
.lo-wos{display:flex;flex-direction:column;gap:8px}
.lo-wo{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border:1px solid var(--border);border-radius:8px;background:#fff}
.lo-wo-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lo-wo-top b{font-size:13.5px}
.lo-wo-due{margin-left:auto;font-size:11.5px;color:var(--t2)}
.lo-wo-scope{font-size:13px;color:var(--t1)}
.lo-wo-wait{font-size:11.5px;color:var(--t2);padding:3px 8px;border-radius:6px;background:var(--s3);align-self:flex-start}
.lo-wo-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* Work Order board — the mock's columns */
.lo-board{display:grid;grid-template-columns:repeat(5,minmax(220px,1fr));gap:12px;overflow-x:auto;padding-bottom:6px;align-items:start}
.lo-bcol{display:flex;flex-direction:column;gap:8px;background:var(--s2);border-radius:10px;padding:10px;min-height:200px;border-top:3px solid var(--color-neutral-400)}
.lo-bcol--sent{border-top-color:#f5d48a}.lo-bcol--acc{border-top-color:var(--color-accent)}.lo-bcol--mid{border-top-color:var(--color-neutral-500)}
.lo-bcol--ready{border-top-color:var(--color-ink)}.lo-bcol--done{border-top-color:#15803d}
.lo-bcol-hd{display:flex;align-items:center;gap:8px;padding:2px 4px}
.lo-bcol-hd b{font-size:14px}
.lo-bcol-hd .lo-count{padding:0 7px;border-radius:999px;background:#fff;opacity:1}
.lo-bcol-hint{font-size:11.5px;color:var(--t2);padding:0 4px}
.lo-wocard{display:flex;flex-direction:column;gap:6px;padding:11px 12px;border-radius:8px;border:1px solid var(--border);border-left:4px solid var(--color-accent-600);background:#fff;text-align:left;font-family:inherit;color:var(--t1);cursor:pointer}
.lo-wocard:hover{box-shadow:0 4px 12px rgba(0,0,0,.08)}
.lo-wocard.on{border-color:var(--t1);border-left-color:var(--t1)}
.lo-wocard.waiting{border-left-color:var(--color-neutral-400)}
.lo-wocard-top{display:flex;align-items:center;gap:6px;font-size:11px}
.lo-wteam{margin-left:auto;font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:4px;background:var(--color-ink);color:#fff;white-space:nowrap}
.lo-wocard-scope{font-size:13.5px;font-weight:600;line-height:1.35}
.lo-wocard-cust{font-size:12px;color:var(--t2)}
.lo-wocard-foot{display:flex;align-items:center;gap:8px;font-size:11.5px;flex-wrap:wrap}
.lo-wocard-foot .lo-mono{font-size:11px;color:var(--t2);margin-right:auto}
.lo-sib{display:flex;align-items:center;gap:12px;padding:8px 12px;border-bottom:1px solid var(--s3);background:#fff;color:var(--t1);text-decoration:none;font-size:12.5px}
.lo-sib:last-child{border-bottom:0}
.lo-sib:hover{background:var(--color-accent-100)}
.lo-sib.on{background:var(--color-accent-100);font-weight:600}
@media(max-width:1100px){.lo-board{grid-template-columns:repeat(2,minmax(220px,1fr))}}

/* Modal — the mock's "เปิด Job" dialog */
.lo-modal-bg{position:fixed;inset:0;background:rgba(18,18,18,.35);z-index:30}
.lo-modal{position:fixed;top:48px;left:50%;transform:translateX(-50%);width:min(880px,calc(100vw - 32px));max-height:calc(100vh - 96px);display:flex;flex-direction:column;background:#fff;border-radius:10px;box-shadow:0 20px 50px rgba(0,0,0,.25);z-index:31}
.lo-modal-hd{display:flex;justify-content:space-between;gap:16px;padding:18px 22px;border-bottom:1px solid var(--border)}
.lo-modal-title{font-size:18px;font-weight:600}
.lo-modal-body{flex:1;overflow-y:auto;padding:16px 22px;display:flex;flex-direction:column;gap:12px}
.lo-modal-body>*{flex:none}
.lo-modal-foot{display:flex;align-items:center;gap:8px;padding:14px 22px;border-top:1px solid var(--border);background:var(--s2);font-size:12.5px}
.lo-modal-foot>span{margin-right:auto}
.lo-modes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lo-mode{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:12px 14px;border-radius:8px;border:1px solid var(--border-hi);background:#fff;font-family:inherit;text-align:left;color:var(--t1);cursor:pointer}
.lo-mode.on{border:2px solid var(--t1);background:var(--color-accent-100)}
.lo-mode b{font-size:14px}
.lo-mode span{font-size:12px;color:var(--t2)}
.lo-mode pre{margin-top:4px;font-family:var(--font-mono);font-size:11px;line-height:1.5;color:var(--t2);white-space:pre}
.lo-label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--t2);max-width:360px}
.lo-jrows{display:flex;flex-direction:column;gap:6px}
.lo-jrow{display:grid;grid-template-columns:36px 150px 1fr 150px 190px 30px;gap:6px;align-items:center}
.lo-jrow-n{font-size:12px;color:var(--t2)}
.lo-in--sel{min-width:0;padding-right:4px}
.lo-in--date{min-width:0;font-family:var(--font-mono)}
@media(max-width:860px){.lo-jrow{grid-template-columns:36px 1fr 30px}.lo-modes{grid-template-columns:1fr}}
.lo-wtag--wo{background:#e0ecff;color:#1e3a8a}
.lo-wtag--psr{background:#fef3c7;color:#92400e}
.lo-wtag--po{background:#dcfce7;color:#166534}
.lo-wtag--inv{background:#fee2e2;color:#991b1b}
.lo-wtag--lead,.lo-wtag--opp{background:var(--s3);color:var(--t1)}
.lo-wtag--ss,.lo-wtag--est{background:#fde7e7;color:#b91c1c}
.lo-wtag--fs,.lo-wtag--pa{background:#e0f2fe;color:#075985}
.lo-wtag--decl,.lo-wtag--req,.lo-wtag--adv{background:#ede9fe;color:#5b21b6}
.lo-wtag--trip,.lo-wtag--crew{background:#141414;color:var(--color-accent)}
.lo-wtag--wt,.lo-wtag--tl,.lo-wtag--adj{background:#ffedd5;color:#9a3412}

/* Truck Shipment Planning — requests | shipments | fleet (the mock's Transport planning) */
a.btn-primary,a.btn-ghost{text-decoration:none}
.lo-daynav{gap:6px;flex-wrap:nowrap}
.lo-daynav .lo-in{width:auto;min-width:0}
.lo-tplan{display:grid;grid-template-columns:minmax(260px,1fr) minmax(320px,1.3fr) minmax(260px,1fr);gap:12px;align-items:start}
.lo-tcol{display:flex;flex-direction:column;gap:8px;background:var(--s2);border-radius:10px;padding:10px;min-height:240px}
.lo-tcol-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 4px}
.lo-tcol-hd b{font-size:14px}
.lo-tcol .lo-sec{padding:4px 4px 0}
.lo-treq{display:flex;flex-direction:column;gap:4px;padding:11px 12px;border-radius:8px;border:1px solid var(--border);border-left:4px solid var(--color-accent-600);background:#fff}
.lo-treq.done{border-left-color:var(--color-ink);opacity:.8}
.lo-treq-top{display:flex;align-items:center;gap:6px;font-size:12px}
.lo-treq-top .lo-pill{margin-left:auto}
.lo-treq-top .lo-wteam{margin-left:0}
.lo-treq-cargo{font-size:13.5px;line-height:1.35}
.lo-treq-cust,.lo-treq-route,.lo-treq-load,.lo-treq-docs{font-size:12px;color:var(--t2)}
.lo-treq-docs.lo-good{color:#15803d}.lo-treq-docs.lo-bad{color:#b91c1c}
.lo-treq-foot{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:2px}
.lo-treq-foot .lo-mono{margin-right:auto;font-size:11px}
.lo-ship{display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:8px;border:1px solid var(--border);background:#fff;cursor:pointer}
.lo-ship.on{border:2px solid var(--t1);padding:11px}
.lo-ship-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lo-ship-time{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--t2)}
.lo-ship-time .lo-in{width:auto;min-width:0}
.lo-ship-time .lo-in--num{width:52px}
.lo-ship-line{display:flex;align-items:center;gap:8px;font-size:12.5px}
.lo-ship-line span:first-child{width:44px;color:var(--t3);font-size:11.5px}
.lo-ship-line .lo-mono{margin-left:auto}
.lo-ship-wos{display:flex;flex-direction:column;gap:3px}
.lo-ship-wo{display:flex;align-items:center;gap:6px;font-size:12px;padding:4px 6px;border-radius:5px;background:var(--s2)}
.lo-ship-wo .lo-del{margin-left:auto;font-size:15px;padding:0 4px}
.lo-checks{display:flex;flex-direction:column;gap:3px}
.lo-check{display:flex;align-items:flex-start;gap:6px;font-size:11.5px;padding:4px 8px;border-radius:5px;line-height:1.4}
.lo-check i{font-style:normal;font-weight:700;width:12px;text-align:center;flex:none}
.lo-check--err{background:#fee2e2;color:#991b1b}
.lo-check--warn{background:var(--color-accent-100);color:var(--color-accent-800)}
.lo-check--info{background:#e0ecff;color:#1e3a8a}
.lo-check--ok{background:#dcfce7;color:#15803d}
.lo-ship-acts{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.lo-fleets{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.lo-fleet{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:8px 10px;border-radius:7px;border:1px solid var(--border);background:#fff;font-family:inherit;text-align:left;color:var(--t1);cursor:pointer}
.lo-fleet b{font-size:12.5px}
.lo-fleet span{font-size:11px;color:var(--t2)}
.lo-fleet small{font-size:11px;color:#15803d}
.lo-fleet.warn small{color:#b91c1c}
.lo-fleet.on{border:2px solid var(--t1);padding:7px 9px;background:var(--color-accent-100)}
.lo-fleet:disabled{cursor:default;opacity:.6}
.lo-fleet:not(:disabled):hover{border-color:var(--t1)}
@media(max-width:1200px){.lo-tplan{grid-template-columns:1fr 1fr}.lo-tplan>.lo-tcol:last-child{grid-column:1 / -1}}
@media(max-width:760px){.lo-tplan{grid-template-columns:1fr}}

/* Purchasing — PSR form and the vendor quote compare (the mock's psrForm / poForm) */
.lo-modal--sm{width:min(640px,calc(100vw - 32px))}
/* A destructive confirm (Sales Order "ยืนยันยกเลิก") */
.lo-btn-danger,.lo-btn-danger:hover{background:#b91c1c;border-color:#b91c1c;color:#fff}
.lo-label--wide{max-width:none}
.lo-form-row{display:grid;grid-template-columns:1.4fr .7fr 1fr 1fr;gap:10px}
.lo-form-row .lo-in--num{width:100%}
.lo-in--wide{width:160px}
.lo-quotes{display:flex;flex-direction:column;gap:6px}
.lo-quote{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:10px 12px;border-radius:8px;border:1px solid var(--border-hi);background:#fff;font:inherit;text-align:left;color:var(--t1);cursor:pointer}
.lo-quote.on{border:2px solid var(--t1);background:var(--color-accent-100)}
.lo-quote-name{display:flex;flex-direction:column;gap:2px;min-width:0}
.lo-quote-name small{font-size:11.5px;color:var(--t2)}
.lo-quote-rate{font-size:12px;color:var(--t2)}
.lo-quote-amt{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-weight:600}
.lo-quote-amt small{font-family:inherit;font-size:11px;font-weight:500}
@media(max-width:640px){.lo-form-row{grid-template-columns:1fr 1fr}.lo-quote{grid-template-columns:1fr auto}.lo-quote-rate{display:none}}

/* Invoice — new-invoice form: pick a Sales Order, its bill plan (the SO Desk's billPlan) */
.lo-inline{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--t2)}
.lo-inline .lo-in{width:auto;min-width:0}
.lo-soopts{display:flex;flex-direction:column;gap:6px;max-height:260px;overflow-y:auto}
.lo-soopt{display:grid;grid-template-columns:130px 1fr auto;gap:10px;align-items:center;padding:9px 12px;border-radius:8px;border:1px solid var(--border-hi);background:#fff;font:inherit;font-size:12.5px;text-align:left;color:var(--t1);cursor:pointer}
.lo-soopt.on{border:2px solid var(--t1);background:var(--color-accent-100)}
.lo-soopt.off{color:var(--t2)}
.lo-soopt small{font-size:11.5px;white-space:nowrap}
.lo-plans{display:flex;flex-direction:column;gap:4px}
.lo-plan{display:grid;grid-template-columns:70px 1fr 110px minmax(260px,auto);gap:10px;align-items:center;padding:8px 12px;border-radius:6px;background:var(--s2);font-size:12.5px}
.lo-plan .lo-mono{text-align:right}
.lo-plan small{color:var(--t3)}
.lo-plan.done small,.lo-plan.done a{color:#15803d}
.lo-plan.now{background:var(--color-accent-100);font-weight:600}
@media(max-width:700px){.lo-soopt{grid-template-columns:1fr}.lo-plan{grid-template-columns:60px 1fr}.lo-plan .lo-mono{text-align:left}}

/* Sales — Lead / Opportunity / Survey & Estimate forms (the mock's leadForm, oppForm, ssForm, estForm) */
.lo-flow{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--t2)}
.lo-flow b{font-family:var(--font-mono);color:var(--t1)}
.lo-modal--wide{width:min(1180px,calc(100vw - 32px))}
.lo-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px}
.lo-grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 14px}
.lo-grid2 .lo-label,.lo-grid4 .lo-label{max-width:none}
.lo-span2{grid-column:span 2}
.lo-label small{font-size:11px;color:var(--t3)}
.lo-in--full{width:100%}
.lo-in--bad{border-color:#dc2626}
.lo-in--assign{width:130px}
.lo-in--remark{min-width:0;width:150px}
.lo-ta{height:auto;min-height:64px;padding:6px 8px;resize:vertical;line-height:1.5}
.lo-chiprow{display:flex;gap:6px;flex-wrap:wrap}
.lo-chipbtn{height:30px;padding:0 14px;border-radius:15px;border:1px solid var(--border-hi);background:#fff;font:inherit;font-size:12.5px;color:var(--t1);cursor:pointer}
.lo-chipbtn.on{background:var(--t1);border-color:var(--t1);color:#fff}
.lo-checkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:4px 14px}
.lo-checkline{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--t1);cursor:pointer}
.lo-lead{font-size:10.5px;padding:1px 6px;border-radius:4px;background:var(--color-accent-100);color:var(--color-accent-800)}
.lo-more{align-self:flex-start;border:0;background:none;font:inherit;font-size:12.5px;font-weight:600;color:var(--t1);cursor:pointer;padding:0}
.lo-more small{font-weight:400;color:var(--t3);margin-left:4px}
.lo-modes--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.lo-scoperow{display:grid;grid-template-columns:1fr 1fr 1.4fr 1.2fr 30px;gap:6px;align-items:center}
.lo-scopebox{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--s2)}
.lo-scopefoot{display:grid;grid-template-columns:1fr 30px;gap:6px;align-items:center}
.lo-estlines td{vertical-align:middle}
.lo-note--warn{background:var(--color-accent-100);color:var(--color-accent-800)}
.lo-note--ok{background:#dcfce7;color:#15803d}
@media(max-width:860px){.lo-grid4,.lo-modes--4{grid-template-columns:repeat(2,minmax(0,1fr))}.lo-scoperow{grid-template-columns:1fr 30px}}
@media(max-width:560px){.lo-grid2,.lo-grid4,.lo-modes--4{grid-template-columns:1fr}.lo-span2{grid-column:auto}}
.lo-modes--4 .lo-mode pre{white-space:normal}

/* Planning Work Order — resource panel, WO cards, crew sets (docs/ui/Operations Planning.dc.html, page "plan") */
.lo-plan-grid{display:grid;grid-template-columns:300px 1fr;gap:16px;align-items:start}
.lo-respanel{display:flex;flex-direction:column;gap:8px;position:sticky;top:12px;padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--s2)}
.lo-reslist{display:flex;flex-direction:column;gap:4px;max-height:60vh;overflow-y:auto}
.lo-res{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--border);border-radius:7px;background:#fff;font:inherit;font-size:12.5px;text-align:left;color:var(--t1);cursor:pointer}
.lo-res span:first-child{display:flex;flex-direction:column;min-width:0}
.lo-res small{font-size:11px;color:var(--t2)}
.lo-res.on{border:2px solid var(--t1);background:var(--color-accent-100)}
.lo-res.off{opacity:.55}
.lo-pickbar{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;background:var(--color-accent-100);color:var(--color-accent-800);font-size:13px}
.lo-planwos{display:flex;flex-direction:column;gap:14px;min-width:0}
.lo-plancard{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border:1px solid var(--border);border-radius:10px;background:#fff}
.lo-plancard-hd{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.lo-plancard-sub{font-size:12.5px;color:var(--t2);margin-top:4px}
.lo-needs{display:flex;flex-wrap:wrap;gap:6px}
.lo-need{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border:1px solid var(--border);border-radius:14px;font-size:12px}
.lo-need button{width:20px;height:20px;border-radius:10px;border:1px solid var(--border-hi);background:#fff;cursor:pointer;line-height:1}
.lo-bar{padding:2px 8px;border-radius:4px;font-size:12px;background:var(--s3);color:var(--t2)}
.lo-bar--ok{background:#dcfce7;color:#15803d}
.lo-bar--part{background:var(--color-accent-100);color:var(--color-accent-800)}
.lo-shortbar{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:6px;background:#fee2e2;color:#991b1b;font-size:12.5px}
.lo-sets{display:flex;flex-direction:column;gap:8px}
.lo-set{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--s2)}
.lo-set-hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lo-set-ft{display:flex;align-items:center;gap:6px;justify-content:flex-end}
.lo-set-ft .lo-muted{margin-right:auto}
.lo-segs{display:inline-flex;margin-left:auto;border:1px solid var(--border-hi);border-radius:6px;overflow:hidden}
.lo-seg{border:0;background:#fff;font:inherit;font-size:12px;padding:3px 10px;cursor:pointer;color:var(--t1)}
.lo-seg.on{background:var(--t1);color:#fff}
.lo-seg:disabled{cursor:default}
.lo-rchip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:12px;background:#fff;border:1px solid var(--border-hi);font-size:12px}
.lo-rchip--m{font-family:var(--font-mono)}
.lo-rchip button{border:0;background:none;cursor:pointer;color:var(--t3);padding:0}
.lo-trform{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border:1px dashed var(--border-hi);border-radius:8px}
.lo-linkbtn{display:block;margin-top:4px;border:0;background:none;padding:0;font:inherit;font-size:11.5px;color:var(--color-accent-800);text-decoration:underline;cursor:pointer}
@media(max-width:1000px){.lo-plan-grid{grid-template-columns:1fr}.lo-respanel{position:static}}

/* Resource Master — the week by half-day (docs/ui/Field Workspace.dc.html, resView) */
.lo-alertbox{display:flex;flex-direction:column;gap:6px;padding:10px 14px;border:1px solid #fecaca;border-radius:8px;background:#fff7f7}
.lo-alertrow{display:flex;gap:10px;align-items:center;font-size:12.5px}
.lo-tabbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.lo-in--search{max-width:280px}
.lo-legend{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--t2)}
.lo-legend .lo-hc{margin-left:8px}
.lo-hc{display:inline-block;width:16px;height:22px;border:1px solid var(--border-hi);background:#fff;padding:0;cursor:pointer;vertical-align:middle}
.lo-hc:disabled{cursor:default}
.lo-hc--U{background:#141414;border-color:#141414}
.lo-hc--L{background:var(--color-accent-300,#fcd34d);border-color:var(--color-accent-600,#d97706)}
.lo-hc--M{background:var(--color-neutral-400,#a3a3a3);border-color:var(--color-neutral-500,#737373)}
.lo-week th.c{text-align:center;font-size:11.5px;min-width:40px}
.lo-week th.c small{display:block;font-size:10px;color:var(--t3)}
.lo-week th.today{background:var(--color-accent-100)}
.lo-cells{white-space:nowrap}
.lo-cells .lo-hc:nth-child(2n){margin-right:6px}
.lo-seg{white-space:nowrap}
.lo-booktbl{table-layout:fixed;width:100%}
.lo-booktbl th:nth-child(1){width:auto}
.lo-booktbl th:nth-child(2),.lo-booktbl th:nth-child(3),.lo-booktbl th:nth-child(4),.lo-booktbl th:nth-child(5){width:120px}
.lo-booktbl th:nth-child(6){width:220px}

/* Freight — queue, chain boxes, gates, document checklist, pre-alert inbox, consolidation, containers (docs/ui/Freight Shipment.dc.html) */
.lo-queue{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:var(--s2)}
.lo-qrow{display:grid;grid-template-columns:160px 1fr 220px auto auto;gap:10px;align-items:center;padding:8px 10px;border-radius:7px;background:#fff;border:1px solid var(--border);font-size:12.5px}
.lo-filterbar{display:flex;gap:10px;flex-wrap:wrap}
.lo-cboxes{display:flex;gap:6px;padding:0 24px 10px;flex-wrap:wrap}
.lo-cbox{display:flex;flex-direction:column;gap:2px;padding:6px 10px;border:1px solid var(--border-hi);border-radius:7px;min-width:140px;font-size:12.5px}
.lo-cbox small{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;color:var(--t3)}
.lo-cbox.dashed{border-style:dashed;color:var(--t3)}
.lo-cbox.now{border:2px solid var(--t1);background:var(--color-accent-100)}
.lo-steps--wrap{flex-wrap:wrap;padding:0 24px 8px}
.lo-gate{display:flex;flex-direction:column;gap:2px;padding:7px 10px;border-radius:6px;background:var(--s2);font-size:12.5px}
.lo-gate.ok{background:#dcfce7;color:#14532d}
.lo-gate.bad{background:#fee2e2;color:#7f1d1d}
.lo-bindbox{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;font-size:12.5px}
.lo-docrow{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:8px 10px;border-bottom:1px solid var(--border);font-size:12.5px}
.lo-docrow.blocked{background:#fff7f7}
.lo-docbtns{display:inline-flex;gap:6px;align-items:center;justify-content:flex-end}
.lo-inbox{display:grid;grid-template-columns:340px 1fr;gap:14px;align-items:start}
.lo-palist{display:flex;flex-direction:column;gap:6px}
.lo-pa{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:#fff;font:inherit;font-size:12.5px;text-align:left;color:var(--t1);cursor:pointer}
.lo-pa.on{border:2px solid var(--t1);background:var(--color-accent-100)}
.lo-pa-top{display:flex;justify-content:space-between;gap:8px}
.lo-pacard{display:flex;flex-direction:column;gap:10px;padding:14px 16px;border:1px solid var(--border);border-radius:10px;background:#fff}
.lo-matchbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px;border-radius:7px;background:var(--color-accent-100);font-size:12.5px}
.lo-matchbar.ok{background:#dcfce7;color:#14532d}
.lo-cmp tr.bad td{background:#fff1f1;color:#b91c1c;font-weight:600}
.lo-mchip{display:flex;flex-direction:column;gap:2px;padding:8px 12px;border:1px solid var(--border-hi);border-radius:8px;background:#fff;font:inherit;font-size:12px;text-align:left;cursor:pointer}
.lo-mchip.on{border:2px solid var(--t1);background:var(--color-accent-100)}
.lo-caprow{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12.5px}
.lo-bar--over{background:#fee2e2;color:#b91c1c}
.lo-ctcard{display:flex;flex-direction:column;gap:10px;padding:14px 16px;border:1px solid var(--border);border-radius:10px;background:#fff}
.lo-ctcard.warn{border:2px solid #fca5a5}
.lo-cttrack{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.lo-ctstep{display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--t3);border-top:3px solid var(--border);padding-top:6px}
.lo-ctstep.done{color:var(--t1);border-top-color:var(--t1)}
.lo-ctstep.next{color:var(--color-accent-800);border-top-color:var(--color-accent);font-weight:600}
.lo-ctstep i{display:none}
@media(max-width:900px){.lo-inbox{grid-template-columns:1fr}.lo-qrow{grid-template-columns:1fr}.lo-cttrack{grid-template-columns:repeat(3,1fr)}}
.lo-filterbar{justify-content:flex-start}
.lo-filterbar .lo-segs{margin-left:0;flex:none}
.lo-filterbar .lo-seg{padding:5px 14px;font-size:12.5px}
.lo-filebtn{position:relative;overflow:hidden;cursor:pointer}
.lo-filebtn input{position:absolute;inset:0;opacity:0;cursor:pointer}

/* Field apps — phone-width pages (docs/ui/Field Workspace.dc.html: the phone frame, header, sticky bar, bottom sheet) */
.lo-phone{position:relative;max-width:430px;margin:0 auto;min-height:calc(100vh - 48px);display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:24px;overflow:hidden}
.lo-mhead{display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 14px;background:#141414;color:#fff}
.lo-mtitle{display:flex;flex-direction:column;flex:1;min-width:0}
.lo-mtitle b{font-size:16px}
.lo-mtitle small{font-size:11.5px;color:#bdbdbd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lo-mback{border:0;background:none;color:#fff;font-size:24px;cursor:pointer;padding:0 6px}
.lo-maction{border:1px solid #555;background:none;color:#fff;border-radius:16px;padding:4px 10px;font:inherit;font-size:12px;cursor:pointer}
.lo-mbody{flex:1;display:flex;flex-direction:column;gap:10px;padding:14px;overflow-y:auto}
.lo-mbody>div{display:flex;flex-direction:column;gap:10px}
.lo-mbar{position:sticky;bottom:0;padding:12px 14px;background:#fff;border-top:1px solid var(--border)}
.lo-mbtn{width:100%;height:50px;justify-content:center;font-size:15px}
.lo-mcard{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:#fff;font:inherit;font-size:13px;text-align:left;color:var(--t1);cursor:pointer}
.lo-mcard.static{cursor:default}
.lo-mcard.ok{background:#dcfce7;border-color:#86efac;color:#14532d}
.lo-mcard.dashed{border-style:dashed;background:var(--s2)}
.lo-mcard.rec{background:var(--color-accent-100);border-color:var(--color-accent)}
.lo-msegs{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.lo-mseg{font-size:10.5px;text-align:center;padding-top:6px;border-top:4px solid var(--border);color:var(--t3)}
.lo-mseg.on{border-top-color:#141414;color:var(--t1)}
.lo-mstop{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;font-size:13px}
.lo-mstop.on{border:1.5px solid #141414}
.lo-sig{width:100%;height:150px;border:1px dashed var(--border-hi);border-radius:10px;background:#fafafa;touch-action:none}
.lo-sigimg{max-width:100%;height:80px;object-fit:contain;background:#fff;border-radius:8px}
.lo-check-row{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:#fff;font:inherit;font-size:13.5px;text-align:left;cursor:pointer}
.lo-check-row.on{background:#dcfce7;border-color:#86efac}
.lo-check-row.on span::before{content:"✓ "}
.lo-crewchip{padding:4px 10px;border-radius:14px;background:var(--s3);color:var(--t1);font-size:12px;white-space:nowrap}
.lo-crewchip.lead{background:#141414;color:#fff}
.lo-sitem{display:grid;grid-template-columns:1.4fr 1fr 64px 28px;gap:6px;align-items:center}
.lo-msheet-bg{position:absolute;inset:0;background:rgba(18,18,18,.45);z-index:5}
.lo-msheet{position:absolute;left:0;right:0;bottom:0;z-index:6;display:flex;flex-direction:column;gap:10px;padding:18px;background:#fff;border-radius:18px 18px 0 0}
.lo-sitem .lo-in,.lo-phone .lo-caprow .lo-in{min-width:0;width:100%}
.lo-phone .lo-filebtn{align-self:flex-start}
/* Flow overview */
.lo-flegend{display:flex;gap:14px;font-size:12px;color:var(--t2);align-items:center}
.lo-flegend span{display:inline-flex;align-items:center;gap:6px}
.lo-fdot{display:inline-block;width:10px;height:10px;border-radius:3px;border:1px solid var(--border-hi);background:#fff}
.lo-fdot--rev{background:#dcfce7;border-color:#86efac}.lo-fdot--exp{background:#fee2e2;border-color:#fca5a5}.lo-fdot--virtual{border-style:dashed}
.lo-fbanner{display:block;padding:10px 14px;margin-bottom:12px;border:1px solid #fcd34d;background:#fffbeb;border-radius:10px;color:#92400e;text-decoration:none;font-size:13px}
.lo-fcard{display:flex;flex-direction:column;gap:10px;padding:14px 16px;margin-bottom:12px;border:1px solid var(--border);border-radius:10px;background:#fff}
.lo-fcard-hd{display:flex;gap:12px;align-items:flex-start}
.lo-fcode{flex:none;padding:3px 8px;border-radius:6px;background:var(--color-accent-100);color:var(--color-accent-800);font-family:var(--font-mono);font-weight:700;font-size:12px}
.lo-frow-label{font-size:11px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
.lo-fsteps{display:flex;flex-wrap:wrap;gap:6px 0;align-items:stretch}
.lo-fstep{display:inline-flex;align-items:center;text-decoration:none;color:var(--t1)}
.lo-farrow{padding:0 6px;color:var(--t3)}
.lo-fchip{display:flex;flex-direction:column;min-width:76px;padding:6px 10px;border:1px solid var(--border-hi);border-radius:8px;background:#fff;position:relative}
.lo-fchip b{font-size:12px;font-family:var(--font-mono)}
.lo-fchip small{font-size:11px;color:var(--t2)}
.lo-fchip em{position:absolute;top:-7px;right:-7px;min-width:18px;padding:0 5px;border-radius:9px;background:var(--color-accent);color:#fff;font-style:normal;font-size:11px;line-height:18px;text-align:center}
.lo-fstep:hover .lo-fchip{border-color:var(--color-accent)}
.lo-fstep--rev .lo-fchip{background:#f0fdf4;border-color:#86efac}
.lo-fstep--exp .lo-fchip{background:#fef2f2;border-color:#fca5a5}
.lo-fstep--virtual .lo-fchip,.lo-fstep.optional .lo-fchip{border-style:dashed;background:var(--s2)}
.lo-frule{font-size:12px;color:var(--t2);padding-top:8px;border-top:1px dashed var(--border)}
/* Document list (the mock's list page: tabs, flow bar, scenario chips, table, pager) */
.lo-newbox{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:11.5px;color:var(--t3)}
.lo-ltabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:14px}
.lo-ltab{display:flex;align-items:center;gap:8px;padding:10px 16px;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:none;cursor:pointer;font-family:inherit;color:var(--t3)}
.lo-ltab b{font-size:14px;font-weight:600}.lo-ltab small{font-size:12px}
.lo-ltab:hover,.lo-ltab.on{color:var(--t1)}.lo-ltab.on{border-bottom-color:var(--color-accent)}
.lo-lcount{font-family:var(--font-mono);font-size:11px;padding:1px 7px;border-radius:999px;background:var(--s3);color:var(--t2)}
.lo-ltab.on .lo-lcount{background:var(--color-ink);color:var(--color-accent)}
.lo-flowbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:var(--s2)}
.lo-flowbar-k{font-size:11.5px;color:var(--t3);font-weight:500}.lo-flowbar-arrow{color:var(--t3)}
.lo-flowchip{font-family:var(--font-mono);font-size:12px;padding:4px 10px;border-radius:999px;border:1px solid var(--border-hi);background:#fff;cursor:pointer;color:var(--t1)}
.lo-flowchip:hover{border-color:var(--t1)}
.lo-flowchip--cur{font-weight:500;padding:4px 12px;background:var(--color-ink);border-color:var(--color-ink);color:var(--color-accent);cursor:default}
.lo-scchips{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0 10px}
.lo-scchip{display:flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;border:1px solid var(--border-hi);background:#fff;color:var(--t1);cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:500;white-space:nowrap}
.lo-scchip span{font-family:var(--font-mono);font-size:11px;opacity:.75}
.lo-scchip:hover{border-color:var(--t1)}.lo-scchip.on{background:var(--color-ink);border-color:var(--color-ink);color:#fff}
.lo-dlist{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:#fff}
.lo-dlist-scroll{overflow-x:auto}
.lo-dl{width:100%;min-width:1100px;border-collapse:collapse;font-size:13px}
.lo-dl th{padding:10px 14px;font-weight:500;font-size:12px;color:var(--t2);background:var(--s2);border-bottom:1px solid var(--border);text-align:left;white-space:nowrap}
.lo-dl td{padding:11px 14px;border-bottom:1px solid var(--s3);vertical-align:top;white-space:nowrap}
.lo-dl .r{text-align:right}
.lo-dl td.lo-dl-wide{white-space:normal;min-width:300px}
.lo-lrow{cursor:pointer}.lo-lrow:hover,.lo-lrow.on{background:var(--color-accent-100)}
.lo-dl-no{font-weight:500}.lo-dl-cust{font-weight:500}
.lo-dl-sub{font-size:12px;color:var(--t2)}.lo-dl-sub.lo-mono{font-size:11px;color:var(--t3)}
.lo-sctag{font-family:var(--font-mono);font-size:11px;padding:2px 7px;border-radius:4px;border:1px solid var(--border-hi);color:var(--t2)}
.lo-nextbtn{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:6px;border:1px solid var(--t1);background:#fff;font-family:var(--font-mono);font-size:11.5px;font-weight:500;cursor:pointer;color:var(--t1)}
.lo-nextbtn:hover{background:var(--color-accent);border-color:var(--color-accent)}
.lo-dl-empty{padding:40px;text-align:center;color:var(--t3)}
.lo-pager{display:flex;align-items:center;gap:12px;padding:10px 14px;border-top:1px solid var(--border);flex-wrap:wrap;font-size:12.5px;color:var(--t2)}
.lo-pager b{color:var(--t1);font-weight:400}
.lo-pager-sizes{display:flex;align-items:center;gap:6px}
.lo-pager-nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.lo-pgbtn{min-width:30px;height:30px;padding:0 8px;border-radius:6px;border:1px solid var(--border-hi);background:#fff;font-family:var(--font-mono);font-size:12px;cursor:pointer;color:var(--t1)}
.lo-pgbtn:hover{border-color:var(--t1)}.lo-pgbtn:disabled{opacity:.4;cursor:default}
.lo-pgbtn.on{background:var(--color-accent);border-color:var(--color-accent-600)}
.lo-pgbtn--txt{font-family:inherit;padding:0 10px}
.lo-dl .lo-link{text-decoration:underline;text-underline-offset:3px}
.lo-sctag--dark{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-accent)}
.lo-drawer-eye{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--t2);margin-bottom:6px}
.lo-esthead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.lo-esthead b{font-size:13px;white-space:nowrap}.lo-esthead span{font-size:12px;color:var(--t2)}
.lo-esttotal{display:flex;flex-direction:column;align-items:flex-end;gap:4px;padding:12px 16px;border-top:1px solid var(--border);background:var(--s2)}
.lo-esttotal div{display:grid;grid-template-columns:auto 130px;gap:24px;align-items:baseline;text-align:right}
.lo-esttotal b{font-size:14px}.lo-esttotal b.lo-mono{font-size:16px}
.lo-esttotal span{font-size:12px;color:var(--t2)}
/* doc-list: the mock's list cells inside ckn-table */
.lo-doclist .lo-scchips{margin:14px 0 10px}
.lo-doctable td{vertical-align:top}
.lo-dl-main{font-weight:500}
.lo-doctable .lo-link{text-decoration:underline;text-underline-offset:3px}
.lo-sec--page{margin:22px 0 10px}
.lo-doctable .lo-dl-no,.lo-doctable .lo-link,.lo-doctable .lo-sctag,.lo-doctable .lo-pill,.lo-doctable .lo-nextbtn,.lo-doctable .lo-dl-sub.lo-muted{white-space:nowrap}
/* Row buttons in a ckn-table actions column (the mock's "ออก PO →", "ยืนยันรับงาน") */
.lo-rowbtn{height:30px;padding:0 12px;border-radius:6px;border:1px solid var(--t1);background:#fff;font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;color:var(--t1);white-space:nowrap}
.lo-rowbtn:hover{background:var(--color-accent-100)}
.lo-rowbtn--primary{background:var(--color-accent);border-color:var(--color-accent-600)}
.lo-rowbtn--primary:hover{background:var(--color-accent-600)}
.lo-stats + .lo-scchips{margin-top:14px}
/* Work Order: the mock's "ตาม Job" list */
.lo-wotools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 12px}
.lo-wotools .lo-scchips{margin:0}
.lo-vseg{display:inline-flex;padding:3px;border-radius:8px;background:var(--s3);gap:2px}
.lo-vseg button{border:0;background:none;padding:6px 14px;border-radius:6px;font-family:inherit;font-size:13px;color:var(--t2);cursor:pointer}
.lo-vseg button.on{background:#fff;color:var(--t1);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.lo-jgroup{border:1px solid var(--border);border-radius:10px;background:#fff;margin-bottom:14px;overflow:hidden}
.lo-jgroup-hd{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;background:var(--s2);border-bottom:1px solid var(--border)}
.lo-jgroup-hd .lo-muted{font-size:12.5px}
.lo-jgroup-prog{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:12.5px}
.lo-jbar{display:inline-block;width:80px;height:4px;border-radius:2px;background:var(--s3);position:relative;overflow:hidden}
.lo-jbar::after{content:"";position:absolute;inset:0 auto 0 0;background:var(--t1)}
.lo-jbar--0::after{width:0}.lo-jbar--1::after{width:25%}.lo-jbar--2::after{width:50%}.lo-jbar--3::after{width:75%}.lo-jbar--4::after{width:100%}
.lo-worow{display:grid;grid-template-columns:56px 1fr auto 80px auto 120px;gap:14px;align-items:center;padding:10px 16px;border-top:1px solid var(--s3)}
.lo-worow:first-of-type{border-top:0}
.lo-worow.on{background:var(--color-accent-100)}
.lo-worow-idx{font-size:12px;color:var(--t3);cursor:pointer}
.lo-worow-main{display:flex;flex-direction:column;gap:2px;cursor:pointer;min-width:0}
.lo-worow-main small{font-size:11.5px}
.lo-worow-team,.lo-worow-due{font-size:12.5px;white-space:nowrap}
.lo-worow-act{display:flex;justify-content:flex-end;gap:6px}
.lo-worow-act .lo-rowbtn:disabled{opacity:.45;cursor:not-allowed}
a.lo-rowbtn{display:inline-flex;align-items:center;text-decoration:none}
/* My Work: the mock's stacked sections with one row per task */
.lo-wtools{display:flex;align-items:flex-start;gap:12px;margin:6px 0 14px}
.lo-wtools .lo-scchips{margin:0;flex:1}
.lo-wcust{width:220px;flex:none}
.lo-wsec{border:1px solid var(--border);border-radius:10px;background:#fff;margin-bottom:14px;overflow:hidden}
.lo-wsec-hd{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--s2);border-bottom:1px solid var(--border)}
.lo-wsec-hd i{width:8px;height:8px;border-radius:50%;background:var(--color-neutral-500)}
.lo-wsec--today .lo-wsec-hd i{background:var(--color-accent)}.lo-wsec--over .lo-wsec-hd i{background:#b91c1c}.lo-wsec--done .lo-wsec-hd i{background:#15803d}
.lo-wsec-hd b{font-size:14px}
.lo-wsec-n{min-width:22px;padding:0 7px;border-radius:999px;border:1px solid var(--border-hi);background:#fff;font-size:12px;text-align:center}
.lo-wsec-note{font-size:12px;color:var(--t2)}
.lo-wsec-empty{padding:14px 16px;font-size:13px;color:var(--t3)}
.lo-wrow{display:grid;grid-template-columns:96px 1fr auto auto auto;gap:16px;align-items:center;padding:12px 16px;border-top:1px solid var(--s3)}
.lo-wsec-hd + .lo-wsec-empty + .lo-wrow,.lo-wsec-empty + .lo-wrow{border-top:0}
.lo-wrow .lo-wtag{justify-self:start;padding:3px 8px;border:1px solid var(--t1);border-radius:4px;background:#fff;color:var(--t1);font-size:11.5px;font-weight:600}
.lo-wrow-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.lo-wrow-main b{font-size:14px}
.lo-wrow-main > span{font-size:12.5px;color:var(--t2)}
.lo-wrow-wait{align-self:flex-start;padding:3px 8px;border:1px dashed var(--t2);border-radius:4px;font-size:12px;color:var(--t1)}
.lo-wrow-amt,.lo-wrow-due{font-size:12.5px;white-space:nowrap;text-align:right}
/* Freight Shipment: the mock's WO queue, filter bar, list cells and milestone board */
.lo-fq{border:1.5px solid var(--t1);border-radius:10px;background:#fff;overflow:hidden;margin-bottom:14px}
.lo-fq-hd{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;background:var(--color-accent-100);border-bottom:1px solid var(--border);font-size:12.5px;color:var(--color-accent-800)}
.lo-fq-hd b{font-size:14px;color:var(--t1)}
.lo-fq-n{min-width:22px;padding:0 7px;border-radius:999px;border:1px solid var(--t1);text-align:center;color:var(--t1)}
.lo-fq-row{display:grid;grid-template-columns:220px 1fr auto;gap:16px;align-items:center;padding:12px 16px;border-top:1px solid var(--s3)}
.lo-fq-hd + .lo-fq-row{border-top:0}
.lo-ftools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.lo-ftools-view{margin-left:auto}
.lo-ftools-count{margin-left:auto;font-size:12.5px}
.lo-fsel{width:200px}.lo-fsel--sm{width:80px}
.lo-ftag{display:inline-block;margin-top:4px;padding:1px 7px;border:1px solid var(--t1);border-radius:4px;font-size:11px;font-weight:600;white-space:nowrap}
.lo-fbar{display:block;width:170px;height:4px;margin-top:6px;border-radius:2px;background:var(--s3);overflow:hidden}
.lo-fbar i{display:block;height:100%;background:var(--t1)}
.lo-fbar-0{width:3%}.lo-fbar-1{width:10%}.lo-fbar-2{width:20%}.lo-fbar-3{width:30%}.lo-fbar-4{width:40%}.lo-fbar-5{width:50%}.lo-fbar-6{width:60%}.lo-fbar-7{width:70%}.lo-fbar-8{width:80%}.lo-fbar-9{width:90%}.lo-fbar-10{width:100%}
.lo-fwarns{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.lo-fboard{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px}
.lo-fcol{flex:0 0 260px;display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:10px;background:var(--s2)}
.lo-fcol-hd{display:flex;justify-content:space-between;align-items:center;padding:2px 4px;font-size:13px}
.lo-fcardx{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:#fff;text-align:left;font-family:inherit;cursor:pointer}
.lo-fcardx:hover{border-color:var(--t1)}
.lo-fcardx small{font-size:11.5px;color:var(--t2)}
.lo-ftools .lo-in--date{width:150px;flex:none}
.lo-doctable .lo-mono{white-space:nowrap}
/* Consolidation: the mock's Master, House and Master-document cards */
.lo-mstools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.lo-mstools-new{margin-left:auto;display:flex;align-items:center;gap:8px}
.lo-mstools-new .lo-in{width:260px}
.lo-mscard{border:1px solid var(--border);border-radius:10px;background:#fff;margin-bottom:14px;overflow:hidden}
.lo-mscard-hd{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:14px 16px 4px}
.lo-mscard-hd b{font-size:18px}.lo-mscard-hd .lo-muted{font-size:12.5px}
.lo-mscaps{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:8px 16px 16px}
.lo-capbar > div{display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px}
.lo-capbar-track{display:block;height:10px;border-radius:5px;background:var(--s3);overflow:hidden}
.lo-capbar-track i{display:block;height:100%;background:var(--t1)}
.lo-capbar.part .lo-capbar-track i{background:#d97706}.lo-capbar.over .lo-capbar-track i{background:#b91c1c}
.lo-mscard-sec{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--s2);border-bottom:1px solid var(--border)}
.lo-msrow{display:grid;grid-template-columns:160px 1fr auto auto auto;gap:16px;align-items:center;padding:12px 16px;border-top:1px solid var(--s3)}
.lo-mscard-sec + .lo-wsec-empty + .lo-msrow,.lo-mscard-sec + .lo-msrow{border-top:0}
.lo-msdoc{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:12px 16px;border-top:1px solid var(--s3)}
.lo-mscard-sec + .lo-msdoc{border-top:0}
.lo-rowbtn--danger{color:#b91c1c;border-color:var(--border-hi)}
.lo-ctno{font-size:16px}
.lo-ctsize{padding:1px 8px;border:1px solid var(--t1);border-radius:4px;font-size:12px}
.lo-cthd{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* Desk pages (Customs, Pre-alert): the mock's list box, step bars and bordered info grid */
.lo-inbox{grid-template-columns:minmax(360px,510px) 1fr}
.lo-palist{gap:0;border:1px solid var(--border);border-radius:10px;background:#fff;overflow:hidden}
.lo-pa{gap:6px;padding:14px 16px;border:0;border-top:1px solid var(--border);border-radius:0;font-size:13px}
.lo-pa:first-of-type,.lo-palist > .lo-note + .lo-pa{border-top:0}
.lo-pa.on{border:0;border-top:1px solid var(--border);background:var(--color-accent-100)}
.lo-pa:first-of-type.on{border-top:0}
.lo-pa .lo-pa-top b{font-size:13.5px}
.lo-pa .lo-rchip{border-radius:4px;border:1px solid var(--t1);padding:1px 6px;font-size:11px;font-weight:600}
.lo-pacard{padding:16px 18px;gap:12px}
.lo-pacard .lo-drawer-title{font-size:19px}
.lo-pacard .lo-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:4px}
.lo-pacard .lo-step{flex-direction:column;align-items:flex-start;gap:6px;padding:0;border:0;border-radius:0;font-size:12px;background:none}
.lo-pacard .lo-step i{width:100%;height:4px;border-radius:2px;border:0;background:var(--s3)}
.lo-pacard .lo-step.done i{background:var(--t1)}
.lo-pacard .lo-step.now i{background:var(--color-accent)}
.lo-pacard .lo-step.now{font-weight:600}
.lo-pacard .lo-step.end i{background:#b91c1c}
.lo-pacard .lo-fields{grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--s3)}
.lo-pacard .lo-field{padding:10px 12px;background:#fff;border-right:1px solid var(--border);border-bottom:1px solid var(--border);gap:6px}
.lo-pacard .lo-field b{font-size:13.5px}
.lo-pacard .lo-shortbar{border:1px solid #b91c1c;background:#fff;color:#b91c1c;border-radius:6px}
@media(max-width:1100px){.lo-pacard .lo-fields{grid-template-columns:repeat(2,1fr)}}
/* Field apps: the mock's phone frame beside the "สิ่งที่ระบบเห็นทันที" panel */
.lo-mstage{display:grid;grid-template-columns:390px 1fr;gap:28px;align-items:start}
.lo-mstage .lo-phone{margin:0;height:800px;min-height:0;border:10px solid #141414;border-radius:44px;box-shadow:0 10px 30px rgba(0,0,0,.12)}
.lo-mstatus{display:flex;justify-content:space-between;padding:12px 22px 4px;background:#141414;color:#fff;font-size:12.5px}
.lo-sys{display:flex;flex-direction:column;gap:12px}
.lo-sys-hd{display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--t2)}
.lo-sys-sec{border:1px solid var(--border);border-radius:10px;background:#fff;overflow:hidden}
.lo-sys-title{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:var(--s2);border-bottom:1px solid var(--border);font-size:13.5px}
.lo-sys-title .lo-rowbtn{height:26px;font-size:12px;font-weight:500}
.lo-sys-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 14px;border-top:1px solid var(--s3);font-size:13px}
.lo-sys-title + .lo-sys-row{border-top:0}
.lo-sys-empty{padding:10px 14px;font-size:13px;color:var(--t3)}
@media(max-width:900px){.lo-mstage{grid-template-columns:1fr}.lo-mstage .lo-phone{height:auto;border-width:0;border-radius:0;box-shadow:none}}
.lo-mgreet{display:flex;flex-direction:column;gap:2px;margin:4px 0 14px}.lo-mgreet small{font-size:12px;color:var(--t2)}.lo-mgreet b{font-size:19px}.lo-mgreet span{font-size:12.5px;color:var(--t2)}
/* Sales Order desk (the mock's Sales Order Detail / List / อนุมัติ) */
.lo-barsteps{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:4px}
.lo-barsteps .lo-step{flex-direction:column;align-items:flex-start;gap:6px;padding:0;border:0;border-radius:0;font-size:12px;background:none;color:var(--t3)}
.lo-barsteps .lo-step i{width:100%;height:4px;border-radius:2px;border:0;background:var(--s3)}
.lo-barsteps .lo-step.done{color:var(--t1)}.lo-barsteps .lo-step.done i{background:var(--t1)}
.lo-barsteps .lo-step.now{color:var(--t1);font-weight:600}.lo-barsteps .lo-step.now i{background:var(--color-accent)}
.lo-lcount--hot{background:var(--color-accent);color:var(--t1)}
.lo-socard{display:flex;flex-direction:column;gap:14px;padding:16px;border:1px solid var(--border);border-radius:10px;background:#fff;margin-bottom:14px}
.lo-socard--sm{gap:8px;padding:14px}
.lo-sohd{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.lo-sopick{width:280px}
.lo-sono{font-size:22px}
.lo-sover{padding:1px 7px;border-radius:4px;background:var(--color-ink);color:var(--color-accent);font-size:12px}
.lo-sofields{display:grid;grid-template-columns:repeat(5,1fr);gap:10px 18px}
.lo-sogrid{display:grid;grid-template-columns:1fr 330px;gap:14px;align-items:start}
.lo-sosec-amt{margin-left:auto}
.lo-soitem{display:grid;grid-template-columns:1fr auto 120px;gap:16px;align-items:center;padding:12px 16px;border-top:1px solid var(--s3)}
.lo-mscard-sec + .lo-soitem{border-top:0}
.lo-soitem > span:first-child{display:flex;flex-direction:column;gap:2px}
/* Sales Order: service items edited in place (same three columns as the desk) */
.lo-sosec-tools{display:inline-flex;align-items:center;gap:12px;margin-left:auto}
.lo-soitem--edit{grid-template-columns:minmax(0,1fr) auto 150px}
.lo-soedit-item{min-width:0}
.lo-soedit-qty{display:inline-flex;align-items:center;gap:6px}
.lo-soedit-qty .lo-in--sm{width:72px}
.lo-soedit-qty .lo-in--num:not(.lo-in--sm){width:110px}
.lo-soedit-amt{display:inline-flex;align-items:center;justify-content:flex-end;gap:8px}
.lo-soedit-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid var(--s3)}
.lo-soedit-foot > span{flex:1;min-width:180px}
@media(max-width:760px){.lo-soitem--edit{grid-template-columns:1fr}.lo-soedit-amt{justify-content:space-between}}
.lo-soitem small{font-size:11.5px;color:var(--t3)}
.lo-soitem b{text-align:right}
.lo-sosum{display:flex;flex-direction:column;gap:4px;padding:12px 16px;border-top:1px solid var(--border)}
.lo-sosum > div{display:grid;grid-template-columns:1fr 130px;gap:16px;text-align:right;font-size:13px}
.lo-sosum .lo-sosum-total{font-weight:700;font-size:14px}
.lo-chain--card{padding:10px 16px}
.lo-soside{display:flex;flex-direction:column}
.lo-sonextcard{display:flex;flex-direction:column;gap:8px;padding:16px;margin-bottom:14px;border:2px solid var(--t1);border-radius:10px;background:var(--color-accent-100)}
.lo-sonextcard > b{font-size:17px}
.lo-sonextcard small{font-size:12.5px;color:var(--t2)}
.lo-sonext-main{height:44px;font-size:14px}
.lo-soline{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:13px}
.lo-sobig{font-size:20px}
.lo-sobar{display:block;height:6px;border-radius:3px;background:var(--color-accent);overflow:hidden}
.lo-sobar i{display:block;height:100%;background:var(--t1)}
.lo-sojob{display:flex;flex-direction:column;gap:6px}
.lo-sowo{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;padding:6px 8px;border:1px solid var(--border);border-radius:6px;font-size:12.5px}
.lo-soinv{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--s3);font-size:12.5px;color:var(--t1);text-decoration:none}
.lo-soinv b{text-align:right}
.lo-soapp-note{font-size:12.5px;margin-bottom:10px}
.lo-soapp{display:grid;grid-template-columns:auto auto auto 1fr auto;gap:12px;align-items:center;padding:14px 16px;margin-bottom:10px;border:1.5px solid var(--t1);border-radius:10px;background:#fff}
.lo-soapp-main{display:flex;flex-direction:column;gap:2px}.lo-soapp-main small{font-size:12px;color:var(--t2)}
.lo-sonext{font-size:13px;white-space:nowrap}
@media(max-width:1100px){.lo-sogrid{grid-template-columns:1fr}.lo-sofields{grid-template-columns:repeat(2,1fr)}}
/* Planning / Truck desks: the mock's header numbers, resource avatars and allocation bars */
.lo-hstats{display:flex;gap:22px;align-items:flex-start}
.lo-hstats > div{display:flex;flex-direction:column;gap:2px;font-size:11.5px;color:var(--t2)}
.lo-hstats b{font-size:20px;color:var(--t1)}
.lo-daynav--row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.lo-vseg--full{display:flex}.lo-vseg--full button{flex:1}
.lo-resav{flex:none;width:30px;height:30px;border-radius:6px;background:var(--s3);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600}
.lo-res{display:flex;align-items:center;gap:10px}
.lo-res > span:nth-child(2){flex:1;display:flex;flex-direction:column;min-width:0}
.lo-planwos-hd{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px;font-size:13px}
.lo-planwos-hd b{font-size:15px}
.lo-alloc{display:flex;flex-direction:column;gap:8px}
.lo-allocrow{display:grid;grid-template-columns:150px 1fr 40px;gap:12px;align-items:center;font-size:13px}
.lo-allocrow b{text-align:right}
.lo-alloctrack{display:block;height:5px;border-radius:3px;background:var(--s3);overflow:hidden}
.lo-allocbar{display:block;height:100%}
.lo-allocbar--ok{background:#15803d}.lo-allocbar--part,.lo-allocbar--none{background:var(--color-accent)}
.lo-allocbar.lo-fbar-0{width:0}
.lo-set-hd .lo-seg{width:auto;padding:0 10px}
.lo-scchips--tight{margin:0 0 8px}.lo-scchips--tight .lo-scchip{padding:4px 10px;font-size:12px}
.lo-loadbar{display:flex;align-items:stretch;height:44px;border:1px solid var(--border-hi);border-radius:4px;overflow:hidden}
.lo-loadbadge{flex:none;display:flex;align-items:center;justify-content:center;width:38px;background:var(--color-ink);color:var(--color-accent);font-size:11px}
.lo-loadtrack{flex:1;display:block;background:#fff}
.lo-loadtrack i{display:block;height:100%;background:var(--color-accent)}
.lo-loadtrack i.over{background:#fca5a5}
.lo-fleethint{font-size:12px;margin:8px 0}
.lo-fleetrow{display:flex;align-items:center;gap:10px;width:100%;margin-bottom:8px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:#fff;font-family:inherit;text-align:left;cursor:pointer;color:var(--t1)}
.lo-fleetrow > span:nth-child(2){flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.lo-fleetrow small{font-size:11.5px;color:var(--t2)}
.lo-fleetrow:hover:not(:disabled){border-color:var(--t1)}
.lo-fleetrow.on{border:2px solid var(--t1);background:var(--color-accent-100)}
.lo-fleetrow.warn{opacity:.75}
.lo-fleetrow:disabled{cursor:default}
.lo-fleetbadge{flex:none;width:36px;height:36px;border-radius:6px;background:var(--color-ink);color:var(--color-accent);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:11px;font-weight:600}
.lo-fleetbadge--soft{background:var(--s3);color:var(--t1);font-family:inherit;font-size:13px}
/* Truck type icons (helper/vehicle-icon · <lo-vehicle-icon>): yellow on the black badge, as the type text was */
.lo-vicon{display:block;flex:none}
.lo-fleetbadge--icon lo-vehicle-icon,.lo-fleetbadge lo-person-icon{display:flex}
.lo-loadbadge lo-vehicle-icon{display:inline-flex;vertical-align:-2px;margin-right:4px}
.lo-rm-name{display:flex;align-items:center;gap:10px}
/* Resource Master: the mock's expiry card, tab bar and skill tags */
.lo-alertbox{gap:0;padding:0;border:1px solid var(--border);border-radius:10px;background:#fff;overflow:hidden;margin-bottom:14px}
.lo-alertbox-hd{padding:12px 16px;background:var(--s2);border-bottom:1px solid var(--border);font-size:12.5px}
.lo-alertbox-hd b{font-size:14px}
.lo-alertrow{padding:10px 16px;border-top:1px solid var(--s3);font-size:13px}
.lo-alertbox-hd + .lo-alertrow{border-top:0}
.lo-tabbar{justify-content:flex-start;margin-bottom:12px}
.lo-tabbar .lo-in--search{width:240px}
.lo-tabbar .lo-legend{margin-left:auto}
.lo-skills{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.lo-skill{padding:1px 7px;border:1px solid var(--border-hi);border-radius:4px;font-size:11.5px;color:var(--t2)}
/* Flow overview: the mock's two-column scenario cards */
.lo-fcard{display:grid;grid-template-columns:260px 1fr;gap:20px;flex-direction:initial}
.lo-fcard-info{display:flex;flex-direction:column;gap:8px;font-size:13px}
.lo-fcard-hd{align-items:center}
.lo-fcard-hd b{font-size:16px}
.lo-fcode{background:var(--color-ink);color:var(--color-accent)}
.lo-fcard-flow{display:flex;flex-direction:column;gap:10px}
.lo-frule{padding:10px 12px;border:1px solid #fcd34d;border-top:1px solid #fcd34d;border-radius:6px;background:#fffbeb;color:#92400e;font-size:12.5px}
.lo-fchip em{position:static;display:inline;min-width:0;padding:0;background:none;color:var(--t2);font-family:var(--font-mono);font-weight:400;font-size:12px;margin-left:4px}
.lo-fchip{min-width:72px;padding:7px 10px}
@media(max-width:1000px){.lo-fcard{grid-template-columns:1fr}}
.lo-backbar{display:flex;align-items:center;gap:12px;margin:0 0 14px}
/* Purchasing forms */
.lo-span4{grid-column:span 4}
.lo-check{flex-direction:row;align-items:center;gap:6px;align-self:end;padding-bottom:8px}
.lo-prline{display:grid;grid-template-columns:1fr 90px 90px 120px 28px;gap:8px;align-items:center;margin-bottom:6px}
/* Vendor bill: the 3-way match */
.lo-match3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.lo-match{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:#fff;font-size:12px;color:var(--t2)}
.lo-match b{font-size:16px;color:var(--t1)}
.lo-match.ok{border-color:#86efac;background:#f0fdf4}.lo-match.bad{border-color:#fca5a5;background:#fef2f2}
.lo-sosum--card{border:1px solid var(--border);border-radius:8px}
.lo-icsums{margin-bottom:12px}.lo-icnote{font-size:12.5px;margin-top:10px}
/* Spend dashboard */
.lo-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-bottom:14px}
.lo-kpi{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:#fff}
.lo-kpi span{font-size:12px;color:var(--t2)}.lo-kpi b{font-size:20px}.lo-kpi small{font-size:11.5px;color:var(--t3)}
.lo-dashgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.lo-dashgrid--2{grid-template-columns:repeat(2,1fr)}
.lo-dashcard{margin-bottom:0}
.lo-dashgrid + .lo-dashgrid,.lo-dashgrid + .lo-mscard{margin-top:14px}
.lo-sbarrow{display:grid;grid-template-columns:120px 1fr auto;gap:10px;align-items:center;padding:8px 16px;font-size:12.5px}
.lo-sbarrow > span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lo-sbartrack{display:block;height:8px;border-radius:4px;background:var(--s3);overflow:hidden}
.lo-sbar{display:block;height:100%;background:var(--color-accent)}
.lo-dashrow{display:flex;flex-direction:column;gap:2px;padding:10px 16px;border-top:1px solid var(--s3);color:var(--t1);text-decoration:none;font-size:13px}
.lo-dashrow small{color:var(--t2);font-size:12px}
.lo-mscard-sec + .lo-dashrow{border-top:0}
@media(max-width:1000px){.lo-dashgrid,.lo-dashgrid--2{grid-template-columns:1fr}}
/* Tooling: one compact row per tool — name · how much is out · how much is free to lend */
.lo-tools{border:1px solid var(--border);border-radius:10px;background:#fff;margin:14px 0;overflow:hidden}
.lo-tools-hd{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;border-bottom:1px solid var(--border);font-size:13px}
.lo-tools-key{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--t3)}
.lo-tools-key i{display:inline-block;width:10px;height:10px;border-radius:2px;background:var(--s3);border:1px solid var(--border-hi);margin-left:8px}
.lo-tools-key i.lo-tools-out{background:var(--t1)}
.lo-toolrow{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(80px,1fr) minmax(0,1.1fr);align-items:center;gap:16px;width:100%;padding:9px 16px;border:0;border-top:1px solid var(--border);background:none;font:inherit;color:var(--t1);text-align:left;cursor:pointer}
.lo-tools-hd + .lo-toolrow{border-top:0}
.lo-toolrow:hover:not(:disabled){background:var(--s2)}
.lo-toolrow:disabled{cursor:default}
.lo-toolrow-name{font-size:13.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lo-toolrow-name small{margin-left:8px;font-size:11px;color:var(--t3)}
.lo-toolrow-bar{display:block;height:6px;border-radius:3px;background:var(--s3);overflow:hidden}
.lo-toolrow-bar i{display:block;height:100%;background:var(--t1)}
.lo-toolrow-bar i.lo-toolrow-none{width:0}
.lo-toolrow-qty{font-size:12.5px;color:var(--t2);white-space:nowrap;text-align:right}
.lo-toolrow-qty b{font-size:16px;font-weight:600;color:var(--t1);margin-right:2px}
.lo-toolrow-qty small{font-size:12px;color:var(--t3)}
.lo-toolrow--out .lo-toolrow-qty b{color:#b91c1c}
.lo-toolrow--out .lo-toolrow-bar i{background:#b91c1c}
@media (max-width:640px){.lo-toolrow{grid-template-columns:1fr auto}.lo-toolrow-bar{grid-column:1 / -1;order:3}}

/* Quotation — "+ New Quotation" source picker (docs/ui/logisticsos v5.dc.html, pickOpen) */
.lo-modal--pick{width:min(720px,calc(100vw - 32px))}
.lo-pick-hd{flex-direction:column;gap:12px}
.lo-pick-head{display:flex;justify-content:space-between;gap:16px}
.lo-pick-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.lo-pick-q{flex:1;width:auto;min-width:220px;height:34px;font-family:var(--font-mono);font-size:13px}
.lo-pick-list{flex:1;overflow-y:auto;min-height:120px}
.lo-pick-row{width:100%;display:grid;grid-template-columns:20px 130px 64px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 22px;border:0;border-bottom:1px solid var(--border);background:#fff;font:inherit;text-align:left;color:var(--t1);cursor:pointer}
.lo-pick-row:hover,.lo-pick-row.on{background:var(--color-accent-100)}
.lo-pick-row:focus-visible{outline:2px solid var(--color-accent);outline-offset:-2px}
.lo-pick-radio{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--border-hi);background:#fff}
.lo-pick-row.on .lo-pick-radio{border:5px solid var(--t1)}
.lo-pick-no{font-size:13px;font-weight:500}
.lo-pick-sc{font-family:var(--font-mono);font-size:11px;padding:2px 6px;border-radius:4px;border:1px solid var(--border-hi);color:var(--t2);text-align:center}
.lo-pick-main{min-width:0}
.lo-pick-main b,.lo-pick-main small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lo-pick-main b{font-size:13px;font-weight:500}
.lo-pick-main small{font-size:12px;color:var(--t2)}
.lo-pick-empty{padding:32px;text-align:center;color:var(--t3);font-size:13px}
.lo-pick-err{margin:16px 22px}
@media(max-width:700px){.lo-pick-row{grid-template-columns:20px minmax(0,1fr);row-gap:4px}.lo-pick-sc{display:none}.lo-pick-row>.lo-pick-main,.lo-pick-row>.lo-pill{grid-column:2;justify-self:start}}

/* "+ New Sales Order" form (soForm) and "+ New Job" (jobForm): a reference picker that opens in place */
.lo-sec-note{font-family:var(--font-body);font-size:11.5px;letter-spacing:0;text-transform:none;color:var(--t3);margin-left:8px}
.lo-refbtn{display:flex;align-items:center;gap:10px;width:100%;min-height:38px;padding:6px 12px;border-radius:6px;border:1px solid var(--border-hi);background:#fff;font:inherit;font-size:13px;color:var(--t1);text-align:left;cursor:pointer}
.lo-refbtn:hover{border-color:var(--color-accent)}
.lo-refbtn .lo-muted{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12.5px}
.lo-refcaret{margin-left:auto;font-size:11px;color:var(--t3)}
.lo-refpop{display:flex;flex-direction:column;gap:8px;padding:10px;border:2px solid var(--color-accent);border-radius:8px;background:var(--s2)}
.lo-soopt span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lo-in--code{min-width:0;width:150px}
.lo-scbadge{font-family:var(--font-mono);font-size:11px;font-weight:400;padding:2px 6px;border-radius:4px;border:1px solid var(--border-hi);color:var(--t2);vertical-align:middle}
.lo-jf-body{padding:0;overflow:visible}

/* Customer Master (design: claude.ai/artifact/FK5zqpj3KFm6CVV9qiJ7hU): the list beside a detail panel */
.lo-cm{display:flex;flex-wrap:wrap;align-items:flex-start;min-width:0}
/* Item Master: the category picker sits in the chip row */
.lo-im-cat{width:auto;max-width:min(340px,100%);height:32px;margin-right:4px}
.lo-im-newcat{align-self:flex-start;width:auto}

/* Quotation lines: the item dropdown (its list is pinned by QuotationPage.placeItemMenu) */
.lo-itemcell{min-width:260px}
.lo-itemdd .ckn-dropdown__trigger{text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lo-cm>.pane{flex:999 1 560px;min-width:0}
.lo-cm-side{flex:1 1 380px;max-width:460px;min-width:0;align-self:stretch;border-left:1px solid var(--border);background:#fff;display:flex;flex-direction:column;min-height:calc(100vh - 60px)}
.lo-cm-hd{padding:24px 24px 14px;display:flex;flex-direction:column;gap:4px;border-bottom:1px solid var(--border)}
.lo-cm-tags{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:6px;font-size:12px}
.lo-cm-side .lo-dtabs{padding:0 14px;overflow-x:auto}
.lo-cm-body{padding:18px 24px;display:flex;flex-direction:column;gap:12px}
.lo-cm-body .lo-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
.lo-cm-card{border:1px solid var(--border);border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:3px;font-size:13px;color:var(--t2);line-height:1.5}
.lo-cm-card b{color:var(--t1);font-weight:600}
.lo-cm-person{flex-direction:row;gap:12px;align-items:flex-start}
.lo-cm-avatar{width:36px;height:36px;border-radius:50%;background:var(--s3);color:var(--t2);display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:600;flex:none}
.lo-cm-counts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.lo-cm-counts>div{border:1px solid var(--border);border-radius:8px;padding:10px;display:flex;flex-direction:column;gap:2px}
.lo-cm-counts span{font-size:11px;color:var(--color-accent-700)}
.lo-cm-counts b{font-size:20px;font-weight:500}
.lo-cm-doc{display:flex;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--s3);text-decoration:none;color:var(--t1);font-size:13px}
.lo-cm-doc .lo-mono{width:104px;flex:none;color:var(--color-accent-700);font-weight:500}
.lo-cm-doc span:nth-child(2){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lo-cm-doc small{font-size:11.5px;color:var(--t2);white-space:nowrap}
.lo-cm-reason{padding:0 24px 12px}
.lo-cm-side .lo-drawer-foot{margin-top:auto}
@media(max-width:900px){.lo-cm-side{max-width:none;border-left:0;border-top:1px solid var(--border);min-height:0}}

/* Lead → customer: the drawer's box for a lead with no customer yet */
.lo-custbox{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:12px 14px;border:1px dashed var(--border-hi);border-radius:8px;background:var(--s2);margin-top:12px}
.lo-custbox p{margin:0;font-size:12.5px}
.lo-custlink{display:flex;gap:8px;align-items:center;flex-wrap:wrap;width:100%}
.lo-custlink .lo-in{flex:1;min-width:200px;width:auto}
/* ---- Elite · Exhibitions (plan 0004, mock "Elite Exhibition Desk") ---- */
.lo-stat small{font-size:11px;color:var(--t3)}
.lo-ex-cards{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.lo-ex-card{display:flex;flex-direction:column;gap:12px;padding:14px 16px;border:1px solid var(--border);border-radius:10px;background:#fff;color:var(--t1);text-decoration:none}
.lo-ex-card:hover{border-color:var(--t1)}
.lo-ex-card-top{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.lo-ex-card-main{display:flex;flex-direction:column;gap:3px;flex:1;min-width:220px}
.lo-ex-card-name{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.lo-ex-card-name b{font-size:16px;font-weight:600}
.lo-ex-type{font-size:11px;font-weight:600;padding:1px 8px;border-radius:4px;border:1px solid var(--color-neutral-400);white-space:nowrap}
.lo-ex-card-sub{font-size:12.5px;color:var(--t2)}.lo-ex-card-meta{font-size:11.5px;color:var(--t3)}
.lo-ex-card-total{display:flex;flex-direction:column;align-items:flex-end;gap:2px}.lo-ex-card-total span{font-size:11.5px;color:var(--t3)}.lo-ex-card-total b{font-size:18px;font-weight:600}
.lo-ex-prog{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.lo-ex-prog-item{display:flex;flex-direction:column;gap:4px}.lo-ex-prog-item>div{display:flex;justify-content:space-between;font-size:11.5px}
.lo-ex-bar{display:flex;height:6px;border-radius:3px;background:var(--s3);overflow:hidden}.lo-ex-bar i{display:block;background:var(--t1)}.lo-ex-bar i.lo-ex-bar-none{width:0}
.lo-ex-srcs{display:flex;gap:8px;flex-wrap:wrap}
.lo-ex-src{flex:1 1 200px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px;border-radius:8px;border:1px solid var(--border-hi);background:#fff;cursor:pointer;text-align:left;font:inherit;color:var(--t1)}
.lo-ex-src span{font-size:11.5px;color:var(--t3)}.lo-ex-src.on{border:2px solid var(--t1);background:var(--color-accent-100)}
.lo-ex-empty{padding:24px;border:1px dashed var(--border-hi);border-radius:10px;text-align:center;color:var(--t2)}

.lo-ex-hdtools{display:flex;align-items:flex-end;gap:8px}.lo-ex-hdtools .lo-label{min-width:240px}
.lo-ex-head{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px 16px;padding:12px 16px;border:1px solid var(--border);border-radius:10px;margin:12px 0}
.lo-ex-hf{display:flex;flex-direction:column;gap:2px;min-width:0}.lo-ex-hf span{font-size:11px;color:var(--t3)}.lo-ex-hf b{font-size:13px;font-weight:500;overflow-wrap:anywhere}
.lo-ex-tab{display:flex;flex-direction:column;gap:10px}
.lo-ex-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.lo-ex-tools .lo-scchips{flex:1;margin:0}
.lo-ex-newgrp{width:130px;height:30px;border-radius:999px;border-style:dashed}
.lo-ex-search{width:220px}
.lo-ex-legend{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--t2)}
.lo-ex-legend>span{display:flex;align-items:center;gap:5px}
.lo-ex-sw{display:inline-block;width:14px;height:14px;border-radius:3px}.lo-ex-sw.in{background:var(--color-accent-100);border:1px solid var(--color-accent-300)}.lo-ex-sw.calc{background:#f0fdf4;border:1px solid #bbf7d0}.lo-ex-sw.miss{background:#fff;border:1.5px solid #dc2626}
.lo-ex-legend .lo-ex-fbar{flex:1;min-width:220px;padding:5px 10px;border-radius:6px;background:var(--s2);color:var(--t1)}
.lo-ex-bulkbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 12px;border-radius:8px;background:var(--color-ink);color:#fff}
.lo-ex-bulkbar>b{flex:1;font-size:13px}
.lo-ex-bulk{height:32px;padding:0 12px;border-radius:5px;border:1px solid var(--color-accent);background:none;color:var(--color-accent);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.lo-ex-bulk.hot{background:var(--color-accent);color:var(--t1)}.lo-ex-bulk.ghost{border-color:#555;color:#ddd;font-weight:400}
.lo-ex-bulk-none{font-size:12px;color:#bbb}

.lo-ex-sheetwrap{border:1px solid var(--border);border-radius:10px;overflow:auto;max-height:70vh}
.lo-ex-sheet{border-collapse:separate;border-spacing:0;font-size:12.5px;min-width:100%}
.lo-ex-sheet th,.lo-ex-sheet td{border-bottom:1px solid var(--s3);border-left:1px solid var(--s3);padding:0;height:36px;white-space:nowrap}
.lo-ex-sheet thead th{position:sticky;background:var(--s3);font-size:11px;color:var(--t2);font-weight:600;z-index:2}
.lo-ex-sheet thead tr:first-child th{top:0;height:30px}.lo-ex-sheet thead tr:last-child th{top:30px;height:30px}
.lo-ex-gh{text-align:left;padding:0 10px}.lo-ex-gh button{border:0;background:none;padding:0;font:inherit;font-weight:600;color:var(--t1);cursor:pointer;white-space:nowrap}
.lo-ex-ch{padding:0 8px 0 14px!important;text-align:right;font-weight:400}
.lo-ex-ch--in{background:var(--color-accent-100)!important}.lo-ex-ch--calc,.lo-ex-ch--res{background:#f0fdf4!important}.lo-ex-ch--res,.lo-ex-ch--total{font-weight:600!important}
.lo-ex-who{position:sticky;left:0;z-index:3;background:#fff;text-align:left;font-weight:400;border-right:1px solid var(--border-hi)}
.lo-ex-sheet thead .lo-ex-who{z-index:4;top:0;background:var(--s3)}
.lo-ex-whogrid{display:grid;grid-template-columns:22px 26px 128px 66px 48px 220px;gap:6px;align-items:center;padding:0 10px}
.lo-ex-whogrid span{font-size:11px;overflow:hidden;text-overflow:ellipsis}.lo-ex-no{color:var(--t3)}
.lo-ex-whogrid input[type=checkbox]{width:15px;height:15px;accent-color:var(--color-ink)}
.lo-ex-name{border:0;background:none;padding:0;text-align:left;cursor:pointer;font:inherit;font-size:12.5px;font-weight:500;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:underline;text-decoration-color:var(--border-hi)}
.lo-ex-row.on .lo-ex-who,.lo-ex-row.on td{background:var(--color-accent-100)}
.lo-ex-td{min-width:84px}.lo-ex-td--in{background:var(--color-accent-100)}.lo-ex-td--in.ro{background:#fff}
.lo-ex-td--in.miss{outline:1.5px solid #dc2626;outline-offset:-2px}
.lo-ex-td--calc,.lo-ex-td--res{background:#f0fdf4;min-width:96px}.lo-ex-td--res{min-width:108px}.lo-ex-td--total{background:var(--s2);min-width:124px}
.lo-ex-in{width:100%;height:100%;min-height:34px;border:0;background:transparent;padding:0 8px;font-family:var(--font-mono);font-size:12.5px;text-align:right;color:var(--t1);box-sizing:border-box}
.lo-ex-in:focus{outline:2px solid var(--color-accent);outline-offset:-2px;background:#fff}
.lo-ex-calc{display:block;width:100%;height:100%;min-height:34px;border:0;background:none;padding:0 8px;font-size:12.5px;text-align:right;cursor:help;color:var(--t1)}
.lo-ex-td--res .lo-ex-calc,.lo-ex-td--total .lo-ex-calc{font-weight:600}.lo-ex-td.zero .lo-ex-calc{color:var(--t3)}
.lo-ex-st{min-width:220px;padding:0 8px!important;text-align:left;border-left:1px solid var(--border-hi)!important}
.lo-ex-stin{display:flex;align-items:center;gap:4px}
.lo-ex-flag{font-size:10.5px;padding:1px 6px;border-radius:4px;white-space:nowrap}
.lo-ex-flag--bad{background:#fee2e2;color:#b91c1c}.lo-ex-flag--pending{background:var(--color-accent-100);color:var(--color-accent-800)}.lo-ex-flag--idle{background:var(--s2);color:var(--t2)}
.lo-ex-sheet tfoot th,.lo-ex-sheet tfoot td{position:sticky;bottom:0;background:var(--s3);font-weight:600;text-align:right;padding:0 8px;z-index:2}
.lo-ex-sheet tfoot .lo-ex-who{z-index:4;text-align:left;padding:0 10px}

.lo-ex-setbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 14px;border-radius:10px;background:var(--s2);font-size:12.5px}.lo-ex-setbar>span{flex:1;min-width:220px}
.lo-ex-setcard{display:flex;flex-direction:column;gap:10px;padding:12px 14px;border:1px solid var(--border);border-radius:10px}
.lo-ex-setcard-hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.lo-ex-setcard-hd>span{font-size:12px;color:var(--t3)}
.lo-ex-kind{font-size:11px;padding:2px 7px;border-radius:4px;background:var(--color-ink);color:var(--color-accent)}
.lo-ex-label{flex:1 1 200px;font-weight:600}
.lo-ex-segs{display:flex;gap:2px;padding:3px;border-radius:7px;background:var(--s3)}
.lo-ex-seg{height:26px;padding:0 10px;border:0;border-radius:5px;background:none;font:inherit;font-size:12px;color:var(--t1);cursor:pointer;white-space:nowrap}.lo-ex-seg.on{background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.1)}
.lo-ex-params{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.lo-ex-param{width:104px;font-family:var(--font-mono);background:var(--color-accent-100)}.lo-ex-param.wide{width:150px;font-family:var(--font-body)}
select.lo-ex-param{width:130px;font-family:var(--font-body)}
.lo-ex-eff{display:flex;align-items:center;height:34px;padding:0 10px;border-radius:6px;background:#f0fdf4;font-size:14px}
.lo-ex-sample{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 10px;border-radius:6px;background:#f0fdf4;font-size:12px}
.lo-ex-sample>span:first-child{color:var(--t2)}.lo-ex-sample>span.lo-mono{flex:1;min-width:200px}.lo-ex-sample b{font-size:13.5px}
.lo-ex-addkinds,.lo-ex-addkinds-in{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.lo-ex-addkind{height:32px;padding:0 12px;border-radius:6px;border:1px dashed var(--color-neutral-400);background:#fff;font:inherit;font-size:12.5px;cursor:pointer}
.lo-ex-samplepick{margin-left:auto;flex-direction:row;align-items:center;gap:6px}
.lo-ex-impact{position:sticky;bottom:0;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;border:2px solid var(--border);border-radius:10px;background:#fff}
.lo-ex-impact.on{border-color:var(--t1)}.lo-ex-impact>div{display:flex;flex-direction:column;gap:2px;flex:1;min-width:240px}.lo-ex-impact span{font-size:12.5px;color:var(--t2)}

.lo-ex-billbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lo-ex-billsum{display:flex;flex-direction:column;gap:1px;padding:8px 12px;border-radius:8px;border:1px solid var(--border);min-width:130px}.lo-ex-billsum span{font-size:11px;color:var(--t3)}.lo-ex-billsum b{font-size:15px}
.lo-ex-billbar .lo-check{margin-left:auto}
.lo-ex-doc{border:0;cursor:pointer;font:inherit;font-size:11.5px;font-weight:600}

.lo-ex-drawer{width:min(620px,100vw)}
.lo-ex-scope{display:flex;flex-direction:column;gap:4px}.lo-ex-scope span{font-size:12.5px;padding-left:12px;border-left:2px solid var(--color-accent)}
.lo-ex-lines{border:1px solid var(--border);border-radius:8px;overflow:hidden}
.lo-ex-line{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;border-top:1px solid var(--s3)}.lo-ex-line:first-child{border-top:0}
.lo-ex-line>div{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-width:0}.lo-ex-line>div .lo-dl-sub{flex-basis:100%}
.lo-ex-line.total{font-size:14px;border-top:1px solid var(--border)}
.lo-ex-tag{font-size:10.5px;padding:1px 6px;border-radius:4px;background:var(--s3);color:var(--t2)}.lo-ex-tag.dark{background:var(--color-ink);color:var(--color-accent)}
.lo-ex-qt{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.lo-ex-qt>div,.lo-ex-qt>label{display:flex;flex-direction:column;gap:2px;padding:9px 11px;border-radius:8px;border:1px solid var(--border)}.lo-ex-qt span{font-size:11px;color:var(--t3)}.lo-ex-qt b{font-size:14px}
.lo-ex-log{display:flex;flex-direction:column}.lo-ex-log>div{display:flex;gap:10px;font-size:12px;padding:5px 0;border-top:1px solid var(--s3)}.lo-ex-log>div>span:nth-child(2){flex:1}
.lo-ex-impcols{display:flex;flex-wrap:wrap;gap:6px}
.lo-ex-impcol{font-size:11.5px;padding:2px 8px;border-radius:4px;background:var(--s2);color:var(--t3)}.lo-ex-impcol.on{background:#f0fdf4;color:var(--t1)}
.lo-ex-impres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.lo-ex-impres>div{padding:10px 12px;border:1px solid var(--border);border-radius:8px;font-size:12.5px}.lo-ex-impres b{font-size:18px;display:block}
@media (max-width:860px){.lo-ex-prog{grid-template-columns:repeat(2,minmax(0,1fr))}.lo-ex-whogrid{grid-template-columns:22px 26px 128px 66px 48px 150px}}
.lo-ex-setbar select.lo-in{width:auto;max-width:260px}
.lo-ex-jfrow{display:grid;grid-template-columns:20px 140px minmax(0,1fr) 140px 140px 160px 28px;gap:8px;align-items:center}
@media (max-width:860px){.lo-ex-jfrow{grid-template-columns:20px 1fr 28px}.lo-ex-jfrow>input,.lo-ex-jfrow>select:last-of-type{grid-column:2 / span 1}}

/* ---- Elite · Exhibition Timeline ---- */
.lo-tl-wrap{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.lo-tl-warn{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 14px;border-radius:8px;border:1px solid var(--s3);background:var(--s2);font-size:12.5px}
.lo-tl-warn b{font-size:11px;padding:2px 8px;border-radius:999px;white-space:nowrap}
.lo-tl-warn.bad{background:#fff5f5;border-color:#f1c4c4}.lo-tl-warn.bad b{background:#fee2e2;color:#b91c1c}
.lo-tl-warn.pending b{background:var(--color-accent-100);color:var(--color-accent-800)}
.lo-tl-legend{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--t2)}
.lo-tl-legend>span{display:flex;align-items:center;gap:5px}.lo-tl-note{margin-left:auto}
.lo-tl-key{display:inline-block;width:14px;height:10px;border-radius:3px;border:1px solid var(--t1)}
.lo-tl-key.done{background:var(--t1)}.lo-tl-key.doing{background:var(--color-accent)}.lo-tl-key.plan{background:#fff}.lo-tl-key.late{background:#fee2e2;border-color:#b91c1c}
.lo-tl-key.show{background:var(--color-accent-100);border-color:var(--color-accent-300)}.lo-tl-key.close{background:#fff;border:2px solid #b91c1c}
.lo-tl-scroll{border:1px solid var(--border);border-radius:10px;overflow:auto}
.lo-tl{border-collapse:separate;border-spacing:0;font-size:11px}
.lo-tl th,.lo-tl td{border-bottom:1px solid var(--s3);padding:0}
.lo-tl thead th{position:sticky;top:0;z-index:2;background:var(--s2);height:38px;font-weight:400}
.lo-tl thead th.lo-tl-d{width:44px;min-width:44px;text-align:center;border-left:1px solid var(--s3)}
.lo-tl thead th.lo-tl-d span{display:block;font-size:10px;color:var(--t3)}.lo-tl thead th.lo-tl-d b{font-size:11.5px;font-weight:500}
.lo-tl-who{position:sticky;left:0;z-index:3;background:#fff;min-width:260px;max-width:260px;text-align:left;border-right:1px solid var(--border-hi)}
.lo-tl thead .lo-tl-who{z-index:4;background:var(--s2);padding:0 12px;font-size:11px;font-weight:600;color:var(--t2)}
.lo-tl-who button{display:flex;flex-direction:column;gap:1px;width:100%;min-height:46px;padding:6px 12px;border:0;background:none;text-align:left;cursor:pointer;font:inherit;color:var(--t1)}
.lo-tl-who button:hover{background:var(--s2)}.lo-tl-who b{font-size:12.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lo-tl-phase,.lo-tl-sub{font-size:11px;color:var(--t3)}
.lo-tl td.lo-tl-d{position:relative;height:46px;border-left:1px solid var(--s3)}
.lo-tl .lo-tl-d.we{background:#fafaf9}.lo-tl .lo-tl-d.show{background:var(--color-accent-100)}
.lo-tl thead .lo-tl-d.today{background:var(--color-accent)}.lo-tl td.lo-tl-d.today{box-shadow:inset 2px 0 0 var(--color-accent)}
.lo-tl .lo-tl-d.close{box-shadow:inset -2px 0 0 #b91c1c}
.lo-tl td.bar::before{content:"";position:absolute;left:0;right:0;top:9px;bottom:9px;border-top:1.5px solid var(--t1);border-bottom:1.5px solid var(--t1)}
.lo-tl td.bar.first::before,.lo-tl td.bar.one::before{left:3px;border-left:1.5px solid var(--t1);border-radius:6px 0 0 6px}
.lo-tl td.bar.last::before,.lo-tl td.bar.one::before{right:3px;border-right:1.5px solid var(--t1);border-radius:0 6px 6px 0}
.lo-tl td.bar.one::before{border-radius:6px}
.lo-tl td.bar.plan::before{background:#fff}.lo-tl td.bar.doing::before{background:var(--color-accent)}.lo-tl td.bar.done::before{background:var(--t1)}
.lo-tl td.bar.late::before{background:#fee2e2;border-color:#b91c1c}
.lo-tl td.bar>span{position:absolute;left:9px;top:50%;transform:translateY(-50%);z-index:1;font-size:11px;font-weight:600;white-space:nowrap;pointer-events:none}
.lo-tl td.bar.done>span{color:var(--color-accent)}.lo-tl td.bar.late>span{color:#b91c1c}
.lo-tl td.bar.mid::before,.lo-tl td.bar.last::before{left:-1px}

/* ---- Elite · หน้างาน (tablet) ---- */
.lo-ef-net{height:40px;padding:0 14px;border-radius:999px;border:1px solid #4a4a47;background:#1f1f1e;color:#fff;font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.lo-ef-net.pending{background:var(--color-accent);border-color:var(--color-accent);color:var(--t1)}.lo-ef-net.off{background:#b91c1c;border-color:#b91c1c}
.lo-ef .pane-hdr .lo-ef-net{align-self:center}
.lo-ef-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:10px;margin-top:12px}
.lo-ef-card{display:flex;flex-direction:column;gap:4px;padding:16px;border:1px solid var(--border);border-radius:12px;background:#fff;color:var(--t1);text-decoration:none;min-height:88px}
.lo-ef-card:hover{border-color:var(--t1)}.lo-ef-card b{font-size:15px}.lo-ef-card span{font-size:12.5px;color:var(--t2)}.lo-ef-card em{font-style:normal;font-size:12px;font-weight:600;color:var(--color-accent-800)}
.lo-ef-card.done{opacity:.6}
.lo-ef-layout{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start}
.lo-ef-tablet{width:834px;max-width:100%;border:12px solid var(--color-ink);border-radius:28px;overflow:hidden;background:#fff;box-shadow:0 20px 50px rgba(0,0,0,.18);display:flex;flex-direction:column;min-height:860px}
.lo-ef-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 18px;background:var(--color-ink);color:#fff}
.lo-ef-top>div{display:flex;flex-direction:column;flex:1;min-width:200px}.lo-ef-top b{font-size:17px}.lo-ef-top span{font-size:12px;color:#bdbdb8}
.lo-ef-eye{font-size:11px!important;letter-spacing:.1em;color:var(--color-accent)!important}
.lo-ef-stages{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-bottom:1px solid var(--border)}
.lo-ef-stage{height:64px;border:0;border-bottom:4px solid transparent;background:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font:inherit;color:var(--t1)}
.lo-ef-stage span{font-size:12px;color:var(--t3)}.lo-ef-stage b{font-size:14.5px;font-weight:400}
.lo-ef-stage.ok{border-bottom-color:var(--color-accent)}.lo-ef-stage.on{background:var(--color-accent-100);border-bottom-color:var(--t1)}.lo-ef-stage.on b{font-weight:600}
.lo-ef-body{flex:1;padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.lo-ef-ro{padding:10px 14px;border-radius:10px;border:1px dashed var(--color-neutral-400);font-size:13.5px}
.lo-ef-checks{display:flex;flex-direction:column;gap:8px}
.lo-ef-check{display:flex;align-items:center;gap:14px;min-height:64px;padding:10px 16px;border-radius:12px;border:1px solid var(--border-hi);background:#fff;cursor:pointer;text-align:left;font:inherit;color:var(--t1)}
.lo-ef-check i{width:34px;height:34px;flex:none;border-radius:8px;border:2px solid var(--t1);background:#fff;color:var(--color-accent);font-size:20px;line-height:30px;text-align:center;font-style:normal;font-weight:600}
.lo-ef-check span{flex:1;font-size:16px;font-weight:500}
.lo-ef-check em,.lo-ef-photo em{font-style:normal;font-size:11px;padding:2px 8px;border-radius:999px;background:var(--color-accent-100);color:var(--color-accent-800);border:1px solid var(--color-accent-300);white-space:nowrap}
.lo-ef-check.on{border:2px solid var(--t1);background:var(--color-accent-100)}.lo-ef-check.on i{background:var(--t1)}
.lo-ef-check:disabled{cursor:default}
.lo-ef-sec{font-size:14px;font-weight:600;margin-top:4px}
.lo-ef-photos{display:flex;gap:8px;flex-wrap:wrap}
.lo-ef-photo{position:relative;width:104px;height:104px;border-radius:10px;overflow:hidden;border:1px solid var(--border)}.lo-ef-photo img{width:100%;height:100%;object-fit:cover;display:block}
.lo-ef-photo em{position:absolute;left:4px;bottom:4px}
.lo-ef-shot{position:relative;width:104px;height:104px;border-radius:10px;border:2px dashed var(--color-neutral-400);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;font-size:13px;color:var(--t2);overflow:hidden}
.lo-ef-shot span{font-size:24px;line-height:1}.lo-ef-shot input{position:absolute;inset:0;opacity:0;cursor:pointer}
.lo-ef-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.lo-ef-row>input{flex:1;min-width:0}.lo-ef-row>.lo-muted{flex:1}
.lo-ef-big{height:52px!important;font-size:15px!important;border-radius:10px!important}
.lo-ef-row select.lo-ef-big{width:170px}
.lo-ef-btn{height:52px;padding:0 18px;border-radius:10px;border:1px solid var(--t1);background:#fff;font:inherit;font-size:15px;font-weight:600;cursor:pointer;white-space:nowrap}.lo-ef-btn.ghost{height:44px;font-weight:400;border-color:var(--color-neutral-400)}
.lo-ef-line{display:flex;gap:10px;align-items:center;padding:8px 12px;border-radius:8px;background:var(--s2);font-size:13.5px}.lo-ef-line>span:nth-child(3){flex:1}
.lo-ef-sync{font-style:normal;font-size:11px;color:#15803d;white-space:nowrap}.lo-ef-sync.pending{color:var(--color-accent-800)}
.lo-ef-hand{display:flex;flex-direction:column;gap:8px}
.lo-ef-sig{width:100%;height:200px;border-radius:12px;border:2px solid var(--color-neutral-400);background:#fff;touch-action:none;cursor:crosshair}
.lo-ef-foot{position:sticky;bottom:0;padding:12px 18px 18px;border-top:1px solid var(--border);background:#fff;display:flex;gap:10px;align-items:center}
.lo-ef-foot>span{flex:1;font-size:13.5px;color:var(--t2)}
.lo-ef-primary{height:60px;min-width:220px;padding:0 24px;border-radius:12px;border:2px solid var(--t1);background:#fff;font:inherit;font-size:17px;font-weight:600;cursor:pointer;opacity:.5}
.lo-ef-primary.ready{background:var(--color-accent);opacity:1}
.lo-ef-side{flex:1 1 240px;min-width:0;display:flex;flex-direction:column;gap:8px}
.lo-ef-booth{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:8px;border:1px solid var(--border)}.lo-ef-booth span{font-size:12px;font-weight:600}.lo-ef-booth small{font-size:11.5px;color:var(--t3)}
.lo-ex-reqs{border:1px solid var(--border);border-radius:10px;background:#fff;margin:0 0 14px;overflow:hidden}
.lo-ex-req{display:flex;align-items:center;gap:12px;padding:9px 16px;border-top:1px solid var(--border)}
.lo-ex-req>div{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;flex:1;min-width:0}.lo-ex-req>div b{font-size:13px}.lo-ex-req>div span{font-size:13px}
.lo-ex-req>div small{flex-basis:100%;font-size:11.5px;color:var(--t3)}.lo-ex-req.done{opacity:.6}.lo-ex-req.on{background:var(--color-accent-100)}
.lo-wtag--exh,.lo-wtag--freq{background:var(--color-accent-100);color:var(--color-accent-800)}
/* A value taken from another document: shown, not editable */
.lo-in--ro,.lo-in:disabled{background:var(--s2);color:var(--t2);cursor:not-allowed}
.lo-chiprow .lo-chipbtn:disabled{cursor:not-allowed;opacity:.55}.lo-chiprow .lo-chipbtn.on:disabled{opacity:1}
/* My Work: the four groups as tabs */
.lo-wtabs{margin:14px 0 12px}
.lo-wtab i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--color-neutral-400)}
.lo-wtab--today i{background:var(--color-accent)}.lo-wtab--wait i{background:var(--color-neutral-500)}.lo-wtab--over i{background:#b91c1c}.lo-wtab--done i{background:#15803d}
.lo-lcount--bad{background:#b91c1c;color:#fff}.lo-ltab.on .lo-lcount--bad{background:#b91c1c;color:#fff}
.lo-wtab-note{display:block;padding:10px 16px;font-size:12px;color:var(--t3);border-bottom:1px solid var(--s3)}

/* New Opportunity · Project: one card per scope */
.lo-scopes{display:flex;flex-direction:column;gap:10px}
.lo-scopes-hd{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.lo-scopes-hd small{font-size:12px;color:var(--t3)}
.lo-scopecard{display:flex;flex-direction:column;gap:12px;padding:14px 16px;border:1px solid var(--border-hi);border-radius:10px;background:#fff}
.lo-scopecard-hd{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-bottom:10px;border-bottom:1px solid var(--s3)}
.lo-scopecard-hd b{font-size:14px;background:var(--color-accent-100);color:var(--color-accent-800);padding:2px 10px;border-radius:999px}
.lo-scopecard-hd .lo-muted{flex:1;min-width:0;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lo-scope-del{color:#b91c1c}
.lo-scopecard .lo-chiprow{margin-top:2px}
.lo-scopecard .lo-chipbtn{height:34px}
.lo-scope-add{height:44px;border:1.5px dashed var(--border-hi);border-radius:10px;background:var(--s2);font:inherit;font-size:13.5px;font-weight:600;color:var(--t1);cursor:pointer}
.lo-scope-add:hover{border-color:var(--color-accent-600);background:var(--color-accent-100)}
@media(max-width:700px){.lo-scopecard .lo-grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* New Opportunity: each part of the form is a numbered white card on a gray body */
.lo-modal--form{width:min(980px,calc(100vw - 32px))}
.lo-modal--form .lo-modal-body{background:var(--s2);padding:16px 20px;gap:14px;counter-reset:fsec}
.lo-fsec{display:flex;flex-direction:column;gap:12px;padding:16px 18px 18px;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,.04);counter-increment:fsec}
.lo-fsec-hd{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:-2px 0 2px;padding-bottom:12px;border-bottom:1px solid var(--s3)}
.lo-fsec-hd::before{content:counter(fsec);display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--color-accent-100);color:var(--color-accent-800);font-family:var(--font-mono);font-size:12px;font-weight:700;flex:none}
.lo-fsec-hd b{font-size:14.5px;font-weight:600;color:var(--t1)}
.lo-fsec-hd small{font-size:12px;color:var(--t3)}
.lo-modal--form .lo-scopes{gap:12px}
.lo-modal--form .lo-scopecard{background:var(--s2);border-color:var(--border)}
.lo-modal--form .lo-scopecard .lo-in:not(.lo-in--ro){background:#fff}
.lo-modal--form .lo-scope-add{background:#fff}
@media(max-width:700px){.lo-modal--form .lo-modal-body{padding:12px}.lo-fsec{padding:14px}}

/* New Opportunity: what to open after saving, one card per option */
.lo-nextnote{font-size:12.5px;color:var(--t3);margin-top:-4px}
.lo-nextopts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.lo-nextopt{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:#fff;cursor:pointer;transition:border-color .12s,background .12s}
.lo-nextopt:hover{border-color:var(--border-hi);background:var(--s2)}
.lo-nextopt:has(input:checked){border-color:var(--color-accent-600);background:var(--color-accent-100)}
.lo-nextopt input{width:18px;height:18px;margin:1px 0 0;flex:none;accent-color:var(--color-accent-600);cursor:pointer}
.lo-nextopt span{display:flex;flex-direction:column;gap:2px;min-width:0}
.lo-nextopt b{font-size:13.5px;font-weight:600;color:var(--t1);line-height:1.35}
.lo-nextopt small{font-size:12px;color:var(--t3);line-height:1.4}
@media(max-width:700px){.lo-nextopts{grid-template-columns:1fr}}

/* New Opportunity: departments as tabs on the left, their service types as a checklist on the right */
.lo-svcpick{display:grid;grid-template-columns:190px minmax(0,1fr);border:1px solid var(--border);border-radius:10px;overflow:hidden;background:#fff}
.lo-svctabs{display:flex;flex-direction:column;background:var(--s2);border-right:1px solid var(--border);padding:6px}
.lo-svctab{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:40px;padding:0 12px;border:0;border-radius:8px;background:none;font:inherit;font-size:13.5px;color:var(--t2);text-align:left;cursor:pointer}
.lo-svctab:hover{background:#fff;color:var(--t1)}
.lo-svctab.on{background:#fff;color:var(--t1);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.lo-svctab b{min-width:22px;height:20px;padding:0 6px;border-radius:10px;background:var(--color-accent-600);color:#1d1d1d;font-size:11.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.lo-svcpane{display:flex;flex-direction:column;gap:10px;padding:12px 14px 14px;min-width:0}
.lo-svcpane-hd{display:flex;align-items:baseline;gap:10px}
.lo-svcpane-hd b{font-size:14px;font-weight:600}
.lo-svcpane-hd small{flex:1;font-size:12px;color:var(--t3)}
.lo-svcpane-hd .lo-linkbtn{margin:0;font-size:12.5px}
.lo-svcgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.lo-svcopt{display:flex;align-items:flex-start;gap:10px;min-height:48px;padding:9px 12px;border:1px solid var(--border);border-radius:8px;background:#fff;cursor:pointer;transition:border-color .12s,background .12s}
.lo-svcopt:hover{border-color:var(--border-hi);background:var(--s2)}
.lo-svcopt.on{border-color:var(--color-accent-600);background:var(--color-accent-100)}
.lo-svcopt input{width:17px;height:17px;margin:1px 0 0;flex:none;accent-color:var(--color-accent-600);cursor:pointer}
.lo-svcopt span{display:flex;flex-direction:column;gap:1px;min-width:0}
.lo-svcopt b{font-size:13px;font-weight:500;color:var(--t1);line-height:1.35}
.lo-svcopt small{font-size:11.5px;color:var(--t3);line-height:1.35}
.lo-svcpicked{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:10px 12px;border-radius:8px;background:var(--s2)}
.lo-svcpicked-lbl{font-size:12px;color:var(--t3)}
.lo-svcpicked-g{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.lo-svcpicked-g>b{font-size:12.5px;font-weight:600}
.lo-svcpicked-g>i{font-style:normal;font-size:11px;padding:1px 7px;border-radius:999px;background:var(--color-accent-100);color:var(--color-accent-800)}
.lo-svctag{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 6px 0 10px;border:1px solid var(--border-hi);border-radius:13px;background:#fff;font:inherit;font-size:12px;color:var(--t1);cursor:pointer}
.lo-svctag span{color:var(--t3);font-size:14px;line-height:1}
.lo-svctag:hover{border-color:#b91c1c}.lo-svctag:hover span{color:#b91c1c}
@media(max-width:700px){.lo-svcpick{grid-template-columns:1fr}.lo-svctabs{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--border)}.lo-svctab{flex:none}}

/* New Estimation: Service / Resource tabs over the lines, and the resource picker */
.lo-esttabs{display:flex;align-items:flex-end;gap:4px;border-bottom:1px solid var(--border)}
.lo-esttab{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:none;font:inherit;font-size:13.5px;color:var(--t2);cursor:pointer}
.lo-esttab b{min-width:22px;height:20px;padding:0 6px;border-radius:10px;background:var(--s3);color:var(--t2);font-size:11.5px;font-weight:600;display:inline-flex;align-items:center;justify-content:center}
.lo-esttab:hover{color:var(--t1)}
.lo-esttab.on{color:var(--t1);font-weight:600;border-bottom-color:var(--color-accent-600)}
.lo-esttab.on b{background:var(--color-accent-100);color:var(--color-accent-800)}
.lo-esttabs-add{margin:0 0 6px auto}
.lo-modal-bg--top{z-index:40}
.lo-modal--top{z-index:41}
.lo-resgrp{border:1px solid var(--border);border-radius:10px;overflow:hidden;flex:none}
.lo-resgrp-hd{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:10px 14px;background:var(--s2);border-bottom:1px solid var(--border)}
.lo-resgrp-hd b{font-size:14px;font-weight:600}
.lo-resgrp-hd small{font-size:12px;color:var(--t3)}
.lo-restbl{width:100%;border-collapse:collapse;font-size:13px}
.lo-restbl th{text-align:left;padding:7px 14px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);font-weight:600;border-bottom:1px solid var(--s3)}
.lo-restbl td{padding:9px 14px;border-bottom:1px solid var(--s3)}
.lo-restbl tr:last-child td{border-bottom:0}
.lo-restbl td.r{text-align:right;white-space:nowrap}
.lo-resrow{cursor:pointer}
.lo-resrow:hover td{background:var(--color-accent-100)}
.lo-resrow.added{cursor:default}.lo-resrow.added:hover td{background:none}
.lo-resadd{font-weight:600;color:var(--color-accent-800)}
.lo-restbl{table-layout:fixed}
.lo-restbl th:nth-child(1){width:34%}.lo-restbl th:nth-child(3){width:14%}.lo-restbl th:nth-child(4){width:18%}

/* Quotation versions: the row's dropdown in the list, the drawer's, and the note over an earlier one */
.lo-dl-ver{display:block;margin:4px 0 2px;height:26px;max-width:150px;padding:0 24px 0 8px;border:1px solid var(--border-hi);border-radius:6px;background:#fff;font:inherit;font-size:12px;color:var(--t1);cursor:pointer}
.lo-versel{height:30px;margin-left:6px;padding:0 26px 0 10px;border:1px solid var(--border-hi);border-radius:8px;background:#fff;font:inherit;font-size:14px;font-weight:600;color:var(--t1);vertical-align:middle;cursor:pointer}
.lo-vertag{font-weight:600;margin-left:2px}
.lo-histnote{margin:0 22px;padding:10px 14px;border-radius:8px;background:var(--color-accent-100);color:var(--color-accent-800);font-size:13px}