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

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  background: #f5f5f5;
  color: #1a1a1a;
  font-size: 14px;
  line-height: 1.5;
}

header {
  background: #fff;
  border-bottom: 1px solid #e0e0e0;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  height: 52px;
}

header h1 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

nav { display: flex; gap: 0; }

nav button {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0 16px;
  height: 52px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: #666;
  white-space: nowrap;
  transition: color 0.1s, border-color 0.1s;
}

nav button:hover { color: #1a1a1a; }

nav button.active {
  color: #1a1a1a;
  border-bottom-color: #1a1a1a;
}

.header-user {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: #666;
  white-space: nowrap;
}

main {
  max-width: 1100px;
  margin: 32px auto;
  padding: 0 24px;
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

.section-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

th {
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #666;
  padding: 10px 14px;
  border-bottom: 1px solid #e8e8e8;
  background: #fafafa;
}

td {
  padding: 10px 14px;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: middle;
}

tr:last-child td { border-bottom: none; }
tr:hover td { background: #fafafa; }

.mono { font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; font-size: 12px; }

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.badge-shopee       { background: #fff0e6; color: #d4520f; }
.badge-lazada       { background: #fff0f6; color: #9c0b5e; }
.badge-shopify      { background: #e6f4ef; color: #0a6b46; }
.badge-dashboard    { background: #eef2ff; color: #3730a3; }
.badge-push-worker  { background: #fef9e7; color: #7d6608; }

.delta-neg       { color: #c0392b; font-weight: 600; }
.delta-small-neg { color: #e67e22; font-weight: 600; }
.delta-pos       { color: #27ae60; font-weight: 600; }

button.btn {
  border: 1px solid #d0d0d0;
  background: #fff;
  padding: 4px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: #333;
  transition: background 0.1s, border-color 0.1s;
}

button.btn:hover { background: #f5f5f5; border-color: #bbb; }

button.btn-primary { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
button.btn-primary:hover { background: #333; }

button.btn-danger  { color: #c0392b; border-color: #f5c6c6; }
button.btn-danger:hover  { background: #fdf0f0; }

button.btn-success { color: #0a6b46; border-color: #b7e0cf; }
button.btn-success:hover { background: #f0faf5; }

.inline-edit {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.inline-edit input[type="number"] {
  width: 80px;
  padding: 4px 8px;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  font-size: 13px;
}

.msg { padding: 8px 12px; border-radius: 4px; font-size: 12px; margin-top: 6px; }
.msg-ok  { background: #e6f4ef; color: #0a6b46; }
.msg-err { background: #fdf0f0; color: #c0392b; }

.filters {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 16px;
  flex-wrap: wrap;
  background: #fff;
  padding: 16px;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.filter-group { display: flex; flex-direction: column; gap: 4px; }
.filter-group label { font-size: 11px; font-weight: 600; color: #666; text-transform: uppercase; letter-spacing: 0.04em; }

.filters input {
  padding: 6px 10px;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  font-size: 13px;
  width: 180px;
}

.filters input[type="datetime-local"] { width: 200px; }

.loading { color: #999; font-style: italic; padding: 16px 0; }
.empty   { color: #999; padding: 12px 14px; font-style: italic; }

/* ── Inventory toolbar & filters ─────────────────────────────────────────── */

.inv-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.inv-toolbar .section-title { margin-bottom: 0; }

.inv-count {
  font-size: 12px;
  color: #999;
}

.inv-filters {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.inv-filters input[type="text"] {
  padding: 6px 10px;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  font-size: 13px;
  width: 240px;
}

.brand-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.chip {
  border: 1px solid #d0d0d0;
  background: #fff;
  padding: 4px 12px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: #555;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
  white-space: nowrap;
}

.chip:hover { background: #f5f5f5; border-color: #bbb; }

.chip.active {
  background: #1a1a1a;
  border-color: #1a1a1a;
  color: #fff;
}

.unlisted-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #555;
  cursor: pointer;
  white-space: nowrap;
}

.unlisted-toggle input[type="checkbox"] { cursor: pointer; }

/* ── Badges ──────────────────────────────────────────────────────────────── */

.badge-active   { background: #e6f4ef; color: #0a6b46; }
.badge-unlisted { background: #f0f0f0; color: #888; }

.plat-cell { white-space: nowrap; }
.plat-cell .badge { margin-right: 4px; }

/* ── Unlisted rows ───────────────────────────────────────────────────────── */

tr.row-unlisted td { opacity: 0.45; }
tr.row-unlisted:hover td { opacity: 0.65; background: #fafafa; }

.dlq-card {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  margin-bottom: 12px;
  padding: 16px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.dlq-card-body    { flex: 1; }
.dlq-card-meta    { font-size: 12px; color: #666; margin-bottom: 6px; }
.dlq-card-payload { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 12px; background: #f5f5f5; padding: 8px 10px; border-radius: 4px; }
.dlq-card-actions { display: flex; gap: 8px; margin-top: 10px; }

.count-badge {
  display: inline-block;
  background: #c0392b;
  color: #fff;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  margin-left: 4px;
  vertical-align: middle;
}

/* ── Onboard SKU tab ─────────────────────────────────────────────────────── */

.onboard-hint {
  font-size: 13px;
  color: #666;
  margin-bottom: 20px;
}

.onboard-form {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  padding: 20px;
}

.onboard-fields {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: flex-end;
}

.onboard-fields .filter-group input {
  padding: 6px 10px;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  font-size: 13px;
}

.field-required { color: #c0392b; font-weight: 700; }
.field-optional { color: #aaa; font-size: 11px; font-weight: 400; }

.onboard-result { }

.onboard-id-table {
  margin-top: 0;
  width: auto;
  min-width: 500px;
}

.onboard-id-table th,
.onboard-id-table td {
  padding: 8px 14px;
}

/* ── Sortable column headers ─────────────────────────────────────────────── */

th.th-sortable {
  cursor: pointer;
  user-select: none;
}

th.th-sortable:hover {
  color: #1a1a1a;
  background: #f0f0f0;
}

.sort-arrow {
  font-size: 10px;
  color: #999;
  margin-left: 4px;
}

/* ── Overview tab ────────────────────────────────────────────────────────── */

.ov-periods {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ov-custom {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  padding-left: 12px;
  border-left: 1px solid #e0e0e0;
}

.ov-custom input[type="date"] {
  padding: 4px 8px;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  font-size: 12px;
}

.ov-custom-sep { color: #999; }

.ov-kpis { margin-bottom: 16px; }

.ov-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}

.ov-plat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.ov-kpi,
.ov-plat-card {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  padding: 14px 16px;
}

.ov-kpi-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #999;
  margin-bottom: 6px;
}

.ov-kpi-value {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.ov-plat-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
  color: #555;
  margin-bottom: 6px;
}

.ov-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.ov-dot-shopee  { background: #e8722e; }
.ov-dot-lazada  { background: #2563eb; }
.ov-dot-shopify { background: #0a8a52; }

.ov-plat-rev { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.ov-plat-units { font-size: 11px; color: #999; margin-top: 2px; }

.ov-card {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  padding: 16px;
  margin-bottom: 16px;
}

.ov-card table { box-shadow: none; }

.ov-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.ov-metric-toggle { display: flex; gap: 6px; }

.ov-chart-wrap {
  position: relative;
  height: 280px;
}

.ov-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.ov-subname {
  font-size: 11px;
  color: #999;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* Platform cell with no sales — a muted dash reads faster than "$0.00 / 0 units" repeated
   across three columns, so the columns that did sell stand out at a glance. */
.ov-zero { color: #ccc; }

/* The Sales by product table carries seven columns; on a narrow window it scrolls inside its own
   card rather than forcing the whole page sideways. */
.ov-sales-scroll { overflow-x: auto; }

/* Trend sits inside the Sales by product card, separated by a rule rather than its own card —
   it summarises the same filtered selection the table below it lists, and boxing it again would
   imply a second, unrelated section. The rule sits underneath because the chart reads first. */
.ov-trend {
  margin-top: 4px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #eee;
}

.ov-trend-title { font-size: 13px; font-weight: 600; color: #444; }

/* Taller than it was below the table: now that it leads the section, the trend is what the eye
   lands on first, and a flatter box makes small day-to-day movement hard to read. */
.ov-trend-wrap { position: relative; height: 240px; }

.ov-low-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ov-low-controls select,
.ov-low-controls input[type="number"] {
  padding: 4px 8px;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  font-size: 12px;
}

.ov-low-controls input[type="number"] { width: 56px; }
.ov-low-unit { font-size: 12px; color: #999; }

@media (max-width: 760px) {
  .ov-kpi-row { grid-template-columns: repeat(2, 1fr); }
  .ov-plat-row { grid-template-columns: 1fr; }
  .ov-cols { grid-template-columns: 1fr; }
}