/* JEM Warehouse Logistics Hub v2 — components: cards, badges, alerts, buttons, forms, stepper, tiles, checklist, photo center, gallery, drawer, modal, lightbox, toasts, typeahead, camera, item rows.
   Split verbatim from public/styles.css (V2-SPEC §2.3): rules are copied unchanged and in their
   original relative order, so the cascade (and the look) is identical to v1. Load order on every
   page: base.css -> shell.css -> components.css -> pages/<name>.css. */

    /* ---------- Cards / sections ---------- */
    .card { background:var(--surf); border:1px solid var(--line); border-radius:var(--r14); padding:16px; box-shadow:var(--shadow); }
    .card + .card { margin-top:14px; }
    .sec { margin-bottom:18px; }
    .sec-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:11px; }
    .sec-head h2 { font-size:16.5px; display:flex; align-items:center; gap:9px; }
    .sec-head h2 .ico { color:var(--jem2); font-size:19px; }
    .sec-head .link { background:transparent; color:var(--jem2); font-weight:800; font-size:13px; padding:8px 10px; display:inline-flex; align-items:center; gap:5px; }

    /* ---------- Badges ---------- */
    .badge { display:inline-flex; align-items:center; gap:6px; min-height:26px; border-radius:999px; padding:4px 11px; font-size:12px; font-weight:800; background:var(--surf3); color:var(--ink2); border:1px solid var(--line); }
    .badge .ico { font-size:14px; }
    .badge.accept,.badge.pos { background:var(--posSoft); color:#047857; border-color:#A7F3D0; }
    .badge.accept_with_notes,.badge.warn { background:var(--warnSoft); color:#B45309; border-color:#FDE68A; }
    .badge.route_to_rl,.badge.info { background:var(--blueSoft); color:#1D4ED8; border-color:#BFDBFE; }
    .badge.reject,.badge.neg { background:var(--negSoft); color:#B91C1C; border-color:#FECACA; }
    .badge.draft { background:var(--surf3); color:var(--ink3); }
    .badge.jem { background:var(--jemSoft); color:var(--jem2); border-color:#A7E8EF; }
    .tagrow { display:flex; flex-wrap:wrap; gap:6px; }
    .tag { font-size:11px; font-weight:800; padding:3px 9px; border-radius:999px; background:var(--surf3); color:var(--ink2); border:1px solid var(--line); }
    .tag.red { background:var(--negSoft); color:#B91C1C; border-color:#FECACA; }
    .tag.amber { background:var(--warnSoft); color:#B45309; border-color:#FDE68A; }
    .tag.blue { background:var(--blueSoft); color:#1D4ED8; border-color:#BFDBFE; }

    /* ---------- Alerts ---------- */
    .alert { display:flex; gap:10px; align-items:flex-start; border:1px solid var(--line); border-left:4px solid var(--ink3); background:var(--surf3); padding:11px 13px; border-radius:var(--r10); margin:10px 0; font-size:13px; }
    .alert .ico { font-size:18px; flex:0 0 auto; margin-top:1px; }
    .alert b { display:block; margin-bottom:1px; }
    .alert.critical { border-left-color:var(--neg); background:var(--negSoft); color:#7F1D1D; } .alert.critical .ico { color:var(--neg); }
    .alert.warning { border-left-color:var(--warn); background:var(--warnSoft); color:#78350F; } .alert.warning .ico { color:var(--warn); }
    .alert.info { border-left-color:var(--blue); background:var(--blueSoft); color:#1E3A8A; } .alert.info .ico { color:var(--blue); }
    .alert.success { border-left-color:var(--pos); background:var(--posSoft); color:#065F46; } .alert.success .ico { color:var(--pos); }
    .alert.netsuite { border-left-color:var(--jem2); background:var(--jemSoft); color:#0B5560; } .alert.netsuite .ico { color:var(--jem2); }

    /* ---------- Buttons ---------- */
    .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:0 16px; min-height:46px; border-radius:var(--r10); font-weight:800; font-size:14px; }
    .btn .ico { font-size:17px; }
    .btn.primary { background:linear-gradient(135deg,var(--jem),var(--jem2)); color:#fff; box-shadow:0 6px 16px rgba(var(--accent2-rgb),.28); }
    .btn.primary:hover:not(:disabled) { filter:brightness(1.04); }
    .btn.dark { background:var(--navy); color:#fff; }
    .btn.ghost { background:var(--surf); color:var(--navy); border:1.5px solid var(--line); }
    .btn.ghost:hover { border-color:var(--line2); }
    .btn.soft { background:var(--jemSoft); color:var(--jem2); }
    .btn.danger { background:var(--negSoft); color:var(--neg); }
    .btn.block { width:100%; }
    .btnrow { display:flex; gap:9px; flex-wrap:wrap; }

    .field { margin-bottom:13px; }
    .field label { display:block; margin-bottom:6px; }
    .req { color:var(--neg); }
    .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
    .subcard { border:1px solid var(--line); border-radius:var(--r10); padding:13px; background:var(--surf2); }
    .subcard + .subcard { margin-top:11px; }
    .subcard > .lbl { font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--ink3); display:flex; align-items:center; gap:7px; margin-bottom:10px; }
    .subcard > .lbl .ico { color:var(--jem2); font-size:15px; }

    /* ---------- Stepper ---------- */
    .stepper { display:flex; align-items:center; gap:0; margin:4px 0 2px; }
    .stepdot { flex:1 1 0; text-align:center; position:relative; }
    .stepdot .num { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; margin:0 auto; background:var(--surf3); color:var(--ink3); font-weight:800; font-size:13px; border:2px solid var(--line); position:relative; z-index:1; }
    .stepdot .lbl2 { font-size:11px; font-weight:800; color:var(--ink3); margin-top:5px; }
    .stepdot::before { content:""; position:absolute; top:15px; left:-50%; right:50%; height:2px; background:var(--line); }
    .stepdot:first-child::before { display:none; }
    .stepdot.done .num { background:var(--pos); color:#fff; border-color:var(--pos); }
    .stepdot.done::before { background:var(--pos); }
    .stepdot.active .num { background:var(--jem2); color:#fff; border-color:var(--jem2); box-shadow:0 0 0 4px var(--jemSoft); }
    .stepdot.active .lbl2 { color:var(--jem2); }
    .stepdot.active::before { background:var(--jem2); }

    /* selectable tiles */
    .tiles { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
    .tile { text-align:left; background:var(--surf); border:1.5px solid var(--line); border-radius:var(--r10); padding:13px; display:flex; align-items:center; gap:10px; font-weight:800; font-size:13.5px; color:var(--ink2); min-height:56px; }
    .tile .ico { font-size:19px; color:var(--ink3); }
    .tile:hover { border-color:var(--line2); }
    .tile.active { border-color:var(--jem2); background:var(--jemSoft); color:var(--navy); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18); }
    .tile.active .ico { color:var(--jem2); }

    /* ---------- Item summary card ---------- */
    .itemcard { border:1px solid var(--line); border-radius:var(--r10); padding:13px; background:linear-gradient(180deg,#fff,var(--surf2)); }
    .itemcard .top { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
    .itemcard .sku { font-size:17px; font-weight:900; color:var(--navy); }
    .itemcard .desc { font-size:13px; color:var(--ink2); margin-top:2px; }
    .itemcard .meta { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
    .chip-stat { font-size:11.5px; font-weight:800; color:var(--ink2); background:var(--surf3); border:1px solid var(--line); border-radius:8px; padding:5px 9px; }
    .chip-stat b { color:var(--navy); }

    /* ---------- Checklist ---------- */
    .checkcompletion { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
    .check-item { padding:12px 0; border-top:1px dashed var(--line); }
    .check-item:first-child { border-top:0; }
    .check-item > .q { display:block; font-weight:700; font-size:14px; margin-bottom:9px; color:var(--ink1); }
    .seg { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
    .seg button { background:var(--surf); color:var(--ink2); border:1.5px solid var(--line); font-size:13px; font-weight:800; min-height:42px; }
    .seg button:hover { border-color:var(--line2); }
    .seg button.active.pass { background:var(--posSoft); color:#047857; border-color:#6EE7B7; }
    .seg button.active.fail { background:var(--negSoft); color:#B91C1C; border-color:#FCA5A5; }
    .seg button.active.na { background:var(--surf3); color:var(--ink2); border-color:var(--line2); }
    .notewrap { margin-top:9px; }
    .notewrap input { background:#FFFDF5; border-color:#FDE68A; }

    /* ---------- Photo center ---------- */
    .chips { display:flex; flex-wrap:wrap; gap:7px; }
    .pchip { background:var(--surf); border:1.5px solid var(--line); border-radius:999px; padding:7px 13px; font-size:12.5px; font-weight:800; color:var(--ink2); min-height:38px; display:inline-flex; align-items:center; gap:6px; }
    .pchip:hover { border-color:var(--jem); }
    .pchip.active { background:var(--jem2); color:#fff; border-color:var(--jem2); }
    .photos { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
    .photo { border:1px solid var(--line); border-radius:var(--r10); overflow:hidden; background:#fff; box-shadow:var(--shadow); }
    .photo .thumb { position:relative; cursor:pointer; }
    .photo img { display:block; width:100%; aspect-ratio:1.25; object-fit:cover; background:var(--surf3); }
    .photo .pbadges { position:absolute; left:7px; top:7px; display:flex; gap:5px; flex-wrap:wrap; }
    .photo .pbadges .b { font-size:10px; font-weight:800; padding:3px 7px; border-radius:7px; background:rgba(15,28,46,.82); color:#fff; backdrop-filter:blur(4px); }
    .photo .pbadges .b.dmg { background:rgba(220,38,38,.92); }
    .photo .pbadges .b.ser { background:rgba(37,99,235,.92); }
    .photo .pbody { padding:10px; display:grid; gap:7px; }
    .photo .pbody input { min-height:38px; padding:8px 10px; font-size:13px; }
    .photo .evrow { display:flex; gap:6px; }
    .photo .evrow button { flex:1; min-height:36px; font-size:11.5px; background:var(--surf2); color:var(--ink2); border:1px solid var(--line); }
    .photo .evrow button.on.dmg { background:var(--negSoft); color:var(--neg); border-color:#FCA5A5; }
    .photo .evrow button.on.ser { background:var(--blueSoft); color:var(--blue); border-color:#BFDBFE; }
    .photo .pfoot { display:flex; gap:6px; align-items:center; }
    .photo .pfoot .ts { font-size:10.5px; color:var(--ink4); margin-right:auto; }
    .photo .pfoot button { min-height:34px; padding:0 10px; font-size:11.5px; }
    .refstrip { display:flex; gap:9px; overflow-x:auto; padding:4px 0 2px; }
    .refstrip .rphoto { flex:0 0 96px; border:1px solid var(--line); border-radius:9px; overflow:hidden; background:#fff; }
    .refstrip .rphoto img { width:100%; height:78px; object-fit:cover; background:var(--surf3); }
    .refstrip .rphoto div { padding:5px 6px; font-size:10px; color:var(--ink3); font-weight:700; }

    /* ---------- AI assistant ---------- */
    .ai-card { border:1px solid var(--line); border-radius:var(--r10); padding:13px; background:#FBFEFF; }
    .ai-card h4 { font-size:14px; color:var(--navy); margin-bottom:7px; }
    .confidence { height:9px; border-radius:999px; background:var(--surf3); overflow:hidden; margin:6px 0; }
    .confidence span { display:block; height:100%; background:linear-gradient(90deg,var(--warn),var(--jem),var(--pos)); }
    .ai-grid { display:grid; gap:9px; margin-top:10px; }
    .ai-grid > div { border:1px solid var(--line); border-radius:9px; padding:10px; background:#fff; }
    .ai-grid strong { font-size:12.5px; color:var(--navy); }
    .ai-grid p { margin-top:3px; }

    /* ---------- Review summary ---------- */
    .resultbanner { border-radius:var(--r14); padding:16px; display:flex; gap:13px; align-items:center; color:#fff; }
    .resultbanner .ri { width:48px; height:48px; border-radius:13px; background:rgba(255,255,255,.2); display:grid; place-items:center; font-size:26px; flex:0 0 auto; }
    .resultbanner h3 { font-size:18px; }
    .resultbanner p { font-size:12.5px; opacity:.92; margin-top:2px; }
    .summary-list { display:grid; gap:0; }
    .summary-list .li { display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); font-size:13.5px; }
    .summary-list .li:last-child { border-bottom:0; }
    .summary-list .li .k { color:var(--ink3); font-weight:700; }
    .summary-list .li .v { font-weight:800; text-align:right; color:var(--ink1); }
    .decision-options { display:grid; gap:8px; }
    .decision-options button { text-align:left; padding:13px; border:1.5px solid var(--line); background:var(--surf); color:var(--ink1); display:flex; align-items:center; gap:10px; font-weight:800; font-size:13.5px; }
    .decision-options button .ico { font-size:18px; color:var(--ink3); }
    .decision-options button.active { border-color:var(--jem2); background:var(--jemSoft); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18); }

    /* ---------- Sticky step bar ---------- */
    .stepbar { position:sticky; bottom:0; z-index:15; display:flex; gap:10px; background:linear-gradient(180deg,transparent,var(--surf2) 30%); padding:12px 0 4px; margin-top:16px; }
    .stepbar .btn { flex:1; }
    .stepbar .btn.primary { flex:2; }

    /* ---------- History / activity ---------- */
    .actrow { display:flex; align-items:center; gap:12px; padding:12px; border:1px solid var(--line); border-radius:var(--r10); background:#fff; margin-bottom:9px; box-shadow:var(--shadow); }
    .actrow:hover { border-color:var(--line2); }
    .actrow .ai2 { width:40px; height:40px; border-radius:11px; background:var(--surf3); display:grid; place-items:center; color:var(--jem2); font-size:18px; flex:0 0 auto; }
    .actrow .body { flex:1; min-width:0; }
    .actrow .body .t1 { font-weight:800; font-size:14px; color:var(--navy); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .actrow .body .t2 { font-size:12px; color:var(--ink3); margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .actrow .end { text-align:right; flex:0 0 auto; }
    .insp-card { display:block; border:1px solid var(--line); border-radius:var(--r14); padding:14px; background:#fff; box-shadow:var(--shadow); margin-bottom:11px; }
    .insp-card .ic-top { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
    .insp-card h3 { font-size:15px; color:var(--navy); }
    .insp-card .ic-meta { font-size:12.5px; color:var(--ink3); margin:5px 0 9px; }
    .filterbar { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:11px 0; }

    /* ---------- Search field ---------- */
    .searchbox { position:relative; }
    .searchbox .ico { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--ink4); font-size:19px; pointer-events:none; }
    .searchbox input { padding-left:44px; min-height:52px; font-size:15px; border-radius:var(--r14); }

    /* suggestions */
    .suggestions { position:relative; }
    .suggestions ul { position:absolute; z-index:30; left:0; right:0; top:calc(100% + 5px); margin:0; padding:6px; list-style:none; background:#fff; border:1px solid var(--line); border-radius:var(--r10); box-shadow:var(--shadow2); max-height:320px; overflow-y:auto; }
    .suggestions li + li { margin-top:3px; }
    .suggestions button { width:100%; text-align:left; background:#fff; border-radius:8px; padding:10px; color:var(--ink1); font-weight:700; }
    .suggestions button:hover { background:var(--surf2); }
    .suggestions .s2 { font-weight:600; font-size:12px; color:var(--ink3); display:block; margin-top:2px; }

    /* ---------- Typeahead dropdown (public/typeahead.js) ---------- */
    .ta-menu {
      position:absolute; left:0; right:0; top:calc(100% + 5px); z-index:35;
      background:var(--surf); border:1px solid var(--line); border-radius:var(--r10);
      box-shadow:var(--shadow2); max-height:320px; overflow-y:auto; overscroll-behavior:contain;
      padding:6px;
    }
    .ta-option {
      display:flex; align-items:center; gap:8px; min-height:44px; padding:8px 10px;
      border-radius:8px; cursor:pointer; font-size:13.5px; color:var(--ink1);
    }
    .ta-option + .ta-option { margin-top:2px; }
    .ta-option:hover { background:var(--surf2); }
    .ta-option.active { background:var(--jemSoft); }
    .ta-main { flex:1 1 auto; min-width:0; display:block; }
    .ta-main b { color:var(--navy); }
    .ta-sub { font-weight:600; font-size:12px; color:var(--ink3); }
    .ta-qty { flex:0 0 auto; font-size:11px; font-weight:800; color:var(--ink2); background:var(--surf3); border:1px solid var(--line); border-radius:8px; padding:3px 8px; }
    .ta-flag { flex:0 0 auto; font-size:11px; font-weight:800; color:#B91C1C; background:var(--negSoft); border:1px solid #FECACA; border-radius:8px; padding:3px 8px; }
    .ta-status { padding:14px 10px; text-align:center; font-size:13px; color:var(--ink3); min-height:44px; display:flex; align-items:center; justify-content:center; }
    .ta-status.ta-error { color:var(--neg); }
    .ta-menu mark { background:#FDE68A; color:var(--ink1); border-radius:3px; padding:0 1px; font-weight:800; }

    /* ---------- Empty states ---------- */
    .empty { text-align:center; padding:34px 18px; color:var(--ink3); }
    .empty .ei { width:60px; height:60px; border-radius:16px; background:var(--surf3); display:grid; place-items:center; margin:0 auto 13px; font-size:28px; color:var(--ink4); }
    .empty h3 { font-size:15px; color:var(--ink2); margin-bottom:5px; }
    .empty p { font-size:13px; max-width:360px; margin:0 auto 14px; }

    .gallery { display:grid; grid-template-columns:repeat(2,1fr); gap:11px; }
    .gphoto { border:1px solid var(--line); border-radius:var(--r10); overflow:hidden; background:#fff; box-shadow:var(--shadow); }
    .gphoto img { width:100%; aspect-ratio:1.2; object-fit:cover; background:var(--surf3); cursor:pointer; }
    .gphoto .gp { padding:9px; }
    .gphoto .gp .gl { font-weight:800; font-size:12.5px; color:var(--navy); }
    .gphoto .gp .gm { font-size:11px; color:var(--ink3); margin-top:2px; }

    /* ---------- Detail drawer ---------- */
    .drawer { position:fixed; inset:0; z-index:60; }
    .drawer .backdrop { position:absolute; inset:0; background:rgba(15,23,42,.5); backdrop-filter:blur(2px); animation:fade .2s ease; }
    .drawer .panel { position:absolute; inset:0; background:var(--surf2); overflow-y:auto; animation:slideup .25s ease; }
    .drawer .dh { position:sticky; top:0; z-index:2; background:var(--navy); color:#fff; padding:15px 16px; display:flex; align-items:center; gap:11px; }
    .drawer .dh .ico { font-size:20px; }
    .drawer .dh h2 { font-size:16px; flex:1; }
    .drawer .dh .close { background:rgba(255,255,255,.14); color:#fff; width:38px; height:38px; min-height:38px; border-radius:10px; display:grid; place-items:center; }
    .drawer .dbody { padding:16px; padding-bottom:40px; max-width:760px; margin:0 auto; }

    .detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
    .detail-grid .d { background:#fff; border:1px solid var(--line); border-radius:9px; padding:9px 11px; }
    .detail-grid .d strong { font-size:10.5px; color:var(--ink3); text-transform:uppercase; letter-spacing:.04em; display:block; }
    .detail-grid .d span { font-weight:700; color:var(--ink1); overflow-wrap:anywhere; font-size:13px; }

    /* ---------- Modal / lightbox ---------- */
    .modal { position:fixed; inset:0; z-index:70; display:grid; place-items:center; padding:18px; }
    .modal .backdrop { position:absolute; inset:0; background:rgba(15,23,42,.72); animation:fade .15s ease; }
    .modal .box { position:relative; background:#fff; border-radius:var(--r14); max-width:560px; width:100%; box-shadow:var(--shadow2); animation:slideup .2s ease; overflow:hidden; }
    .modal .box .mh { padding:15px 16px; border-bottom:1px solid var(--line); font-weight:900; font-size:16px; color:var(--navy); }
    .modal .box .mb { padding:16px; }
    .modal .box .mf { padding:13px 16px; border-top:1px solid var(--line); display:flex; gap:9px; justify-content:flex-end; background:var(--surf2); }
    .lightbox { position:fixed; inset:0; z-index:75; display:grid; place-items:center; padding:20px; }
    .lightbox .backdrop { position:absolute; inset:0; background:rgba(8,12,20,.92); }
    .lightbox .lb { position:relative; max-width:100%; max-height:100%; text-align:center; }
    .lightbox img { max-width:100%; max-height:82vh; border-radius:12px; box-shadow:var(--shadow2); }
    .lightbox .cap { color:#fff; margin-top:12px; font-weight:700; }
    .lightbox .x { position:absolute; right:-6px; top:-44px; background:rgba(255,255,255,.16); color:#fff; width:40px; height:40px; min-height:40px; border-radius:11px; display:grid; place-items:center; }
    .cmp { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
    .cmp .col h4 { font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink3); margin-bottom:7px; }
    .cmp img { width:100%; border-radius:10px; aspect-ratio:1; object-fit:cover; background:var(--surf3); }
    .cmp .sel { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
    .cmp .sel button { min-height:34px; padding:0 10px; font-size:11px; background:var(--surf2); border:1px solid var(--line); color:var(--ink2); }
    .cmp .sel button.on { background:var(--jem2); color:#fff; border-color:var(--jem2); }

    /* ---------- Toasts ---------- */
    .toasts { position:fixed; left:0; right:0; bottom:78px; z-index:90; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; padding:0 16px; }
    .toast { pointer-events:auto; background:var(--navy); color:#fff; padding:12px 16px; border-radius:12px; box-shadow:var(--shadow2); font-weight:700; font-size:13.5px; display:flex; align-items:center; gap:10px; max-width:440px; animation:slideup .2s ease; }
    .toast .ico { font-size:18px; }
    .toast.success { background:#065F46; } .toast.success .ico { color:#6EE7B7; }
    .toast.error { background:#7F1D1D; } .toast.error .ico { color:#FCA5A5; }
    .toast.info .ico { color:var(--jem); }

    .more-list { display:grid; gap:11px; }

/* ---------- Desktop (components part of the v1 desktop block) ---------- */
@media (min-width:900px) {
  .photos { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .ai-grid { grid-template-columns:repeat(2,1fr); }
  .gallery { grid-template-columns:repeat(4,1fr); }
  .filterbar { grid-template-columns:repeat(4,1fr); }
  .toasts { bottom:24px; }
  .drawer .panel { inset:0 0 0 auto; width:560px; box-shadow:var(--shadow2); animation:slidein .25s ease; }
  @keyframes slidein { from { transform:translateX(40px); opacity:.5; } to { transform:translateX(0); opacity:1; } }
  .split { display:grid; grid-template-columns:1.15fr .85fr; gap:16px; align-items:start; }
}

/* hub theme overrides for components */
    /* keep text readable on the gold FAST accent */
    body[data-theme="fast"] .btn.primary { color:#16203F; }
    body[data-theme="fast"] .btn.primary .ico { color:#16203F; }
    body[data-theme="fast"] .stepdot.active .num { color:#16203F; }

    /* --jem2 is a good BACKGROUND behind dark text (button, stepper: 5.33:1) but a poor
       FOREGROUND on white or cream (3.0:1). No single value satisfies both — the two roles pull
       luminance in opposite directions — so the text-on-light uses get their own darker gold. */
    body[data-theme="fast"] .pchip.active { color:#16203F; }
    body[data-theme="fast"] .sec-head .link,
    body[data-theme="fast"] .badge.jem,
    body[data-theme="fast"] .alert.netsuite { color:#8A5E12; }
    body[data-theme="fast"] .badge.jem { border-color:#E4C88A; } /* was leaking the JEM cyan */

.toast.pos{background:#065f46}
.toast.neg{background:#7f1d1d}

/* Missing pieces used by app.js but not present in the original single-page prototype's CSS. */
.btn.sm{min-height:34px;padding:0 12px;font-size:12.5px}
.list-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.list-row:last-child{border-bottom:none}
.list-row .b{flex:1;min-width:0}
.suggestions{position:relative}
#itemSuggest{position:absolute;left:0;right:0;top:100%;z-index:20;background:#fff;border:1px solid var(--line);border-radius:var(--r10);box-shadow:0 12px 28px rgba(0,0,0,.12);max-height:260px;overflow:auto;margin-top:4px}
.sugg{display:block;width:100%;text-align:left;padding:9px 12px;font-size:13px;border:none;background:none;border-bottom:1px solid var(--line)}
.sugg:last-child{border-bottom:none}
.sugg:hover{background:var(--surf)}

/* ============================================================
   RBAC screens, required-photo slots and the in-page camera.
   Appended at the end on purpose: everything here is additive and uses only the tokens declared
   in :root, so the hub themes above keep recolouring it for free.
   ============================================================ */

/* --- alert tone aliases ---
   The design system defines .alert.critical/.warning/.success, but app.js has always emitted the
   badge vocabulary (neg/warn/pos) instead — so every item warning and every inline error has been
   falling back to the neutral grey style. Map the names onto the tones that already exist. */
.alert.neg{border-left-color:var(--neg);background:var(--negSoft);color:#7F1D1D}
.alert.neg .ico{color:var(--neg)}
.alert.warn{border-left-color:var(--warn);background:var(--warnSoft);color:#78350F}
.alert.warn .ico{color:var(--warn)}
.alert.pos{border-left-color:var(--pos);background:var(--posSoft);color:#065F46}
.alert.pos .ico{color:var(--pos)}

/* --- "no warehouse assigned" state --- */
.blocked-card{text-align:center;padding:26px 18px}
.blocked-icon{width:60px;height:60px;border-radius:17px;background:var(--warnSoft);color:var(--warn);display:grid;place-items:center;font-size:29px;margin:0 auto 14px}
.blocked-card h2{font-size:19px;color:var(--navy)}
.blocked-card p{font-size:13.5px;color:var(--ink2);max-width:460px;margin:8px auto 0;line-height:1.5}
.blocked-next{background:var(--surf2);border:1px solid var(--line);border-radius:var(--r10);padding:11px 13px;text-align:left}
.blocked-actions{justify-content:center;margin-top:16px}

/* --- New Inspection: locked location --- */
.lock-note{display:flex;align-items:center;gap:6px;margin-top:6px;color:var(--ink3)}
.lock-note .ico{font-size:14px;color:var(--jem2)}
.warn-v{color:#B45309}

/* --- Required photo slots --- */
.pslots{display:grid;grid-template-columns:1fr;gap:9px;margin-bottom:12px}
.pslot{display:flex;align-items:center;gap:11px;width:100%;text-align:left;min-height:56px;padding:10px 13px;border-radius:var(--r10);border:1.5px solid var(--line);background:var(--surf)}
.pslot .ps-mark{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-size:18px;flex:0 0 auto}
.pslot .ps-txt{display:flex;flex-direction:column;min-width:0}
.pslot .ps-txt b{font-size:14px;color:var(--ink1);line-height:1.2}
.pslot .ps-state{font-size:11.5px;font-weight:700;margin-top:2px}
.pslot.todo{border-color:#FDE68A;background:var(--warnSoft)}
.pslot.todo .ps-mark{background:#fff;color:var(--warn);border:1px solid #FDE68A}
.pslot.todo .ps-state{color:#B45309}
.pslot.done{border-color:#A7F3D0;background:var(--posSoft)}
.pslot.done .ps-mark{background:#fff;color:var(--pos);border:1px solid #A7F3D0}
.pslot.done .ps-state{color:#047857}
.pslot.sel{box-shadow:0 0 0 3px rgba(var(--accent-rgb),.28);border-color:var(--jem2)}
.pslot-more{margin-bottom:12px}
.ps-more-label{display:block;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink3);margin-bottom:7px}
.capture-target{font-size:13px;color:var(--ink2);margin:0 0 9px}
.capture-target b{color:var(--navy)}
.gate-list{margin:5px 0 0;padding-left:18px}
.gate-list li{margin:3px 0}
@media (min-width:700px){ .pslots{grid-template-columns:1fr 1fr} }

/* --- forms: per-field server errors --- */
.field-err{margin-top:5px;font-size:12.5px;font-weight:700;color:var(--neg)}
input.invalid,select.invalid{border-color:var(--neg);box-shadow:0 0 0 3px var(--negSoft)}

/* ============================================================
   In-page camera (public/camera.js)
   ============================================================ */
.cam-overlay{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px}
.cam-backdrop{position:absolute;inset:0;background:rgba(8,12,20,.9)}
.cam-box{position:relative;display:flex;flex-direction:column;width:100%;max-width:720px;max-height:100%;background:var(--navy);color:#fff;border-radius:var(--r14);box-shadow:var(--shadow2);overflow:hidden}
.cam-head{display:flex;align-items:center;gap:10px;padding:13px 15px;border-bottom:1px solid rgba(255,255,255,.12)}
.cam-head h2{flex:1;font-size:15.5px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cam-x{width:44px;height:44px;min-height:44px;border-radius:11px;background:rgba(255,255,255,.14);color:#fff;font-size:16px;flex:0 0 auto}
.cam-x:hover{background:rgba(255,255,255,.24)}
.cam-stage{position:relative;flex:1 1 auto;min-height:220px;background:#000;display:grid;place-items:center;overflow:hidden}
.cam-video{display:block;width:100%;max-height:62vh;object-fit:contain;background:#000}
.cam-stage-off .cam-video{display:none}
.cam-status{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:10px 15px;border-radius:999px;background:rgba(15,28,46,.86);color:#E2E8F0;font-size:13px;font-weight:700;text-align:center;max-width:90%}
.cam-error{margin:13px 15px 0;padding:12px 14px;border-radius:var(--r10);background:var(--negSoft);color:#7F1D1D;border-left:4px solid var(--neg);font-size:13px;line-height:1.5}
.cam-foot{display:flex;flex-wrap:wrap;gap:9px;padding:13px 15px calc(13px + env(safe-area-inset-bottom,0))}
.cam-foot .btn{flex:1 1 auto;min-width:128px;min-height:48px}
.cam-foot .cam-shoot{flex:2 1 180px}
.cam-foot .btn.ghost{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.28)}
.cam-foot .btn.ghost:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.45)}
/* when the camera failed, the file fallback is the action that actually moves the user forward */
.cam-foot .btn.btn-emph{background:var(--surf);color:var(--navy);border-color:var(--surf)}

/* ============================================================
   Multi-item New Inspection (document lookup + item list + per-item evidence)
   Appended at the end like the blocks above: additive only, built from the :root tokens so every
   hub theme recolours it for free. Touch targets stay >=44px — this is filled in with gloves on.
   ============================================================ */

/* --- the item list: one compact row per line, detail on demand --- */
.ilist{display:flex;flex-direction:column;gap:9px}
.irow{border:1.5px solid var(--line);border-radius:var(--r10);background:var(--surf);overflow:hidden}
.irow.issue{border-color:#FDE68A;background:var(--warnSoft)}
.irow.bad{border-color:#FCA5A5;background:var(--negSoft)}
.ir-open{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:transparent;padding:10px 12px;min-height:52px}
.ir-line{flex:0 0 auto;min-width:30px;height:30px;padding:0 6px;border-radius:9px;background:#fff;border:1px solid var(--line);color:var(--ink3);font-size:12.5px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
.ir-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.ir-main b{font-size:14.5px;color:var(--ink1);line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ir-desc{font-size:12px;color:var(--ink3);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ir-amt{font-size:11.5px;color:var(--ink3);font-weight:800}
.ir-kept{font-size:11.5px;color:#B45309;font-weight:700}
.ir-chev{flex:0 0 auto;color:var(--ink3)}
.ir-side{display:flex;align-items:flex-end;gap:9px;padding:0 12px 11px;flex-wrap:wrap}
.ir-qty{display:flex;flex-direction:column;gap:3px;flex:1 1 110px;min-width:96px}
.ir-qty span{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--ink3)}
.ir-qty input{min-height:44px;background:#fff;text-align:center;font-weight:800}
.ir-qty input.qty-diff{border-color:var(--warn);background:#FFFBEB;color:#B45309}
.ir-issue{flex:1 1 130px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:var(--r10);border:1.5px solid var(--line);background:#fff;color:var(--ink2);font-size:13px;font-weight:800}
.ir-issue .ico{font-size:15px;color:var(--pos)}
.ir-issue.on{background:var(--neg);border-color:var(--neg);color:#fff}
.ir-issue.on .ico{color:#fff}
.ir-problems,.ir-gaps{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-top:1px solid rgba(0,0,0,.07);font-size:12.5px;line-height:1.45}
.ir-problems{background:rgba(255,255,255,.55);color:#7F1D1D}
.ir-problems .ico{color:var(--neg)}
.ir-problems ul{margin:4px 0 0;padding-left:17px}
.ir-problems li{margin:2px 0}
.ir-gaps{background:rgba(255,255,255,.5);color:#B45309}
.ir-gaps .ico{color:var(--warn)}

/* ---------- v2: anchors styled as buttons / rows ----------
   v2 uses real links (<a href>) where v1 used <button data-nav>. The v1 button reset gave those
   elements an inherited colour and font, no underline and a 44px minimum height; anchors get the
   same so the look does not change. Variant colours (.btn.primary etc.) still win on specificity. */
a.btn, a.link, a.actrow, a.insp-card, a.reflib-item, a.pchip { text-decoration:none; }
a.btn, a.link, a.actrow, a.insp-card, a.reflib-item { color:inherit; }
a.link { display:inline-flex; align-items:center; gap:5px; min-height:44px; font-weight:700; }

/* ---------- v2: pager (components/pager.js) ---------- */
.pager { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:12px; }
.pager .pager-info { font-size:12.5px; color:var(--ink3); font-weight:700; }
.pager .btn { min-height:44px; padding:0 14px; }

/* ---------- v2: Reviewed / On review badges (domain/issue-flags.js) ---------- */
.badge.reviewed { background:var(--posSoft); color:#047857; border-color:#A7F3D0; }
.badge.onreview { background:var(--warnSoft); color:#B45309; border-color:#FDE68A; }