/* jj-inventory (handoff area A) — house tokens only, no hex. Loaded by one
   marked <link> in index.html; the hooks it styles are added by
   public/js/jj-inventory.js. */

/* ── A2 / A3 / A-4: the red row. The server marks the row (row.missing_tint →
   a hidden .jj-row-tint inside the Watch cell / card); :has() tints the whole
   line, so the tint reads the SAME predicate as the filter and the count. ── */
#inventory-tbody tr:has(.jj-row-tint) > td {
  background: var(--red-dim);
}
#inventory-tbody tr:has(.jj-row-tint) > td:first-child {
  box-shadow: inset 3px 0 0 var(--red);
}
#inventory-tbody tr:has(.jj-row-tint):hover > td {
  background: color-mix(in srgb, var(--red) 18%, transparent);
}
#page-inventory .inv-card:has(.jj-row-tint) {
  background: linear-gradient(var(--red-dim), var(--red-dim)), var(--bg-raised) !important;
  border-color: color-mix(in srgb, var(--red) 55%, transparent) !important;
  box-shadow: inset 3px 0 0 var(--red) !important;
}

.jj-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 3px 6px 0 0; vertical-align: middle; }
.jj-chip {
  display: inline-flex; align-items: center;
  font-size: 10.5px; font-weight: 600; line-height: 1.5; letter-spacing: 0.2px;
  padding: 0 7px; border-radius: var(--radius-pill);
  color: var(--red); background: var(--red-dim);
  border: 1px solid color-mix(in srgb, var(--red) 45%, transparent);
  white-space: nowrap;
}
.inv-card > .jj-card-flags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.inv-card .jj-card-flags > * { margin: 0; }
.inv-card .jj-chips { margin: 0; }
@media (max-width: 768px) {
  .inv-card .jj-chip { font-size: 13px; padding: 2px 9px; }
}

/* ── A5: Paid / All-in columns. Hidden exactly where Cost is hidden. ── */
#page-inventory .table-wrap th:is([data-col="paid"], [data-col="all-in"]) { width: 84px; }
#page-inventory .table-wrap td:is([data-col="paid"], [data-col="all-in"]) { font-size: 11px; white-space: nowrap; }
#page-inventory.wf-no-cost :is([data-col="paid"], [data-col="all-in"]),
#page-inventory.wf-runner-locked :is([data-col="paid"], [data-col="all-in"]) { display: none !important; }

/* ── A4 → Private view: money is not rendered (JS swaps it for "Hidden"
   outside the inventory list, and the list drops its money columns). ── */
.jj-hidden-money { color: var(--muted) !important; font-style: italic; font-weight: 400 !important; font-family: inherit !important; }
.jj-private-note { display: flex; align-items: center; gap: 8px; margin: 18px 2px 8px; font-size: 13px; color: var(--muted); }
.jj-private-note svg, .jj-list-foot svg { width: 15px; height: 15px; flex: 0 0 15px; }
.jj-blur-btn svg { width: 16px; height: 16px; }
.jj-blur-btn, .jj-blur-btn:is(:hover, :focus-visible) {
  width: 32px; height: 32px; min-width: 32px; min-height: 32px; max-width: 32px; max-height: 32px;
  flex: 0 0 32px; aspect-ratio: 1 / 1; box-sizing: border-box; border-radius: 50%;
  padding: 0; line-height: 0; display: inline-flex; align-items: center; justify-content: center;
}
.jj-blur-pill { display: inline-flex; align-items: center; gap: 6px; }
.jj-blur-pill svg { width: 15px; height: 15px; flex: 0 0 15px; }
[data-jj-blur-toggle] .jj-eye-slash { display: none; }
html.wf-private-view [data-jj-blur-toggle] .jj-eye-slash { display: inline; }
html.wf-private-view .jj-blur-btn { color: var(--blue); }
@media (max-width: 768px) {
  .jj-blur-btn, .jj-blur-btn:is(:hover, :focus-visible) {
    width: 44px; height: 44px; min-width: 44px; min-height: 44px; max-width: 44px; max-height: 44px; flex: 0 0 44px;
  }
  .jj-blur-pill { min-height: 44px; }
}

/* ── A-5 / A6 / A-7: the watch detail additions ── */
.jj-detail:empty { display: none; }
.jj-detail { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--border); padding-top: 10px; margin-top: 8px; }
.jj-sub-title { font-size: 11px; font-weight: 500; letter-spacing: 0.8px; text-transform: uppercase; color: var(--off-white); margin-bottom: 4px; }
.jj-cost-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--white); padding: 3px 0; }
.jj-cost-label { color: var(--off-white); min-width: 0; }
.jj-cost-val { color: var(--white); text-align: right; }
.jj-cost-total { border-top: 1px solid var(--border); margin-top: 2px; padding-top: 6px; font-weight: 600; }
.jj-cost-total .jj-cost-label { color: var(--white); }
.jj-floor .jj-cost-row { flex-wrap: wrap; }
.jj-edit-btn { margin-left: auto; }
.jj-set-card [data-jj-act="stages"] { white-space: nowrap; flex: 0 0 auto; }
.jj-inline-form[hidden] { display: none; }
.jj-inline-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 6px; }
.jj-field { display: flex; flex-direction: column; gap: 4px; min-width: 120px; flex: 1 1 120px; }
.jj-field > span { font-size: 11px; font-weight: 500; letter-spacing: 0.8px; text-transform: uppercase; color: var(--off-white); }
.jj-field :is(input, select), .jj-name-in, .jj-select {
  background: var(--bg-void); border: 1.5px solid var(--border); border-radius: 8px;
  color: var(--white); padding: 7px 10px; font-size: 13px; min-height: 36px; box-sizing: border-box;
}
.jj-field :is(input, select):focus, .jj-name-in:focus, .jj-select:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 12%, transparent);
}
.jj-name-in::placeholder, .jj-field input::placeholder { color: var(--faint); }
@media (max-width: 768px) {
  .jj-field :is(input, select), .jj-name-in, .jj-select { font-size: 16px; min-height: 44px; }
  .jj-cost-row { font-size: 15px; }
}

/* ── Settings cards ── */
.jj-set-card .md-set-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.jj-set-card .md-set-row:last-child { border-bottom: 0; }
.jj-set-card .md-set-name { color: var(--white); font-size: 13px; min-width: 0; }
.jj-set-card .md-set-sub { font-size: 11.5px; color: var(--off-white); margin-top: 2px; line-height: 1.45; }
.jj-set-card .toggle { flex: 0 0 auto; }
.jj-def-fields.is-off { opacity: 0.55; }
.jj-set-card .md-set-row > label.md-set-name { flex: 1 1 auto; }
.jj-select { width: 220px; flex: 0 0 220px; min-width: 0; }
.jj-name-row .jj-name-in { width: 220px; max-width: 55%; }
.jj-names-more { margin-top: 10px; }
.jj-ro-note { font-size: 11px; margin-top: 8px; color: var(--off-white); }
@media (max-width: 768px) {
  .jj-set-card .md-set-name { font-size: 15px; }
  .jj-set-card .md-set-sub { font-size: 13px; }
  .jj-select { width: 55%; flex: 0 0 55%; }
}

/* ═══ R01 — Hal's Inventory list redesign (desktop + phone) ═══════════════
   Scoped to #page-inventory.jj-r01 (set by jj-inventory.js) so removing the
   class restores the old page. Tokens only: the primary is the theme's own
   --blue with --on-accent ink, so day and night both resolve. */
#page-inventory.jj-r01 {
  --jj-primary: var(--blue);
  --jj-on-primary: var(--on-accent, var(--bg-raised));
  --jj-card: var(--bg-raised);
  --jj-line: var(--border);
  --jj-radius: 12px;
}
/* old chrome this page replaces */
#page-inventory.jj-r01 #inventory-kpis,
#page-inventory.jj-r01 .wf-kpi-railwrap,
#page-inventory.jj-r01 #inv-quick-actions,
#page-inventory.jj-r01 .inv-separator,
#page-inventory.jj-r01 .inv-hero-rule,
#page-inventory.jj-r01 .inv-mobile-rule,
#page-inventory.jj-r01 #inv-select-btn,
#page-inventory.jj-r01.jj-no-acc #inv-kind-switch,
#page-inventory.jj-r01:not(.jj-has-sold) [data-col="sold"] { display: none !important; }

/* header: eyebrow + big sans title + labelled actions */
#page-inventory.jj-r01 .inv-desktop-header { align-items: flex-end; margin-bottom: 14px !important; }
#page-inventory.jj-r01 .inv-hero-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
#page-inventory.jj-r01 .inv-hero-title { font-family: var(--font-sans, 'DM Sans', system-ui, sans-serif) !important; font-size: 34px !important; font-weight: 700 !important; letter-spacing: -0.5px; color: var(--white); line-height: 1.1; margin: 0; }
#page-inventory.jj-r01 .inv-desktop-header .btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 10px; font-size: 13.5px; font-weight: 500; }
#page-inventory.jj-r01 .inv-desktop-header .btn svg { width: 16px; height: 16px; margin: 0 !important; flex: 0 0 16px; }
#page-inventory.jj-r01 .inv-desktop-header .btn-outline { background: var(--jj-card); border: 1px solid var(--jj-line); color: var(--white); }
#page-inventory.jj-r01 [data-inv-add-btn] { background: var(--jj-primary) !important; color: var(--jj-on-primary) !important; border: 1px solid var(--jj-primary) !important; box-shadow: none; }
#page-inventory.jj-r01 [data-inv-add-btn] svg { width: 16px; height: 16px; }

/* one calm stats card */
.jj-stats { display: none; }
#page-inventory.jj-r01 .jj-stats {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: center;
  background: var(--jj-card); border: 1px solid var(--jj-line); border-radius: var(--jj-radius);
  padding: 16px 0; margin-bottom: 14px;
}
#page-inventory.jj-r01 .jj-stat { padding: 0 24px; border-left: 1px solid var(--jj-line); min-width: 0; }
#page-inventory.jj-r01 .jj-stat:first-child { border-left: 0; }
#page-inventory.jj-r01 .jj-stat[hidden] { display: none; }
#page-inventory.jj-r01 .jj-stat-k { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--off-white); white-space: nowrap; }
#page-inventory.jj-r01 .jj-stat-k svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--muted); }
#page-inventory.jj-r01 .jj-stat-v { font-size: 26px; font-weight: 700; color: var(--white); margin-top: 4px; font-variant-numeric: tabular-nums; }
.jj-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; display: inline-block; }
.jj-dot.is-green { background: var(--green); }
.jj-dot.is-blue { background: var(--blue); }

/* toolbar card + Needs attention */
#page-inventory.jj-r01 #inv-filter-card {
  display: grid !important; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 12px; align-items: stretch;
  background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin-bottom: 14px;
}
#page-inventory.jj-r01 #inv-filter-card > *:not(.inv-toolbar):not([data-jj-attn]) { grid-column: 1 / -1; }
#page-inventory.jj-r01 .inv-toolbar {
  background: var(--jj-card); border: 1px solid var(--jj-line); border-radius: var(--jj-radius); padding: 8px; gap: 8px; margin: 0 !important;
}
#page-inventory.jj-r01 .inv-toolbar .search-input { background: var(--bg-void) !important; border: 0 !important; border-radius: 8px !important; height: 40px; }
#page-inventory.jj-r01 .inv-toolbar .inv-filters-btn { height: 40px; border-radius: 8px; background: var(--jj-card); border: 1px solid var(--jj-line); color: var(--white); padding: 0 18px; }
.jj-attn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
  height: 44px; padding: 0 12px 0 14px; border-radius: 10px; cursor: pointer;
  background: var(--jj-card, var(--bg-raised)); border: 1.5px solid color-mix(in srgb, var(--red) 70%, transparent);
  color: var(--red); font-size: 13.5px; font-weight: 600;
}
.jj-attn[hidden] { display: none !important; }
.jj-attn > svg { width: 18px; height: 18px; flex: 0 0 18px; }
.jj-attn-n { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--red-dim); color: var(--red); font-size: 12px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
#page-inventory.jj-r01 #inv-filter-card > [data-jj-attn] { align-self: center; }

/* status segments */
#page-inventory.jj-r01 .inv-status-bar {
  display: flex !important; justify-content: space-between; gap: 6px; padding: 5px; margin: 0;
  background: var(--jj-card); border: 1px solid var(--jj-line); border-radius: var(--jj-radius);
}
#page-inventory.jj-r01 .inv-status-chip { flex: 1 1 0; justify-content: center; height: 40px; border-radius: 9px; background: transparent; border: 0; color: var(--off-white); font-size: 13.5px; gap: 8px; }
#page-inventory.jj-r01 .inv-status-chip.active { background: var(--jj-primary) !important; color: var(--jj-on-primary) !important; }
#page-inventory.jj-r01 .inv-status-chip .inv-status-count { background: var(--bg-void); color: var(--off-white); border-radius: 999px; min-width: 22px; padding: 1px 7px; font-size: 12px; }
#page-inventory.jj-r01 .inv-status-chip.active .inv-status-count { background: color-mix(in srgb, var(--jj-on-primary) 22%, transparent); color: var(--jj-on-primary); }

