/* ============================================
   Replenishment SKU QA Modal — styles
   Loaded on the host page (Replenishment by MOQ Group, by SKU, by Product)
   AND when the qa_panel partial renders into the drawer.
   ============================================ */

/* ─── Backdrop + drawer chrome (host page) ────────────── */
.qa-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.42);
  opacity: 0; pointer-events: none;
  transition: opacity 200ms ease;
  z-index: 500;
}
.qa-backdrop.open { opacity: 1; pointer-events: auto; }

.qa-drawer {
  position: fixed; right: 0; top: 0; bottom: 0;
  width: 580px; max-width: 100vw;
  background: var(--surface);
  box-shadow: -4px 0 32px rgba(0, 0, 0, 0.12);
  transform: translateX(100%);
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 600;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.qa-drawer.open { transform: translateX(0); }
.qa-drawer turbo-frame { display: block; flex: 1; overflow-y: auto; overflow-x: hidden; }

/* Active row highlight in the host table. !important wins against the host
   table's many other row state classes (hover, status, sub-MOQ, etc.) without
   us needing to enumerate every selector that might conflict. */
tr.qa-active-row,
tr.qa-active-row td {
  background: #F0F4FA !important;
}

/* ─── Header Row A — identity ─────────────────────────── */
.qa-dh-a {
  padding: 14px 18px 12px;
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.qa-dh-nav {
  display: inline-flex; align-items: center;
  background: #F5F4F0; border: 1px solid var(--border);
  border-radius: 6px; overflow: hidden;
  flex-shrink: 0;
}
.qa-dh-nav-btn {
  display: inline-block;
  background: transparent; border: none;
  padding: 3px 8px; cursor: pointer;
  color: var(--muted); font-size: 15px; line-height: 1;
  text-decoration: none;
}
.qa-dh-nav-btn:hover { background: var(--border); color: var(--ink); }
.qa-dh-nav-btn.is-disabled { opacity: 0.35; pointer-events: none; cursor: not-allowed; }
.qa-dh-nav-pos {
  padding: 0 9px;
  font-size: 11px; font-weight: 500;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  line-height: 26px;
}

.qa-sku-pill {
  display: inline-flex; align-items: center;
  padding: 2px 9px;
  background: #F4F1EB;
  border: 1px solid #D6D2CA;
  border-radius: 5px;
  font-size: 12px; font-weight: 600;
  font-family: ui-monospace, monospace;
}
.qa-abc-badge {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 10px; font-weight: 700;
  height: 17px;
}
.qa-abc-a1 { background: #FEF3C7; color: #92400E; }
.qa-abc-a2 { background: #FED7AA; color: #9A3412; }
.qa-abc-b  { background: #EFF6FF; color: #1F6FB2; }
.qa-abc-c  { background: #F3F2EE; color: #6B6B6B; }

.qa-dh-product { flex: 1 1 0; min-width: 0; }
.qa-dh-product-variant {
  font-size: 11px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qa-dh-product-variant strong { color: var(--ink); font-weight: 600; }

.qa-dh-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.qa-dh-close {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid #D6D2CA;
  border-radius: 5px; cursor: pointer;
  font-size: 15px; color: var(--muted);
}
.qa-dh-close:hover { background: #F5F4F0; color: var(--ink); }

/* ─── Confidence pill (Row A + KPI card) ──────────────── */
.qa-acc-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
}
.qa-acc-pill--green { background: #DCFCE7; color: #16A34A; }
.qa-acc-pill--amber { background: #FFFBEB; color: #D97706; }
.qa-acc-pill--red   { background: #FEF2F2; color: #DC2626; }
.qa-acc-pill--grey  { background: #F3F2EE; color: #6B6B6B; }
.qa-acc-pill--cold  { background: #EFF6FF; color: #1F6FB2; }
.qa-acc-dot {
  width: 11px; height: 11px; border-radius: 50%;
  display: inline-block; vertical-align: middle;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.qa-acc-dot--green { background: #16A34A; }
.qa-acc-dot--amber { background: #D97706; }
.qa-acc-dot--red   { background: #DC2626; }
.qa-acc-dot--grey  { background: transparent; border: 2px solid #A09A94; }
.qa-acc-dot--cold  { background: #1F6FB2; }
/* Hover affordance: subtle ring + scale so the dot reads as an interactive
   informational element. Tinted shadow color matches state. */
.qa-acc-dot:hover {
  transform: scale(1.45);
}
.qa-acc-dot--green:hover { box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.20); }
.qa-acc-dot--amber:hover { box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.20); }
.qa-acc-dot--red:hover   { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.20); }
.qa-acc-dot--grey:hover  { box-shadow: 0 0 0 4px rgba(160, 154, 148, 0.22); }
.qa-acc-dot--cold:hover  { box-shadow: 0 0 0 4px rgba(31, 111, 178, 0.20); }
.qa-acc-new {
  display: inline-flex; align-items: center; justify-content: center;
  height: 16px; padding: 0 6px;
  border-radius: 9px;
  background: #EFF6FF; color: #1F6FB2;
  font-size: 9px; font-weight: 700; letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.qa-acc-new:hover {
  transform: scale(1.1);
  box-shadow: 0 0 0 4px rgba(31, 111, 178, 0.18);
}
.qa-acc-m1 {
  display: inline-flex; align-items: center; justify-content: center;
  color: #D97706;
  width: 18px; height: 18px;
  cursor: pointer;
  transition: transform 120ms ease, filter 120ms ease;
}
.qa-acc-m1 svg {
  width: 16px; height: 16px;
  stroke: currentColor;
  fill: #FFFBEB;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.qa-acc-m1:hover {
  transform: scale(1.25);
  filter: drop-shadow(0 0 4px rgba(217, 119, 6, 0.45));
}

/* ─── Header Row B — metadata strip ───────────────────── */
.qa-dh-b {
  padding: 8px 18px;
  font-size: 12px; color: var(--muted);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; flex-wrap: wrap;
  flex-shrink: 0;
}
.qa-dh-b strong { color: var(--ink); font-weight: 600; }
.qa-dh-sep { color: #A09A94; margin: 0 7px; }
.qa-dh-link {
  color: #1F6FB2; text-decoration: none; font-weight: 500;
  margin-left: auto;
}
.qa-dh-link:hover { text-decoration: underline; }

/* ─── Header Row C — KPI strip ────────────────────────── */
.qa-dh-c {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-bottom: 2px solid var(--border);
  flex-shrink: 0;
}
.qa-kpi-card {
  padding: 12px 14px;
  border-right: 1px solid var(--border);
  position: relative;
}
.qa-kpi-card:last-child { border-right: none; }
.qa-kpi-lbl {
  font-size: 9px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: #A09A94;
  margin-bottom: 5px;
}
.qa-kpi-val { font-size: 20px; font-weight: 700; line-height: 1.1; }
.qa-kpi-u { font-size: 12px; font-weight: 500; color: #A09A94; margin-left: 1px; }
.qa-kpi-val--engine { color: #D43C3C; }
.qa-kpi-val--ai     { color: #7C3AED; }
.qa-kpi-val--d-warn { color: #EA580C; }
.qa-kpi-val--d-alert { color: #DC2626; }
.qa-kpi-val--muted  { color: #A09A94; }
.qa-kpi-val--green  { color: #16A34A; }
.qa-kpi-val--amber  { color: #D97706; }
.qa-kpi-val--red    { color: #DC2626; }
.qa-kpi-val--grey   { color: #6B6B6B; }
.qa-kpi-val--cold   { color: #1F6FB2; }
.qa-kpi-sub { font-size: 11px; color: #A09A94; margin-top: 3px; }
.qa-kpi-card--accuracy .qa-kpi-val { font-size: 15px; font-weight: 600; }

.qa-kpi-card--ai { cursor: help; }
.qa-kpi-tip {
  position: absolute; top: calc(100% + 8px); left: 50%;
  transform: translateX(-50%);
  background: #111; color: #eee;
  padding: 10px 12px; border-radius: 6px;
  font-size: 11px; line-height: 1.45;
  width: 248px; z-index: 20;
  opacity: 0; pointer-events: none;
  transition: opacity 150ms;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.qa-kpi-tip::before {
  content: ''; position: absolute; bottom: 100%; left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent; border-bottom-color: #111;
}
.qa-kpi-card--ai:hover .qa-kpi-tip { opacity: 1; }

/* ─── Body blocks ─────────────────────────────────────── */
.qa-body { padding: 0; }
.qa-block {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.qa-block:last-child { border-bottom: none; }
.qa-block-lbl {
  font-size: 9px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: #A09A94;
  margin-bottom: 10px;
}

/* FRQ banner */
.qa-frq-banner {
  display: flex; align-items: flex-start; gap: 10px;
  background: #FFFBEB; border: 1px solid #FCD34D;
  border-radius: 8px; padding: 10px 12px;
}
.qa-frq-icon {
  width: 22px; height: 22px;
  background: #D97706; color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.qa-frq-content { flex: 1; }
.qa-frq-title {
  font-size: 12px; font-weight: 600; color: #78350F;
  display: flex; align-items: center; gap: 7px;
}
.qa-frq-meta { font-size: 11px; color: #92400E; margin-top: 3px; }
.qa-frq-link {
  font-size: 11px; color: #1F6FB2; font-weight: 500;
  text-decoration: none; margin-top: 4px; display: inline-block;
}
.qa-frq-link:hover { text-decoration: underline; }
.qa-status-pill {
  display: inline-block; padding: 1px 6px;
  border-radius: 4px; font-size: 10px; font-weight: 600;
}
.qa-status-pill--pending  { background: #FEF3C7; color: #78350F; }
.qa-status-pill--resolved { background: #DCFCE7; color: #16A34A; }
.qa-status-pill--snoozed  { background: #F3F2EE; color: #6B6B6B; }

/* Stale-forecast banner (D2) */
.qa-stale-banner {
  display: flex; align-items: center; gap: 8px;
  background: #FFFBEB; border: 1px solid #FCD34D;
  border-radius: 7px; padding: 8px 11px;
  font-size: 12px; color: #78350F;
  margin-bottom: 12px;
}
.qa-stale-icon {
  width: 18px; height: 18px;
  background: #D97706; color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
}

/* YoY / Availability strips */
.qa-yoy-strip {
  display: flex; gap: 14px; flex-wrap: wrap;
  background: #FAFAF7; border: 1px solid var(--border);
  border-radius: 7px; padding: 8px 12px;
  margin-bottom: 10px;
  font-size: 12px;
}
.qa-yoy-item { display: inline-flex; align-items: center; gap: 4px; }
.qa-yoy-lbl  { color: var(--muted); }
.qa-yoy-val  { font-weight: 600; }
.qa-yoy-up   { color: #16A34A; }
.qa-yoy-down { color: #DC2626; }
.qa-yoy-flat { color: var(--muted); }
.qa-hint     { color: #A09A94; cursor: help; }

/* Sales Context — cohort table (V1 redesign 2026-05-12, 580px-fit) */
.qa-sc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.qa-sc-summary-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 18px 16px;
  border-bottom: 1px solid var(--border);
}
.qa-sc-summary-block { display: flex; flex-direction: column; gap: 3px; }
.qa-sc-summary-divider { width: 1px; height: 36px; background: var(--border); }
.qa-sc-summary-lbl { font-size: 11px; color: var(--muted); }
.qa-sc-summary-val {
  font-size: 18px; font-weight: 700;
  display: inline-flex; align-items: center;
  gap: 5px; letter-spacing: -0.2px;
}
.qa-sc-summary-foot {
  font-size: 11px; color: var(--muted); margin-top: 2px;
}
.qa-sc-summary-foot strong { color: var(--ink); font-weight: 600; }
.qa-sc-accent   { color: #E54D2E; }
.qa-sc-mono     { font-family: ui-monospace, monospace; font-weight: 600; }
.qa-sc-sep      { color: #D4D2CD; margin: 0 3px; font-weight: 400; }
.qa-sc-pos      { color: #16A34A; }
.qa-sc-neg      { color: #DC2626; }
.qa-sc-flat     { color: var(--muted); }
.qa-sc-pos-soft { color: #16A34A; font-weight: 600; font-variant-numeric: tabular-nums; }
.qa-sc-neg-soft { color: #DC2626; font-weight: 600; font-variant-numeric: tabular-nums; }
.qa-sc-dash     { color: #CCC; }

.qa-sc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.qa-sc-table thead th {
  background: #FAFAF8;
  color: #B0AEAD;
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  padding: 10px 8px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.qa-sc-table thead th:first-child { padding-left: 18px; }
.qa-sc-table thead th:last-child  { padding-right: 18px; }
.qa-sc-table thead th.num         { text-align: right; }
.qa-sc-table tbody td {
  padding: 12px 8px;
  border-bottom: 1px solid #F5F4F2;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
.qa-sc-table tbody td:first-child { padding-left: 18px; }
.qa-sc-table tbody td:last-child  { padding-right: 18px; }
.qa-sc-table tbody td.num         { text-align: right; }
.qa-sc-table tbody tr:last-child td { border-bottom: none; }
.qa-sc-table tbody tr.qa-sc-tripped td { background: #FFFBEB; }
.qa-sc-period { font-weight: 600; }
.qa-sc-strong { font-weight: 700; }
.qa-sc-ratio {
  font-family: ui-monospace, monospace;
  font-weight: 500;
  color: var(--muted);
  margin-left: 6px;
  font-size: 11px;
}
.qa-sc-alert {
  display: flex; gap: 9px; align-items: flex-start;
  background: #FFFBEB; border: 1px solid #FCD34D;
  border-radius: 7px; padding: 9px 12px;
  margin-top: 10px;
  font-size: 12px; color: #78350F; line-height: 1.5;
}
.qa-sc-alert-icon {
  width: 17px; height: 17px;
  background: #D97706; color: #fff;
  border-radius: 50%;
  text-align: center; line-height: 17px;
  font-size: 10px; font-weight: 700;
  flex-shrink: 0; margin-top: 1px;
}

/* Forecast Panel */
.qa-fp-spark {
  width: 100%; height: 72px; margin-bottom: 12px;
  border: 1px solid var(--border); border-radius: 6px;
  background: #FCFCFB; overflow: hidden;
}
.qa-fp-cols { display: grid; gap: 10px; }
.qa-fp-cols--c3 { grid-template-columns: 1fr 1fr 1fr; }
.qa-fp-cols--c2 { grid-template-columns: 1fr 1fr; }
.qa-fp-col {
  padding: 10px 11px;
  background: #FAFAF7; border: 1px solid var(--border);
  border-radius: 7px;
}
.qa-fp-col-hdr {
  font-size: 9px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 6px;
}
.qa-fp-model-badge {
  display: inline-block; padding: 1px 5px;
  background: #EFF6FF; color: #1F6FB2;
  font-size: 10px; font-weight: 600;
  border-radius: 3px; margin-bottom: 3px;
}
.qa-fp-add { display: flex; align-items: baseline; gap: 2px; }
.qa-fp-add-v { font-size: 17px; font-weight: 700; }
.qa-fp-add-u { font-size: 11px; color: #A09A94; }
.qa-fp-sugg { font-size: 12px; margin-top: 3px; color: var(--muted); }
.qa-fp-sugg strong { color: var(--ink); font-weight: 600; }
.qa-fp-params {
  font-size: 10px; color: #A09A94;
  font-family: ui-monospace, monospace; margin-top: 4px;
  letter-spacing: -0.01em;
}
.qa-fp-delta {
  display: inline-block; padding: 2px 7px;
  border-radius: 5px; font-size: 11px; font-weight: 600;
  margin-top: 3px;
}
.qa-fp-delta--agree    { background: #DCFCE7; color: #16A34A; }
.qa-fp-delta--moderate { background: #FFFBEB; color: #D97706; }
.qa-fp-delta--diverge  { background: #FEF2F2; color: #DC2626; }
.qa-fp-delta-note { font-size: 10px; color: #A09A94; margin-top: 2px; }
.qa-fp-mlist { font-size: 12px; }
.qa-fp-mr {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 0;
  border-top: 1px solid var(--border);
}
.qa-fp-mr:first-child { border-top: none; }
.qa-fp-mr .lbl { color: var(--muted); }
.qa-fp-mr .val { font-weight: 500; }
.qa-fp-acc {
  display: inline-block; padding: 1px 4px;
  border-radius: 3px;
  font-size: 9px; font-weight: 600;
  margin-left: 4px;
}
.qa-fp-acc--g { background: #DCFCE7; color: #16A34A; }
.qa-fp-acc--f { background: #FFFBEB; color: #D97706; }
.qa-fp-acc--p { background: #FEF2F2; color: #DC2626; }
.qa-fp-last4 {
  margin-top: 9px; padding: 7px 11px;
  background: #FCFCFB; border: 1px dashed #D6D2CA;
  border-radius: 6px;
  font-size: 11px; color: var(--muted);
  font-family: ui-monospace, monospace;
}
.qa-fp-last4 strong { color: var(--ink); }

/* Quality flags list */
.qa-fq-flags { list-style: none; padding: 0; margin: 0; }
.qa-fq-flags li {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: 12px; padding: 3px 0;
}
.qa-fq-flag-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px;
  border-radius: 50%;
  font-size: 9px; font-weight: 700;
  flex-shrink: 0; margin-top: 1px;
}
.qa-fq-fw .qa-fq-flag-icon { background: #FFFBEB; color: #D97706; }
.qa-fq-fo .qa-fq-flag-icon { background: #DCFCE7; color: #16A34A; }
.qa-fq-fi .qa-fq-flag-icon { background: #EFF6FF; color: #1F6FB2; }
.qa-fq-fn .qa-fq-flag-icon { background: #EFF6FF; color: #1F6FB2; }
.qa-fq-flag-icon--pill {
  width: auto;
  padding: 0 6px;
  border-radius: 9px;
  font-size: 9px;
  letter-spacing: 0.04em;
}

/* AI Analysis card */
.qa-ai-card {
  border: 1px solid var(--border); border-radius: 7px;
  padding: 11px 13px;
}
.qa-ai-card-hdr {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer;
}
.qa-ai-card-title {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600;
}
.qa-ai-rec {
  display: inline-block; padding: 2px 7px; border-radius: 999px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase;
}
.qa-ai-rec--investigate   { background: #FEF2F2; color: #DC2626; }
.qa-ai-rec--override-up   { background: #FED7AA; color: #9A3412; }
.qa-ai-rec--override-down { background: #FFFBEB; color: #D97706; }
.qa-ai-rec--approve       { background: #DCFCE7; color: #16A34A; }
.qa-ai-sum  { font-size: 12px; color: var(--muted); margin-top: 5px; line-height: 1.5; }
.qa-ai-body {
  display: none;
  margin-top: 9px; padding-top: 9px;
  border-top: 1px solid var(--border);
  font-size: 12px; line-height: 1.6;
}
.qa-ai-card.is-expanded .qa-ai-body { display: block; }
.qa-ai-card.is-expanded .qa-ai-sum  { display: none; }
.qa-ai-chev {
  font-size: 17px; color: #A09A94;
  transition: transform 180ms;
}
.qa-ai-card.is-expanded .qa-ai-chev { transform: rotate(180deg); }
.qa-ai-ts { font-size: 10px; color: #A09A94; margin-top: 7px; }

/* Empty / placeholder cards */
.qa-empty-card {
  padding: 22px 14px; text-align: center;
  background: #FAFAF7; border: 1px dashed #D6D2CA;
  border-radius: 7px;
  color: var(--muted); font-size: 12px;
}
.qa-empty-title {
  font-weight: 600; color: var(--ink);
  margin-bottom: 5px; font-size: 13px;
}
/* AI analyze button — mirrors .frq-btn-analyze styling from the Forecast
   Review Queue card so all AI affordances across the app share one visual
   language (purple, outline, sparkle icon, light-purple hover wash). Used in
   the empty AI-analysis card AND as the Re-analyze button in the override row. */
.qa-analyze-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  background: none;
  border: 1px solid #C4B5FD;
  border-radius: 8px;
  color: #7C3AED;
  font-family: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer;
}
.qa-analyze-btn:hover { background: #F5F3FF; }
.qa-analyze-spinner {
  display: inline-block;
  width: 12px; height: 12px;
  border: 2px solid #C4B5FD;
  border-top-color: #7C3AED;
  border-radius: 50%;
  animation: qa-spin 0.65s linear infinite;
  vertical-align: middle;
  margin-right: 2px;
}
@keyframes qa-spin { to { transform: rotate(360deg); } }
.qa-analyze-btn:disabled,
.qa-analyze-btn--disabled { opacity: 0.5; cursor: not-allowed; }
.qa-analyze-btn:disabled:hover,
.qa-analyze-btn--disabled:hover { background: none; }
/* Empty-state card: push the button down a bit so it sits below the descriptive text. */
.qa-empty-card .qa-analyze-btn { margin-top: 11px; }

/* Override block */
.qa-ov-label-row { font-size: 12px; color: var(--muted); margin-bottom: 9px; }
.qa-ov-choices {
  display: flex; gap: 7px; flex-wrap: wrap;
  margin-bottom: 9px;
}
.qa-ov-opt {
  display: inline-flex; align-items: center;
  padding: 6px 12px;
  border: 1.5px solid #D6D2CA; border-radius: 6px;
  background: var(--surface);
  font-size: 12px; font-weight: 500;
  cursor: pointer; user-select: none;
}
.qa-ov-opt:hover { background: #FAFAF7; }
.qa-ov-opt--sel { border-color: #D43C3C; color: #D43C3C; background: #FEF2F2; }
.qa-ov-opt--disabled { opacity: 0.45; cursor: not-allowed; }
.qa-ov-opt input[type="radio"] { display: none; }

.qa-ov-custom {
  display: inline-flex; align-items: center;
  padding: 6px 11px;
  border: 1.5px solid #D6D2CA; border-radius: 6px;
  gap: 5px; font-size: 12px;
}
.qa-ov-custom-lbl { color: var(--muted); font-size: 12px; }
.qa-ov-custom-input {
  width: 58px; border: none; outline: none;
  font-family: inherit; font-size: 12px; text-align: right;
  background: transparent;
}
.qa-ov-custom-u { color: #A09A94; font-size: 12px; }

.qa-ov-note {
  width: 100%;
  padding: 8px 11px;
  border: 1px solid #D6D2CA; border-radius: 5px;
  font-size: 12px; font-family: inherit;
  margin-bottom: 9px; resize: vertical; min-height: 36px;
}
.qa-ov-opts-row {
  display: flex; align-items: center; gap: 16px;
  font-size: 12px; margin-bottom: 13px;
}
.qa-ov-opts-row label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.qa-ov-opts-row select {
  padding: 3px 7px;
  border: 1px solid #D6D2CA; border-radius: 4px;
  font-family: inherit; font-size: 12px;
}
.qa-ov-btns { display: flex; gap: 7px; align-items: center; }

.qa-btn {
  padding: 7px 13px;
  border: 1px solid transparent; border-radius: 5px;
  font-size: 12px; font-weight: 600;
  font-family: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
}
.qa-btn--primary { background: #D43C3C; color: #fff; }
.qa-btn--primary:hover { background: #C03434; }
.qa-btn--secondary {
  background: var(--surface); color: var(--ink);
  border-color: #D6D2CA;
}
.qa-btn--secondary:hover { background: #F5F4F0; }
.qa-btn--link {
  background: transparent; color: #1F6FB2;
  border: none; padding: 7px 5px;
  text-decoration: none;
}
.qa-btn--link:hover { text-decoration: underline; }
.qa-btn--disabled,
.qa-btn:disabled {
  opacity: 0.5; cursor: not-allowed;
  pointer-events: none;
}

/* ─── Responsive: viewport < 768px ─────────────────────── */
@media (max-width: 767px) {
  /* Drawer takes the whole screen */
  .qa-drawer { width: 100vw; }

  /* Header Row A — wrap onto multiple lines, smaller pills */
  .qa-dh-a {
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 14px 10px;
  }
  .qa-dh-product { order: 99; flex: 1 1 100%; min-width: 0; }
  .qa-dh-actions { margin-left: auto; }
  .qa-acc-pill { font-size: 11px; padding: 2px 8px; }
  .qa-acc-pill { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Row B — compact metadata */
  .qa-dh-b { padding: 7px 14px; font-size: 11px; }
  .qa-dh-sep { margin: 0 5px; }
  .qa-dh-link { margin-left: 0; margin-top: 4px; flex-basis: 100%; }

  /* Row C — 2x2 grid */
  .qa-dh-c { grid-template-columns: repeat(2, 1fr); }
  .qa-kpi-card {
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 10px 12px;
  }
  .qa-kpi-card:nth-child(2n) { border-right: none; }
  .qa-kpi-card:nth-last-child(-n+2) { border-bottom: none; }
  .qa-kpi-val { font-size: 17px; }
  .qa-kpi-card--accuracy .qa-kpi-val { font-size: 14px; }
  /* Tooltip on AI card: full-width pinned to bottom of card */
  .qa-kpi-tip { width: 90vw; max-width: 280px; }

  /* Body padding */
  .qa-block { padding: 12px 14px; }

  /* Sales Context — summary strip stacks, table tightens its padding */
  .qa-sc-summary-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .qa-sc-summary-divider { display: none; }
  .qa-sc-table thead th,
  .qa-sc-table tbody td { padding: 9px 6px; font-size: 12px; }
  .qa-sc-table thead th:first-child,
  .qa-sc-table tbody td:first-child { padding-left: 12px; }
  .qa-sc-table thead th:last-child,
  .qa-sc-table tbody td:last-child  { padding-right: 12px; }
  .qa-sc-ratio { display: block; margin-left: 0; margin-top: 2px; }

  /* Forecast Panel — stack columns vertically */
  .qa-fp-cols--c3,
  .qa-fp-cols--c2 { grid-template-columns: 1fr; }

  /* YoY strips — tighter gap, wrap */
  .qa-yoy-strip { gap: 10px; padding: 7px 10px; }

  /* Override block — radio buttons stack */
  .qa-ov-choices { flex-direction: column; align-items: stretch; gap: 6px; }
  .qa-ov-opt, .qa-ov-custom { width: 100%; }
  .qa-ov-custom-input { flex: 1; width: auto; }
  .qa-ov-btns { flex-wrap: wrap; }
  .qa-ov-btns .qa-btn { flex: 1 1 auto; justify-content: center; }
  .qa-ov-opts-row { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ─── Override history mini-list ──────────────────────── */
.qa-ov-history-details {
  /* Native <details> disclosure; collapsed by default. */
}
.qa-ov-history-details > .qa-ov-history-list,
.qa-ov-history-details > .qa-ov-history-more {
  margin-top: 8px;
}
.qa-ov-history-summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  user-select: none;
}
.qa-ov-history-summary::-webkit-details-marker { display: none; }
.qa-ov-history-summary::before {
  content: "";
  display: inline-block;
  width: 0; height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid currentColor;
  margin-right: 4px;
  transition: transform 120ms ease;
}
.qa-ov-history-details[open] > .qa-ov-history-summary::before {
  transform: rotate(90deg);
}
.qa-ov-history-count {
  font-size: 10px; font-weight: 500;
  color: #A09A94; letter-spacing: 0;
  text-transform: none;
  margin-left: 4px;
}
.qa-ov-history-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: 7px;
  overflow: hidden;
}
.qa-ov-history-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 11px;
  font-size: 11px;
  border-top: 1px solid var(--border);
  background: #FAFAF7;
}
.qa-ov-history-row:first-child { border-top: none; }
.qa-ov-history-when {
  color: var(--muted);
  white-space: nowrap; min-width: 80px;
}
.qa-ov-history-pct {
  font-weight: 600;
  font-family: ui-monospace, monospace;
  min-width: 50px; text-align: right;
}
.qa-ov-history-pct--up   { color: #D43C3C; }
.qa-ov-history-pct--down { color: #16A34A; }
.qa-ov-history-note {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--ink);
}
.qa-ov-history-who {
  color: #A09A94;
  white-space: nowrap;
  margin-left: auto;
}
.qa-ov-history-more {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 11px 0;
  font-size: 11px; color: var(--muted);
}
.qa-ov-history-link {
  color: #1F6FB2; font-weight: 500;
  text-decoration: none;
}
.qa-ov-history-link:hover { text-decoration: underline; }

/* Mobile: stack the row so the note doesn't truncate aggressively */
@media (max-width: 767px) {
  .qa-ov-history-row {
    flex-wrap: wrap;
    gap: 4px 8px;
  }
  .qa-ov-history-note {
    flex-basis: 100%;
    white-space: normal;
  }
}

/* ─── Row-level ratio badge (group table — PR3) ───────── */
.qa-ratio-badge {
  display: inline-flex; align-items: center;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 10px; font-weight: 700;
  font-family: ui-monospace, monospace;
  margin-left: 4px;
  cursor: help;
}
.qa-ratio-badge--info  { background: #FFFBEB; color: #D97706; }
.qa-ratio-badge--warn  { background: #FED7AA; color: #9A3412; }
.qa-ratio-badge--alert { background: #FEF2F2; color: #DC2626; }