/* ============================================================================
   hh-ui.css — Hickory Hollow shared UI tokens + primitives
   ----------------------------------------------------------------------------
   The single source of truth for brand colour, type and the small set of
   primitives the Odoo-style Inventory / Purchase screens are built from.

   Tokens are lifted verbatim from the approved design prototypes (the
   Inventory + Scan Station mocks, kept on master) so the built pages and the
   mocks stay in sync. Deep hickory green + charcoal — never Odoo purple.

   Usage:
     <link rel="stylesheet" href="/css/hh-ui.css">
   A consuming page may remap its own legacy variables onto these tokens (see
   inventory.html) so an existing stylesheet restyles wholesale without a
   rewrite.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Barlow+Condensed:wght@600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* ── Brand ─────────────────────────────────────────────────────────────── */
  --hh-green:        #2f6b5c;   /* primary action / active state             */
  --hh-green-dk:     #1f4d42;   /* hover, pressed                            */
  --hh-green-dp:     #22483f;   /* text on pale green fills                  */
  --hh-mint:         #8fbfb2;   /* accent: focus ring, active tab underline  */
  --hh-mint-pale:    #e9f2ef;   /* pale fill (secondary buttons, chips)      */
  --hh-mint-line:    #cfe0da;   /* border on pale fills                      */
  --hh-mint-hover:   #dbebe5;   /* pale fill hover                           */

  /* ── Chrome (app header + tab bar) ─────────────────────────────────────── */
  --hh-chrome:       #3e4145;   /* header background — charcoal, not green   */
  --hh-chrome-line:  #5c6066;   /* hairline/button border inside the header  */
  --hh-chrome-fg:    #d5d8da;   /* header secondary text                     */
  --hh-chrome-dim:   #a8adb2;   /* inactive tab label                        */

  /* ── Surface + text ────────────────────────────────────────────────────── */
  --hh-bg:           #f2f4f3;   /* page background                           */
  --hh-surface:      #ffffff;
  --hh-surface-2:    #fafbfb;   /* table head, zebra, inset wells            */
  --hh-line:         #e2e6e5;   /* card border                               */
  --hh-line-2:       #eceeed;   /* inner divider                             */
  --hh-line-3:       #f1f3f2;   /* row divider                               */
  --hh-field-line:   #dfe3e2;   /* input + ghost-button border               */
  --hh-ink:          #26282b;   /* primary text                              */
  --hh-ink-2:        #3d4245;   /* button label                              */
  --hh-ink-3:        #4b5155;   /* body copy                                 */
  --hh-muted:        #7b8285;   /* labels, captions                          */
  --hh-dim:          #8b9195;   /* SKU lines, empty states                   */

  /* ── Status (stock health) ─────────────────────────────────────────────── */
  --hh-ok:           #2f6b5c;
  --hh-ok-bg:        #e9f2ef;
  --hh-low:          #b0770f;
  --hh-low-bg:       #fbf3e2;
  --hh-crit:         #c0451a;
  --hh-crit-bg:      #fbeae4;
  --hh-out:          #8b9195;
  --hh-out-bg:       #f1f3f2;

  /* ── Scan station (exact prototype constants) ──────────────────────────── */
  --hh-scan-green:   #2f6b5c;
  --hh-scan-red:     #b23b2e;
  --hh-scan-amber:   #c07a1f;
  --hh-flash-ok-bg:    #eef5f2;  --hh-flash-ok-line:   #cfe0da;
  --hh-flash-warn-bg:  #fdf4e7;  --hh-flash-warn-line: #f0dcbb;
  --hh-flash-err-bg:   #fbeceb;  --hh-flash-err-line:  #f0cdc9;

  /* ── Type ──────────────────────────────────────────────────────────────── */
  --hh-font:         'Barlow', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  --hh-font-cond:    'Barlow Condensed', 'Barlow', 'Segoe UI', sans-serif;
  --hh-font-mono:    'IBM Plex Mono', ui-monospace, 'Courier New', monospace;

  /* ── Shape ─────────────────────────────────────────────────────────────── */
  --hh-r-card:       12px;
  --hh-r-ctl:        8px;
  --hh-r-pill:       999px;
  --hh-shadow:       0 1px 3px rgba(38, 40, 43, 0.07);
}

/* ── Focus: one ring everywhere, brand mint ─────────────────────────────── */
.hh input:focus, .hh select:focus, .hh textarea:focus,
input.hh-focus:focus, .hh-field:focus {
  outline: 2px solid var(--hh-mint);
  outline-offset: 1px;
  border-color: var(--hh-mint);
}

/* ── Numerals: condensed + tabular, for anything that must line up ──────── */
.hh-num {
  font-family: var(--hh-font-cond);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.hh-mono {
  font-family: var(--hh-font-mono);
  font-size: 0.82em;
  color: var(--hh-dim);
}

/* ── Eyebrow label (uppercase micro-caps above a figure) ────────────────── */
.hh-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--hh-muted);
}

/* ══ Primitive: card ═════════════════════════════════════════════════════ */
.hh-card {
  background: var(--hh-surface);
  border: 1px solid var(--hh-line);
  border-radius: var(--hh-r-card);
  padding: 14px 18px;
}
.hh-card-tight { padding: 0; }

