/* ============================================================================
   Parts eBay Lister — Component styles
   Consumes tokens from tokens.css only (no hardcoded colors). Preserves every
   class name the original templates used so they keep rendering unchanged; new
   components for the redesigned nav, review list, capture flow, and drawer are
   added below the legacy port.
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding-top: var(--nav-h);
  font: var(--fs-base)/var(--lh-base) "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); }

h1 { font-size: var(--fs-lg); margin: 0 0 var(--s-4); font-weight: 650; }
h2 { font-size: var(--fs-md); margin: var(--s-5) 0 var(--s-2); font-weight: 600; }
h3 { font-size: var(--fs-base); margin: var(--s-4) 0 var(--s-2); font-weight: 600; }

.mut { color: var(--mut); }
.small { font-size: var(--fs-sm); }
pre { background: var(--slate-950); color: #d7e2f0; padding: var(--s-3); border-radius: var(--r-md);
       overflow-x: auto; font-size: var(--fs-sm); line-height: var(--lh-relaxed); }

main { max-width: var(--maxw); margin: var(--s-5) auto; padding: 0 var(--s-4); }


/* ==========================================================================
   NAV (redesigned — regrouped around the lifecycle)
   ========================================================================== */

.nav {
  position: fixed; inset: 0 0 auto 0; height: var(--nav-h); z-index: var(--z-nav);
  background: var(--slate-900); color: #fff;
  display: flex; align-items: center; gap: var(--s-2);
  padding: 0 var(--s-5);
  box-shadow: var(--shadow-sm);
  overflow-x: auto; scrollbar-width: thin;
}
.nav::-webkit-scrollbar { height: 6px; }
.nav::-webkit-scrollbar-thumb { background: var(--slate-700); border-radius: 3px; }

.nav .brand {
  font-weight: 700; font-size: var(--fs-md); color: #fff; text-decoration: none;
  padding: var(--s-1) var(--s-2); white-space: nowrap; display: flex; align-items: center; gap: var(--s-2);
}
.nav .brand .logo {
  width: 24px; height: 24px; border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--blue-400), var(--green-400));
  display: inline-block; flex: none;
}

.nav-sep { width: 1px; height: 24px; background: var(--slate-700); flex: none; margin: 0 var(--s-1); }

.nav a, .nav summary {
  color: #cdd6e4; text-decoration: none; font-size: var(--fs-base);
  padding: var(--s-1) var(--s-3); border-radius: var(--r-md); white-space: nowrap;
  display: inline-flex; align-items: center; gap: var(--s-1); cursor: pointer;
  list-style: none; transition: background var(--t-fast), color var(--t-fast);
}
.nav a:hover, .nav summary:hover { background: var(--slate-800); color: #fff; }
.nav a.active, .nav summary.active { background: var(--blue-600); color: #fff; }

/* pipeline dropdown */
.nav details { position: relative; }
.nav details > summary::-webkit-details-marker { display: none; }
.nav details[open] > summary { background: var(--slate-800); color: #fff; }
.nav .menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 240px;
  background: var(--card); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: var(--s-2);
  display: grid; gap: 1px;
}
.nav .menu a { color: var(--ink); padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); width: 100%; }
.nav .menu a:hover { background: var(--bg-sunken); }
.nav .menu .grp { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em;
                  color: var(--mut); padding: var(--s-2) var(--s-3) var(--s-1); }

.badge { display: inline-block; min-width: 18px; text-align: center;
         background: var(--slate-700); color: #fff; border-radius: var(--r-pill);
         padding: 0 6px; font-size: var(--fs-xs); font-weight: 600; margin-left: var(--s-1); }
.badge.danger { background: var(--danger); }
.badge.warn { background: var(--amber-600); }

.nav .mode { margin-left: auto; font-size: var(--fs-sm); display: flex; align-items: center; gap: var(--s-2); }
.nav .pill { padding: 3px 10px; border-radius: var(--r-pill); background: var(--slate-800);
             font-size: var(--fs-sm); white-space: nowrap; }
.nav .pill b { text-transform: uppercase; font-weight: 700; }
.nav .pill.warn { background: var(--red-700); }
.nav .pill.ok { background: var(--green-700); }

/* theme toggle button */
.nav .toggle {
  background: transparent; border: 1px solid var(--slate-700); color: #cdd6e4;
  width: 34px; height: 34px; border-radius: var(--r-md); cursor: pointer; font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  transition: background var(--t-fast);
}
.nav .toggle:hover { background: var(--slate-800); }
:root[data-theme="dark"] .nav .toggle .ico-sun { display: block; }
:root[data-theme="dark"] .nav .toggle .ico-moon { display: none; }
:root:not([data-theme="dark"]) .nav .toggle .ico-sun { display: none; }
:root:not([data-theme="dark"]) .nav .toggle .ico-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nav .toggle .ico-sun { display: block; }
  :root:not([data-theme="light"]) .nav .toggle .ico-moon { display: none; }
}