/* the table */
#page-inventory.jj-r01 #inv-list-card { border: 1px solid var(--jj-line); border-radius: var(--jj-radius); overflow: hidden; background: var(--jj-card); box-shadow: none; }
#page-inventory.jj-r01 .inv-row-check { display: table-cell !important; width: 44px; }
#page-inventory.jj-r01 .inv-row-check-box { display: inline-block !important; width: 18px; height: 18px; border: 1.5px solid var(--border-light); border-radius: 5px; background: var(--jj-card); }
#page-inventory.jj-r01 .table-wrap thead th { font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); height: 44px; background: var(--jj-card); }
#page-inventory.jj-r01 .table-wrap tbody td { height: 88px; padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--jj-line); vertical-align: middle; }
#page-inventory.jj-r01 .table-wrap :is(td, th):is([data-col="cost"], [data-col="paid"], [data-col="all-in"], [data-col="retail"], [data-col="wholesale"], [data-col="sold"]) { text-align: right; }
#page-inventory.jj-r01 .table-wrap td:is([data-col="cost"], [data-col="paid"], [data-col="all-in"], [data-col="retail"], [data-col="wholesale"], [data-col="sold"]) { font-family: inherit !important; font-size: 13.5px !important; color: var(--white) !important; font-variant-numeric: tabular-nums; }
#page-inventory.jj-r01 .watch-thumb-sm { width: 64px !important; height: 64px !important; border-radius: 10px !important; border: 1px solid var(--jj-line); background: var(--bg-void); }
#page-inventory.jj-r01 .table-wrap td > div[style*="font-weight:500"] { font-size: 14px; font-weight: 500 !important; }
#page-inventory.jj-r01 .table-wrap td > .text-muted[style*="font-size:10px"] { font-size: 12px !important; margin-top: 2px; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
#page-inventory.jj-r01 .table-wrap td:nth-child(3) { min-width: 210px; white-space: normal; }
#page-inventory.jj-r01 .jj-chip { font-size: 12px; font-weight: 500; padding: 2px 10px; border-radius: 8px; background: var(--jj-card); border: 1px solid color-mix(in srgb, var(--red) 60%, transparent); }
#page-inventory.jj-r01 .jj-chips { margin: 6px 0 0; }
#page-inventory.jj-r01 #inventory-tbody tr:has(.jj-row-tint) > td { background: var(--red-dim); }
.jj-list-foot { display: none; }
#page-inventory.jj-r01 .jj-list-foot { display: block; padding: 14px 2px 4px; font-size: 13px; color: var(--muted); }
.jj-list-bar { display: none; }
.jj-topbar-add { display: none; }
/* The page's own Add watch (header button / phone top bar) replaces the floating + here. */
html.jj-on-inventory :is(#unified-fab, #inv-fab-dock) { display: none !important; }

/* ── phone ── */
@media (max-width: 768px) {
  html.jj-on-inventory .jj-topbar-add {
    display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 10px; border-radius: 9px; margin-left: 2px;
    background: var(--blue); color: var(--on-accent, var(--bg-raised)); border: 0; font-size: 14px; font-weight: 600; white-space: nowrap; flex: 0 0 auto;
  }
  html.jj-on-inventory:not(.jj-inv-filtered) .jj-topbar-add svg { width: 16px; height: 16px; flex: 0 0 16px; }
  html.jj-on-inventory .topbar .topbar-spacer { flex: 0 1 0; min-width: 0; }
  html.jj-on-inventory .topbar .topbar-center-logo { margin-right: auto; font-size: 13px; letter-spacing: 2px; white-space: nowrap; }
  html.jj-on-inventory .topbar .topbar-actions { gap: 2px; }
  #page-inventory.jj-r01 .inv-mobile-eyebrow,
  #page-inventory.jj-r01 #inv-select-mobile-btn,
  #page-inventory.jj-r01 #inv-filter-card > [data-jj-attn],
  #page-inventory.jj-r01 [data-inv-add-tile],
  #page-inventory.jj-r01 .inv-card-days,
  #page-inventory.jj-r01 .jj-stat[data-jj-stat="sold"] { display: none !important; }
  #page-inventory.jj-r01 .inv-mobile-greeting { font-family: var(--font-sans, 'DM Sans', system-ui, sans-serif) !important; font-size: 34px !important; font-weight: 700 !important; letter-spacing: -0.5px; color: var(--white); }
  #page-inventory.jj-r01 .inv-mobile-header { margin-bottom: 8px; min-height: 0; }
  #page-inventory.jj-r01 .jj-stats { padding: 12px 0; }
  #page-inventory.jj-r01 .jj-stat { padding: 0 10px; }
  #page-inventory.jj-r01 .jj-stat-k { font-size: 13px; gap: 5px; }
  #page-inventory.jj-r01 .jj-stat-k svg { width: 14px; height: 14px; flex-basis: 14px; }
  #page-inventory.jj-r01 .jj-stat-v { font-size: 22px; }
  #page-inventory.jj-r01 .inv-filters-label { display: inline !important; }
  #page-inventory.jj-r01 .inv-toolbar .inv-filters-btn { width: auto !important; padding: 0 14px; gap: 8px; display: inline-flex; align-items: center; }
  #page-inventory.jj-r01 #inv-filter-card { grid-template-columns: minmax(0, 1fr); }
  #page-inventory.jj-r01 .inv-toolbar { background: transparent; border: 0; padding: 0; }
  #page-inventory.jj-r01 .inv-toolbar .search-input { background: var(--jj-card) !important; border: 1px solid var(--jj-line) !important; height: 48px; font-size: 16px; }
  #page-inventory.jj-r01 .inv-toolbar .inv-filters-btn { height: 48px; }
  /* Views + Filters sit beside search at full label; search takes what is left. */
  #page-inventory.jj-r01 .inv-toolbar { display: flex !important; gap: 8px !important; }
  #page-inventory.jj-r01 .inv-toolbar .search-wrap { flex: 1 1 auto; min-width: 0; }
  #page-inventory.jj-r01 .inv-toolbar .inv-filters-btn { flex: 0 0 auto; padding: 0 12px !important; gap: 6px; }
  #page-inventory.jj-r01 #inv-views-btn { display: inline-flex !important; align-items: center; }
  html.wf-no-views #page-inventory #inv-views-btn { display: none !important; }   /* runners: classic bar, no Views (2026-10-08) */
  #page-inventory.jj-r01 .inv-status-bar { background: transparent; border: 0; padding: 0; overflow-x: auto; justify-content: flex-start; gap: 8px; scrollbar-width: none; flex-wrap: nowrap !important; display: flex !important; grid-template-columns: none !important; }
  #page-inventory.jj-r01 .inv-status-chip { flex: 0 0 auto; height: 44px; padding: 0 16px; background: var(--jj-card); border: 1px solid var(--jj-line); font-size: 16px; }
  #page-inventory.jj-r01 .jj-list-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: var(--jj-card); border: 1px solid var(--jj-line); border-radius: var(--jj-radius);
    padding: 6px 6px 6px 14px; margin: 0 0 10px; font-size: 16px; color: var(--off-white); min-height: 44px; box-sizing: border-box;
  }
  #page-inventory.jj-r01 .jj-list-bar .jj-attn { font-size: 15px; }
  #page-inventory.jj-r01 #inv-list-card { background: transparent; border: 0; overflow: visible; }
  #page-inventory.jj-r01 .jj-list-foot { display: none; }
  /* cards */
  #page-inventory.jj-r01 .inv-card { background: var(--jj-card); border: 1px solid var(--jj-line); border-radius: var(--jj-radius); box-shadow: none; grid-template-columns: 76px minmax(0, 1fr) !important; padding: 10px 12px 12px; gap: 4px 12px; overflow: hidden; }
  #page-inventory.jj-r01 .inv-card-thumb { width: 72px; height: 72px; border-radius: 10px; grid-row: span 2; }
  #page-inventory.jj-r01 .inv-card-brand-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 8px; }
  #page-inventory.jj-r01 .inv-card-brand { flex: 1 1 100%; min-width: 0; font-size: 16px; font-weight: 600; line-height: 1.25; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; word-break: normal !important; -webkit-line-clamp: unset !important; display: block !important; }
  #page-inventory.jj-r01 .inv-card-body { min-width: 0; }
  #page-inventory.jj-r01 .wf-ct-sku { font-size: 12px !important; padding: 2px 8px !important; height: auto !important; }
  #page-inventory.jj-r01 .wf-ct-corner { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; position: static !important; }
  #page-inventory.jj-r01 .wf-ct-corner .row-status-picker { width: auto !important; margin: 0 !important; }
  #page-inventory.jj-r01 .inv-card-model { font-size: 14px; color: var(--off-white); margin-top: 2px; }
  #page-inventory.jj-r01 .inv-card-pricestrip.jj-money-grid { grid-column: 2 / -1; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; border: 0; border-bottom: 1px solid var(--jj-line); padding: 6px 0 8px; margin: 0; background: transparent; }
  #page-inventory.jj-r01 .jj-money-grid > div { border: 0 !important; padding: 0 !important; display: flex; flex-direction: column; gap: 2px; }
  #page-inventory.jj-r01 .jj-money-grid .inv-card-ps-label { font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--muted); }
  #page-inventory.jj-r01 .jj-money-grid .inv-card-ps-value { font-size: 17px; font-weight: 600; color: var(--white); }
  #page-inventory.jj-r01 .jj-card-line { grid-column: 2 / -1; font-size: 14px; color: var(--muted); padding-top: 6px; }
  #page-inventory.jj-r01 .inv-card:has(.jj-row-tint) { padding-bottom: 0; }
}
.jj-problem-strip { display: none; }
@media (max-width: 768px) {
  #page-inventory.jj-r01 .jj-problem-strip {
    grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; width: calc(100% + 24px); margin: 8px -12px 0; padding: 10px 14px; min-height: 52px; box-sizing: border-box;
    background: var(--red-dim); border: 0; border-top: 1px solid color-mix(in srgb, var(--red) 25%, transparent); color: var(--red); text-align: left; cursor: pointer;
  }
  #page-inventory.jj-r01 .jj-ps-ic svg { width: 24px; height: 24px; display: block; }
  #page-inventory.jj-r01 .jj-ps-text { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
  #page-inventory.jj-r01 .jj-ps-title { font-size: 16px; font-weight: 600; color: var(--red); }
  #page-inventory.jj-r01 .jj-ps-sub { font-size: 14px; color: var(--muted); }
  #page-inventory.jj-r01 .jj-ps-chev { width: 18px; height: 18px; color: var(--muted); flex: 0 0 18px; }
}

/* phone fixes for R01 */
@media (max-width: 768px) {
  html.jj-on-inventory .topbar .topbar-center-logo { font-size: 12px !important; letter-spacing: 1.5px !important; }
  html.jj-on-inventory .topbar .topbar-actions { gap: 0 !important; }
  html.jj-on-inventory .jj-topbar-add { padding: 0 10px; font-size: 13.5px; height: 40px !important; min-height: 40px !important; max-height: 40px; align-self: center; margin: 0 0 0 2px !important; }
  html.wf-private-view #page-inventory.jj-r01 .jj-private-bar { margin-bottom: 2px !important; }
  #page-inventory.jj-r01 .inv-status-chip { background: var(--jj-card) !important; border: 1px solid var(--jj-line) !important; }
  #page-inventory.jj-r01 .inv-status-chip.active { border-color: var(--jj-primary) !important; }
  #page-inventory.jj-r01 .inv-card-brand { font-weight: 600 !important; }
  #page-inventory.jj-r01 .inv-toolbar .inv-filters-btn .inv-filters-label { display: inline !important; position: static !important; width: auto !important; height: auto !important; clip: auto !important; overflow: visible !important; }
}

/* ═══ R01b — Private view on the Inventory page ═══ */
.jj-psum, .jj-private-bar, .jj-private-badge { display: none !important; }
html.wf-private-view #page-inventory.jj-r01 .jj-psum {
  display: flex !important; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin: 2px 0 16px; font-size: 16px; color: var(--white);
}
html.wf-private-view #page-inventory.jj-r01 .jj-psum b { font-weight: 600; }
.jj-psum-item { display: inline-flex; align-items: center; gap: 8px; font: inherit; color: var(--white); background: none; border: 0; padding: 0; }
.jj-psum-item[hidden] { display: none; }
button.jj-psum-attn { cursor: pointer; min-height: 32px; }
.jj-psum-sep { width: 1px; height: 16px; background: var(--border-light); display: inline-block; }
.jj-psum-sep.is-slash { transform: skewX(-20deg); }
.jj-dot.is-red { background: var(--red); }
html.wf-private-view #page-inventory.jj-r01 :is(.jj-stats, [data-jj-attn], .jj-list-bar) { display: none !important; }
html.wf-private-view #page-inventory.jj-r01 .jj-hide-amounts { background: var(--blue-dim, var(--bg-hover)) !important; border-color: transparent !important; color: var(--blue) !important; }
html.wf-private-view #page-inventory.jj-r01 .jj-private-badge {
  display: inline-flex !important; align-items: center; gap: 8px; color: var(--blue) !important; border: 1.5px solid var(--blue) !important; background: var(--jj-card) !important;
}
#page-inventory.jj-r01 .jj-private-badge svg { width: 16px; height: 16px; flex: 0 0 16px; }
/* table: money columns are gone from the markup; Details shows instead */
#page-inventory.jj-r01 [data-col="details"] { display: none; }
html.wf-private-view #page-inventory.jj-r01 [data-col="details"] { display: table-cell !important; width: 260px !important; min-width: 220px; }
html.wf-private-view #page-inventory.jj-r01 th[data-col="details"] { font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); text-align: left; }
html.wf-private-view #page-inventory.jj-r01 thead th:is([data-col="cost"], [data-col="paid"], [data-col="all-in"], [data-col="retail"], [data-col="wholesale"], [data-col="sold"]) { display: none !important; }
.jj-details-set { font-size: 14px; color: var(--white); }
.jj-details-line { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.jj-issue { display: inline-flex; align-items: center; gap: 7px; margin-top: 6px; font-size: 13.5px; color: var(--red); }
.jj-issue-ic { width: 18px; height: 18px; flex: 0 0 18px; color: var(--red); }
#page-inventory.jj-r01 .jj-list-foot:has(svg) { display: flex; align-items: center; gap: 8px; }
/* phone */
@media (max-width: 768px) {
  html.wf-private-view #page-inventory.jj-r01 .jj-private-bar {
    display: flex !important; align-items: center; justify-content: space-between; gap: 10px;
    background: var(--blue-dim, var(--bg-hover)); border-radius: 10px; padding: 4px 6px 4px 14px; margin: 0 0 12px; min-height: 48px; box-sizing: border-box;
  }
  .jj-pb-k { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; color: var(--blue); }
  .jj-pb-k svg, .jj-pb-show svg { width: 20px; height: 20px; flex: 0 0 20px; }
  .jj-pb-show { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px; background: none; border: 0; font-size: 16px; color: var(--blue); }
  html.wf-private-view .jj-blur-btn { display: none !important; }
  html.wf-private-view #page-inventory.jj-r01 .jj-psum { font-size: 15px; gap: 6px 10px; margin-bottom: 12px; }
  #page-inventory.jj-r01 .jj-private-card { padding-bottom: 12px; }
  #page-inventory.jj-r01 .jj-private-card .jj-issue { grid-column: 2 / -1; margin-top: 2px; font-size: 15px; }
  #page-inventory.jj-r01 .jj-card-details { grid-column: 2 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; color: var(--muted); padding-top: 4px; }
  #page-inventory.jj-r01 .jj-card-details b { color: var(--white); font-weight: 600; }
  .jj-days-chip { flex: 0 0 auto; padding: 3px 9px; border-radius: 7px; background: var(--amber-dim); color: var(--amber); font-size: 13px; }
}
#page-inventory.jj-r01 .table-wrap .stock-id-btn { font-size: 12.5px !important; padding: 5px 10px !important; border-radius: 8px !important; }
#page-inventory.jj-r01 .table-wrap .days-badge { font-size: 12.5px !important; padding: 5px 10px !important; border-radius: 8px !important; }
@media (max-width: 768px) {
  html.wf-private-view #page-inventory.jj-r01 .inv-mobile-header { margin-bottom: 4px; }
}
#page-inventory.jj-r01 .table-wrap td:nth-child(3) { min-width: 190px; }
#page-inventory.jj-r01 .table-wrap td:nth-child(3) > div { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; display: block !important; -webkit-line-clamp: unset !important; }
html.wf-private-view #page-inventory.jj-r01 .table-wrap thead th:nth-child(3) { width: 260px !important; }
#page-inventory.jj-r01 .table-wrap :is(td, th) { padding-left: 9px !important; padding-right: 9px !important; }
#page-inventory.jj-r01 .table-wrap :is(td, th)[data-col="thumb"] { width: 64px !important; padding-right: 4px !important; }
#page-inventory.jj-r01 .watch-thumb-sm { width: 56px !important; height: 56px !important; }
#page-inventory.jj-r01 .table-wrap :is(td, th)[data-col="row-actions"] { width: 52px !important; }