/* Operations card — the clickable tiles in the overview strip. */
.hh-opcard {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--hh-surface);
  border: 1px solid var(--hh-line);
  border-radius: var(--hh-r-card);
  padding: 14px 18px;
  cursor: pointer; text-align: left; width: 100%;
  font-family: inherit; color: inherit;
  transition: border-color .14s, box-shadow .14s, transform .14s;
}
.hh-opcard:hover { border-color: var(--hh-mint); box-shadow: var(--hh-shadow); }
.hh-opcard:active { transform: translateY(1px); }
.hh-opcard.is-active { border-color: var(--hh-green); box-shadow: inset 0 0 0 1px var(--hh-green); }
.hh-opcard-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hh-opcard-fig { font-family: var(--hh-font-cond); font-weight: 700; font-size: 34px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.hh-opcard-sub { font-size: 12.5px; font-weight: 500; color: var(--hh-muted); }
.hh-opcard-chip {
  width: 38px; height: 38px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700;
  background: var(--hh-mint-pale); color: var(--hh-green-dp);
}

/* ══ Primitive: list row (CSS-grid table) ════════════════════════════════ */
.hh-list { background: var(--hh-surface); border: 1px solid var(--hh-line); border-radius: var(--hh-r-card); overflow: hidden; }
.hh-list-scroll { overflow-x: auto; }
.hh-list-head, .hh-list-row {
  display: grid; gap: 16px; align-items: center;
  grid-template-columns: var(--hh-cols, minmax(240px,1fr) 96px 96px 190px 110px 128px);
  min-width: var(--hh-min, 900px);
}
.hh-list-head {
  padding: 10px 18px; background: var(--hh-surface-2);
  border-bottom: 1px solid var(--hh-line-2);
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--hh-muted);
}
.hh-list-row { padding: 12px 18px; border-bottom: 1px solid var(--hh-line-3); }
.hh-list-row:last-child { border-bottom: none; }
.hh-list-row:hover { background: var(--hh-surface-2); }
.hh-list-row.is-child { background: #fcfdfd; }
.hh-list-row.is-child:hover { background: var(--hh-surface-2); }
.hh-list-foot { padding: 12px 18px; border-top: 1px solid var(--hh-line-2); font-size: 13px; color: var(--hh-muted); }
.hh-cell-r { text-align: right; }
.hh-name { font-size: 15px; font-weight: 600; color: var(--hh-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hh-sub  { font-family: var(--hh-font-mono); font-size: 11.5px; color: var(--hh-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Expand/collapse twisty for parent → variant nesting. */
.hh-twisty {
  width: 22px; height: 22px; flex: none; border-radius: 6px;
  border: 1px solid var(--hh-field-line); background: var(--hh-surface);
  color: var(--hh-muted); cursor: pointer; font-family: inherit;
  font-size: 11px; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: transform .14s, border-color .14s, color .14s;
}
.hh-twisty:hover { border-color: var(--hh-mint); color: var(--hh-green); }
.hh-twisty.is-open { transform: rotate(90deg); }
.hh-twisty-spacer { width: 22px; flex: none; }
.hh-indent { padding-left: 34px; }

/* ══ Primitive: status badge ═════════════════════════════════════════════ */
.hh-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 3px 9px; border-radius: var(--hh-r-pill);
  white-space: nowrap;
}
.hh-badge-ok   { background: var(--hh-ok-bg);   color: var(--hh-ok); }
.hh-badge-low  { background: var(--hh-low-bg);  color: var(--hh-low); }
.hh-badge-crit { background: var(--hh-crit-bg); color: var(--hh-crit); }
.hh-badge-out  { background: var(--hh-out-bg);  color: var(--hh-out); }
.hh-badge-info { background: var(--hh-mint-pale); color: var(--hh-green-dp); }
.hh-badge-dot  { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* Stock-level meter — bar + label, the prototype's "Stock level" column. */
.hh-meter { display: flex; align-items: center; gap: 10px; }
.hh-meter-track { flex: 1; height: 6px; border-radius: 4px; background: #eef0ef; overflow: hidden; min-width: 60px; }
.hh-meter-fill  { display: block; height: 100%; border-radius: 4px; background: var(--hh-ok); }
.hh-meter-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; min-width: 38px; }

/* ══ Primitive: tab bar ══════════════════════════════════════════════════ */
.hh-tabbar { display: flex; gap: 4px; overflow-x: auto; background: var(--hh-chrome); padding: 0 28px; }
.hh-tab {
  padding: 11px 16px; border: none; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 600; white-space: nowrap;
  color: var(--hh-chrome-dim); border-bottom: 2px solid transparent;
}
.hh-tab:hover { color: #e8eae9; }
.hh-tab.active { color: #fff; font-weight: 700; border-bottom-color: var(--hh-mint); }

/* ══ Primitive: buttons ══════════════════════════════════════════════════ */
.hh-btn {
  font-family: inherit; font-size: 13px; font-weight: 600;
  padding: 7px 13px; border-radius: var(--hh-r-ctl); cursor: pointer;
  border: 1px solid var(--hh-field-line); background: var(--hh-surface); color: var(--hh-ink-2);
}
.hh-btn:hover:not(:disabled) { border-color: var(--hh-mint); color: var(--hh-green); }
.hh-btn:disabled { opacity: .5; cursor: not-allowed; }
.hh-btn-primary { background: var(--hh-green); border-color: var(--hh-green); color: #fff; font-weight: 700; }
.hh-btn-primary:hover:not(:disabled) { background: var(--hh-green-dk); border-color: var(--hh-green-dk); color: #fff; }
.hh-btn-soft { background: var(--hh-mint-pale); border-color: var(--hh-mint-line); color: var(--hh-green-dp); font-weight: 700; }
.hh-btn-soft:hover:not(:disabled) { background: var(--hh-mint-hover); color: var(--hh-green-dp); }

/* ══ Scanner ergonomics (Scan In/Out + PO Check-In) ══════════════════════ */
/* Big touch targets and a monospace code field — the floor scans on these. */
.hh-scan-field {
  flex: 1; min-width: 0; padding: 18px 20px;
  font-family: var(--hh-font-mono); font-size: 26px; font-weight: 500; letter-spacing: 0.02em;
  border: 2px solid var(--hh-field-line); border-radius: 11px;
  background: var(--hh-surface-2); color: var(--hh-ink);
}
.hh-scan-field:focus { outline: none; border-color: var(--hh-mint); background: #fff; }
.hh-qty-wrap {
  display: flex; align-items: center; gap: 2px; padding: 4px;
  border: 1px solid var(--hh-field-line); border-radius: 11px; background: var(--hh-surface-2);
}
.hh-qty-step {
  width: 48px; align-self: stretch; border: none; background: transparent;
  font-size: 26px; font-weight: 600; color: #5c6266; cursor: pointer; border-radius: var(--hh-r-ctl);
}
.hh-qty-step:hover { background: #eef0ef; }
.hh-qty-input {
  width: 88px; text-align: center; border: none; background: transparent;
  font-family: var(--hh-font-cond); font-size: 36px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--hh-ink); padding: 0;
}
.hh-qty-input:focus { outline: none; }
/* Mode toggle: the Scan In / Scan Out pair. */
.hh-mode {
  cursor: pointer; text-align: left; padding: 18px 22px; border-radius: 14px;
  border: 2px solid var(--hh-field-line); background: var(--hh-surface);
  display: flex; align-items: center; gap: 16px; font-family: inherit; width: 100%;
  transition: border-color .14s, background .14s;
}
.hh-mode-chip {
  width: 44px; height: 44px; border-radius: 11px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 700; background: #eef0ef; color: #5c6266;
}
.hh-mode-title { font-family: var(--hh-font-cond); font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; }
.hh-mode-sub { font-size: 13px; font-weight: 600; opacity: 0.75; }
.hh-mode { min-height: 84px; }                      /* touch target */
.hh-mode.is-off-in  .hh-mode-chip { background: var(--hh-mint-pale); color: var(--hh-scan-green); }
.hh-mode.is-off-out .hh-mode-chip { background: var(--hh-flash-err-bg); color: var(--hh-scan-red); }
.hh-mode.is-on-in   { border-color: var(--hh-scan-green); background: var(--hh-scan-green); color: #fff; }
.hh-mode.is-on-in  .hh-mode-chip { background: rgba(255,255,255,.20); color: #fff; }
.hh-mode.is-on-out  { border-color: var(--hh-scan-red); background: var(--hh-scan-red); color: #fff; }
.hh-mode.is-on-out .hh-mode-chip { background: rgba(255,255,255,.20); color: #fff; }

/* "Scanner ready" pulse. */
.hh-ready { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hh-green); }
.hh-ready-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--hh-green); animation: hh-ping 1.6s ease-out infinite; }
@keyframes hh-ping {
  0%   { box-shadow: 0 0 0 0 rgba(47,107,92,.55); }
  70%  { box-shadow: 0 0 0 9px rgba(47,107,92,0); }
  100% { box-shadow: 0 0 0 0 rgba(47,107,92,0); }
}
@media (prefers-reduced-motion: reduce) {
  .hh-ready-dot { animation: none; }
}

/* Feedback banner after a scan commits. */
@keyframes hh-flash-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.hh-flash {
  border-radius: 14px; padding: 18px 22px; display: flex; gap: 18px; align-items: center;
  animation: hh-flash-in .18s ease-out;
}
@media (prefers-reduced-motion: reduce) { .hh-flash { animation: none; } }
.hh-flash-icon {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; color: #fff;
}
.hh-flash-ok   { background: var(--hh-flash-ok-bg);   border: 1px solid var(--hh-flash-ok-line); }
.hh-flash-warn { background: var(--hh-flash-warn-bg); border: 1px solid var(--hh-flash-warn-line); }
.hh-flash-err  { background: var(--hh-flash-err-bg);  border: 1px solid var(--hh-flash-err-line); }
.hh-flash-ok   .hh-flash-icon { background: var(--hh-scan-green); }
.hh-flash-warn .hh-flash-icon { background: var(--hh-scan-amber); }
.hh-flash-err  .hh-flash-icon { background: var(--hh-scan-red); }
.hh-flash-ok   .hh-flash-title { color: var(--hh-scan-green); }
.hh-flash-warn .hh-flash-title { color: var(--hh-scan-amber); }
.hh-flash-err  .hh-flash-title { color: var(--hh-scan-red); }
.hh-flash-title { font-weight: 700; font-size: 18px; }
.hh-flash-body  { font-size: 14px; font-weight: 500; margin-top: 2px; color: var(--hh-ink-3); }
.hh-flash-undo {
  padding: 11px 18px; min-height: 44px; border: 1px solid #cfd4d3; background: #fff;
  border-radius: 9px; font-family: inherit; font-size: 13px; font-weight: 700;
  color: var(--hh-ink-2); cursor: pointer;
}
.hh-flash-undo:hover { border-color: var(--hh-scan-red); color: var(--hh-scan-red); }

/* ══ Scan station layout ═════════════════════════════════════════════════ */
.hh-scan-wrap {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(520px, 1fr));
  gap: 20px; align-items: start;
}
@media (max-width: 1100px) { .hh-scan-wrap { grid-template-columns: 1fr; } }
.hh-scan-main { display: flex; flex-direction: column; gap: 18px; }
.hh-scan-side { display: flex; flex-direction: column; gap: 16px; }
.hh-mode-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.hh-scan-panel {
  background: var(--hh-surface); border: 1px solid var(--hh-line);
  border-radius: 14px; padding: 22px; display: flex; flex-direction: column; gap: 16px;
}
.hh-scan-row { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; }
.hh-scan-go {
  padding: 0 34px; min-height: 62px; border: none; border-radius: 11px; color: #fff;
  font-family: var(--hh-font-cond); font-size: 26px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer;
}
.hh-scan-go:disabled { opacity: .55; cursor: not-allowed; }
.hh-qty-pills { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.hh-qty-pill {
  padding: 10px 18px; min-height: 44px; border: 1px solid var(--hh-field-line);
  background: #fff; border-radius: 22px; font-family: inherit;
  font-size: 13px; font-weight: 700; color: var(--hh-ink-2); cursor: pointer;
}
.hh-qty-pill:hover { border-color: var(--hh-mint); color: var(--hh-green); }
.hh-qty-pill.is-on { border-color: var(--hh-green); background: var(--hh-mint-pale); color: var(--hh-green-dp); }

/* Product card with the live before-commit preview. */
.hh-scan-pcard {
  background: var(--hh-surface); border: 1px solid var(--hh-line); border-radius: 14px;
  padding: 20px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
}
.hh-scan-photo {
  width: 196px; height: 196px; flex: none; border-radius: 12px; object-fit: cover;
  background: var(--hh-surface-2); border: 1px solid var(--hh-line);
}
.hh-scan-photo-empty {
  width: 196px; height: 196px; flex: none; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-weight: 700; font-size: 15px; padding: 10px; border: 1px solid var(--hh-line);
}
.hh-scan-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.hh-scan-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.hh-scan-name { font-family: var(--hh-font-cond); font-size: 34px; font-weight: 700; line-height: 1.05; }
.hh-scan-sku { font-family: var(--hh-font-mono); font-size: 13px; color: var(--hh-dim); }
.hh-scan-figs { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.hh-fig-lbl { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hh-muted); }
.hh-fig-from { font-family: var(--hh-font-cond); font-size: 30px; font-weight: 700; line-height: 1; color: var(--hh-dim); font-variant-numeric: tabular-nums; }
.hh-fig-to   { font-family: var(--hh-font-cond); font-size: 44px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.hh-fig-arrow { font-size: 24px; color: #c3c8c7; }
.hh-fig-rp { padding-left: 22px; border-left: 1px solid var(--hh-line-2); }
.hh-fig-rp-val { font-family: var(--hh-font-cond); font-size: 30px; font-weight: 700; line-height: 1; color: var(--hh-ink-3); font-variant-numeric: tabular-nums; }
.hh-scan-status {
  padding: 7px 15px; border-radius: 20px; font-size: 12px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: #fff;
}

/* Session totals + log. */
.hh-scan-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 12px; }
.hh-total-fig { font-family: var(--hh-font-cond); font-size: 32px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.hh-log { background: var(--hh-surface); border: 1px solid var(--hh-line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.hh-log-head {
  padding: 14px 18px; border-bottom: 1px solid var(--hh-line-2);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.hh-log-clear { border: none; background: transparent; font-family: inherit; font-size: 12px; font-weight: 700; color: var(--hh-dim); cursor: pointer; padding: 8px; }
.hh-log-clear:hover { color: var(--hh-scan-red); }
.hh-log-scroll { max-height: 520px; overflow-y: auto; }
.hh-log-row { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--hh-line-3); }
.hh-log-row:last-child { border-bottom: none; }
.hh-log-chip {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 700; color: #fff;
}
.hh-log-name { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hh-log-meta { font-family: var(--hh-font-mono); font-size: 11px; color: var(--hh-dim); }
.hh-log-delta { font-family: var(--hh-font-cond); font-size: 22px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.hh-log-after { font-size: 11px; font-weight: 600; color: var(--hh-dim); font-variant-numeric: tabular-nums; }
.hh-log-undo {
  border: 1px solid var(--hh-field-line); background: #fff; border-radius: 8px;
  font-family: inherit; font-size: 12px; font-weight: 700; color: var(--hh-ink-2);
  padding: 10px 12px; min-height: 44px; cursor: pointer; flex: none;
}
.hh-log-undo:hover { border-color: var(--hh-scan-red); color: var(--hh-scan-red); }
.hh-log-empty { padding: 46px 20px; text-align: center; font-size: 15px; font-weight: 500; color: var(--hh-dim); }

/* ══ PO Check-In ═════════════════════════════════════════════════════════ */
.hh-poci-wrap { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 1080px) { .hh-poci-wrap { grid-template-columns: 1fr; } }
.hh-poci-list { display: flex; flex-direction: column; gap: 12px; max-height: 78vh; overflow-y: auto; padding-right: 4px; }
.hh-poci-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* One card per PO in the left rail. */
.hh-po-card {
  width: 100%; text-align: left; font-family: inherit; cursor: pointer;
  background: var(--hh-surface); border: 1px solid var(--hh-line);
  border-left: 4px solid var(--hh-line); border-radius: var(--hh-r-card);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 8px;
  transition: border-color .14s, box-shadow .14s;
}
.hh-po-card:hover { border-color: var(--hh-mint); }
.hh-po-card.is-selected { border-color: var(--hh-green); border-left-color: var(--hh-green); box-shadow: var(--hh-shadow); }
.hh-po-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.hh-po-num { font-weight: 800; font-size: 0.95rem; }
.hh-po-sup { font-size: 12.5px; color: var(--hh-muted); font-weight: 600; }
.hh-po-meta { font-size: 11.5px; color: var(--hh-dim); font-weight: 600; }
.hh-po-bar { height: 6px; border-radius: 4px; background: #eef0ef; overflow: hidden; }
.hh-po-bar span { display: block; height: 100%; border-radius: 4px; background: var(--hh-green); }
.hh-po-frac { font-size: 11.5px; font-weight: 700; color: var(--hh-muted); font-variant-numeric: tabular-nums; }
.hh-po-backlink { font-size: 11px; font-weight: 700; color: var(--hh-scan-amber); letter-spacing: .04em; }

/* Header metrics: ORDERED / RECEIVED / REMAINING */
.hh-poci-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 620px) { .hh-poci-metrics { grid-template-columns: 1fr; } }
.hh-metric { background: var(--hh-surface); border: 1px solid var(--hh-line); border-radius: var(--hh-r-card); padding: 14px 18px; }
.hh-metric-fig { font-family: var(--hh-font-cond); font-size: 34px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.hh-metric.is-open .hh-metric-fig { color: var(--hh-scan-amber); }

/* Line items */
.hh-poci-line {
  display: grid; grid-template-columns: minmax(200px, 1fr) 86px 86px minmax(150px, 200px) auto;
  gap: 14px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--hh-line-3);
}
.hh-poci-line:last-child { border-bottom: none; }
@media (max-width: 900px) { .hh-poci-line { grid-template-columns: 1fr 1fr; } }
.hh-poci-line.is-over { background: #fdf9f0; }
.hh-poci-line.is-done { background: #fafcfb; }
.hh-line-state { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.hh-line-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.hh-line-btn {
  min-height: 44px; padding: 10px 14px; border-radius: var(--hh-r-ctl);
  border: 1px solid var(--hh-mint-line); background: var(--hh-mint-pale);
  color: var(--hh-green-dp); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.hh-line-btn:hover:not(:disabled) { background: var(--hh-mint-hover); }
.hh-line-btn.is-ghost { background: #fff; border-color: var(--hh-field-line); color: var(--hh-ink-2); }
.hh-line-btn:disabled { opacity: .45; cursor: not-allowed; }

/* Footer */
.hh-poci-foot {
  background: var(--hh-surface); border: 1px solid var(--hh-line); border-radius: var(--hh-r-card);
  padding: 16px 18px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.hh-poci-hint { font-size: 13px; font-weight: 600; color: var(--hh-muted); flex: 1; min-width: 200px; }
.hh-btn-close-ok    { background: var(--hh-scan-green); border-color: var(--hh-scan-green); color: #fff; font-weight: 700; }
.hh-btn-close-ok:hover:not(:disabled)   { background: var(--hh-green-dk); border-color: var(--hh-green-dk); color: #fff; }
.hh-btn-close-short { background: var(--hh-scan-amber); border-color: var(--hh-scan-amber); color: #fff; font-weight: 700; }
.hh-btn-close-short:hover:not(:disabled){ background: #a86a17; border-color: #a86a17; color: #fff; }
.hh-btn-reset { background: #fff; border-color: var(--hh-field-line); color: var(--hh-ink-2); }
.hh-btn-reset:hover:not(:disabled) { border-color: var(--hh-scan-red); color: var(--hh-scan-red); }
.hh-confirm {
  background: var(--hh-flash-warn-bg); border: 1px solid var(--hh-flash-warn-line);
  border-radius: var(--hh-r-card); padding: 16px 18px; display: flex; gap: 12px;
  align-items: center; flex-wrap: wrap;
}
.hh-confirm-text { flex: 1; min-width: 220px; font-size: 14px; font-weight: 600; color: #7a5309; }


/* ══ Odoo-style product form shell ══════════════════════════════════════════
   Shared by the Sell Products catalog and the Inventory catalog. Both show a
   parent with its variants and a framed form with tabs and smart buttons, so
   the look lives here rather than being typed twice and drifting.

   Lifted verbatim out of products.html; the rules are unchanged, only their
   address is. What each area does with the shell — which tabs, which fields,
   which endpoints — stays in its own page.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Products / All-Variants toggle + the flat variant list ── */
.mode-bar { display: inline-flex; gap: 0; margin-bottom: 0.6rem; border: 1px solid var(--hh-border, #d8d2c6); border-radius: 8px; overflow: hidden; }
.mode-btn {
  padding: 0.4rem 0.95rem; border: 0; background: #fff; cursor: pointer;
  font: inherit; font-size: 0.84rem; font-weight: 600; color: var(--muted, #7b8285);
}
.mode-btn + .mode-btn { border-left: 1px solid var(--hh-border, #d8d2c6); }
.mode-btn.active { background: var(--hh-accent, #2f6b5c); color: #fff; }
.vl-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; background: #fff;
            border: 1px solid var(--hh-border, #d8d2c6); border-radius: 10px; overflow: hidden; }
.vl-table th {
  position: sticky; top: 0; background: #f6f5f2; text-align: left; padding: 0.5rem 0.7rem;
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted, #7b8285);
  border-bottom: 1px solid var(--hh-border, #d8d2c6);
}
.vl-table td { padding: 0.45rem 0.7rem; border-bottom: 1px solid #f0efec; vertical-align: middle; }
.vl-table tr.vl-row { cursor: pointer; }
.vl-table tr.vl-row:hover { background: #f7faf8; }
.vl-thumb { width: 34px; height: 34px; border-radius: 6px; object-fit: cover; display: block;
            border: 1px solid var(--hh-border, #d8d2c6); background: #fff; }
.vl-thumb-ph { width: 34px; height: 34px; border-radius: 6px; border: 1px dashed var(--hh-border, #d8d2c6);
               display: flex; align-items: center; justify-content: center; color: #c4bfb4; font-size: 12px; }
.vl-sku { font-family: 'Courier New', monospace; font-weight: 700; }
.vl-attr { display: inline-block; padding: 1px 7px; border-radius: 999px; background: #eef2f0;
           color: #44605a; font-size: 0.72rem; font-weight: 700; margin-right: 4px; }
.vl-num { text-align: right; font-variant-numeric: tabular-nums; }
.vl-muted { color: var(--muted, #7b8285); }
.vt-focus { animation: vtFocus 2.2s ease-out; }
@keyframes vtFocus { 0%,55% { background: #fdf3d6; } 100% { background: transparent; } }

/* ── Status pills ── */
/* ── Pills ───────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 0.28rem;
  font-size: 0.68rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.04em; padding: 0.2rem 0.52rem; border-radius: 4px;
}
.pill-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.pill-green  { background: var(--green-bg);  color: var(--green);   }
.pill-green  .pill-dot { background: var(--green); }
.pill-slate  { background: #f1f5f9;           color: #475569;        }
.pill-teal   { background: var(--hh-mint-pale); color: var(--hh-green-dp); }
.pill-amber  { background: var(--amber-bg);   color: var(--amber);   }
.pill-purple { background: var(--purple-bg);  color: var(--purple);  }
/* Draft reads as unfinished, not as a state the product is in — dashed
   rather than filled, so it never looks like Active or Archived. */
.pill-draft  { background: #fffaf0; color: #9a6a1f; border: 1px dashed #e0c48a; }

/* ── Odoo form shell: detail header, thumbnail, smart buttons, sheet ── */
/* ── Detail view ─────────────────────────────────────── */
.detail-back {
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: var(--primary); font-size: 0.85rem; font-weight: 700;
  background: none; border: none; cursor: pointer; padding: 0;
  margin-bottom: 1.1rem; font-family: inherit;
}
.detail-back:hover { text-decoration: underline; }
.detail-back svg { flex-shrink: 0; }

.detail-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 0.2rem;
}
/* 800, not 700: at 2rem in the condensed face the title was reading lighter
   than the stat figures beneath it, so the card's own name lost the hierarchy.
   Only the title moves — stat labels and body text are unchanged. */
.detail-title    { font-family: var(--hh-font-cond); font-size: 2rem; font-weight: 800; line-height: 1.05; }
.detail-subtitle { font-size: 0.85rem; color: var(--muted); margin-top: 0.3rem; }
/* Title block takes the slack so the status pill stays hard right once the
   thumbnail is added as a third flex child. */
.dh-titles { flex: 1 1 auto; min-width: 0; }

/* ── Product thumbnail (Odoo product image) ────────────── */
.pimg {
  position: relative; flex: 0 0 auto;
  width: 92px; height: 92px; border-radius: 10px;
  border: 1px solid var(--hh-border, #d8d2c6);
  background: #fff; overflow: hidden; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, box-shadow .15s;
}
.pimg:hover { border-color: var(--hh-accent, #7a6a53); box-shadow: 0 2px 10px rgba(0,0,0,.10); }
.pimg-img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The `hidden` attribute is display:none from the UA sheet, so the
   display:flex/block rules below would silently outrank it. Restore it. */
.pimg [hidden] { display: none !important; }
.pimg-empty {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: var(--muted, #8a8172); font-size: 0.66rem; text-align: center;
  letter-spacing: .02em;
}
.pimg-busy {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.86); font-size: 0.7rem; font-weight: 600;
  color: var(--hh-ink, #2c2822);
}
.pimg-clear {
  position: absolute; top: 3px; right: 3px;
  width: 20px; height: 20px; line-height: 18px; padding: 0;
  border-radius: 50%; border: 1px solid var(--hh-border, #d8d2c6);
  background: rgba(255,255,255,.94); color: #8a3b3b;
  font-size: 15px; cursor: pointer; opacity: 0; transition: opacity .15s;
}
.pimg:hover .pimg-clear { opacity: 1; }

/* ── Odoo-style smart buttons + action row ──────────────
   Smart buttons are stat tiles that will each open their own view in a
   later phase; the action row sits under them. */
.smart-row {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.65rem; margin: 1rem 0 0.75rem;
}
@media (max-width: 1080px) { .smart-row { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 620px)  { .smart-row { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.smart-btn {
  background: var(--hh-surface); border: 1px solid var(--hh-line);
  border-radius: var(--hh-r-card); padding: 0.7rem 0.85rem;
  display: flex; flex-direction: column; gap: 2px; min-height: 72px;
  cursor: pointer; text-align: left; font-family: inherit; color: inherit;
  transition: border-color .14s, box-shadow .14s;
}
.smart-btn:hover { border-color: var(--hh-mint); box-shadow: var(--hh-shadow); }
.smart-btn:disabled { cursor: default; opacity: 1; }
.smart-btn:disabled:hover { border-color: var(--hh-line); box-shadow: none; }
.smart-val {
  font-family: var(--hh-font-cond); font-size: 1.75rem; font-weight: 700;
  line-height: 1.05; font-variant-numeric: tabular-nums;
}
.smart-lbl {
  font-size: 0.63rem; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--hh-muted);
}
.smart-sub { font-size: 0.68rem; font-weight: 600; color: var(--hh-dim); }
.smart-btn.is-warn .smart-val { color: var(--hh-scan-amber); }
.smart-btn.is-crit .smart-val { color: var(--hh-crit); }

/* Kanban chips — Odoo shows the variant count as the card's headline fact */
.pc-badges { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-top: 2px; }
.pc-chip {
  display: inline-block; font-size: 0.68rem; font-weight: 800; letter-spacing: .03em;
  padding: 2px 8px; border-radius: 999px;
  background: var(--hh-surface-2); color: var(--hh-muted); border: 1px solid var(--hh-line);
}
.pc-variants {
  display: inline-block; font-size: 0.7rem; font-weight: 800; letter-spacing: .03em;
  padding: 2px 9px; border-radius: 999px;
  background: var(--hh-mint-pale); color: var(--hh-green-dp); border: 1px solid var(--hh-mint-line);
}
.pc-single {
  display: inline-block; font-size: 0.68rem; font-weight: 700;
  padding: 2px 8px; border-radius: 999px; color: var(--hh-dim);
  background: var(--hh-surface-2); border: 1px dashed var(--hh-line);
}
.pc-chip-pick { background: #eef3f7; color: #3c5c73; border-color: #d3e0ea; }
.pc-chip-make { background: var(--hh-low-bg); color: var(--hh-low); border-color: #ecd9ab; }
.pc-chip-both { background: var(--hh-mint-pale); color: var(--hh-green-dp); border-color: var(--hh-mint-line); }

/* Kanban card stock strip */
.pc-stock {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem;
  margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--hh-line-3);
}
.pc-stock-val {
  font-family: var(--hh-font-cond); font-size: 1.25rem; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--hh-ink);
}
.pc-stock-lbl {
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--hh-muted); margin-left: 3px;
}
.pc-price { font-size: 0.86rem; font-weight: 700; color: var(--hh-green-dp); }

/* ── Odoo form chrome ─────────────────────────────────
   A framed white sheet with a status band, the smart buttons top-right,
   and the chatter rail down the side — the shape of an Odoo form, in
   hickory green rather than Odoo purple. */
.odoo-sheet {
  background: var(--hh-surface); border: 1px solid var(--hh-line);
  border-radius: var(--hh-r-card); overflow: hidden;
}
.odoo-band {
  background: linear-gradient(180deg, var(--hh-mint-pale) 0%, var(--hh-surface) 100%);
  border-bottom: 1px solid var(--hh-line); padding: 1rem 1.2rem 0.75rem;
}
.odoo-body { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 0; align-items: start; }
@media (max-width: 1180px) { .odoo-body { grid-template-columns: 1fr; } }
.odoo-main { padding: 1.1rem 1.2rem 1.4rem; min-width: 0; }
.odoo-rail {
  border-left: 1px solid var(--hh-line); background: var(--hh-surface-2);
  padding: 1rem 1.1rem; min-height: 420px;
}
@media (max-width: 1180px) { .odoo-rail { border-left: none; border-top: 1px solid var(--hh-line); } }
.fav-star {
  background: none; border: none; cursor: pointer; font-size: 1.25rem;
  line-height: 1; padding: 0 4px; color: var(--hh-dim);
}
.fav-star.is-on { color: #d9a520; }

/* "More" dropdown for the secondary smart buttons */
.smart-more-wrap { position: relative; }
.smart-more-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 4px); z-index: 60;
  background: var(--hh-surface); border: 1px solid var(--hh-line);
  border-radius: var(--hh-r-card); box-shadow: 0 10px 30px rgba(38,40,43,.16);
  min-width: 260px; padding: 6px;
}
.smart-more-menu.open { display: block; }
.smart-more-item {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 9px 11px; border-radius: 7px; font-size: 0.85rem;
}
.smart-more-item:hover { background: var(--hh-surface-2); }
.smart-more-item b { font-family: var(--hh-font-cond); font-size: 1.15rem; font-variant-numeric: tabular-nums; }

/* Chatter */
.chat-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.chat-title { font-family: var(--hh-font-cond); font-size: 1.2rem; font-weight: 700; }
.chat-box { width: 100%; min-height: 62px; resize: vertical; }
.chat-send { margin-top: 6px; display: flex; justify-content: flex-end; gap: 6px; }
.chat-list { margin-top: 14px; max-height: 460px; overflow-y: auto; }
.chat-item { padding: 10px 0; border-top: 1px solid var(--hh-line); }
.chat-item:first-child { border-top: none; }
.chat-who { font-size: 0.82rem; font-weight: 800; }
.chat-when { font-size: 0.7rem; color: var(--hh-dim); font-weight: 600; }
.chat-body { font-size: 0.86rem; color: var(--hh-ink-3); white-space: pre-wrap; margin-top: 3px; }
.chat-change { font-size: 0.82rem; color: var(--hh-ink-3); margin-top: 3px; }
.chat-change .cf { font-weight: 700; }
.chat-old { color: var(--hh-dim); text-decoration: line-through; }
.chat-new { color: var(--hh-green-dp); font-weight: 700; }
.chat-kind {
  font-size: 0.6rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--hh-muted); border: 1px solid var(--hh-line); border-radius: 999px; padding: 1px 7px;
}
.chat-empty { color: var(--hh-dim); font-size: 0.85rem; padding: 18px 0; }

.action-row { display: flex; gap: 0.55rem; flex-wrap: wrap; margin-bottom: 0.3rem; }
.action-row .hh-btn { min-height: 40px; }
.soon-tag {
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--hh-dim); border: 1px dashed var(--hh-field-line);
  border-radius: 999px; padding: 2px 8px; align-self: center;
}

.detail-tabs {
  display: flex; border-bottom: 2px solid var(--border);
  margin: 1.1rem 0 1.3rem; overflow-x: auto; gap: 0;
}
.detail-tab {
  padding: 0.6rem 1.15rem; border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: 0.9rem; font-weight: 700; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -2px; white-space: nowrap;
  transition: color .15s;
}
.detail-tab:hover { color: var(--text); }
.detail-tab.active { color: var(--hh-green); border-bottom-color: var(--hh-green); }

/* General Info form */
.gi-layout {
  display: grid; grid-template-columns: 1fr 300px; gap: 1.5rem 2rem;
  align-items: start;
}
@media (max-width: 820px) { .gi-layout { grid-template-columns: 1fr; } }

.gi-col { display: flex; flex-direction: column; gap: 1rem; }

.form-group { display: flex; flex-direction: column; gap: 0.28rem; }

.checkbox-row {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.55rem 0;
}
.checkbox-row input[type=checkbox] {
  width: 17px; height: 17px; accent-color: var(--primary);
  cursor: pointer; flex-shrink: 0;
}
.checkbox-row span { font-size: 0.92rem; font-weight: 600; }

.gi-image-area {
  width: 100%; aspect-ratio: 4/3; min-height: 160px;
  background: linear-gradient(135deg, var(--hh-mint-pale) 0%, #dfe9e5 100%);
  border: 1px dashed #a7d9d4; border-radius: 9px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--dim); gap: 0.4rem; text-align: center; padding: 1rem;
}
.gi-image-area span { font-size: 0.74rem; color: var(--dim); line-height: 1.4; }

.detail-save-bar {
  margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 0.6rem; align-items: center;
}
.detail-save-status { font-size: 0.82rem; color: var(--muted); margin-right: auto; }

.tab-stub {
  padding: 2.8rem 1rem; text-align: center; color: var(--muted);
  font-size: 0.88rem; background: var(--surface-2);
  border-radius: 9px; border: 1px dashed var(--border);
}

/* ── Inline form feedback ────────────────────────────────────────────────────
   Shared so the name-first create step can report a clash on the field on both
   catalogs. inventory.html defines its own copy inline and keeps winning there;
   this exists for pages that never had one. */
.result-line {
  margin-top: 0.9rem; padding: 0.65rem 0.85rem; border-radius: 8px;
  font-size: 0.88rem; font-weight: 700; display: none;
}
.result-line.ok  { display: block; background: var(--green-bg, #e9f2ef); color: var(--green, #2f6b5c); border: 1px solid var(--hh-mint-line, #cfe3dc); }
.result-line.err { display: block; background: var(--red-bg, #fdf1ee); color: var(--red, #a5442c); border: 1px solid #f0c4b4; }
.form-hint { font-size: 0.78rem; color: var(--muted, #7b8285); line-height: 1.4; }