/* ==========================================================================
   CARDS + TILES (preserved class names)
   ========================================================================== */

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s-5); margin-bottom: var(--s-4); box-shadow: var(--shadow-xs);
}
.card.flush { padding: 0; overflow: hidden; }
.card h1:first-child, .card h2:first-child { margin-top: 0; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s-3); }
.tile {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s-4); text-decoration: none; color: var(--ink); box-shadow: var(--shadow-xs);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
  display: block;
}
.tile:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.tile b { display: block; font-size: var(--fs-2xl); font-weight: 700; color: var(--ink-strong); }
.tile span { color: var(--mut); font-size: var(--fs-sm); }
.tile.accent { border-left: 4px solid var(--primary); }
.tile.danger { border-color: var(--danger); }
.tile.success { border-left: 4px solid var(--success); }
.tile.warn { border-left: 4px solid var(--warn); }


/* ==========================================================================
   GRID utilities (preserved)
   ========================================================================== */

.grid { display: grid; gap: var(--s-4); }
.grid.c2 { grid-template-columns: 1fr 1fr; }
.grid.c3 { grid-template-columns: repeat(3, 1fr); }
.grid.c4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid.c2, .grid.c3, .grid.c4 { grid-template-columns: 1fr; } }


/* ==========================================================================
   TABLES (preserved)
   ========================================================================== */

table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: var(--s-2) var(--s-2); border-bottom: 1px solid var(--line);
         vertical-align: top; }
th { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em;
     color: var(--mut); font-weight: 600; }
tr:hover td { background: var(--bg-sunken); }
.kv td:first-child { color: var(--mut); width: 180px; font-size: var(--fs-sm); }


/* ==========================================================================
   STATE BADGES (preserved class names — every lifecycle state)
   ========================================================================== */

.state { display: inline-block; padding: 2px var(--s-2); border-radius: var(--r-pill);
         font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.state.candidate    { background: var(--st-candidate-bg); color: var(--st-candidate-fg); }
.state.needs_review { background: var(--st-review-bg);    color: var(--st-review-fg); }
.state.scrap        { background: var(--st-scrap-bg);     color: var(--st-scrap-fg); }
.state.approved,
.state.publishing   { background: var(--st-approved-bg);  color: var(--st-approved-fg); }
.state.active       { background: var(--st-active-bg);    color: var(--st-active-fg); }
.state.ended,
.state.ineligible,
.state.excluded     { background: var(--st-ended-bg);     color: var(--st-ended-fg); }
.state.sold_out     { background: var(--st-sold-bg);      color: var(--st-sold-fg); }
.state.error        { background: var(--st-error-bg);     color: var(--st-error-fg); }


/* ==========================================================================
   PROBLEM FLAGS (preserved)
   ========================================================================== */

.problem { display: block; font-size: var(--fs-sm); }
.problem.block { color: var(--danger); }
.problem.review { color: var(--warn); }
.problem.flag { color: var(--mut); }


/* ==========================================================================
   FLASH MESSAGES (preserved)
   ========================================================================== */

.flash { padding: var(--s-2) var(--s-3); border-radius: var(--r-md); margin-bottom: var(--s-3); }
.flash.ok { background: var(--success-soft); color: var(--success); }
.flash.err { background: var(--danger-soft); color: var(--danger); white-space: pre-wrap; }


/* ==========================================================================
   BUTTONS (preserved class names + new variants)
   ========================================================================== */

button, .btn {
  background: var(--primary); border: 0; color: var(--on-primary);
  padding: 7px 14px; border-radius: var(--r-md); font: inherit; font-weight: 500;
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: var(--s-1);
  transition: background var(--t-fast), box-shadow var(--t-fast); white-space: nowrap;
}
button:hover, .btn:hover { background: var(--primary-hover); }
button.secondary, .btn.secondary { background: var(--bg-sunken); color: var(--ink); border: 1px solid var(--line); }
button.secondary:hover, .btn.secondary:hover { background: var(--line); }
button.danger { background: var(--danger); }
button.danger:hover { background: var(--red-600); }
button.green { background: var(--success); }
button.green:hover { background: var(--green-600); }
button.ghost { background: transparent; color: var(--primary); }
button.ghost:hover { background: var(--primary-soft); }
button.small, .btn.small { padding: 3px 8px; font-size: var(--fs-sm); }
button:disabled, .btn:disabled { opacity: .5; cursor: not-allowed; }

form.inline { display: inline; }


/* ==========================================================================
   FORMS (preserved + enhanced)
   ========================================================================== */

input[type=text], input[type=password], input[type=number], input[type=search], textarea, select {
  width: 100%; padding: 7px 9px; border: 1px solid var(--line); border-radius: var(--r-md);
  font: inherit; background: var(--bg-raised); color: var(--ink); transition: border-color var(--t-fast);
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--primary); outline-offset: -1px;
                                              border-color: var(--primary); }
