:root {
  --bg: #0f141c;
  --panel: #161e2b;
  --panel-2: #1c2636;
  --border: #2a3547;
  --text: #e6edf3;
  --muted: #8b98ab;
  --accent: #4f8cff;
  --good: #3fb950;
  --warn: #d29922;
  --bad: #f85149;
  --sample: #b18cff;
  --confirmed: #3fb950;
  --projected: #d29922;
  --estimated: #8b98ab;
  --radius: 10px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
}

.app {
  display: grid;
  grid-template-columns: 172px 1fr;
  height: 100vh;
  overflow: hidden;
  transition: grid-template-columns .2s ease;
}
.app-collapsed {
  grid-template-columns: 52px 1fr;
}

/* ---------- Sidebar ---------- */
.sidebar {
  background: var(--panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
  gap: 14px;
  overflow-y: auto;
  min-width: 0;
}
.app-collapsed .sidebar { min-width: 52px; padding: 16px 8px; }
.app-collapsed .brand-name,
.app-collapsed .brand-mode,
.app-collapsed .nav-link-text,
.app-collapsed .sidebar-foot { display: none; }
.app-collapsed .nav-link { justify-content: center; padding: 9px 4px; font-size: 18px; }
.app-collapsed .brand { justify-content: center; }
.app-collapsed .toggle-btn { transform: rotate(180deg); }
.brand { display: flex; align-items: center; justify-content: space-between; }
.brand-name { font-weight: 700; font-size: 16px; letter-spacing: .2px; white-space: nowrap; overflow: hidden; }
.brand-mode {
  font-size: 11px; font-weight: 700; letter-spacing: .5px;
  color: #1a1206; background: var(--sample);
  padding: 2px 8px; border-radius: 20px; white-space: nowrap;
}
.toggle-btn {
  appearance: none; border: 0; background: transparent;
  color: var(--muted); cursor: pointer;
  padding: 4px 6px; border-radius: 6px;
  font-size: 14px; line-height: 1; flex-shrink: 0;
  transition: color .15s, transform .2s;
}
.toggle-btn:hover { color: var(--text); background: var(--panel-2); }
.toggle-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.nav-link {
  appearance: none; border: 0; background: transparent;
  color: var(--muted); text-align: left; cursor: pointer;
  padding: 9px 12px; border-radius: 8px; font-size: 14px;
  font-family: inherit; position: relative;
  display: flex; align-items: center; gap: 10px;
}
.nav-link:hover { background: var(--panel-2); color: var(--text); }
.nav-link.active { background: var(--accent); color: #fff; font-weight: 600; }
.nav-link-text { white-space: nowrap; overflow: hidden; }
.nav-link-icon { font-size: 18px; flex-shrink: 0; width: 24px; text-align: center; }
/* Tooltip for collapsed state */
.nav-link .tooltip {
  display: none; position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
  background: var(--panel-2); color: var(--text);
  padding: 4px 10px; border-radius: 6px; font-size: 12px;
  white-space: nowrap; pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.3); z-index: 50;
}
.nav-link .tooltip::before {
  content: ''; position: absolute; left: -4px; top: 50%; transform: translateY(-50%);
  border: 4px solid transparent; border-right-color: var(--panel-2);
}
.app-collapsed .nav-link { padding: 9px 4px; font-size: 18px; justify-content: center; }
.app-collapsed .nav-link:hover .tooltip,
.app-collapsed .nav-link:focus .tooltip { display: inline-block; }
.sidebar-foot { border-top: 1px solid var(--border); padding-top: 10px; }
.sidebar-foot { white-space: nowrap; }
.data-date { font-size: 12px; color: var(--muted); display: block; }

/* ---------- Main ---------- */
.main { overflow-y: auto; padding: 18px 22px 40px; }

/* ---------- Sample-data banner ---------- */
.banner {
  display: none;
  align-items: center;
  gap: 10px;
  background: linear-gradient(90deg, #2a1f45, #241a3a);
  border: 1px solid #5b3fa0;
  color: #e7d9ff;
  padding: 10px 16px;
  border-radius: var(--radius);
  margin-bottom: 18px;
  font-weight: 600;
}
.banner.show { display: flex; }
.banner .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--sample); box-shadow: 0 0 8px var(--sample);
}
.banner .label { letter-spacing: 2px; color: var(--sample); }
.banner .note { font-weight: 400; color: #c9b8f0; font-size: 13px; }

/* Live-data banner */
.banner-live .dot {
  background: var(--good); box-shadow: 0 0 8px var(--good);
}
.banner-live .label { color: var(--good); }
.banner-live .note { color: #a8e6cf; }

/* Development copy (night, owner 2026-10-23): amber, never the live green */
.banner-dev { background: linear-gradient(90deg, #3b2a0c, #2f220b); border-color: #b45309; color: #fde7c2; }
.banner-dev .dot { background: #f59e0b; box-shadow: 0 0 8px #f59e0b; }
.banner-dev .label { color: #f59e0b; }
.banner-dev .note { color: #f3d9a4; }

/* ---------- Cards & layout ---------- */
.view { display: flex; flex-direction: column; gap: 18px; }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.cards.three { grid-template-columns: repeat(3, 1fr); }
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.card .k { color: var(--muted); font-size: 12px; text-transform: uppercase;
  letter-spacing: .6px; margin-bottom: 6px; }
.card .v { font-size: 24px; font-weight: 700; }
.card .s { color: var(--muted); font-size: 13px; margin-top: 4px; }
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.panel h2 {
  margin: 0 0 12px; font-size: 16px; font-weight: 700;
  display: flex; align-items: center; gap: 10px;
}
.panel h2 .sub { color: var(--muted); font-size: 12px; font-weight: 400; }

/* ---------- Tables ---------- */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: .4px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr:hover td { background: rgba(79, 140, 255, .04); }
.muted { color: var(--muted); }
.small { font-size: 12px; }

/* ---------- Tier badges ---------- */
.tier {
  display: inline-block; padding: 2px 9px; border-radius: 20px;
  font-size: 11px; font-weight: 700; letter-spacing: .3px;
  border: 1px solid transparent; white-space: nowrap;
}
.tier-confirmed { color: var(--confirmed); border-color: var(--confirmed);
  background: rgba(63, 185, 80, .12); }
.tier-projected { color: var(--projected); border-color: var(--projected);
  background: rgba(210, 153, 34, .12); }
.tier-estimated { color: var(--estimated); border-color: var(--estimated);
  background: rgba(139, 152, 171, .12); }
.tier-fee { color: var(--accent); border-color: var(--accent);
  background: rgba(99, 144, 194, .12); }
.tier-vat { color: var(--muted, #8a93a6); border-color: var(--muted, #8a93a6); }
.tier-fees_unknown { color: var(--muted); border-color: var(--muted);
  background: rgba(120, 120, 120, .1); }

/* ---------- Forms / buttons ---------- */
label { font-size: 12px; color: var(--muted); display: block; margin: 10px 0 4px; }
input, select {
  width: 100%; background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px; font-size: 14px; font-family: inherit;
}
input:focus, select:focus { outline: none; border-color: var(--accent); }
.btn {
  appearance: none; border: 1px solid var(--border);
  background: var(--panel-2); color: var(--text);
  padding: 9px 16px; border-radius: 8px; cursor: pointer;
  font-size: 14px; font-family: inherit; font-weight: 600;
}
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; }
.form-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.form-grid label { margin-top: 0; }
.form-grid-creds { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.form-grid-creds label { margin-top: 0; }
.form-grid-creds .sub { font-size: 11px; color: var(--muted); }
.creds-actions { margin-top: 14px; display: flex; align-items: center; }
.cred-input { position: relative; display: flex; align-items: center; }
.cred-input input { flex: 1; padding-right: 38px; }
.cred-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); background: none; border: 0;
  padding: 4px; color: var(--muted); cursor: pointer; line-height: 0; border-radius: 4px; }
.cred-eye:hover, .cred-eye:focus-visible { color: var(--text, inherit); }
.cred-eye.on { color: var(--good); }
.cred-saved { margin-top: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ---------- Health / errors ---------- */
.kv { display: grid; grid-template-columns: 260px 1fr; gap: 6px 16px; }
.kv .k { color: var(--muted); font-size: 13px; }
.kv .v { font-size: 13px; word-break: break-all; }
.chip {
  display: inline-block; padding: 2px 8px; border-radius: 6px;
  font-size: 11px; font-weight: 600;
}
.chip.ok { background: rgba(63,185,80,.15); color: var(--good); }
.chip.err { background: rgba(248,81,73,.15); color: var(--bad); }
.chip.warn { background: rgba(210,153,34,.15); color: var(--warn); }
.toast {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  background: var(--panel-2); border: 1px solid var(--border);
  padding: 10px 16px; border-radius: 8px; color: var(--text);
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.toast.show { opacity: 1; }
.toast.err { border-color: var(--bad); }

.empty { color: var(--muted); font-style: italic; padding: 8px 0; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; height: auto; overflow: visible; }
  .sidebar { flex-direction: row; align-items: center; flex-wrap: wrap;
    border-right: 0; border-bottom: 1px solid var(--border); }
  .nav { flex-direction: row; flex-wrap: wrap; }
  .sidebar-foot { border-top: 0; }
  .cards, .cards.three, .form-grid { grid-template-columns: 1fr 1fr; }
  .main { padding: 12px; }
}
@media (max-width: 560px) {
  .cards, .cards.three, .form-grid { grid-template-columns: 1fr; }
  .kv { grid-template-columns: 1fr; }
}

/* --- T1d Sellerboard-style tile-grid dashboard --- */
.main-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 2px;
  padding-top: 2px;
}
.main-asof { color: var(--muted); font-size: 12px; }

/* Period selector row */
.main-period { display: flex; align-items: flex-end; gap: 8px; }
.main-period label {
  font-size: 12px; color: var(--muted); margin: 0; white-space: nowrap;
}
.main-period select,
.main-period input[type="date"] {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 13px;
  font-family: inherit;
  height: 32px;
}
.main-period select:focus,
.main-period input:focus {
  outline: none;
  border-color: var(--accent);
}
.main-period input[type="date"] { max-width: 150px; }
.main-date { display: none; }
.main-date.show { display: block; }

/* ----- Tile grid — 5 equal columns on desktop ----- */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.tile {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .12s, background .12s, box-shadow .12s;
  min-width: 0;
  overflow: hidden;
}
.tile:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.tile.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 2px 16px rgba(79,140,255,.15);
}

/* Coloured header strip */
.tile-hdr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 10px 12px 8px;
  color: #fff;
  font-weight: 700;
}
.tile-hdr .tile-label {
  display: block;
  font-size: 15px;
  letter-spacing: .2px;
}
.tile-hdr .tile-date {
  font-size: 11px;
  font-weight: 400;
  opacity: .85;
  margin-top: 1px;
}
.tile-hdr .tier {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3px;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.15);
  color: #fff;
}
.tile-hdr .tile-live {
  width: 8px; height: 8px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 6px #fff;
  animation: pulse 2s ease-in-out infinite;
  flex-shrink: 0;
  margin-top: 2px;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}

/* Tile body */
.tile-body { padding: 10px 12px 12px; }

/* Sales headline — large */
.tile-sales-head {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tile-sales {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 8px;
}
.tile-pct {
  font-size: 12px;
  font-weight: 600;
}
.tile-pct.up { color: var(--good); }
.tile-pct.down { color: var(--bad); }
.tile-profit .tile-netpct {
  font-size: 12px;
  font-weight: 600;
  margin-left: 4px;
}
.tile-netpct.up { color: var(--good); }
.tile-netpct.down { color: var(--bad); }
.tile-range {
  color: var(--muted);
  font-size: 11px;
  margin-bottom: 4px;
}

/* Sub-stats 2×2 grid */
.tile-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
  font-size: 12px;
  margin-bottom: 6px;
}
.tile-stat-label {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.tile-stat-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.tile-stat-value.warn { color: var(--warn); }

/* Net profit */
.tile-profit {
  font-size: 16px;
  font-weight: 700;
  border-top: 1px solid var(--border);
  padding-top: 6px;
  margin-top: 4px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
}
.tile-profit .profit-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
  margin-right: 4px;
}

/* More link */
.tile-more {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
  text-align: center;
}
.tile-more:hover { text-decoration: underline; }

/* ----- Today tile highlight ----- */
.tile-today .tile-hdr {
  background: var(--today-hdr, #4f8cff) !important;
}

/* ----- Yesterday tile ----- */
.tile-yesterday .tile-hdr {
  background: var(--yest-hdr, #5a9fad) !important;
}

/* ----- MTD tile ----- */
.tile-mtd .tile-hdr {
  background: var(--mtd-hdr, #45a89e) !important;
}

/* ----- This month / forecast ----- */
.tile-forecast .tile-hdr {
  background: var(--fcst-hdr, #45a87a) !important;
}

/* ----- Last month ----- */
.tile-last-month .tile-hdr {
  background: var(--lm-hdr, #48987a) !important;
}

/* Generic past/other */
.tile-default .tile-hdr {
  background: var(--border);
}

/* ----- Pane (bottom full-width table) ----- */
.pane { margin-top: 4px; }
.pane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.pane-title { font-weight: 700; font-size: 15px; }

.pane-tabs { display: flex; gap: 4px; }
.pane-tab {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 5px 14px;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  font-weight: 500;
}
.pane-tab:hover { border-color: var(--accent); }
.pane-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.pane-ctrls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pane-ctrls .group-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .3px;
}
.pane-ctrls select {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  font-family: inherit;
}
.pane-ctrls select:focus {
  outline: none;
  border-color: var(--accent);
}

/* Column visibility popover */
.col-vis-trigger {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  color: var(--muted);
  flex-shrink: 0;
}
.col-vis-trigger:hover { border-color: var(--accent); color: var(--text); }
.col-vis-trigger svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.col-vis-popover {
  position: fixed;          /* placed by placeColVisPopover(): always fully on screen */
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
  z-index: 100;
  width: max-content;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
  display: none;
}
.col-vis-inner { display: flex; flex-direction: column; gap: 4px; }
.col-vis-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  color: var(--muted); letter-spacing: .5px; margin-bottom: 4px;
}
.col-vis-item {
  /* one line per item: checkbox left, label right, lined up in one column */
  display: grid;
  grid-template-columns: 16px max-content;
  column-gap: 8px;
  align-items: center;
  margin: 0;
  padding: 3px 0;
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
  cursor: pointer;
}
.col-vis-item input { width: 16px; height: 16px; margin: 0; padding: 0; accent-color: var(--accent); }
.col-vis-label { line-height: 16px; }
/* Movable items (Products, owner 2026-10-07): drag handle | checkbox | label | up / down */
.col-vis-item.movable { grid-template-columns: 12px 16px minmax(max-content, 1fr) 20px 20px; }   /* arrows line up on the right */
.col-vis-handle { cursor: grab; color: var(--muted); font-size: 12px; line-height: 16px; text-align: center; }
.col-vis-handle::before { content: "⋮⋮"; letter-spacing: -2px; }
.col-vis-up, .col-vis-down {
  width: 20px; height: 18px; padding: 0; margin: 0; border: 1px solid var(--border); border-radius: 4px;
  background: var(--panel-2); color: var(--muted); font-size: 9px; line-height: 16px; cursor: pointer; font-family: inherit;
}
.col-vis-up::before { content: "▲"; }
.col-vis-down::before { content: "▼"; }
.col-vis-up:hover, .col-vis-down:hover { border-color: var(--accent); color: var(--text); }
.col-vis-item.dragging { opacity: .5; }
.col-vis-item.drop-target { box-shadow: inset 0 2px 0 var(--accent); }
.col-vis-actions {
  border-top: 1px solid var(--border);
  padding-top: 6px;
  margin-top: 4px;
}
.col-vis-actions button {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  padding: 3px 10px;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
}
.col-vis-actions button:hover { border-color: var(--accent); }

/* Column visibility sections: Standard / Extended */
.col-vis-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.col-vis-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: .6px;
  padding: 4px 0 2px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}

/* Every cell's content is centred in its row (owner 2026-10-08), in the Inventory, Products and Order Items tables
   alike; only the image and the product cell's lines stay at the top (their own rules below). */
.inv-rows td, .pane-table td { vertical-align: middle; }

/* Pane tile label */
.pane-tile-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  flex-shrink: 0;
}

/* Sortable header */
th.sort { cursor: pointer; user-select: none; }
th.sort:hover { color: var(--accent); }
th.sort::after { content: ' ⇅'; opacity: .2; margin-left: 3px; font-size: 11px; }
th.sort.asc::after { content: ' ▲'; opacity: 1; }
th.sort.desc::after { content: ' ▼'; opacity: 1; }
/* Number headers (owner 2026-10-07): the sort icon sits at the cell's left edge, so the header text ends at the right
   edge, level with the numbers below. */
th.num.sort { position: relative; padding-left: 14px; }
th.num.sort::after { position: absolute; left: 2px; top: 50%; transform: translateY(-50%); margin-left: 0; }
/* A long header over small numbers wraps onto two lines instead of widening the column. */
th.narrow-head { white-space: normal; line-height: 1.2; width: 1%; }   /* 1%: takes no share of spare table width */

/* Pane table — rows */
.pane-table-wrap { overflow-x: auto; }
.pane-table th, .pane-table td {
  padding: 2px 6px;
  font-size: 12px;
  white-space: nowrap;
  line-height: 1.4;
}
.pane-table th {
  font-size: 9px;
  letter-spacing: .4px;
  padding-top: 4px;
  padding-bottom: 3px;
}

/* Pane table — standalone image column (matches inventory layout) */
.pane-table .prod-img-col, .inv-rows .prod-img-col {
  width: 66px;
  padding: 0;
  vertical-align: top;
  padding-top: 2px;
}
.pane-table .prod-img-cell, .inv-rows .prod-img-cell {
  width: 66px;
  padding: 0;
  vertical-align: top;
  padding-top: 2px;
}
.pane-table .prod-img, .inv-rows .prod-img {
  display: inline-block;
  width: 56px;    /* the height of the three product-cell lines (owner 2026-10-06) */
  height: 56px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  vertical-align: top;
}
.pane-table .prod-img-placeholder, .inv-rows .prod-img-placeholder {
  font-size: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--panel-2);
}

/* Pane table — product cell (td wrapper matches inventory layout) */
.pane-table .product-cell,
.pane-table .prod-product-cell,
.inv-rows .product-cell {
  min-width: 220px;
  max-width: 320px;
  padding-left: 0;
}
.pane-table .prod-cell, .inv-rows .prod-cell {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pane-table .prod-row, .inv-rows .prod-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.pane-table .prod-info, .inv-rows .prod-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pane-table .prod-ident, .inv-rows .prod-ident {
  font-size: 12px;
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
}
.pane-table .prod-title, .inv-rows .prod-title {
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stock-warn { color: var(--bad); font-weight: 700; }

.scope-banner {
  background: var(--panel-2);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 7px 12px;
  margin-bottom: 10px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.scope-banner a { color: var(--accent); margin-left: auto; cursor: pointer; }

/* Breakdown */
.brk { display: flex; flex-direction: column; gap: 1px; }
.brk-window { margin-bottom: 4px; }
.brk-line, .brk-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 3px 6px;
  border-radius: 4px;
  font-size: 12px;
}
.brk-line.brk-sub { padding-left: 1.5rem; color: var(--muted); }
.brk-line.brk-total {
  font-weight: 700;
  font-size: 13px;
  border-top: 1px solid var(--border);
  margin-top: 3px;
  padding-top: 5px;
}
.brk-line.brk-ratio { color: var(--muted); font-size: 11px; }
.brk-label { flex: 1; min-width: 0; }
.brk-value { font-variant-numeric: tabular-nums; white-space: nowrap; }
.brk-group { cursor: pointer; font-weight: 600; background: var(--panel-2); font-size: 12px; }
.brk-group:hover { border-color: var(--accent); }
.brk-arrow { width: 14px; display: inline-block; color: var(--muted); }
.brk-group-wrap.collapsed .brk-children { display: none; }

.brk-nsc {
  margin-top: 8px;
  border-top: 1px solid var(--border);
  padding-top: 4px;
}
.brk-nsc-title { font-weight: 600; margin-bottom: 2px; font-size: 12px; }
.brk-nsc-line { display: flex; gap: 6px; align-items: center; padding: 1px 6px; font-size: 11px; }
.brk-nsc-line .brk-value { margin-left: auto; }

.chip.state-confirmed, .chip.state-adjusted {
  background: rgba(63,185,80,.15); color: var(--good);
}
.chip.state-projected { background: rgba(210,153,34,.15); color: var(--warn); }
.chip.state-cancelled { background: rgba(248,81,73,.15); color: var(--bad); }

/* Responsive */
@media (max-width: 1400px) {
  .tile-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .tile-grid { grid-template-columns: 1fr 1fr; }
  .pane-tabs { flex-wrap: wrap; }
  .tile-stats { grid-template-columns: 1fr 1fr; }
}

/* Cost of goods source (spec/02b §5c) */
.tier-cogs { color: var(--muted, #8a93a6); border-color: var(--muted, #8a93a6); }
.tier-cogs-missing { color: var(--warn, #d08a00); border-color: var(--warn, #d08a00); }
#csv-template { color: var(--accent); font-weight: 600; }
.tier-price-unknown { color: var(--warn, #d29922); border-color: var(--warn, #d29922); }
.tier-refund { color: var(--bad, #f85149); border-color: var(--bad, #f85149); }

/* Order Items layout (spec/02b §4a, Sellerboard's): status badge on line 1, date + COGS on line 2 */
.order-cell .oline1 { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.order-cell .oline2 { margin-top: 2px; white-space: nowrap; }
.ostatus { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 1px 7px;
  border-radius: 10px; border: 1px solid currentColor; }
.ostatus-icon { font-weight: 800; }
.ostatus-unshipped { color: #f0883e; background: rgba(240, 136, 62, .12); }
.ostatus-shipped { color: var(--good, #3fb950); background: rgba(63, 185, 80, .12); }
.ostatus-refunded { color: var(--bad, #f85149); background: rgba(248, 81, 73, .12); }
.ostatus-cancelled { color: var(--muted, #8b98ab); background: rgba(139, 152, 171, .12); }
.ocogs { font-weight: 500; }
.ocogs-mark { font-size: 10px; color: var(--muted, #8b98ab); border: 1px solid currentColor; border-radius: 6px; padding: 0 4px; }
.ocogs-missing { color: var(--warn, #d29922); }
.tile-sales-head { flex-wrap: wrap; row-gap: 4px; }
.tile-sales-head .tier-price { white-space: normal; }
.prod-cell .pline3 { display: block; margin-top: 2px; }

/* Inactive SKUs (spec/02b §4c) */
.inactive-bar { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.inactive-toggle.on { background: var(--accent, #4f8cff); color: #fff; border-color: var(--accent, #4f8cff); }
.inactive-section { margin-top: 18px; padding-top: 10px; border-top: 1px dashed var(--muted, #8b98ab); }
.inactive-title { font-size: 13px; color: var(--muted, #8b98ab); margin: 0 0 8px; }
tr.inactive { opacity: .55; }
.tier-inactive { color: var(--muted, #8b98ab); border-color: var(--muted, #8b98ab); }
.btn.tiny { font-size: 10px; padding: 1px 6px; margin-left: 4px; }
.fnsku { color: var(--muted, #8b98ab); font-weight: 500; }

/* BSR cell (spec/02b §4e) */
/* BSR: a fixed ~150 px column (138 px + cell padding; owner 2026-10-07, was 200), two lines, never wrapped; names trimmed with "…", ranks and arrow never (owner 2026-10-07) */
.bsr-col { text-align: left; }
th.bsr-col { width: 1%; }   /* fixed: takes no share of spare table width */
.bsr-cell { width: 138px; line-height: 1.25; white-space: nowrap; overflow: hidden; }
.bsr-l1, .bsr-l2 { display: flex; min-width: 0; }
.bsr-l1 .bsr-rank { font-weight: 600; }
.bsr-rank { flex: none; }
.bsr-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bsr-trend { font-size: 0.8em; }
.bsr-trend.up { color: var(--good); }
.bsr-trend.down { color: var(--bad); }
.bsr-trend.flat { color: var(--muted); }

/* Buy Box cell (spec/02b §4f) */
.bb-col { text-align: center; }
.bb { font-weight: 800; cursor: default; font-size: 15px; }   /* thick ticks / cross (owner 2026-10-25) */
.bb-tick { color: var(--good); }
.bb-cross { color: var(--bad); }
.bb-share { color: var(--warn); }   /* sharing the buy box in rotation (owner 2026-10-25) */
.bb-none { color: var(--muted); }

/* Health API budget bars (spec/03 §3) */
.budget-bar { display: inline-block; width: 70%; height: 8px; background: var(--border, #ddd); border-radius: 4px; overflow: hidden; vertical-align: middle; margin-right: 6px; }
.budget-fill { height: 100%; }
.budget-fill.good { background: var(--good); }
.budget-fill.warn { background: var(--warn); }
.budget-fill.bad { background: var(--bad); }

/* "More" side panel (owner 2026-10-07; Sellerboard's, reference/more*.jpg) */
.more-panel {
  position: fixed; top: 8px; right: 8px; bottom: 8px; width: min(380px, calc(100vw - 16px));
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: -6px 0 24px rgba(0,0,0,.35); z-index: 200; overflow-y: auto; overflow-x: hidden; display: none;
  font-size: 13px;
}
.more-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 12px 14px 10px;
  border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel); z-index: 1; }
.more-title { font-size: 15px; font-weight: 600; }
.more-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.more-close { background: none; border: none; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 2px; width: auto; }
.more-close:hover { color: var(--text); }
.more-sec { border-bottom: 1px solid var(--border); }
.more-head, .more-line { display: grid; grid-template-columns: 14px minmax(0, 1fr) max-content; column-gap: 6px; align-items: center; padding: 5px 14px 5px 8px; }
.more-line { padding-top: 3px; padding-bottom: 3px; grid-template-columns: 14px minmax(0, 1fr) max-content; }
.more-line::before { content: ""; }
.more-line .more-name { padding-left: 8px; color: var(--muted); }
.more-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.more-val { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.more-sec.expandable > .more-head { cursor: pointer; }
.more-sec.expandable > .more-head:hover .more-name { color: var(--accent); }
.more-chev { color: var(--muted); display: inline-block; transition: transform .15s; transform: rotate(90deg); text-align: center; font-size: 16px; line-height: 14px; }
.more-sec.collapsed .more-chev { transform: rotate(0deg); }
.more-sec.collapsed > .more-children { display: none; }
.more-children { padding-bottom: 4px; }
.more-sec.strong .more-name, .more-sec.strong .more-val { font-weight: 700; }
.more-sec.metric { background: var(--panel-2); }
.more-sec.metric > .more-head .more-name, .more-sec.metric > .more-head .more-val { font-weight: 600; }

/* Order Items: a product's Amazon charge (owner 2026-10-07) */
.ostatus-charge { color: var(--muted); border-color: var(--border); }
.ocharge { font-weight: 600; }

/* Buy box % on the Inventory page (owner 2026-10-07) */
.bbp { line-height: 1.25; white-space: nowrap; text-align: right; }
th.bbp-col { width: 1%; white-space: nowrap; }   /* one line like the other headers (owner 2026-10-08); takes no spare width */
.bbp-down { color: var(--bad); font-size: .85em; }

/* Inventory rows = the Products table rows (owner 2026-10-08): the image and product cells use the Products table's
   cell box (2 px padding, 12 px / 1.4), so both rows are the same height with the same 56 px image. */
.inv-rows td.prod-img-cell, .inv-rows td.product-cell { padding-top: 2px; padding-bottom: 2px; font-size: 12px; line-height: 1.4; white-space: nowrap; }
.inv-rows th.prod-img-col { padding-top: 8px; }
.inv-line1 { display: flex; align-items: center; gap: 6px; min-width: 0; height: calc(12px * 1.4); }
.inv-line1 .prod-ident { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.inv-acts { flex: none; display: inline-flex; align-items: center; gap: 4px; }
.inv-acts .btn.tiny { margin-left: 0; line-height: 1.2; }
.inv-note { display: block; font-size: 12px; line-height: calc(12px * 1.4); min-height: calc(12px * 1.4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Inventory table header (owner 2026-10-08): title left; "Show inactive SKUs", the column icon and Group at the top
   right, laid out as the front page's bottom panel (.pane-header). */
.inv-header h2 { margin: 0; }
/* Inventory text = the Products table's (owner 2026-10-08): 9 px headers, 12 px cells. */
.inv-rows th { font-size: 9px; letter-spacing: .4px; white-space: nowrap; }
.inv-rows td { font-size: 12px; }
/* Inventory summary tiles (owner 2026-10-08): the dashboard tile, compact - header bar + two rows of figures. */
.inv-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.inv-tile { cursor: default; }
.inv-tile:hover { border-color: var(--border); box-shadow: none; }
.inv-tile .tile-hdr { padding: 6px 12px; }
.inv-tile .tile-hdr .tile-label { font-size: 13px; }
.inv-tile-body { padding: 7px 12px 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.inv-fig-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }
.inv-fig-value { font-size: 15px; font-weight: 700; white-space: nowrap; }
.inv-fig-warn { color: var(--warn); font-size: 12px; cursor: help; }
.inv-tile-restock .tile-hdr { background: linear-gradient(90deg, #4b2bb8, #6d46e0); }
.inv-tile-total .tile-hdr { background: var(--today-hdr, #4f8cff); }
.inv-tile-fba .tile-hdr { background: var(--yest-hdr, #5a9fad); }
.inv-tile-warehouse .tile-hdr { background: var(--mtd-hdr, #45a89e); }
@media (max-width: 900px) { .inv-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Inventory search (owner 2026-10-08): one box for SKU, ASIN and FNSKU in the table's header bar; a small "x" clears it. */
.inv-search-wrap { position: relative; flex: 0 1 320px; min-width: 180px; }
.inv-search-wrap input { width: 100%; padding: 5px 26px 5px 9px; font-size: 12px; background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px; }
.inv-search-wrap input:focus { outline: none; border-color: var(--accent); }
.inv-search-clear { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; padding: 0;
  border: none; background: none; color: var(--muted); font-size: 15px; line-height: 18px; cursor: pointer; }
.inv-search-clear:hover { color: var(--text); }
/* Inventory sort markers: an element right beside the header name (number headers: just before it). */
.inv-rows th.sort::after { content: none; }
.inv-rows th.num.sort { padding-left: 6px; }
.sort-mark { font-size: inherit; opacity: .35; margin: 0 2px; }   /* the header's size: same line, narrow columns stay narrow */
.sort-mark::before { content: attr(data-mark); }
.sort-mark.on { opacity: 1; }
/* Days left (owner 2026-10-08): a large solid rounded badge, the number white and centred; colours from DAYS_LEFT (app.js). */
.days-col { text-align: center; }
.days-badge { display: inline-block; min-width: 44px; padding: 3px 10px; border-radius: 13px; font-size: 13px; font-weight: 700;
  line-height: 20px; color: #fff; text-align: center; }
.days-red { background: var(--bad); }
.days-amber { background: var(--warn); }
.days-green { background: var(--good); }
/* Products pane line 3: "FBA stock: n" in its Days left colour (owner 2026-10-08); the rest of the line stays grey. */
.fba-stock.days-text-red { color: var(--bad); }
.fba-stock.days-text-amber { color: var(--warn); }
.fba-stock.days-text-green { color: var(--good); }
.fba-stock { cursor: help; }
/* Tile margin, right of Net profit and its % change. */
.tile-margin { margin-left: 2px; white-space: nowrap; font-size: 12px; font-weight: 600; }
.tile-margin .profit-label { font-size: 10px; }
/* Net profit, its % change and the margin stay together on one line (the warnings may wrap below). */
.tile-np { display: inline-flex; flex-wrap: wrap; align-items: baseline; column-gap: 4px; white-space: nowrap; }   /* never cut off: the margin drops below only if a tile is too narrow */
/* With one column per stock bucket the number columns are tighter (owner 2026-10-08), so the table fits the page. */
.inv-rows td.num { padding-left: 5px; padding-right: 5px; }
.inv-rows th.num.sort { padding-left: 4px; padding-right: 5px; }
.inv-rows .product-cell { max-width: 290px; }   /* Inventory: a little narrower than Products' 320 px, so every bucket fits */
.inv-rows td.bbp-col { padding-left: 6px; padding-right: 6px; }   /* Buy box %: as wide as its widest line (owner 2026-10-08) */
/* Column widths (owner 2026-10-08), Inventory, Products and Order Items: every column but Product is sized to its own
   content (width 1%: no share of spare width), so number columns are as narrow as their figures and header lines and
   Warehouse no wider than the rest. Product takes all the spare width: its title (line 2) adds nothing to the column's
   own width and fills whatever the column gets, so more of the title shows on a wider screen; lines 1 and 3 keep the
   column's minimum. (Warehouse had no width rule of its own: it was one of the unpinned columns sharing the spare.) */
.inv-rows th:not(.prod-product-col), .pane-table th:not(.prod-product-col) { width: 1%; }
.inv-rows .product-cell, .pane-table .product-cell { max-width: none; min-width: 0; }
.inv-rows .prod-title, .pane-table .prod-title { display: block; width: 0; min-width: 100%; }
/* Inventory: line 1 (ASIN · SKU · FNSKU + Hide) and the line-3 note would make Product's minimum ~375 px and push a
   15-column layout off the page; there the whole cell adds no width, with a 290 px minimum (the old size), and lines 1
   and 3 end in "…" only when the column is at that minimum. */
.inv-rows .product-cell > .prod-cell { display: block; width: 0; min-width: 100%; }
.inv-rows th.prod-product-col { min-width: 290px; }
/* API errors (owner 2026-10-08): one row per kind of error, its errors below it (click to open). */
#api-errors tr.err-group { cursor: pointer; }
#api-errors tr.err-group td { font-weight: 600; }
#api-errors .err-toggle { width: 14px; color: var(--muted); }
#api-errors .err-toggle::before { content: "▸"; }
#api-errors tr.err-group.open .err-toggle::before { content: "▾"; }
#api-errors tr.err-row td { background: var(--panel-2); }
#api-errors .err-msg { font-size: 11px; margin-top: 2px; }
.chip.muted-chip { background: rgba(139,152,171,.15); color: var(--muted); }

/* Shipments page (owner 2026-10-09, spec/02b §4u) */
.ship-summary { display: flex; gap: 16px; flex-wrap: wrap; margin: 4px 0 10px; font-size: 13px; }
.ship-summary .ship-short { color: var(--bad); font-weight: 600; cursor: help; }
.ship-summary .ship-over { color: var(--warn); font-weight: 600; cursor: help; }
#ship-table tr.ship-plan { cursor: pointer; }
#ship-table tr.ship-plan td { font-weight: 600; }
#ship-table tr.ship-plan td.sp-created, #ship-table tr.ship-plan td.sp-dest { font-weight: 400; }
#ship-table .ship-toggle { width: 14px; color: var(--muted); }
#ship-table tr.ship-plan .ship-toggle::before { content: "▸"; }
#ship-table tr.ship-plan.open .ship-toggle::before { content: "▾"; }
#ship-table tr.ship-shipment { cursor: pointer; }
#ship-table tr.ship-shipment .ss-plan { font-weight: 600; }
#ship-table tr.ship-shipment .ship-toggle::before { content: "▸"; }
#ship-table tr.ship-shipment.open .ship-toggle::before { content: "▾"; }
#ship-table tr.ship-shipment.in-group td.ss-id { padding-left: 18px; }
#ship-table tr.ship-group td { font-weight: 600; padding-top: 10px; }
#ship-table tr.ship-detail > td { background: var(--panel-2); padding: 6px 10px 12px 28px; }
#ship-table tr.flag-short > td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
#ship-table tr.flag-over:not(.flag-short) > td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.chip.flag-short { background: rgba(248,81,73,.15); color: var(--bad); cursor: help; }
.chip.flag-over { background: rgba(210,153,34,.15); color: var(--warn); cursor: help; }
#ship-table table.ship-skus, #ship-table table.ship-boxes, #ship-table table.ship-planned { width: 100%; margin: 4px 0 8px; }
#ship-table .sk-title { max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ship-table .sk-diff.short { color: var(--bad); font-weight: 700; cursor: help; }
#ship-table .sk-diff.over { color: var(--warn); font-weight: 700; cursor: help; }
#ship-table .bx-contents { white-space: normal; }
.ship-foot { margin-top: 10px; }
/* Boxes by their real centre (owner 2026-10-10) */
.ship-summary .ship-late, .ship-summary .ship-elsewhere { color: var(--bad); font-weight: 600; cursor: help; }
#ship-table .ss-sites { margin-top: 2px; color: var(--muted); white-space: normal; max-width: 460px; }
#ship-table .ss-sites .warn-text { color: var(--warn); font-weight: 600; }
#ship-table table.ship-skus th.site { cursor: pointer; white-space: nowrap; }
#ship-table table.ship-skus th.site div { white-space: normal; max-width: 72px; margin-left: auto; text-transform: none; }
#ship-table table.ship-skus .sk-title { max-width: 200px; }
#ship-table table.ship-boxes .bx-tracking a { color: var(--accent); }
#ship-table table.ship-boxes th.bx-sort-site::after { content: none; }
#ship-table table.ship-skus th.site:hover, #ship-table table.ship-skus th.site.active { color: var(--accent); }
#ship-table table.ship-skus th.site.active { box-shadow: inset 0 -2px 0 var(--accent); }
#ship-table td.sk-site { white-space: nowrap; }
#ship-table table.ship-skus th.site-other { cursor: help; white-space: nowrap; }
#ship-table td.sk-other { white-space: nowrap; cursor: help; font-style: italic; }
#ship-table table.ship-skus th.site, #ship-table td.sk-site { padding-left: 5px; padding-right: 5px; }
#ship-table td.sk-site.site-open { color: var(--warn); }
#ship-table td.sk-site.site-over { color: var(--warn); font-style: italic; }
#ship-table table.ship-boxes th.bx-sort-site { cursor: pointer; }
#ship-table .bx-booked { white-space: nowrap; }
#ship-table .bx-site { min-width: 110px; }
#ship-table .bx-flag { color: var(--bad); font-weight: 600; }
#ship-table table.ship-boxes tr.flag-late > td:first-child, #ship-table table.ship-boxes tr.flag-elsewhere > td:first-child { box-shadow: inset 3px 0 0 var(--bad); }

/* Inventory Sales/day popup chart (owner 2026-10-10) */
button.sd-open { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; }
.sc-pop { position: fixed; z-index: 60; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 28px rgba(0,0,0,.35);
          padding: 10px 12px 8px; width: 644px; color: var(--text); }
.sc-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.sc-head .sc-title { font-weight: 600; }
.sc-head .sc-total { font-weight: 700; font-size: 15px; }
.sc-head .sc-close { margin-left: auto; background: none; border: 0; color: var(--muted); font-size: 18px; cursor: pointer; line-height: 1; }
.sc-ctrls { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.sc-ctrls .sc-period.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.sc-ctrls #sc-by { width: auto; min-width: 0; padding: 3px 6px; }
.sc-ctrls .sc-period { white-space: nowrap; }
.sc-ctrls .sc-note { margin-left: auto; white-space: nowrap; }
.sc-avg-key { display: inline-block; width: 18px; border-top: 2px dashed var(--warn); vertical-align: middle; margin-right: 2px; }
.sc-svg .sc-bar { fill: var(--accent); }
.sc-svg .sc-bar.today { fill: var(--accent); opacity: .55; }
.sc-svg .sc-bar.hover { fill: #8cb4ff; opacity: 1; }
.sc-svg .sc-hit { cursor: crosshair; }
.sc-tip { position: absolute; pointer-events: none; z-index: 2; background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px;
          padding: 5px 8px; font-size: 12px; line-height: 1.4; white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.sc-tip .sc-tip-up { color: var(--good); }
.sc-tip .sc-tip-down { color: var(--bad); }
.sc-svg .sc-val { fill: var(--text); }
.sc-svg .sc-date { fill: var(--muted); }
.sc-svg .sc-price.up { fill: var(--good, #3fb950); }
.sc-svg .sc-price.down { fill: var(--bad); }
.sc-svg .sc-avg { stroke: var(--warn); stroke-width: 1.5; }
/* The product image keeps its 10 px gap before the text (owner 2026-10-10): the image column is exempt from the
   "width 1%" rule above, which had shrunk it to the 56 px image in Inventory and Products. */
.inv-rows th.prod-img-col, .pane-table th.prod-img-col, .inv-rows td.prod-img-cell, .pane-table td.prod-img-cell { width: 66px; min-width: 66px; }

/* Inventory Adjustments view (owner 2026-10-10) */
#inv-adj-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
#inv-adjust { margin: 4px 0 14px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); }
#inv-adjust .adj-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
#inv-adjust .adj-head .adj-period:first-of-type { margin-left: auto; }
#inv-adjust .adj-period.active { background: var(--accent); color: #fff; border-color: var(--accent); }
#inv-adjust .adj-summary { margin-bottom: 8px; color: var(--muted); }
#inv-adjust .adj-warn { color: var(--bad); font-weight: 600; }
#adj-table { width: 100%; }
#adj-table tr.adj-row { cursor: pointer; }
#adj-table tr.adj-row.flag-unresolved > td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
#adj-table .adj-title { max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#adj-table tr.adj-events > td { background: var(--panel); padding: 4px 10px 10px 18px; }
#adj-table table.adj-ev { width: 100%; }

/* ---------- Sign-in page and Account (owner 2026-10-11) ---------- */
.login-body { display: flex; min-height: 100%; }
.login-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.login-card { width: 100%; max-width: 380px; padding: 26px 26px 22px; }
.login-logo-tile { background: #fff; border-radius: 8px; padding: 12px 16px; margin: -4px 0 18px; display: flex; justify-content: center; }
.login-logo { display: block; width: 100%; max-width: 280px; height: auto; }
.login-brand { font-weight: 700; font-size: 15px; color: var(--muted); letter-spacing: .2px; }
.login-title { font-size: 22px; margin: 6px 0 14px; }
.login-card input[type="text"], .login-card input[type="password"] { width: 100%; }
.login-remember { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); margin: 14px 0 4px; cursor: pointer; }
.login-remember input { width: auto; margin: 0; }
.login-submit { width: 100%; margin-top: 14px; padding: 9px 12px; font-size: 15px; }
.login-back { margin-top: 10px; }
.login-error { color: var(--bad); font-size: 13px; min-height: 18px; margin-top: 12px; }
.login-setup { font-size: 13px; color: var(--muted); margin-top: 8px; }
.login-setup code { display: block; margin-top: 6px; padding: 8px; background: var(--panel-2); border-radius: 6px; color: var(--text);
  font-size: 12px; word-break: break-all; }
.acct-form { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)) auto; gap: 12px; align-items: end; }
.acct-form label { margin-top: 0; }
.acct-form[hidden], .totp-step[hidden] { display: none; }
.acct-form input { width: 100%; }
.acct-result { font-size: 13px; margin-left: 4px; }
.acct-result.ok { color: var(--good); }
.acct-result.err { color: var(--bad); }
#totp-qr svg { width: 200px; height: 200px; display: block; border-radius: 6px; }
.totp-step { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start; margin-top: 12px; }
.totp-secret { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; letter-spacing: 1px; word-break: break-all;
  background: var(--panel-2); padding: 6px 8px; border-radius: 6px; display: inline-block; }
#backup-codes { columns: 2; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; margin: 8px 0; padding-left: 22px; }
.nav-logout { margin-top: auto; }
.role-badge { margin-top: auto; align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .4px; color: var(--warn);
  border: 1px solid var(--warn); border-radius: 6px; padding: 2px 8px; }
.role-badge[hidden] { display: none; }
.role-badge:not([hidden]) + .nav-logout { margin-top: 0; }
@media (max-width: 760px) { .acct-form { grid-template-columns: 1fr; } }
.auth-log-box { max-height: 420px; overflow-y: auto; }

/* Warehouse page (owner 2026-10-13): the add / edit form and the CSV upload open in a box above the batch list. */
.wh-box { background: var(--panel-2); border-radius: 8px; padding: 10px 12px; margin: 0 0 10px; }
#wh-batches th.wh-sort { cursor: pointer; white-space: nowrap; }
#wh-batches td.bt-actions { white-space: nowrap; text-align: right; }
#wh-stock td.bt-actions { white-space: nowrap; text-align: right; }
.ws-warn { color: var(--bad); cursor: help; }
.ws-hist-list { margin: 0; padding-left: 18px; }
.ws-hist-list li { margin: 2px 0; }

/* Warehouse stock table (owner 2026-10-14, plan-warehouse-stock-page.md step 1) */
.wh-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.wh-tile { cursor: default; }
.wh-tile:hover { border-color: var(--border); box-shadow: none; }
.wh-tile .tile-hdr { padding: 6px 12px; }
.wh-tile .tile-hdr .tile-label { font-size: 13px; }
.wh-tile .tile-body { padding: 8px 12px 10px; }
.wh-tile-value { font-size: 20px; font-weight: 700; white-space: nowrap; }
.wh-tile[data-tile="stock_value"] .tile-hdr { background: var(--today-hdr, #4f8cff); }
.wh-tile[data-tile="reorder"] .tile-hdr { background: linear-gradient(90deg, #4b2bb8, #6d46e0); }
.wh-tile[data-tile="low_fba"] .tile-hdr { background: var(--yest-hdr, #5a9fad); }
.wh-tile[data-tile="out_of_stock"] .tile-hdr { background: #b84a4a; }
.wh-tile[data-tile="on_order_value"] .tile-hdr { background: var(--mtd-hdr, #45a89e); }
@media (max-width: 900px) { .wh-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wh-plan-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.wh-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.wh-tab { background: transparent; color: var(--muted); border: 1px solid var(--border); border-radius: 14px; padding: 4px 12px; font-size: 12px; cursor: pointer; }
.wh-tab.on { color: var(--text); border-color: var(--accent, #4f8cff); background: rgba(79, 140, 255, .15); }
.wh-tab-n { opacity: .7; }
.wh-plan th.sort { cursor: pointer; white-space: nowrap; }
.wh-plan th.sort::after { content: none; }            /* one marker: the sort-mark before the name, as on Inventory */
.wh-plan th.num.sort { padding-left: 6px; }
#wh-edit-costs { white-space: nowrap; }
.wh-plan td { vertical-align: middle; }
.wh-plan .wh-product { max-width: 420px; }
.wh-plan .wh-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 420px; }
.wh-plan .wh-next { color: var(--warn); white-space: nowrap; }
.wh-plan td[data-col="cost"] { white-space: nowrap; }
.wh-status { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; white-space: nowrap; color: #fff; }
.wh-st-ok { background: rgba(120, 140, 160, .35); color: var(--text); }
.wh-st-reorder { background: #6d46e0; }
.wh-st-send_to_fba { background: #2f8f9d; }
.wh-st-out_of_stock { background: var(--bad); }
.wh-st-overstock { background: #b8862b; }
#wh-settings-btn { white-space: nowrap; }

/* Warehouse popups + chips by status, Purchases page (owner 2026-10-15) */
button.linklike { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
button.linklike.muted { color: var(--muted); }
.days-badge.cov-ok { background: var(--good); }
.days-badge.cov-reorder { background: #6d46e0; }
.days-badge.cov-send_to_fba { background: #2f8f9d; }
.days-badge.cov-low_fba { background: var(--warn); }
.days-badge.cov-out_of_stock { background: var(--bad); }
.days-badge.cov-overstock { background: #b8862b; }
.wh-pop { position: fixed; z-index: 70; top: 90px; left: 50%; transform: translateX(-50%); width: min(860px, calc(100vw - 32px)); max-height: calc(100vh - 140px);
          overflow: auto; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 36px rgba(0,0,0,.45); padding: 12px 16px; color: var(--text); }
.whp-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.whp-head .whp-title { font-weight: 600; }
.whp-head .sc-close { margin-left: auto; background: none; border: 0; color: var(--muted); font-size: 20px; cursor: pointer; line-height: 1; }
.whp-table td, .whp-table th { white-space: nowrap; }
.whp-fallback { margin: 10px 0 6px; font-size: 13px; }
.whp-open { margin-top: 8px; }
#po-table tr.overdue > td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
#po-table .po-title { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#po-table .po-actions { white-space: nowrap; }
#po-table td { vertical-align: middle; }
#wh-plan .wh-inactive-btn { opacity: 0; transition: opacity .12s; }
#wh-plan tr:hover .wh-inactive-btn, #wh-plan .wh-inactive-btn:focus, #wh-plan tr.inactive .wh-inactive-btn { opacity: 1; }

/* Inventory inbound popup, Days left / FBA stock by status (owner 2026-10-15) */
.days-badge.cov-none { background: rgba(120, 140, 160, .35); }
.fba-stock.cov-text-ok { color: var(--good); }
.fba-stock.cov-text-reorder { color: #8f6ff0; }
.fba-stock.cov-text-send_to_fba { color: #3fb3c2; }
.fba-stock.cov-text-out_of_stock { color: var(--bad); }
.fba-stock.cov-text-overstock { color: #d39e3a; }
.fba-stock.cov-text-none { color: var(--muted); }
.inb-table td, .inb-table th { white-space: nowrap; vertical-align: middle; }
.inb-table tr.inb-closed td { opacity: .6; }
.inb-table tr.inb-hl td { background: rgba(79, 140, 255, .16); }
.inb-totals { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; }
.inb-total { padding: 4px 10px; border-radius: 8px; border: 1px solid var(--border); }
.inb-total.inb-hl { border-color: var(--accent, #4f8cff); background: rgba(79, 140, 255, .12); }
.inb-total.inb-mismatch { border-color: var(--warn); }
.inb-warn { color: var(--warn); font-weight: 600; }
.inb-ok { color: var(--good); }
#ship-table tr.ship-focus > td { box-shadow: inset 0 0 0 2px var(--accent, #4f8cff); }
.inb-table a.inb-link { color: var(--accent, #4f8cff); text-decoration: underline dotted; text-underline-offset: 3px; }
/* the popup fits its columns (live 2026-10-15: a 7-centre FC list pushed the last columns out): wider, FC and the
   update text wrap */
.wh-pop.inb-pop { width: min(1240px, calc(100vw - 32px)); }
.inb-table td[data-k="fc"] { white-space: normal; min-width: 90px; max-width: 170px; }
.inb-table td[data-k="update"] { white-space: normal; min-width: 150px; max-width: 230px; }
.inb-pop .whp-head { flex-wrap: wrap; }

/* Company selector + the company in the banner (owner 2026-10-15, multi-company) */
.company-sel-wrap { position: relative; margin: 10px 0 6px; }
.company-sel { display: flex; align-items: center; gap: 8px; width: 100%; background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
               border-radius: 8px; padding: 7px 10px; cursor: pointer; font: inherit; font-size: 13px; text-align: left; }
.company-sel:hover { border-color: var(--accent, #4f8cff); }
.company-swatch { flex: none; width: 12px; height: 12px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255,255,255,.25); }
.company-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.company-caret { color: var(--muted); font-size: 11px; }
.company-menu { position: absolute; z-index: 80; left: 0; right: 0; top: calc(100% + 4px); background: var(--panel); border: 1px solid var(--border);
                border-radius: 8px; box-shadow: 0 10px 28px rgba(0,0,0,.4); padding: 4px; }
.company-opt { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: 0; color: var(--text); font: inherit; font-size: 13px;
               padding: 7px 8px; border-radius: 6px; cursor: pointer; text-align: left; }
.company-opt:hover { background: var(--panel-2); }
.company-opt.current { font-weight: 600; }
.company-role { margin-left: auto; color: var(--muted); font-size: 11px; }
.company-tick { margin-left: auto; color: var(--good); }
.app-collapsed .company-name, .app-collapsed .company-caret { display: none; }
.app-collapsed .company-sel { justify-content: center; padding: 7px 4px; }
.banner .banner-company { font-weight: 700; letter-spacing: .5px; margin-right: 4px; }
/* Purchases as orders with lines (owner 2026-10-16) */
#po-table tr.po-order.open > td { border-bottom-color: transparent; }
#po-table tr.po-order.po-focus > td { background: color-mix(in srgb, var(--accent, #6d46e0) 14%, transparent); }
#po-table .po-toggle { font-size: 14px; width: 22px; text-align: center; }
#po-table .po-toggle-th, #po-table td[data-col="toggle"] { width: 1%; }
#po-table tr.po-lines-wrap > td { padding-top: 0; }
#po-table .po-sub { margin: 0 0 8px; background: color-mix(in srgb, var(--panel) 85%, var(--text) 3%); border-radius: 6px; }
#po-table .po-sub th { font-weight: 500; }
#po-table tr.po-order.overdue > td[data-col="expected"], #po-table tr.po-line.overdue > td[data-col="expected"] { color: var(--bad); }
/* Warehouse On order hover */
.oo-link { font: inherit; color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; }
.oo-pop { position: fixed; z-index: 75; max-width: min(620px, calc(100vw - 16px)); background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
          box-shadow: 0 10px 30px rgba(0,0,0,.4); padding: 10px 12px; color: var(--text); }
.oo-pop .oo-table td, .oo-pop .oo-table th { white-space: nowrap; }
.oo-pop tr.overdue td { color: var(--bad); }
.oo-pop tbody tr[data-order] { cursor: pointer; }
.oo-pop tbody tr[data-order]:hover td { background: color-mix(in srgb, var(--text) 6%, transparent); }
.oo-pop tfoot td { font-weight: 600; border-top: 1px solid var(--border); }

/* Stock settings inline on the Warehouse table (owner 2026-10-17): the defaults above the table, a line under each row. */
.ss-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 10px 12px; margin: 8px 0;
  border: 1px solid var(--border); border-radius: 6px; background: var(--panel-2); }
.ss-top-fields { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.ss-def { display: flex; flex-direction: column; gap: 4px; }
.ss-def label { font-size: 12px; color: var(--muted); }
.ss-def input { width: 110px; }
.ss-def .ss-apply { font-size: 11px; padding: 2px 6px; align-self: flex-start; }
.ss-top-actions { display: flex; align-items: center; gap: 8px; }
.ss-dirty { color: var(--warn); font-size: 12px; font-weight: 600; }
.wh-plan tr.ss-line td { background: var(--panel-2); padding: 3px 10px 5px; border-top: 0; }
.ss-line-fields { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: 12px; color: var(--muted); }
.ss-line-title { font-weight: 600; color: var(--text); min-width: 160px; }
.ss-lf { display: inline-flex; align-items: center; gap: 6px; }
.ss-lf input { height: 24px; padding: 1px 6px; font-size: 12px; }
.ss-lf input[type="number"] { width: 70px; }
.ss-lf input[type="text"] { width: 180px; }
.ss-top input::placeholder, .ss-line input::placeholder { color: var(--muted); opacity: .7; }
.ss-dialog { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.ss-dialog-box { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 16px 18px; max-width: 520px; width: calc(100% - 32px);
  max-height: 80vh; overflow: auto; }
.ss-dialog-box p { margin: 0 0 8px; }
.ss-changes { margin: 0 0 8px; padding-left: 18px; }
.ss-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }

/* Companies admin + a company's Amazon connection (multi-company step 3, 2026-10-17) */
#co-table .company-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: middle; }
#co-table .co-mem { white-space: nowrap; margin-right: 8px; }
#co-table .co-mem-del { padding: 0 6px; line-height: 16px; }
.co-forms { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 12px; }
.co-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; max-width: 760px; }
.co-form input, .co-form select { width: auto; margin: 0; }
#co-mem-user, #co-add-name { width: 200px; }
#co-add-slug { width: 150px; }
#co-add-colour { width: 90px; }
.co-form .co-check { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.co-form .co-check input { width: auto; }
.co-form .co-rate { white-space: nowrap; }
#co-add-rate { width: 70px; }
.co-form h3 { width: 100%; margin: 0 0 2px; font-size: 13px; }
.co-form .small.muted { width: 100%; }
.user-new-cos { width: 100%; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.user-new-co select { margin-left: 4px; }
.cc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin: 10px 0; }
.cc-field, .cc-field-plain { display: flex; flex-direction: column; gap: 4px; }
.cc-field label, .cc-field-plain label { font-size: 12px; color: var(--muted); }
.cc-pending .cc-discard { margin-left: 6px; padding: 0 6px; }
#health-companies .company-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: middle; }
.bf-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bf-form input[type="date"] { width: auto; }

/* ── Day Report: daily issues (owner 2026-10-18) ─────────────────────────────────────────────────────────────── */
.nav-badge { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); min-width: 18px; padding: 1px 5px; border-radius: 9px;
  background: var(--bad); color: #fff; font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; }
.app-collapsed .nav-badge { top: 2px; right: 2px; transform: none; padding: 0 4px; font-size: 10px; }
.issue-link, .day-strip a { color: var(--accent); text-decoration: none; }
.issue-link:hover, .day-strip a:hover { text-decoration: underline; }
#issue-checks > summary { cursor: pointer; list-style: none; }
#issue-checks > summary::-webkit-details-marker { display: none; }
#issue-checks > summary::before { content: "▸ "; color: var(--muted); }
#issue-checks[open] > summary::before { content: "▾ "; }
.sev { display: inline-block; padding: 1px 7px; border-radius: 9px; font-size: 11px; font-weight: 700; }
.sev-high { background: rgba(248, 81, 73, .18); color: var(--bad); }
.sev-medium { background: rgba(210, 153, 34, .2); color: var(--warn, #d29922); }
.sev-low { background: rgba(57, 197, 187, .16); color: #39c5bb; }
.sev-info { background: rgba(88, 166, 255, .16); color: var(--accent); }
.issue-day { border-bottom: 1px solid var(--border); }
.issue-day-head { display: flex; gap: 10px; align-items: center; padding: 3px 4px; cursor: pointer; font-size: 13px; line-height: 20px; }
.issue-day-head.quiet { cursor: default; }
.issue-day-head.quiet:hover { background: none; }
.day-counts { display: inline-flex; gap: 6px; align-items: center; }
.issue-day-head:hover { background: var(--panel-2); }
.issue-day-head .caret { width: 12px; color: var(--muted); }
.cnt { font-size: 13px; }
.cnt.zero { color: var(--muted); opacity: .6; }
.cnt-high:not(.zero) { color: var(--bad); font-weight: 600; }
.cnt-medium:not(.zero) { color: var(--warn, #d29922); font-weight: 600; }
.cnt-low:not(.zero) { color: #39c5bb; font-weight: 600; }
.cnt-open { font-weight: 700; }
.issue-earlier { background: var(--panel-2); border-radius: 6px; margin-bottom: 6px; }
.issue-day-body { padding: 0 4px 8px 26px; }
.day-strip { padding: 6px 0 8px; color: var(--muted); }
.day-strip strong { color: var(--text); }
.issue { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--border); }
.issue .sev { flex: 0 0 auto; margin-top: 2px; }
.is-body { flex: 1; min-width: 0; }
.is-orders { display: inline; margin: 0; padding: 0; list-style: none; }
.is-orders li { display: inline; }
.is-orders li + li::before { content: " · "; }
.is-title { font-weight: 600; }
.is-old { text-decoration: line-through; color: var(--muted); }
.is-new { font-weight: 600; }
.is-side { flex: 0 0 340px; text-align: right; font-size: 13px; }
.issue-state { font-weight: 600; }
.issue.state-cleared, .issue.state-dealt { opacity: .65; }
.is-actions { display: flex; gap: 6px; justify-content: flex-end; align-items: center; margin-top: 4px; }
.is-actions .btn { padding: 3px 9px; font-size: 12px; line-height: 18px; white-space: nowrap; }
.is-note { width: 160px !important; height: 26px; margin: 0 !important; padding: 2px 6px !important; font-size: 12px; }
.is-day { margin-top: 8px; }
@media (max-width: 900px) {
  .issue { flex-direction: column; }
  .is-side { flex: none; text-align: left; }
  .is-actions { justify-content: flex-start; }
}
.is-title .company-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: 0; }

/* Day Report layout (owner 2026-10-18): tabs, compact Issues and Checks tabs */
.day-tabs { display: flex; gap: 4px; margin: 0 0 8px; border-bottom: 1px solid var(--border); }
.day-tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 6px 14px; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer; }
.day-tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent, #2f81f7); }
.compact-panel { padding: 8px 12px; }
.day-toolbar { align-items: center; gap: 16px; margin-bottom: 6px; flex-wrap: wrap; }
.day-toolbar #issues-summary { flex: 1; min-width: 300px; }
.day-review input[type="date"] { width: auto; padding: 1px 4px; margin: 0 4px; }
.review-confirm { margin: 4px 0 8px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel-2); font-size: 13px; }
.review-confirm .btn { margin-left: 6px; }
.cnt-open-day { font-weight: 700; }
.ck-bar { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.ck-bar .btn { padding: 2px 12px; }
.ck-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ck-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); padding: 3px 6px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.ck-table td { padding: 0 6px; border-bottom: 1px solid var(--border); vertical-align: middle; line-height: 20px; height: 21px; white-space: nowrap; }
.ck-table tr.ck-group td { font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); line-height: 16px; height: 17px; background: var(--panel-2); }
.ck-table tr.unavailable td { opacity: .5; }
.ck-table tr.off .ck-name { opacity: .6; }
.ck-table td.num { text-align: right; }
.ck-name { font-weight: 600; cursor: help; }
.ck-table .sev { font-size: 11px; line-height: 15px; padding-top: 0; padding-bottom: 0; }
.ck-table .chip { font-size: 11px; padding: 0 6px; line-height: 15px; }
.ck-thrs { font-size: 12px; color: var(--muted); }
.ck-thr-l { display: inline-block; margin: 0 10px 0 0; white-space: nowrap; font-size: 12px; }
.ck-thr { width: 56px !important; height: 18px; padding: 0 4px !important; margin: 0 2px !important; font-size: 12px; color: var(--text); }
.ck-on input { width: auto; margin: 0; }
#ck-unsaved[hidden], #review-confirm[hidden], #day-issues-tab[hidden], #day-checks-tab[hidden], #review-yes[hidden] { display: none !important; }
#issues-summary a { color: var(--accent); }
/* editable severity (owner 2026-10-18) */
select.ck-sev { width: auto !important; border: 0 !important; padding: 0 6px !important; margin: 0 !important; height: 17px; font-size: 11px; font-weight: 700;
  border-radius: 9px; cursor: pointer; appearance: none; -webkit-appearance: none; text-align: center; }
select.ck-sev option { color: var(--text); background: var(--panel); font-weight: 400; }
.ck-sev-l { white-space: nowrap; margin-right: 6px; }
.ck-sev-k { font-size: 11px; color: var(--muted); }
.ck-sev-dot { color: var(--warn, #d29922); font-size: 9px; margin-left: 2px; vertical-align: super; }
/* Checks table fits 1920 wide (owner 2026-10-18): fixed small severity badges, stacked direction levels, half-width
   threshold boxes that wrap, narrow fixed side columns */
.ck-table { table-layout: auto; }
.ck-table td.ck-sevs { white-space: nowrap; }
.ck-sevs .ck-sev-l { display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin: 0; line-height: 19px; }
.ck-sevs .sev, select.ck-sev { box-sizing: border-box; width: 58px !important; min-width: 58px; max-width: 58px; display: inline-block;
  text-align: center; text-align-last: center; padding: 0 !important; overflow: hidden; }
.ck-sevs .ck-sev-dot { width: 8px; margin: 0; }
.ck-sevs .ck-sev-l:not(:has(.ck-sev-dot))::after { content: ""; width: 8px; }
.ck-table td.ck-thrs { white-space: normal; min-width: 260px; }
.ck-thr-l { margin: 0 8px 0 0; line-height: 19px; }
.ck-thr { box-sizing: border-box; width: 30px !important; padding: 0 2px !important; font-size: 11px; text-align: right; }
.ck-table td:nth-child(5) { width: 100px; max-width: 100px; }
.ck-table td:nth-child(6) { width: 56px; max-width: 56px; }
.ck-table td:nth-child(7) { width: 110px; max-width: 110px; }
.sidebar-foot { overflow: hidden; }
.ck-thr { -moz-appearance: textfield; appearance: textfield; }
.ck-thr::-webkit-inner-spin-button, .ck-thr::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* stacked severities stay compact so the Checks table still fits about one screen (owner 2026-10-18) */
.ck-sevs .ck-sev-l { line-height: 15px; height: 15px; }
.ck-sevs .sev, select.ck-sev { height: 14px; line-height: 14px; font-size: 10.5px; }
.ck-sevs .ck-sev-k { font-size: 10.5px; line-height: 15px; }
.ck-table td { height: 19px; line-height: 17px; }
.ck-table tr.ck-group td { height: 15px; line-height: 14px; }
.ck-bar { margin-bottom: 2px; }
/* Claims page (owner 2026-10-18) */
.cl-top { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.cl-tiles { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 8px; }   /* 6 tiles, 7 on Warehouse */
.cl-tile { background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; min-width: 0; }
.cl-tile-l { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-tile-v { font-size: 18px; font-weight: 700; }
.cl-tabs { flex-wrap: wrap; }
.cl-tab { white-space: nowrap; }
.cl-tab-off { opacity: .55; }
.cl-toolbar { align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.cl-f { display: inline-flex; align-items: center; gap: 3px; margin: 0 8px 0 0; white-space: nowrap; color: var(--text); font-size: 12px; }
.cl-f input { width: auto; margin: 0; }
.cl-actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.cl-table { width: 100%; font-size: 12.5px; }
.cl-table td, .cl-table th { padding: 3px 6px; }
.cl-table td.cl-c-sel, .cl-table th.cl-c-sel { width: 22px; }
.cl-table input.cl-sel { width: auto; margin: 0; }
.cl-table td.cl-sku { cursor: pointer; font-weight: 600; white-space: nowrap; }
.cl-table td.cl-prod { max-width: 380px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-table tr.cl-row td { cursor: pointer; }
.cl-table tr.urgent-red td { background: rgba(248, 81, 73, .13); }
.cl-table tr.urgent-amber td { background: rgba(210, 153, 34, .13); }
.cl-status { display: inline-block; box-sizing: border-box; width: 74px; text-align: center; font-size: 11px; font-weight: 700; border-radius: 9px; padding: 0 4px; line-height: 16px;
  background: var(--panel-2); color: var(--muted); }
.cl-s-open, .cl-s-part_paid { background: rgba(210, 153, 34, .2); color: var(--warn, #d29922); }
.cl-s-claimed { background: rgba(88, 166, 255, .16); color: var(--accent); }
.cl-s-paid { background: rgba(63, 185, 80, .15); color: var(--good); }
.cl-s-expired, .cl-s-rejected { background: rgba(248, 81, 73, .15); color: var(--bad); }
.cl-detail td { background: var(--panel-2); }
.cl-ids { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 4px; }
.cl-kv { white-space: nowrap; }
.cl-pays { margin: 2px 0 4px 18px; padding: 0; }
.cl-admin { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.cl-admin label { display: inline-flex; gap: 4px; align-items: center; margin: 0; }
.cl-settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 16px; margin: 6px 0; }
.cl-settings-grid label { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin: 0; }
.cl-settings-grid input { width: 64px; }
#cl-settings[hidden] { display: none !important; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); display: flex; align-items: flex-start; justify-content: center; z-index: 50; padding: 40px 12px; overflow-y: auto; }
.cl-modal { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; width: min(900px, 100%); max-width: 100%; box-sizing: border-box; }
.cl-pre { white-space: pre-wrap; font-size: 12px; background: var(--panel-2); padding: 8px; border-radius: 6px; }
.cl-reports { padding-left: 18px; }
@media (max-width: 900px) {
  .cl-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-tiles { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-actions { margin-left: 0; }
}

/* LIVE (VPS) / DEVELOPMENT (night) tag at the start of the banner (owner 2026-10-19) */
.deploy-tag { display: inline-block; margin-right: 10px; padding: 1px 8px; border-radius: 4px; font-size: 11px; font-weight: 700;
  letter-spacing: .04em; white-space: nowrap; color: #fff; }
.deploy-tag.deploy-live { background: #1a7f37; }
.deploy-tag.deploy-dev { background: #b45309; }
/* The sales a change would recost, in the "ask first" dialog (owner 2026-10-20) */
.imp-pop .imp-sales-wrap { max-height: 260px; overflow-y: auto; margin-top: 8px; border: 1px solid var(--border); border-radius: 6px; }
.imp-pop .imp-sales { margin: 0; }
.imp-pop .imp-sales th { position: sticky; top: 0; background: var(--panel); }

/* ── Payments (owner 2026-10-21) ─────────────────────────────────────────────────────────────────────────────────── */
.pay-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.pay-title { display: flex; align-items: baseline; gap: 10px; }
.pay-title h2 { margin: 0; }
.pay-chan { color: var(--muted); font-size: 13px; }
.pay-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pay-eur { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.pay-msg { margin-top: 4px; }
.pay-msg:empty { display: none; }
.pay-tiles { margin-bottom: 10px; }
.pay-tabs { margin-bottom: 8px; }
.pay-wrap { overflow-x: auto; }
.pay-table { width: 100%; }
.pay-table td, .pay-table th { white-space: nowrap; }
.pay-status { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; border: 1px solid transparent; }
.pay-s-ok { color: var(--good, #1a7f37); background: color-mix(in srgb, var(--good, #1a7f37) 12%, transparent); }
.pay-s-warn { color: var(--warn, #9a6700); background: color-mix(in srgb, var(--warn, #9a6700) 14%, transparent); }
.pay-s-bad { color: var(--bad, #cf222e); background: color-mix(in srgb, var(--bad, #cf222e) 12%, transparent); }
.pay-row.pay-fx td { color: var(--muted); }
.pay-acts .btn { margin-right: 2px; padding: 3px 8px; font-size: 12px; line-height: 1.3; }   /* compact: the actions fit the table at 1700 px (2026-10-25) */
.pay-entered-lab { display: inline; margin: 0; }   /* who ticked it and when: on hover (title), never drawn over the next cell */
.pay-det { padding: 6px 4px 10px; white-space: normal; }
.pay-det-top { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; margin-bottom: 8px; }
.pay-det-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.pay-lines h4 { margin: 4px 0; }
.pay-lines-t td, .pay-lines-t th { white-space: nowrap; }
.pay-lines-t td:first-child { white-space: normal; }
.pay-tot td { font-weight: 600; border-top: 1px solid var(--border); }
.pay-net { margin: 8px 0; }
.pay-mp { margin: 6px 0; }
.pay-vatcheck { margin: 4px 0; }
.pay-checks { list-style: none; padding: 0; margin: 6px 0 0; }
.pay-checks li { margin: 2px 0; }
.pay-note { margin: 8px 0 0; }
.pay-map-t input { width: 100%; min-width: 80px; box-sizing: border-box; }
.pay-map-t td { vertical-align: middle; }
.pay-map-row { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 10px 0 16px; }
#pay-map-panel h3 { font-size: 15px; margin: 14px 0 6px; }
#pay-map-panel h3 .sub { font-size: 12px; font-weight: 400; color: var(--muted); margin-left: 6px; }
/* eBay panel (owner 2026-10-21) */
.pay-channels { margin-bottom: 6px; }
.ebay-switch { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0 10px; }
.ebay-switch input { width: auto; margin: 0; }
.ebay-app { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 16px; }
.ebay-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ebay-f input { width: 100%; box-sizing: border-box; }
.ebay-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 10px 0; }
.ebay-help { max-width: 90ch; }
.ebay-steps { line-height: 1.7; padding-left: 20px; }
.ebay-steps textarea { display: block; width: 100%; max-width: 760px; box-sizing: border-box; margin-top: 4px; }
.ebay-steps li { margin: 8px 0; }

.ebay-holds { margin-top: 14px; }
.ebay-holds h3 { font-size: 15px; margin: 8px 0 6px; }
.ebay-holds h3 .sub { font-size: 12px; font-weight: 400; color: var(--muted); margin-left: 6px; }
/* Xero (owner 2026-10-22): Settings panel, mapping pickers, the row's Xero cell */
.xero-state { margin: 4px 0 8px; }
.xero-scopes { word-break: break-word; }
.xero-steps { margin: 6px 0; padding-left: 20px; display: grid; gap: 4px; }
.xero-steps input { width: min(520px, 100%); box-sizing: border-box; }
.xero-contacts { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.xero-contacts label { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.xero-contacts select { max-width: 260px; }
select.pm-acct { max-width: 220px; }
.pm-flag { margin-top: 2px; max-width: 220px; white-space: normal; }
.pay-sent { display: inline-block; margin-right: 4px; color: var(--good, #1a7f37); white-space: nowrap; }
.pay-sent a { color: inherit; }
/* Claims: a cost per claim (owner 2026-10-22) */
.cl-cost-btn { background: none; border: 0; padding: 0; color: var(--accent, #2563eb); text-decoration: underline dotted; cursor: pointer; font: inherit; }
.cl-edited { display: inline-block; padding: 0 5px; border-radius: 8px; font-size: 11px; background: var(--warn-bg, rgba(210, 153, 34, .18)); color: var(--warn, #9a6700); cursor: help; }
.cl-cost-edit { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin: 6px 0; }
.cl-orphans { margin-top: 8px; }
.cl-orphans ul { margin: 4px 0; padding-left: 18px; }

/* Admins must use two-factor (owner 2026-10-23): the notice above the Account page */
.acct-2fa-required { border-left: 4px solid var(--warn, #9a6700); }

/* The overnight backfill (owner 2026-10-23): normal syncing paused, said clearly */
.bf-paused { border-left: 4px solid var(--warn, #9a6700); background: color-mix(in srgb, var(--warn, #9a6700) 12%, transparent); padding: 8px 12px; border-radius: 6px; margin: 6px 0 10px; font-size: 13px; }
.bf-form input[type="time"] { width: auto; }
.bf-form input.bf-time { width: 6.5ch; text-align: center; font-variant-numeric: tabular-nums; }
.bf-cont { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
.banner .bf-banner { color: #f5c26b; font-weight: 600; }

/* Page refresh (owner 2026-10-24): pages load when opened or reloaded - no timed refresh. */
.pagebar { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin: -8px 0 12px; font-size: 12px; color: var(--muted); }
.pagebar .refresh-btn { padding: 4px 12px; font-size: 12px; }
.pagebar .new-data { background: rgba(210, 153, 34, 0.15); border: 1px solid var(--warn); color: var(--warn); border-radius: 999px;
  padding: 4px 12px; font-size: 12px; font-weight: 600; cursor: pointer; }
.pagebar .new-data:hover { background: rgba(210, 153, 34, 0.28); }

/* Warehouse product thumbnails (owner 2026-10-24): small, lazy-loaded, the same image as Products / Order Items */
.wh-prod-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wh-prod-text { min-width: 0; flex: 1; }
.wh-thumb { flex: 0 0 36px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; }
.wh-thumb img { width: 36px; height: 36px; object-fit: contain; border-radius: 4px; background: #fff; }
.wh-thumb .prod-img-placeholder { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; }

/* "SKU · ASIN · FNSKU" (owner 2026-10-25): the SKU bold, each part selected whole with one click for copying */
.idl .id-sku { font-weight: 700; }
.idl .id-sku, .idl .id-asin, .idl .id-fnsku { user-select: all; -webkit-user-select: all; }

/* "Amazon fees" (owner 2026-10-25): two lines, click for the measured size */
.af-cell .af-line { white-space: nowrap; line-height: 1.3; }
.wh-pop.af-pop { width: min(460px, calc(100vw - 32px)); }

/* buy box competing offers popup (owner 2026-10-25) */
.wh-pop.bb-pop { width: min(760px, calc(100vw - 32px)); }
.bb-pop tr.bb-offer.holds td { background: color-mix(in srgb, var(--good) 10%, transparent); }
.bb-pop tr.bb-offer.mine td:first-child { color: var(--accent, inherit); }