:root{ --bg:#e7e9ec; --surface:#ffffff; --surface-2:#f2f4f6; --ink:#171a1f; --text:#1c2026; --text-2:#5b636e; --border:#ccd1d8; --border-2:#e0e3e8; --primary:#2360a0; --primary-press:#1a4c82; --go:#2e7d4f; --go-press:#24623e; --pending-bg:#f0e8d4; --pending-tx:#735320; --done-bg:#dae6dd; --done-tx:#2b573a; --danger:#b1272d; --danger-bg:#f0dadc; --danger-tx:#85222a; --paint-bg:#dbe5f0; --paint-tx:#274d77; --edge-bg:#efe7d4; --edge-tx:#6b5325; --asm-bg:#e3e1ec; --asm-tx:#443d66; --ship-bg:#dae6e7; --ship-tx:#285a5e; --r-ctl:8px; --r-card:12px; --r-pill:999px; --shadow:0 1px 2px rgba(8,18,32,.05); --mono:ui-monospace,SFMono-Regular,"Cascadia Mono",Consolas,"Liberation Mono",monospace; } /* DARK THEME — overrides the tokens above; applied via html[data-theme="dark"] (set in ). Shared suite-wide: the theme is stored in localStorage 'oc_theme' on the :8000 origin, so the choice made in Office/Field carries into Shop Floor automatically. */ html[data-theme="dark"]{ --bg:#0e1626; --surface:#172339; --surface-2:#1f2e49; --ink:#0b1220; /* sidebar/top chrome stays dark in both modes */ --text:#e6edf7; --text-2:#9db0cb; --border:#2b3a55; --border-2:#243349; --primary:#3b82f6; --primary-press:#2563eb; --go:#34b36a; --go-press:#2a9258; --pending-bg:#3a2e0c; --pending-tx:#fcd34d; --done-bg:#103a22; --done-tx:#86efac; --danger:#f0635f; --danger-bg:#3a1414; --danger-tx:#fca5a5; --paint-bg:#15233f; --paint-tx:#93c5fd; --edge-bg:#332a12; --edge-tx:#e7c878; --asm-bg:#251f40; --asm-tx:#c4b5fd; --ship-bg:#0c3236; --ship-tx:#7fd9d2; --shadow:0 1px 2px rgba(0,0,0,.3); } /* accent themes (match Office's palette) — set via html[data-accent="..."] */ html[data-accent="blue"]{--primary:#2563eb;--primary-press:#1d4ed8;} html[data-accent="violet"]{--primary:#7c3aed;--primary-press:#6d28d9;} html[data-accent="green"]{--primary:#16a34a;--primary-press:#15803d;} html[data-accent="rose"]{--primary:#e11d48;--primary-press:#be123c;} html[data-accent="amber"]{--primary:#d97706;--primary-press:#b45309;} *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;} html{ -webkit-text-size-adjust:100%; } body{margin:0;font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text); font-size:15px;line-height:1.5;} .num{font-variant-numeric:tabular-nums;font-family:var(--mono);} a{color:var(--primary);text-decoration:none;} /* legacy top bar (sign-in / solo) */ .topbar{background:var(--ink);color:#fff;padding:12px 18px;display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:20;} .topbar .brand{font-size:18px;font-weight:700;letter-spacing:.2px;} .topbar .sub{font-weight:400;font-size:13px;color:#9aa2ad;} .topbar .right{margin-left:auto;display:flex;align-items:center;gap:12px;} .topbar a{color:#c2c8d0;font-size:14px;} .topbar .who{font-size:13px;color:#9aa2ad;text-align:right;} .topbar .who b{display:block;color:#fff;font-size:15px;} .topbar .back{background:#30343b;color:#fff;border:0;border-radius:var(--r-ctl);padding:8px 14px;font-size:18px;line-height:1;} .topbar .sw{background:#30343b;color:#fff;border:0;border-radius:var(--r-ctl);padding:8px 12px;font-size:13px;} main{max-width:1080px;margin:0 auto;padding:18px;} .wrap-wide{max-width:1140px;} /* cards */ .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:16px 18px;margin-bottom:14px;box-shadow:var(--shadow);} h1{font-size:20px;font-weight:700;margin:0 0 4px;letter-spacing:-.2px;} h2{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text-2);margin:0 0 12px;} h3{font-size:12px;color:var(--text-2);text-transform:uppercase;letter-spacing:.5px;margin:0 0 8px;} .muted{color:var(--text-2);} /* buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:var(--r-ctl); background:var(--primary);color:#fff;font-size:15px;font-weight:600;padding:11px 18px;min-height:44px;cursor:pointer; transition:background .12s ease;text-decoration:none;} .btn:hover{background:var(--primary-press);} .btn:disabled{opacity:.45;cursor:default;} .btn-go,.btn-green{background:var(--go);} .btn-go:hover,.btn-green:hover{background:var(--go-press);} .btn-ghost{background:#fff;color:var(--text);border:1px solid var(--border);} .btn-ghost:hover{background:var(--surface-2);} .btn-lg{min-height:58px;font-size:17px;font-weight:700;padding:0 24px;flex:1;} /* status tags */ .pill,.badge{display:inline-block;font-weight:700;text-transform:uppercase;letter-spacing:.5px;border:1px solid rgba(0,0,0,.08);border-radius:var(--r-pill);} .pill{font-size:10px;padding:2px 7px;} .badge{font-size:11px;padding:3px 8px;} .pill.pending,.pill.warn{background:var(--pending-bg);color:var(--pending-tx);} .pill.done,.pill.ok{background:var(--done-bg);color:var(--done-tx);} .pill.danger{background:var(--danger-bg);color:var(--danger-tx);} .b-paint{background:var(--paint-bg);color:var(--paint-tx);} .b-edgebanding{background:var(--edge-bg);color:var(--edge-tx);} .b-assembly{background:var(--asm-bg);color:var(--asm-tx);} .b-shipping{background:var(--ship-bg);color:var(--ship-tx);} .b-done{background:var(--done-bg);color:var(--done-tx);} .b-damaged{background:var(--danger-bg);color:var(--danger-tx);} .b-uncut{background:var(--surface-2);color:var(--text-2);} /* stats */ .stats{display:flex;flex-wrap:wrap;gap:10px;} .stat{background:var(--surface-2);border:1px solid var(--border-2);border-radius:var(--r-card);padding:11px 15px;min-width:118px;} .stat b{display:block;font-size:24px;font-weight:700;font-family:var(--mono);} .stat span{font-size:11px;color:var(--text-2);text-transform:uppercase;letter-spacing:.3px;} .stat b.bad{color:var(--danger);} /* tables */ /* wrap operator tables so a wide table scrolls instead of pushing the action buttons off a phone */ .tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;} .tablewrap table{min-width:520px;} /* glove-safe queue actions: a big dominant Complete, clearly separated from the destructive Damaged */ .qact{text-align:right;white-space:nowrap;} .qact .qbtn-go{min-height:50px;padding:0 22px;font-size:17px;font-weight:800;} .qact .qbtn-dmg{min-height:50px;padding:0 16px;margin-left:18px;font-size:15px;opacity:.9;} @media (max-width:680px){ .qtablewrap table{min-width:0;} /* the queue fits the phone — no sideways scroll to reach the buttons */ .qact{white-space:normal;} .qact .qbtn-go,.qact .qbtn-dmg{display:block;width:100%;margin:0;} .qact .qbtn-dmg{margin-top:12px;} /* a real gap so a glove can't hit Damaged right after Complete */ } table{width:100%;border-collapse:collapse;font-size:14px;} th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--border-2);} th{font-size:11px;color:var(--text-2);text-transform:uppercase;letter-spacing:.4px;background:var(--surface-2);font-weight:700;} /* CNC: job thumbnails — shared base (also used by /paint and the material drill-down cards) */ .jobs-hint{font-size:12.5px;margin:-2px 0 12px;} .jobcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;} .jobcard{display:flex;flex-direction:column;justify-content:space-between;min-height:128px; border:1px solid var(--border);border-radius:var(--r-card);padding:16px;background:var(--surface); text-decoration:none;color:var(--text);box-shadow:inset 4px 0 0 var(--primary);} .jobcard:hover{border-color:var(--text-2);} .jobcard.allcut{box-shadow:inset 4px 0 0 var(--go);} .jc-name{font-size:17px;font-weight:700;line-height:1.25;} .jc-meta{font-size:13px;color:var(--text-2);margin-top:6px;} .jc-foot{margin-top:14px;} .jcbar{height:6px;background:var(--surface-2);border:1px solid var(--border-2);border-radius:3px;overflow:hidden;} .jcbar-fill{height:100%;background:var(--go);} .jc-stat{display:flex;justify-content:space-between;align-items:center;margin-top:7px;font-size:12px;color:var(--text-2);} /* CNC station job list — richer cards (.jcx) with a progress ring, material strip and drag-to-reorder. Everything is scoped to .jcx / #jobcards so /paint and the material cards keep the plain base look. .jcx lives on the card element itself so its styles travel when the drag JS lifts it into . */ #jobcards{grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:14px;align-items:start;} #jobcards .jc-placeholder{border:1.5px dashed var(--border);border-radius:var(--r-card);background:var(--surface-2);} .jobcard.jcx{position:relative;justify-content:flex-start;min-height:0;padding:0;overflow:hidden; transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;} .jobcard.jcx:hover{border-color:var(--text-2);transform:translateY(-2px); box-shadow:inset 4px 0 0 var(--primary), 0 7px 18px rgba(20,26,33,.14);} .jobcard.jcx.allcut:hover{box-shadow:inset 4px 0 0 var(--go), 0 7px 18px rgba(20,26,33,.14);} .jobcard.jcx.dragging{border-color:var(--primary);cursor:grabbing;transition:none; box-shadow:inset 4px 0 0 var(--primary), 0 16px 34px rgba(20,26,33,.30);} /* top grab rail — the drag handle (the rest of the card stays a normal tap-to-open link) */ .jcx .jc-grip{display:flex;align-items:center;justify-content:center;width:100%;height:22px;padding:0;border:0; background:transparent;cursor:grab;touch-action:none;-webkit-tap-highlight-color:transparent;} .jcx .jc-grip .bar{width:36px;height:5px;border-radius:3px;background:var(--border);transition:background .14s ease;} .jobcard.jcx:hover .jc-grip .bar,.jcx .jc-grip:hover .bar{background:var(--text-2);} .jcx .jc-grip:active{cursor:grabbing;} .jcx .jc-hit{display:flex;flex-direction:column;gap:11px;padding:4px 16px 15px;min-height:118px; text-decoration:none;color:var(--text);} .jcx .jc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;} .jcx .jc-headtext{min-width:0;} .jcx .jc-name{font-size:17px;font-weight:700;line-height:1.22;letter-spacing:-.2px;margin:0; overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;} .jcx .jc-meta{font-size:12.5px;color:var(--text-2);margin-top:4px;} /* progress ring */ .jcx .jc-ring{flex:0 0 auto;} .jcx .jc-ring .ring-bg{stroke:var(--surface-2);} .jcx .jc-ring .ring-fg{stroke:var(--primary);transition:stroke-dasharray .55s ease;} .jobcard.jcx.allcut .jc-ring .ring-fg{stroke:var(--go);} .jcx .jc-ring .ring-txt{font-size:9px;font-weight:700;fill:var(--text-2);} .jobcard.jcx.allcut .jc-ring .ring-txt{fill:var(--go-press);} /* material strip */ .jcx .jc-mats{display:flex;flex-wrap:wrap;gap:5px;} .jcx .jc-mat{display:inline-flex;align-items:center;gap:5px;min-width:0;max-width:100%;font-size:11px;color:var(--text-2); background:var(--surface-2);border:1px solid var(--border-2);border-radius:var(--r-pill);padding:2px 7px 2px 6px;} .jcx .jc-mat i{width:8px;height:8px;border-radius:50%;background:var(--mc);flex:0 0 auto; box-shadow:inset 0 0 0 1px rgba(0,0,0,.22);} .jcx .jc-mat .mn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:118px;} .jcx .jc-mat b{color:var(--text);font-weight:700;flex:0 0 auto;} .jcx .jc-mat.more{color:var(--text-2);font-weight:700;} .jcx .jc-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px; padding-top:10px;border-top:1px solid var(--border-2);} .jcx .jc-cut{font-size:12.5px;color:var(--text-2);font-weight:600;} /* paint department */ .stagecounts{display:flex;gap:8px;margin-top:10px;} .stagecount{flex:1;text-align:center;background:var(--surface-2);border:1px solid var(--border-2);border-radius:var(--r-ctl);padding:6px 4px;font-size:10px;text-transform:uppercase;letter-spacing:.3px;color:var(--text-2);} .stagecount b{display:block;font-size:20px;font-family:var(--mono);color:var(--text);} .stagecount.zero{opacity:.5;} a.stagecount{color:var(--text-2);text-decoration:none;} a.stagecount:hover{border-color:var(--text-2);} .chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--border-2);border-radius:var(--r-pill);padding:3px 10px;font-size:12px;margin:3px 4px 0 0;} .chipdot{width:11px;height:11px;border-radius:50%;background:var(--paint-tx);display:inline-block;flex:0 0 auto;} .stagebadge{display:inline-block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:3px 10px;border-radius:var(--r-pill);} .stagebadge.st-prep{background:#e7e2d6;color:#6b5325;} .stagebadge.st-primer{background:#dde3ea;color:#3a4a5c;} .stagebadge.st-paint{background:var(--paint-bg);color:var(--paint-tx);} /* operator: sheet rows */ .runhdr{font-size:12px;font-weight:700;color:var(--text-2);text-transform:uppercase;letter-spacing:.5px;margin:18px 2px 8px;} .sheet{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:14px 16px;margin-bottom:8px; display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;} .sheet:hover{border-color:var(--text-2);} .sheet .nm{font-size:16px;font-weight:600;} .sheet .meta{font-size:13px;color:var(--text-2);} /* operator: sheet thumbnail cards (a nest preview per sheet, like the job cards) */ .sheetcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-bottom:6px;} .sheetcard{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--r-card); background:var(--surface);text-decoration:none;color:var(--text);overflow:hidden;box-shadow:inset 4px 0 0 var(--primary);} .sheetcard:hover{border-color:var(--text-2);} .sheetcard.allcut{box-shadow:inset 4px 0 0 var(--go);} .sc-thumb{background:#fff;border-bottom:1px solid var(--border);padding:8px;height:150px; display:flex;align-items:center;justify-content:center;} .sc-thumb svg{max-height:134px;max-width:100%;} .sc-body{padding:10px 14px 12px;} .sc-name{font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:8px;} .sc-meta{font-size:12px;color:var(--text-2);margin-top:3px;} .nestbox{background:#fff;border:1px solid var(--border);border-radius:var(--r-card);padding:8px;} .err{background:var(--danger-bg);color:var(--danger-tx);border:1px solid rgba(0,0,0,.07);padding:11px 14px;border-radius:var(--r-card);margin-bottom:14px;} ul.warns{font-size:13px;color:var(--pending-tx);margin:0;padding-left:18px;max-height:240px;overflow:auto;} /* partial-import warning — a Mozaik export that left some materials un-nested (parts can't import) */ .warnbar{background:var(--pending-bg);color:var(--pending-tx);border:1px solid var(--pending-tx); border-radius:var(--r-ctl);padding:11px 13px;margin:12px 0;font-size:13.5px;line-height:1.45;} .warnbar b{font-weight:700;} .warnbar-mats{margin-top:5px;font-family:var(--mono);font-size:12px;opacity:.95;} .warnbar-fix{margin-top:5px;opacity:.9;} .warnbar-sm{margin:10px 0 4px;padding:9px 12px;font-size:12.5px;} /* sign-in gate */ .namegrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px;} .namebtn{min-height:64px;font-size:19px;font-weight:600;border:1px solid var(--border);background:#fff;border-radius:var(--r-card);cursor:pointer;} .namebtn:hover{border-color:var(--text-2);background:var(--surface-2);} .pindots{display:flex;gap:14px;justify-content:center;margin:20px 0;} .pindots span{width:16px;height:16px;border-radius:50%;border:2px solid #9aa2ad;} .pindots span.on{background:var(--ink);border-color:var(--ink);} .pinpad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:300px;margin:0 auto;} .pinkey{min-height:62px;font-size:23px;font-weight:600;border:1px solid var(--border);background:#fff;border-radius:var(--r-card);cursor:pointer;} .pinkey:hover{background:var(--surface-2);} /* scan station */ .segm{display:flex;gap:6px;} .seg{flex:1;min-height:52px;font-size:16px;font-weight:600;border:1px solid var(--border);background:#fff;border-radius:var(--r-ctl);cursor:pointer;color:var(--text);} .seg.on{background:var(--ink);color:#fff;border-color:var(--ink);} .scaninput{width:100%;min-height:58px;font-size:21px;font-family:var(--mono);padding:0 14px;border:1px solid var(--primary);border-radius:var(--r-ctl);outline:none;} .scaninput:focus{box-shadow:inset 0 0 0 1px var(--primary);} .rcard{margin-top:14px;border-radius:var(--r-card);padding:16px;border:1px solid var(--border);} .rcard.ready{border:1px solid var(--go);box-shadow:inset 3px 0 0 var(--go);} .rcard.wrong{box-shadow:inset 4px 0 0 var(--pending-tx);background:#fbf7ec;} .rcard.bad{box-shadow:inset 4px 0 0 var(--danger);background:#fbeeef;} .rcard .rh{font-size:19px;font-weight:700;margin:0 0 8px;} .rrow{font-size:14px;margin:3px 0;} .rrow b{display:inline-block;min-width:96px;color:var(--text-2);font-weight:600;} .flash{padding:15px;border-radius:var(--r-card);font-size:18px;font-weight:700;margin-top:12px;} .flash.ok{background:var(--done-bg);color:var(--done-tx);} .flash.bad{background:var(--danger-bg);color:var(--danger-tx);} /* app shell: side panel + main */ .layout{display:flex;min-height:100dvh;} .side{flex:0 0 226px;width:226px;background:var(--ink);color:#c2c8d0;display:flex;flex-direction:column;padding:14px 10px;} .side-brand{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 8px 10px;} .side-logo{width:78px;height:78px;object-fit:contain;} .side-title{font-size:13px;font-weight:700;color:#fff;letter-spacing:.5px;text-transform:uppercase;} .side-who{margin:14px 8px 4px;font-size:14px;color:#fff;font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap;} .rolechip{font-size:10px;font-weight:700;background:#2a2e36;color:#8fb6e0;padding:2px 8px;border-radius:var(--r-pill);text-transform:uppercase;letter-spacing:.5px;} .side-nav{display:flex;flex-direction:column;gap:1px;margin-top:6px;flex:1;} .navgrp{font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:#6b727c;margin:16px 8px 4px;} .navlink{display:block;padding:11px 12px;border-radius:var(--r-ctl);color:#c2c8d0;font-size:14px;font-weight:500;text-decoration:none;} .navlink:hover{background:#23262d;color:#fff;} .navlink.on{background:#23262d;color:#fff;box-shadow:inset 3px 0 0 var(--primary);font-weight:600;} .navlink.sub{padding-left:26px;font-size:13px;color:#9aa2ad;} .side-out{margin-top:12px;padding:11px;border-radius:var(--r-ctl);background:#23262d;color:#e08c8c;text-align:center;font-weight:600;text-decoration:none;} .side-out:hover{background:#2c3038;} .main-wrap{flex:1;min-width:0;display:flex;flex-direction:column;} .mtop{display:none;align-items:center;gap:12px;background:var(--ink);color:#fff;padding:10px 14px;position:sticky;top:0;z-index:20;} .mtop.solo{display:flex;} .mtop .brand{font-size:16px;font-weight:700;display:inline-flex;align-items:center;gap:7px;} .mtop .sub{font-size:13px;color:#9aa2ad;} .mtop-logo{height:22px;width:22px;object-fit:contain;flex:0 0 auto;} .hamb{background:#30343b;color:#fff;border:0;border-radius:var(--r-ctl);padding:6px 8px;display:flex;cursor:pointer;} .scrim{display:none;} @media (max-width: 860px){ .side{position:fixed;top:0;left:0;bottom:0;z-index:50;transform:translateX(-100%);transition:transform .2s ease;box-shadow:2px 0 18px rgba(0,0,0,.35);overflow-y:auto;} .side.open{transform:translateX(0);} .mtop{display:flex;} /* tap-to-close backdrop behind the open drawer (the drawer hides the hamburger when open) */ .scrim.open{display:block;position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.45);} } /* paint queue color groups */ .colorhdr td{background:var(--ink);color:#fff;font-weight:700;font-size:13px;text-transform:uppercase; letter-spacing:.5px;padding:8px 10px;border-bottom:0;} .colorchip{display:inline-block;width:12px;height:12px;border-radius:2px;background:#7da3cc; margin-right:8px;vertical-align:-1px;border:1px solid rgba(255,255,255,.5);} /* queue + activity tabs */ .qtabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;} .qtab{padding:8px 14px;border-radius:var(--r-ctl);background:#fff;border:1px solid var(--border);font-weight:600;font-size:13px;text-decoration:none;color:var(--text);} .qtab:hover{border-color:var(--text-2);} .qtab.on{background:var(--ink);color:#fff;border-color:var(--ink);} .qtab .n{font-variant-numeric:tabular-nums;font-family:var(--mono);opacity:.7;margin-left:5px;} .miniqr{width:78px;height:78px;} .inp{padding:9px 11px;border:1px solid var(--border);border-radius:var(--r-ctl);font-size:16px;background:#fff;color:var(--text);} .inp:focus{outline:none;border-color:var(--primary);} /* dashboard */ .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;} .kpi{border:1px solid var(--border);border-radius:var(--r-card);padding:14px 16px;background:var(--surface);} .kpi b{display:block;font-size:30px;font-weight:700;font-family:var(--mono);line-height:1.05;} .kpi span{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--text-2);} .kpi.alert{border-color:var(--danger);} .kpi.alert b{color:var(--danger);} .kpi.go b{color:var(--go);} .pipe{display:flex;gap:8px;flex-wrap:wrap;} .pipecard{flex:1;min-width:88px;border-radius:var(--r-card);padding:12px 8px;text-align:center;text-decoration:none; color:var(--text);border:1px solid var(--border);background:var(--surface);} .pipecard:hover{border-color:var(--text-2);} .pipecard b{display:block;font-size:24px;font-weight:700;font-family:var(--mono);line-height:1;} .pipecard span{font-size:10px;text-transform:uppercase;letter-spacing:.3px;color:var(--text-2);} /* segmented per-job progress bar */ .jobrow{margin:14px 0;} .jobrow .jh{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px;} .jobrow .jh b{font-size:14px;} .jobrow .jh .pct{font-size:13px;color:var(--text-2);font-family:var(--mono);} .pbar{display:flex;height:16px;border-radius:2px;overflow:hidden;border:1px solid var(--border);background:var(--surface-2);} .pseg{height:100%;} .s-uncut{background:#c3c8cf;} .s-paint{background:#7da3cc;} .s-edgebanding{background:#cbb384;} .s-assembly{background:#9b90c2;} .s-shipping{background:#79b0b2;} .s-done{background:#5a9d72;} .s-damaged{background:#c47a7e;} .leg{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px;font-size:11px;color:var(--text-2);text-transform:uppercase;letter-spacing:.3px;} .leg i{display:inline-block;width:11px;height:11px;border-radius:2px;margin-right:5px;vertical-align:-1px;} .flashbar{background:var(--done-bg);color:var(--done-tx);padding:11px 18px;font-weight:600;text-align:center;border-bottom:1px solid rgba(0,0,0,.06);} .flashbar.err{background:var(--danger-bg);color:var(--danger-tx);} /* universal undo bar */ .undobar{display:flex;align-items:center;gap:12px;background:#fff7e0;border-bottom:1px solid #e7d6a6;padding:8px 16px;} .undobar[hidden]{display:none;} .undobar .ul{flex:1;min-width:0;font-size:13px;color:#6b5a22;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .undobar .ub{min-height:36px;padding:6px 16px;font-size:14px;flex:0 0 auto;} /* cabinet detail: part tiles + modal */ .parttiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;} .ptile{border:1px solid var(--border);border-radius:var(--r-card);padding:12px;text-align:center;background:#fff;display:flex;flex-direction:column;align-items:center;} .pbox{margin:0 auto 8px;background:var(--paint-bg);border:1px solid #7da3cc;border-radius:2px;min-width:20px;min-height:14px;max-width:100%;} .pbox.b-shipping,.pbox.b-done{background:var(--done-bg);border-color:#5a9d72;} .pbox.b-damaged{background:var(--danger-bg);border-color:#c47a7e;} .pname{font-weight:600;font-size:13px;line-height:1.2;} .psize{font-size:12px;color:var(--text-2);margin:2px 0 6px;} .ptile.hl{border:2px solid var(--ink);background:var(--surface-2);} .pbox.hlbox{background:var(--ink) !important;border-color:var(--ink) !important;} .ptile.hl .pname{color:var(--ink);} .partdraw{max-width:300px;margin:8px auto 14px;} .modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:100;padding:16px;} .modalbox{background:#fff;border-radius:var(--r-card);padding:20px;max-width:420px;width:100%;} /* shared layout for .sheet list rows: a left cluster (thumb + text) and a right cluster (count + pill) */ .sheet-main{display:flex;align-items:center;gap:14px;min-width:0;} .sheet-aside{text-align:right;flex:0 0 auto;} .sheet-count{font-size:20px;font-weight:700;font-family:var(--mono);line-height:1.1;} .sheet-sub{font-size:11px;color:var(--text-2);margin-top:-2px;} /* cabinet thumbnails (assembly board) + front elevation (cabinet detail) */ .cabthumb{flex:0 0 auto;width:62px;height:62px;display:flex;align-items:center;justify-content:center; background:#fff;border:1px solid var(--border-2);border-radius:var(--r-card);padding:3px;} .cabthumb svg{max-width:100%;max-height:100%;} .cabfront{margin:14px 0 4px;display:flex;flex-direction:column;align-items:center;} .cabfront > svg{width:160px !important;height:auto !important;max-height:220px;} .cabfront-key{font-size:12px;color:var(--text-2);margin-top:8px;text-align:center;} .cabspec{margin-top:12px;display:flex;flex-direction:column;gap:6px;} .cabspec .spec{display:flex;gap:10px;font-size:13.5px;} .cabspec .speclbl{flex:0 0 70px;color:var(--text-2);font-weight:700;text-transform:uppercase;font-size:11px;letter-spacing:.4px;padding-top:2px;} /* cabinet assembly tree — sub-assemblies (case, drawers, doors) with roll-up readiness */ .atree{list-style:none;margin:6px 0 0;padding:0;} .atree-row{display:flex;align-items:center;gap:12px;padding:11px 4px;border-top:1px solid var(--border-2);} .atree-row:first-child{border-top:0;} .atree-row.sub{padding-left:26px;} .atree-box{flex:0 0 auto;width:22px;height:22px;border:2px solid var(--border);border-radius:6px;background:var(--surface);} .atree-row.on .atree-box{background:var(--go);border-color:var(--go);position:relative;} .atree-row.on .atree-box::after{content:"";position:absolute;left:6px;top:2px;width:6px;height:11px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg);} .atree-name{flex:1;font-weight:600;} .atree-row.on .atree-name{color:var(--text-2);} .atree-stat{flex:0 0 auto;font-size:13px;color:var(--text-2);} .atree-row.on .atree-stat{color:var(--go);font-weight:700;} /* assembly board: 'Inserts & accessories' divider separating non-cabinets from real cabinets */ .acc-divider{margin:14px 2px 8px;padding-top:10px;border-top:1px dashed var(--border);font-size:12px; font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-2);} .acc-divider .num{text-transform:none;letter-spacing:0;font-weight:400;} /* assembly board: per-job section — a normal-case heading + the standard .jcbar progress bar */ .jobhdr{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 8px;} .jobhdr h2{margin:0;font-size:16px;font-weight:700;text-transform:none;letter-spacing:-.2px;color:var(--text);} .jobgroup .jcbar{margin:0 0 14px;} /* disperse / designated-area chips (CNC sheet): the station badges, sized up for the saw operator */ .disperse{display:flex;gap:10px;flex-wrap:wrap;} .disperse .badge{font-size:15px;padding:8px 14px;} .disperse .badge b{margin-left:6px;} /* floor job board (kanban) — matches the Office board: equal-width columns that all fit, colored headers, cards with a stage-colored left accent + id chip + progress bar + status foot. */ .board{display:flex;gap:9px;overflow-x:auto;padding:2px 2px 16px;align-items:flex-start;} .bcol{flex:1 1 0;min-width:158px;background:var(--surface-2);border:1px solid var(--border-2);border-radius:14px; display:flex;flex-direction:column;} .bcol.over{outline:2px dashed var(--primary);outline-offset:-2px;background:#eef4fb;} .bcol-head{display:flex;align-items:center;gap:8px;padding:11px 14px;border-radius:14px 14px 0 0;font-weight:800; font-size:13px;text-transform:uppercase;letter-spacing:.4px;border-bottom:3px solid currentColor;} .bcol-head .cnt{margin-left:auto;background:rgba(255,255,255,.7);color:#0f172a;font-size:12px;font-weight:800; min-width:22px;text-align:center;padding:1px 8px;border-radius:999px;} .bcol-body{padding:10px;display:flex;flex-direction:column;gap:10px;min-height:60px;} .bcol-empty{color:var(--text-2);font-size:12.5px;text-align:center;padding:18px 8px;border:1px dashed var(--border);border-radius:10px;} /* stage tokens — header bg/text (.st-*) + card left-accent (.ac-*), each stage a distinct hue */ .st-cutting{background:#e2e8f0;color:#334155;} .ac-cutting{--ac:#64748b;} .st-building{background:#e2e8f0;color:#334155;} .ac-building{--ac:#64748b;} .st-finishing{background:#fde68a;color:#854d0e;} .ac-finishing{--ac:#f59e0b;} .st-assembly{background:#ddd6fe;color:#5b21b6;} .ac-assembly{--ac:#8b5cf6;} .st-shipping{background:#99f6e4;color:#115e59;} .ac-shipping{--ac:#14b8a6;} .st-delivered{background:#bbf7d0;color:#14532d;} .ac-delivered{--ac:#22c55e;} .bcard{position:relative;display:block;background:var(--surface);border:1px solid var(--border); border-left:5px solid var(--ac,#94a3b8);border-radius:11px;padding:11px 13px;text-decoration:none;color:var(--text); box-shadow:0 1px 2px rgba(8,18,32,.05);transition:box-shadow .12s,transform .12s;cursor:pointer;} .bcard:hover{box-shadow:0 8px 20px -10px rgba(8,18,32,.28);} .bcard.adv{cursor:grab;} .bcard.dragging{opacity:.45;cursor:grabbing;} .bcard-top{display:flex;align-items:center;gap:10px;min-width:0;} .bcard-thumb{flex:0 0 auto;width:44px;height:44px;display:flex;align-items:center;justify-content:center; background:#fff;border:1px solid var(--border-2);border-radius:7px;padding:2px;} .bcard-thumb svg{max-width:100%;max-height:100%;} .bcard-name{font-size:15px;font-weight:800;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;} .bcard-oc{display:inline-block;font-size:11px;font-weight:700;color:#0e7490;background:#ecfeff;border:1px solid #cffafe; border-radius:6px;padding:0 6px;margin-top:6px;} .bcard-bar{height:6px;border-radius:999px;background:var(--border);overflow:hidden;margin-top:9px;} .bcard-bar i{display:block;height:100%;border-radius:999px;background:var(--ac,#2360a0);} .bcard-foot{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--text-2);margin-top:8px;} .bcard-foot .dmg{color:var(--danger-tx);font-weight:700;} .board-hint{font-size:12.5px;margin:2px 0 0;} /* CNC station as a board: 2 colored columns (cabinet=blue, door=green) with color-tabbed cards */ .cnc-board .bcol{flex:1 1 360px;min-width:300px;} .cnc-board .cnc-stack{grid-template-columns:1fr;gap:12px;padding:10px;} /* single-column stack, keeps reorder */ .cnc-head-cab{background:#bfdbfe;color:#1e3a8a;} .cnc-head-door{background:#bbf7d0;color:#14532d;} html[data-theme="dark"] .cnc-head-cab{background:#1e3a8a;color:#bfdbfe;} html[data-theme="dark"] .cnc-head-door{background:#14532d;color:#bbf7d0;} .col-cab .jobcard.jcx{box-shadow:inset 5px 0 0 #2563eb;} .col-cab .jobcard.jcx:hover{box-shadow:inset 5px 0 0 #2563eb,0 7px 18px rgba(20,26,33,.14);} .col-cab .jobcard.jcx .jc-ring .ring-fg{stroke:#2563eb;} .col-door .jobcard.jcx{box-shadow:inset 5px 0 0 #16a34a;} .col-door .jobcard.jcx:hover{box-shadow:inset 5px 0 0 #16a34a,0 7px 18px rgba(20,26,33,.14);} .col-door .jobcard.jcx .jc-ring .ring-fg{stroke:#16a34a;} @media (max-width:760px){ .cnc-board{flex-direction:column;} .cnc-board .bcol{min-width:0;} } /* run drill-down: a column per material (color-coded header), sheets stacked inside */ .mat-board .bcol{flex:1 1 220px;min-width:200px;} .mat-board .bcol-head{border-bottom:3px solid rgba(255,255,255,.45);} .matcolname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;} @media (max-width:760px){ .mat-board{flex-direction:column;} .mat-board .bcol{min-width:0;} } /* paint bench: a column per paint color (color-coded header), part cards stacked inside */ .paint-board .bcol{flex:1 1 260px;min-width:240px;} .paint-board .bcol-head{border-bottom:3px solid rgba(255,255,255,.45);} .bcol-head .hingebtn{flex:0 0 auto;color:#fff;text-decoration:none;font-size:15px;margin-left:2px;} .pcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:11px 12px;} .pcard-name{font-weight:600;font-size:14px;line-height:1.25;} .pcard-meta{font-size:12px;color:var(--text-2);margin-top:3px;} .pcard-act{display:flex;gap:8px;margin-top:9px;} .pcard-act .btn{flex:1;min-height:38px;font-size:13px;padding:6px 8px;} @media (max-width:760px){ .paint-board{flex-direction:column;} .paint-board .bcol{min-width:0;} } .cnc-head-tocut{background:#fde68a;color:#854d0e;} .cnc-head-done{background:#bbf7d0;color:#14532d;} html[data-theme="dark"] .cnc-head-tocut{background:#5c3a09;color:#fde68a;} html[data-theme="dark"] .cnc-head-done{background:#14532d;color:#bbf7d0;} .matcard .sc-name{display:flex;align-items:center;gap:7px;} .matdot{display:inline-block;flex:0 0 auto;width:12px;height:12px;border-radius:3px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.22);vertical-align:middle;} /* material chips on a run card */ .runmats{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0 2px;} .runmat{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--text-2); background:var(--surface-2);border:1px solid var(--border-2);border-radius:var(--r-pill);padding:2px 8px;} .runmat b{color:var(--text);} .runname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;} .runmixed{flex:0 0 auto;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px; color:var(--text-2);background:var(--surface-2);border:1px solid var(--border-2);border-radius:var(--r-pill);padding:1px 7px;} /* ============================ DARK-MODE COMPONENT FIXES ============================ Most of the app themes automatically through the tokens above. These cover the spots that hardcode light colours (form controls, board headers, chrome). */ html[data-theme="dark"] .btn-ghost, html[data-theme="dark"] .seg, html[data-theme="dark"] .qtab, html[data-theme="dark"] .inp, html[data-theme="dark"] .namebtn, html[data-theme="dark"] .pinkey, html[data-theme="dark"] .modalbox, html[data-theme="dark"] .stat, html[data-theme="dark"] .kpi, html[data-theme="dark"] .pipecard, html[data-theme="dark"] .jobcard, html[data-theme="dark"] .sheet, html[data-theme="dark"] .sheetcard, html[data-theme="dark"] .ptile, html[data-theme="dark"] .nestbox{background:var(--surface);color:var(--text);} html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea, html[data-theme="dark"] .scaninput{background:var(--surface);color:var(--text);border-color:var(--border);} html[data-theme="dark"] .rcard.wrong{background:#2a2410;} html[data-theme="dark"] .rcard.bad{background:#2a1416;} html[data-theme="dark"] .undobar{background:#2a2410;border-color:#4a3f1a;} html[data-theme="dark"] .undobar .ul{color:#e7c878;} /* board: dark stage headers (deep tint + light text) + the id chip + count badge */ html[data-theme="dark"] .st-cutting, html[data-theme="dark"] .st-building{background:#2c3a4f;color:#cbd5e1;} html[data-theme="dark"] .st-finishing{background:#5c3a09;color:#fde68a;} html[data-theme="dark"] .st-assembly{background:#3a2a6e;color:#ddd6fe;} html[data-theme="dark"] .st-shipping{background:#0c4f47;color:#99f6e4;} html[data-theme="dark"] .st-delivered{background:#14532d;color:#bbf7d0;} html[data-theme="dark"] .bcard-oc{background:#0c3a44;color:#67e8f9;border-color:#155e63;} html[data-theme="dark"] .bcol-head .cnt{background:rgba(255,255,255,.16);color:#e6edf7;} html[data-theme="dark"] .bcard-bar, html[data-theme="dark"] .jcbar{background:var(--surface-2);} /* theme settings control in the sidebar */ .themebox{margin:10px 8px 4px;} .themebox .tlbl{font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:#6b727c;margin-bottom:6px;} .themeseg{display:flex;gap:3px;background:#23262d;border-radius:8px;padding:3px;} .themeseg button{flex:1;border:0;background:transparent;color:#9aa2ad;font:inherit;font-size:12px;font-weight:600; padding:6px 4px;border-radius:6px;cursor:pointer;} .themeseg button.on{background:#3a3f48;color:#fff;} .accseg{display:flex;gap:6px;margin-top:8px;padding:0 1px;} .accseg button{width:20px;height:20px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;} .accseg button.on{border-color:#fff;}