/* QuickBooks stock value + cost of goods sold (QuickBooks page, 2026-10-27). New UI standard: wf-kpi-thin cards, .inv-kind-switch tabs,
   Invoices-style rows, 44px targets, 24/16/12/8 spacing. Scoped to #qb-cogs-wrap. Theme tokens only (day + night). */
#qb-cogs-wrap { --qcg-amber: #b7791f; --qcg-green: #1f8a4c; --qcg-red: #c0392b; --qcg-grey: #7a8494; margin: 0 0 24px; padding: 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-card, var(--bg-raised)); }
html[data-remodel-mode="night"] #qb-cogs-wrap { --qcg-amber: #e0a33a; --qcg-green: #4cc282; --qcg-red: #ef6b5e; --qcg-grey: #9aa3b2; }
#qb-cogs-wrap[hidden] { display: none !important; }

.qcg-head { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 12px; margin: 0 0 12px; }
.qcg-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold); }
.qcg-title { margin: 2px 0 0; font-size: 20px; line-height: 26px; font-weight: 700; color: var(--white); }
.qcg-sub { margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.qcg-sub b { color: var(--white); font-weight: 600; }
.qcg-linkbtn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; margin: -12px 0; border: 0; background: none; color: var(--gold); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.qcg-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.qcg-acts .btn { min-height: 44px; }
.qcg-acts .btn[disabled] { opacity: .5; }

.qcg-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-raised); }
.qcg-edit .btn { min-height: 44px; }
.qcg-date { min-height: 44px; max-width: 200px; }
.qcg-lbl { font-size: 13px; font-weight: 600; color: var(--white); }
.qcg-hint { flex: 1 0 100%; font-size: 12.5px; color: var(--muted); }

.qcg-says { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 12px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-raised); font-size: 14px; color: var(--white); }
.qcg-says b { font-weight: 700; font-variant-numeric: tabular-nums; }
.qcg-says-w { color: var(--muted); }

.qcg-open { margin: 0 0 16px; padding: 16px; border: 1px solid var(--gold); border-radius: 12px; background: color-mix(in srgb, var(--gold) 6%, transparent); }
.qcg-open-t { font-size: 15px; font-weight: 700; color: var(--white); }
.qcg-open-s { margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.qcg-open-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; margin: 12px 0 0; font-size: 14px; color: var(--muted); }
.qcg-open-grid b { color: var(--white); font-variant-numeric: tabular-nums; text-align: right; }
.qcg-open-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.qcg-open-acts .btn { min-height: 44px; }

html body #qb-cogs-wrap .wf-kpi-rail.qcg-kpis, .qcg-kpis { display: flex; margin: 0 0 16px; }
@media (min-width: 601px) {
  html body #qb-cogs-wrap .wf-kpi-rail.qcg-kpis { --wf-kpi-cap: none; --wf-kpi-basis: 0px; }
  html body #qb-cogs-wrap .wf-kpi-rail.qcg-kpis > .pay-kpi { flex: 1 1 0 !important; max-width: none !important; min-width: 0; }
  html body #qb-cogs-wrap .wf-kpi-railwrap:has(> .qcg-kpis) .wf-kpi-progress { display: none; }
}
html body #qb-cogs-wrap .qcg-kpis .pay-kpi { cursor: pointer; }
html body #qb-cogs-wrap .wf-kpi-rail.qcg-kpis .pay-kpi-value { line-height: 1.3 !important; overflow: visible !important; height: auto !important; }
html body #qb-cogs-wrap .wf-kpi-rail.qcg-kpis .pay-kpi-label { white-space: normal !important; overflow-wrap: anywhere; overflow: visible !important; text-overflow: clip !important; }
html body #qb-cogs-wrap .wf-kpi-rail.qcg-kpis .pay-kpi > * { min-width: 0; }
html body #qb-cogs-wrap .qcg-kpis .pay-kpi.is-on { border-color: var(--gold); }
@media (min-width: 601px) { html body #qb-cogs-wrap .wf-kpi-rail.qcg-kpis .pay-kpi-sub, html body #qb-cogs-wrap .wf-kpi-rail.qcg-kpis .pay-kpi-footer { white-space: normal !important; overflow-wrap: anywhere; text-overflow: clip; display: block !important; } }

.qcg-tabs { margin: 0 0 12px; }
.qcg-tabs .inv-kind-tab { min-height: 44px; }
.qcg-n { margin-left: 4px; font-variant-numeric: tabular-nums; opacity: .7; }

.qcg-card { background: var(--bg-raised); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.qcg-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(170px, auto); column-gap: 16px; align-items: center; padding: 12px 16px; min-height: 64px; border-top: 1px solid var(--border); }
.qcg-row:first-child { border-top: 0; }
.qcg-c { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qcg-c-amt { align-items: flex-end; gap: 6px; text-align: right; }
.qcg-name { font-size: 15px; font-weight: 600; color: var(--white); overflow-wrap: anywhere; }
.qcg-meta { font-size: 12.5px; line-height: 1.4; color: var(--muted); overflow-wrap: anywhere; }
.qcg-amt { font-size: 15px; font-weight: 700; color: var(--white); font-variant-numeric: tabular-nums; white-space: nowrap; }
.qcg-move { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.qcg-rowbtn { min-height: 44px; }
.qcg-pill { display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; line-height: 1.35; white-space: nowrap; color: var(--qcg-tone, var(--qcg-grey)); background: color-mix(in srgb, var(--qcg-tone, var(--qcg-grey)) 12%, transparent); }
.qcg-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--qcg-tone, var(--qcg-grey)); }
.qcg-pill[data-tone="green"] { --qcg-tone: var(--qcg-green); }
.qcg-pill[data-tone="amber"] { --qcg-tone: var(--qcg-amber); }
.qcg-pill[data-tone="red"] { --qcg-tone: var(--qcg-red); }
.qcg-more { display: block; width: 100%; min-height: 44px; border: 0; border-top: 1px solid var(--border); background: none; color: var(--gold); font: inherit; font-weight: 600; cursor: pointer; }
.qcg-empty { padding: 24px 16px; text-align: center; }
.qcg-empty-t { font-size: 15px; font-weight: 600; color: var(--white); }
.qcg-empty-s { margin-top: 4px; font-size: 13px; color: var(--muted); }

@media (max-width: 640px) {
  #qb-cogs-wrap { padding: 12px; }
  .qcg-acts .btn { flex: 1 1 100%; }
  html body #qb-cogs-wrap .qcg-row { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  html body #qb-cogs-wrap .qcg-c-amt { align-items: flex-start; text-align: left; }
  .qcg-move { white-space: normal; }
  .qcg-tabs { width: 100%; display: flex; flex-wrap: nowrap; gap: 4px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .qcg-tabs::-webkit-scrollbar { display: none; }
  .qcg-tabs .inv-kind-tab { flex: 0 0 auto; white-space: nowrap; }
}