/* ============================================================================
   GSB DESIGN SYSTEM v3 — New P&L Report (#newdev-screen.sf-pnl-report-view)
   The report is the Sales Flash screen in its P&L view, so the title row and the
   command bar already wear v3 (gsb-sales-flash.css / gsb-sf-two-lens.css). This
   file covers the report BODY: the P&L Analysis portal home (#sf-pnl-home) and
   the P&L Comparison (#sf-compare-section).
   - The report's own renderers (lt-app-v2.js SALES FLASH P&L SECTION, js/sf-store-
     compare.js, their index.html markup) were remapped to v3 hexes at the source.
   - The tables and charts it shares with other tabs (renderPnLTables, pnl-tables.js,
     the period charts) keep their colours elsewhere; here a small bridge below and
     js/vdd-chart-theme.js (which also themes canvases in this view) recolour them.
   Tokens are the global --ds-* set in gsb-tokens.css. Loaded after the Sales
   Flash sheets.
   ============================================================================ */

/* ---- Legacy aliases + page ground: the same v3 base the Sales Flash view gets in
   gsb-sales-flash-v3.css (sections 1-2), which skips this view. Inline var() styles in
   the shared renderers read these. ---- */
#newdev-screen.sf-pnl-report-view {
  --heading: var(--ds-ink);
  --text-main: var(--ds-ink);
  --text-secondary: var(--ds-muted);
  --text-muted: var(--ds-muted);
  --border: var(--ds-mist);
  --border-dark: #CBD3CB;
  --primary: var(--ds-moss);
  --primary-hover: var(--ds-forest);
  --primary-bg: var(--ds-mist);
  --success: var(--ds-accent-text);
  --danger: var(--ds-clay);
  --warning: var(--ds-ochre);
  --surface: var(--ds-snow);
  --bg: var(--ds-snow);
  --radius: 0;
  --shadow-sm: none;
  --shadow-md: none;
  --font-main: var(--ds-font);
  --font-body: var(--ds-font);
  --font-display: var(--ds-font);
  --font-mono: var(--ds-font);
  --gsb-paper: var(--ds-snow);
  --gsb-soil-ink: var(--ds-ink);
  --gsb-espresso: var(--ds-pine);
  --gsb-stone: var(--ds-muted);
  --gsb-oat: var(--ds-mist);
  --gsb-oat-dk: #CBD3CB;
  --gsb-shoot-green: var(--ds-moss);
  --gsb-leaf: var(--ds-sage);
  --gsb-clay: var(--ds-clay);
  --gsb-ochre: var(--ds-ochre);
  --gsb-sage: var(--ds-forest);
  --color-bg: var(--ds-snow);
  --color-surface: var(--ds-frost);
  --color-border: var(--ds-rule);
  --color-text: var(--ds-ink);
  --color-text-muted: var(--ds-muted);
  --color-accent: var(--ds-moss);
  --data-positive: var(--ds-accent-text);
  --data-negative: var(--ds-clay);
  --data-watch: var(--ds-ochre);
  --data-benchmark: var(--ds-muted);
  /* share-of-sales ramp: v3 data palette, moss leads */
  --data-cat-1: var(--ds-moss);
  --data-cat-2: var(--ds-sage);
  --data-cat-3: var(--ds-forest);
  --data-cat-4: var(--ds-mist);
  --data-cat-5: var(--ds-slate);
  --radius-sm: 0; --radius-md: 0; --radius-lg: 0;
  --rule-hairline: 1px solid var(--ds-rule);

  -webkit-font-smoothing: antialiased;
}
body:has(#newdev-screen.active.sf-pnl-report-view),
html:has(#newdev-screen.active.sf-pnl-report-view) { background: var(--ds-snow) !important; }
body:has(#newdev-screen.active.sf-pnl-report-view) main { background: transparent !important; }
body:has(#newdev-screen.active.sf-pnl-report-view) header {
  background: var(--ds-snow) !important; border-bottom: 1px solid var(--ds-rule) !important;
}

/* ---- Pinned filter row (desktop), same mechanism as Sales Flash: the nav-bar sticks
   with a negative top (--sf-stick-top, measured by sfSetupStickyHeader in newdev-app.js)
   so the title slides away and the Brand / Region / Leader / store row stays in view.
   The release rules for open panels in gsb-sf-two-lens.css apply here too. ---- */
@media (min-width: 601px) {
  #newdev-screen.sf-pnl-report-view > .nav-bar {
    position: sticky; top: var(--sf-stick-top, -56px); z-index: 40;
    background: var(--ds-snow) !important; padding-bottom: 8px !important;
  }
}
/* Phones: the filter box is one compact "Filters" row, so the report pins it too (Sales
   Flash's phone bar carries the date and time frame, which the P&L doesn't use). It lets
   go while the filters are expanded, so the open panel can never trap the page. */
@media (max-width: 600px) {
  #newdev-screen.sf-pnl-report-view > .nav-bar {
    position: sticky; top: var(--sf-stick-top, -56px); z-index: 40;
    background: var(--ds-snow) !important; padding-bottom: 6px !important;
  }
  #newdev-screen.sf-pnl-report-view > .nav-bar:has(.newdev-command-bar.sf-fopen),
  #newdev-screen.sf-pnl-report-view > .nav-bar:has(#newdev-custom-panel:not([style*="none"])) { position: relative; top: auto; }
}
/* The P&L reads Brand / Region / Leader / store / custom list only. The day stepper and
   Day / 7D / 28D / YTD belong to Sales Flash, so the report doesn't show them. */
#newdev-screen.sf-pnl-report-view #sf-ctlrow > .sf-a2-head,
#newdev-screen.sf-pnl-report-view #sf-ctlrow .sf-tl-period,
#newdev-screen.sf-pnl-report-view #sf-pbar { display: none !important; }

/* ---- Body: one voice, square, flat ---- */
#newdev-screen.sf-pnl-report-view :is(#sf-pnl-home, #sf-compare-section) {
  font-family: var(--ds-font) !important; color: var(--ds-fg);
  font-variant-numeric: tabular-nums lining-nums;
}
#newdev-screen.sf-pnl-report-view :is(#sf-pnl-home, #sf-compare-section) *:not(svg):not(svg *) {
  font-family: var(--ds-font) !important;
}
#newdev-screen.sf-pnl-report-view :is(#sf-pnl-home, #sf-compare-section) *:not([style*="50%"]) { border-radius: 0 !important; }
#newdev-screen.sf-pnl-report-view :is(#sf-pnl-home, #sf-compare-section) * { box-shadow: none !important; }
#newdev-screen.sf-pnl-report-view :is(#sf-pnl-home, #sf-compare-section) span[style*="font-size:20px"]:empty { display: none; }

