@tokenoftrust/storefront-runner 1.3.2

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

@@ -0,0 +1,1223 @@
+---
+/**
+ * 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 { createFoxyOrderClient, 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 (U3): fetch this tenant's orders from tot-foxycart via U2's 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 (rich empty/error UX is U5). Live data is gated on the ToT-core orders
+// endpoint (see U1/U2) — until then this resolves empty on qa.
+const orderBearer = await readEnv("FOXY_ORDER_API_KEY");
+// Server-backed filters + pagination (U5): 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: createFoxyOrderClient({
+        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 (U5). 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>