input[type=checkbox], input[type=radio] { width: auto; margin-right: var(--s-1); transform: translateY(1px); }
label { font-size: var(--fs-sm); color: var(--mut); display: block; margin: var(--s-3) 0 var(--s-1); }
label.inline { display: inline; }
textarea { resize: vertical; min-height: 4em; font-family: inherit; }

fieldset { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-2) var(--s-3);
           margin-top: var(--s-2); }
legend { padding: 1px var(--s-2); font-size: var(--fs-sm); }

.form-row { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: end; }
.form-row > * { flex: 1; min-width: 0; }
.form-row .narrow { flex: 0 0 auto; }


/* ==========================================================================
   MEDIA / PHOTOS (preserved)
   ========================================================================== */

img.thumb { max-height: 90px; border-radius: var(--r-sm); border: 1px solid var(--line);
            margin: 2px; object-fit: cover; }
img.hero { max-height: 220px; border-radius: var(--r-md); border: 1px solid var(--line); object-fit: cover; }
.photo-grid { display: flex; flex-wrap: wrap; gap: var(--s-2); }


/* ==========================================================================
   PIPELINE STAGE TABS (new — the /pipeline shell)
   ========================================================================== */

.stage-tabs { display: flex; gap: var(--s-1); border-bottom: 1px solid var(--line); margin-bottom: var(--s-4); overflow-x: auto; }
.stage-tabs a { padding: var(--s-2) var(--s-4); text-decoration: none; color: var(--mut);
                border-bottom: 2px solid transparent; white-space: nowrap; font-weight: 500;
                font-size: var(--fs-base); display: inline-flex; align-items: center; gap: var(--s-1); }
.stage-tabs a:hover { color: var(--ink); }
.stage-tabs a.active { color: var(--primary); border-bottom-color: var(--primary); }
.stage-tabs a .badge { background: var(--bg-sunken); color: var(--mut); }
.stage-tabs a.active .badge { background: var(--primary-soft); color: var(--primary); }

.stage-group-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em;
                     color: var(--mut); padding: var(--s-2) var(--s-4) 0; }

.stage-flow { display: grid; gap: var(--s-3); }
.stage-flow .stage-group { display: grid; gap: var(--s-2); }
.flow-arrow { text-align: center; color: var(--mut); font-size: var(--fs-lg); line-height: 1;
              opacity: .5; }


/* ==========================================================================
   REVIEW LIST (new — the core workflow win)
   ========================================================================== */

.review-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
@media (min-width: 1100px) {
  .review-layout.with-detail { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
  .review-layout.with-detail .review-detail { position: sticky; top: calc(var(--nav-h) + var(--s-4)); }
}

.facets { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: end; margin-bottom: var(--s-3); }
.facets label { margin: 0; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em;
                color: var(--mut); }
.facets select, .facets input { width: auto; min-width: 120px; padding: 5px 8px; font-size: var(--fs-sm); }
.facets .facet-group { display: flex; flex-direction: column; gap: 2px; }

.review-toolbar { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2);
                  flex-wrap: wrap; margin-bottom: var(--s-2); }
.review-toolbar .sel-info { font-size: var(--fs-sm); color: var(--mut); }

.review-table th.sticky, .review-table td.col-sku { font-variant-numeric: tabular-nums; }
.review-table .row { cursor: pointer; }
.review-table tr.selected td { background: var(--primary-soft); }
.review-table tr.row:hover td { background: var(--bg-sunken); }
.review-table tr.active-row td { background: var(--primary-soft); border-left: 3px solid var(--primary); }

/* inline-edit cell (HTMX swaps in a form, swaps back to the value) */
.inline-edit { display: flex; gap: 4px; align-items: center; }
.inline-edit input { padding: 3px 6px; font-size: var(--fs-sm); }
.inline-edit button { padding: 2px 6px; font-size: var(--fs-sm); }

.batch-bar { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap;
             padding: var(--s-3) 0; border-top: 1px solid var(--line); margin-top: var(--s-2); }
.batch-bar .count { font-size: var(--fs-sm); color: var(--mut); margin-right: var(--s-2); }

/* detail drawer / panel (master-detail) */
.review-detail .card { margin-bottom: 0; max-height: calc(100vh - var(--nav-h) - var(--s-8)); overflow-y: auto; }
.detail-empty { color: var(--mut); text-align: center; padding: var(--s-9) var(--s-4); }


/* ==========================================================================
   REVIEW GROUPS (grouped-by-problem view)
   ========================================================================== */

