/* Order Tracker: the demo's cards (reference/demo.html lines 595-671), which mirror the live tool */
.ocont{display:flex;flex-direction:column;gap:8px;max-width:1000px}
.orow{display:flex;align-items:center;gap:8px}
.ocard{background:var(--white);border:1px solid var(--edge);border-radius:12px;overflow:hidden;box-shadow:0 1px 2px rgba(31,45,75,.06)}
.ocard.expanded{box-shadow:0 2px 10px rgba(31,45,75,.1)}
.ocard.osel{border:2px solid #6366F1}
.ohead{padding:11px 14px;display:flex;align-items:center;gap:10px;cursor:pointer}
.ohead:hover{background:var(--hover)}
.ochev{font-size:18px;color:var(--muted);transition:transform .2s;line-height:1}
.ochev.open{transform:rotate(90deg)}
.omain{display:flex;align-items:center;gap:8px;flex:1;min-width:0;flex-wrap:wrap}
.oid{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;font-weight:700;color:var(--muted);background:none;border:1px solid transparent;width:104px;padding:2px 5px;border-radius:5px}
.oid:focus{background:var(--hover);color:var(--ink)}
.ocust{font-size:14px;font-weight:700;color:var(--ink);background:none;border:1px solid transparent;width:auto;padding:2px 6px;border-radius:6px}
.ocust:hover,.ocust:focus{background:var(--hover);border-color:var(--edge)}
.ometa{font-size:11px;color:var(--muted);width:100%;margin-top:-2px}
.obadge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;white-space:nowrap}
.bdot{width:7px;height:7px;border-radius:50%;display:inline-block;flex:0 0 auto}
.onotes{padding:4px 14px;background:rgba(255,251,235,.9);border-top:1px solid var(--grid)}

