@tokenoftrust/storefront-runner 1.3.2

package/apps/storefront/src/components/admin/AdminFoxyCartSettingsPanel.astro

@@ -0,0 +1,227 @@
+---
+/**
+ * <AdminFoxyCartSettingsPanel> — the "Cart & Checkout appearance (FoxyCart)"
+ * settings section. Mirrors the tot-foxycart settings surface (brand colors,
+ * per-template-type URLs, store/feature config); each visual field is
+ * prepopulated from the tenant's theme (the style-guide) and can be overridden
+ * or reset back to that theme default.
+ *
+ * Presentational at the current admin altitude: the resolve/override/reset MODEL
+ * is real (lib/commerce/foxyCartSettings), but SAVE is the tot-foxycart
+ * `/theme/foxy` PUT/refresh + Foxy color PATCH seam — surfaced, not faked.
+ */
+import { getFoxyCartSettingsViewModel } from "@/lib/admin/services/mock";
+import { resolveAdminTargetTenant } from "@/config/adminTargetTenant";
+import type { FoxyFieldGroup, FoxySettingsField } from "@/lib/commerce/foxyCartSettings";
+
+const { envelope } = Astro.props;
+// Resolve the TARGET tenant's config through the resolver seam (config layer),
+// then build the view model from it — lib never reaches into the static map.
+const targetTenant = await resolveAdminTargetTenant(envelope.targetTenant);
+const vm = getFoxyCartSettingsViewModel(envelope, targetTenant);
+
+const GROUP_META: Record<FoxyFieldGroup, { title: string; blurb: string }> = {
+  colors: {
+    title: "Brand colors",
+    blurb: "Foxy template colors, prepopulated from this tenant's theme tokens.",
+  },
+  templates: {
+    title: "Templates",
+    blurb: "Per-surface hosted template URLs (checkout, cart, sidecart, receipt, email).",
+  },
+  store: {
+    title: "Store & features",
+    blurb: "Store identity and checkout feature toggles. No theme default.",
+  },
+};
+const GROUP_ORDER: FoxyFieldGroup[] = ["colors", "templates", "store"];
+const byGroup = (g: FoxyFieldGroup) => vm.fields.filter((f) => f.group === g);
+
+const isColor = (f: FoxySettingsField) => f.kind === "color";
+---
+
+<div class="panel" id="settings-cart-appearance">
+  <div class="panel-head settings-panel-head">
+    <h3><svg><use href="#i-gear"></use></svg>Cart &amp; Checkout Appearance</h3>
+    <span class="chip blue">FoxyCart</span>
+  </div>
+
+  {!vm.hasStore ? (
+    <div class="panel-body">
+      <p class="note">This tenant has no FoxyCart store configured, so there is nothing to theme here.</p>
+    </div>
+  ) : (
+    <div class="panel-body grid">
+      <div class="fx-head">
+        <p class="note">
+          Values are <b>prepopulated from the theme</b> (the style guide). Override any field, or
+          reset it back to the theme default. {vm.overrideCount > 0 ? `${vm.overrideCount} field(s) currently overridden.` : "No overrides yet."}
+        </p>
+        <button class="btn" type="button" disabled={vm.overrideCount === 0}>
+          <svg><use href="#i-refresh"></use></svg>Reset all to theme
+        </button>
+      </div>
+
+      {GROUP_ORDER.map((g) => (
+        <section class="fx-group">
+          <div class="fx-group-head">
+            <h4>{GROUP_META[g].title}</h4>
+            <p>{GROUP_META[g].blurb}</p>
+          </div>
+          <div class="fx-fields">
+            {byGroup(g).map((f) => (
+              <div class="fx-field">
+                <div class="fx-field-label">
+                  <label>{f.label}</label>
+                  <span class:list={["chip", f.source === "override" ? "amber" : "green"]}>
+                    {f.source === "override" ? "Overridden" : "Theme default"}
+                  </span>
+                </div>
+
+                <div class="fx-field-control">
+                  {isColor(f) ? (
+                    <span class="fx-swatch" style={`background:${f.value}`} aria-hidden="true"></span>
+                  ) : null}
+
+                  {f.kind === "boolean" ? (
+                    <span class:list={["chip", f.value ? "teal" : ""]}>{f.value ? "On" : "Off"}</span>
+                  ) : f.kind === "select" ? (
+                    <select disabled>
+                      {(f.options ?? []).map((o) => (
+                        <option selected={o === f.value}>{o}</option>
+                      ))}
+                    </select>
+                  ) : (
+                    <input
+                      type="text"
+                      value={String(f.value)}
+                      readonly
+                      class:list={["fx-input", { url: f.kind === "url" }]}
+                    />
+                  )}
+
+                  {f.resettable && f.source === "override" ? (
+                    <button class="btn ghost fx-reset" type="button" title={`Reset to theme default: ${f.default}`}>
+                      Reset
+                    </button>
+                  ) : f.resettable ? (
+                    <span class="fx-default-hint">= theme</span>
+                  ) : (
+                    <span class="fx-default-hint">no theme default</span>
+                  )}
+                </div>
+
+                {f.help ? <p class="fx-help">{f.help}</p> : null}
+              </div>
+            ))}
+          </div>
+        </section>
+      ))}
+
+      <p class="note fx-seam">
+        <svg><use href="#i-alert"></use></svg>
+        Saving writes to tot-foxycart: colors via Foxy <code>template_config.colors</code>, template
+        URLs via <code>PUT /theme/foxy</code> then <code>POST /theme/foxy/refresh</code>. That API hop
+        is not wired in this build.
+      </p>
+    </div>
+  )}
+</div>
+
+<style>
+  .fx-head {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+  }
+  .fx-group {
+    border-top: 1px solid var(--admin-line);
+    padding-top: 14px;
+    margin-top: 4px;
+  }
+  .fx-group-head h4 {
+    margin: 0;
+    font-size: 13px;
+  }
+  .fx-group-head p {
+    margin: 2px 0 12px;
+    color: var(--admin-muted);
+    font-size: 12px;
+  }
+  .fx-fields {
+    display: grid;
+    gap: 14px;
+  }
+  .fx-field {
+    display: grid;
+    gap: 6px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid var(--admin-line);
+  }
+  .fx-field:last-child {
+    border-bottom: 0;
+    padding-bottom: 0;
+  }
+  .fx-field-label {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+  .fx-field-label label {
+    font-size: 13px;
+    font-weight: 640;
+    color: var(--admin-ink);
+  }
+  .fx-field-control {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+  }
+  .fx-swatch {
+    width: 26px;
+    height: 26px;
+    border-radius: var(--admin-radius-sm);
+    border: 1px solid var(--admin-line-strong);
+    flex: none;
+  }
+  .fx-input {
+    min-height: 34px;
+    padding: 0 10px;
+    border: 1px solid var(--admin-line-strong);
+    border-radius: var(--admin-radius-sm);
+    background: var(--admin-surface);
+    color: var(--admin-ink);
+    min-width: 220px;
+  }
+  .fx-input.url {
+    min-width: 340px;
+    font-family: ui-monospace, Menlo, monospace;
+    font-size: 12px;
+  }
+  .fx-reset {
+    font-size: 12px;
+  }
+  .fx-default-hint {
+    color: var(--admin-muted);
+    font-size: 11px;
+  }
+  .fx-help {
+    margin: 0;
+    color: var(--admin-muted);
+    font-size: 12px;
+  }
+  .fx-seam {
+    display: flex;
+    gap: 8px;
+    align-items: flex-start;
+    border-top: 1px solid var(--admin-line);
+    padding-top: 12px;
+  }
+  .fx-seam code {
+    font-family: ui-monospace, Menlo, monospace;
+    font-size: 11px;
+  }
+</style>

package/apps/storefront/src/components/admin/AdminFulfillmentTab.astro

@@ -0,0 +1,465 @@
+---
+import { getFulfillmentViewModel, getSettingsViewModel } from "@/lib/admin/services/mock";
+
+const { envelope } = Astro.props;
+const fulfillment = getFulfillmentViewModel(envelope);
+const settings = getSettingsViewModel(envelope);
+
+const QUEUE_TONE: Record<string, string> = {
+  ready_to_ship: "green",
+  holds: "amber",
+  picked: "blue",
+  packed: "blue",
+  label_needed: "amber",
+  shipped: "teal",
+  exceptions: "red",
+};
+
+const readyToShipCount = fulfillment.queues.find((q) => q.key === "ready_to_ship")?.count ?? 0;
+const holdsCount = fulfillment.queues.find((q) => q.key === "holds")?.count ?? 0;
+const exceptionsCount = fulfillment.queues.find((q) => q.key === "exceptions")?.count ?? 0;
+const labelsLockedCount = fulfillment.shipments.filter((s) => s.labelLocked).length;
+const oldestSlaHours = fulfillment.shipments.reduce((max, s) => Math.max(max, s.slaAgeHours), 0);
+
+const selectedShipment = fulfillment.shipments.find((s) => s.labelLocked) ?? fulfillment.shipments[0] ?? null;
+const selectedAssistDraft = selectedShipment
+  ? fulfillment.assistDrafts.find((d) => d.orderId === selectedShipment.orderId) ?? null
+  : null;
+
+function queueLabel(key: string): string {
+  return fulfillment.queues.find((q) => q.key === key)?.label ?? key;
+}
+---
+
+<!-- agent-hook:fulfillment-tab -->
+<section id="fulfillment" class="band fulfillment-tab" aria-labelledby="admin-tab-fulfillment fulfillment-title" data-admin-panel data-agent-scope="fulfillment" role="tabpanel">
+  <div class="section-title">
+    <div>
+      <h2 id="fulfillment-title">Fulfillment</h2>
+      <p>Ship paid orders, clear exceptions, print labels, and keep fulfillment moving.</p>
+    </div>
+    <div class="actions">
+      <button class="btn" type="button"><svg><use href="#i-export"></use></svg>Export queue</button>
+      <button class="btn primary" type="button"><svg><use href="#i-truck"></use></svg>Create batch</button>
+    </div>
+  </div>
+
+  {holdsCount + exceptionsCount > 0 && (
+    <div class="ship-gate amber fulfillment-gate" aria-labelledby="fulfillment-gate-title">
+      <div class="ship-gate-main">
+        <span class="seal"><svg><use href="#i-alert"></use></svg></span>
+        <div>
+          <b id="fulfillment-gate-title">Hold: Review Required</b>
+          <span>{holdsCount + exceptionsCount} shipment{holdsCount + exceptionsCount === 1 ? "" : "s"} need merchant action. Ready-to-ship orders stay visible and fast to label.</span>
+        </div>
+      </div>
+      <div class="actions">
+        <a class="btn" href="#fulfillment-blockers">Open blockers</a>
+        <a class="btn primary" href="#fulfillment-ready">Ship ready orders</a>
+      </div>
+    </div>
+  )}
+
+  <div class="grid cols-4">
+    <div class="metric">
+      <span>Ready to ship</span>
+      <strong>{readyToShipCount}</strong>
+      <small>Paid, allocated, and checked</small>
+    </div>
+    <div class="metric">
+      <span>Labels locked</span>
+      <strong>{labelsLockedCount}</strong>
+      <small>Blocked until the stated reason clears</small>
+    </div>
+    <div class="metric">
+      <span>Holds</span>
+      <strong>{holdsCount}</strong>
+      <small>Action required before label creation</small>
+    </div>
+    <div class="metric">
+      <span>Oldest SLA age</span>
+      <strong>{oldestSlaHours}h</strong>
+      <small>Since payment was captured</small>
+    </div>
+  </div>
+
+  <div class="panel fulfillment-assist-panel">
+    <div class="panel-head fulfillment-panel-head">
+      <h3><svg><use href="#i-ask"></use></svg>Fulfillment Assist</h3>
+      <span class="chip blue">Operator support, not autopilot — draft-only, evidence-linked</span>
+    </div>
+    <div class="panel-body grid">
+      {fulfillment.assistDrafts.length === 0 ? (
+        <p class="note">No exceptions or label locks right now — nothing for Assist to explain.</p>
+      ) : (
+        <div class="assist-signal-grid">
+          {fulfillment.assistDrafts.map((draft) => (
+            <div class="assist-signal">
+              <span class="chip amber">{draft.orderId}</span>
+              <p>{draft.summary}</p>
+            </div>
+          ))}
+        </div>
+      )}
+      <p class="note">Assist never automates a shipping decision — every output here is a draft or explanation an operator reviews before acting.</p>
+    </div>
+  </div>
+
+  <div class="fulfillment-workspace">
+    <div class="panel fulfillment-queue-panel">
+      <div class="panel-head fulfillment-panel-head">
+        <h3><svg><use href="#i-truck"></use></svg>Fulfillment Queue</h3>
+        <span class="chip teal">{fulfillment.shipments.length} shipments</span>
+      </div>
+      <div class="panel-body grid">
+        <div class="tabs" role="tablist" aria-label="Fulfillment queues">
+          {fulfillment.queues.map((queue, index) => (
+            <button class:list={["tab", { active: index === 0 }]} type="button">{queue.label} ({queue.count})</button>
+          ))}
+        </div>
+
+        <div class="table-wrap fulfillment-table-wrap" id="fulfillment-ready">
+          <table class="fulfillment-table">
+            <thead>
+              <tr>
+                <th>Order</th>
+                <th>Destination</th>
+                <th>Queue</th>
+                <th>SLA age</th>
+                <th>Carrier</th>
+                <th>Label</th>
+                <th class="action">Action</th>
+              </tr>
+            </thead>
+            <tbody>
+              {fulfillment.shipments.map((shipment) => (
+                <tr class:list={[{ selected: shipment.orderId === selectedShipment?.orderId }]}>
+                  <td><strong>{shipment.orderId}</strong></td>
+                  <td><strong>{shipment.destination}</strong><span class="subtle">{shipment.destinationReady ? "Serviceable" : "Needs review"}</span></td>
+                  <td><span class:list={["chip", QUEUE_TONE[shipment.queue] ?? ""]}>{queueLabel(shipment.queue)}</span></td>
+                  <td><strong>{shipment.slaAgeHours}h</strong></td>
+                  <td><span class:list={["chip", shipment.carrierReady ? "green" : "amber"]}>{shipment.carrier}</span></td>
+                  <td><span class:list={["chip", shipment.labelLocked ? "amber" : "green"]}>{shipment.labelLocked ? "Locked" : "Unlocked"}</span></td>
+                  <td class="action"><a class="btn" href={shipment.labelLocked ? "#fulfillment-blockers" : "#fulfillment-detail"}>{shipment.labelLocked ? "Resolve" : "Create label"}</a></td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+
+    <aside class="panel fulfillment-detail-panel" id="fulfillment-detail" aria-labelledby="fulfillment-detail-title">
+      {selectedShipment ? (
+        <>
+          <div class="panel-head fulfillment-panel-head">
+            <h3 id="fulfillment-detail-title"><svg><use href="#i-file"></use></svg>{selectedShipment.orderId}</h3>
+            <span class:list={["chip", selectedShipment.labelLocked ? "amber" : "green"]}>
+              {selectedShipment.labelLocked ? "Shipping Label Locked" : "Shipping Label Unlocked"}
+            </span>
+          </div>
+          <div class="panel-body grid">
+            <div class="detail-summary">
+              <div>
+                <span class="eyebrow">Destination</span>
+                <strong>{selectedShipment.destination}</strong>
+                <span class="subtle">{selectedShipment.destinationReady ? "Serviceable" : "Needs review"}</span>
+              </div>
+              <div>
+                <span class="eyebrow">Carrier</span>
+                <strong>{selectedShipment.carrier}</strong>
+                <span class="subtle">{selectedShipment.carrierReady ? "Eligible" : "Not eligible yet"}</span>
+              </div>
+              <div>
+                <span class="eyebrow">SLA age</span>
+                <strong>{selectedShipment.slaAgeHours}h</strong>
+                <span class="subtle">Since payment captured</span>
+              </div>
+            </div>
+
+            <div class:list={["label-card", selectedShipment.labelLocked ? "locked" : "unlocked"]}>
+              <div>
+                <span class="eyebrow">Shipping label</span>
+                <strong>{selectedShipment.labelLocked ? "Locked until the blocker clears" : "Ready to create"}</strong>
+                <p>
+                  {selectedShipment.labelLocked
+                    ? selectedShipment.labelLockReason ?? "Resolve the outstanding blocker to unlock this label."
+                    : "Carrier and destination checks are clear — create the label whenever you're ready."}
+                </p>
+              </div>
+              <button class="btn primary" type="button" disabled={selectedShipment.labelLocked}>
+                {selectedShipment.labelLocked ? "Label locked" : "Create label"}
+              </button>
+            </div>
+
+            {selectedShipment.labelLocked && (
+              <div class="action-strip" id="fulfillment-blockers">
+                <a class="btn primary" href="#fulfillment-readiness">Resolve blocker</a>
+                <button class="btn" type="button">Contact customer</button>
+              </div>
+            )}
+
+            <div class="detail-section" id="fulfillment-readiness">
+              <div class="detail-section-head">
+                <h4>Readiness Checks</h4>
+                <span class:list={["chip", selectedShipment.carrierReady && selectedShipment.destinationReady ? "green" : "amber"]}>
+                  {[!selectedShipment.carrierReady && "carrier", !selectedShipment.destinationReady && "destination"].filter(Boolean).length || "0"} blocker(s)
+                </span>
+              </div>
+              <div class:list={["check-row", { blocking: !selectedShipment.carrierReady }]}>
+                <div><b>Carrier eligibility</b><p>Carrier options unlock once the shipment's carrier check passes.</p></div>
+                <strong>{selectedShipment.carrier}</strong>
+                <span class:list={["chip", selectedShipment.carrierReady ? "green" : "amber"]}>{selectedShipment.carrierReady ? "OK" : "Waiting"}</span>
+              </div>
+              <div class:list={["check-row", { blocking: !selectedShipment.destinationReady }]}>
+                <div><b>Address and jurisdiction</b><p>Destination is serviceable once any jurisdiction or address concerns clear.</p></div>
+                <strong>{selectedShipment.destination}</strong>
+                <span class:list={["chip", selectedShipment.destinationReady ? "green" : "amber"]}>{selectedShipment.destinationReady ? "Ready" : "Review"}</span>
+              </div>
+            </div>
+
+            {selectedAssistDraft && (
+              <div class="detail-section">
+                <div class="detail-section-head">
+                  <h4>Fulfillment Assist</h4>
+                  <span class="chip blue">Draft</span>
+                </div>
+                <p class="note">{selectedAssistDraft.summary}</p>
+              </div>
+            )}
+          </div>
+        </>
+      ) : (
+        <div class="panel-body">
+          <p class="note">No shipments yet for this tenant.</p>
+        </div>
+      )}
+    </aside>
+  </div>
+
+  <div class="panel fulfillment-policy-panel">
+    <div class="panel-head fulfillment-panel-head">
+      <h3><svg><use href="#i-shield"></use></svg>Shipping Policy Context</h3>
+      <span class:list={["chip", settings.shippingRestrictions.length > 0 ? "amber" : "green"]}>
+        {settings.shippingRestrictions.length > 0 ? `${settings.shippingRestrictions.length} region(s) restricted` : "No active restrictions"}
+      </span>
+    </div>
+    <div class="panel-body grid">
+      <p class="note">Per-shipment destination readiness (above) reflects that shipment's own carrier/jurisdiction check. This panel surfaces the tenant's current shipping-restriction policy from Settings for context — see the Settings tab to manage it.</p>
+      {settings.shippingRestrictions.length > 0 && (
+        <div class="readiness-list" aria-label="Restricted regions">
+          {settings.shippingRestrictions.map((restriction) => (
+            <div class="check-row">
+              <div><b>{restriction.region}</b><p>{restriction.reason}</p></div>
+              <span class="chip amber">Restricted</span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  </div>
+</section>
+
+<style>
+  .fulfillment-tab {
+    --fulfillment-split: minmax(0, 1.2fr) minmax(360px, 0.8fr);
+  }
+
+  .fulfillment-gate {
+    scroll-margin-top: 92px;
+  }
+
+  .fulfillment-assist-panel {
+    border-color: #b9c9ec;
+    background: #fbfcff;
+  }
+
+  .assist-signal-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+    gap: 10px;
+  }
+
+  .assist-signal {
+    display: grid;
+    gap: 7px;
+    min-width: 0;
+    padding: 12px;
+    border: 1px solid var(--admin-line);
+    border-radius: var(--admin-radius-sm);
+    background: var(--admin-surface);
+  }
+
+  .assist-signal p {
+    margin: 0;
+    color: var(--admin-muted);
+    font-size: 12px;
+  }
+
+  .fulfillment-workspace {
+    display: grid;
+    grid-template-columns: var(--fulfillment-split);
+    gap: 14px;
+    align-items: start;
+    min-width: 0;
+  }
+
+  .fulfillment-queue-panel,
+  .fulfillment-detail-panel {
+    min-width: 0;
+  }
+
+  .fulfillment-detail-panel {
+    position: sticky;
+    top: 86px;
+    box-shadow: var(--admin-shadow);
+  }
+
+  .fulfillment-panel-head {
+    min-width: 0;
+  }
+
+  .fulfillment-panel-head h3 {
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+
+  .fulfillment-table {
+    min-width: 900px;
+  }
+
+  .fulfillment-table td {
+    height: 58px;
+  }
+
+  .fulfillment-table tr.selected {
+    background: #fff8ec;
+    box-shadow: inset 3px 0 0 var(--admin-amber);
+  }
+
+  .detail-summary {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 10px;
+  }
+
+  .detail-summary > div {
+    min-width: 0;
+    padding-bottom: 10px;
+    border-bottom: 1px solid var(--admin-line);
+  }
+
+  .detail-summary strong {
+    display: block;
+    margin-top: 3px;
+    overflow-wrap: anywhere;
+  }
+
+  .eyebrow {
+    color: var(--admin-muted);
+    font-size: 11px;
+    font-weight: 760;
+    text-transform: uppercase;
+  }
+
+  .label-card {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 12px;
+    border: 1px solid var(--admin-line);
+    border-radius: var(--admin-radius);
+    background: var(--admin-surface-soft);
+  }
+
+  .label-card.locked {
+    border-color: #f1c883;
+    background: #fff8ec;
+  }
+
+  .label-card.unlocked {
+    border-color: #a6d8c0;
+    background: #eefaf3;
+  }
+
+  .label-card p {
+    margin: 4px 0 0;
+    color: var(--admin-muted);
+    font-size: 12px;
+  }
+
+  .label-card .btn[disabled] {
+    border-color: #d9b978;
+    background: #f5e7c8;
+    color: var(--admin-amber);
+    cursor: not-allowed;
+  }
+
+  .action-strip {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    scroll-margin-top: 92px;
+  }
+
+  .detail-section {
+    display: grid;
+    gap: 10px;
+    padding-top: 2px;
+    scroll-margin-top: 92px;
+  }
+
+  .detail-section + .detail-section {
+    padding-top: 12px;
+    border-top: 1px solid var(--admin-line);
+  }
+
+  .detail-section-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+  }
+
+  .detail-section-head h4 {
+    margin: 0;
+    font-size: 13px;
+  }
+
+  .fulfillment-policy-panel .readiness-list {
+    display: grid;
+    gap: 0;
+  }
+
+  @media (max-width: 1280px) {
+    .fulfillment-workspace {
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    .fulfillment-detail-panel {
+      position: static;
+    }
+  }
+
+  @media (max-width: 920px) {
+    .detail-summary {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .label-card {
+      align-items: flex-start;
+      flex-direction: column;
+    }
+  }
+
+  @media (max-width: 640px) {
+    .detail-summary {
+      grid-template-columns: 1fr;
+    }
+
+    .label-card .btn {
+      width: 100%;
+    }
+  }
+</style>