.review-groups { display: grid; gap: var(--s-4); padding: var(--s-4) var(--s-5) var(--s-5); }
.review-group {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow-xs);
}
/* left-accent stripe by severity so groups are visually distinct at a glance */
.review-group.block    { border-left: 4px solid var(--danger); }
.review-group.review   { border-left: 4px solid var(--warn); }
.review-group.flag     { border-left: 4px solid var(--mut); }
.review-group.ready    { border-left: 4px solid var(--success); }
.review-group.ready .review-group-head h2 { color: var(--success); }

.review-group-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-4) var(--s-5) var(--s-3); border-bottom: 1px solid var(--line);
  background: var(--bg-sunken);
}
.review-group-head h2 { margin: 0; font-size: var(--fs-md); }
.review-group-head p { margin: 0; }
.review-group-body { padding: 0; }
/* group tables are tighter than the flat list — no need for Age/Market columns */
.review-group .review-table th, .review-group .review-table td { font-size: var(--fs-sm); }
.review-group .review-table thead th { background: var(--bg-raised); }

/* badge severity inside group headers reuses the .badge variants */
.review-group-head .badge { font-size: var(--fs-sm); vertical-align: middle; }


/* ==========================================================================
   QR CODE (capture hand-off to phone)
   ========================================================================== */

/* the SVG fills its container; the frame sets the size + background so the QR
   scans cleanly in both themes (modules are dark, so a light card behind them) */
.qr-frame {
  background: #fff; border-radius: var(--r-md); padding: var(--s-2);
  width: 180px; height: 180px; display: flex; align-items: center; justify-content: center;
  flex: none; border: 1px solid var(--line);
}
.qr-frame.small { width: 140px; height: 140px; padding: var(--s-1); }
.qr-frame svg { width: 100%; height: 100%; display: block; }

/* QR card in the review detail panel — horizontal: QR left, info right */
.qr-card {
  display: flex; gap: var(--s-4); align-items: center;
  padding: var(--s-3); background: var(--bg-sunken); border-radius: var(--r-md);
  flex-wrap: wrap;
}
.qr-card .qr-info { flex: 1; min-width: 180px; }
.qr-card .qr-info p { margin: 0 0 var(--s-2); }

/* QR hand-off card on the bulk capture page — stacked */
.capture .qr-handoff {
  display: grid; gap: var(--s-3); text-align: center; align-items: center;
  justify-items: center;
}
.capture .qr-handoff-head { text-align: center; }
.capture .qr-handoff-foot { max-width: 100%; }
.capture .qr-handoff-foot p { margin: 0 0 var(--s-1); }



/* ==========================================================================
   CAPTURE (mobile phone-first photo queue)
   ========================================================================== */

.capture { max-width: 540px; margin: 0 auto; }
.capture-card { text-align: center; padding: var(--s-6); }
.capture-card .pn { font-size: var(--fs-xl); font-weight: 700; color: var(--ink-strong);
                    font-variant-numeric: tabular-nums; word-break: break-all; }
.capture-card .desc { color: var(--mut); margin: var(--s-2) 0 var(--s-4); }
.capture-card .bin { display: inline-flex; align-items: center; gap: var(--s-2);
                     background: var(--primary-soft); color: var(--primary); padding: var(--s-2) var(--s-4);
                     border-radius: var(--r-pill); font-weight: 600; }
.capture-progress { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.capture-progress .bar { flex: 1; height: 8px; background: var(--bg-sunken); border-radius: var(--r-pill); overflow: hidden; }
.capture-progress .bar > span { display: block; height: 100%; background: var(--success); transition: width var(--t-base); }
.capture-upload { position: relative; }
.capture-upload input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.capture-upload .big-btn { width: 100%; padding: var(--s-5); font-size: var(--fs-md); border: 2px dashed var(--line-strong);
                           background: var(--bg-sunken); color: var(--ink); border-radius: var(--r-lg); }

.capture-done { text-align: center; padding: var(--s-9) var(--s-4); }
.capture-done .check { font-size: 48px; }


/* ==========================================================================
   MISC UTILITIES
   ========================================================================== */

.row-flex { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.spacer { flex: 1; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.mono, .tabnum { font-variant-numeric: tabular-nums; }
.right { text-align: right; }
.hide-sm { display: none; }
@media (min-width: 900px) { .hide-sm { display: revert; } .show-sm { display: none; } }

/* HTMX loading indicator (any element with .htmx-indicator inside an hx-* target) */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline-block; }
.htmx-settling { opacity: 1; transition: opacity var(--t-base); }
.htmx-swapping { opacity: 0; transition: opacity var(--t-base); }

/* skeleton row while a detail panel loads */
.skeleton { background: var(--bg-sunken); border-radius: var(--r-sm); color: transparent; user-select: none; }