/* Cards: flat frost fields on the snow page; anything that was a white card inside
   one is snow (one tonal step), so nested tables still read as their own panel. */
#newdev-screen.sf-pnl-report-view :is(#sf-pnl-home, #sf-compare-section) .card,
#newdev-screen.sf-pnl-report-view #sf-compare-section {
  background: var(--ds-surface) !important; border: 0 !important;
}
#newdev-screen.sf-pnl-report-view :is(#sf-pnl-home, #sf-compare-section) .card div:is([style*="background:#fff" i], [style*="background: #fff" i], [style*="background:white" i], [style*="background:#F6F7F3" i], [style*="background: #F6F7F3" i]):not([style*="#221E18" i]):not([style*="#1A1E1B" i]):not([style*="#1C3326" i]) {
  background: var(--ds-snow) !important; border-color: transparent !important;
}

#newdev-screen.sf-pnl-report-view :is(#sf-pnl-home, #sf-compare-section) :is(td, th):is([style*="background:#fff" i], [style*="background: #fff" i], [style*="background:white" i], [style*="background: white" i]):not([style*="#221E18" i]):not([style*="#1A1E1B" i]):not([style*="#1C3326" i]) {
  background: var(--ds-snow) !important;
}

/* Headings: sentence-case v3 card titles, no highlighter under each one
   (v3 keeps one half highlight per page — the page title). */
#newdev-screen.sf-pnl-report-view :is(#sf-pnl-home, #sf-compare-section) [style*="linear-gradient(transparent" i] { background: none !important; padding: 0 !important; }
#newdev-screen.sf-pnl-report-view :is(#sf-pnl-home, #sf-compare-section) h4 {
  font-size: 15px !important; font-weight: 600 !important; letter-spacing: -0.015em; color: var(--ds-ink) !important;
}
#newdev-screen.sf-pnl-report-view :is(#sf-pnl-home, #sf-compare-section) h3 {
  font-size: 22px !important; font-weight: 600 !important; letter-spacing: -0.025em; color: var(--ds-ink) !important;
}
#newdev-screen.sf-pnl-report-view :is(#sf-pnl-home, #sf-compare-section) [style*="Newsreader" i] {
  font-size: 20px !important; font-weight: 600 !important; letter-spacing: -0.02em; color: var(--ds-ink) !important;
}

/* Segmented switches (.switcher and the inline toggle buttons): mist track, moss "on". */
#newdev-screen.sf-pnl-report-view :is(#sf-pnl-home, #sf-compare-section) .switcher {
  background: var(--ds-mist) !important; border: 0 !important; padding: 2px !important; gap: 2px;
}
#newdev-screen.sf-pnl-report-view :is(#sf-pnl-home, #sf-compare-section) .switcher button {
  background: transparent !important; color: var(--ds-fg-2) !important; border: 0 !important; font-weight: 500 !important;
}
#newdev-screen.sf-pnl-report-view :is(#sf-pnl-home, #sf-compare-section) .switcher button.active {
  background: var(--ds-moss) !important; color: var(--ds-on-accent) !important;
}
/* Inline-styled toggle buttons in the report's own renderers: the pressed one was a dark
   fill; v3 presses in moss, like the Sales Flash switches. */