/* ═══ R01 round 2 — literal copy of Hal's mocks ═══════════════════════════ */
.jj-topbar-mark, .jj-title-add, .jj-th-more { display: none; }
@media (min-width: 769px) {
  /* The page header starts at the very top: no empty top bar on this page
     (its eye is the "Hide amounts" button now; the bell stays on every other page). */
  html.jj-on-inventory .topbar { display: none !important; }
  html.jj-on-inventory #page-inventory.jj-r01 > .page-content { padding-top: 22px !important; }
  #page-inventory.jj-r01 .inv-desktop-header { margin-bottom: 18px !important; }
  #page-inventory.jj-r01 .inv-hero-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 2px; color: var(--off-white); margin-bottom: 2px; }
  #page-inventory.jj-r01 .inv-hero-title { font-size: 36px !important; font-weight: 700 !important; }
  #page-inventory.jj-r01 .inv-desktop-header .btn { height: 44px; font-size: 14.5px; font-weight: 500; padding: 0 18px; border-radius: 9px; }
  #page-inventory.jj-r01 .inv-desktop-header .btn svg { width: 18px; height: 18px; flex-basis: 18px; }
  #page-inventory.jj-r01 [data-inv-add-btn] { padding: 0 22px !important; font-weight: 600 !important; }
  #page-inventory.jj-r01 .jj-stats { padding: 18px 0; margin-bottom: 20px; }
  #page-inventory.jj-r01 .jj-stat { padding: 0 24px; }
  #page-inventory.jj-r01 .jj-stat-k { font-size: 14.5px; font-weight: 500; color: var(--off-white); }
  #page-inventory.jj-r01 .jj-stat-v { font-size: 26px; font-weight: 600; }
  /* toolbar card + pill outside */
  #page-inventory.jj-r01 #inv-filter-card { gap: 18px 16px; margin-bottom: 14px; }
  #page-inventory.jj-r01 .inv-toolbar { padding: 8px; gap: 10px; }
  #page-inventory.jj-r01 .inv-toolbar .search-wrap { flex: 1 1 auto; }
  #page-inventory.jj-r01 .inv-toolbar .search-input { height: 44px !important; font-size: 14.5px !important; background: var(--bg-void) !important; }
  #page-inventory.jj-r01 .inv-toolbar .inv-filters-btn { height: 44px !important; min-width: 120px; font-size: 14.5px; font-weight: 500; gap: 10px; justify-content: center; }
  #page-inventory.jj-r01 #inv-filter-card > [data-jj-attn] { height: 62px; align-self: stretch; padding: 0 16px; border-radius: var(--jj-radius); font-size: 14.5px; font-weight: 500; box-sizing: border-box; }
  /* status tabs: one white card, even segments, thin dividers */
  #page-inventory.jj-r01 .inv-status-bar { padding: 4px !important; gap: 0 !important; align-items: center; }
  #page-inventory.jj-r01 .inv-status-chip { height: 44px !important; border-radius: 9px !important; font-size: 14.5px !important; font-weight: 500; position: relative; }
  #page-inventory.jj-r01 .inv-status-chip + .inv-status-chip::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 1px; background: var(--jj-line); }
  #page-inventory.jj-r01 .inv-status-chip.active::before, #page-inventory.jj-r01 .inv-status-chip.active + .inv-status-chip::before { display: none; }
  #page-inventory.jj-r01 .inv-status-chip .inv-status-count { font-size: 13px; padding: 2px 9px; }
  /* table typography */
  #page-inventory.jj-r01 .table-wrap thead th { font-size: 11px !important; font-weight: 600 !important; letter-spacing: 1.2px !important; color: var(--off-white) !important; }
  #page-inventory.jj-r01 .table-wrap td:nth-child(3) > div[style*="font-weight:500"] { font-size: 16px !important; font-weight: 500 !important; color: var(--white) !important; line-height: 1.3; }
  #page-inventory.jj-r01 .table-wrap td:nth-child(3) > .text-muted { font-size: 13px !important; color: var(--muted) !important; }
  #page-inventory.jj-r01 .table-wrap td:is([data-col="cost"], [data-col="paid"], [data-col="all-in"], [data-col="retail"], [data-col="wholesale"], [data-col="sold"]) { font-size: 15px !important; font-weight: 500 !important; }
  #page-inventory.jj-r01 .jj-th-more { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 0; background: none; color: var(--off-white); font-size: 18px; letter-spacing: 1px; cursor: pointer; }
  #page-inventory.jj-r01 .jj-details-set { font-size: 15px; font-weight: 500; }
  #page-inventory.jj-r01 .jj-details-line { font-size: 13.5px; }
  html.wf-private-view #page-inventory.jj-r01 [data-col="details"] { width: 300px !important; }
  html.wf-private-view #page-inventory.jj-r01 .jj-psum { font-size: 17px !important; font-weight: 500; margin: -4px 0 18px !important; gap: 6px 18px !important; }
  html.wf-private-view #page-inventory.jj-r01 .jj-psum b { font-weight: 600; }
}
/* status pill: a dropdown, so a DOWN chevron; plain ⋯ kebabs; chips */
#page-inventory.jj-r01 .table-wrap .row-status-picker .wf-ctile-top > svg:last-child { transform: rotate(90deg); }
#page-inventory.jj-r01 .row-status-picker { border-radius: 9px !important; }
#page-inventory.jj-r01 .row-status-picker .wf-ctile-lbl { font-weight: 500; font-size: 14px; }
#page-inventory.jj-r01 td[data-col="row-actions"] .btn-icon,
#page-inventory.jj-r01 .wf-ct-more {
  width: 44px !important; height: 44px !important; min-width: 44px; min-height: 44px; flex: 0 0 44px; aspect-ratio: 1 / 1; box-sizing: border-box;
  border-radius: 50% !important; border: 1px solid transparent !important; background: transparent !important; box-shadow: none !important;
  color: var(--off-white); font-size: 20px; letter-spacing: 1px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center;
}
#page-inventory.jj-r01 :is(.stock-id-btn, .wf-ct-sku) { background: var(--bg-void) !important; border: 1px solid var(--jj-line) !important; color: var(--off-white) !important; border-radius: 8px !important; }
#page-inventory.jj-r01 .table-wrap .days-badge { background: var(--amber-dim) !important; color: var(--amber) !important; border: 0 !important; }

@media (max-width: 768px) {
  /* 16px side padding everywhere on this page */
  html.jj-on-inventory #page-inventory.jj-r01 > .page-content { padding-left: 16px !important; padding-right: 16px !important; }
  html.jj-on-inventory .topbar { padding-left: 8px !important; padding-right: 12px !important; gap: 4px; }
  html.jj-on-inventory .jj-topbar-mark { display: inline-block; width: 26px; height: 26px; margin-right: 8px; vertical-align: middle; flex: 0 0 26px; }
  html.jj-on-inventory .topbar .topbar-center-logo { display: inline-flex !important; align-items: center; font-size: 14px !important; letter-spacing: 2.2px !important; font-weight: 600; }
  html.jj-on-inventory .topbar .topbar-actions { display: flex; align-items: center; gap: 6px !important; }
  html.jj-on-inventory .jj-blur-btn, html.jj-on-inventory .jj-blur-btn:is(:hover, :focus-visible) {
    width: 44px !important; height: 44px !important; min-width: 44px !important; max-width: 44px !important; min-height: 44px !important; max-height: 44px !important;
    border-radius: 10px !important; border: 1px solid var(--jj-line) !important; background: var(--bg-raised) !important; color: var(--white);
  }
  html.jj-on-inventory .jj-topbar-add { height: 44px !important; min-height: 44px !important; max-height: 44px; padding: 0 14px !important; font-size: 15px !important; gap: 6px !important; border-radius: 10px !important; }
  html.jj-on-inventory .jj-topbar-add svg { width: 18px; height: 18px; flex-basis: 18px; }
  #page-inventory.jj-r01 .inv-mobile-header { padding: 0 !important; margin: 4px 0 14px !important; display: flex !important; align-items: center; justify-content: space-between; }
  #page-inventory.jj-r01 .inv-mobile-greeting { font-size: 38px !important; line-height: 1.1; }
  #page-inventory.jj-r01 .jj-stats { margin-bottom: 14px; padding: 16px 0; }
  #page-inventory.jj-r01 .jj-stat { padding: 0 14px; }
  #page-inventory.jj-r01 .jj-stat-k { font-size: 14px; font-weight: 500; color: var(--off-white); }
  #page-inventory.jj-r01 .jj-stat-v { font-size: 24px; font-weight: 600; }
  #page-inventory.jj-r01 #inv-filter-card { gap: 12px !important; margin-bottom: 10px; }
  #page-inventory.jj-r01 .inv-toolbar { display: flex !important; gap: 10px !important; }
  #page-inventory.jj-r01 .inv-toolbar .search-input { height: 52px !important; font-size: 16px !important; background: var(--bg-raised) !important; border: 1px solid var(--jj-line) !important; border-radius: 10px !important; }
  #page-inventory.jj-r01 .inv-toolbar .inv-filters-btn { height: 52px !important; border-radius: 10px !important; font-size: 16px !important; font-weight: 500; padding: 0 16px !important; }
  #page-inventory.jj-r01 .inv-status-chip { height: 46px !important; padding: 0 18px !important; font-size: 16px !important; font-weight: 500; border-radius: 10px !important; }
  #page-inventory.jj-r01 .inv-status-chip.active .inv-status-dot { background: var(--jj-on-primary) !important; }
  #page-inventory.jj-r01 .jj-list-bar { margin-bottom: 10px; padding: 6px 6px 6px 16px; }
  /* cards: title row = name (flex) + SKU + status + ⋯ */
  #page-inventory.jj-r01 .inv-card { grid-template-columns: 72px minmax(0, 1fr) !important; gap: 4px 12px !important; padding: 12px 12px 12px 12px !important; margin-bottom: 10px; }
  #page-inventory.jj-r01 .inv-card-thumb { width: 72px !important; height: 72px !important; }
  #page-inventory.jj-r01 .inv-card-brand-row { flex-wrap: nowrap !important; align-items: flex-start; gap: 6px !important; }
  #page-inventory.jj-r01 .inv-card-brand { flex: 1 1 auto !important; min-width: 0 !important; font-size: 16px !important; font-weight: 500 !important; }
  #page-inventory.jj-r01 .wf-ct-corner { flex: 0 0 auto !important; gap: 4px !important; }
  #page-inventory.jj-r01 .wf-ct-sku { font-size: 12px !important; padding: 3px 7px !important; line-height: 1.3; }
  #page-inventory.jj-r01 .wf-ct-corner .row-status-picker .wf-ctile-top { padding: 0 8px !important; gap: 5px !important; min-height: 32px; }
  #page-inventory.jj-r01 .wf-ct-corner .row-status-picker .wf-ctile-lbl { font-size: 13.5px !important; white-space: nowrap; }
  #page-inventory.jj-r01 .wf-ct-more { width: 32px !important; height: 32px !important; min-width: 32px; min-height: 32px; flex-basis: 32px; margin: -6px -6px 0 0; padding: 6px !important; box-sizing: content-box !important; }
  #page-inventory.jj-r01 .inv-card-model { font-size: 14px !important; color: var(--off-white) !important; }
  #page-inventory.jj-r01 .jj-money-grid .inv-card-ps-label { font-size: 14px !important; color: var(--off-white) !important; }
  #page-inventory.jj-r01 .jj-money-grid .inv-card-ps-value { font-size: 18px !important; font-weight: 500 !important; }
  #page-inventory.jj-r01 .jj-card-line { font-size: 14px; color: var(--off-white); }
  #page-inventory.jj-r01 .jj-ps-sub { color: var(--off-white); }

  /* ── Private view, phone ── */
  html.wf-private-view.jj-on-inventory :is(.jj-blur-btn, .jj-topbar-add) { display: none !important; }
  html.wf-private-view.jj-on-inventory .jj-topbar-mark { display: none !important; }
  html.wf-private-view #page-inventory.jj-r01 .jj-title-add {
    display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 10px; border: 0;
    background: var(--blue); color: var(--on-accent, var(--bg-raised)); font-size: 16px; font-weight: 500; white-space: nowrap; flex: 0 0 auto;
  }
  #page-inventory.jj-r01 .jj-title-add svg { width: 18px; height: 18px; }
  html.wf-private-view #page-inventory.jj-r01 .jj-private-bar { margin-bottom: 14px !important; }
  html.wf-private-view #page-inventory.jj-r01 .jj-psum { font-size: 16px !important; gap: 4px 10px !important; margin: 0 0 14px !important; }
  #page-inventory.jj-r01 .jj-psum-sep { width: auto; height: auto; background: none; transform: none; color: var(--off-white); }
  #page-inventory.jj-r01 .jj-psum-sep::before { content: '·'; }
  html.wf-private-view #page-inventory.jj-r01 .inv-toolbar { background: var(--jj-card) !important; border: 1px solid var(--jj-line) !important; border-radius: var(--jj-radius) !important; padding: 8px !important; }
  html.wf-private-view #page-inventory.jj-r01 .inv-toolbar .search-input { height: 44px !important; background: var(--bg-void) !important; border: 0 !important; font-size: 16px !important; }
  html.wf-private-view #page-inventory.jj-r01 .inv-toolbar .inv-filters-btn { width: 44px !important; min-width: 44px !important; height: 44px !important; padding: 0 !important; justify-content: center; border-radius: 10px !important; }
  html.wf-private-view #page-inventory.jj-r01 .inv-toolbar .inv-filters-btn .inv-filters-label { display: none !important; }
  /* list: continuous white rows with thin dividers */
  html.wf-private-view #page-inventory.jj-r01 #inventory-mobile-grid { margin: 0 -16px; background: var(--jj-card); border-top: 1px solid var(--jj-line); }
  html.wf-private-view #page-inventory.jj-r01 .inv-card { border-radius: 0 !important; border: 0 !important; border-bottom: 1px solid var(--jj-line) !important; margin: 0 !important; padding: 14px 16px !important; position: relative; }
  html.wf-private-view #page-inventory.jj-r01 .inv-card-brand-row { flex-wrap: wrap !important; padding-right: 36px; }
  html.wf-private-view #page-inventory.jj-r01 .wf-ct-more { position: absolute; top: 12px; right: 12px; margin: 0; }
}
@media (min-width: 769px) {
  #page-inventory.jj-r01 .jj-psum-sep { width: 1px; height: 18px; }
}
@media (min-width: 769px) {
  html.jj-on-inventory #page-inventory.jj-r01 > .page-content { padding-top: 16px !important; }
  #page-inventory.jj-r01 .jj-stats { padding: 14px 0 !important; margin-bottom: 18px !important; }
  #page-inventory.jj-r01 .jj-stat-v { margin-top: 2px; }
  #page-inventory.jj-r01 .inv-status-bar { background: var(--jj-card) !important; border: 1px solid var(--jj-line) !important; border-radius: var(--jj-radius) !important; }
  #page-inventory.jj-r01 #inv-filter-card { gap: 12px 16px !important; margin-bottom: 12px !important; }
  #page-inventory.jj-r01 .table-wrap thead th { height: 44px !important; padding-top: 0 !important; padding-bottom: 0 !important; }
  #page-inventory.jj-r01 .watch-thumb-sm { width: 70px !important; height: 64px !important; }
  #page-inventory.jj-r01 .table-wrap :is(td, th)[data-col="thumb"] { width: 82px !important; }
  #page-inventory.jj-r01 .table-wrap tbody td { height: 86px !important; }
}