.onotes textarea{width:100%;border:none;background:transparent;font-size:12px;color:#92400E;resize:none;min-height:0;padding:4px 0;border-radius:0}
.onotes textarea:focus{box-shadow:none;background:transparent}
.obody{border-top:1px solid var(--grid)}
.oselall{padding:6px 14px;border-bottom:1px solid var(--grid);display:flex;align-items:center;gap:8px}
.oselall label{font-size:10px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.irow{padding:9px 14px 4px;display:flex;align-items:center;gap:10px}
.irow.selected{background:rgba(99,102,241,.08)}
.ithumb{width:64px;height:64px;border-radius:8px;background:rgba(95,108,125,.1);display:flex;align-items:center;justify-content:center;flex:0 0 auto;overflow:hidden;cursor:pointer}
.ithumb img,.ithumb .swatch.it{width:100%;height:100%;object-fit:cover;border-radius:0;border:0}
.iinfo{flex:1;min-width:0}
.ibrand{font-size:10px;font-weight:400;color:#6366F1;text-transform:uppercase;letter-spacing:.04em}
.iname{font-size:13px;font-weight:400}
.idesc{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.icost,.iunits{font-size:13px;font-weight:400;text-align:right;min-width:60px;padding:2px 6px;border-radius:6px;cursor:pointer;white-space:nowrap}
/* item rows read in regular weight (Saul, Oct 20 2026, a change from the demo); the order header stays bold */
.irow b,.irow .istatus,.irow .itick{font-weight:400}
.icost:hover,.iunits:hover{background:var(--hover)}
.iunits.bad b{color:#DC2626;font-weight:400}
.ilbl{font-size:10px;color:var(--muted);font-weight:400}
.iedit{width:84px;padding:3px 6px;border-radius:6px;border:1px solid #6366F1;background:rgba(99,102,241,.1);font-size:12px;text-align:right}
.isel{width:auto;max-width:130px;padding:4px 6px;border-radius:6px;font-size:10.5px;background:var(--white)}
.istatus{width:auto;padding:4px 6px;border-radius:6px;font-size:11px;font-weight:700}
.exof{white-space:nowrap}
.exlink{background:none;border:0;padding:0;font:inherit;color:#1b6fae;text-decoration:underline;cursor:pointer}
.exno{display:inline-flex;align-items:center;gap:2px}
.exno input{width:96px;padding:3px 6px;font:inherit;font-weight:700;border-radius:6px}
.exno input.bad{border-color:var(--bad);background:var(--bad-soft)}
.exbad{font-size:11px;color:var(--bad);margin-top:3px;white-space:normal;max-width:320px}
.itick{padding:3px 8px;border-radius:6px;border:1px solid var(--edge);font-size:10px;font-weight:700;background:rgba(95,108,125,.1);color:var(--muted);white-space:nowrap;cursor:pointer;font-family:inherit;min-width:76px;text-align:center}
.itick.on{background:#D1FAE5;color:#065F46;border-color:#6EE7B7}
.itick:disabled{cursor:default;opacity:1}
.idel{background:none;border:none;color:var(--muted);font-size:18px;padding:2px 4px;line-height:1;opacity:.5}
.idel:hover{color:#EF4444;opacity:1}
.inotes{padding:0 14px 8px 88px}
.inotes textarea{width:100%;font-size:11px;color:var(--muted);border:none;border-bottom:1px solid transparent;border-radius:0;background:transparent;resize:none;min-height:0;padding:2px 0}
.inotes textarea:focus{box-shadow:none;border-bottom-color:#6366F1;background:transparent}
.oacts{padding:8px 14px;display:flex;justify-content:space-between;align-items:center;background:rgba(95,108,125,.06);gap:8px;flex-wrap:wrap}
.bg{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.btn.dashed{border:1px dashed var(--muted);background:transparent;color:var(--muted)}
.obulk{position:sticky;top:0;z-index:20;background:#1E293B;color:#F8FAFC;border-radius:12px;padding:8px 14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;box-shadow:0 2px 8px rgba(0,0,0,.18);max-width:1000px}
.obulk .bl{font-size:12px;font-weight:600}
.obulk .bb{padding:4px 10px;border-radius:6px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.08);color:#F8FAFC;font-size:10.5px;font-weight:600}
.obulk select{width:auto;padding:4px 8px;font-size:11px;background:#fff;color:#1E293B;border-radius:6px}
.obulk .bclr{margin-left:auto;background:none;border:none;color:#94A3B8;font-size:11px}
.odrop{border:2px dashed rgba(95,108,125,.5);border-radius:12px;padding:30px;text-align:center;cursor:pointer;background:var(--white)}
.odrop:hover{border-color:#6366F1;background:rgba(99,102,241,.06)}
.tabs{display:flex;gap:6px;margin-bottom:14px}
.tabb{padding:6px 14px;border-radius:7px;font-size:12px;font-weight:600;border:1px solid var(--edge);background:var(--white);color:var(--muted)}
.tabb.on{border-color:#6366F1;background:rgba(99,102,241,.12);color:#4338CA}
.sitem{display:flex;align-items:center;gap:8px;padding:6px 8px;border-bottom:1px solid var(--grid)}
.sitem input{flex:1;background:transparent;border:1px solid transparent;padding:3px 6px;font-size:13px}
.sitem input:focus{background:var(--hover)}
.sitem input.spref,.orow input.spref{flex:0 0 84px;width:84px;text-transform:uppercase;font-weight:700}
.maps{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}
.maprow{display:flex;align-items:center;gap:8px}
.maplbl{width:96px;font-size:11.5px;font-weight:600;color:var(--muted);flex:0 0 auto}
.maprow select{padding:5px 8px;font-size:12px}
.maprow select.mapped{border-color:#86EFAC;background:rgba(240,253,244,.9)}
.imgpop{position:fixed;inset:0;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;z-index:2000;cursor:pointer}
.imgpop img{max-width:90vw;max-height:90vh;border-radius:12px}
.imgpop .imgx{position:fixed;top:20px;right:24px;color:#fff;font-size:32px;line-height:1;opacity:.8}

/* added for the port */
.ithumb.nophoto img{display:none}
.ithumb .ph{font-size:18px;opacity:.25}
.ithumb.none,.ithumb.busy{cursor:default}
.ithumb.up:hover{background:rgba(99,102,241,.14)}
.ithumb.up:hover .ph{opacity:.6}
.ithumb.busy .spin{width:20px;height:20px}
.imgpop .imgrep{position:fixed;bottom:28px;left:50%;transform:translateX(-50%)}
.iship{font-size:10.5px;color:#0EA5E9;font-weight:600;white-space:nowrap}
.iship.bad{color:#DC2626}
.ometa .warn{color:#DC2626;font-weight:700}
.ometa .warnf{color:#B45309;font-weight:700}
.ometa .arch{color:#6366F1}
.ometa .ship{color:#0EA5E9}
.ometa .shipbad{color:#DC2626;font-weight:700}
.ocont{max-width:1000px}
.evtbl td{height:auto}
.evtbl td .cv{white-space:normal}
/* header controls wrap as one group (see header() in views/orders.js) */
.otctl{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin-left:auto}
/* keep the tracker's own look on a read-only screen (the shell dims and clears every field there) */
#view.ro .ocust,#view.ro .oid{opacity:1}
#view.ro select[data-act=ot-sort]{background:var(--white)}
/* step 2: editing */
.iship.ed,.iship.add{cursor:pointer}
.iship.ed:hover{text-decoration:underline}
.iship.add{color:var(--muted);font-weight:500;opacity:.75}
.iedit.iship-edit{width:150px;text-align:left;padding:1px 6px;font-size:11px}
.merr{color:var(--bad);font-size:12px;margin-top:10px}
.merr:empty{display:none}
.odrop.off{opacity:.55;cursor:default}
.odrop.off:hover{border-color:rgba(95,108,125,.5);background:var(--white)}
.sitem .sbtn{background:none;border:1px solid transparent;color:var(--muted);font-size:13px;padding:0 5px;border-radius:5px;line-height:1.4}
.sitem .sbtn:hover:not(:disabled){border-color:var(--edge);color:var(--ink)}
.sitem .sbtn:disabled{opacity:.25}
.obulk .bb:disabled{opacity:.45}
/* the tracker is one centred column, max 1000px, next to the menu (Saul's call; the demo is left-aligned) */
.otpage{position:relative;width:100%;max-width:1000px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.otpage .ocont,.otpage .obulk{max-width:none}
/* step 3: imports */
.dragover{outline:2px dashed #6366F1;outline-offset:-2px;background:#EEF2FF !important}
.impok{background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.35);color:#065F46;border-radius:9px;padding:8px 12px;font-size:12.5px;margin-bottom:12px}
.impbad{background:var(--bad-soft);border:1px solid rgba(180,69,47,.35);color:var(--bad);border-radius:9px;padding:8px 12px;font-size:12.5px;margin:8px 0}
.impbad ul,.impnotes ul{margin:4px 0 0 18px}
.impnotes{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.35);color:#92400E;border-radius:9px;padding:8px 12px;font-size:12px;margin-top:10px}
.impcust{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.impcust input,.impcust select{flex:1;min-width:180px}
.okmark{color:#10B981;font-weight:700}
.imppre{max-height:180px;border:1px solid var(--grid);border-radius:10px;margin-top:10px}
.impbar{height:6px;border-radius:3px;background:rgba(95,108,125,.15);overflow:hidden;margin:10px 0}
.impbar i{display:block;height:100%;background:#6366F1;transition:width .2s}

/* + Order → Add manually / + Add Items: typed items with a photo each */
.omodal.xwide{max-width:1060px;container:noed / inline-size}
.noform{grid-template-columns:2fr 1fr 1fr;margin-bottom:12px}
.nohead,.norow{display:grid;grid-template-columns:44px minmax(90px,1.1fr) minmax(80px,1fr) minmax(110px,1.8fr) 72px 76px 72px minmax(90px,1fr) 104px 24px;gap:6px;align-items:center}
.nohead{font-size:9.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding:0 0 4px}
.norow{padding:6px 0;border-top:1px solid var(--grid)}
.norow input,.norow select{width:100%;min-width:0;padding:6px 8px;font-size:12.5px}
.norow input.bad,.norow select.bad,.noform input.bad{border-color:var(--bad);background:var(--bad-soft)}
.norow .ithumb{width:44px;height:44px;position:relative;border-radius:7px;overflow:visible}
.norow .ithumb img{border-radius:7px}
.norow .ithumb:focus-visible{outline:2px solid #6366F1;outline-offset:2px}
.norow .nounphoto{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;border:1px solid var(--edge);background:#fff;font-size:12px;line-height:14px;padding:0;color:var(--muted)}
.norow .nomsg{grid-column:2/-1;font-size:11.5px;line-height:1.35}
.norow .nomsg:empty{display:none}
.norow .nomsg .err{color:var(--bad)}
.norow .nomsg .warn{color:#B45309}
.noact{position:sticky;bottom:-22px;background:var(--glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);padding:10px 0 4px;margin-bottom:-4px}
@container noed (max-width:819.98px){
  .nohead{display:none}
  .norow{grid-template-columns:44px 1fr 1fr 24px}
  .norow .ithumb{grid-column:1;grid-row:1/3;align-self:start}
  .norow>[data-nof="style"]{grid-column:2/4;grid-row:1}
  .norow .idel{grid-column:4;grid-row:1}
  .norow>[data-nof="brand"]{grid-column:2;grid-row:2}
  .norow>[data-nof="factory"]{grid-column:3;grid-row:2}
  .norow>[data-nof="desc"]{grid-column:2/4;grid-row:3}
  .norow>[data-nof="mi"]{grid-column:2;grid-row:4}
  .norow>[data-nof="units"]{grid-column:3;grid-row:4}
  .norow>[data-nof="cost"]{grid-column:2;grid-row:5}
  .norow>[data-nof="ship"]{grid-column:3;grid-row:5}
  .norow .nomsg{grid-column:2/4;grid-row:6}
}
@container noed (max-width:560px){
  .noform{grid-template-columns:1fr}
}