@tokenoftrust/storefront-runner 2.0.2 → 2.0.4

package/apps/storefront/src/components/admin/orders/OrdersWorkspace.astro

@@ -1,1223 +0,0 @@
----
-/**
- * Orders tab (baseline §Orders), wired to the live orders view model
- * (lib/admin/services/mock, from data-view-contracts). Built as a standalone
- * component under components/admin/orders/** per decision
- * `parallelize-orders-read-surface` — the integrator wires the tab mount in
- * admin.astro at consolidation, not this unit.
- *
- * SHELL CONTRACT (see admin.astro's doc comment): this component owns the
- * `#orders` / data-agent-scope="orders" section root — copy its markup
- * wholesale into that role, do not nest it inside another tab-panel root.
- *
- * Order Assist (baseline §Orders) uses the ai-evidence-substrate model
- * directly (AiRecommendation + EvidenceReference) rather than inventing a
- * parallel "suggestion" shape, per lib/admin/README's own guidance. It is
- * explanation-only: hold explanation, safest next action, and an early
- * dispute-evidence timeline — never an auto-action, so approvalMode is
- * always draft_only or approval_required, never guarded_automation.
- */
-import { getEvidenceViewModel } from "@/lib/admin/services/mock";
-import {
-  getOrdersViewModelResult,
-  emptyOrdersViewModel,
-  parseOrderFilters,
-  type OrdersLoadStatus,
-} from "@/lib/admin/services/orders";
-import { createCheckoutOrderClient, orderApiBaseUrl } from "@/lib/admin/orderClient";
-import { readEnv } from "@/lib/env";
-import { ORDER_SHIP_STATE_LABEL, type OrderRow } from "@/lib/admin/viewmodels/orders";
-import type { AdminTenantEnvelope } from "@/lib/admin/envelope";
-import type { AiRecommendation } from "@/lib/admin/ai/recommendation";
-import type { EvidenceReference } from "@/lib/admin/evidence/evidenceReference";
-
-interface Props {
-  envelope: AdminTenantEnvelope;
-}
-
-const { envelope } = Astro.props;
-const cspNonce = Astro.locals.cspNonce;
-
-// Real orders: fetch this tenant's checkout orders via the checkout order client
-// and map to the view model. The per-tenant bearer is a server-side Worker secret;
-// absent (or any upstream error) → an empty-but-valid model so the tab still
-// renders. Live data is gated on the ToT-core orders
-// endpoint — until then this resolves empty on qa.
-const orderBearer = await readEnv("FOXY_ORDER_API_KEY");
-// Server-backed filters + pagination: the queue filter + cursor come from
-// the URL and are applied by the order API server-side; payment/search remain
-// client-side refinements on the returned page.
-const orderFilters = parseOrderFilters(Astro.url.searchParams);
-const ordersResult = orderBearer
-  ? await getOrdersViewModelResult({
-      targetTenant: envelope.targetTenant,
-      client: createCheckoutOrderClient({
-        baseUrl: orderApiBaseUrl(Astro.locals.customizationEnv),
-        appDomain: envelope.targetTenant,
-        bearer: orderBearer,
-      }),
-      filters: orderFilters,
-    })
-  : { status: "not_configured" as OrdersLoadStatus, vm: emptyOrdersViewModel(envelope.targetTenant), page: null };
-const vm = ordersResult.vm;
-const ordersStatus = ordersResult.status;
-// Preserve current query params (queue/payment/etc.) when building the next page link.
-const nextPageHref = ordersResult.page?.nextCursor
-  ? (() => {
-      const p = new URLSearchParams(Astro.url.search);
-      p.set("cursor", ordersResult.page.nextCursor);
-      return `?${p.toString()}`;
-    })()
-  : null;
-const evidenceGraph = getEvidenceViewModel(envelope);
-
-function evidenceForOrder(orderId: string): EvidenceReference[] {
-  const orderRef = evidenceGraph.find((e) => e.kind === "order" && e.recordId === orderId);
-  if (!orderRef) return [];
-  const related = evidenceGraph.filter((e) => orderRef.relatedRefs.includes(e.id));
-  const timeline = evidenceGraph.filter((e) => e.relatedRefs.includes(orderRef.id));
-  return [orderRef, ...related, ...timeline];
-}
-
-function buildOrderAssist(row: OrderRow, evidenceRefs: EvidenceReference[]): AiRecommendation {
-  const refIds = evidenceRefs.map((e) => e.id);
-  if (!row.blocker) {
-    return {
-      summary: `No blockers — ${row.nextStep.toLowerCase()} to move this order along.`,
-      confidence: 0.95,
-      evidenceRefs: refIds,
-      owner: "Ops",
-      approvalMode: "draft_only",
-      auditTrail: [],
-    };
-  }
-  const owner = row.blocker === "Age verification hold" ? "Trust & Safety" : row.blocker === "Manual review" ? "Risk" : "Ops";
-  return {
-    summary: `${row.blocker} is blocking shipment. Safest next action: ${row.nextStep.toLowerCase()}.`,
-    confidence: 0.7,
-    evidenceRefs: refIds,
-    owner,
-    approvalMode: "approval_required",
-    auditTrail: [],
-  };
-}
-
-const SHIP_TONE: Record<OrderRow["shipState"], string> = {
-  hold_review_required: "amber",
-  ready_to_ship: "green",
-  unfulfilled: "teal",
-  completed: "teal",
-};
-
-const PAYMENT_TONE: Record<OrderRow["payment"], string> = {
-  authorized: "amber",
-  captured: "green",
-  refunded: "red",
-};
-
-const QUEUE_TONE: Record<string, string> = {
-  needs_attention: "amber",
-  ready_to_ship: "green",
-  unfulfilled: "teal",
-  all: "",
-  completed: "",
-};
-
-function queueKeysFor(row: OrderRow): string[] {
-  const keys = ["all"];
-  if (row.shipState === "hold_review_required") keys.push("needs_attention", "unfulfilled");
-  if (row.shipState === "ready_to_ship") keys.push("ready_to_ship", "unfulfilled");
-  if (row.shipState === "completed") keys.push("completed");
-  return keys;
-}
-
-const defaultQueue = vm.queues.find((q) => q.key === "needs_attention" && q.count > 0) ? "needs_attention" : "all";
-const defaultRow =
-  vm.rows.find((r) => r.shipState === "hold_review_required") ?? vm.rows[0] ?? null;
-
-const holdCount = vm.rows.filter((r) => r.shipState === "hold_review_required").length;
----
-
-<section id="orders" class="band orders-tab" aria-labelledby="admin-tab-orders orders-title" data-admin-panel data-agent-scope="orders" role="tabpanel" data-orders-target-tenant={vm.targetTenant}>
-  <div class="section-title orders-title-row">
-    <div>
-      <h2 id="orders-title">Orders</h2>
-      <p>Work the exceptions first, then clear ready shipments without opening every record.</p>
-    </div>
-    <div class="actions orders-primary-actions">
-      <button class="icon-btn" type="button" aria-label="Refresh orders" title="Refresh orders" data-orders-refresh><svg><use href="#i-refresh"></use></svg></button>
-      <button class="btn" type="button"><svg><use href="#i-export"></use></svg>Export</button>
-      <button class="btn primary" type="button"><svg><use href="#i-truck"></use></svg>Ship ready</button>
-    </div>
-  </div>
-
-  <div class="orders-command-strip" aria-label="Order queues">
-    <div class="orders-queue-list" role="list" data-orders-queue-list>
-      {vm.queues.map((queue) => (
-        <button
-          type="button"
-          class:list={["orders-queue-card", { active: queue.key === defaultQueue }]}
-          data-orders-queue-button
-          data-queue-key={queue.key}
-        >
-          <span class:list={["chip", QUEUE_TONE[queue.key] ?? ""]}>{queue.label}</span>
-          <strong>{queue.count}</strong>
-          <small>{queue.detail}</small>
-        </button>
-      ))}
-    </div>
-    <details class="orders-today-summary">
-      <summary>
-        <span>Today</span>
-        <strong>${vm.today.grossSales.toFixed(2)}</strong>
-        <small>{vm.today.paidOrders} paid orders</small>
-      </summary>
-      <div>
-        <p><b>Average order</b><span>${vm.today.averageOrder.toFixed(2)}</span></p>
-        <p><b>Refunds</b><span>${vm.today.refunds.toFixed(2)}</span></p>
-        <p><b>Oldest open</b><span>{vm.today.oldestOpenAt ? new Date(vm.today.oldestOpenAt).toLocaleTimeString([], { hour: "numeric", minute: "2-digit" }) : "—"}</span></p>
-      </div>
-    </details>
-  </div>
-
-  <div class="orders-workspace">
-    <div class="panel orders-list-panel" id="orders-list">
-      <div class="orders-list-tools">
-        <label class="orders-search">
-          <span>Search</span>
-          <input type="search" placeholder="Order, customer, email, SKU" aria-label="Search orders" data-orders-search />
-        </label>
-        <label>
-          <span>Queue</span>
-          <select aria-label="Filter by queue" data-orders-queue-select>
-            {vm.queues.map((queue) => (
-              <option value={queue.key} selected={queue.key === defaultQueue}>{queue.label}</option>
-            ))}
-          </select>
-        </label>
-        <label>
-          <span>Payment</span>
-          <select aria-label="Filter by payment" data-orders-payment-select>
-            <option value="">Any payment</option>
-            <option value="authorized">Authorized</option>
-            <option value="captured">Captured</option>
-            <option value="refunded">Refunded</option>
-          </select>
-        </label>
-        <button class="btn" type="button"><svg><use href="#i-file"></use></svg>Columns</button>
-      </div>
-
-      {holdCount > 0 && (
-        <div class="orders-attention-bar">
-          <div>
-            <span class="chip amber">{holdCount} hold{holdCount === 1 ? "" : "s"}</span>
-            <strong>Resolve the selected hold to unlock label creation.</strong>
-          </div>
-          <button type="button" class="btn primary" data-orders-resolve-hold>Resolve hold</button>
-        </div>
-      )}
-
-      {ordersStatus === "error" && (
-        <p class="orders-load-state error" role="alert" data-orders-load-state="error">
-          Couldn't load orders right now.
-          <button type="button" class="btn" data-orders-refresh>Retry</button>
-        </p>
-      )}
-      {ordersStatus === "not_configured" && (
-        <p class="orders-load-state" data-orders-load-state="not_configured">
-          Orders aren't connected for this store yet.
-        </p>
-      )}
-      {ordersStatus === "empty" && (
-        <p class="orders-load-state" data-orders-load-state="empty">
-          No orders yet{orderFilters.queue ? " in this queue" : ""}.
-        </p>
-      )}
-      <div class="table-wrap orders-table-wrap" hidden={vm.rows.length === 0}>
-        <table class="orders-table">
-          <thead>
-            <tr>
-              <th>Order</th>
-              <th>Customer</th>
-              <th>Payment</th>
-              <th>Ship status</th>
-              <th class="action">Next</th>
-            </tr>
-          </thead>
-          <tbody data-orders-tbody>
-            {vm.rows.map((row) => (
-              <tr
-                class:list={[{ selected: row.id === defaultRow?.id }]}
-                data-orders-row
-                data-order-id={row.id}
-                data-queue-keys={queueKeysFor(row).join(" ")}
-                data-payment={row.payment}
-                data-search-haystack={`${row.id} ${row.customerName} ${row.itemsSummary} ${row.customerNote}`.toLowerCase()}
-              >
-                <td data-label="Order"><strong>{row.id}</strong><span class="subtle">${row.total.toFixed(2)} - {row.itemsSummary}</span><span class="subtle">{new Date(row.placedAt).toLocaleTimeString([], { hour: "numeric", minute: "2-digit" })}</span></td>
-                <td data-label="Customer"><strong>{row.customerName}</strong><span class="subtle">{row.customerNote}</span></td>
-                <td data-label="Payment"><span class:list={["chip", PAYMENT_TONE[row.payment]]}>{row.payment[0]!.toUpperCase() + row.payment.slice(1)}</span></td>
-                <td data-label="Ship status"><span class:list={["chip", SHIP_TONE[row.shipState]]}>{ORDER_SHIP_STATE_LABEL[row.shipState]}</span><span class="subtle">{row.blocker ?? "No blocker"}</span></td>
-                <td data-label="Next" class="action"><button type="button" class="btn" data-orders-select-order={row.id}>{row.nextStep}</button></td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-        <p class="orders-empty-state" data-orders-empty hidden>No orders match the current filters.</p>
-      </div>
-      {nextPageHref && (
-        <div class="orders-pagination">
-          <a class="btn" href={nextPageHref} data-orders-loadmore>Load more</a>
-        </div>
-      )}
-    </div>
-
-    <aside class="panel orders-detail-sideout" id="orders-detail" aria-labelledby="orders-detail-title" data-orders-detail-root data-admin-selected-id={defaultRow?.id ?? ""}>
-      {vm.rows.map((row) => {
-        const detail = vm.detailsById[row.id]!;
-        const evidenceRefs = evidenceForOrder(row.id);
-        const assist = buildOrderAssist(row, evidenceRefs);
-        return (
-          <div
-            class="orders-detail-record"
-            data-orders-detail-record={row.id}
-            hidden={row.id !== defaultRow?.id}
-          >
-            <div class="orders-detail-head">
-              <div>
-                <span class:list={["chip", SHIP_TONE[row.shipState]]}>{ORDER_SHIP_STATE_LABEL[row.shipState]}</span>
-                <h3 id={row.id === defaultRow?.id ? "orders-detail-title" : undefined}>{row.id}</h3>
-                <p>{row.customerName} - ${row.total.toFixed(2)} - placed at {new Date(row.placedAt).toLocaleTimeString([], { hour: "numeric", minute: "2-digit" })}</p>
-              </div>
-              {row.blocker && (
-                <button class="btn primary" type="button"><svg><use href="#i-alert"></use></svg>Resolve hold</button>
-              )}
-            </div>
-
-            {row.blocker ? (
-              <div class="orders-next-step">
-                <div>
-                  <span>Next action</span>
-                  <strong>{row.nextStep} to unlock label creation.</strong>
-                  <p>{row.blocker} must be resolved before this order can ship.</p>
-                </div>
-              </div>
-            ) : (
-              <div class="orders-next-step orders-next-step--clear">
-                <div>
-                  <span>Next action</span>
-                  <strong>{row.nextStep}</strong>
-                  <p>No blockers — this order is ready to move.</p>
-                </div>
-              </div>
-            )}
-
-            <div class="orders-sideout-grid">
-              <div>
-                <span>Customer</span>
-                <strong>{row.customerNote}</strong>
-                <small>{row.customerId}</small>
-              </div>
-              <div>
-                <span>Shipment</span>
-                <strong>1 package</strong>
-                <small>Standard shipping</small>
-              </div>
-              <div>
-                <span>Risk</span>
-                <strong>{row.riskLevel[0]!.toUpperCase() + row.riskLevel.slice(1)}</strong>
-                <small>Order risk level</small>
-              </div>
-            </div>
-
-            <div class="orders-detail-section">
-              <div class="orders-detail-section-head">
-                <h4>Readiness checks</h4>
-                <span class:list={["chip", detail.readinessChecks.some((c) => c.blocking) ? "amber" : "green"]}>
-                  {detail.readinessChecks.filter((c) => c.blocking).length} action{detail.readinessChecks.filter((c) => c.blocking).length === 1 ? "" : "s"}
-                </span>
-              </div>
-              <div class="orders-check-list">
-                {detail.readinessChecks.map((check) => (
-                  <div class:list={["orders-check-row", { blocking: check.blocking }]}>
-                    <div>
-                      <b>{check.label}</b>
-                      <p>{check.detail}</p>
-                    </div>
-                    <strong>{check.value}</strong>
-                    <button class="btn" type="button">{check.action}</button>
-                  </div>
-                ))}
-              </div>
-            </div>
-
-            <details class="orders-subpanel" open>
-              <summary>
-                <span>Items and totals</span>
-                <strong>${detail.total.toFixed(2)}</strong>
-              </summary>
-              <div class="orders-subpanel-body">
-                {detail.lineItems.map((item) => (
-                  <div class="orders-line-item">
-                    <div>
-                      <strong>{item.name}</strong>
-                      <span>SKU {item.sku} - Qty {item.quantity}</span>
-                    </div>
-                    <b>${(item.unitPrice * item.quantity).toFixed(2)}</b>
-                  </div>
-                ))}
-                <div class="orders-total-row"><span>Shipping</span><strong>${detail.shipping.toFixed(2)}</strong></div>
-                <div class="orders-total-row"><span>Estimated tax</span><strong>${detail.estimatedTax.toFixed(2)}</strong></div>
-                <div class="orders-total-row"><span>Taxes and fees</span><strong>${detail.taxesAndFees.toFixed(2)}</strong></div>
-                <div class="orders-total-row final"><span>Total</span><strong>${detail.total.toFixed(2)}</strong></div>
-              </div>
-            </details>
-
-            <details class="orders-subpanel">
-              <summary>
-                <span>Activity and evidence</span>
-                <strong>{detail.evidenceTimeline.length} events</strong>
-              </summary>
-              <div class="orders-subpanel-body orders-activity-list">
-                {detail.evidenceTimeline.map((item) => (
-                  <div>
-                    <time>{new Date(item.at).toLocaleTimeString([], { hour: "numeric", minute: "2-digit" })}</time>
-                    <div><b>{item.title}</b><p>{item.detail}</p></div>
-                  </div>
-                ))}
-              </div>
-            </details>
-
-            <div class="orders-detail-section order-assist">
-              <div class="orders-detail-section-head">
-                <h4><svg><use href="#i-ask"></use></svg>Order Assist</h4>
-                <span class:list={["chip", assist.approvalMode === "approval_required" ? "amber" : "blue"]}>
-                  {assist.approvalMode === "approval_required" ? "Approval required" : "Draft only"}
-                </span>
-              </div>
-              <div class="order-assist-body">
-                <p class="order-assist-summary">{assist.summary}</p>
-                <div class="order-assist-meta">
-                  <div><span>Confidence</span><strong>{Math.round(assist.confidence * 100)}%</strong></div>
-                  <div><span>Owner</span><strong>{assist.owner}</strong></div>
-                  <div><span>Evidence</span><strong>{assist.evidenceRefs.length} linked</strong></div>
-                </div>
-                {evidenceRefs.length > 0 && (
-                  <div class="order-assist-evidence">
-                    <span class="eyebrow">Dispute-evidence timeline</span>
-                    {evidenceRefs.map((ref) => (
-                      <div class="order-assist-evidence-row">
-                        <time>{new Date(ref.at).toLocaleDateString([], { month: "short", day: "numeric" })}</time>
-                        <div><b>{ref.label}</b><span class="subtle">{ref.kind.replace(/_/g, " ")}</span></div>
-                      </div>
-                    ))}
-                  </div>
-                )}
-                <p class="order-assist-footnote">
-                  {assist.auditTrail.length === 0
-                    ? "No operator actions taken on this recommendation yet."
-                    : `${assist.auditTrail.length} audit event(s).`}
-                </p>
-              </div>
-            </div>
-          </div>
-        );
-      })}
-    </aside>
-  </div>
-</section>
-
-<script is:inline nonce={cspNonce}>
-  (() => {
-    const root = document.querySelector('[data-orders-target-tenant]');
-    if (!root) return;
-
-    const queueButtons = Array.from(root.querySelectorAll("[data-orders-queue-button]"));
-    const queueSelect = root.querySelector("[data-orders-queue-select]");
-    const paymentSelect = root.querySelector("[data-orders-payment-select]");
-    const searchInput = root.querySelector("[data-orders-search]");
-    const rows = Array.from(root.querySelectorAll("[data-orders-row]"));
-    const emptyState = root.querySelector("[data-orders-empty]");
-    const detailRoot = root.querySelector("[data-orders-detail-root]");
-    const detailRecords = detailRoot ? Array.from(detailRoot.querySelectorAll("[data-orders-detail-record]")) : [];
-
-    const setLoading = () => root.setAttribute("data-orders-loading", "");
-
-    // Queue filter + Refresh + pagination are SERVER-backed: they navigate so the
-    // order API re-applies the filter/cursor and returns a fresh page. Any
-    // filter change resets pagination to the first page (drops the cursor).
-    const navTo = (mutate) => {
-      const url = new URL(window.location.href);
-      mutate(url.searchParams);
-      url.searchParams.delete("cursor");
-      setLoading();
-      window.location.assign(url.pathname + "?" + url.searchParams.toString());
-    };
-    const setQueue = (sp, key) => {
-      if (key && key !== "all") sp.set("queue", key);
-      else sp.delete("queue");
-    };
-
-    // Client refinement over the server-returned rows: payment + free-text search.
-    const applyFilters = () => {
-      const payment = paymentSelect ? paymentSelect.value : "";
-      const term = searchInput ? searchInput.value.trim().toLowerCase() : "";
-      let visibleCount = 0;
-
-      for (const row of rows) {
-        const matchesPayment = !payment || row.dataset.payment === payment;
-        const matchesSearch = !term || (row.dataset.searchHaystack ?? "").includes(term);
-        const visible = matchesPayment && matchesSearch;
-        row.hidden = !visible;
-        if (visible) visibleCount += 1;
-      }
-
-      if (emptyState) emptyState.hidden = visibleCount > 0 || rows.length === 0;
-    };
-
-    const selectOrder = (orderId) => {
-      for (const row of rows) {
-        row.classList.toggle("selected", row.dataset.orderId === orderId);
-      }
-      for (const record of detailRecords) {
-        record.hidden = record.dataset.ordersDetailRecord !== orderId;
-      }
-      if (detailRoot) detailRoot.dataset.adminSelectedId = orderId;
-    };
-
-    queueButtons.forEach((button) => {
-      button.addEventListener("click", () => navTo((sp) => setQueue(sp, button.dataset.queueKey ?? "all")));
-    });
-
-    queueSelect?.addEventListener("change", () => navTo((sp) => setQueue(sp, queueSelect.value)));
-
-    paymentSelect?.addEventListener("change", applyFilters);
-    searchInput?.addEventListener("input", applyFilters);
-
-    // Refresh re-runs the server fetch (fresh live data); Load more advances the cursor.
-    root.querySelectorAll("[data-orders-refresh]").forEach((btn) => {
-      btn.addEventListener("click", () => {
-        setLoading();
-        window.location.reload();
-      });
-    });
-    root.querySelectorAll("[data-orders-loadmore]").forEach((link) => {
-      link.addEventListener("click", setLoading);
-    });
-
-    root.querySelectorAll("[data-orders-select-order]").forEach((button) => {
-      button.addEventListener("click", () => {
-        const orderId = button.dataset.ordersSelectOrder;
-        if (orderId) selectOrder(orderId);
-      });
-    });
-
-    rows.forEach((row) => {
-      row.addEventListener("click", (event) => {
-        if (event.target instanceof Element && event.target.closest("[data-orders-select-order]")) return;
-        const orderId = row.dataset.orderId;
-        if (orderId) selectOrder(orderId);
-      });
-    });
-
-    applyFilters();
-  })();
-</script>
-
-<style>
-  .orders-tab {
-    --orders-sideout-width: minmax(370px, 0.42fr);
-  }
-
-  /* U5: live load states, pagination, and a refresh/navigation affordance. */
-  .orders-load-state {
-    margin: 0 0 0.75rem;
-    padding: 0.75rem 1rem;
-    border: 1px solid var(--color-border, #e5e7eb);
-    border-radius: var(--radius-md, 8px);
-    color: var(--color-muted, #6b7280);
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-  }
-  .orders-load-state.error {
-    border-color: #f3c2c2;
-    color: #b42318;
-  }
-  .orders-pagination {
-    margin-top: 0.75rem;
-    text-align: center;
-  }
-  [data-orders-loading] {
-    opacity: 0.6;
-    pointer-events: none;
-    cursor: progress;
-  }
-
-  :global(html[data-admin-tab="orders"] .floating-ask) {
-    display: none !important;
-  }
-
-  .orders-title-row {
-    align-items: flex-start;
-  }
-
-  .orders-primary-actions {
-    justify-content: flex-end;
-  }
-
-  .orders-command-strip {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) minmax(180px, 220px);
-    gap: 12px;
-    align-items: stretch;
-  }
-
-  .orders-queue-list {
-    display: grid;
-    grid-template-columns: repeat(5, minmax(120px, 1fr));
-    gap: 8px;
-    min-width: 0;
-  }
-
-  .orders-queue-card {
-    display: grid;
-    gap: 5px;
-    min-width: 0;
-    padding: 10px;
-    border: 1px solid var(--admin-line);
-    border-radius: var(--admin-radius);
-    background: var(--admin-surface);
-    color: var(--admin-ink);
-    text-align: left;
-    text-decoration: none;
-  }
-
-  .orders-queue-card.active {
-    border-color: #efc477;
-    background: #fff8ec;
-    box-shadow: inset 3px 0 0 var(--admin-amber);
-  }
-
-  .orders-queue-card strong {
-    font-size: 24px;
-    line-height: 1;
-  }
-
-  .orders-queue-card small,
-  .orders-today-summary small,
-  .orders-sideout-grid small {
-    color: var(--admin-muted);
-    font-size: 12px;
-  }
-
-  .orders-today-summary {
-    min-width: 0;
-    border: 1px solid var(--admin-line);
-    border-radius: var(--admin-radius);
-    background: var(--admin-surface);
-  }
-
-  .orders-today-summary summary {
-    min-height: 100%;
-    display: grid;
-    gap: 4px;
-    padding: 10px 12px;
-    cursor: pointer;
-    list-style: none;
-  }
-
-  .orders-today-summary summary::-webkit-details-marker,
-  .orders-subpanel summary::-webkit-details-marker {
-    display: none;
-  }
-
-  .orders-today-summary summary span,
-  .orders-list-tools span,
-  .orders-next-step span,
-  .orders-sideout-grid span,
-  .orders-field-grid span {
-    color: var(--admin-muted);
-    font-size: 11px;
-    font-weight: 760;
-    text-transform: uppercase;
-  }
-
-  .orders-today-summary summary strong {
-    font-size: 20px;
-  }
-
-  .orders-today-summary > div {
-    display: grid;
-    gap: 7px;
-    padding: 0 12px 12px;
-  }
-
-  .orders-today-summary p,
-  .orders-next-step p,
-  .orders-check-row p,
-  .orders-detail-head p,
-  .orders-activity-list p {
-    margin: 0;
-    color: var(--admin-muted);
-    font-size: 12px;
-  }
-
-  .orders-today-summary p,
-  .orders-total-row {
-    display: flex;
-    align-items: baseline;
-    justify-content: space-between;
-    gap: 12px;
-  }
-
-  .orders-workspace {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) var(--orders-sideout-width);
-    gap: 14px;
-    align-items: start;
-    min-width: 0;
-  }
-
-  .orders-list-panel,
-  .orders-detail-sideout {
-    min-width: 0;
-  }
-
-  .orders-list-tools {
-    display: grid;
-    grid-template-columns: minmax(210px, 1.3fr) repeat(2, minmax(130px, 0.7fr)) auto;
-    gap: 8px;
-    align-items: end;
-    padding: 12px;
-    border-bottom: 1px solid var(--admin-line);
-  }
-
-  .orders-list-tools label {
-    display: grid;
-    gap: 5px;
-    min-width: 0;
-  }
-
-  .orders-list-tools input,
-  .orders-list-tools select {
-    width: 100%;
-    min-width: 0;
-    min-height: 38px;
-    padding: 0 10px;
-    border: 1px solid var(--admin-line-strong);
-    border-radius: var(--admin-radius-sm);
-    background: var(--admin-surface);
-    color: var(--admin-ink);
-  }
-
-  .orders-attention-bar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 10px;
-    padding: 10px 12px;
-    border-bottom: 1px solid var(--admin-line);
-    background: #fff8ec;
-  }
-
-  .orders-attention-bar > div {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    min-width: 0;
-  }
-
-  .orders-attention-bar strong {
-    font-size: 13px;
-  }
-
-  .orders-table-wrap {
-    border: 0;
-    border-radius: 0 0 var(--admin-radius) var(--admin-radius);
-  }
-
-  .orders-table {
-    min-width: 690px;
-  }
-
-  .orders-table tr.selected {
-    background: #fff8ec;
-    box-shadow: inset 3px 0 0 var(--admin-amber);
-  }
-
-  .orders-table tbody tr {
-    cursor: pointer;
-  }
-
-  .orders-table td {
-    height: 56px;
-  }
-
-  .orders-empty-state {
-    margin: 0;
-    padding: 24px 14px;
-    color: var(--admin-muted);
-    font-size: 13px;
-    text-align: center;
-  }
-
-  .orders-detail-sideout {
-    position: sticky;
-    top: 86px;
-    display: grid;
-    gap: 12px;
-    padding: 14px;
-    box-shadow: var(--admin-shadow);
-  }
-
-  .orders-detail-head {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: 12px;
-    padding-bottom: 12px;
-    border-bottom: 1px solid var(--admin-line);
-  }
-
-  .orders-detail-head h3 {
-    margin: 8px 0 2px;
-    font-size: 24px;
-  }
-
-  .orders-next-step {
-    padding: 12px;
-    border: 1px solid #efc477;
-    border-radius: var(--admin-radius);
-    background: #fff8ec;
-  }
-
-  .orders-next-step--clear {
-    border-color: var(--admin-line);
-    background: var(--admin-surface-soft);
-  }
-
-  .orders-next-step strong {
-    display: block;
-    margin: 5px 0 4px;
-    font-size: 15px;
-  }
-
-  .orders-sideout-grid,
-  .orders-field-grid {
-    display: grid;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-    gap: 8px;
-  }
-
-  .orders-sideout-grid > div,
-  .orders-field-grid > div {
-    min-width: 0;
-    padding: 10px;
-    border: 1px solid var(--admin-line);
-    border-radius: var(--admin-radius-sm);
-    background: var(--admin-surface-soft);
-  }
-
-  .orders-sideout-grid strong,
-  .orders-field-grid strong {
-    display: block;
-    margin-top: 4px;
-    overflow-wrap: anywhere;
-    font-size: 13px;
-  }
-
-  .orders-detail-section {
-    border: 1px solid var(--admin-line);
-    border-radius: var(--admin-radius);
-    background: var(--admin-surface);
-  }
-
-  .orders-detail-section-head {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 10px;
-    min-height: 46px;
-    padding: 10px 12px;
-    border-bottom: 1px solid var(--admin-line);
-  }
-
-  .orders-detail-section-head h4 {
-    margin: 0;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    font-size: 14px;
-  }
-
-  .order-assist {
-    border-color: #b9d8d4;
-    background: #fbfefd;
-  }
-
-  .order-assist-body {
-    display: grid;
-    gap: 10px;
-    padding: 12px;
-  }
-
-  .order-assist-summary {
-    margin: 0;
-    font-size: 13px;
-  }
-
-  .order-assist-meta {
-    display: grid;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-    gap: 8px;
-  }
-
-  .order-assist-meta > div {
-    min-width: 0;
-    padding: 8px 10px;
-    border: 1px solid var(--admin-line);
-    border-radius: var(--admin-radius-sm);
-    background: var(--admin-surface);
-  }
-
-  .order-assist-meta span {
-    color: var(--admin-muted);
-    font-size: 11px;
-    font-weight: 760;
-    text-transform: uppercase;
-  }
-
-  .order-assist-meta strong {
-    display: block;
-    margin-top: 3px;
-    font-size: 13px;
-  }
-
-  .order-assist-evidence {
-    display: grid;
-    gap: 6px;
-  }
-
-  .order-assist-evidence .eyebrow {
-    color: var(--admin-muted);
-    font-size: 11px;
-    font-weight: 760;
-    text-transform: uppercase;
-  }
-
-  .order-assist-evidence-row {
-    display: grid;
-    grid-template-columns: 60px minmax(0, 1fr);
-    gap: 8px;
-    align-items: baseline;
-  }
-
-  .order-assist-evidence-row time {
-    color: var(--admin-muted);
-    font-size: 12px;
-  }
-
-  .order-assist-evidence-row b {
-    font-size: 12px;
-  }
-
-  .order-assist-footnote {
-    margin: 0;
-    color: var(--admin-muted);
-    font-size: 11px;
-    font-style: italic;
-  }
-
-  .orders-check-list {
-    display: grid;
-    gap: 0;
-    padding: 4px 12px;
-  }
-
-  .orders-check-row {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) minmax(96px, auto) auto;
-    gap: 10px;
-    align-items: center;
-    min-width: 0;
-    padding: 10px 0;
-    border-bottom: 1px solid var(--admin-line);
-  }
-
-  .orders-check-row:last-child {
-    border-bottom: 0;
-  }
-
-  .orders-check-row.blocking {
-    margin: 4px -6px;
-    padding: 10px 6px;
-    border: 1px solid #efc477;
-    border-radius: var(--admin-radius-sm);
-    background: #fff8ec;
-  }
-
-  .orders-check-row b,
-  .orders-line-item strong,
-  .orders-activity-list b {
-    font-size: 13px;
-  }
-
-  .orders-check-row > strong {
-    font-size: 13px;
-  }
-
-  .orders-subpanel {
-    border: 1px solid var(--admin-line);
-    border-radius: var(--admin-radius);
-    background: var(--admin-surface);
-  }
-
-  .orders-subpanel summary {
-    min-height: 44px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 10px;
-    padding: 10px 12px;
-    cursor: pointer;
-    list-style: none;
-  }
-
-  .orders-subpanel summary span {
-    font-weight: 760;
-  }
-
-  .orders-subpanel summary strong {
-    font-size: 13px;
-  }
-
-  .orders-subpanel-body {
-    display: grid;
-    gap: 9px;
-    padding: 0 12px 12px;
-    border-top: 1px solid var(--admin-line);
-  }
-
-  .orders-line-item {
-    display: flex;
-    justify-content: space-between;
-    gap: 12px;
-    padding-top: 12px;
-  }
-
-  .orders-line-item span {
-    display: block;
-    margin-top: 3px;
-    color: var(--admin-muted);
-    font-size: 12px;
-  }
-
-  .orders-total-row {
-    color: var(--admin-muted);
-    font-size: 13px;
-  }
-
-  .orders-total-row strong {
-    color: var(--admin-ink);
-  }
-
-  .orders-total-row.final {
-    padding-top: 8px;
-    border-top: 1px solid var(--admin-line);
-    color: var(--admin-ink);
-    font-weight: 800;
-  }
-
-  .orders-field-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    padding-top: 12px;
-  }
-
-  .orders-activity-list {
-    padding-top: 12px;
-  }
-
-  .orders-activity-list > div {
-    display: grid;
-    grid-template-columns: 64px minmax(0, 1fr);
-    gap: 10px;
-  }
-
-  .orders-activity-list time {
-    color: var(--admin-muted);
-    font-size: 12px;
-  }
-
-  @media (max-width: 1180px) {
-    .orders-command-strip,
-    .orders-workspace {
-      grid-template-columns: 1fr;
-    }
-
-    .orders-queue-list {
-      grid-template-columns: repeat(5, minmax(132px, 1fr));
-      overflow-x: auto;
-    }
-
-    .orders-detail-sideout {
-      position: static;
-    }
-  }
-
-  @media (max-width: 900px) {
-    .orders-list-tools {
-      grid-template-columns: minmax(0, 1fr) minmax(130px, 0.7fr) minmax(130px, 0.7fr);
-    }
-
-    .orders-list-tools .btn {
-      display: none;
-    }
-  }
-
-  @media (max-width: 760px) {
-    .orders-title-row p {
-      display: none;
-    }
-
-    .orders-primary-actions {
-      justify-content: stretch;
-    }
-
-    .orders-primary-actions .btn {
-      flex: 1 1 130px;
-    }
-
-    .orders-primary-actions .btn:not(.primary) {
-      display: none;
-    }
-
-    .orders-command-strip {
-      gap: 8px;
-    }
-
-    .orders-queue-list {
-      display: flex;
-      gap: 8px;
-      padding-bottom: 2px;
-      overflow-x: auto;
-    }
-
-    .orders-queue-card {
-      min-width: 142px;
-      padding: 9px;
-    }
-
-    .orders-queue-card strong {
-      font-size: 20px;
-    }
-
-    .orders-today-summary {
-      display: none;
-    }
-
-    .orders-list-tools {
-      grid-template-columns: 1fr;
-      padding: 10px;
-    }
-
-    .orders-list-tools label:nth-of-type(3) {
-      display: none;
-    }
-
-    .orders-attention-bar {
-      align-items: stretch;
-      flex-direction: column;
-    }
-
-    .orders-attention-bar > div {
-      align-items: flex-start;
-      flex-direction: column;
-      gap: 6px;
-    }
-
-    .orders-table {
-      min-width: 0;
-    }
-
-    .orders-table thead {
-      display: none;
-    }
-
-    .orders-table,
-    .orders-table tbody,
-    .orders-table tr,
-    .orders-table td {
-      display: block;
-      width: 100%;
-    }
-
-    .orders-table tr {
-      padding: 10px 12px;
-      border-bottom: 1px solid var(--admin-line);
-    }
-
-    .orders-table td {
-      min-height: 0;
-      height: auto;
-      display: flex;
-      align-items: baseline;
-      justify-content: space-between;
-      gap: 14px;
-      padding: 5px 0;
-      border-bottom: 0;
-      text-align: right;
-    }
-
-    .orders-table td::before {
-      content: attr(data-label);
-      color: var(--admin-muted);
-      font-size: 11px;
-      font-weight: 760;
-      text-align: left;
-      text-transform: uppercase;
-    }
-
-    .orders-table td:first-child,
-    .orders-table td:nth-child(2) {
-      align-items: flex-start;
-    }
-
-    .orders-table td:first-child {
-      padding-top: 0;
-    }
-
-    .orders-table .subtle {
-      text-align: right;
-    }
-
-    .orders-table .action .btn {
-      width: 100%;
-    }
-
-    .orders-detail-head,
-    .orders-check-row,
-    .orders-line-item {
-      align-items: stretch;
-      flex-direction: column;
-    }
-
-    .orders-detail-head {
-      display: grid;
-    }
-
-    .orders-sideout-grid,
-    .orders-field-grid,
-    .orders-check-row {
-      grid-template-columns: 1fr;
-    }
-
-    .orders-detail-sideout {
-      padding: 12px;
-    }
-
-    .orders-activity-list > div {
-      grid-template-columns: 1fr;
-    }
-  }
-</style>