/* round 2, phone sizes measured off the mock (474 css px wide) */
@media (max-width: 768px) {
  html.jj-on-inventory .topbar .topbar-center-logo { font-size: 13px !important; letter-spacing: 1.8px !important; }
  html.jj-on-inventory .jj-topbar-mark { width: 28px; height: 28px; flex-basis: 28px; margin-right: 10px; }
  html.jj-on-inventory .topbar .jj-blur-btn { display: inline-flex !important; box-shadow: none !important; }
  html.jj-on-inventory .jj-topbar-add { padding: 0 12px !important; font-size: 15px !important; font-weight: 500 !important; }
  #page-inventory.jj-r01 .inv-mobile-header { margin: 0 0 10px !important; min-height: 0 !important; }
  #page-inventory.jj-r01 .inv-mobile-greeting { font-size: 32px !important; }
  #page-inventory.jj-r01 .jj-stats { padding: 12px 0 !important; margin-bottom: 10px !important; }
  #page-inventory.jj-r01 .jj-stat-v { font-size: 22px !important; margin-top: 2px; }
  #page-inventory.jj-r01 .jj-stat-k { font-size: 14px !important; }
  #page-inventory.jj-r01 #inv-filter-card { gap: 10px !important; margin-bottom: 10px !important; }
  #page-inventory.jj-r01 .inv-toolbar .search-input { height: 46px !important; font-size: 16px !important; }
  #page-inventory.jj-r01 .inv-toolbar .inv-filters-btn { height: 46px !important; font-size: 15px !important; }
  #page-inventory.jj-r01 .inv-status-chip { height: 42px !important; font-size: 15px !important; padding: 0 16px !important; }
  #page-inventory.jj-r01 .jj-list-bar { min-height: 52px; font-size: 15px; margin-bottom: 8px !important; padding: 4px 4px 4px 14px !important; }
  #page-inventory.jj-r01 .jj-list-bar .jj-attn { height: 38px; font-size: 14.5px; font-weight: 500; }
  #page-inventory.jj-r01 .inv-card-brand { font-size: 16px !important; line-height: 1.25 !important; word-break: normal !important; overflow-wrap: normal !important; hyphens: none !important; }
  #page-inventory.jj-r01 .wf-ct-sku { font-size: 12px !important; padding: 3px 6px !important; }
  #page-inventory.jj-r01 .wf-ct-corner .row-status-picker .wf-ctile-top { padding: 0 7px !important; min-height: 28px !important; height: 28px; gap: 4px !important; }
  #page-inventory.jj-r01 .wf-ct-corner .row-status-picker .wf-ctile-lbl { font-size: 13px !important; }
  #page-inventory.jj-r01 .wf-ct-corner .row-status-picker svg { width: 12px; height: 12px; }
  #page-inventory.jj-r01 .wf-ct-more { width: 28px !important; height: 28px !important; min-width: 28px; min-height: 28px; flex-basis: 28px; padding: 8px !important; margin: -8px -8px 0 -4px !important; font-size: 18px; }
  #page-inventory.jj-r01 .inv-card-model { font-size: 14px !important; }
  #page-inventory.jj-r01 .jj-money-grid .inv-card-ps-label { font-size: 13px !important; }
  #page-inventory.jj-r01 .jj-money-grid .inv-card-ps-value { font-size: 17px !important; }
  #page-inventory.jj-r01 .jj-card-line { font-size: 14px !important; }
}
/* Weights: the house face (Absans) ships one weight, so 500 renders as 400.
   The mock's medium weight is reached with the synthesized bold (600+). */
#page-inventory.jj-r01 :is(.table-wrap td:nth-child(3) > div[style*="font-weight:500"], .inv-card-brand) { font-weight: 600 !important; }
#page-inventory.jj-r01 .table-wrap td:is([data-col="cost"], [data-col="paid"], [data-col="all-in"], [data-col="retail"], [data-col="wholesale"], [data-col="sold"]),
#page-inventory.jj-r01 .jj-money-grid .inv-card-ps-value,
#page-inventory.jj-r01 .jj-details-set,
#page-inventory.jj-r01 .jj-attn,
#page-inventory.jj-r01 .jj-psum,
#page-inventory.jj-r01 [data-inv-add-btn], .jj-topbar-add, .jj-title-add,
#page-inventory.jj-r01 .inv-status-chip.active { font-weight: 600 !important; }
#page-inventory.jj-r01 :is(.jj-stat-v, .inv-hero-title, .inv-mobile-greeting) { font-weight: 700 !important; }
#page-inventory.jj-r01 .table-wrap thead th { font-weight: 700 !important; }
@media (max-width: 768px) {
  #page-inventory.jj-r01 .jj-stat-k { font-size: 13px !important; }
  #page-inventory.jj-r01 .jj-stat-v { font-size: 21px !important; }
  html.jj-on-inventory .topbar .jj-blur-btn { border: 1px solid var(--border-light) !important; background: var(--bg-raised) !important; }
  #page-inventory.jj-r01 .inv-card .wf-ct-corner .row-status-picker.wf-ctile { height: 30px !important; min-height: 30px !important; padding: 0 !important; border-radius: 8px !important; display: inline-flex !important; align-items: center; width: auto !important; flex: 0 0 auto !important; }
  #page-inventory.jj-r01 .inv-card .wf-ct-corner .row-status-picker.wf-ctile .wf-ctile-top { height: 30px !important; min-height: 30px !important; padding: 0 8px !important; }
}
@media (max-width: 768px) {
  #page-inventory.jj-r01 .inv-mobile-greeting { font-size: 30px !important; }
  #page-inventory.jj-r01 .jj-stats { padding: 10px 0 !important; }
  #page-inventory.jj-r01 .jj-stat-k { font-size: 12.5px !important; }
  #page-inventory.jj-r01 .jj-stat-v { font-size: 20px !important; }
  #page-inventory.jj-r01 .inv-toolbar .search-input { height: 44px !important; font-size: 15px !important; }
  #page-inventory.jj-r01 .inv-toolbar .inv-filters-btn { height: 44px !important; font-size: 14.5px !important; }
  #page-inventory.jj-r01 .inv-status-chip { height: 40px !important; font-size: 14px !important; }
  #page-inventory.jj-r01 .jj-list-bar { font-size: 14.5px; min-height: 48px; }
  #page-inventory.jj-r01 .inv-card-brand { font-size: 15px !important; }
  #page-inventory.jj-r01 .inv-card-model { font-size: 13px !important; }
  #page-inventory.jj-r01 .inv-card-pricestrip.jj-money-grid { padding: 4px 0 6px !important; gap: 4px !important; }
  #page-inventory.jj-r01 .jj-money-grid > div { gap: 0 !important; }
  #page-inventory.jj-r01 .jj-money-grid .inv-card-ps-label { font-size: 12px !important; }
  #page-inventory.jj-r01 .jj-money-grid .inv-card-ps-value { font-size: 16px !important; }
  #page-inventory.jj-r01 .jj-card-line { font-size: 13px !important; padding-top: 4px !important; }
  #page-inventory.jj-r01 .inv-card { padding: 10px 12px !important; gap: 2px 12px !important; }
  #page-inventory.jj-r01 .jj-ps-title { font-size: 15px; }
  #page-inventory.jj-r01 .jj-ps-sub { font-size: 13px; }
}
@media (max-width: 768px) {
  html.wf-private-view.jj-on-inventory .topbar :is(.jj-blur-btn, .jj-topbar-add, .jj-topbar-mark) { display: none !important; }
  #page-inventory.jj-r01 .inv-ai-mobile-actions { margin: 0 !important; }
  #page-inventory.jj-r01 .inv-ai-mobile-actions:not(:has(button:not([style*="display:none"]))) { display: none !important; }
  html.wf-private-view #page-inventory.jj-r01 .jj-psum { font-size: 15px !important; font-weight: 400 !important; margin: 0 0 12px !important; }
  html.wf-private-view #page-inventory.jj-r01 .jj-private-bar { margin-bottom: 12px !important; min-height: 44px; }
  html.wf-private-view #page-inventory.jj-r01 .jj-pb-k, html.wf-private-view #page-inventory.jj-r01 .jj-pb-show { font-size: 15px; }
  html.wf-private-view #page-inventory.jj-r01 .inv-card-brand-row { flex-wrap: nowrap !important; padding-right: 30px; align-items: center !important; }
  html.wf-private-view #page-inventory.jj-r01 .wf-ct-corner .row-status-picker { order: 0; }
  html.wf-private-view #page-inventory.jj-r01 .wf-ct-corner .wf-ct-sku { order: 1; }
  html.wf-private-view #page-inventory.jj-r01 .wf-ct-more { top: 6px !important; right: 6px !important; }
  html.wf-private-view #page-inventory.jj-r01 .inv-card { padding: 12px 16px !important; }
  #page-inventory.jj-r01 .jj-card-details { font-size: 13px !important; }
  #page-inventory.jj-r01 .jj-private-card .jj-issue { font-size: 14px !important; }
  .jj-days-chip { font-size: 12.5px !important; }
}
@media (min-width: 769px) {
  html.wf-private-view #page-inventory.jj-r01 .table-wrap tbody td { height: 100px !important; }
  html.wf-private-view #page-inventory.jj-r01 .watch-thumb-sm { width: 70px !important; height: 70px !important; }
  #page-inventory.jj-r01 .table-wrap .row-status-picker .wf-ctile-top { padding: 0 12px !important; min-height: 34px; gap: 8px; }
  #page-inventory.jj-r01 .table-wrap .days-badge, #page-inventory.jj-r01 .table-wrap .stock-id-btn { padding: 6px 12px !important; font-size: 13px !important; }
}
@media (max-width: 768px) {
  html.wf-private-view #page-inventory.jj-r01 .wf-ct-more { right: 10px !important; }
}
#page-inventory.jj-r01 .inv-status-chip[data-status=""]::after { content: none; }
#page-inventory.jj-r01 .inv-status-chip[data-status=""].active { gap: 10px; }
#page-inventory.jj-r01 .inv-status-chip[data-status=""] .jj-all-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--jj-on-primary); display: none; flex: 0 0 9px; }
#page-inventory.jj-r01 .inv-status-chip[data-status=""].active .jj-all-dot { display: inline-block; }
html.wf-private-view #page-inventory.jj-r01 .inv-status-chip[data-status=""].active .jj-all-dot { display: none; }
.jj-sku-inline { display: none; }
@media (max-width: 420px) {
  #page-inventory.jj-r01 .wf-ct-corner .wf-ct-sku { display: none !important; }
  #page-inventory.jj-r01 .jj-sku-inline { display: inline; }
  #page-inventory.jj-r01 .inv-card-brand { min-width: 96px !important; }
  html.jj-on-inventory .topbar { padding-left: 4px !important; padding-right: 10px !important; }
  html.jj-on-inventory .topbar .mobile-menu-btn { width: 40px; min-width: 40px; }
  html.jj-on-inventory .jj-topbar-mark { width: 24px; height: 24px; flex-basis: 24px; margin-right: 6px; }
  html.jj-on-inventory .topbar .topbar-center-logo { font-size: 12px !important; letter-spacing: 1px !important; }
  html.jj-on-inventory .topbar .topbar-actions { gap: 4px !important; }
  html.jj-on-inventory .topbar .topbar-actions .btn-icon:not(.jj-blur-btn) { width: 40px; min-width: 40px; padding: 0; }
  html.jj-on-inventory .jj-topbar-add { padding: 0 10px !important; font-size: 14px !important; gap: 4px !important; }
  html.jj-on-inventory:not(.jj-inv-filtered) .jj-topbar-add svg { width: 16px; height: 16px; flex-basis: 16px; }
}
@media (min-width: 769px) and (max-width: 1500px) {
  #page-inventory.jj-r01 .table-wrap td:is([data-col="cost"], [data-col="paid"], [data-col="all-in"], [data-col="retail"], [data-col="wholesale"]) { font-size: 14.5px !important; }
  #page-inventory.jj-r01 .table-wrap :is(td, th)[data-col="thumb"] { width: 76px !important; }
  #page-inventory.jj-r01 .watch-thumb-sm { width: 64px !important; height: 60px !important; }
  #page-inventory.jj-r01 .table-wrap .row-status-picker .wf-ctile-top { padding: 0 9px !important; }
}

