/* =============================================================================
   BCA Distributors — Customer Order Portal styles
   Matches mockup: navy #1A237E + cyan #0097A7 + real logo on navy (no box)
   ============================================================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy: #1A237E;
  --navy-2: #1E2E99;
  --navy-3: #283593;
  --navy-dk: #0D164F;
  --cyan: #0097A7;
  --cyan-dk: #006978;
  --cyan-lt: #E0F7FA;
  --green: #8cc83c;
  --green-dk: #1B5E20;
  --amber: #7B5800;
  --amber-lt: #FFF9E6;
  --text: #111827;
  --text-soft: #374151;
  --text-mute: #6B7280;
  --text-faint: #9CA3AF;
  --border: #E8EAF6;
  --border-md: #D0D4E8;
  --surface: #ECEEF8;
  --surface-2: #F7F8FC;
  --surface-3: #FAFBFE;
  --white: #fff;
  --danger: #B71C1C;
  --danger-lt: #FFEBEE;
  --success: #1B5E20;
  --success-lt: #E8F5E9;
}

html, body {
  height: 100%;
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--surface);
}

a { color: var(--cyan-dk); text-decoration: none; }
a:hover { text-decoration: underline; }

button { font-family: inherit; cursor: pointer; }

/* ──────────────────────────────────────────────────────────────────────────
   SHARED: Top bar with logo
   ────────────────────────────────────────────────────────────────────────── */
.topbar {
  background: var(--navy);
  display: flex;
  align-items: center;
  padding: 10px 20px;
  gap: 14px;
  min-height: 56px;
}
.logo {
  background-image: url('/static/img/logo_transparent.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: block;
}
/* PR D Commit 3 (2026-05-01): logo sizes bumped ~+14% for brand
   confidence on the AM portal surfaces. Same proportions, larger
   footprint so the BCA mark reads as a deliberate signature rather
   than a small badge. */
.logo-topbar { width: 148px; height: 48px; }
.logo-small  { width: 108px; height: 36px; }

.tb-divider { width: 1px; height: 30px; background: #3949AB; }
.tb-title {
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  color: #90CAF9; text-transform: uppercase;
}
.tb-pill {
  margin-left: auto;
  background: #28a0dc; color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  padding: 3px 11px; border-radius: 20px;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 6px;
}
.tb-pill::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
}
.tb-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: #3949AB;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #90CAF9;
  margin-left: 8px;
}

/* ──────────────────────────────────────────────────────────────────────────
   AM PORTAL
   ────────────────────────────────────────────────────────────────────────── */
.am-shell {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: calc(100vh - 56px);
}
.am-sidebar {
  background: var(--navy-3);
  padding: 20px 0;
}
.nav-lbl {
  font-size: 10px; font-weight: 700; letter-spacing: 0.15em;
  color: #5C6BC0; text-transform: uppercase;
  padding: 12px 18px 6px;
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  color: #90CAF9; font-size: 13px;
  cursor: pointer; border-left: 3px solid transparent;
}
.nav-item:hover { background: rgba(255,255,255,0.04); }
.nav-item.active {
  background: rgba(40,160,220,0.18);
  color: #fff;
  border-left-color: #28a0dc;
}
.nav-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: 0.6; flex-shrink: 0;
}