#newdev-screen.sf-pnl-report-view :is(#sf-pnl-home, #sf-compare-section) button:is([style*="background:#1C3326" i], [style*="background: #1C3326" i], [style*="background:#221E18" i], [style*="background: #221E18" i], [style*="background:#1A1E1B" i], [style*="background: #1A1E1B" i]) {
  background: var(--ds-moss) !important; color: var(--ds-on-accent) !important; border-color: var(--ds-moss) !important;
}
#newdev-screen.sf-pnl-report-view :is(#sf-pnl-home, #sf-compare-section) .ghost-btn {
  background: var(--ds-mist) !important; color: var(--ds-ink) !important; border: 0 !important; font-weight: 500 !important;
}
#newdev-screen.sf-pnl-report-view :is(#sf-pnl-home, #sf-compare-section) :is(select, .form-select, input[type="text"], input[type="search"]) {
  background: var(--ds-snow) !important; border: 0 !important; border-bottom: 1px solid var(--ds-rule-strong) !important; color: var(--ds-ink) !important;
}
#newdev-screen.sf-pnl-report-view :is(#sf-pnl-home, #sf-compare-section) button:focus-visible { outline: 2px solid var(--ds-moss); outline-offset: 2px; }

/* ---- Bridge for the SHARED table renderers (renderPnLTables, pnl-tables.js). Their
   inline colours stay as they are on other tabs; in this view they read v3. Ochre stays
   on Budget columns (v3: ochre marks plan / warning). ---- */
#newdev-screen.sf-pnl-report-view :is(#sf-pnl-home, #sf-compare-section) :is([style*="background:#221E18" i], [style*="background: #221E18" i], [style*="background:#1A1E1B" i], [style*="background: #1A1E1B" i]) {
  background: var(--ds-pine) !important; color: var(--ds-snow) !important;
}
#newdev-screen.sf-pnl-report-view :is(#sf-pnl-home, #sf-compare-section) :is([style*="background:#6F695B" i], [style*="background: #6F695B" i], [style*="background:#56625A" i], [style*="background: #56625A" i]) {
  background: var(--ds-forest) !important; color: var(--ds-snow) !important;
}
#newdev-screen.sf-pnl-report-view :is(#sf-pnl-home, #sf-compare-section) :is([style*="background:#EDE7DA" i], [style*="background: #EDE7DA" i], [style*="background:#F3EEE3" i], [style*="background: #F3EEE3" i], [style*="background:#EFE9DC" i], [style*="background:#ECF0EA" i], [style*="background: #ECF0EA" i]) {
  background: var(--ds-mist) !important;
}
#newdev-screen.sf-pnl-report-view :is(#sf-pnl-home, #sf-compare-section) :is([style*="background:#EFEDE8" i], [style*="background: #EFEDE8" i], [style*="background:#E2DFD7" i], [style*="background: #E2DFD7" i]) {
  background: var(--ds-frost) !important;
}
#newdev-screen.sf-pnl-report-view :is(#sf-pnl-home, #sf-compare-section) :is([style*="#E8E0D1" i], [style*="#D8CFBA" i], [style*="#D9E3D8" i]) { border-color: var(--ds-rule) !important; }
#newdev-screen.sf-pnl-report-view :is(#sf-pnl-home, #sf-compare-section) :is([style^="color:#2F6B45" i], [style*=";color:#2F6B45" i], [style*="; color:#2F6B45" i], [style*=" color: #2F6B45" i]) { color: var(--ds-accent-text) !important; }
#newdev-screen.sf-pnl-report-view :is(#sf-pnl-home, #sf-compare-section) :is([style^="color:#B5532E" i], [style*=";color:#B5532E" i], [style*="; color:#B5532E" i], [style*=" color: #B5532E" i]) { color: var(--ds-danger-text) !important; }
#newdev-screen.sf-pnl-report-view :is(#sf-pnl-home, #sf-compare-section) :is([style^="color:#6F695B" i], [style*=";color:#6F695B" i], [style*="; color:#6F695B" i], [style*=" color: #6F695B" i]) { color: var(--ds-muted) !important; }
#newdev-screen.sf-pnl-report-view :is(#sf-pnl-home, #sf-compare-section) :is([style^="color:#8A8171" i], [style*=";color:#8A8171" i], [style*="; color:#8A8171" i], [style*=" color: #8A8171" i]) { color: var(--ds-fg-3) !important; }
#newdev-screen.sf-pnl-report-view :is(#sf-pnl-home, #sf-compare-section) :is([style^="color:#221E18" i], [style*=";color:#221E18" i], [style*="; color:#221E18" i], [style*=" color: #221E18" i]) { color: var(--ds-ink) !important; }
#newdev-screen.sf-pnl-report-view :is(#sf-pnl-home, #sf-compare-section) td,
#newdev-screen.sf-pnl-report-view :is(#sf-pnl-home, #sf-compare-section) th { border-color: var(--ds-rule) !important; }

@media (max-width: 600px) {
  #newdev-screen.sf-pnl-report-view :is(#sf-pnl-home, #sf-compare-section) h3 { font-size: 19px !important; }
}