/* ═══ R06 — Inventory filtered by an entity (Salesperson, Store, …) ═════════ */
.jj-fsum, .jj-fbanner, .jj-more-chip, .jj-dial, .jj-soldto, .jj-fc-stack, .jj-fc-bottom { display: none; }
#page-inventory.jj-r01.jj-filtered :is(.jj-dial, .jj-soldto) { display: block; }
#page-inventory.jj-r01.jj-filtered .jj-dial { font-size: 13px; color: var(--muted); margin-top: 2px; }
#page-inventory.jj-r01.jj-filtered .jj-soldto { font-size: 13px; color: var(--off-white); margin-top: 6px; }
html:not(.wf-private-view) #page-inventory.jj-r01.jj-filtered .jj-fsum {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 24px;
  background: var(--jj-card); border: 1px solid var(--jj-line); border-radius: var(--jj-radius);
  padding: 18px 20px; margin-bottom: 14px; font-size: 17px; font-weight: 500; color: var(--white);
}
#page-inventory.jj-r01 .jj-fs-n b { font-size: 19px; font-weight: 700; }
#page-inventory.jj-r01 .jj-fs-sep { width: 1px; height: 28px; background: var(--jj-line); margin: 0 24px 0 270px; }
#page-inventory.jj-r01 .jj-fs-item { display: inline-flex; align-items: center; gap: 10px; }
#page-inventory.jj-r01 .jj-fs-item .jj-dot { width: 14px; height: 14px; flex-basis: 14px; }
#page-inventory.jj-r01 .jj-fs-dot { display: none; color: var(--off-white); }
.jj-dot.is-amber { background: var(--amber); }
.jj-dot.is-purple { background: var(--purple, var(--blue)); }
#page-inventory.jj-r01.jj-filtered [data-jj-attn] { display: none !important; }
#page-inventory.jj-r01.jj-filtered :is([data-col="paid"], [data-col="all-in"]) { display: none !important; }
/* the filter banner */
#page-inventory.jj-r01.jj-filtered .jj-fbanner {
  display: block; grid-column: 1 / -1; padding: 14px 20px 14px; border-radius: var(--jj-radius);
  background: var(--blue-dim, var(--bg-hover)); border: 1px solid color-mix(in srgb, var(--blue) 18%, transparent);
}
.jj-fb-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.jj-fb-k { font-size: 12.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--off-white); }
.jj-fb-pills { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.jj-fb-pill { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 6px 0 5px; border-radius: 999px; background: var(--bg-raised); border: 1px solid var(--jj-line); font-size: 15px; color: var(--white); }
.jj-fb-av { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; background: var(--accent); color: var(--on-accent, var(--bg-raised)); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
.jj-fb-name { font-weight: 500; white-space: nowrap; }
.jj-fb-switch, .jj-fb-x {
  width: 30px; height: 30px; min-width: 30px; min-height: 30px; flex: 0 0 30px; aspect-ratio: 1 / 1; box-sizing: border-box; border-radius: 50%;
  border: 0; background: transparent; color: var(--off-white); padding: 0; line-height: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 20px;
}
.jj-fb-switch svg { width: 16px; height: 16px; }
.jj-fb-clear { margin-left: auto; background: none; border: 0; padding: 8px 0; color: var(--blue); text-decoration: underline; font-size: 14px; cursor: pointer; min-height: 44px; }
.jj-fb-sub { font-size: 13.5px; color: var(--off-white); margin-top: 8px; }
#page-inventory.jj-r01 #inv-filters-count:not([hidden]) { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; background: var(--blue-dim, var(--bg-hover)); color: var(--blue); font-size: 14px; font-weight: 600; margin-left: 4px; position: static; }
@media (min-width: 769px) {
  #page-inventory.jj-r01.jj-filtered #inv-filter-card { grid-template-columns: minmax(0, 1fr); }
}
/* phone */
@media (max-width: 768px) {
  html:not(.wf-private-view) #page-inventory.jj-r01.jj-filtered .jj-fsum { padding: 14px 16px; font-size: 16px; gap: 4px 10px; margin-bottom: 10px; }
  #page-inventory.jj-r01 .jj-fs-desk, #page-inventory.jj-r01 .jj-fs-sep { display: none; }
  #page-inventory.jj-r01 .jj-fs-dot { display: inline; }
  #page-inventory.jj-r01 .jj-fs-n b { font-size: 17px; }
  #page-inventory.jj-r01 .jj-fs-n { font-weight: 600; }
  #page-inventory.jj-r01 .jj-fs-item { gap: 7px; font-weight: 400; }
  #page-inventory.jj-r01 .jj-fs-item .jj-dot { width: 11px; height: 11px; flex-basis: 11px; }
  #page-inventory.jj-r01.jj-filtered .jj-list-bar { display: none !important; }
  #page-inventory.jj-r01.jj-filtered .jj-fbanner { padding: 12px 14px; }
  #page-inventory.jj-r01.jj-filtered .jj-fb-row { gap: 8px 10px; }
  #page-inventory.jj-r01.jj-filtered .jj-fb-k { flex: 1 1 100%; font-size: 12px; }
  #page-inventory.jj-r01.jj-filtered .jj-fb-pill { height: 44px; }
  #page-inventory.jj-r01.jj-filtered .jj-fb-clear { font-size: 15px; }
  #page-inventory.jj-r01.jj-filtered .jj-fb-sub { display: none; }
  #page-inventory.jj-r01.jj-filtered .jj-list-foot { display: block; padding-top: 4px; font-size: 14px; }
  /* chips: only the statuses with pieces; the rest behind More */
  #page-inventory.jj-r01.jj-filtered .inv-status-chip.jj-zero { display: none !important; }
  #page-inventory.jj-r01.jj-filtered .inv-status-bar.jj-status-all .inv-status-chip.jj-zero { display: inline-flex !important; }
  #page-inventory.jj-r01.jj-filtered .jj-more-chip { display: inline-flex !important; align-items: center; gap: 8px; }
  #page-inventory.jj-r01 .jj-more-chip svg { width: 16px; height: 16px; }
  #page-inventory.jj-r01 .jj-more-dots { letter-spacing: 1px; font-size: 12px; }
  /* top bar: square + */
  html.jj-inv-filtered:not(.wf-private-view).jj-on-inventory .jj-topbar-add { width: 44px !important; min-width: 44px; padding: 0 !important; justify-content: center; }
  html.jj-inv-filtered:not(.wf-private-view).jj-on-inventory .jj-topbar-add span { display: none; }
  html.jj-inv-filtered:not(.wf-private-view).jj-on-inventory .jj-topbar-add svg { width: 22px; height: 22px; flex-basis: 22px; }
  /* card */
  #page-inventory.jj-r01 .jj-fcard { grid-template-columns: 76px minmax(0, 1fr) !important; padding: 12px !important; position: relative; }
  #page-inventory.jj-r01 .jj-fcard .wf-ct-corner { position: absolute !important; top: 6px; right: 4px; }
  #page-inventory.jj-r01 .jj-fcard .wf-ct-more { transform: rotate(90deg); font-size: 20px; }
  #page-inventory.jj-r01 .jj-fcard .inv-card-brand-row { padding-right: 34px; }
  #page-inventory.jj-r01 .jj-fcard .inv-card-brand { font-size: 16px !important; }
  #page-inventory.jj-r01 .jj-fc-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 4px; }
  #page-inventory.jj-r01 .jj-fc-stack .wf-ct-sku { display: inline-flex !important; }
  #page-inventory.jj-r01 .jj-fc-stack .jj-soldto { margin-top: 0; font-size: 14px; }
  #page-inventory.jj-r01 .jj-fc-stack .row-status-picker.wf-ctile { height: 30px !important; min-height: 30px !important; width: auto !important; border-radius: 8px !important; display: inline-flex !important; }
  #page-inventory.jj-r01 .jj-fc-stack .row-status-picker .wf-ctile-top { height: 30px !important; min-height: 30px !important; padding: 0 10px !important; }
  #page-inventory.jj-r01 .jj-fc-bottom {
    grid-column: 1 / -1; display: flex; align-items: center; gap: 0; border-top: 1px solid var(--jj-line); margin-top: 10px; padding-top: 10px;
  }
  #page-inventory.jj-r01 .jj-fc-cell { flex: 1 1 0; display: flex; flex-direction: column; gap: 2px; padding: 0 10px; border-left: 1px solid var(--jj-line); min-width: 0; }
  #page-inventory.jj-r01 .jj-fc-cell:first-child { border-left: 0; padding-left: 4px; }
  #page-inventory.jj-r01 .jj-fc-k { font-size: 12.5px; color: var(--off-white); }
  #page-inventory.jj-r01 .jj-fc-v { font-size: 16px; font-weight: 600; color: var(--white); }
  #page-inventory.jj-r01 .jj-fc-bottom .jj-days-chip { margin-left: 8px; padding-left: 12px; }
  #page-inventory.jj-r01 .jj-fc-bottom .jj-days-chip { flex: 0 0 auto; }
}
#page-inventory.jj-r01 .jj-more-chip { display: none !important; }
@media (max-width: 768px) { #page-inventory.jj-r01.jj-filtered .inv-status-bar .jj-more-chip { display: inline-flex !important; } }
#page-inventory.jj-r01.jj-filtered.jj-entity-only #inv-active-filters { display: none !important; }
#page-inventory.jj-r01.jj-filtered .table-wrap .jj-soldto { display: none !important; }
#page-inventory.jj-r01 .table-wrap td[data-col="status"] .row-status-picker { width: auto !important; max-width: 100%; display: inline-flex !important; }
#page-inventory.jj-r01 .row-status-picker[data-status^="Sold"] { --ct-c: var(--blue) !important; }
#page-inventory.jj-r01 .table-wrap .row-status-picker.has-sub { background: transparent !important; border: 0 !important; box-shadow: none !important; flex-direction: column; align-items: flex-start; gap: 6px; padding: 0 !important; height: auto !important; }
#page-inventory.jj-r01 .table-wrap .row-status-picker.has-sub .wf-ctile-top { background: color-mix(in srgb, var(--ct-c) 14%, var(--bg-raised)); border: 1px solid color-mix(in srgb, var(--ct-c) 22%, transparent); border-radius: 9px; min-height: 34px; padding: 0 12px !important; display: inline-flex; align-items: center; gap: 8px; }
#page-inventory.jj-r01 .table-wrap .row-status-picker.has-sub .wf-ctile-sub { font-size: 13px; color: var(--off-white); }
#page-inventory.jj-r01 .table-wrap .row-status-picker.has-sub .wf-ctile-sub .wf-ctile-name { color: var(--off-white); }
#page-inventory.jj-r01 .table-wrap .row-status-picker.has-sub { flex-direction: column !important; align-items: flex-start !important; }
#page-inventory.jj-r01 .inv-status-bar .jj-more-chip { background: var(--jj-card) !important; color: var(--white) !important; border: 1px solid var(--jj-line) !important; }
#page-inventory.jj-r01 .jj-fb-pill .jj-fb-name { margin-right: 2px; }
#page-inventory.jj-r01 .table-wrap .row-status-picker.has-sub .wf-ctile-top { display: inline-flex !important; flex-direction: row !important; align-items: center !important; flex-wrap: nowrap !important; width: auto !important; }
#page-inventory.jj-r01 .table-wrap .row-status-picker.has-sub .wf-ctile-sub { display: block !important; padding: 0 !important; margin: 0 !important; white-space: nowrap; }
#page-inventory.jj-r01 .table-wrap .row-status-picker.has-sub .wf-ctile-sub::before { content: none !important; }
@media (max-width: 768px) {
  #page-inventory.jj-r01.jj-filtered .jj-fb-row { flex-wrap: wrap; }
  #page-inventory.jj-r01.jj-filtered .jj-fb-pills { flex: 1 1 auto; min-width: 0; }
  #page-inventory.jj-r01.jj-filtered .jj-fb-clear { margin-left: auto; min-height: 44px; }
  #page-inventory.jj-r01.jj-filtered .jj-fb-pill { max-width: 100%; }
}
@media (max-width: 420px) {
  #page-inventory.jj-r01.jj-filtered .jj-fb-row { flex-wrap: wrap; }
  #page-inventory.jj-r01.jj-filtered .jj-fb-pill { gap: 4px; }
  #page-inventory.jj-r01.jj-filtered .jj-fb-name { font-size: 14.5px; }
  #page-inventory.jj-r01.jj-filtered .jj-fb-clear { font-size: 14px; }
}
#page-inventory.jj-r01 .jj-fc-stack .row-status-picker.wf-ctile { min-width: 0 !important; max-width: max-content !important; flex: 0 0 auto !important; }
#page-inventory.jj-r01 .jj-fc-stack .row-status-picker .wf-ctile-sub { display: none !important; }

/* ═══ Phone v3 (Hal: "trash" → copy the mock's sizes; native font kept) ═══ */
@media (max-width: 768px) {
  /* top bar: air above and below, small rounded-square eye, bold bell, square + */
  html.jj-on-inventory { --topbar-h: 58px; }
  html.jj-on-inventory .topbar { height: 58px !important; min-height: 58px; padding: 0 14px 0 8px !important; align-items: center; }
  html.jj-on-inventory .topbar .mobile-menu-btn svg { width: 22px !important; height: 22px !important; stroke-width: 1.8; }
  html.jj-on-inventory .jj-topbar-mark { width: 28px !important; height: 28px !important; flex-basis: 28px !important; margin-right: 10px !important; }
  html.jj-on-inventory .topbar .topbar-center-logo { font-size: 13.5px !important; letter-spacing: 2.6px !important; font-weight: 600 !important; }
  html.jj-on-inventory .topbar .topbar-actions { gap: 10px !important; }
  html.jj-on-inventory .topbar .jj-blur-btn, html.jj-on-inventory .topbar .jj-blur-btn:is(:hover, :focus-visible) {
    width: 34px !important; height: 34px !important; min-width: 34px !important; max-width: 34px !important; min-height: 34px !important; max-height: 34px !important; flex: 0 0 34px !important;
    border-radius: 9px !important; border: 1px solid var(--jj-line, var(--border)) !important; background: var(--bg-raised) !important; box-shadow: 0 1px 2px color-mix(in srgb, var(--white) 6%, transparent) !important;
  }
  html.jj-on-inventory .topbar .jj-blur-btn svg { width: 19px !important; height: 19px !important; stroke-width: 1.9; }
  html.jj-on-inventory .topbar .btn-icon[title="Notifications"] { width: 34px !important; min-width: 34px; height: 34px !important; background: transparent !important; border: 0 !important; }
  html.jj-on-inventory .topbar .btn-icon[title="Notifications"] svg { width: 22px !important; height: 22px !important; stroke-width: 2.4 !important; color: var(--white); }
  html.jj-on-inventory .jj-topbar-add { height: 34px !important; min-height: 34px !important; max-height: 34px !important; border-radius: 9px !important; font-size: 14.5px !important; padding: 0 11px !important; }
  html.jj-inv-filtered:not(.wf-private-view).jj-on-inventory .jj-topbar-add { width: 34px !important; min-width: 34px !important; }
  html.jj-inv-filtered:not(.wf-private-view).jj-on-inventory .jj-topbar-add svg { width: 19px !important; height: 19px !important; flex-basis: 19px !important; }
  #page-inventory.jj-r01 > .page-content { padding-top: 6px !important; }
  #page-inventory.jj-r01 .inv-mobile-header { margin: 0 0 12px !important; }
  #page-inventory.jj-r01 .inv-mobile-greeting { font-size: 31px !important; line-height: 1.1 !important; }

  /* #06 — summary, search, banner, chips at the mock's sizes */
  html:not(.wf-private-view) #page-inventory.jj-r01.jj-filtered .jj-fsum { padding: 10px 14px !important; min-height: 40px; box-sizing: border-box; font-size: 15px !important; margin-bottom: 9px !important; border-radius: 10px; }
  #page-inventory.jj-r01.jj-filtered .jj-fs-n b { font-size: 16.5px !important; }
  #page-inventory.jj-r01.jj-filtered .jj-fs-item .jj-dot { width: 10px; height: 10px; flex-basis: 10px; }
  #page-inventory.jj-r01.jj-filtered #inv-filter-card { gap: 9px !important; margin-bottom: 9px !important; }
  #page-inventory.jj-r01.jj-filtered .inv-toolbar { gap: 8px !important; }
  #page-inventory.jj-r01.jj-filtered .inv-toolbar .search-input { height: 38px !important; font-size: 14.5px !important; border-radius: 9px !important; }
  #page-inventory.jj-r01.jj-filtered .inv-toolbar .inv-filters-btn { height: 38px !important; font-size: 14.5px !important; border-radius: 9px !important; padding: 0 10px !important; gap: 6px !important; min-width: 0 !important; }
  #page-inventory.jj-r01.jj-filtered #inv-filters-count:not([hidden]) { min-width: 22px; height: 22px; font-size: 12.5px; }
  #page-inventory.jj-r01.jj-filtered .jj-fbanner { padding: 10px 12px !important; border-radius: 10px !important; }
  #page-inventory.jj-r01.jj-filtered .jj-fb-row { gap: 6px 8px !important; flex-wrap: wrap !important; }
  #page-inventory.jj-r01.jj-filtered .jj-fb-k { font-size: 11px !important; letter-spacing: 1.5px; }
  #page-inventory.jj-r01.jj-filtered .jj-fb-pills { flex: 0 1 auto !important; }
  #page-inventory.jj-r01.jj-filtered .jj-fb-pill { height: 34px !important; gap: 6px !important; padding: 0 4px 0 4px !important; font-size: 14px !important; }
  #page-inventory.jj-r01.jj-filtered .jj-fb-av { width: 26px; height: 26px; flex-basis: 26px; font-size: 12px; }
  #page-inventory.jj-r01.jj-filtered .jj-fb-switch, #page-inventory.jj-r01.jj-filtered .jj-fb-x { width: 24px; height: 24px; min-width: 24px; min-height: 24px; flex-basis: 24px; font-size: 18px; }
  #page-inventory.jj-r01.jj-filtered .jj-fb-switch svg { width: 14px; height: 14px; }
  #page-inventory.jj-r01.jj-filtered .jj-fb-clear { font-size: 14px !important; min-height: 34px !important; padding: 0 !important; }
  #page-inventory.jj-r01.jj-filtered .inv-status-bar { gap: 7px !important; margin-top: 0 !important; }
  #page-inventory.jj-r01.jj-filtered .inv-status-chip { height: 36px !important; font-size: 14px !important; padding: 0 12px !important; border-radius: 9px !important; gap: 7px !important; }
  #page-inventory.jj-r01.jj-filtered .inv-status-chip .inv-status-count { font-size: 12.5px; min-width: 20px; padding: 1px 6px; }
  /* #06 card: condensed */
  #page-inventory.jj-r01 .jj-fcard { grid-template-columns: 84px minmax(0, 1fr) !important; gap: 0 12px !important; padding: 11px 12px 9px !important; margin-bottom: 10px !important; border-radius: 10px !important; }
  #page-inventory.jj-r01 .jj-fcard .inv-card-thumb { width: 84px !important; height: 86px !important; border-radius: 8px !important; grid-row: span 1 !important; }
  #page-inventory.jj-r01 .jj-fcard .inv-card-body { gap: 0 !important; }
  #page-inventory.jj-r01 .jj-fcard .inv-card-brand { font-size: 15.5px !important; line-height: 1.25 !important; }
  #page-inventory.jj-r01 .jj-fcard .inv-card-model { font-size: 13.5px !important; margin-top: 1px !important; line-height: 1.3; }
  #page-inventory.jj-r01 .jj-fcard .wf-ct-corner { top: 8px !important; right: 2px !important; }
  #page-inventory.jj-r01 .jj-fcard .wf-ct-more { width: 26px !important; height: 26px !important; min-width: 26px; min-height: 26px; flex-basis: 26px; font-size: 16px !important; margin: 0 !important; padding: 9px !important; }
  #page-inventory.jj-r01 .jj-fc-stack { gap: 4px !important; margin-top: 3px !important; }
  #page-inventory.jj-r01 .jj-fc-stack .wf-ct-sku { font-size: 11.5px !important; padding: 1px 7px !important; height: auto !important; min-height: 0 !important; border-radius: 6px !important; line-height: 1.35 !important; }
  #page-inventory.jj-r01 .jj-fc-stack .row-status-picker.wf-ctile,
  #page-inventory.jj-r01 .jj-fc-stack .row-status-picker .wf-ctile-top { height: 22px !important; min-height: 22px !important; }
  #page-inventory.jj-r01 .jj-fc-stack .row-status-picker .wf-ctile-top { padding: 0 9px !important; gap: 6px !important; }
  #page-inventory.jj-r01 .jj-fc-stack .row-status-picker .wf-ctile-lbl { font-size: 13px !important; }
  #page-inventory.jj-r01 .jj-fc-stack .row-status-picker .wf-ctile-dot { width: 8px; height: 8px; }
  #page-inventory.jj-r01 .jj-fc-stack .row-status-picker svg { display: none; }
  #page-inventory.jj-r01 .jj-fc-stack .jj-soldto { font-size: 13.5px !important; }
  #page-inventory.jj-r01 .jj-fc-bottom { margin-top: 8px !important; padding-top: 7px !important; }
  #page-inventory.jj-r01 .jj-fc-k { font-size: 12px !important; line-height: 1.2; }
  #page-inventory.jj-r01 .jj-fc-v { font-size: 15.5px !important; line-height: 1.25; }
  #page-inventory.jj-r01 .jj-fc-cell { padding: 0 10px !important; gap: 1px !important; }
  #page-inventory.jj-r01 .jj-fc-bottom .jj-days-chip { font-size: 13px !important; padding: 3px 10px !important; border-radius: 6px; }
  #page-inventory.jj-r01.jj-filtered .jj-list-foot { padding: 0 2px 8px !important; font-size: 13.5px !important; }
}
/* hit box for the controls drawn smaller than 44px (see tapExempt in jj-inventory.js) */
@media (pointer: coarse) {
  [data-jj-tap] { position: relative; }
  [data-jj-tap]::before { content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
}
@media (max-width: 768px) {
  html.jj-on-inventory { --topbar-h: 52px; }
  html.jj-on-inventory .topbar { height: 52px !important; min-height: 52px; }
  #page-inventory.jj-r01 > .page-content { padding-top: 4px !important; }
  #page-inventory.jj-r01 .inv-mobile-header { margin: 0 0 10px !important; }
  html:not(.wf-private-view) #page-inventory.jj-r01.jj-filtered .jj-fsum { padding: 7px 14px !important; min-height: 40px; }
  #page-inventory.jj-r01.jj-filtered .inv-toolbar .search-input { min-height: 38px !important; }
  #page-inventory.jj-r01.jj-filtered .jj-fbanner { padding: 8px 12px 9px !important; }
  #page-inventory.jj-r01.jj-filtered .jj-fb-row { gap: 4px 8px !important; }
  #inventory-mobile-grid:has(.jj-fcard) { gap: 10px !important; row-gap: 10px !important; }
  #page-inventory.jj-r01 .jj-fcard { margin-bottom: 0 !important; padding: 10px 12px 8px !important; }
  #page-inventory.jj-r01 .jj-fc-stack { gap: 3px !important; margin-top: 2px !important; }
  #page-inventory.jj-r01 .jj-fc-stack .wf-ct-sku { font-size: 11px !important; padding: 0 6px !important; line-height: 17px !important; height: 18px !important; }
  #page-inventory.jj-r01 .jj-fc-stack .row-status-picker.wf-ctile,
  #page-inventory.jj-r01 .jj-fc-stack .row-status-picker .wf-ctile-top { height: 21px !important; min-height: 21px !important; }
  #page-inventory.jj-r01 .jj-fc-stack .jj-soldto { margin-top: 1px !important; line-height: 1.3; }
  #page-inventory.jj-r01 .jj-fc-bottom { margin-top: 7px !important; padding-top: 6px !important; }
  #page-inventory.jj-r01 .jj-fcard .inv-card-brand { line-height: 1.2 !important; }
  #page-inventory.jj-r01 .jj-fcard .inv-card-model { line-height: 1.25 !important; }
}
@media (max-width: 768px) {
  #page-inventory.jj-r01.jj-filtered .inv-mobile-header { margin-bottom: 4px !important; }
  html:not(.wf-private-view) #page-inventory.jj-r01.jj-filtered .jj-fsum { min-height: 40px; padding: 6px 14px !important; margin-bottom: 8px !important; }
  #page-inventory.jj-r01.jj-filtered #inv-filter-card { gap: 8px !important; margin-bottom: 8px !important; }
  #page-inventory.jj-r01.jj-filtered .jj-fbanner { padding: 7px 12px 7px !important; }
  #page-inventory.jj-r01.jj-filtered .jj-fb-pill { height: 32px !important; }
  #page-inventory.jj-r01 .jj-fc-stack { gap: 2px !important; }
  #page-inventory.jj-r01 .jj-fcard { padding: 9px 12px 7px !important; }
  #page-inventory.jj-r01 .jj-fc-v { font-size: 15px !important; }
  #page-inventory.jj-r01 .jj-fc-bottom { margin-top: 5px !important; padding-top: 5px !important; }
  #page-inventory.jj-r01.jj-filtered .inv-mobile-greeting { margin-bottom: 0 !important; }
  #page-inventory.jj-r01.jj-filtered .jj-fb-row { gap: 2px 8px !important; }
  #page-inventory.jj-r01.jj-filtered .inv-status-bar { padding: 0 0 2px !important; }
  /* the four phone chips fill the row edge to edge, like the mock (no sideways scroll) */
  #page-inventory.jj-r01.jj-filtered .inv-status-bar { overflow: visible !important; flex-wrap: nowrap !important; }
  #page-inventory.jj-r01.jj-filtered .inv-status-chip { flex: 1 1 auto !important; justify-content: center !important; padding: 0 8px !important; gap: 6px !important; min-width: 0 !important; }
  #page-inventory.jj-r01 .jj-fcard .inv-card-model { margin-top: 0 !important; }
  /* bell badge: the count in a small primary pill on the bell's shoulder */
  html.jj-on-inventory .topbar #topbar-notif-dot.wf-bell-dot[data-on="1"][data-n] {
    top: 0; right: -1px; width: auto; height: 18px; min-width: 18px; min-height: 18px; padding: 0 5px; box-sizing: border-box;
    border-radius: 999px; background: var(--blue); color: var(--on-accent); box-shadow: 0 0 0 2px var(--bg-raised);
    font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; display: block;
  }
  html.jj-on-inventory .topbar #topbar-notif-dot.wf-bell-dot[data-on="1"][data-n]::after { content: attr(data-n); }
  html.jj-on-inventory .topbar .btn-icon[title="Notifications"] { overflow: visible !important; }
  #page-inventory.jj-r01 .jj-fc-stack .row-status-picker .wf-ctile-dot { width: 9px !important; height: 9px !important; }
  #page-inventory.jj-r01.jj-filtered .inv-status-chip .inv-status-dot { width: 8px !important; height: 8px !important; }
}
@media (max-width: 420px) {
  /* narrower phones: the same four chips still fit one row */
  #page-inventory.jj-r01.jj-filtered .inv-status-bar { gap: 5px !important; }
  #page-inventory.jj-r01.jj-filtered .inv-status-chip { font-size: 13px !important; padding: 0 6px !important; gap: 5px !important; }
  #page-inventory.jj-r01.jj-filtered .inv-status-chip .inv-status-count { font-size: 12px; min-width: 18px; padding: 1px 5px; }
}
/* ═══ Phone v3 — #01 / #01b condensed to the mock's density (same layout Hal approved) ═══ */
@media (max-width: 768px) {
  #page-inventory.jj-r01:not(.jj-filtered) .inv-mobile-greeting { margin-bottom: 0 !important; }
  #page-inventory.jj-r01:not(.jj-filtered) .inv-mobile-header { margin-bottom: 10px !important; min-height: 0 !important; }
  html.jj-on-inventory:not(.jj-inv-filtered) .jj-topbar-add { height: 32px !important; min-height: 32px !important; max-height: 32px !important; font-size: 14px !important; padding: 0 10px !important; gap: 5px !important; }
  html.jj-on-inventory:not(.jj-inv-filtered) .jj-topbar-add svg { width: 16px !important; height: 16px !important; flex-basis: 16px !important; }
  #page-inventory.jj-r01 .jj-title-add { height: 34px !important; min-height: 34px !important; font-size: 14.5px !important; padding: 0 14px !important; border-radius: 9px !important; }
  /* stats card */
  #page-inventory.jj-r01:not(.jj-filtered) .jj-stats { padding: 8px 0 !important; margin-bottom: 10px !important; }
  #page-inventory.jj-r01:not(.jj-filtered) .jj-stat-k { line-height: 16px !important; }
  #page-inventory.jj-r01:not(.jj-filtered) .jj-stat-v { line-height: 25px !important; margin-top: 1px; }
  /* search + filters, chips, list bar */
  #page-inventory.jj-r01:not(.jj-filtered) #inv-filter-card { gap: 8px !important; margin-bottom: 8px !important; }
  #page-inventory.jj-r01:not(.jj-filtered) .inv-toolbar .search-input { height: 36px !important; min-height: 36px !important; font-size: 14.5px !important; border-radius: 9px !important; }
  #page-inventory.jj-r01:not(.jj-filtered) .inv-toolbar .inv-filters-btn { height: 36px !important; min-height: 36px !important; font-size: 14.5px !important; border-radius: 9px !important; }
  #page-inventory.jj-r01:not(.jj-filtered) .inv-status-bar { padding: 0 0 2px !important; }
  #page-inventory.jj-r01:not(.jj-filtered) .inv-status-chip { height: 33px !important; min-height: 33px !important; font-size: 13.5px !important; padding: 0 18px !important; border-radius: 9px !important; gap: 6px !important; }
  #page-inventory.jj-r01:not(.jj-filtered) .inv-status-chip .inv-status-count { font-size: 12px; min-width: 19px; padding: 1px 6px; }
  #page-inventory.jj-r01 .jj-list-bar { padding: 3px 3px 3px 14px !important; margin-bottom: 8px !important; min-height: 0 !important; }
  #page-inventory.jj-r01 .jj-list-bar .jj-attn { height: 30px !important; min-height: 30px !important; font-size: 13.5px !important; padding: 0 8px 0 10px !important; gap: 6px !important; }
  #page-inventory.jj-r01 .jj-list-bar .jj-attn > svg { width: 16px; height: 16px; flex-basis: 16px; }
  #page-inventory.jj-r01 .jj-list-bar .jj-attn-n { min-width: 20px; height: 20px; font-size: 11.5px; }
  /* #01 card */
  #inventory-mobile-grid:has(.inv-card):not(:has(.jj-fcard)) { gap: 8px !important; row-gap: 8px !important; }
  #page-inventory.jj-r01 .inv-card:not(.jj-fcard) { padding: 10px 10px 8px !important; gap: 0 10px !important; margin-bottom: 0 !important; grid-template-columns: 68px minmax(0, 1fr) !important; }
  #page-inventory.jj-r01 .inv-card:not(.jj-fcard) .inv-card-thumb { width: 68px !important; height: 68px !important; }
  #page-inventory.jj-r01 .inv-card:not(.jj-fcard) .inv-card-brand { line-height: 1.1 !important; }
  #page-inventory.jj-r01 .inv-card:not(.jj-fcard) .inv-card-model { line-height: 16px !important; margin-top: 2px !important; }
  #page-inventory.jj-r01 .inv-card:not(.jj-fcard) .wf-ct-corner { gap: 5px !important; }
  #page-inventory.jj-r01 .inv-card:not(.jj-fcard) .wf-ct-more { margin-left: 2px !important; }
  #page-inventory.jj-r01 .inv-card:not(.jj-fcard) .wf-ct-sku { font-size: 11px !important; padding: 0 6px !important; height: 24px !important; min-height: 24px !important; }
  #page-inventory.jj-r01 .inv-card:not(.jj-fcard) .row-status-picker .wf-ctile-top { padding: 0 7px !important; }
  #page-inventory.jj-r01 .inv-card:not(.jj-fcard) .row-status-picker.wf-ctile,
  #page-inventory.jj-r01 .inv-card:not(.jj-fcard) .row-status-picker .wf-ctile-top { height: 26px !important; min-height: 26px !important; }
  #page-inventory.jj-r01 .inv-card:not(.jj-fcard) .wf-ct-more { width: 24px !important; min-width: 24px !important; flex-basis: 24px !important; font-size: 19px !important; font-weight: 600 !important; color: var(--white) !important; letter-spacing: -1px; }
  #page-inventory.jj-r01 .inv-card:not(.jj-fcard) .jj-money-grid { padding: 3px 0 5px !important; }
  #page-inventory.jj-r01 .inv-card:not(.jj-fcard) .inv-card-ps-label { line-height: 15px !important; }
  #page-inventory.jj-r01 .inv-card:not(.jj-fcard) .inv-card-ps-value { font-size: 16px !important; line-height: 20px !important; }
  #page-inventory.jj-r01 .inv-card:not(.jj-fcard) .jj-card-line { padding-top: 5px !important; line-height: 18px !important; }
  /* #01b: private bar, summary line, search card, rows */
  html.wf-private-view #page-inventory.jj-r01 .jj-private-bar { min-height: 34px !important; padding: 0 6px 0 14px !important; margin-bottom: 10px !important; border-radius: 9px !important; }
  html.wf-private-view #page-inventory.jj-r01 .jj-private-bar .jj-pb-show { min-height: 30px !important; height: 30px !important; }
  html.wf-private-view #page-inventory.jj-r01 .jj-psum { margin-bottom: 8px !important; line-height: 22px !important; min-height: 0 !important; }
  html.wf-private-view #page-inventory.jj-r01 .inv-toolbar { padding: 6px !important; }
  html.wf-private-view #page-inventory.jj-r01 .inv-toolbar .search-input { height: 32px !important; min-height: 32px !important; }
  html.wf-private-view #page-inventory.jj-r01 .inv-toolbar .inv-filters-btn { height: 32px !important; min-height: 32px !important; }
  html.wf-private-view #page-inventory.jj-r01 .jj-private-card { padding: 10px 16px 8px !important; }
  html.wf-private-view #page-inventory.jj-r01 .jj-private-card .inv-card-model { margin-top: 1px !important; }
  html.wf-private-view #page-inventory.jj-r01 .jj-card-details { padding-top: 2px !important; line-height: 18px !important; }
  html.wf-private-view #page-inventory.jj-r01 .jj-card-details .jj-days-chip { padding: 2px 8px !important; line-height: 18px !important; }
}
@media (max-width: 768px) {
  html.wf-private-view #page-inventory.jj-r01 .jj-psum .jj-psum-item { min-height: 0 !important; height: auto !important; padding-top: 0 !important; padding-bottom: 0 !important; }
}
@media (max-width: 420px) {
  /* narrow phones: "+ Add watch" doesn't fit beside the logo — it becomes the
     same square "+" Hal drew on his #06 phone top bar */
  html.jj-on-inventory:not(.jj-inv-filtered):not(.wf-private-view) .jj-topbar-add { width: 34px !important; min-width: 34px !important; max-width: 34px !important; height: 34px !important; min-height: 34px !important; max-height: 34px !important; padding: 0 !important; justify-content: center; }
  html.jj-on-inventory:not(.jj-inv-filtered):not(.wf-private-view) .jj-topbar-add span { display: none; }
  html.jj-on-inventory:not(.jj-inv-filtered):not(.wf-private-view) .jj-topbar-add svg { width: 19px !important; height: 19px !important; flex-basis: 19px !important; }
}
/* ═══ ICON-ONLY BUTTONS — Hal's standard: rounded squares (equal sides, ~10px radius,
   light fill or 1px border, full flex lockdown). Row-level ⋯ stays a plain icon. ═══ */
.jj-blur-btn, .jj-blur-btn:is(:hover, :focus-visible) {
  border-radius: 10px !important; border: 1px solid var(--jj-line, var(--border)) !important; background: var(--bg-raised) !important;
}
@media (max-width: 768px) {
  html.jj-on-inventory .topbar .jj-blur-btn, html.jj-on-inventory .topbar .jj-blur-btn:is(:hover, :focus-visible) { border-radius: 10px !important; }
  html.jj-inv-filtered:not(.wf-private-view).jj-on-inventory .jj-topbar-add { border-radius: 10px !important; aspect-ratio: 1 / 1; flex: 0 0 34px !important; max-width: 34px !important; height: 34px !important; min-height: 34px !important; max-height: 34px !important; padding: 0 !important; justify-content: center; box-sizing: border-box; }
  /* bell wrapper: same rounded-square box (drawn bare, as in the mock; the shape shows on press) */
  html.jj-on-inventory .topbar .btn-icon[title="Notifications"] {
    /* 34px painted box; on touch screens the house 44px floor still applies (it stays square) */
    width: 34px !important; height: 34px !important; flex: 0 0 auto !important; aspect-ratio: 1 / 1; box-sizing: border-box; border-radius: 10px !important; padding: 0 !important; line-height: 0;
    display: inline-flex !important; align-items: center; justify-content: center;
  }
  html.jj-on-inventory .topbar .btn-icon[title="Notifications"]:active { background: var(--bg-hover) !important; }
  /* Private view: the filter button is icon-only → a square beside the search */
  html.wf-private-view #page-inventory.jj-r01 .inv-toolbar .inv-filters-btn {
    width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; max-width: 34px !important; max-height: 34px !important;
    flex: 0 0 34px !important; aspect-ratio: 1 / 1; box-sizing: border-box; border-radius: 10px !important; padding: 0 !important;
  }
  html.wf-private-view #page-inventory.jj-r01 .inv-toolbar .search-input { height: 34px !important; min-height: 34px !important; }
}
@media (max-width: 420px) {
  html.jj-on-inventory:not(.jj-inv-filtered):not(.wf-private-view) .jj-topbar-add { border-radius: 10px !important; aspect-ratio: 1 / 1; flex: 0 0 34px !important; box-sizing: border-box; }
}
/* desktop table-header ⋯ (column setup): rounded-square box, drawn plain as in the mock */
#page-inventory.jj-r01 .jj-th-more {
  width: 34px !important; height: 34px !important; min-width: 34px; min-height: 34px; max-width: 34px; max-height: 34px; flex: 0 0 34px;
  aspect-ratio: 1 / 1; box-sizing: border-box; border-radius: 10px !important; padding: 0; line-height: 0;
}
#page-inventory.jj-r01 .jj-th-more:is(:hover, :focus-visible) { background: var(--bg-hover) !important; }
@media (max-width: 768px) {
  /* flagged phone card: the problem strip sits flush on the card's bottom edge */
  #page-inventory.jj-r01 .jj-fcard:has(.jj-problem-strip) { padding-bottom: 0 !important; overflow: hidden; }
  #page-inventory.jj-r01 .jj-fcard .jj-problem-strip { margin: 7px -12px 0 !important; width: calc(100% + 24px) !important; min-height: 46px; padding: 7px 14px !important; }
  #page-inventory.jj-r01 .jj-fcard .jj-ps-title { font-size: 15px; }
  #page-inventory.jj-r01 .jj-fcard .jj-ps-sub { font-size: 13px; }
  #page-inventory.jj-r01 .jj-fcard .jj-ps-ic svg { width: 22px; height: 22px; }
}