.am-content { padding: 24px 28px; background: var(--surface-2); }
.am-title { font-size: 22px; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.am-subtitle { font-size: 13px; color: var(--text-mute); margin-bottom: 20px; }

.steps-row { display: flex; gap: 8px; margin-bottom: 18px; }
.step-pill {
  display: flex; align-items: center; gap: 8px;
  border-radius: 20px; padding: 6px 14px;
  font-size: 12px; font-weight: 600;
  border: 1px solid transparent;
}
.sp-done { background: var(--success-lt); color: var(--success); border-color: #A5D6A7; }
.sp-active { background: var(--cyan-lt); color: var(--cyan-dk); border-color: var(--cyan); }
.sp-idle { background: #fff; color: var(--text-faint); border-color: var(--border); }
.sp-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.search-bar {
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 4px; display: flex; gap: 4px; align-items: center;
  margin-bottom: 12px; max-width: 520px;
}
.search-bar input {
  flex: 1; border: none; outline: none; padding: 10px 12px;
  font-size: 14px; background: transparent;
}
.search-results {
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  max-width: 520px; max-height: 320px; overflow-y: auto;
}
.search-result {
  padding: 10px 14px; border-bottom: 1px solid var(--border); cursor: pointer;
}
.search-result:last-child { border-bottom: none; }
.search-result:hover { background: var(--surface-2); }
.search-result-name { font-weight: 600; color: var(--navy); font-size: 13px; }
.search-result-meta { font-size: 11px; color: var(--text-mute); margin-top: 2px; }

.cust-card {
  border: 1.5px solid var(--cyan);
  background: var(--cyan-lt);
  padding: 16px 18px; border-radius: 8px;
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 18px;
}
.cust-av {
  width: 44px; height: 44px; border-radius: 50%; background: var(--navy);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; color: #90CAF9; flex-shrink: 0;
}
.cust-info { flex: 1; }
.cust-name { font-size: 15px; font-weight: 700; color: var(--navy); }
.cust-meta { font-size: 12px; color: var(--cyan-dk); margin-top: 3px; }
.cust-active {
  background: var(--green); color: #1a3b08;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  padding: 4px 12px; border-radius: 14px;
}

.stat-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px; margin-bottom: 20px;
}
.stat-card {
  background: #F5F7FF; border: 1px solid var(--border);
  border-radius: 8px; padding: 14px 16px;
}
.stat-lbl {
  font-size: 10px; color: var(--text-mute);
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
}
.stat-val { font-size: 20px; font-weight: 700; color: var(--navy); margin-top: 4px; }

.items-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
  background: #fff; border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden;
}
.items-table thead { background: #E8EAF6; }
.items-table th {
  padding: 10px 12px; text-align: left;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: #3949AB;
}
.items-table th.qty-col { background: var(--cyan); color: #fff; text-align: center; }
.items-table td { padding: 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.items-table tr:nth-child(even) td { background: var(--surface-3); }
.items-table tr:last-child td { border-bottom: none; }

.sku {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 11px; color: #0D3B8C; font-weight: 700;
}
.item-name { font-weight: 600; color: var(--text); }
.item-desc { font-size: 11.5px; color: var(--text-mute); margin-top: 2px; }

.freq {
  display: inline-block; padding: 3px 10px; border-radius: 12px;
  font-size: 11px; font-weight: 600;
}
.freq-w { background: var(--success-lt); color: var(--success); }
.freq-bw { background: var(--cyan-lt); color: var(--cyan-dk); }
.freq-m { background: #FFF3E0; color: var(--amber); }
.freq-o { background: #F0F2F8; color: var(--text-mute); }

.qty-input {
  width: 64px; height: 34px;
  border: 1.5px solid var(--cyan); border-radius: 5px;
  text-align: center; font-size: 14px; font-weight: 700;
  color: var(--navy); background: var(--amber-lt);
  font-family: inherit;
}
.qty-input:focus { outline: none; box-shadow: 0 0 0 3px rgba(0,151,167,0.18); }

.btn-row {
  display: flex; gap: 10px; justify-content: flex-end;
  margin-top: 20px; flex-wrap: wrap;
}
.btn {
  padding: 10px 20px; border-radius: 6px;
  font-size: 13px; font-weight: 600; border: none;
  transition: filter 0.15s;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { filter: brightness(0.94); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; filter: none; }
.btn-primary { background: var(--navy); color: #fff; }
.btn-teal { background: var(--cyan); color: #fff; }
.btn-outline { background: #fff; color: var(--navy); border: 1.5px solid var(--navy); }
.btn-danger-outline { background: #fff; color: var(--danger); border: 1.5px solid var(--danger); }

.field-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field label {
  font-size: 11px; font-weight: 600; color: var(--text-mute);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.field input, .field select, .field textarea {
  padding: 9px 12px; border: 1px solid var(--border-md);
  border-radius: 6px; font-size: 13px; font-family: inherit;
  background: #fff;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0,151,167,0.15);
}

.share-panel {
  background: #fff; border: 1px solid var(--border);
  border-radius: 10px; padding: 20px; margin-top: 16px;
}
.share-url-box {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 6px; padding: 12px; font-family: 'SF Mono', monospace;
  font-size: 13px; color: var(--navy); margin: 10px 0;
  word-break: break-all;
}

.hidden { display: none !important; }
.loading { opacity: 0.5; pointer-events: none; }

.alert {
  padding: 12px 16px; border-radius: 6px; margin-bottom: 16px;
  font-size: 13px;
}
.alert-error { background: var(--danger-lt); color: var(--danger); border: 1px solid #F8BBD0; }
.alert-success { background: var(--success-lt); color: var(--success); border: 1px solid #A5D6A7; }

/* ──────────────────────────────────────────────────────────────────────────
   CUSTOMER PORTAL (mobile-first, responsive)
   ────────────────────────────────────────────────────────────────────────── */
.cust-page {
  max-width: 520px; margin: 0 auto;
  background: var(--surface-2); min-height: 100vh;
}
.cyan-strip { height: 3px; background: var(--cyan); }
.cust-topbar {
  background: var(--navy);
  padding: 12px 16px;
  display: flex; align-items: flex-start; gap: 10px;
}
.cust-url {
  font-family: 'SF Mono', monospace; font-size: 10px;
  color: #5C6BC0; margin-left: auto; text-align: right;
  line-height: 1.3; word-break: break-all;
}
/* PR D Commit 3.5 (2026-05-01): reserve bottom space equal to the
   sticky .cust-foot height + 16px breathing room so the last category
   banner (and the notes section) clear the toolbar when scrolled to
   the bottom. Variable lives in design-tokens.css so the toolbar
   height is owned in one place. */
.cust-body {
  padding: 14px;
  padding-bottom: calc(var(--bca-cust-foot-height) + 16px);
}
.store-card {
  background: #fff; border-radius: 10px;
  padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--border);
}
.store-av {
  width: 44px; height: 44px; border-radius: 50%; background: var(--navy);
  color: #90CAF9;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
}
.store-nm { font-size: 15px; font-weight: 700; color: var(--navy); }
.store-sub { font-size: 11px; color: var(--text-faint); margin-top: 2px; }
.info-banner {
  background: var(--cyan-lt); border-left: 3px solid var(--cyan);
  border-radius: 0 6px 6px 0;
  padding: 10px 14px; font-size: 12px; color: var(--cyan-dk);
  margin-top: 12px; line-height: 1.5;
}
/* PR D Commit 3 → 3.5 → 3.6 (2026-05-01): category section ribbons.
   Each category is wrapped in <section class="cat-section"> by the
   render loop in customer_portal.js. The .cat-lbl is sticky WITHIN
   its section so the banner releases naturally at the section
   boundary instead of competing with the next banner for top: 0
   (the sticky-on-sticky overlap visible in 3.5).
   Type: 17px / 700 / 0.2px letter-spacing — reads as authoritative
   without going uppercase.
   Fill: 12% navy → composited ~#DDE2ED on the page bg, 10.2:1
   contrast against navy text (well above WCAG AA).
   Accent: 5px logo-cyan left bar — Mercury / Linear / Stripe
   section-identifier pattern. */
.cat-section { position: relative; }
.cat-section + .cat-section { margin-top: 0; }   /* banner own its top margin */

.cat-lbl {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--bca-navy);
  background: var(--bca-navy-12);
  border-left: 5px solid var(--bca-cyan);
  padding: 12px 14px 12px 16px;
  border-radius: 4px;
  margin: 16px 0 8px;
  position: sticky; top: 0; z-index: 10;
}
.cat-section:first-child .cat-lbl { margin-top: 0; }
.cat-lbl + .cust-item { padding-top: 4px; }
.cust-item {
  background: #fff; border-radius: 8px;
  padding: 12px 14px;
  border: 1px solid var(--border); margin-bottom: 8px;
  display: flex; align-items: center; gap: 12px;
}
.cust-item-info { flex: 1; min-width: 0; }
.cust-item-name {
  font-size: 13px; font-weight: 600; color: var(--text);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.cust-item-sku {
  font-size: 11px; color: var(--text-faint);
  font-family: 'SF Mono', monospace; margin-top: 2px;
}
.last-badge {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 10px; font-weight: 700;
}
.lb-hi { background: var(--success-lt); color: var(--success); }
.lb-md { background: var(--cyan-lt); color: var(--cyan-dk); }
.lb-lo { background: #F0F2F8; color: var(--text-mute); }

.stepper { display: inline-flex; align-items: center; gap: 6px; }
.stepper button {
  width: 32px; height: 32px; border: 1.5px solid var(--cyan);
  border-radius: 50%; background: #fff; color: var(--cyan);
  font-size: 16px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.stepper button:disabled { opacity: 0.35; cursor: not-allowed; }
.stepper .qty-display {
  min-width: 34px; text-align: center;
  font-size: 15px; font-weight: 700; color: var(--navy);
}

.notes-section {
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 14px; margin-top: 16px;
}
.notes-section label {
  font-size: 11px; font-weight: 600; color: var(--text-mute);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.notes-section textarea {
  width: 100%; min-height: 64px; margin-top: 6px;
  padding: 8px 10px; border: 1px solid var(--border);
  border-radius: 6px; font-family: inherit; font-size: 13px;
  resize: vertical;
}

.cust-foot {
  /* PR D Commit 3.6 (2026-05-01):
     - z-index 50 puts the toolbar above .cat-lbl (z-index 10) and
       any other in-page sticky element. Without this, the navy
       toolbar painted UNDER pinned banners on overlap (banners
       have z-index 10, toolbar had z-index auto = bottom of stack).
     - The 'background: var(--navy)' below is a fully opaque hex
       (#1A237E) — no rgba alpha — so anything behind it is fully
       hidden when the toolbar overlays content.
     - The negative top box-shadow gives the toolbar a soft separator
       cast upward when content sits just above it; reads as
       elevation, not a hard line. */
  position: sticky; bottom: 0; z-index: 50;
  background: var(--navy); margin: 16px -14px 0; padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
  border-top: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 -8px 16px rgba(0, 0, 0, 0.08);
}
.cust-foot-lbl { font-size: 12px; color: #7986CB; flex: 1; }
.cust-foot-lbl strong { color: #fff; font-weight: 700; }
.cust-submit {
  background: var(--cyan); color: #fff;
  padding: 11px 22px; border: none; border-radius: 8px;
  font-size: 14px; font-weight: 700;
}
.cust-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* ──────────────────────────────────────────────────────────────────────────
   SHARED: confirmation / error
   ────────────────────────────────────────────────────────────────────────── */
.center-card {
  max-width: 520px; margin: 60px auto; background: #fff;
  border-radius: 10px; padding: 32px; text-align: center;
  border: 1px solid var(--border);
}
.center-card h1 { color: var(--navy); font-size: 22px; margin-bottom: 8px; }
.center-card p { color: var(--text-soft); margin-bottom: 14px; }

/* ──────────────────────────────────────────────────────────────────────────
   MOBILE ADJUSTMENTS
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 800px) {
  .am-shell { grid-template-columns: 1fr; }
  .am-sidebar { display: none; }
  .stat-row { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .items-table { font-size: 11px; }
  .items-table th, .items-table td { padding: 8px 6px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   REVIEW DRAWER  (2026-04-23 brand redesign — white panel, navy submit,
   refined cool-grey backdrop with blur. Replaces the cream/teal v2 drawer
   which read warm-rustic next to the new brand system. White surface +
   navy primary action visually anchors the drawer to the rest of the
   redesigned portal. Pricing intentionally absent everywhere per the
   no-prices customer policy. JS class names (.review-drawer-btn-edit,
   .review-drawer-btn-submit) are stable — only visual styling changed.
   ────────────────────────────────────────────────────────────────────────── */
.review-drawer {
  /* Wrapper holds the open/closed state for ARIA + JS toggling. The
     backdrop and panel are independently positioned and styled below;
     they're children of this element so the .open class cascades to both. */
  visibility: hidden;
}
.review-drawer.open { visibility: visible; }

/* Backdrop — cool dark dim with blur. Sits behind the panel (z-index 40)
   and fades in/out on its own opacity transition so the panel's slide
   isn't dragged by it. */
.review-drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(10, 10, 15, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 240ms ease-out;
  pointer-events: none;
  z-index: 40;
}
.review-drawer.open .review-drawer-backdrop {
  opacity: 1;
  pointer-events: auto;
}

/* Panel — centered card lifted from the bottom edge. Pure white surface
   anchors the drawer to the page's brand system (cream washed out
   against the rest of the redesigned UI). Cool-grey shadow lifts it
   without ever feeling heavy. Spring-like cubic-bezier settles into place. */
.review-drawer-panel {
  position: fixed;
  bottom: 0;
  left: 0; right: 0;
  margin: 0 auto;
  max-width: 640px;
  max-height: 80vh;
  background: #ffffff;
  border-radius: 16px 16px 0 0;
  border-top: 0.5px solid rgba(10, 10, 15, 0.06);
  padding: 10px 0 0;          /* drag-handle room only — sub-sections own their padding */
  box-shadow:
    0 -12px 40px rgba(10, 10, 15, 0.18),
    0 -2px 8px rgba(10, 10, 15, 0.06);
  display: flex; flex-direction: column;
  overflow: hidden;
  overscroll-behavior: contain;
  transform: translateY(100%);
  transition: transform var(--duration-drawer-open) var(--ease-spring);
  z-index: 50;
}
.review-drawer.open .review-drawer-panel { transform: translateY(0); }
/* Brand-gradient stripe (3px) at the very top — matches the hero card
   stripe so the drawer reads as part of the same brand system. */
.review-drawer-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--bca-blue-deep)   0%,
    var(--bca-blue-bright) 35%,
    var(--bca-green)       70%,
    var(--bca-blue-deep)  100%
  );
  border-radius: 16px 16px 0 0;
  pointer-events: none;
}

/* Drag handle — small rounded bar at the top of the panel signals "I am
   draggable" affordance + acts as the pointerdown target for
   drawer-drag.js (falls back to the panel itself if absent). */
.review-drawer-drag-handle {
  width: 38px;
  height: 4px;
  border-radius: 2px;
  background: rgba(10, 10, 15, 0.18);
  margin: 0 auto 10px;
  cursor: grab;
  flex-shrink: 0;
  touch-action: pan-y;       /* let vertical scroll through, capture horizontal */
}
.review-drawer-drag-handle:active { cursor: grabbing; }

/* Item-cascade animation — every item row in the drawer fades+slides up
   when the drawer opens. JS sets --bca-stagger-delay per row (40ms*n)
   so the cascade reads as ordered, not simultaneous. */
@keyframes bca-drawer-item-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.review-drawer.open .review-drawer-item {
  animation: bca-drawer-item-in 240ms var(--ease-release) both;
  animation-delay: var(--bca-stagger-delay, 0ms);
}

/* Drawer header — logo + heading pair. Replaces the previous text-only
   heading. Logo on the left grounds the drawer in the brand without
   competing with the typography on the right. PR-followup 2026-04-28. */
.review-drawer-header {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 24px 16px;
}
.review-drawer-logo {
  flex-shrink: 0;
  height: 28px; width: auto;
  display: block;
}
.review-drawer-header-text {
  display: flex; flex-direction: column;
  min-width: 0;
}
.review-drawer-heading {
  font-size: 18px;
  font-weight: 700;
  color: #1A237E;
  letter-spacing: -0.3px;
  margin: 0 0 2px 0;
  text-transform: none;
  line-height: 1.2;
}
.review-drawer-subheading {
  font-size: 13px;
  font-weight: 400;
  color: #6b7280;
  letter-spacing: 0.02em;
  margin: 0;
}

/* Items list — scrolls inside the panel's max-height. PR-followup
   2026-04-28: row padding bumped + soft 1px dividers via --bca-border-soft
   so rows feel deliberate, not cramped. */
.review-drawer-items {
  list-style: none; padding: 0 24px; margin: 0;
  flex: 1; min-height: 0; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.review-drawer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--bca-border-soft, #f0f1f5);
}
.review-drawer-item:last-child { border-bottom: none; }
.review-drawer-item-name {
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
  flex: 1;
  padding-right: 16px;
  min-width: 0;
  letter-spacing: -0.1px;
}
.review-drawer-item-sku {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: #9ca3af;
  margin-top: 3px;
  letter-spacing: 0.3px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
}
/* Quantity column — pill treatment in brand-blue subtle tint. The pill
   sits inside the qty cell which provides the right-alignment.
   tabular-nums keeps the digits column-aligned across rows. */
.review-drawer-item-qty {
  flex-shrink: 0;
  text-align: right;
  min-width: 80px;
}
.review-drawer-qty-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 9999px;
  background: var(--bca-blue-deep-subtle, #e8f4f9);
  color: var(--bca-blue-deep, #1478A0);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1px;
  white-space: nowrap;
}

/* Total summary — full-width brand-tinted row that visually anchors
   the bottom of the item list. Reads as "this is the total" without
   needing extra labels or rule lines. PR-followup 2026-04-28. */
.review-drawer-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  margin: 8px 0 0;
  background: var(--bca-blue-deep-subtle, #e8f4f9);
  font-size: 13px;
  color: #374151;
}
.review-drawer-total-label {
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--bca-navy);
}
.review-drawer-total-value {
  font-weight: 600;
  color: var(--bca-blue-deep, #1478A0);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}
.review-drawer-total-value strong {
  font-weight: 700;
  color: var(--bca-navy);
}

/* Buttons — Edit ghost (subtle gray outline, lighter weight) + Submit
   navy-gradient with 3-layer shadow + arrow span. Edit visibly steps
   back so Submit clearly dominates as the primary action. PR-followup
   2026-04-28. */
.review-drawer-buttons {
  display: flex;
  gap: 12px;
  padding: 16px 24px 20px;
}
.review-drawer-btn-edit {
  background: transparent;
  border: 1px solid var(--bca-border, #e5e7eb);
  color: var(--bca-text-muted, #6b7280);
  font-weight: 500;
  font-size: 13px;
  padding: 10px 18px;
  border-radius: 8px;
  min-height: 44px;
  flex: 0 0 auto;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.review-drawer-btn-edit:hover {
  background: rgba(10, 10, 15, 0.03);
  color: var(--bca-text-primary, #1f2937);
  border-color: rgba(10, 10, 15, 0.18);
}
.review-drawer-btn-submit {
  background: linear-gradient(180deg, #1A237E 0%, #151c66 100%);
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  padding: 12px 24px;
  border-radius: 8px;
  border: none;
  min-height: 44px;
  flex: 1;
  letter-spacing: 0.2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow:
    0 1px 2px rgba(26, 35, 126, 0.20),
    0 4px 12px rgba(26, 35, 126, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
  cursor: pointer;
  transition: background 220ms ease, box-shadow 220ms ease;
}
.review-drawer-btn-submit:hover { background: linear-gradient(180deg, #1f2a8c 0%, #1A237E 100%); }
@media (hover: hover) {
  .review-drawer-btn-submit:hover .bca-btn-arrow { transform: translateX(3px); }
}
.review-drawer-btn-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* Mobile — full-width panel below 640px viewport, bigger touch targets,
   keep the top radius even when edge-to-edge so the panel reads as a
   distinct surface, not a page region. */
@media (max-width: 640px) {
  .review-drawer-panel {
    max-width: 100%;
    border-radius: 16px 16px 0 0;
    padding: 22px 18px 18px;
    max-height: 80vh;
  }
  .review-drawer-heading { font-size: 14px; }
  .review-drawer-item-name { font-size: 13.5px; }
  .review-drawer-btn-edit,
  .review-drawer-btn-submit { min-height: 48px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   BCA BRAND HEADER  (2026-04-23 — shared across every customer surface).
   Navy bar, transparent BCA logo on the left, customer name + thin
   "{zone} · {am_name}" chip beneath. Replaces the legacy .dash-header-*
   ladder (kept stylistically aligned in customer_dashboard.css for
   non-_customer_header surfaces, but routes share THIS header now).
   ────────────────────────────────────────────────────────────────────────── */
/* Header trim (2026-04-24): padding 14→10, logo 40→32, min-height 60→52,
   name 18→16. The point: confident frame, not dominant slab. */
.bca-header {
  background: var(--bca-navy);
  color: #fff;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  position: relative;
  z-index: 10;          /* sit ABOVE the page watermark */
}
.bca-header-left {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: inherit;
  min-width: 0;          /* allow the name to truncate, not push the row */
}
.bca-header-logo {
  /* PR D Commit 3 (2026-05-01): 32px → 44px for brand prominence. */
  height: 44px; width: auto;
  display: block; flex-shrink: 0;
}
.bca-header-text-block {
  display: flex; flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}
.bca-header-name {
  font-size: 16px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bca-header-chip {
  font-size: 11px;
  font-weight: 400;
  opacity: 0.78;
  margin-top: 1px;
  letter-spacing: 0.01em;
}
.bca-header-right {
  font-size: 11px; opacity: 0.65;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  white-space: nowrap;
}
@media (max-width: 520px) {
  .bca-header { padding: 8px 14px; gap: 8px; }
  .bca-header-logo { height: 32px; }   /* PR D Commit 3: +14% mobile bump */
  .bca-header-name { font-size: 15px; }
  .bca-header-right { display: none; }   /* the URL is in the address bar anyway */
}

/* ──────────────────────────────────────────────────────────────────────────
   PAGE WATERMARK  (single rotated logo whisper — 2026-04-24 redesign).
   The tiled checkerboard read as background noise; this version uses one
   large BCA logo image, rotated -22deg, anchored center-right with slight
   right-edge overflow, at 0.06 opacity. Reads as a deliberate brand
   "stamp" through the page rather than ambient pattern.

   Cards over this watermark use --bca-bg-card-over-watermark
   (rgba 255/0.95) so content stays crisp where it overlaps.

   Parallax on scroll lives in watermark-parallax.js (single transform
   string preserves the rotation).

   Reduced-motion: same image at the same opacity, no parallax movement.
   ────────────────────────────────────────────────────────────────────────── */
.bca-page-watermark {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  user-select: none;
}
/* Mobile default — right-anchored, slight overflow off-screen so the
   rotation visually completes past the viewport edge. */
.bca-page-watermark img {
  position: absolute;
  top: 40%;
  right: -80px;
  width: 85vw;
  height: auto;
  /* PR D Commit 3 (2026-05-01): 0.06 → 0.10 — brand stamp reads
     more confidently while still staying behind text content. */
  opacity: 0.10;
  transform: translateY(-50%) rotate(-22deg);
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
/* Desktop — centered horizontally + slightly above middle vertically so
   the rotated logo reads as a deliberate brand stamp behind everything,
   not a corner clip. The 1400px max keeps it from going edge-to-edge on
   ultra-wide monitors while 90vw scales it down on smaller laptops. */
@media (min-width: 769px) {
  .bca-page-watermark img {
    top: 45%;
    left: 50%;
    right: auto;
    width: min(1400px, 90vw);
    transform: translate(-50%, -50%) rotate(-22deg);
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   STAT CARD TOP-BORDER ACCENTS  (Mercury-tier hint of brand on each card).
   Three thin accent stripes, one per stat-card slot, in distinct brand
   tones so the row reads as "branded" without being noisy. Colors map to
   semantic role: navy = primary identity, deep-blue = activity, green =
   healthy / paid-up. The .bca-balance-due variant overrides the third
   slot when the customer carries a balance.
   ────────────────────────────────────────────────────────────────────────── */
/* Stat-card top borders — bumped 3→4px in the richness pass, with a
   1px inner top highlight that catches light against the brand color
   beneath. Premium detail: subtle but readable on retina screens. */
.dash-stat-row .dash-stat {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.dash-stat-row .dash-stat:nth-child(1) { border-top: 4px solid var(--bca-navy); }
.dash-stat-row .dash-stat:nth-child(2) { border-top: 4px solid var(--bca-blue-deep); }
.dash-stat-row .dash-stat:nth-child(3) { border-top: 4px solid var(--bca-green); }
/* Outstanding card: top border ALWAYS green; only the card bg flips to
   the soft-green tint when the customer is paid up. The earlier red-
   border-when-due treatment shouted at the customer; the green-only
   tint reads "all clear" without alarming on the negative state. */
.dash-stat-row .dash-stat.bca-balance-paid-card {
  background: var(--bca-green-subtle);
}

/* ──────────────────────────────────────────────────────────────────────────
   STAT TREND CHIP  (paired with "Orders (last 30d)" — directional change
   vs the prior 30d window. Inline next to the dollar total so the eye
   reads count → comparison in one sweep).
   ────────────────────────────────────────────────────────────────────────── */
.bca-stat-trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 8px;
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  padding: 1px 6px;
  border-radius: 10px;
}
.bca-stat-trend-up    { color: #1b5e20; background: var(--bca-green-subtle); }
.bca-stat-trend-down  { color: #b71c1c; background: #fdecea; }
.bca-stat-trend-flat  { color: var(--bca-text-secondary); background: rgba(10,10,15,0.04); }
.bca-stat-trend-new   { color: var(--bca-blue-deep); background: rgba(20, 120, 160, 0.08); }

/* ──────────────────────────────────────────────────────────────────────────
   HERO CARD  (dashboard top). Brand-gradient stripe runs across the top
   edge — left-to-right deep-blue → bright-blue → green → deep-blue echoes
   the BCA logo color sweep, anchors the dashboard's visual identity at
   the first thing the eye lands on. Stripe sits inside the card (not
   above it) via ::before with absolute positioning, so it inherits the
   card's border-radius cleanly.
   ────────────────────────────────────────────────────────────────────────── */
.dash-hero { position: relative; }
.dash-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--bca-blue-deep)   0%,
    var(--bca-blue-bright) 35%,
    var(--bca-green)       70%,
    var(--bca-blue-deep)  100%
  );
  border-radius: 8px 8px 0 0;
}

/* ──────────────────────────────────────────────────────────────────────────
   HERO GREETING  (dashboard top — "Good morning, Dave" + subtitle).
   Replaces the v1 generic "Ready to order?" with a personalized confident
   greeting that uses contact_persons[0].first_name when available.
   ────────────────────────────────────────────────────────────────────────── */
.bca-hero-greeting {
  font-size: 22px;
  font-weight: 500;
  color: var(--bca-text-primary);
  letter-spacing: -0.015em;
  margin: 0;
}
.bca-hero-greeting-sub {
  font-size: 13px;
  color: var(--bca-text-secondary);
  margin-top: 6px;
}

/* ──────────────────────────────────────────────────────────────────────────
   ORDER-COMPLETE BRAND STRIPE  (success page — three thin colored bands
   above the success card, one per brand color, signal "BCA confirmed" in
   the same visual vocabulary as the dashboard stat-card top borders).
   ────────────────────────────────────────────────────────────────────────── */
.bca-confirm-stripe {
  display: flex;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
}
.bca-confirm-stripe > span {
  flex: 1; height: 4px;
}
.bca-confirm-stripe > span:nth-child(1) { background: var(--bca-navy); }
.bca-confirm-stripe > span:nth-child(2) { background: var(--bca-blue-deep); }
.bca-confirm-stripe > span:nth-child(3) { background: var(--bca-green); }

/* Make all the post-redesign customer surfaces sit ABOVE the watermark. */
.dash-main, .cust-page, .dash-confirm-main { position: relative; z-index: 1; }

/* ──────────────────────────────────────────────────────────────────────────
   AM PORTAL — 2026-04-28 visual overhaul. Premium B2B treatment:
   tightened header (no LIVE badge, no avatar circle, proper AM identity
   block), refined sidebar (no bullet dots, 3px cyan-bright active border,
   subtle gradient bg, version stamp pinned bottom), homepage replaces
   wizard step pills with a thin breadcrumb + a single-line KPI strip
   above a polished search.
   All new classes prefixed `amx-` so they layer cleanly over the
   legacy .am-* / .topbar / .nav-item rules without clobbering them
   for any not-yet-migrated AM templates.
   ────────────────────────────────────────────────────────────────────────── */

/* Header */
.amx-header {
  background: var(--bca-navy);
  color: #fff;
  height: 64px;
  padding: 0 20px 0 16px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.amx-header-left {
  display: flex; align-items: center; gap: 16px;
  min-width: 0;
}
.amx-header-logo {
  /* PR D Commit 3 (2026-05-01): 40px → 46px (+14%) for brand confidence. */
  height: 46px; width: auto;
  display: block; flex-shrink: 0;
}
.amx-header-divider {
  width: 1px; height: 28px;
  background: rgba(255, 255, 255, 0.20);
  flex-shrink: 0;
}
.amx-header-title {
  font-size: 15px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.90);
  white-space: nowrap;
}
.amx-header-right {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 2px;
  padding-right: 12px;
}
.amx-header-am-name {
  font-size: 14px; font-weight: 600; color: #fff;
  letter-spacing: 0.01em;
}
.amx-header-am-role {
  font-size: 11px; color: rgba(255, 255, 255, 0.70);
  letter-spacing: 0.04em;
}

/* Sidebar */
.amx-sidebar {
  width: 240px;
  background: linear-gradient(180deg, var(--bca-navy) 0%, #1f2a8c 100%);
  padding: 0;
  display: flex; flex-direction: column;
  min-height: calc(100vh - 64px);
  border-right: 1px solid rgba(255, 255, 255, 0.04);
}
.amx-nav-section { padding: 0; }
.amx-nav-lbl {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.50);
  padding: 24px 20px 8px;
}
.amx-nav-item {
  display: block;
  padding: 10px 20px;
  font-size: 13px; font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.amx-nav-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}
.amx-nav-item.active {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-left-color: var(--bca-blue-bright);
  font-weight: 600;
}
.amx-sidebar-foot {
  margin-top: auto;
  padding: 16px 20px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.30);
  letter-spacing: 0.04em;
}

/* Page main */
.amx-content {
  background: var(--bca-bg-page);
  padding: 28px 32px;
  min-height: calc(100vh - 64px);
}
.amx-page-title {
  font-size: 24px; font-weight: 700;
  color: var(--bca-text-primary);
  letter-spacing: -0.4px;
  margin: 0 0 18px;
}

/* KPI strip — single line of 4 inline metrics separated by dividers. */
.amx-kpi-strip {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--bca-bg-card-over-watermark, #ffffff);
  border: 1px solid var(--bca-border, #e5e7eb);
  border-radius: 8px;
  margin-bottom: 18px;
  font-size: 13px;
  color: var(--bca-text-secondary, #4b5563);
  font-variant-numeric: tabular-nums;
}
.amx-kpi { white-space: nowrap; }
.amx-kpi strong {
  color: var(--bca-text-primary);
  font-weight: 700;
  margin-right: 4px;
}
.amx-kpi-sep {
  width: 1px; height: 14px;
  background: var(--bca-border, #e5e7eb);
}
.amx-kpi-warn strong { color: var(--bca-warning, #e65100); }

/* Breadcrumb-style step indicator (replaces the wizard step pills). */
.amx-breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500;
  color: var(--bca-text-muted, #6b7280);
  margin-bottom: 18px;
}
.amx-crumb { color: var(--bca-text-muted, #6b7280); }
.amx-crumb.active {
  color: var(--bca-navy);
  font-weight: 700;
}
.amx-crumb-sep { color: var(--bca-text-tertiary, #9ca3af); }

/* AM-name dropdown row — picker + Manage AMs link, right-aligned */
.amx-am-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 14px;
}
.amx-am-row-field { display: flex; flex-direction: column; gap: 4px; min-width: 220px; }
.amx-field-lbl {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--bca-text-muted, #6b7280);
}
.amx-am-select {
  padding: 10px 12px;
  border: 1px solid var(--bca-border, #e5e7eb);
  border-radius: 6px;
  font-size: 14px;
  background: #fff;
  font-weight: 500;
  color: var(--bca-text-primary);
}
.amx-am-select:focus {
  outline: none;
  border-color: var(--bca-navy);
  box-shadow: 0 0 0 3px rgba(26, 35, 126, 0.12);
}
.amx-am-manage-link {
  font-size: 12px; color: var(--bca-text-muted, #6b7280);
  text-decoration: none;
}
.amx-am-manage-link:hover { color: var(--bca-navy); text-decoration: underline; }

/* Search input — premium 56px tall with inset icon + clear button */
.amx-search-wrap {
  position: relative;
  margin-bottom: 8px;
}
.amx-search-input {
  width: 100%;
  height: 56px;
  padding: 0 48px 0 48px;
  border: 1.5px solid var(--bca-border, #e5e7eb);
  border-radius: 8px;
  font-size: 16px; font-weight: 500;
  background: #fff;
  color: var(--bca-text-primary);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.amx-search-input:focus {
  outline: none;
  border-color: var(--bca-navy);
  box-shadow: 0 0 0 3px rgba(26, 35, 126, 0.12);
}
.amx-search-input::placeholder { color: var(--bca-text-muted, #6b7280); font-weight: 400; }
.amx-search-icon {
  position: absolute; left: 16px; top: 50%;
  transform: translateY(-50%);
  color: var(--bca-text-muted, #6b7280);
  pointer-events: none;
}
.amx-search-clear {
  position: absolute; right: 12px; top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  border: none; background: transparent;
  color: var(--bca-text-muted, #6b7280);
  font-size: 22px; line-height: 1; cursor: pointer;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.amx-search-clear:hover {
  background: rgba(10, 10, 15, 0.06);
  color: var(--bca-text-primary);
}
/* "No matches found" empty state for the AM customer search dropdown
   (PR-followup 2026-04-28). 14px muted text + 24px padding so it reads
   as a deliberate empty state, not a malformed row. */
.amx-search-empty {
  padding: 24px;
  text-align: center;
  font-size: 14px;
  color: var(--bca-text-muted, #6b7280);
}

/* ──────────────────────────────────────────────────────────────────────────
   FEATURED ITEMS CART (am_customer_edit.html — PR-followup 2026-04-28)
   Stage-then-bulk-commit pattern. Search results render inline with
   [+ Stage] buttons; staged items appear below in a yellow-tinted area
   with per-item note inputs; one bulk commit button.
   ────────────────────────────────────────────────────────────────────────── */
.amx-feat-search-wrap {
  position: relative;
  margin-bottom: 14px;
}
.amx-feat-search-wrap > input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--bca-border, #e5e7eb);
  border-radius: 6px;
  font-size: 13px;
  background: #fff;
}
.amx-feat-search-wrap > input:focus {
  outline: none;
  border-color: var(--bca-navy);
  box-shadow: 0 0 0 3px rgba(26, 35, 126, 0.10);
}
#featured-search-results {
  position: absolute; top: 100%; left: 0; right: 0;
  background: #fff;
  border: 1px solid var(--bca-border, #e5e7eb);
  border-radius: 6px;
  max-height: 320px; overflow-y: auto;
  z-index: 10; margin-top: 4px;
  box-shadow: var(--bca-shadow-md);
}
.amx-feat-result-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--bca-border-soft, #f0f1f5);
  font-size: 13px;
}
.amx-feat-result-row:last-child { border-bottom: none; }
.amx-feat-result-info { min-width: 0; flex: 1; }
.amx-feat-result-name {
  font-weight: 600; color: var(--bca-text-primary);
}
.amx-feat-result-sku {
  font-size: 11px;
  color: var(--bca-text-muted, #6b7280);
  font-family: 'SF Mono', Menlo, Consolas, monospace;
}
.amx-feat-result-unit {
  font-size: 11px;
  color: var(--bca-text-muted, #6b7280);
  margin-left: 8px;
}
.amx-feat-result-empty {
  padding: 14px; text-align: center;
  font-size: 12px; color: var(--bca-text-muted, #6b7280);
}
.amx-feat-stage-btn {
  background: transparent;
  border: 1px solid var(--bca-navy);
  color: var(--bca-navy);
  font-size: 12px; font-weight: 600;
  padding: 5px 12px;
  border-radius: 9999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms ease, color 120ms ease;
}
.amx-feat-stage-btn:hover {
  background: var(--bca-navy);
  color: #fff;
}
.amx-feat-stage-tag {
  font-size: 11px; font-weight: 600;
  padding: 5px 10px;
  border-radius: 9999px;
  white-space: nowrap;
}
.amx-feat-stage-tag-staged {
  background: rgba(26, 35, 126, 0.08);
  color: var(--bca-navy);
}
.amx-feat-stage-tag-already {
  background: rgba(10, 10, 15, 0.05);
  color: var(--bca-text-muted, #6b7280);
}

.amx-feat-staged {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.amx-feat-staged-header {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #92400e;
  margin-bottom: 10px;
}
.amx-feat-staged-count {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: #92400e;
}
.amx-feat-staged-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(146, 64, 14, 0.10);
}
.amx-feat-staged-row:last-child { border-bottom: none; }
.amx-feat-staged-info { flex: 0 0 220px; min-width: 0; }
.amx-feat-staged-name {
  font-size: 13px; font-weight: 600;
  color: var(--bca-text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.amx-feat-staged-sku {
  font-size: 11px;
  color: var(--bca-text-muted, #6b7280);
  font-family: 'SF Mono', Menlo, Consolas, monospace;
}
.amx-feat-staged-note {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid rgba(146, 64, 14, 0.20);
  border-radius: 4px;
  font-size: 12px;
  background: #fff;
}
.amx-feat-staged-note:focus {
  outline: none;
  border-color: #92400e;
  box-shadow: 0 0 0 2px rgba(146, 64, 14, 0.10);
}
.amx-feat-staged-remove {
  width: 24px; height: 24px;
  border: none; background: transparent;
  color: var(--bca-text-muted, #6b7280);
  font-size: 18px; line-height: 1;
  cursor: pointer; border-radius: 50%;
}
.amx-feat-staged-remove:hover { background: rgba(146, 64, 14, 0.10); color: #92400e; }
.amx-feat-staged-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(146, 64, 14, 0.12);
}

/* ──────────────────────────────────────────────────────────────────────────
   REDUCED-MOTION BLANKET (main.css surfaces)
   Drawer/header/watermark animations collapse to instant. Per-component
   reduced-motion guards live next to their rules in interactions.css;
   this block covers the surfaces unique to this file.
   ────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .review-drawer-panel,
  .review-drawer.open .review-drawer-item,
  .review-drawer-backdrop {
    transition: none !important;
    animation: none !important;
  }
  .review-drawer .review-drawer-panel { transform: translateY(0) !important; }
  .review-drawer:not(.open) .review-drawer-panel { transform: translateY(100%) !important; }
}