/* Fulfilled tab — order lookup. Scoped entirely under #flkRoot; colours adapted from the
existing RMS palette already used across fulfilment.js (blue #2563eb, green #16a34a,
amber #d97706, red #dc2626) rather than the mockup's bespoke tokens. */
#flkRoot{
--flk-ink:#14213D; --flk-ink2:#4A5673; --flk-ink3:#8590A6;
--flk-line:#E2E6ED; --flk-line2:#EEF1F5; --flk-card:#fff;
--flk-blue:#2563eb; --flk-blue-wash:#EAF0FE;
--flk-scan:#16a34a; --flk-scan-wash:#E5F4EC;
--flk-mark:#d97706; --flk-mark-wash:#FBF0DC;
--flk-unlinked:#7c3aed; --flk-unlinked-wash:#F3EEFE;
--flk-warn:#dc2626; --flk-warn-wash:#FDECEA;
font-variant-numeric:tabular-nums;
}
#flkRoot *{box-sizing:border-box}
#flkRoot button,#flkRoot input,#flkRoot select,#flkRoot textarea{font:inherit;color:inherit}
#flkRoot .flk-find{margin:14px 0;background:var(--flk-ink);border-radius:12px;padding:16px 16px 12px;color:#fff}
#flkRoot .flk-find-row{display:flex;gap:10px;align-items:center}
#flkRoot .flk-find-input{flex:1;display:flex;align-items:center;gap:10px;background:#fff;border-radius:9px;padding:0 12px;height:48px}
#flkRoot .flk-find-input svg{flex:none;color:var(--flk-ink3)}
#flkRoot .flk-find-input input{flex:1;border:0;outline:0;font-size:16px;height:100%;background:none;color:var(--flk-ink);min-width:0}
#flkRoot .flk-kbd{border:1px solid rgba(255,255,255,.25);border-radius:5px;padding:1px 7px;font-size:11px;color:#cfd6e6}
#flkRoot .flk-btn-export{height:48px;padding:0 14px;border-radius:9px;border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff;cursor:pointer;font-weight:600;white-space:nowrap}
#flkRoot .flk-btn-export:hover{background:rgba(255,255,255,.08)}
#flkRoot .flk-filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px}
#flkRoot .flk-seg{display:inline-flex;background:var(--flk-card);border:1px solid var(--flk-line);border-radius:8px;padding:3px;flex-wrap:wrap}
#flkRoot .flk-seg button{border:0;background:none;padding:5px 10px;border-radius:6px;cursor:pointer;color:var(--flk-ink2);font-weight:500;font-size:13px}
#flkRoot .flk-seg button[aria-pressed="true"]{background:var(--flk-ink);color:#fff}
#flkRoot .flk-sel{height:32px;border:1px solid var(--flk-line);border-radius:8px;background:var(--flk-card);padding:0 8px;color:var(--flk-ink2);font-size:13px}
#flkRoot .flk-spacer{flex:1}
#flkRoot .flk-issues-lbl{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;color:var(--flk-ink2)}
#flkRoot .flk-summary{display:flex;flex-wrap:wrap;gap:6px 20px;padding:10px 2px 14px;border-bottom:1px solid var(--flk-line);color:var(--flk-ink2);font-size:13px}
#flkRoot .flk-summary b{color:var(--flk-ink);font-size:14px;font-weight:700;margin-right:4px}
#flkRoot .flk-split{display:grid;grid-template-columns:minmax(340px,420px) 1fr;background:var(--flk-card);border:1px solid var(--flk-line);border-radius:0 0 12px 12px}
#flkRoot .flk-results{border-right:1px solid var(--flk-line);overflow:auto;max-height:720px}
#flkRoot .flk-day{position:sticky;top:0;background:#FAFBFC;border-bottom:1px solid var(--flk-line2);padding:6px 14px;font-size:12px;color:var(--flk-ink3);display:flex;justify-content:space-between;z-index:1}
#flkRoot .flk-row{display:grid;grid-template-columns:36px 1fr auto;gap:10px;padding:11px 14px;border-bottom:1px solid var(--flk-line2);cursor:pointer;align-items:center;border-left:3px solid transparent;background:none;width:100%;text-align:left}
#flkRoot .flk-row:hover{background:#FAFBFD}
#flkRoot .flk-row[aria-selected="true"]{background:var(--flk-blue-wash);border-left-color:var(--flk-blue)}
#flkRoot .flk-row .flk-id{font-weight:600;font-size:13.5px}
#flkRoot .flk-row .flk-sub{color:var(--flk-ink3);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
#flkRoot .flk-row .flk-right{text-align:right;font-size:12px;color:var(--flk-ink2)}
#flkRoot mark{background:#FFE58F;color:inherit;border-radius:2px;padding:0 1px}
/* Product thumbnails — fixed width/height on the ![]()
itself too, so a slow/lazy load never
shifts the row/item layout. Broken images are swapped for this same empty box by a delegated
(capture-phase — img error events don't bubble) listener, never a browser broken-image icon. */
#flkRoot .flk-thumb{border-radius:8px;object-fit:cover;flex:none;display:block;background:var(--flk-line2)}
#flkRoot .flk-thumb-empty{border:1px solid var(--flk-line)}
#flkRoot .flk-loadmore{width:100%;padding:10px;border:0;border-top:1px solid var(--flk-line2);background:#FAFBFD;color:var(--flk-blue);cursor:pointer;font-weight:600}
/* Custom date range: the two inputs are one control, so they sit in one box and carry their
own labels. [hidden] needs the explicit display:none because the flex rule would beat it. */
#flkRoot .flk-daterange{display:inline-flex;align-items:center;gap:8px}
#flkRoot .flk-daterange[hidden]{display:none}
#flkRoot .flk-daterange-l{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--flk-ink3)}
/* Sized up from 11px/2px-8px. These now carry the carrier status — the thing people scan the
header for — and at the old size it sat below the order number in visual weight while being
the more perishable fact. The row-level chips in the list are left alone: they are read as a
column, not as a headline. */
#flkRoot .flk-chip{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;padding:4px 11px;border-radius:999px;white-space:nowrap}
#flkRoot .flk-results .flk-chip{font-size:11px;padding:2px 8px}
#flkRoot .flk-chip.scan{background:var(--flk-scan-wash);color:var(--flk-scan)}
#flkRoot .flk-chip.mark{background:var(--flk-mark-wash);color:var(--flk-mark)}
#flkRoot .flk-chip.unlinked{background:var(--flk-unlinked-wash);color:var(--flk-unlinked)}
/* PARKED — the same purple the Pick & Pack band and the topbar pill use, so the chip here and
the place the order actually sits read as one feature. Deliberately not reusing any of the
three above: those describe HOW an order was packed, and a parked one was never packed. */
#flkRoot .flk-chip.parked{background:#f5f3ff;color:#6d28d9}
#flkRoot .flk-chip.warn{background:var(--flk-warn-wash);color:var(--flk-warn)}
#flkRoot .flk-chip.plain{background:#EEF1F6;color:var(--flk-ink2)}
#flkRoot .flk-empty{padding:40px 20px;text-align:center;color:var(--flk-ink2)}
#flkRoot .flk-empty strong{display:block;color:var(--flk-ink);font-size:15px;margin-bottom:4px}
#flkRoot .flk-detail{padding:20px 24px 28px;overflow:auto;max-height:720px}
#flkRoot .flk-d-head{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-start}
#flkRoot .flk-d-id{font-size:22px;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
#flkRoot .flk-copy{border:1px solid var(--flk-line);background:var(--flk-card);border-radius:6px;padding:3px 8px;font-size:12px;cursor:pointer;color:var(--flk-ink2)}
/* The Track link is an , so it needs the button's box back plus link resets. */
#flkRoot .flk-track{display:inline-block;text-decoration:none;margin-left:6px;font-weight:600}
#flkRoot .flk-track:hover{border-color:var(--flk-ink3);color:var(--flk-ink)}
#flkRoot .flk-d-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;align-items:center}
#flkRoot .flk-actions{display:flex;gap:8px;flex-wrap:wrap}
#flkRoot .flk-btn{height:34px;padding:0 13px;border-radius:8px;border:1px solid var(--flk-line);background:var(--flk-card);cursor:pointer;font-weight:600;font-size:13px}
#flkRoot .flk-btn:hover{border-color:#C9D0DC}
#flkRoot .flk-btn.primary{background:var(--flk-ink);color:#fff;border-color:var(--flk-ink)}
#flkRoot .flk-btn.danger{color:var(--flk-warn)}
#flkRoot .flk-btn:disabled{opacity:.55;cursor:default}
/* Fixed at repeat(4,1fr) with per-child border rules, this broke the moment a fifth fact was
added (Carrier status): :last-child dropped the divider on whichever fact happened to wrap
into the next row, and nothing drew a divider BETWEEN rows. A 1px gap over a line-coloured
background draws every divider — horizontal and vertical — for any number of facts in any
wrap, so the grid no longer has to be told how many there are. */
#flkRoot .flk-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
margin:18px 0 22px;background:var(--flk-line);border:1px solid var(--flk-line);border-radius:12px;overflow:hidden}
#flkRoot .flk-fact{padding:12px 14px;background:var(--flk-card)}
#flkRoot .flk-fact dt{color:var(--flk-ink3);font-size:12px}
#flkRoot .flk-fact dd{margin:3px 0 0;font-weight:600;font-size:14px}
#flkRoot .flk-fact dd small{display:block;font-weight:400;color:var(--flk-ink2);font-size:12px}
#flkRoot .flk-d-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:24px}
#flkRoot h3{font-size:14px;margin:0 0 10px;font-weight:700;color:var(--flk-ink)}
#flkRoot .flk-tl{list-style:none;margin:0;padding:0}
#flkRoot .flk-tl li{display:grid;grid-template-columns:20px 1fr auto;gap:10px;padding-bottom:16px;position:relative}
#flkRoot .flk-tl li::before{content:"";position:absolute;left:9px;top:18px;bottom:0;width:2px;background:var(--flk-line)}
#flkRoot .flk-tl li:last-child::before{display:none}
#flkRoot .flk-dot{width:20px;height:20px;border-radius:50%;border:2px solid var(--flk-line);background:var(--flk-card);display:grid;place-items:center;font-size:10px;position:relative;z-index:1}
#flkRoot .flk-tl .done .flk-dot{border-color:var(--flk-blue);background:var(--flk-blue);color:#fff}
#flkRoot .flk-tl .scanned .flk-dot{border-color:var(--flk-scan);background:var(--flk-scan);color:#fff}
#flkRoot .flk-tl .marked .flk-dot{border-color:var(--flk-mark);background:var(--flk-mark);color:#fff}
#flkRoot .flk-tl .unlinked .flk-dot{border-color:var(--flk-unlinked);background:var(--flk-unlinked);color:#fff}
#flkRoot .flk-tl .parked .flk-dot{border-color:#7c3aed;background:#7c3aed;color:#fff}
#flkRoot .flk-tl .parked .t{color:#6d28d9}
#flkRoot .flk-tl .gap .flk-dot{border-style:dashed}
/* PARKED — its own control, outside the segmented method group, and purple at all times.
The four method pills answer "how was this packed?"; a parked order was never packed, so it
is not one of them. Inside that group it also inherited their neutral styling, which made
the one state meaning "orders are stuck" look exactly like the three that mean nothing is
wrong. Soft fill at rest, solid when it is the active filter — so it reads as a standing
condition either way, and still shows whether it is on. */
#flkRoot .flk-parked-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid #ddd6fe;
background:#f5f3ff;color:#6d28d9;font-weight:700;font-size:13px;padding:6px 12px;
border-radius:8px;cursor:pointer;white-space:nowrap}
#flkRoot .flk-parked-btn:hover{background:#ede9fe;border-color:#c4b5fd}
#flkRoot .flk-parked-btn[aria-pressed="true"]{background:#7c3aed;border-color:#7c3aed;color:#fff}
#flkRoot .flk-parked-n{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;
border-radius:999px;background:#7c3aed;color:#fff;font-size:12px;font-variant-numeric:tabular-nums}
#flkRoot .flk-parked-btn[aria-pressed="true"] .flk-parked-n{background:rgba(255,255,255,.25)}
/* Nothing parked: still present (a control that vanishes moves the row under the cursor), just
not shouting. */
#flkRoot .flk-parked-btn.none{background:var(--flk-card);border-color:var(--flk-line);color:var(--flk-ink2);font-weight:500}
#flkRoot .flk-parked-btn.none .flk-parked-n{background:var(--flk-line);color:var(--flk-ink2)}
/* Pending is a segmented option like Scanned/Marked/Unlinked, so it needs no button styling of
its own — only the state chip, which must not borrow the parked purple: purple already means
"somebody deliberately held this", and pending means "waiting its turn". */
#flkRoot .flk-chip.pending{background:#fffbeb;color:#b45309}
#flkRoot .flk-tl .t{font-weight:600;font-size:13px}
#flkRoot .flk-tl .w{color:var(--flk-ink2);font-size:12.5px}
#flkRoot .flk-tl .when{text-align:right;font-size:12.5px;color:var(--flk-ink2);white-space:nowrap}
#flkRoot .flk-items{border:1px solid var(--flk-line);border-radius:12px;overflow:hidden}
#flkRoot .flk-item{display:grid;grid-template-columns:44px 1fr auto;gap:10px;padding:11px 13px;border-bottom:1px solid var(--flk-line2);align-items:center}
#flkRoot .flk-item:last-child{border-bottom:0}
#flkRoot .flk-item .flk-n{font-weight:600;font-size:13px}
#flkRoot .flk-item .flk-s{color:var(--flk-ink3);font-size:12px}
#flkRoot .flk-qty{text-align:right;font-weight:700;font-size:13px}
#flkRoot .flk-qty small{display:block;font-weight:500;font-size:11.5px}
#flkRoot .flk-ok{color:var(--flk-scan)} #flkRoot .flk-nosc{color:var(--flk-mark)}
#flkRoot .flk-panel{border:1px solid var(--flk-line);border-radius:12px;padding:12px 14px;margin-top:16px}
#flkRoot .flk-note{margin-top:16px;padding:10px 13px;border-radius:8px;background:var(--flk-mark-wash);color:#6B4A10;font-size:12.5px}
#flkRoot .flk-note.info{background:#F0F3F8;color:var(--flk-ink2)}
#flkRoot dialog{border:0;border-radius:12px;padding:20px;width:min(420px,92vw)}
#flkRoot dialog::backdrop{background:rgba(20,33,61,.4)}
#flkRoot dialog h4{margin:0 0 6px;font-size:16px}
#flkRoot dialog p{margin:0 0 12px;color:var(--flk-ink2);font-size:13px}
#flkRoot dialog label{display:block;font-size:12.5px;color:var(--flk-ink2);margin-bottom:5px}
#flkRoot dialog select,#flkRoot dialog textarea{width:100%;border:1px solid var(--flk-line);border-radius:8px;padding:7px 9px;font:inherit;margin-bottom:10px}
#flkRoot .flk-dlg-actions{display:flex;justify-content:flex-end;gap:8px}
/* The facts grid now wraps on its own (auto-fit), so the nth-child border patching that used
to live here is gone with the borders it was patching. */
@media (max-width:1100px){#flkRoot .flk-d-grid{grid-template-columns:1fr}}
@media (max-width:820px){#flkRoot .flk-split{grid-template-columns:1fr}#flkRoot .flk-results{border-right:0;max-height:none}#flkRoot .flk-detail{border-top:1px solid var(--flk-line);max-height:none}}
/* ── Bulk select (Parked view only) ──────────────────────────────────────────
The checkbox sits BESIDE the row, never inside it: the row is a