/* ═══ Thin KPI cards (Hal, Oct 6) ═════════════════════════════════════════
   The stats card becomes a row of separate thin KPI cards that stay on in
   every view (filtered, salesperson, Private view). Values + sub-lines are
   the page's own filter-aware KPI rail (see syncStats). Private view keeps
   only the count cards. Last in the file and #id.class-scoped so it wins over
   the earlier one-card tuning at each breakpoint. */
#page-inventory.jj-r01 #jj-inv-stats.jj-kpis {
  /* Columns follow the cards that are showing, so Private view's two count
     cards (or a no-cost user's) share the full row instead of leaving gaps. */
  display: grid !important; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(0, 1fr); gap: 10px;
  background: transparent; border: 0; border-radius: 0; padding: 0 !important; margin: 0 0 14px !important;
}
html.wf-private-view #page-inventory.jj-r01 #jj-inv-stats.jj-kpis { display: grid !important; }
#page-inventory.jj-r01 #jj-inv-stats.jj-kpis .jj-stat {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; align-content: start;
  background: var(--jj-card); border: 1px solid var(--jj-line) !important; border-left-width: 1px !important; border-radius: 10px;
  padding: 10px 14px !important; cursor: pointer; min-width: 0; position: relative;
  transition: border-color .15s, box-shadow .15s;
}
#page-inventory.jj-r01 #jj-inv-stats.jj-kpis .jj-stat[hidden] { display: none !important; }
#page-inventory.jj-r01 #jj-inv-stats.jj-kpis .jj-stat:hover { border-color: var(--jj-primary) !important; }
#page-inventory.jj-r01 #jj-inv-stats.jj-kpis .jj-stat:focus-visible { outline: 2px solid var(--jj-primary); outline-offset: 2px; }
#page-inventory.jj-r01 #jj-inv-stats.jj-kpis .jj-stat-k { font-size: 12.5px !important; font-weight: 500; color: var(--off-white); gap: 6px; }
#page-inventory.jj-r01 #jj-inv-stats.jj-kpis .jj-stat-k svg { width: 14px; height: 14px; flex: 0 0 14px; }
#page-inventory.jj-r01 #jj-inv-stats.jj-kpis .jj-stat-v { font-size: 20px !important; font-weight: 700 !important; line-height: 1.2; margin: 0 !important; }
#page-inventory.jj-r01 #jj-inv-stats.jj-kpis .jj-stat-s { font-size: 11.5px; color: var(--off-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1.3em; }
#page-inventory.jj-r01 #jj-inv-stats.jj-kpis .jj-stat.is-filtered .jj-stat-s { color: var(--jj-primary); }
#page-inventory.jj-r01 #jj-inv-stats.jj-kpis .jj-stat.is-selected { border-color: var(--jj-primary) !important; box-shadow: 0 0 0 1px var(--jj-primary); }
#page-inventory.jj-r01 #jj-inv-stats.jj-kpis .jj-stat.is-selected .jj-stat-k { color: var(--jj-primary); }
#page-inventory.jj-r01 #jj-inv-stats.jj-kpis .jj-stat.is-bookwide { opacity: .62; }
@media (max-width: 768px) {
  /* Phone: one swipeable row of compact cards, all four (Sold included). */
  #page-inventory.jj-r01 #jj-inv-stats.jj-kpis {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(112px, calc((100% - 20px) / 3));
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin: 0 0 12px !important; padding-bottom: 2px !important;
  }
  #page-inventory.jj-r01 #jj-inv-stats.jj-kpis::-webkit-scrollbar { display: none; }
  #page-inventory.jj-r01 #jj-inv-stats.jj-kpis .jj-stat { scroll-snap-align: start; padding: 8px 12px !important; }
  #page-inventory.jj-r01 #jj-inv-stats.jj-kpis .jj-stat[data-jj-stat="sold"]:not([hidden]) { display: grid !important; }
  #page-inventory.jj-r01 #jj-inv-stats.jj-kpis .jj-stat-k { font-size: 13px !important; white-space: nowrap; }
  #page-inventory.jj-r01 #jj-inv-stats.jj-kpis .jj-stat-v { font-size: 19px !important; }
  /* Phone keeps each card to label + number; a filtered figure says so. */
  #page-inventory.jj-r01 #jj-inv-stats.jj-kpis .jj-stat-s { display: none; }
  #page-inventory.jj-r01 #jj-inv-stats.jj-kpis .jj-stat.is-filtered::after { content: 'Filtered'; font-size: 12px; font-weight: 500; color: var(--jj-primary); line-height: 1.2; }
}
/* The KPI cards now carry the filtered counts; the one-line summary above the
   toolbar repeated them (and mixed the filtered total with whole-filter status
   counts), so it is retired. The list foot still says "N matches". */
