/* Sediver 3rd-Party Portal. Reuses the Sediver Intelligence login look (neumorphic light theme,
   app/login/page.tsx). Fully self-contained: NO external fonts/CDN (isolation + tight CSP), a
   system font stack instead. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: #f0f0f0;
  color: #1a1a1a;
  min-height: 100vh;
}

/* ── shared neumorphic bits ── */
.card {
  background: #f0f0f0;
  border-radius: 24px;
  box-shadow: 8px 8px 20px rgba(0,0,0,0.08), -8px -8px 20px rgba(255,255,255,0.9), inset 0 1px 0 rgba(255,255,255,0.7);
}
.inset {
  background: #e8e8e8; border: none; border-radius: 14px;
  box-shadow: inset 2px 2px 6px rgba(0,0,0,0.08), inset -2px -2px 6px rgba(255,255,255,0.7);
  outline: none; color: #1a1a1a; font-family: inherit;
}
input.inset { width: 100%; height: 48px; padding: 0 16px; font-size: 14px; }
input.inset:focus { box-shadow: inset 2px 2px 6px rgba(0,0,0,0.08), inset -2px -2px 6px rgba(255,255,255,0.7), 0 0 0 2px rgba(37,150,190,0.35); }
input.inset::placeholder { color: #aaa; }
.lab { display:block; text-align:left; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #999; margin: 0 0 8px 2px; }

.btn {
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; height:48px; font-family:inherit; font-size:14px; font-weight:600; letter-spacing:0.01em;
  color:#fff; background:#1d1d1f; border:none; border-radius:14px; cursor:pointer; position:relative; overflow:hidden;
  box-shadow: 4px 4px 12px rgba(0,0,0,0.15), -2px -2px 8px rgba(255,255,255,0.5);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 6px 6px 16px rgba(0,0,0,0.18), -3px -3px 10px rgba(255,255,255,0.6); }
.btn:active { transform: translateY(0); box-shadow: inset 2px 2px 6px rgba(0,0,0,0.12), inset -2px -2px 6px rgba(255,255,255,0.3); }
.btn:disabled { opacity:0.6; cursor:not-allowed; transform:none; }
.btn::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg, transparent 30%, rgba(255,255,255,0.08) 50%, transparent 70%); background-size:200% 100%; animation:shimmer 4s ease-in-out infinite; }
.btn.light { color:#1a1a1a; background:#f0f0f0; box-shadow: 4px 4px 12px rgba(0,0,0,0.08), -4px -4px 12px rgba(255,255,255,0.8); }
.btn.light::after { display:none; }
@keyframes shimmer { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
.spinner { width:18px; height:18px; border:2px solid rgba(255,255,255,0.3); border-top-color:#fff; border-radius:50%; animation:spin 0.6s linear infinite; }
.err { font-size:13px; color:#e74c3c; margin-top:16px; min-height:16px; }

/* ── login layout (mirrors app/login/page.tsx) ── */
.lp { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px; }
.lp-brand { margin-bottom:32px; opacity:0; transform:translateY(10px); transition:all 0.5s cubic-bezier(0.16,1,0.3,1); }
.lp-brand.on { opacity:1; transform:translateY(0); }
.lp-brand img { width:172px; height:auto; display:block; }
.lp-card { width:100%; max-width:360px; padding:34px 32px 30px; text-align:center; opacity:0; transform:translateY(14px); transition:all 0.5s cubic-bezier(0.16,1,0.3,1) 0.08s; }
.lp-card.on { opacity:1; transform:translateY(0); }
.lp-h { font-size:19px; font-weight:700; color:#1a1a1a; letter-spacing:-0.01em; }
.lp-sub { font-size:13px; color:#999; margin-top:4px; margin-bottom:26px; }
.lp-foot { margin-top:26px; font-size:10.5px; color:#bbb; letter-spacing:0.1em; text-transform:uppercase; opacity:0; transition:opacity 0.5s ease 0.25s; }
.lp-foot.on { opacity:1; }

/* ── portal (label) layout ── */
html, body { overflow-x:hidden; }   /* never let any wide child push the page sideways */
.wrap { max-width:1440px; width:94%; margin:0 auto; padding:30px 0 64px; }
.topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.topbar img { height:26px; width:auto; max-width:55%; object-fit:contain; }
.signout { color:#999; font-size:12px; text-decoration:none; font-weight:600; }
.signout:hover { color:#1a1a1a; }
.head { margin-bottom:18px; text-align:center; }
.head .dd { margin-left:auto; margin-right:auto; }   /* centre the admin view dropdown too */
.head h1 { font-size:26px; font-weight:700; letter-spacing:-0.01em; }
.head p { color:#999; font-size:14px; margin-top:4px; }
.head .badge { display:inline-block; margin-top:10px; font-size:11px; font-weight:600; color:#2596be; background:#e8f4f9; border-radius:999px; padding:4px 11px; }
.pad { padding:24px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.fld { display:block; }
.btnrow { display:flex; gap:10px; margin-top:18px; }
.btn.row { width:auto; padding:0 18px; }
.hint { color:#999; font-size:12px; margin-top:10px; line-height:1.5; }
/* table filter box (material / test report / SAP code / PO) - slim inset above each queue table */
input.tblfilter { width:100%; height:38px; padding:0 14px; font-size:13px; margin-bottom:12px; }
input.tblfilter::-webkit-search-cancel-button { -webkit-appearance:none; }
/* Compact shared filter that lives at the RIGHT of the tab switcher (so the PO image cards get more air). */
input.tabfilter { width:230px; max-width:46vw; height:38px; padding:0 14px; font-size:13px; margin:0; }
input.tabfilter::-webkit-search-cancel-button { -webkit-appearance:none; }
@media (max-width:600px) { input.tabfilter { width:100%; max-width:none; } }
.layout { display:grid; grid-template-columns:1fr 320px; gap:16px; }
@media (max-width:720px) { .layout, .grid2 { grid-template-columns:1fr; } }

/* Apple-level tab switcher - instant, client-side, no reload */
.tabs { display:inline-flex; gap:4px; background:#e8e8e8; border-radius:14px; padding:4px; margin-bottom:18px;
  box-shadow: inset 2px 2px 6px rgba(0,0,0,0.08), inset -2px -2px 6px rgba(255,255,255,0.7); }
.tabs button { border:none; background:transparent; font-family:inherit; font-size:13px; font-weight:600; color:#8a8a8a;
  padding:9px 20px; border-radius:10px; cursor:pointer; transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease; }
.tabs button.active { color:#1a1a1a; background:#f0f0f0; box-shadow: 3px 3px 8px rgba(0,0,0,0.08), -3px -3px 8px rgba(255,255,255,0.85); }
.panel { display:none; } .panel.active { display:block; animation: fadein 0.2s ease; }
@keyframes fadein { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }

/* incoming table */
.synced { display:inline-flex; align-items:center; gap:7px; font-size:12px; color:#666; margin:0 0 14px; padding:5px 11px; background:#e8e8e8; border-radius:999px;
  box-shadow: inset 1px 1px 3px rgba(0,0,0,0.06), inset -1px -1px 3px rgba(255,255,255,0.7); letter-spacing:0.01em; }
.synced:empty { display:none; }   /* no lone grey pill when there's no sync text (aggregate view) */
/* DESKTOP ONLY: a wide table (Container #/PO/Material/Description...) scrolls INSIDE its card instead of
   widening the whole page. On mobile the table becomes stacked cards, and overflow-x there would give an
   "infinite" width so the row never truncates and the status gets pushed off-screen - so scope it to >=601px. */
@media (min-width:601px) { #inboundBody, #outboundBody, #inventoryBody { overflow-x:auto; } }
.tbl { width:100%; border-collapse:collapse; font-size:13px; }
.tbl th { text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:0.08em; color:#999; padding:8px 10px; border-bottom:1px solid #ddd; white-space:nowrap; }
.tbl td { padding:10px 10px; border-bottom:1px solid #eee; color:#333; }
.tbl tr:last-child td { border-bottom:none; }
.tbl tr.click { cursor:pointer; }
.tbl tr.click:hover td { background:rgba(0,0,0,0.035); }
.empty { text-align:center; color:#aaa; padding:44px 0; font-size:13px; }
/* Inbound PO group header: PO + total label count + one-click batch print of every pallet label. */
/* PO cards (email-template style): hero image + PO title over it, two buttons, collapsible list. */
.card.cardhost-flat { background:transparent; box-shadow:none; padding:0; border-radius:0; }   /* cards float on the page, no card-in-card footer line */
.pocards { display:flex; flex-wrap:wrap; gap:18px; justify-content:center; align-items:flex-start; padding:6px 6px 36px; }   /* breathing room under the cards (and side room so the neumorphic shadow is not clipped) */
.pocard { width:440px; max-width:100%; overflow:hidden; background:#f0f0f0; border-radius:20px; box-shadow:8px 8px 20px rgba(0,0,0,0.08), -8px -8px 20px rgba(255,255,255,0.9), inset 0 1px 0 rgba(255,255,255,0.7); }
.pocard-hero { position:relative; overflow:hidden; }   /* the card's overflow:hidden rounds every corner cleanly */
.pocard-hero.img { aspect-ratio:3 / 2; }                 /* match the photo's 3:2 so the whole ship shows, no stretch/crop */
.pocard-hero.img img { display:block; width:100%; height:100%; object-fit:cover; }
.pocard-hero.noimg { height:80px; background:linear-gradient(135deg, #2596be, #1b7094); }
/* Status dropdown in a feed row: the current status is the toggle, the menu sets a new one. */
.stdd { position:relative; display:inline-block; }
.stdd .dd-toggle { display:inline-flex; align-items:center; gap:5px; background:transparent; border:none; padding:2px 2px; cursor:pointer; font-family:inherit; }
.stdd .dd-menu { display:none; position:fixed; left:auto; right:auto; top:auto; bottom:auto; width:max-content; min-width:128px; max-width:220px; background:#f0f0f0; border-radius:12px; padding:5px; z-index:70; box-shadow:6px 6px 16px rgba(0,0,0,0.14), -4px -4px 12px rgba(255,255,255,0.9); }   /* FIXED + JS-placed; left/right:auto so the generic .dd-menu right:0 can't stretch it full-width */
.stdd.open .dd-menu { display:block; }
.stdd .dd-opt { padding:8px 12px; border-radius:8px; font-size:13px; color:#333; cursor:pointer; }
.stdd .dd-opt:not(.sel):hover { background:rgba(0,0,0,0.05); }
.stdd .dd-opt.sel { background:#2596be; color:#fff; }
.stdd.open .pg-caret { transform:rotate(180deg); }
.pocard-cap { position:absolute; left:0; right:0; bottom:0; padding:16px 20px 14px; background:linear-gradient(to top, rgba(0,0,0,0.66), rgba(0,0,0,0.12) 68%, transparent); }
.pocard-po { color:#fff; font-size:19px; font-weight:800; letter-spacing:0.01em; text-shadow:0 1px 3px rgba(0,0,0,0.4); }
.pocard-count { color:rgba(255,255,255,0.9); font-size:12px; margin-top:3px; text-shadow:0 1px 2px rgba(0,0,0,0.4); }
.pocard-actions { display:flex; align-items:center; gap:10px; padding:14px 18px; }
.pocard-btn { border:none; border-radius:12px; font-size:13px; font-weight:600; padding:11px 16px; cursor:pointer; font-family:inherit; display:inline-flex; align-items:center; gap:7px; }
.pocard-btn.ghost { background:#f0f0f0; color:#333; box-shadow:3px 3px 7px rgba(0,0,0,0.07), -3px -3px 7px rgba(255,255,255,0.9); }
.pocard-btn.ghost:hover { background:#eaeaea; }
.pocard-btn.blue { margin-left:auto; background:#2596be; color:#fff; box-shadow:0 5px 16px rgba(37,150,190,0.38); }
.pocard-btn.blue:hover { filter:brightness(1.07); }
.pg-caret { width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid #7a8791; transition:transform .18s; }
.pocard-btn.open .pg-caret { transform:rotate(180deg); }
.pocard-list { display:none; padding:0 8px 8px; }
.pocard-list.open { display:block; }
.pocard-tbl { width:100%; }
.pocard-tbl th { text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:0.08em; color:#999; padding:8px 10px 4px; }
td.act { text-align:right; white-space:nowrap; }
.mini { border:none; background:#1d1d1f; color:#fff; font-size:11px; font-weight:600; padding:6px 12px; border-radius:9px; cursor:pointer; font-family:inherit; }
.mini:hover { filter:brightness(1.12); }
.mini:disabled { opacity:0.6; cursor:default; }

/* Language switcher (EN / CZ) - a small carved segmented pill; active = brand blue. */
.langsw { display:inline-flex; background:#e8e8e8; border-radius:9px; padding:2px; box-shadow: inset 1px 1px 3px rgba(0,0,0,0.08), inset -1px -1px 3px rgba(255,255,255,0.7); }
.langsw button { border:none; background:transparent; color:#666; font-size:11px; font-weight:700; letter-spacing:0.03em; padding:5px 9px; border-radius:7px; cursor:pointer; font-family:inherit; }
.langsw button.active { background:#2596be; color:#fff; }

/* Blue button variant (the print CTAs) + generating shimmer (Susie-style sweep on click). */
.btn.blue { background:#2596be; }
.btn.gen { pointer-events:none; }
.btn.gen::after { background:linear-gradient(100deg, transparent 35%, rgba(255,255,255,0.42) 50%, transparent 65%); background-size:220% 100%; animation:susieShimmer 1.15s linear infinite; opacity:1; }
/* The print button IS the progress bar while a PO renders: a pale fill crosses it over the measured
   ETA (from /api/label-eta) with the shimmer on top, and the label counts the seconds down. It parks
   at 96% if the server is late (never claims done before the PDF is here) and completes on arrival. */
.btn.progress { position:relative; isolation:isolate; overflow:hidden; font-variant-numeric:tabular-nums; }
.btn.progress::before { content:""; position:absolute; top:0; left:0; bottom:0; width:0; z-index:-1; background:rgba(255,255,255,0.26); }
.btn.progress.run::before { width:96%; transition:width var(--dur, 20s) linear; }
.btn.progress.done::before { width:100%; transition:width .35s ease-out; }

/* PO batch label preview modal: see every label for a PO (scaled thumbnails), then Print. */
.polabels-card { width:940px; max-width:94vw; padding:0; overflow:hidden; }
.polabels-head { position:relative; text-align:center; padding:20px 44px 14px; }
.polabels-title { font-size:17px; font-weight:700; color:#1a1a1a; }
.polabels-sub { font-size:14px; color:#7a8791; margin-top:6px; }
.polabels-count { display:inline-block; min-width:2ch; padding:1px 9px; border-radius:8px; color:#2596be; font-weight:800; background:#eef7fb; box-shadow: inset 1px 1px 3px rgba(0,0,0,0.06), inset -1px -1px 3px rgba(255,255,255,0.8); outline:none; caret-color:#2596be; border-right:2px solid #2596be; animation: caretblink 1.1s step-end infinite; }
.polabels-count:focus { animation:none; border-right:none; box-shadow: inset 1px 1px 3px rgba(0,0,0,0.06), inset -1px -1px 3px rgba(255,255,255,0.8), 0 0 0 2px rgba(37,150,190,0.35); }
@keyframes caretblink { 0%,100% { border-right-color:#2596be; } 50% { border-right-color:transparent; } }
.polabels-x { position:absolute; top:14px; right:16px; border:none; background:none; font-size:24px; line-height:1; color:#999; cursor:pointer; padding:0 4px; }
.polabels-x:hover { color:#333; }
.polabels-body { display:flex; flex-wrap:wrap; gap:10px; padding:8px 18px 16px; max-height:62vh; overflow:auto; align-content:flex-start; justify-content:center; }
.polabels-body .clbl { zoom:0.42; box-shadow:3px 3px 9px rgba(0,0,0,0.14), -2px -2px 6px rgba(255,255,255,0.8); }
.polabels-foot { display:flex; justify-content:flex-end; gap:10px; padding:13px 20px 16px; border-top:1px solid #e6e6e6; }
.polabels-actions { display:flex; flex:1; justify-content:flex-end; align-items:center; gap:10px; flex-wrap:wrap; }
/* Edit -> split: pick a container (or All) to edit, or Cancel. Reuses the footer row for space. */
.polabels-pick { display:flex; flex:1; flex-direction:column; align-items:stretch; gap:10px; }
.polabels-pick .pick-top { display:flex; align-items:center; gap:8px; }
.polabels-pick .pick-lbl { margin-right:auto; font-size:13px; color:#666; font-weight:600; }
/* Container buttons in a 4-wide grid: 5 -> 4+1, 8 -> 4+4. */
.polabels-pick .pick-conts { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; }
.polabels-pick .pick-conts .btn { padding:9px 10px; width:100%; }
.polabels-pick .btn { padding:7px 13px; }
@media (max-width:600px) { .polabels-pick .pick-conts { grid-template-columns:repeat(3, 1fr); } }
/* Rais 2026-08-13: HIDE-ONLY (code/handlers stay wired; revert = delete this block).
   Print modal shows only the blue "Print labels" action (+ the X to close). !important beats the
   inline display JS toggles on the Zebra/USB/Setup buttons. */
#poLabelsSetup, #poLabelsCancel, #poLabelsUsb, #poLabelsZebra { display:none !important; }
/* Tab bar: hide Inbound + Inventory ONLY for supplier sites that just ship (China/Duchcov...).
   FDR (california) receives AND ships for our customers, so it keeps both; admin sees all. The
   body.hide-io-tabs class is added by portal-page.js per the signed-in site. */
body.hide-io-tabs #tabInbound, body.hide-io-tabs #tabInventory { display:none !important; }
/* Admin viewing a sourcing factory (no inbound by doctrine): the Inbound tab leaves with the site. */
body.hide-inbound-admin #tabInbound, body.hide-inbound-admin #tabInventory { display:none !important; }
.ready { color:#10b981; font-weight:700; }
.flag { color:#e05252; font-weight:700; }
/* Status chip + flag "!" sit on ONE row (flag to the RIGHT of the status, not below it). */
.stval { display:inline-flex; align-items:center; gap:7px; }
/* Discrepancy note = a minimalist red "!" circle. Click opens a clean white popover with the AI
   note. Keeps the Status column narrow - a long note never stretches it. */
.flagbtn { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; flex:none;
  padding:0; border:none; border-radius:50%; background:#e05252; color:#fff;
  font-family:inherit; font-size:11px; font-weight:800; line-height:1; cursor:pointer; }
.flagbtn:hover { background:#c53f3f; }
.flagpop { position:fixed; z-index:80; display:none; max-width:280px; background:#fff; color:#1a1a1a;
  border-radius:14px; padding:11px 14px; font-size:12.5px; line-height:1.45;
  box-shadow:0 10px 34px rgba(16,50,61,.20), 0 0 0 1px rgba(0,0,0,.05); animation:fadein .14s ease; }
.flagpop-lab { font-size:9.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#e05252; margin-bottom:5px; }
.flagpop-body { color:#333; }
/* AI Flags review table (IT tab): the note reads in full here, so let it wrap. */
.flagcell { white-space:normal; max-width:460px; color:#333; line-height:1.4; }
/* Bolded key figures in flag notes / Susie-style highlights. */
.figbold { font-weight:700; color:#1a1a1a; }
/* In-page PDF viewer (replaces popup window.open, which gets blocked after an async fetch). */
.pdfov { position:fixed; inset:0; z-index:90; background:rgba(0,0,0,0.55); display:flex; flex-direction:column; }
.pdfbar { display:flex; gap:10px; justify-content:flex-end; padding:12px 14px; background:#f0f0f0; }
.pdfbar .btn { width:auto; height:40px; padding:0 20px; }
.pdffr { flex:1; width:100%; border:none; background:#fff; }
td.st { white-space:nowrap; }
/* Time column (when a site marked the row): secondary info - quiet, never competes with the status. */
td.whn { white-space:nowrap; color:#8b93a1; font-size:12px; font-variant-numeric:tabular-nums; }
/* Collapsed PO group line ("similar POs in one line") - a quiet band, not a second header. */
tr.pogrp td { background:#f2f5f8; border-bottom:1px solid #e3e8ee; padding:0; }
.pogrp-btn { display:flex; align-items:center; gap:10px; width:100%; padding:9px 12px; background:none; border:0;
  cursor:pointer; text-align:left; font:inherit; color:#33404d; }
.pogrp-btn:hover { background:#eaeff5; }
.pogrp-po { font-weight:600; letter-spacing:.01em; }
.pogrp-n { color:#8b93a1; font-size:12px; }
tr.pogrp.open .pg-caret { transform:rotate(180deg); }
.stchip { display:inline-flex; align-items:center; gap:6px; font-weight:600; }
.stchip .sicon { flex:none; }
.stchip.transit { color:#2596be; }
.stchip.muted { color:#8a8a8a; }
.stchip.scanning { color:#8b5cf6; }
.stchip.ready { color:#10b981; }
.stchip.flag { color:#e05252; }

/* label modal: form + preview side by side */
.labelgrid { display:grid; grid-template-columns:1fr 300px; gap:20px; align-items:start; }
@media (max-width:640px) { .labelgrid { grid-template-columns:1fr; } }

/* Documents on a container: ONE compact row (chips + add pill), never a titled block with an
   always-open file picker - the label preview owns this modal, paperwork is a footnote. */
.docsrow { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:14px; padding-top:12px; border-top:1px solid #e4e4e4; }
.docs { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.docchip { display:inline-flex; align-items:center; max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  padding:5px 10px; border-radius:999px; background:#f0f0f0; color:#33404d; font-size:12px; font-weight:600; text-decoration:none;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.07), -2px -2px 5px rgba(255,255,255,0.9); }
.docchip:hover { background:#eaeaea; }
.docadd { display:inline-flex; align-items:center; padding:5px 11px; border:0; border-radius:999px; background:#f0f0f0; color:#7a8791;
  font:inherit; font-size:12px; font-weight:600; cursor:pointer;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.07), -2px -2px 5px rgba(255,255,255,0.9); }
.docadd:hover { background:#eaeaea; color:#33404d; }
.docadd:disabled { opacity:0.6; cursor:default; }

/* update splash (branded, no white flash) */
.splash { position:fixed; inset:0; background:#f0f0f0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; z-index:100; opacity:1; transition:opacity 0.45s ease; }
.splash.hide { opacity:0; pointer-events:none; }
.splash img { width:176px; height:auto; animation: breathe 2.4s ease-in-out infinite; }
.splash-msg { font-size:12.5px; color:#9a9a9a; letter-spacing:0.08em; font-weight:500; display:none; animation: breathe 1.8s ease-in-out infinite; }
.splash-msg.on { display:block; }
.splash-msg .dots::after { content:'...'; }
@keyframes breathe { 0%, 100% { opacity:0.7; } 50% { opacity:1; } }

/* admin paste card (mini modal, like the intel app) */
.adminname { color:#1a1a1a; font-weight:700; font-size:13px; }
.gearbtn { background:none; border:none; color:#8a8a8a; cursor:pointer; padding:5px; display:inline-flex; align-items:center; border-radius:10px; transition:color 0.15s ease, background 0.15s ease; }
.gearbtn:hover { color:#2596be; background:rgba(0,0,0,0.05); }
select.inset { width:100%; height:48px; padding:0 12px; font-size:14px; cursor:pointer; }
#usersTable th { text-align:left; padding:6px 4px; font-size:10px; text-transform:uppercase; letter-spacing:0.08em; color:#999; }
#usersTable td { padding:8px 4px; font-size:13px; border-bottom:1px solid #eee; }
/* compact inline Access dropdown (professional in a dense table: value + caret, no heavy carved box) */
.rowdd { display:inline-block; }
.rowdd .dd-toggle { width:auto; height:auto; padding:4px 8px; background:transparent; box-shadow:none; border-radius:8px; font-size:13px; font-weight:600; gap:5px; transition:background 0.15s ease; }
.rowdd .dd-toggle:hover { background:#e8e8e8; }
.rowdd .dd-caret { color:#9a9a9a; font-size:18px; }
.rowdd .dd-menu { min-width:180px; }
.rowdd .dd-opt { padding:9px 12px; font-size:13px; }
.modal { position:fixed; inset:0; background:rgba(0,0,0,0.32); display:none; align-items:center; justify-content:center; padding:20px; z-index:50; backdrop-filter: blur(3px); }
.modal.on { display:flex; }
/* Batch-edit opens the per-container label modal ON TOP of the still-open batch modal (both are
   .modal z-index:50; without this the label modal, earlier in the DOM, hides behind the batch one). */
.modal.ontop { z-index:55; }
/* ZOOM-SAFE (all modals): never taller than the viewport at any zoom; scroll INSIDE, never overflow/clip. */
.modal .card { width:100%; max-width:460px; max-height:calc(100vh - 40px); max-height:calc(100dvh - 40px); overflow-y:auto; -webkit-overflow-scrolling:touch; padding:24px; text-align:left; box-sizing:border-box; }
.modal .card.label-card { max-width:720px; position:relative; }
/* Flag report modal: wide card sized in viewport units, PDF preview fills + scrolls internally. */
.modal.report .card.report-card { max-width:min(920px,94vw); width:94vw; height:min(94vh,1000px); height:min(94dvh,1000px); max-height:calc(100vh - 40px); max-height:calc(100dvh - 40px); display:flex; flex-direction:column; overflow:hidden; padding:16px 16px 14px; }
.report-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px; flex:0 0 auto; }
.report-eyebrow { display:block; color:#2596be; font-size:10px; letter-spacing:2px; font-weight:700; text-transform:uppercase; }
.report-head h3 { font-size:16px; font-weight:700; margin:2px 0 0; }
.report-actions { display:flex; gap:8px; align-items:center; }
.report-body { flex:1 1 auto; min-height:0; border-radius:12px; overflow:hidden; background:#f4f5f6; }
.report-frame { width:100%; height:100%; border:0; display:block; background:#f4f5f6; }
.report-loading { display:flex; align-items:center; justify-content:center; height:100%; color:#888; font-size:13px; }
/* small pill buttons used in the report head + flag row actions */
.mini.ghost { background:transparent; border:1px solid #dcdfe3; color:#444; }
.mini.report-open { display:inline-flex; align-items:center; gap:5px; }
.mini.report-open svg { width:13px; height:13px; }
/* Susie face button (replaces the "Ask Susie" text on a flag row) */
.susie-mini { padding:0; width:30px; height:30px; border-radius:50%; overflow:hidden; border:1.5px solid #2596be; background:#fff; cursor:pointer; flex:0 0 auto; line-height:0; }
.susie-mini img { width:100%; height:100%; object-fit:cover; display:block; }
.susie-mini:hover { box-shadow:0 0 0 3px rgba(37,150,190,0.18); }
td.act { display:flex; gap:8px; align-items:center; }
.editonly { display:none; }   /* mobile-only controls (Edit / Exit / print sheet) */
.printsheet { display:none; }   /* mobile-only print chooser (PDF/ZPL) */
#printBtn { background:#2596be; box-shadow: 4px 4px 12px rgba(37,150,190,0.28), -2px -2px 8px rgba(255,255,255,0.5); }   /* Sediver blue primary */
#printBtn:hover { background:#2aa3cf; }
html.modal-open, body.modal-open { overflow:hidden; }   /* no background page scroll while a modal is open */
.lbl [data-edit] { cursor:text; border-radius:4px; padding:0 3px; margin:0 -3px; transition:background 0.12s ease; }
.lbl [data-edit]:hover { background:#eef7fb; }
.lbl [data-edit]:focus { background:#e8f4f9; outline:none; box-shadow:inset 0 -2px 0 #2596be; }   /* edit-in-place caret line */
.lbl [data-edit]:empty::before { content:'\00a0\00a0\00a0\00a0\00a0'; background:#eef7fb; border-radius:3px; }  /* empty value = a clickable pill */

/* IN-PLACE incoming modal (Rais 2026-07-30): no side form - the label preview IS the editor
   (desktop matches the mobile philosophy). Container number = the centered title. The hidden
   form stays in the DOM as the state store. */
#labelModal.inplace .labelgrid { grid-template-columns:1fr; }
#labelModal.inplace #labelForm { display:none; }
#labelModal.inplace .labelgrid > div:last-child { order:-1; }
#labelModal.inplace #preview { display:flex; justify-content:center; }
#labelModal.inplace h3, #labelModal.inplace p.sub { text-align:center; }
#labelModal.inplace .btnrow { justify-content:center; }
@media (min-width:641px) { #labelModal.inplace #preview .lbl { zoom:1.28; } }
/* Label modal fits WITHOUT vertical scroll (Rais 2026-08-17): kill the useless subtitle, tighten the
   spacing, and scale the preview DOWN as the screen gets shorter so the title, the pallet nav, the
   label and the action buttons all stay on screen at once. */
#previewCaption { display:none; }               /* the hint now lives under the title (in #labelSub) */
#labelSub { margin:2px 0 8px; font-size:12px; }
#labelModal .card { padding:16px 20px; }
#labelModal h3 { margin-bottom:2px; }
#labelModal .labelgrid { gap:8px; }
#labelModal .btnrow { margin-top:12px; }
@media (max-height:860px) { #labelModal.inplace #preview .lbl { zoom:1.05; } }
@media (max-height:740px) { #labelModal.inplace #preview .lbl { zoom:0.9; } }
@media (max-height:620px) { #labelModal.inplace #preview .lbl { zoom:0.78; } }
.modal h3 { font-size:16px; font-weight:700; margin-bottom:4px; }
.modal p.sub { font-size:12px; color:#999; margin-bottom:16px; }
/* Printer-setup modal: friendly numbered steps */
.zhead { display:flex; align-items:center; gap:10px; margin-bottom:4px; }
.zhead h3 { margin-bottom:0; }
.zico { font-size:22px; line-height:1; }
.zsteps { display:flex; flex-direction:column; gap:18px; margin:18px 0 6px; }
.zstep { display:flex; gap:13px; align-items:flex-start; }
.znum { flex:0 0 26px; width:26px; height:26px; border-radius:50%; background:#2596be; color:#fff; font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 10px rgba(37,150,190,.38); margin-top:1px; }
.zbody { flex:1 1 auto; min-width:0; }
.zbody .zt { font-size:13.5px; font-weight:700; color:#1a1a1a; margin-bottom:4px; }
.zbody p.sub { margin-bottom:0; color:#777; line-height:1.55; }
.zcode { display:flex; gap:8px; align-items:flex-start; margin-top:10px; }
.zcode textarea { flex:1 1 auto; min-height:0; resize:none; }
.zhint { font-size:11px; color:#b0b0b0; margin-top:8px; }
code.chip { background:#eef6f9; border-radius:6px; padding:2px 7px; font-size:12px; color:#2596be; font-weight:700; white-space:nowrap; }
/* AI Flags: "Full report" action above the table (all open flags in one PDF) */
.flags-head { display:flex; justify-content:flex-end; margin-bottom:12px; }
.full-report { gap:7px; }
textarea.inset { width:100%; min-height:130px; padding:12px 14px; font-size:13px; font-family:ui-monospace, Menlo, monospace; resize:vertical; line-height:1.5; }

/* custom dropdown (no native select) */
.dd { position:relative; }
.dd-toggle { width:100%; height:46px; padding:0 14px; display:flex; align-items:center; justify-content:space-between; font-size:14px; font-weight:500; cursor:pointer; text-align:left; color:#1a1a1a; background:#f0f0f0; border:none; border-radius:14px; font-family:inherit;
  box-shadow: 3px 3px 7px rgba(0,0,0,0.06), -3px -3px 7px rgba(255,255,255,0.85); transition: box-shadow 0.15s ease; }
.dd-toggle:hover { box-shadow: 4px 4px 10px rgba(0,0,0,0.08), -4px -4px 10px rgba(255,255,255,0.9); }
.dd:not(.rowdd).open .dd-toggle { box-shadow: inset 2px 2px 6px rgba(0,0,0,0.09), inset -2px -2px 6px rgba(255,255,255,0.7); }
.dd-toggle #ddLabel { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dd-caret { color:#9a9a9a; transform:rotate(90deg); transition:transform 0.18s ease; font-size:20px; line-height:1; margin-left:8px; }
.dd.open .dd-caret { transform:rotate(-90deg); }
.dd-menu { display:none; position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:20; background:#f0f0f0; border-radius:14px; padding:6px;
  box-shadow: 6px 6px 18px rgba(0,0,0,0.12), -6px -6px 18px rgba(255,255,255,0.9); max-height:230px; overflow:auto; }
.dd.open .dd-menu { display:block; animation: fadein 0.14s ease; }
.dd-opt { padding:11px 12px; border-radius:10px; font-size:14px; cursor:pointer; color:#333; }
.dd-opt:not(.sel):hover { background:rgba(0,0,0,0.05); color:#1a1a1a; }
.dd-opt.sel { background:#2596be; color:#fff; }

/* pallet stepper (Carton Cloud multi-pallet containers) */
.palletnav { display:flex; align-items:center; gap:10px; margin:0 0 14px; }
.pnav-btn { width:30px; height:30px; flex:0 0 auto; border:none; border-radius:9px; cursor:pointer; color:#1a1a1a; background:#f0f0f0; font-size:17px; line-height:1;
  box-shadow: 3px 3px 8px rgba(0,0,0,0.08), -3px -3px 8px rgba(255,255,255,0.85); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.pnav-btn:hover:not(:disabled) { transform: translateY(-1px); }
.pnav-btn:active:not(:disabled) { box-shadow: inset 2px 2px 5px rgba(0,0,0,0.1), inset -2px -2px 5px rgba(255,255,255,0.4); }
.pnav-btn:disabled { opacity:0.4; cursor:default; }
.pnav-lab { font-weight:600; font-size:13px; color:#1a1a1a; min-width:86px; text-align:center; }
.pnav-id { font-size:12px; color:#2596be; font-weight:600; margin-left:auto; }

/* USB printer onboarding (WebUSB direct print, no install) */
.printerbar { display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px; margin:2px 0 14px; }
.usb-connect { font-size:13px; font-weight:600; color:#1a1a1a; background:#e8e8e8; border:none; border-radius:11px; padding:9px 16px; cursor:pointer;
  box-shadow: 3px 3px 8px rgba(0,0,0,0.08), -3px -3px 8px rgba(255,255,255,0.85); transition: transform 0.15s ease; }
.usb-connect:hover { transform: translateY(-1px); }
.usb-ready { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:#1a1a1a; background:#e8f4f9; border-radius:999px; padding:7px 8px 7px 13px; }
.usb-dot { width:9px; height:9px; border-radius:50%; background:#10b981; box-shadow:0 0 0 3px rgba(16,185,129,0.18); }
.usb-x { border:none; background:transparent; color:#666; font-size:18px; line-height:1; cursor:pointer; padding:0 4px; border-radius:6px; }
.usb-x:hover { color:#1a1a1a; background:rgba(0,0,0,0.06); }
.usb-hint { font-size:12px; color:#666; }
.usb-hint.ok { color:#0a7d3c; font-weight:600; }
.usb-hint.err { color:#b3261e; font-weight:600; }

/* ─────────── mobile (phones): 3PL staff on a handset in the warehouse ─────────── */
@media (max-width: 600px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  .wrap { width: 100%; padding: 16px 14px 44px; }
  .pad { padding: 16px; }
  .card { border-radius: 18px; }
  .topbar { margin-bottom: 16px; }
  .topbar img { height: 22px; max-width: 58%; }
  .head h1 { font-size: 20px; }
  .head p { font-size: 13px; }
  .tabs { display: flex; width: 100%; }
  .tabs button { flex: 1; padding: 10px 8px; text-align: center; }

  .tbl thead { display: none; }
  .tbl .pocols { display: none; }   /* mobile rows are cards (data-label), no column header row needed */
  .tbl, .tbl tbody { display: block; width: 100%; }
  .tbl tr { margin: 0 0 8px; background: #f7f7f7; border-radius: 14px;
    box-shadow: inset 1px 1px 3px rgba(0,0,0,0.05), inset -1px -1px 3px rgba(255,255,255,0.7); }
  .tbl tr.click:hover td { background: transparent; }

  /* QUEUE rows (inbound/outbound, tappable): ONE compact line = primary field + status.
     PO / qty / ETA / label preview all live in the modal that opens on tap. */
  .tbl tr.click { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 14px; }
  .tbl tr.click td { display: none; padding: 0; border: none; }
  .tbl tr.click td::before { content: none; }
  .tbl tr.click td.mobprim { display: block; flex: 1 1 auto; min-width: 0; text-align: left;
    font-weight: 600; font-size: 14px; color: #1a1a1a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tbl tr.click td.st { display: block; flex: 0 0 auto; text-align: right; white-space: nowrap; }
  .tbl tr.click td.st .flagnote, .tbl tr.click td.st br { display: none; }   /* keep the line clean; full note is in the modal */
  .tbl tr.click td.act { display: block; flex: 1 0 100%; text-align: left; }
  .tbl tr.click td.act:empty { display: none; }

  /* INVENTORY rows (no modal): stacked card so every field stays visible */
  .tbl tr:not(.click) { padding: 4px 14px; }
  .tbl tr:not(.click) td { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0;
    border-bottom: 1px solid #ececec; text-align: right; white-space: normal; }
  .tbl tr:not(.click) td:last-child { border-bottom: none; }
  .tbl tr:not(.click) td::before { content: attr(data-label); flex: none; text-align: left;
    font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #9a9a9a; }

  /* PO group header stays a clean single row on phones (not a stacked data card). */
  .pogroup td { display: flex !important; padding: 10px 12px !important; }
  .pogroup td::before { content: none !important; }
  .pogroup-cell { flex-wrap: wrap; gap: 8px 12px; }
  .pogroup-print { margin-left: 0; }

  .mini { padding: 11px 18px; font-size: 13px; }   /* fat-finger tap target */

  /* modal fits any phone */
  .modal { padding: 12px; align-items: flex-start; }
  .modal .card { max-width: 100%; padding: 18px; margin-top: 10px; max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); overflow-y: auto; }
  .modal .card.label-card { max-width: 100%; }
  .modal img, .modal canvas, .modal svg { max-width: 100%; height: auto; }
  .grid2 { grid-template-columns: 1fr; }
  .btnrow { flex-wrap: wrap; }
  .btn.row { flex: 1; }
  #usersTable { font-size: 12px; }
  input.inset, select.inset, textarea.inset { font-size: 16px; }   /* >=16px stops iOS zoom-on-focus */

  /* label modal on mobile: keep the container title + the "Click any value to edit" hint on top (Rais
     2026-08-17 wants the hint under the title), centered, then the label preview. Only desktop-only
     buttons are dropped here. */
  /* Hide the modal title (the container number is already inside the label = no duplicate); keep only
     the "Click any value to edit" hint on top. Desktop-only buttons stay dropped on mobile. */
  #labelTitle, .deskonly { display: none; }
  .modal .card.label-card { text-align: center; }   /* beat `.modal .card{text-align:left}` so content truly centers */
  .label-card .lab { text-align: center; }
  .btnrow { justify-content: center; }
  .labelgrid { display: flex; flex-direction: column; gap: 0; }
  .labelgrid > div { width: 100%; }   /* columns full width; content centers via text-align/flex */
  .labelgrid > div:last-child { order: -1; }          /* preview column first */
  .previewwrap { padding: 2px 0 16px; }
  #labelForm, #docsSection { display: none; }
  #labelModal.editing #labelForm, #labelModal.editing #docsSection { display: block; text-align: left; }
  .editonly { display: flex; }
  #mobActions { gap: 10px; margin: 10px 0 0; }
  #mobActions .btn { flex: 1; }

  /* iOS-style action sheet: Print label -> PDF / ZPL */
  .printsheet.on { display: flex; position: fixed; inset: 0; z-index: 60; align-items: flex-end;
    background: rgba(0,0,0,0.35); animation: fadein 0.15s ease; }
  .ps-panel { width: 100%; background: #f0f0f0; border-radius: 22px 22px 0 0; padding: 10px 12px 22px;
    box-shadow: 0 -10px 30px rgba(0,0,0,0.18); }
  .ps-title { text-align: center; font-size: 12px; color: #999; font-weight: 600; padding: 8px 0; }
  .ps-opt, .ps-cancel { display: block; width: 100%; border: none; font-family: inherit; font-size: 16px;
    font-weight: 600; color: #1a1a1a; padding: 15px; border-radius: 13px; cursor: pointer; margin-bottom: 8px; }
  .ps-opt { background: #fff; box-shadow: 2px 2px 6px rgba(0,0,0,0.06), -2px -2px 6px rgba(255,255,255,0.8); }
  .ps-cancel { background: #e4e4e4; font-weight: 700; margin-bottom: 0; }
}

/* ---- outbound 4x6 shipping label, rendered INSIDE a portal modal (never a separate page) ---- */
/* physical label (ported from shipping-label.html; shared by the editable preview + the print pages) */
.ship-label { width:4in; height:6in; background:#fff; color:#10323d; padding:0.2in 0.22in 0.16in; position:relative; overflow:hidden;
  font-family:Arial, Helvetica, sans-serif; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
#shipPreview .ship-label { box-shadow:0 6px 24px rgba(16,50,61,.16); border:1px solid #e2e8eb; margin:0 auto; }
.sl-logo { height:0.42in; margin:0 0 0.02in; display:block; }
.sl-logo-fallback { font-size:30px; font-weight:800; letter-spacing:.02em; color:#2596be; line-height:1; margin:0 0 0.05in; }
.sl-shipto-h { font-size:12.5px; font-weight:700; margin:0.02in 0 0.04in; }
.sl-shipto { font-size:12.5px; font-weight:700; line-height:1.22; }
.sl-kv { font-size:12.5px; font-weight:700; margin-top:0.10in; display:flex; }
.sl-kv .k { display:inline-block; width:0.62in; flex:0 0 auto; }
.sl-comments { font-size:12.5px; font-weight:700; margin-top:0.10in; }
.sl-block { font-size:11.5px; font-weight:700; line-height:1.45; padding-left:0.06in; }
.sl-gap-sm { height:0.12in; } .sl-gap-md { height:0.28in; }
.sl-foot { position:absolute; left:0.24in; right:0.22in; bottom:0.22in; font-size:8.5px; font-weight:700; line-height:1.3; }
/* inline-edit affordance: click a value on the label to edit it in place (like wm-incoming) */
.ship-label [data-shipedit] { cursor:text; border-radius:3px; padding:0 2px; margin:0 -2px; min-width:8px; display:inline-block; transition:background .12s; }
.ship-label [data-shipedit]:hover { background:#e8f4f9; }
.ship-label [data-shipedit]:focus { background:#e8f4f9; outline:none; box-shadow:inset 0 -2px 0 #2596be; }
.ship-label [data-shipedit]:empty::before { content:attr(data-ph); color:#b6c2c7; }
/* modal chrome: preview area + a small controls row */
#shipModal .card { max-width:520px; }
.ship-stage { display:flex; justify-content:center; padding:4px 0 10px; }
.ship-ctl { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:6px; }
.ship-ctl .lab { margin:0; }
.ship-ctl select.inset { width:auto; height:38px; }
#shipPrintArea { display:none; }
@media print {
  body.printing-ship * { visibility:hidden !important; }
  body.printing-ship #shipPrintArea, body.printing-ship #shipPrintArea * { visibility:visible !important; }
  body.printing-ship #shipPrintArea { display:block; position:absolute; left:0; top:0; }
  body.printing-ship #shipPrintArea .ship-label { page-break-after:always; box-shadow:none; border:0; }
  body.printing-ship #shipPrintArea .ship-label:last-child { page-break-after:auto; }
  body.printing-ship #shipPrintArea.a4 .ship-label { zoom:1.86; }
}
@media (max-width:600px) {
  #shipPreview { overflow:auto; }
  #shipPreview .ship-label { transform:scale(.82); transform-origin:top center; }
}

/* deploy 984631 */

/* ZPL / Zebra-USB options removed from the UI: these 3PLs (FDR, SCHC, Duchcov) print PDF
   (Rollo / A4 / office printer), never ZPL - showing Download-ZPL / USB-connect just confuses them.
   !important so it holds against the JS that toggles style.display on some of these. */
#zplBtn, #zplAllBtn, #usbConnect, #usbReady, #usbHint, #pmZpl { display: none !important; }

/* ---- Susie 3PL assistant (glass-iOS, System A refresh) ---- */
.susie-fab { position:fixed; right:20px; bottom:20px; z-index:60; display:flex; align-items:center; gap:11px;
  overflow:hidden; border:none; cursor:pointer; background:#2596be; color:#fff; font-family:inherit; font-weight:600; font-size:15px;
  padding:9px 24px 9px 9px; border-radius:999px 999px 7px 999px;   /* iMessage bubble: pointed bottom-right tail */
  box-shadow: 7px 10px 26px rgba(0,0,0,0.3), 0 4px 16px rgba(37,150,190,0.45); transition:all .15s; }
.susie-fab:hover { transform:translateY(-1px); background:#2ba0c9; box-shadow: 9px 13px 32px rgba(0,0,0,0.34), 0 6px 20px rgba(37,150,190,0.5); }
.susie-fab:active { transform:translateY(0); box-shadow: inset 2px 2px 8px rgba(0,0,0,0.25); }
/* No ring, no socket, no shadow - just Susie's face, clean and round. */
.susie-fab-face { width:42px; height:42px; border-radius:50%; object-fit:cover; flex:none; }
.susie-fab.shimmer::after { content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:linear-gradient(100deg, transparent 35%, rgba(255,255,255,0.38) 50%, transparent 65%);
  background-size:220% 100%; animation:susieShimmer 4.5s ease-in-out infinite; }
@keyframes susieShimmer { 0%{background-position:220% 0;} 100%{background-position:-220% 0;} }

/* one calm frosted-glass surface; Sediver blue used as accent only */
.susie-panel { position:fixed; right:20px; bottom:20px; z-index:61; width:392px; max-width:calc(100vw - 28px);
  height:600px; max-height:calc(100vh - 36px); display:flex; flex-direction:column; overflow:hidden;
  border-radius:28px; color:#0d1520;
  background:radial-gradient(120% 90% at 50% -10%, rgba(37,150,190,.06), transparent 60%), #eef0f2;
  box-shadow: 0 24px 60px rgba(0,0,0,.22), 0 2px 0 rgba(255,255,255,.7) inset; }
.susie-panel[hidden] { display:none; }
.susie-panel.expanded { width:520px; height:calc(100vh - 36px); }
.susie-orb { position:absolute; top:12%; left:50%; transform:translateX(-50%); width:340px; height:340px; border-radius:50%;
  background:#2596be; filter:blur(90px); opacity:.05; pointer-events:none; }

/* top bar */
.susie-bar { display:flex; align-items:center; gap:11px; padding:16px 18px; position:relative; z-index:2; }
.susie-ava { width:34px; height:34px; border-radius:50%; object-fit:cover; flex:none; box-shadow:0 0 0 2px rgba(37,150,190,.25); }
.susie-who { display:flex; flex-direction:column; line-height:1.1; min-width:0; }
.susie-who b { font-size:14px; font-weight:700; }
.susie-who span { font-size:11px; color:#6b7683; display:flex; align-items:center; gap:5px; }
.susie-dot { width:6px; height:6px; border-radius:50%; background:#22c55e; box-shadow:0 0 6px rgba(34,197,94,.6); flex:none; }
.susie-sp { flex:1; }
.susie-icn { width:32px; height:32px; border-radius:11px; display:flex; align-items:center; justify-content:center; color:#6b7683;
  background:rgba(255,255,255,.72); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); cursor:pointer; border:1px solid rgba(255,255,255,.65);
  box-shadow:8px 8px 24px rgba(0,0,0,.07), -8px -8px 24px rgba(255,255,255,.85), inset 0 1px 0 rgba(255,255,255,.7); }
.susie-icn:hover { color:#0d1520; }
.susie-icn svg { width:15px; height:15px; }

/* welcome (first open) */
.susie-welcome { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:0 26px; position:relative; z-index:2; }
.susie-welcome[hidden] { display:none; }
.susie-halo { position:relative; margin-bottom:22px; }
.susie-halo::before { content:''; position:absolute; inset:-14px; border-radius:50%; background:#2596be; filter:blur(26px); opacity:.28; }
.susie-halo img { position:relative; width:84px; height:84px; border-radius:50%; border:2px solid rgba(37,150,190,.4); box-shadow:0 12px 30px rgba(0,0,0,.16); object-fit:cover; }
#susieHello { font-size:26px; font-weight:700; letter-spacing:-.02em; line-height:1.2; margin-bottom:24px; max-width:340px; }

/* conversation thread */
.susie-thread { flex:1; overflow-y:auto; padding:8px 20px 4px; display:flex; flex-direction:column; gap:13px; position:relative; z-index:2; }
.susie-thread[hidden] { display:none; }
.susie-msg { max-width:82%; font-size:13.5px; line-height:1.5; padding:11px 15px; border-radius:20px; white-space:pre-wrap; word-break:break-word; }
.susie-msg.user { align-self:flex-end; background:#2596be; color:#fff; border-bottom-right-radius:6px; }
.susie-msg.bot { align-self:flex-start; background:rgba(255,255,255,.72); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.65); border-bottom-left-radius:6px;
  box-shadow:8px 8px 24px rgba(0,0,0,.07), -8px -8px 24px rgba(255,255,255,.85), inset 0 1px 0 rgba(255,255,255,.7); }
.susie-msg.typing::after { content:'...'; animation:susieDots 1.2s steps(4,end) infinite; }
@keyframes susieDots { 0%{opacity:.25;} 50%{opacity:1;} 100%{opacity:.25;} }

/* formatted-reply tokens */
.susie-brand { color:#2596be; font-weight:600; }
.susie-msg.bot strong { font-weight:700; }
.susie-tldr { display:inline-block; margin-top:4px; color:#2596be; }

/* chips: centered glass in welcome, vertical follow-ups in the thread */
.susie-chips { display:flex; flex-direction:column; gap:7px; align-items:flex-start; margin-top:1px; }
.susie-chips.center { flex-direction:row; flex-wrap:wrap; justify-content:center; gap:10px; max-width:520px; }
.susie-chips.lang { flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center; gap:9px; }
.susie-chip { text-align:left; max-width:100%; border:1px solid rgba(255,255,255,.65); font-family:inherit;
  font-size:12.5px; font-weight:500; line-height:1.3; padding:10px 15px; border-radius:16px; cursor:pointer; color:#0d1520;
  background:rgba(255,255,255,.72); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:8px 8px 24px rgba(0,0,0,.06), -8px -8px 24px rgba(255,255,255,.9); transition:.14s; }
.susie-chips.center .susie-chip { text-align:center; }
.susie-thread .susie-chip { color:#2596be; padding:8px 13px; border-radius:14px;
  box-shadow:3px 3px 8px rgba(0,0,0,.05), -3px -3px 8px rgba(255,255,255,.9); }
.susie-chip:hover { transform:translateY(-1px); box-shadow:10px 10px 26px rgba(0,0,0,.1), -10px -10px 26px rgba(255,255,255,.95); }
.susie-chip:active { transform:translateY(0); box-shadow:inset 2px 2px 5px rgba(0,0,0,.08); }

/* composer: frosted pill + round accent send */
.susie-composer { padding:14px 18px 18px; position:relative; z-index:2; }
.susie-inbar { display:flex; align-items:center; gap:10px; border-radius:999px; padding:7px 8px 7px 18px;
  background:rgba(255,255,255,.72); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,.65);
  box-shadow:8px 8px 24px rgba(0,0,0,.07), -8px -8px 24px rgba(255,255,255,.85), inset 0 1px 0 rgba(255,255,255,.7); }
.susie-inbar input { flex:1; border:none; background:transparent; outline:none; font-family:inherit; font-size:14px; color:#0d1520; min-width:0; }
.susie-inbar input::placeholder { color:#9aa4af; }
.susie-snd { width:40px; height:40px; flex:0 0 40px; border-radius:50%; border:none; cursor:pointer; background:#2596be; color:#fff;
  display:flex; align-items:center; justify-content:center; padding:0; box-shadow:0 6px 16px rgba(37,150,190,.4); transition:background .12s, transform .12s; }
.susie-snd:hover { background:#2aa3cf; }
.susie-snd:active { transform:scale(.94); }
.susie-snd:disabled { opacity:.4; cursor:default; }
.susie-snd svg { width:18px; height:18px; display:block; }

@media (max-width:600px) {
  .susie-panel { right:10px; left:10px; bottom:10px; width:auto; height:calc(100vh - 20px); max-height:none; }
  .susie-panel.expanded { width:auto; }
  #susieHello { font-size:23px; }
}

/* THE container label (same builder as wm-incoming-label / the 900185 PDF) rendered inside the
   incoming modal, edited in place. Root class .clbl so the simple .lbl base never interferes. */
.clbl { --u: calc(4in / 823); position:relative; width:calc(823 * var(--u)); height:calc(1167 * var(--u)); background:#fff; color:#000; font-family:Arial, Helvetica, sans-serif; overflow:hidden; box-shadow:0 8px 28px rgba(16,50,61,.18); }
.clbl .box { position:absolute; left:calc(14 * var(--u)); top:calc(20 * var(--u)); width:calc(778 * var(--u)); height:calc(1100 * var(--u)); border:max(1px, calc(3 * var(--u))) solid #000; border-radius:calc(18 * var(--u)); }
.clbl .ln { position:absolute; background:#000; }
.clbl .tx { position:absolute; font-weight:700; line-height:1; white-space:nowrap; }
.clbl .ctr { width:calc(823 * var(--u)); left:0 !important; text-align:center; }
.clbl .wrap2 { white-space:normal; text-align:center; }
.clbl img.logo { position:absolute; }
.clbl svg.bc { position:absolute; }
.clbl [data-edit] { cursor:text; border-radius:3px; }
.clbl [data-edit]:hover { outline:1.5px dashed rgba(37,150,190,.55); outline-offset:2px; }
.clbl [data-edit]:focus { outline:2px solid #2596be; outline-offset:2px; background:rgba(37,150,190,.06); }
.clbl [data-edit]:empty::before { content:'\00a0\00a0\00a0\00a0\00a0'; background:#eef7fb; border-radius:3px; }
@media print { .clbl { box-shadow:none; } }

/* white rounded preview card: holds the black-bordered label, the label stepper, and the edit hint */
.preview-card { background:#fff; border-radius:22px; padding:18px 18px 14px; display:flex; flex-direction:column; align-items:center; gap:12px;
  box-shadow:0 10px 30px rgba(16,50,61,.14), inset 0 0 0 1px rgba(0,0,0,.05); }
.preview-card .previewwrap { padding:0; }
.preview-card .clbl { box-shadow:none; }                 /* the card provides the elevation now */
.preview-foot { display:flex; flex-direction:column; align-items:center; gap:9px; }
.preview-cap { font-size:11px; color:#9aa4af; letter-spacing:.02em; }   /* the edit hint, UNDER the label */
/* minimalist label stepper: <-  3 / 37  -> */
.preview-nav { display:inline-flex; align-items:center; gap:12px; }
.preview-nav .pnav-btn { box-shadow:none; background:transparent; color:#2596be; width:30px; height:30px; font-size:17px; border-radius:9px; }
.preview-nav .pnav-btn:hover:not(:disabled) { background:rgba(37,150,190,.1); transform:none; }
.preview-nav .pnav-btn:disabled { opacity:.3; }
.preview-nav .pnav-lab { min-width:48px; font-size:13px; font-weight:600; color:#1a1a1a; }
.preview-nav .pnav-id { display:none; }
#labelModal.inplace #previewCaption { text-align:center; }

/* ---- 3PL Predictor executive monitor (monitor.html, admin only) ---- */
/* Apple restraint: one surface (#f0f0f0), two shadows, one accent. Phone-first (max 430px column). */
.mon-wrap { max-width:430px; margin:0 auto; padding:18px 16px calc(28px + env(safe-area-inset-bottom)); min-height:100dvh; }
.mon-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.mon-top img { height:22px; width:auto; }
.mon-hero { padding:34px 24px 26px; text-align:center; margin-bottom:22px; }
.mon-hero-num { font-size:64px; font-weight:800; letter-spacing:-0.03em; color:#1a1a1a; line-height:1; }
.mon-hero.clear .mon-hero-num { color:#10b981; }
.mon-hero-label { margin-top:8px; font-size:14px; color:#666; }
.mon-live { margin-top:14px; display:inline-flex; align-items:center; gap:7px; font-size:11.5px; color:#999; }
.mon-dot { width:7px; height:7px; border-radius:50%; background:#2596be; animation:monPulse 2.4s ease-in-out infinite; }
@keyframes monPulse { 0%,100% { opacity:1; } 50% { opacity:0.35; } }
.mon-sec-title { font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:#999; margin:0 4px 10px; }
.mon-section { margin-bottom:22px; }
.mon-card { padding:16px 18px; margin-bottom:12px; border-radius:20px; }
.mon-card-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.mon-kind { font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:#2596be; }
.mon-age { font-size:11px; color:#999; }
.mon-age.ok { color:#10b981; font-weight:600; }
.mon-title { font-size:13px; font-weight:600; color:#1a1a1a; margin-bottom:10px; }
.mon-nums { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.mon-num { font-size:15px; color:#666; font-variant-numeric:tabular-nums; }
.mon-num.strong { font-size:17px; font-weight:700; color:#1a1a1a; }
.mon-sep { font-size:12px; color:#aaa; }
.mon-delta { font-size:13px; font-weight:700; color:#1a1a1a; background:#e8e8e8; border-radius:999px; padding:2px 10px;
  box-shadow: inset 1px 1px 3px rgba(0,0,0,0.06), inset -1px -1px 3px rgba(255,255,255,0.7); font-variant-numeric:tabular-nums; }
.mon-note { margin-top:9px; font-size:12.5px; color:#999; line-height:1.5; }
.mon-value { margin-top:10px; display:inline-block; font-size:12px; font-weight:600; color:#1a1a1a; background:#e8e8e8;
  border-radius:999px; padding:4px 12px; font-variant-numeric:tabular-nums;
  box-shadow: inset 1px 1px 3px rgba(0,0,0,0.06), inset -1px -1px 3px rgba(255,255,255,0.7); }
.mon-done { opacity:0.75; }
.mon-done .mon-title { color:#666; }
.mon-resnote { margin-top:9px; font-size:12px; color:#10b981; line-height:1.5; }
.mon-foot { margin:8px 4px 0; font-size:11px; color:#bbb; line-height:1.6; text-align:center; }

/* ETA cell a partner can fill in (the carrier phones the date in - the feed has none for CN/CZ). */
td.etacell { cursor:pointer; }
td.etacell:hover { background:#f6fafc; }
.etaadd { color:#8b93a1; font-size:12px; border-bottom:1px dashed #c8d0da; }
.etaedit { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.etain { font:inherit; font-size:13px; padding:4px 6px; border:1px solid #c8d0da; border-radius:6px; background:#fff; }

/* Mandatory shipment-status confirmation - iOS Liquid Glass, Tinder-easy (Rais 2026-09-02).
   Wide card (holds more, less scroll), centered header, two BIG choices with OR between them. */
#awaitModal .card { text-align:center; max-width:720px; width:94vw; padding:28px 26px 24px; border-radius:28px;
  background:rgba(255,255,255,0.94); backdrop-filter:blur(26px) saturate(1.7); -webkit-backdrop-filter:blur(26px) saturate(1.7);
  box-shadow:0 26px 64px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.75); }
#awaitModal.on .card { animation:awaitpop 0.34s cubic-bezier(0.22,1,0.36,1); }
@keyframes awaitpop { from { opacity:0; transform:translateY(14px) scale(0.97); } to { opacity:1; transform:none; } }
#awaitModal .zhead { display:block; margin-bottom:2px; }
#awaitModal .zico { display:none; }                        /* drop the emoji: the bold title carries it */
#awaitModal .zhead h3 { font-size:23px; font-weight:700; letter-spacing:-0.3px; color:#111; margin:0; text-align:center; }
#awaitModal .sub { font-size:13px; color:#8a9099; line-height:1.5; margin:6px auto 0; max-width:480px; text-align:center; }
/* ONE decision at a time (Apple HIG: clarity + deference). A single calm container, lots of
   whitespace, one clear action + one quiet escape. No wall of colour. */
#awaitModal { overflow:hidden; }                 /* clip the flying card at the screen edge */
#awaitModal .card { max-width:400px; }
.awaitlist { margin-top:14px; }
/* A deck: the active card sits on top, faint stacked cards peek behind it (Tinder depth). */
.awaitdeck { position:relative; padding-bottom:30px; }
/* Premium mesh-gradient card (Sediver blues) - the reference look, on-brand, no text noise, retina-crisp.
   A CSS mesh beats a generated raster here: tiny, sharp at any size, exact colour, CSP/isolation-safe. */
.awaitcard { border:none; border-radius:22px; overflow:hidden; color:#fff;
  background:
    radial-gradient(115% 130% at 8% 0%, #34b3e0 0%, rgba(52,179,224,0) 52%),
    radial-gradient(120% 120% at 100% 8%, #2596be 0%, rgba(37,150,190,0) 48%),
    radial-gradient(130% 140% at 92% 100%, #123f63 0%, rgba(18,63,99,0) 55%),
    linear-gradient(140deg, #164a70 0%, #0e2c46 100%);
  box-shadow:0 16px 40px rgba(14,44,70,0.42);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:28px 18px 28px; min-height:154px; }
.awaitcard.active { position:relative; z-index:3; animation:awaitcardin 0.42s cubic-bezier(.2,.85,.25,1);
  transition:transform 0.42s cubic-bezier(.45,.05,.3,1), opacity 0.42s ease; will-change:transform, opacity; }
.awaitcard.ghost { position:absolute; left:0; right:0; top:0; pointer-events:none; }
.awaitcard.g1 { transform:translateY(15px) scale(0.95); opacity:0.5; z-index:2; }
.awaitcard.g2 { transform:translateY(30px) scale(0.9); opacity:0.28; z-index:1; }
.awaitcard.fly-right { animation:none; transform:translateX(140%) rotate(15deg); opacity:0; }
.awaitcard.fly-left  { animation:none; transform:translateX(-140%) rotate(-15deg); opacity:0; }
@keyframes awaitcardin { from { opacity:0; transform:translateY(30px) scale(0.94); } to { opacity:1; transform:none; } }
.awaitcard .awaitprog { font-size:11px; font-weight:700; letter-spacing:2px; color:rgba(255,255,255,0.62); text-transform:uppercase; }
.awaitcard .awaitc { font-size:29px; font-weight:700; letter-spacing:-0.5px; color:#fff; margin-top:16px; word-break:break-word; text-shadow:0 1px 12px rgba(0,0,0,0.25); }
.awaitcard .awaitm { font-size:13px; color:rgba(255,255,255,0.72); margin-top:8px; }
.awaitacts { display:flex; flex-direction:row; align-items:stretch; gap:12px; width:100%; margin-top:18px; }
.awaitship { flex:1; min-height:52px; height:52px; font-size:16px; font-weight:600; border-radius:16px; font-family:inherit; cursor:pointer;
  background:#2fb457; color:#fff; border:none; box-shadow:0 8px 22px rgba(47,180,87,0.32); transition:transform 0.12s ease, box-shadow 0.12s ease; }
.awaitship:hover { box-shadow:0 10px 28px rgba(47,180,87,0.42); }
.awaitship:active { transform:scale(0.97); }
.awaitnot { flex:1; min-height:52px; height:52px; font-size:16px; font-weight:600; border-radius:16px; font-family:inherit; cursor:pointer;
  background:#fff; border:1.5px solid #ff453a; color:#ff453a; transition:transform 0.12s ease, background 0.12s, color 0.12s; }
.awaitnot:hover { background:#ff453a; color:#fff; }
.awaitnot:active { transform:scale(0.97); }