/* ── Account Health — page styles ──────────────────────────────────────────
   The shell (sidebar, top bar, fonts, table standard) comes from
   Shared Data/shell.css + shell.js. Only what is specific to this page
   lives here. */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scrollbar-gutter: stable; }
body {
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #f3f5f8; color: #2d3436; padding-bottom: 10px;
  overflow-x: hidden; overflow-x: clip;
}
/* The sidebar's own look is shell.css's job, but taking it OUT OF FLOW is the
   page's — without this it is a normal 584px-tall block that shoves the whole
   dashboard down the screen. shell.css then overrides width/colour for v2. */
.sidebar {
  position: fixed; top: 0; left: 0; width: 150px; height: 100vh;
  background: #1a1f2e; color: #fff; display: flex; flex-direction: column; z-index: 100;
}
.sidebar .logo { padding: 14px 10px; border-bottom: 1px solid #2d3450; display: flex; align-items: center; gap: 8px; }
.sidebar .logo svg { width: 28px; height: 28px; flex-shrink: 0; }
.sidebar .logo span { font-size: 16px; font-weight: 800; font-style: italic; letter-spacing: 1.5px; color: #e8eaed; }
.sidebar nav { flex: 1; padding: 12px 0; }
.sidebar nav a {
  display: flex; align-items: center; gap: 10px; padding: 11px 18px;
  color: #8892a4; text-decoration: none; font-size: 13px; font-weight: 500; transition: all .15s;
}
.sidebar nav a:hover { background: #252b3d; color: #fff; }
.sidebar nav a.active { background: #252b3d; color: #ff9900; border-left: 3px solid #ff9900; }
.sidebar nav a .icon { width: 18px; text-align: center; font-size: 15px; }
.sidebar-footer { padding: 12px 18px; font-size: 11px; color: #5a6377; border-top: 1px solid #2d3450; }

.main { margin-left: 150px; }
.content { padding: var(--cg-row, 14px) var(--cg-gutter, 28px); }   /* page rhythm: gaps come from --cg-row / --cg-gutter (shell.css, RULEBOOK Rule 6) */

/* The house expand caret — same orange triangle as Sales/PPC/Users. */
.cg-expand { color: #ff9900; font-size: 9px; display: inline-block; transition: transform .15s; }
.cg-expand.open { transform: rotate(90deg); }
.topbar {
  display: flex; align-items: center; gap: 14px; background: #fff;
  padding: 10px 24px; border-bottom: 1px solid #e6e8ec; min-height: 60px;
}
.topbar h1 { font-size: 17px; font-weight: 600; }
.topbar h1 .crumb { color: #98a1b0; font-weight: 500; }
.topbar .subtitle {
  margin-left: auto; font-size: 12px; color: #5b6472;
  font-family: 'IBM Plex Mono', monospace; padding: 5px 10px;
  background: #f4f6f9; border-radius: 8px;
}
.muted { color: #8a94a6; font-size: 12px; }

.banner {
  background: #fff8e6; border: 1px solid #f0d48a; color: #7a5b00;
  padding: 10px 14px; border-radius: 8px; margin-bottom: 14px;
  font-size: 13px; display: none; line-height: 1.6;
}

/* ── Summary cards ── */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 14px; margin-bottom: var(--cg-row, 14px); }
.kpi { background: #fff; border-radius: 10px; padding: 14px 16px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.kpi .label { font-size: 12px; color: #667085; margin-bottom: 6px; display: flex; align-items: center; gap: 7px; font-weight: 500; }
.kpi .value { font-size: 25px; font-weight: 600; font-family: 'IBM Plex Mono', monospace; letter-spacing: -.03em; }
.kpi .change { font-size: 12px; font-weight: 600; margin-top: 6px; color: #667085; }
.kpi .change.up { color: #12894f; }
.kpi .change.down { color: #dc2626; }
.kpi .sub { font-size: 11px; color: #98a1b0; margin-top: 4px; line-height: 1.5; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.dot.ok { background: #12894f; } .dot.warn { background: #d97706; }
.dot.bad { background: #dc2626; } .dot.na { background: #b2bec3; }

/* ── Tabs — one tab per question, like /admin/status and /admin/architecture ── */
.tabs { display: flex; gap: 4px; margin-bottom: var(--cg-row, 14px); border-bottom: 1px solid #e2e6ec; flex-wrap: wrap; }
.tab {
  padding: 9px 18px; font-size: 13px; font-weight: 600; color: #667085;
  cursor: pointer; user-select: none; border: none; background: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  display: inline-flex; align-items: center; gap: 8px;
}
.tab:hover { color: #2563eb; }
.tab.active { color: #2563eb; border-bottom-color: #2563eb; }
.tab .tab-count {
  font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 9px;
  background: #eef2f7; color: #5d6d7e; font-family: 'IBM Plex Mono', monospace;
}
.tab.active .tab-count { background: #e7effd; color: #2563eb; }
.tab .tab-count.bad { background: #fdecea; color: #c0392b; }
.tab-hint { font-size: 12px; color: #7a8699; margin: 0 0 var(--cg-row, 14px); line-height: 1.6; }

/* ── Filters ── */
.filters-bar {
  background: #fff; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.06);
  padding: 12px 16px; display: flex; gap: 22px; align-items: flex-end;
  flex-wrap: wrap; margin-bottom: 14px;
}
.filters-bar .fgroup { display: flex; flex-direction: column; gap: 5px; }
.filters-bar .fgroup > label {
  font-size: 11px; font-weight: 700; color: #667085;
  text-transform: uppercase; letter-spacing: .5px;
}
.filters-bar .chips { display: flex; gap: 6px; flex-wrap: wrap; }
.filter-chip {
  padding: 4px 12px; border: 1px solid #cbd5e0; border-radius: 16px;
  font-size: 12px; cursor: pointer; user-select: none; transition: all .15s; background: #fff;
}
.filter-chip:hover { border-color: #2563eb; color: #2563eb; }
.filter-chip.active { background: #2563eb; color: #fff; border-color: #2563eb; }
.filters-bar input[type=text] {
  padding: 6px 10px; border: 1px solid #cbd5e0; border-radius: 6px;
  font-size: 13px; width: 250px;
}
.filters-bar input[type=text]:focus { outline: none; border-color: #2563eb; }
.filters-bar .count { margin-left: auto; padding-bottom: 4px; }

/* ── Bulk actions — appears only when rows are ticked ── */
.bulkbar {
  background: #1a1f2e; color: #fff; border-radius: 10px;
  padding: 10px 16px; margin-bottom: 12px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 2px 8px rgba(26,31,46,.18);
}
.bulk-count { font-size: 13px; font-weight: 600; margin-right: auto; }
.bulk-btn {
  padding: 6px 14px; border: none; border-radius: 6px; cursor: pointer;
  font-size: 13px; font-weight: 600; background: #2563eb; color: #fff;
  display: inline-flex; align-items: center; gap: 6px;
}
.bulk-btn:hover { background: #1d4ed8; }
.bulk-btn.ghost { background: transparent; border: 1px solid #4a5468; color: #c8cede; }
.bulk-btn.ghost:hover { background: #252b3d; }

td.check-cell, th.mid > input[type=checkbox] { width: 34px; }
.row-check, .check-all { cursor: pointer; width: 15px; height: 15px; }

/* ── Table ── */
.table-card {
  background: #fff; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.06);
  overflow: auto; max-height: calc(100vh - 150px); position: relative;
}
.table-card h2 {
  font-size: 16px; font-weight: 600; padding: 14px 20px;
  border-bottom: 1px solid #edf2f7; display: flex; align-items: center;
  gap: 12px; flex-wrap: wrap; position: sticky; top: 0; background: #fff; z-index: 20;
}
.table-card h2 .rowcount { font-size: 13px; font-weight: 400; color: #636e72; }
.excel-btn {
  margin-left: auto; padding: 6px 14px; border: none; border-radius: 6px;
  background: #2563eb; color: #fff; font-size: 13px; font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.excel-btn:hover { background: #1d4ed8; }

table { border-collapse: collapse; font-size: 13px; width: 100%; }
/* Geometry (alignment, wrapping, padding, height) comes from the HOUSE TABLE
   STANDARD in Shared Data/shell.css — swept 2026-08-06. Only this page's
   colours and its sticky offset live here. */
thead th {
  /* colours (background / label / underline) come from the shell's house table
     tokens — RULEBOOK Rule 6 §5a. Nothing here paints them. */
  font-size: 11.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .4px;
  /* `position` + `top` are the shell's (HOUSE TABLE STANDARD §8) — the
     header sticks to the top of its PANE. A page-local `top: 52px` used to
     park it a row down the pane; deleted 2026-08-20. */
  z-index: 11;
}
thead th.sortable { cursor: pointer; user-select: none; }
thead th.sortable:hover { color: #2563eb; }
thead th .sort-arrow { font-size: 9px; margin-left: 2px; opacity: .5; color: #cbd5e0; }
thead th.sort-active .sort-arrow { opacity: 1; color: #2563eb; }
/* .num / .mid alignment is the shell's (house standard) — do not re-declare. */
td { padding: 9px 12px; border-bottom: 1px solid #f0f2f6; background: #fff; }
tr.grp:hover td { background: #fafbfd; }
tr.grp.clickable { cursor: pointer; }

td.pic-cell { width: 42px; padding-right: 0; }
td.pic-cell img {
  width: 30px; height: 30px; object-fit: cover; border-radius: 4px;
  border: 1px solid #edf2f7; display: block;
}
.asin-label { font-family: 'IBM Plex Mono', 'SF Mono', Consolas, monospace; font-size: 12px; color: #636e72; }
.prod-name { font-weight: 600; font-size: 12.5px; color: #2d3436; }
.prod-sub { font-size: 11px; color: #98a1b0; margin-top: 2px; }
td a { color: #1a5fb4; text-decoration: none; }
td a:hover { text-decoration: underline; }

/* ── Badges ── */
.marketplace-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.badge-us { background: #dfe6e9; color: #2d3436; }
.badge-ca { background: #ffeaa7; color: #6c5ce7; }
.badge-mkt { background: #e7effd; color: #2563eb; }

.sev { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.sev.error, .sev.critical { background: #fdecea; color: #c0392b; }
.sev.warning { background: #fef5e7; color: #b9770e; }
.sev.info { background: #eef2f7; color: #5d6d7e; }

.pill { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; white-space: nowrap; display: inline-block; }
.pill.live { background: #e8f8f0; color: #1e8449; }
.pill.dead { background: #f1f3f5; color: #808b96; }
.pill.enforced { background: #fdecea; color: #c0392b; }
.pill.flagged { background: #eef2f7; color: #5d6d7e; }

.badge-new { background: #e8f8f0; color: #1e8449; font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 8px; margin-left: 6px; }
.badge-resolved { background: #eef2f7; color: #808b96; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 8px; margin-left: 6px; }

.count-chip {
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 700;
  padding: 2px 7px; border-radius: 8px; display: inline-block; margin-right: 4px;
}
.count-chip.err { background: #fdecea; color: #c0392b; }
.count-chip.wrn { background: #fef5e7; color: #b9770e; }

/* ── A VOC row Amazon is warning shoppers about ────────────────────────────
   The point of the colour is SCANNING: Gene was keeping this list by hand in a
   Google Doc, so a flagged product has to be findable without reading every
   row. Kept to a tint — the badge in the column carries the meaning, and a
   loud row would fight the return-rate pill that is already coloured. */
tbody tr.grp.amz-warned { background: #fff6f5; }
tbody tr.grp.amz-warned:hover { background: #ffecea; }
tbody tr.grp.amz-warned td:first-child { box-shadow: inset 3px 0 0 #dc2626; }

/* ── Reason / Description columns (Listings) ──────────────────────────────
   The only cells on the page allowed to WRAP. Every other td is nowrap +
   ellipsis, which is right for an ASIN or a date but would cut Amazon's
   complaint down to three words and hide the point of the column.
   Each is capped at 3 lines so a product with a long complaint cannot stretch
   the row past the 10-rows-on-screen rule (RULEBOOK Rule 6) — the opened row
   underneath still carries the untruncated text. */
td.cell-wrap {
  white-space: normal; line-height: 1.45; font-size: 12px;
  min-width: 190px; max-width: 320px; vertical-align: top; padding-top: 8px;
}
td.cell-wrap .stack-line {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; margin-bottom: 3px;
}
/* One problem per line, so a product with three of them reads as three rows
   in the cell and the two columns stay shoulder to shoulder. */
td.cell-wrap .stack-line:last-child { margin-bottom: 0; }
td.cell-wrap .sev { margin-right: 4px; }

/* ── A single rating move, in an opened Ratings row ───────────────────────
   "4.8 → 4.7  ·  −0.1  ·  Aug 26" — one move per line, newest first. */
.issue .rat-move { margin-bottom: 2px; font-size: 13px; }
.issue .rat-was { color: #808b96; }
.issue .rat-now b { color: #2d3436; }
.issue .rat-arrow { font-size: 14px; line-height: 1; }
.issue .rat-arrow.down { color: #c0392b; }
.issue .rat-arrow.up { color: #1e8449; }

/* ── Expanded detail rows (the house .cg-expand caret opens these) ── */
tr.detail-row > td { background: #fbfcfe; padding: 0 12px 12px 54px; border-bottom: 1px solid #eef1f5; }
.issue {
  border-left: 3px solid #e2e6ec; padding: 9px 0 9px 12px; margin-top: 10px;
  font-size: 12.5px; line-height: 1.65;
}
.issue.error { border-left-color: #dc2626; }
.issue.warning { border-left-color: #d97706; }
.issue .issue-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.issue .issue-msg { color: #3f4a5a; }
/* One fact per line — RULEBOOK Rule 6: never a stacked multi-clause paragraph */
.issue .fact { color: #6b7686; font-size: 12px; margin-top: 3px; }
.issue .fact b { color: #3f4a5a; font-weight: 600; }
.issue code {
  font-family: 'IBM Plex Mono', monospace; font-size: 11.5px;
  background: #eef2f7; padding: 1px 5px; border-radius: 4px; color: #3f4a5a;
}

/* Before / after, for the Changes tab */
.diff { margin-top: 8px; font-size: 12.5px; }
.diff .diff-field { font-weight: 700; color: #2d3436; margin-bottom: 3px; }
.diff .was, .diff .now { padding: 4px 8px; border-radius: 5px; line-height: 1.55; margin-bottom: 3px; }
.diff .was { background: #fdecea; color: #922b21; text-decoration: line-through; text-decoration-color: rgba(146,43,33,.35); }
.diff .now { background: #e8f8f0; color: #1e6b45; }

/* ── A photo change is shown as PHOTOS (migration 236) ────────────────────
   A row of Amazon image addresses tells a human nothing, so the before/after
   for `main image` and `image deck` draws the pictures themselves, numbered
   by their slot on the listing. A picture that is on BOTH sides is dimmed —
   the eye should land on the one that moved. Struck-through text would be
   nonsense over a photo, so these two rows drop it. */
.img-diff .was { text-decoration: none; }
.img-strip { display: flex; flex-wrap: wrap; gap: 6px; }
.img-chip { position: relative; display: block; width: 54px; height: 54px; border-radius: 5px; overflow: hidden; }
.img-chip img { width: 100%; height: 100%; object-fit: cover; display: block; background: #fff; }
.img-chip.gone { outline: 2px solid #c0392b; }
.img-chip.new  { outline: 2px solid #1e8449; }
.img-chip.same { opacity: .38; outline: 1px solid #dfe4ea; }
.img-slot {
  position: absolute; left: 0; bottom: 0; padding: 0 4px; font-size: 10px; font-weight: 700;
  background: rgba(0,0,0,.55); color: #fff; border-top-right-radius: 4px;
}
.img-note { font-size: 11.5px; color: #636e72; margin-top: 2px; }

.empty { padding: 30px; text-align: center; color: #8a94a6; font-size: 13px; line-height: 1.7; }
.loading { padding: 30px; text-align: center; color: #98a1b0; font-size: 13px; }