#page-inventory.jj-r01 .jj-fsum { display: none !important; }
/* Header buttons never break their labels onto two lines; when the row is too
   narrow for title + buttons, the buttons drop under the title instead. */
#page-inventory.jj-r01 .inv-desktop-header { flex-wrap: wrap; row-gap: 12px; }
#page-inventory.jj-r01 .inv-desktop-header > .flex .btn { white-space: nowrap; }
/* No Needs attention button (Private view, or nothing to fix): the search row
   takes the full width instead of leaving its slot empty. */
#page-inventory.jj-r01 #inv-filter-card:not(:has(> [data-jj-attn]:not([hidden]))) { grid-template-columns: minmax(0, 1fr) !important; }

/* Dev's KPI card look, thinner (Hal, Oct 6): icon tile on the left, spaced
   capital label, number, sub-line. */
#page-inventory.jj-r01 #jj-inv-stats.jj-kpis .jj-stat {
  grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 12px 14px !important;
}
#page-inventory.jj-r01 #jj-inv-stats.jj-kpis .jj-stat-body { min-width: 0; display: grid; gap: 2px; }
#page-inventory.jj-r01 #jj-inv-stats.jj-kpis .jj-stat-ic {
  width: 36px; height: 36px; min-width: 36px; flex: 0 0 36px; aspect-ratio: 1 / 1; box-sizing: border-box;
  border-radius: 10px; display: flex; align-items: center; justify-content: center;
}
#page-inventory.jj-r01 #jj-inv-stats.jj-kpis .jj-stat-ic svg { width: 18px; height: 18px; }
#page-inventory.jj-r01 #jj-inv-stats.jj-kpis [data-jj-stat="instock"] .jj-stat-ic { color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); }
#page-inventory.jj-r01 #jj-inv-stats.jj-kpis [data-jj-stat="sold"] .jj-stat-ic { color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, transparent); }
#page-inventory.jj-r01 #jj-inv-stats.jj-kpis [data-jj-stat="retail"] .jj-stat-ic { color: var(--jj-primary); background: color-mix(in srgb, var(--jj-primary) 10%, transparent); }
#page-inventory.jj-r01 #jj-inv-stats.jj-kpis [data-jj-stat="cost"] .jj-stat-ic { color: var(--off-white); background: var(--bg-void); }
#page-inventory.jj-r01 #jj-inv-stats.jj-kpis .jj-stat-k { font-size: 10.5px !important; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 600; color: var(--off-white); }
#page-inventory.jj-r01 #jj-inv-stats.jj-kpis :is([data-jj-stat="instock"], [data-jj-stat="retail"]) .jj-stat-v { color: var(--jj-primary); }
#page-inventory.jj-r01 #jj-inv-stats.jj-kpis .jj-stat-v { font-size: 22px !important; }
@media (max-width: 768px) {
  /* All four: 150px cards in a swipe row. Fewer (Private view): they share the row. */
  #page-inventory.jj-r01 #jj-inv-stats.jj-kpis { grid-auto-columns: minmax(150px, 1fr); }
  #page-inventory.jj-r01 #jj-inv-stats.jj-kpis .jj-stat { padding: 10px 12px !important; column-gap: 10px; }
  #page-inventory.jj-r01 #jj-inv-stats.jj-kpis .jj-stat.is-filtered::after { content: none; }
  #page-inventory.jj-r01 #jj-inv-stats.jj-kpis .jj-stat.is-filtered .jj-stat-body::after { content: 'Filtered'; font-size: 12px; font-weight: 500; color: var(--jj-primary); line-height: 1.2; }
  #page-inventory.jj-r01 #jj-inv-stats.jj-kpis .jj-stat-ic { width: 32px; height: 32px; min-width: 32px; flex-basis: 32px; border-radius: 9px; }
  #page-inventory.jj-r01 #jj-inv-stats.jj-kpis .jj-stat-ic svg { width: 16px; height: 16px; }
  #page-inventory.jj-r01 #jj-inv-stats.jj-kpis .jj-stat-k { font-size: 11px !important; letter-spacing: 1.2px; }
  #page-inventory.jj-r01 #jj-inv-stats.jj-kpis .jj-stat-v { font-size: 20px !important; }
}

/* "Filtered" tag beside the label (desktop and phone) instead of inside the sub-line. */
#page-inventory.jj-r01 #jj-inv-stats.jj-kpis .jj-stat-k { display: flex; align-items: center; gap: 8px; }
#page-inventory.jj-r01 #jj-inv-stats.jj-kpis .jj-stat.is-filtered .jj-stat-k::after {
  content: 'Filtered'; font-size: 10.5px; letter-spacing: 0.2px; text-transform: none; font-weight: 600;
  color: var(--jj-primary); background: color-mix(in srgb, var(--jj-primary) 10%, transparent); padding: 1px 7px; border-radius: 999px;
}
#page-inventory.jj-r01 #jj-inv-stats.jj-kpis .jj-stat.is-filtered .jj-stat-s { color: var(--off-white); }
@media (max-width: 768px) {
  #page-inventory.jj-r01 #jj-inv-stats.jj-kpis .jj-stat.is-filtered .jj-stat-k::after { content: none; }
}

/* ═══ Hal, Oct 6 (round 3) ═════════════════════════════════════════════════
   1. The one-line summary ("6 watches · 5 in stock · 3 need attention") is
      retired everywhere: the KPI cards replaced it. Private view now keeps the
      same Needs attention button as the normal view, so nothing is lost.
   2. Views + Filters are icon-only rounded squares on phones, tablets and
      narrow desktops; their words show only on a wide screen (1280px+). */
#page-inventory.jj-r01 .jj-psum,
html.wf-private-view #page-inventory.jj-r01 .jj-psum { display: none !important; }
html.wf-private-view #page-inventory.jj-r01 #inv-filter-card > [data-jj-attn]:not([hidden]) { display: inline-flex !important; }
@media (max-width: 768px) {
  /* phone: same place as the normal view — on the "N watches" bar */
  html.wf-private-view #page-inventory.jj-r01 #inv-filter-card > [data-jj-attn]:not([hidden]) { display: none !important; }
  html.wf-private-view #page-inventory.jj-r01 .jj-list-bar { display: flex !important; }
  html.wf-private-view #page-inventory.jj-r01 .jj-list-bar [data-jj-attn]:not([hidden]) { display: inline-flex !important; }
}
@media (max-width: 1279px) {
  #page-inventory.jj-r01 .inv-toolbar .inv-filters-btn {
    --jj-ib: 44px;
    width: var(--jj-ib) !important; height: var(--jj-ib) !important;
    min-width: var(--jj-ib) !important; min-height: var(--jj-ib) !important;
    max-width: var(--jj-ib) !important; max-height: var(--jj-ib) !important;
    flex: 0 0 var(--jj-ib) !important; aspect-ratio: 1 / 1; box-sizing: border-box;
    padding: 0 !important; border-radius: 10px !important; line-height: 0;
    display: inline-flex !important; align-items: center; justify-content: center; position: relative; gap: 0 !important;
  }
  #page-inventory.jj-r01 .inv-toolbar .inv-filters-btn > svg { width: 18px; height: 18px; flex: 0 0 18px; }
  #page-inventory.jj-r01 .inv-toolbar .inv-filters-btn .inv-filters-label { display: none !important; }
  /* the active-filter count rides the corner instead of sitting beside a label */
  #page-inventory.jj-r01 .inv-toolbar #inv-filters-count:not([hidden]) {
    position: absolute !important; top: -6px; right: -6px; margin: 0 !important;
    min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; line-height: 18px; box-sizing: border-box;
    background: var(--blue); color: var(--on-accent, #fff); border: 2px solid var(--bg-raised);
  }
}
@media (max-width: 768px) {
  #page-inventory.jj-r01 .inv-toolbar .inv-filters-btn { --jj-ib: 36px; }
  #page-inventory.jj-r01 .inv-toolbar .search-input { height: 36px !important; min-height: 36px !important; }
}