/*
 * Maitre'D Concierge Lite — 2026 shell (SPEC v5.157)
 * ==================================================
 * Source: Figma "Maitre'D UI - Concierge Back-office 2026" (frames home,
 * collapsed-navigation, action-submenus, alt-background04). Measurements are
 * taken from the published site's node tree at 1920×1080, not eyeballed.
 *
 * This is the ONLY look Lite has. Classic and Modern (and the V1–V5 nav
 * variants) were removed with this sheet. Loaded by portal-lite.html only;
 * portal.html / index.html / login.html keep the shared sheets untouched.
 *
 * Scope rule: the shell is `sh-` classes. Shared `--color-*` tokens are
 * re-pointed on :root so the page content inside the panel picks up the new
 * palette without per-component rules — which is safe only because no other
 * page loads this file.
 *
 * The report area on Account activity (filters, KPIs, charts, tables) is NOT
 * styled here. It belongs to the reporting build; the shell only leaves a slot.
 */

/* ── TOKENS ─────────────────────────────────────────────────────────────── */
:root {
  --sh-accent:        #fb6a1f;
  --sh-accent-soft:   #fedfcf;   /* active nav row, flyout row */
  --sh-accent-tint:   #ffeee5;
  --sh-bg:            #f5f5f5;   /* page, and the sidebar sits on it */
  --sh-surface:       #ffffff;   /* content panel, menus */
  --sh-panel-border:  transparent;
  --sh-text:          #1a1a1a;
  --sh-muted:         #808080;
  --sh-placeholder:   #969696;
  --sh-icon:          #6b6b6b;
  --sh-line:          #e0e0e0;
  --sh-hover:         rgba(26, 26, 26, 0.05);
  --sh-active-row:    var(--sh-accent-soft);
  --sh-hover-row:     var(--sh-active-row);   /* hover = active, unless the active fill is invisible */
  --sh-active-tile:   #ffffff;
  --sh-active-glyph:  var(--sh-accent);
  --sh-pill-bg:       var(--sh-bg);
  --sh-toggle-track:  #f5f5f5;
  --sh-toggle-edge:   #e6e6e6;
  --sh-shadow-sm:     0 1px 4px rgba(152, 64, 19, 0.12);
  --sh-shadow-lg:     0 8px 24px rgba(152, 64, 19, 0.12);
  --sh-backdrop:      none;
  --sh-panel:         var(--sh-surface);   /* content panel; menus keep --sh-surface */
  --sh-panel-glow:    none;
  --sh-pagehead-tile: #ffeee5;
  --sh-panel-text:    var(--sh-text);      /* text ON the panel, which can differ from the chrome */
  --sh-panel-muted:   var(--sh-muted);
  --sh-btn-tile:      transparent;          /* topbar icon-button resting fill */

  --sh-font-display:  'Anybody', 'Roboto', sans-serif;
  --sh-font:          'Roboto', system-ui, sans-serif;

  --sh-rail:          240px;
  --sh-rail-collapsed: 40px;
  --sh-gutter:        16px;

  /* Shared tokens, re-pointed so page content matches the shell. */
  --color-primary:        #fb6a1f;
  --color-primary-dark:   #d9551a;
  --color-primary-light:  #fc8d52;
  --color-primary-xlight: #ffeee5;
  --gradient-primary:     linear-gradient(135deg, #fb6a1f 0%, #fc8d52 100%);
  --color-bg:             #f5f5f5;
  --color-surface:        #ffffff;
  --color-border:         #e0e0e0;
  --color-text:           #1a1a1a;
  --color-text-secondary: #808080;
  --font-heading:         'Anybody', 'Roboto', sans-serif;
  --font-body:            'Roboto', sans-serif;
  --sidebar-width:        240px;
  --sidebar-width-collapsed: 40px;
}

/* Dark = Figma /alt-background04. Never inferred from the OS: a reviewer whose
   laptop runs dark should see the same portal as everyone else in the meeting. */
html[data-theme="dark"] {
  color-scheme: dark;
  --sh-bg:            #1a1a1a;
  --sh-surface:       #333333;
  --sh-panel-border:  #4d4d4d;
  --sh-text:          #f5f5f5;
  --sh-muted:         #adadad;
  --sh-placeholder:   rgba(173, 173, 173, 0.85);
  --sh-icon:          #c2c2c2;
  --sh-line:          #333333;
  --sh-hover:         rgba(255, 255, 255, 0.06);
  --sh-active-row:    #333333;
  --sh-active-tile:   var(--sh-accent);
  --sh-active-glyph:  #ffffff;
  --sh-pill-bg:       transparent;
  --sh-toggle-track:  #262626;
  --sh-toggle-edge:   #4d4d4d;
  --sh-shadow-sm:     0 1px 4px rgba(0, 0, 0, 0.4);
  --sh-shadow-lg:     0 8px 24px rgba(0, 0, 0, 0.45);
  /* alt-background04: the dark wash image at 10% over #1a1a1a (node tree:
     "Plan de travail 2 1", FILL, node opacity 0.10). Expressed as the page
     colour at 90% over the image, which composites to the same pixels. */
  --sh-backdrop:
    linear-gradient(rgba(26, 26, 26, 0.90), rgba(26, 26, 26, 0.90)),
    url("../assets/bg-wash-dark.webp") center / cover no-repeat;

  --color-bg:             #2b2b2b;
  --color-bg-alt:         #303030;
  --color-surface:        #333333;
  --color-surface-raised: #3b3b3b;
  --color-border:         #4d4d4d;
  --color-border-strong:  #5c5c5c;
  --color-text:           #f5f5f5;
  --color-text-secondary: #adadad;
  --color-text-muted:     #8f8f8f;
  --color-primary-xlight: rgba(251, 106, 31, 0.16);
  --color-success-bg:     rgba(76, 175, 80, 0.16);
  --color-warning-bg:     rgba(245, 158, 11, 0.16);
  --color-error-bg:       rgba(244, 67, 54, 0.16);
  --color-info-bg:        rgba(59, 130, 246, 0.16);
  --sh-pagehead-tile:     #1a1a1a;
}

/* ── LAYOUT VERSIONS (topbar 1–11 selector, SPEC v5.159 → v5.162) ───────────
   Values from the published Figma Sites node trees (republished 2026-09-24
   18:26), not sampled. Version 1 is everything above.
     1  home / alt-background04 (dark)       7  alt-background05 (grey cards)
     2  alt-background10_light-a / dark-a     8  alt-background06 (panel outlined)
     3  alt-background10_light-b / dark-b     9  alt-background08 (black chrome, grey panel)
     4  alt-background01                     10  alt-background09
     5  alt-background02                     11  alt-background07 (8 without the outline)
     6  alt-background03
   1–3, 13, 14 have dark; 4, 5 and 6 have their own (v5.165, v5.174, v5.175); the rest fall back to 1's dark, so their rules are
   scoped :not([data-theme="dark"]).
   The --mdc-* properties set on .sh-report-host are read by the dashboard
   (inherited across its shadow root) with its own defaults as fallback:
   card background / border / header-icon tile / kebab tile. */
html[data-look="2"], html[data-look="3"], html[data-look="13"], html[data-look="14"] {
  --sh-bg:            #ffffff;
  --sh-panel:         #f5f5f5;
  --sh-active-row:    #ffeee5;
  --sh-pill-bg:       #ffffff;
  --sh-pagehead-tile: #fecbb0;
  --color-bg:         #f5f5f5;
}
html[data-look="3"], html[data-look="14"] {
  /* Panel: the light wash at 12% over #f5f5f5 (Rectangle 15, fill #2). */
  --sh-panel-glow:
    linear-gradient(rgba(245, 245, 245, 0.88), rgba(245, 245, 245, 0.88)),
    url("../assets/bg-wash-light.webp") center / cover no-repeat;
}
html[data-look="2"][data-theme="dark"], html[data-look="3"][data-theme="dark"],
html[data-look="13"][data-theme="dark"], html[data-look="14"][data-theme="dark"], html[data-look="5"][data-theme="dark"], html[data-look="6"][data-theme="dark"] {
  --sh-bg:            #333333;
  --sh-backdrop:      none;
  --sh-panel:         #1a1a1a;
  --sh-panel-border:  transparent;
  --sh-line:          #4d4d4d;
  --sh-active-row:    transparent;   /* the rail is #333 and so is the row: tile + weight carry it */
  --sh-hover-row:     rgba(251, 106, 31, 0.16);   /* an invisible row cannot show a hover: the "fond orange" */
  --sh-pill-bg:       #333333;
  --sh-pagehead-tile: #1a1a1a;
  --color-bg:         #1a1a1a;
  --color-surface:    #333333;
  --color-border:     #4d4d4d;
}
html[data-look="3"][data-theme="dark"], html[data-look="14"][data-theme="dark"], html[data-look="5"][data-theme="dark"], html[data-look="6"][data-theme="dark"] {
  /* Panel: the dark wash at 8% over #1a1a1a. */
  --sh-panel-glow:
    linear-gradient(rgba(26, 26, 26, 0.92), rgba(26, 26, 26, 0.92)),
    url("../assets/bg-wash-dark.webp") center / cover no-repeat;
}
html[data-look="4"]:not([data-theme="dark"]) {
  --sh-bg: #ffffff; --sh-panel: #ffffff; --sh-panel-border: #e0e0e0; --sh-pill-bg: #ffffff;
}
html[data-look="5"]:not([data-theme="dark"]) {
  /* Page: the light wash at 16% over #f5f5f5 ("2 1", node opacity 0.16). */
  --sh-bg: #f5f5f5; --sh-panel: #ffffff; --sh-pill-bg: transparent;
  --sh-backdrop:
    linear-gradient(rgba(245, 245, 245, 0.84), rgba(245, 245, 245, 0.84)),
    url("../assets/bg-wash-light.webp") center / cover no-repeat;
}
html[data-look="6"]:not([data-theme="dark"]), html[data-look="9"]:not([data-theme="dark"]) {
  /* Dark chrome around a light panel: the rail and topbar take the dark
     tokens, the panel keeps dark text through --sh-panel-*. */
  --sh-bg: #1a1a1a; --sh-panel: #ffffff;
  --sh-text: #f5f5f5; --sh-muted: #adadad; --sh-placeholder: rgba(173, 173, 173, 0.85);
  --sh-icon: #c2c2c2; --sh-line: #333333; --sh-hover: rgba(255, 255, 255, 0.06);
  --sh-active-row: #333333; --sh-active-tile: var(--sh-accent); --sh-active-glyph: #ffffff;
  --sh-pill-bg: #1a1a1a; --sh-surface: #262626;
  --sh-toggle-track: #262626; --sh-toggle-edge: #4d4d4d;
  --sh-panel-text: #1a1a1a; --sh-panel-muted: #808080;
}
html[data-look="9"]:not([data-theme="dark"]) { --sh-panel: #f5f5f5; }
html[data-look="7"]:not([data-theme="dark"]), html[data-look="10"]:not([data-theme="dark"]) {
  --sh-bg: #ebebeb; --sh-active-row: #fecbb0; --sh-pill-bg: #ebebeb; --sh-line: #c7c7c7;
}
html[data-look="7"]:not([data-theme="dark"])  { --sh-panel: #ffffff; }
html[data-look="10"]:not([data-theme="dark"]) { --sh-panel: #f5f5f5; --color-bg: #f5f5f5; }
html[data-look="8"]:not([data-theme="dark"]), html[data-look="11"]:not([data-theme="dark"]) {
  --sh-bg: #f5f5f5; --sh-panel: #f5f5f5; --sh-btn-tile: #ebebeb; --sh-pagehead-tile: #fedfcf;
  --color-bg: #f5f5f5;
}
html[data-look="8"]:not([data-theme="dark"]) { --sh-panel-border: #e0e0e0; }

/* Version 12 — "soft" (v5.168, owner's brief: no grey borders on the controls, so it does not
   feel like a spreadsheet). Not from a Figma frame. Warm stone page, no panel edge; every surface
   — cards, filter controls, the search box, the account pill — is white, borderless, lifted by a
   two-layer soft shadow instead of a hairline. Light only; dark falls back to version 1.
   The report follows through the --mdc-* hooks: card background / border / shadow, and the three
   control hooks (--mdc-control-background / -border / -shadow), requested from the reports build
   and inert until it reads them. */
html[data-look="12"]:not([data-theme="dark"]) {
  --sh-bg:            #efede9;
  --sh-panel:         #efede9;
  --sh-panel-border:  transparent;
  --sh-line:          #e2ded7;           /* rail group dividers only; controls carry no border */
  --sh-pill-bg:       #ffffff;
  --sh-active-row:    #ffffff;
  --sh-hover-row:     #ffffff;
  --sh-pagehead-tile: #fdeee6;
  --sh-soft-shadow:   0 1px 2px rgba(16, 18, 22, .04), 0 6px 16px -6px rgba(16, 18, 22, .10);
  --color-bg:         #efede9;
  --mdc-card-background:    #ffffff;
  --mdc-card-border:        transparent;
  --mdc-card-radius:        16px;
  --mdc-card-shadow:        0 1px 2px rgba(16, 18, 22, .04), 0 6px 16px -6px rgba(16, 18, 22, .10);
  --mdc-control-background: #ffffff;
  --mdc-control-border:     transparent;
  --mdc-control-shadow:     0 1px 2px rgba(16, 18, 22, .05), 0 2px 8px -2px rgba(16, 18, 22, .08);
}
html[data-look="12"]:not([data-theme="dark"]) .sh-search,
html[data-look="12"]:not([data-theme="dark"]) .sh-user {
  background: #ffffff; border-color: transparent; box-shadow: var(--sh-soft-shadow);
}
html[data-look="12"]:not([data-theme="dark"]) .sh-item.active,
html[data-look="12"]:not([data-theme="dark"]) .sh-item:hover:not(.active) { box-shadow: var(--sh-soft-shadow); }
html[data-look="12"]:not([data-theme="dark"]) .sh-item.active .sh-item__icon { background: var(--sh-accent); color: #ffffff; }
html[data-look="12"]:not([data-theme="dark"]) .sh-seg { border-color: transparent; background: #ffffff; box-shadow: var(--sh-soft-shadow); }
html[data-look="12"]:not([data-theme="dark"]) .mdp-finance-card { box-shadow: var(--sh-soft-shadow); border-radius: 16px; }

/* Version 4 DARK — "crisp black" (v5.165, owner's request). Not from a Figma frame: v4 is the
   all-white outlined frame, and this is its literal dark counterpart. Near-black on near-black,
   structure carried by 1px hairlines instead of shadows or tints; no glow, no wash image; high
   contrast text. The report follows through the same --mdc-card-* hooks it honours in dark. */
html[data-look="4"][data-theme="dark"] {
  --sh-bg:            #0a0a0a;
  --sh-backdrop:      none;
  --sh-panel:         #0a0a0a;
  --sh-panel-glow:    none;
  --sh-panel-border:  #262626;
  --sh-surface:       #141414;
  --sh-text:          #fafafa;
  --sh-muted:         #a1a1a1;
  --sh-placeholder:   #737373;
  --sh-icon:          #d4d4d4;
  --sh-line:          #262626;
  --sh-hover:         rgba(255, 255, 255, 0.04);
  --sh-active-row:    #171717;
  --sh-hover-row:     #171717;
  --sh-active-tile:   var(--sh-accent);
  --sh-active-glyph:  #ffffff;
  --sh-pill-bg:       #0a0a0a;
  --sh-toggle-track:  #0a0a0a;
  --sh-toggle-edge:   #333333;
  --sh-shadow-sm:     none;
  --sh-shadow-lg:     0 0 0 1px #262626;
  --sh-pagehead-tile: #171717;
  --color-bg:             #0a0a0a;
  --color-bg-alt:         #111111;
  --color-surface:        #121212;
  --color-surface-raised: #171717;
  --color-border:         #262626;
  --color-border-strong:  #333333;
  --color-text:           #fafafa;
  --color-text-secondary: #a1a1a1;
  --color-text-muted:     #737373;
  --mdc-card-background:  #121212;
  --mdc-card-border:      #262626;
  --mdc-card-tile:        #1c1c1c;
  --mdc-card-kebab:       transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Crisp means edges, not glow: the hover pills and menus trade their soft shadow for a hairline. */
html[data-look="4"][data-theme="dark"] .sh-user,
html[data-look="4"][data-theme="dark"] .sh-search { border-color: #262626; }

/* Report card surfaces per version (light only; dark cards are the same in every version).
   Set on the ROOT, not on a container: ANY embed, wherever it is mounted (page, report
   viewer, a modal, a report added later), inherits them across its shadow root with no
   per-report wiring. Only the dashboards read --mdc-*; the portal's own CSS never does. */
html:not([data-theme="dark"]):is([data-look="1"], [data-look="4"], [data-look="5"], [data-look="6"]) {
  --mdc-card-border: #e6e6e6;
}
html[data-look="7"]:not([data-theme="dark"]) {
  --mdc-card-background: #f5f5f5; --mdc-card-border: #e0e0e0; --mdc-card-tile: #ffffff;
}
html:not([data-theme="dark"]):is([data-look="8"], [data-look="11"]) {
  --mdc-card-tile: #ffffff; --mdc-card-kebab: #f5f5f5;
}
html:not([data-theme="dark"]):is([data-look="2"], [data-look="3"], [data-look="10"], [data-look="13"], [data-look="14"]) {
  --mdc-card-kebab: #f5f5f5;
}

/* Versions 13 and 14 — "frameless" 2 and 3 (v5.173, owner's request: remove the grey
   border). They inherit every rule of 2 / 3, light and dark (the selectors above list them),
   then drop every grey hairline: report cards and filter controls through the --mdc-* hooks,
   the shell's search box, account pill and version selector. Boxes separate by fill alone —
   white cards on the #f5f5f5 panel, controls a soft #f5f5f5 fill inside a white card.
   Dark: the 2 / 3 dark, with the same edges removed. */
html:is([data-look="13"], [data-look="14"]), html[data-look="5"][data-theme="dark"], html[data-look="6"][data-theme="dark"] {
  --sh-host-border:     transparent;   /* the report viewer's host box (inline style reads it) */
  --mdc-card-border:    transparent;
  --mdc-control-border: transparent;
  --mdc-control-shadow: none;
}
html:not([data-theme="dark"]):is([data-look="13"], [data-look="14"]) {
  --mdc-card-background:    #ffffff;
  --mdc-control-background: #f5f5f5;
}
html[data-theme="dark"]:is([data-look="5"], [data-look="6"], [data-look="13"], [data-look="14"]) {
  --mdc-control-background: #262626;
}
html:is([data-look="13"], [data-look="14"]) .sh-search,
html:is([data-look="13"], [data-look="14"]) .sh-user,
html:is([data-look="13"], [data-look="14"]) .sh-seg,
html:is([data-look="13"], [data-look="14"]) .mdp-btn--ghost, html[data-look="5"][data-theme="dark"] .mdp-btn--ghost, html[data-look="6"][data-theme="dark"] .mdp-btn--ghost,
html:is([data-look="13"], [data-look="14"]) .mdp-input, html[data-look="5"][data-theme="dark"] .mdp-input, html[data-look="6"][data-theme="dark"] .mdp-input { border-color: transparent; }
/* On the white page (rail, topbar): a soft grey fill. On the grey panel: white. */
html:not([data-theme="dark"]):is([data-look="13"], [data-look="14"]) .sh-search,
html:not([data-theme="dark"]):is([data-look="13"], [data-look="14"]) .sh-user,
html:not([data-theme="dark"]):is([data-look="13"], [data-look="14"]) .sh-seg { background: #f5f5f5; }
html:not([data-theme="dark"]):is([data-look="13"], [data-look="14"]) .mdp-btn--ghost,
html:not([data-theme="dark"]):is([data-look="13"], [data-look="14"]) .mdp-input { background: #ffffff; }
html:not([data-theme="dark"]):is([data-look="13"], [data-look="14"]) .mdp-btn--ghost:hover { background: #ebebeb; }
html[data-theme="dark"]:is([data-look="5"], [data-look="6"], [data-look="13"], [data-look="14"]) .mdp-btn--ghost { background: #262626; }
html[data-theme="dark"]:is([data-look="5"], [data-look="6"], [data-look="13"], [data-look="14"]) .mdp-btn--ghost:hover { background: #333333; }

/* Version 5 DARK (v5.174, owner's request): version 14's dark -- panel, cards, frameless report
   and page controls, all through the selectors above -- with version 1's dark chrome: the rail
   and topbar sit on the washed #1a1a1a, the active row is a #333 fill, and the rail search box,
   account pill and version selector keep their version-1 edges (they are not in the frameless
   border rule). Re-declared here, after the 14-dark block, at the same specificity. */
html[data-look="5"][data-theme="dark"], html[data-look="6"][data-theme="dark"] {
  --sh-bg:          #1a1a1a;
  --sh-backdrop:
    linear-gradient(rgba(26, 26, 26, 0.90), rgba(26, 26, 26, 0.90)),
    url("../assets/bg-wash-dark.webp") center / cover no-repeat;
  --sh-line:        #333333;
  --sh-active-row:  #333333;
  --sh-hover-row:   var(--sh-active-row);
  --sh-pill-bg:     transparent;
}
/* Version 6 DARK (v5.175, owner's request): version 5's dark with the panel lifted one step,
   #1a1a1a -> #222222 (wash kept at the same 8%), so the panel reads against the #1a1a1a rail.
   Cards (#333) and controls (#262626) keep their contrast. */
html[data-look="6"][data-theme="dark"] {
  --sh-panel:         #222222;
  --sh-panel-glow:
    linear-gradient(rgba(34, 34, 34, 0.92), rgba(34, 34, 34, 0.92)),
    url("../assets/bg-wash-dark.webp") center / cover no-repeat;
  --sh-pagehead-tile: #2a2a2a;
  --color-bg:         #222222;
}


/* ── REPORTS CATALOG as a list (Figma /reports-catalog + /reports-category, v5.178) ──────────
   Values from the node trees: 69px rows (16px padding), a #e0e0e0 hairline between rows, a
   36px icon tile, 14px name | description with a 10px vertical rule, the count and a 32px
   arrow on the right (a star before it on report rows). Hover is the Figma active row: a
   white card with a 1px accent border, 8px radius, 0 8px 16px rgba(152,64,19,.12), the tile
   filled with the accent, count and arrow in the accent, the arrow on the accent tint.
   Colours are shell tokens, so every layout version and the dark themes follow; hairlines use
   --color-border, because --sh-line equals the dark panel and would vanish there. */
#pg-analytics-reports-catalog > .mdp-breadcrumb,
#catalog-categories-label { display: none !important; }
.rc-head { margin-bottom: 32px; }
.rc-head .sh-pagehead__sub { display: flex; align-items: center; flex-wrap: wrap; }
.rc-sep { display: inline-block; width: 1px; height: 10px; background: var(--sh-line); margin: 0 8px; }
.rc-search { position: relative; margin-left: auto; align-self: flex-start; }
.rc-search .mdp-input { width: 320px; height: 40px; box-sizing: border-box; padding: 0 44px 0 14px;
  border: 1px solid var(--color-border); border-radius: 8px; background: var(--sh-surface); color: var(--sh-text);
  font: 400 14px/1 var(--sh-font); }
.rc-search .mdp-input::placeholder { color: var(--sh-placeholder); }
.rc-search .mdp-search__icon { position: absolute; right: 8px; top: 8px; left: auto; transform: none; font-size: 24px;
  color: var(--sh-icon); pointer-events: none; }
/* One column, no gap. `display` itself is left to the page's JS, which hides and re-shows
   the two levels with inline styles. */
#pg-analytics-reports-catalog .rc-list { grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; margin: 0; }
.rc-list > .mdp-finance-card {
  display: flex; align-items: center; gap: 16px; min-height: 69px; box-sizing: border-box;
  padding: 16px; margin: 0; background: transparent; box-shadow: none; transform: none;
  border: 1px solid transparent; border-bottom-color: var(--color-border); border-radius: 0; overflow: visible; min-width: 0;
  transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.rc-list > .mdp-finance-card:last-child { border-bottom-color: transparent; }
.rc-list > .mdp-finance-card:hover {
  background: var(--sh-surface); border-color: var(--sh-accent); border-radius: 8px;
  box-shadow: 0 8px 16px rgba(152, 64, 19, 0.12); transform: none;
}
.rc-list .mdp-finance-card__icon-panel { width: 36px; height: 36px; flex: 0 0 36px; padding: 0; margin: 0;
  border-radius: 6px; background: var(--sh-bg); display: flex; align-items: center; justify-content: center; }
.rc-list .mdp-finance-card__icon { width: auto; height: auto; background: none; box-shadow: none; }
.rc-list .mdp-finance-card__icon .material-symbols-rounded { font-size: 22px; color: var(--sh-icon);
  font-variation-settings: 'FILL' 0, 'wght' 300; }
.rc-list > .mdp-finance-card:hover .mdp-finance-card__icon-panel { background: var(--sh-accent); }
.rc-list > .mdp-finance-card:hover .mdp-finance-card__icon .material-symbols-rounded { color: #ffffff; }
html[data-theme="dark"] .rc-list .mdp-finance-card__body,
.rc-list .mdp-finance-card__body { display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
  text-align: left; flex: 1; min-width: 0; gap: 0; padding: 0; background: none; border-radius: 0; }
.rc-list .mdp-finance-card__title { font: 500 14px/16.4px var(--sh-font); color: var(--sh-text); white-space: nowrap; margin: 0; }
html[data-theme="dark"] .rc-list .mdp-finance-card__divider,
.rc-list .mdp-finance-card__divider { width: 1px; height: 10px; flex: 0 0 1px; margin: 0 8px; background: var(--sh-line); }
.rc-list .mdp-finance-card__desc { font: 400 14px/16.4px var(--sh-font); color: var(--sh-muted); margin: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
/* category rows: the count + arrow row that the static markup carries in the body */
.rc-list .mdp-finance-card__body > div[style] { margin: 0 0 0 auto !important; padding: 0 0 0 16px !important; gap: 16px; flex: 0 0 auto; }
.rc-list .mdp-finance-card__body > div[style] > span:first-child { font: 400 14px/16.4px var(--sh-font) !important;
  text-transform: none !important; letter-spacing: 0 !important; color: var(--sh-muted) !important; }
.rc-list .mdp-finance-card__body > div[style] > span:last-child,
.rc-go { width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 0 !important; color: var(--sh-muted) !important; }
.rc-list .mdp-finance-card__body > div[style] > span:last-child::before { content: 'arrow_forward';
  font-family: 'Material Symbols Rounded'; font-size: 20px; font-weight: 300; }
.rc-go { font-size: 20px !important; font-variation-settings: 'wght' 300; }
.rc-list > .mdp-finance-card:hover .mdp-finance-card__body > div[style] > span { color: var(--sh-accent) !important; }
.rc-list > .mdp-finance-card:hover .mdp-finance-card__body > div[style] > span:last-child,
.rc-list > .mdp-finance-card:hover .rc-go { background: var(--sh-accent-tint); color: var(--sh-accent) !important; }
html[data-theme="dark"] .rc-list > .mdp-finance-card:hover .rc-go,
html[data-theme="dark"] .rc-list > .mdp-finance-card:hover .mdp-finance-card__body > div[style] > span:last-child { background: rgba(251, 106, 31, 0.16); }
/* report rows: star + arrow */
.rc-row__end { display: flex; align-items: center; gap: 8px; margin-left: auto; padding-left: 16px; flex: 0 0 auto; }
.rc-fav { width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; color: var(--sh-muted); }
.rc-fav .material-symbols-rounded { font-size: 20px; font-variation-settings: 'FILL' 0, 'wght' 300; }
.rc-fav:hover { color: var(--sh-accent); }
.rc-fav.is-on { color: var(--sh-accent); }
.rc-fav.is-on .material-symbols-rounded { font-variation-settings: 'FILL' 1, 'wght' 400; }
/* the way back, under the list (Figma: 193x40, white, #e0e0e0 border, 8px radius, 20px above) */
.rc-back.mdp-rcat-back { display: inline-flex; align-items: center; gap: 0; height: 40px; margin-top: 20px;
  padding: 0 16px 0 0; border: 1px solid var(--color-border); border-radius: 8px; background: var(--sh-surface);
  font: 400 14px/1 var(--sh-font); color: var(--sh-placeholder); cursor: pointer; }
.rc-back .material-symbols-rounded { width: 40px; text-align: center; font-size: 20px; color: var(--sh-icon); }
.rc-back:hover { border-color: var(--sh-accent); color: var(--sh-accent); }
html[data-theme="dark"] .rc-back.mdp-rcat-back { background: var(--sh-surface); }
.sh-crumb__link { color: var(--sh-muted); text-decoration: none; }
.sh-crumb__link:hover { color: var(--sh-accent); }
.sh-crumb__current .sh-crumb__sep { vertical-align: middle; }

/* ── DARK: temporary fixes for page content with hard-coded light surfaces ────
   TEMPORARY (v5.164.1, owner's request). components.css paints these white with a
   literal, so in dark the light --color-text lands on white and the titles vanish.
   Proper fix: tokenise them in components.css when the pages are reworked. */
html[data-theme="dark"] .mdp-finance-card__body,
html[data-theme="dark"] .mdp-rcat-back { background: var(--color-surface); }
html[data-theme="dark"] .mdp-finance-card__divider { background: var(--color-border); }

/* ── APP FRAME ──────────────────────────────────────────────────────────── */
html, body { background: var(--sh-bg); }
body { font-family: var(--sh-font); color: var(--sh-text); }

.mdp-app {
  display: grid;
  grid-template-columns: var(--sh-rail) minmax(0, 1fr);
  column-gap: var(--sh-gutter);
  min-height: 100vh;
  padding: 0 12px 12px var(--sh-gutter);
  box-sizing: border-box;
  background: var(--sh-backdrop), var(--sh-bg);
  background-attachment: fixed;
  transition: grid-template-columns .2s ease;
}
.mdp-app.nav-collapsed { grid-template-columns: var(--sh-rail-collapsed) minmax(0, 1fr); }

/* ── SIDEBAR ────────────────────────────────────────────────────────────── */
.mdp-sidebar.sh-sidebar {
  position: sticky; top: 0;
  width: auto; min-height: 0; height: 100vh;
  padding: 16px 0;
  box-sizing: border-box;
  background: transparent;
  display: flex; flex-direction: column; gap: 16px;
  overflow: visible;
  z-index: 50;
}

.sh-brand { display: flex; align-items: center; gap: 12px; min-height: 40px; text-decoration: none; }
.sh-brand__mark {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 8px;
  background: var(--sh-accent);
  display: flex; align-items: center; justify-content: center;
}
.sh-brand__mark img { width: 40px; height: 40px; display: block; }
.sh-brand__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sh-brand__name {
  font-family: var(--sh-font-display); font-weight: 600; font-size: 16px; line-height: 1;
  color: var(--sh-text); white-space: nowrap;
}
.sh-brand__org { font-size: 14px; line-height: 1.15; color: var(--sh-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ── VERSION 15 = the look (v5.197) ──────────────────────────────────────────
   David's Figma /alt-background-final02-light and /alt-background-final02-dark (published
   2026-09-30, bundle 411c3bb5), node-tree values. Pinned by portal-lite.html; 1-14 are kept
   above only as the record of the review and are no longer selectable.
     light: page #ebebeb + the light wash ("2 1", same image as alt-background02) at 16%;
            panel white at 50%, no edge; hairlines, search and user pill #c7c7c7, pill unfilled;
            active row #fecbb0, white tile, orange glyph; page-head tile #fecbb0;
            cards white, #e0e0e0 edge, header tile and kebab #f5f5f5.
     dark:  page #1a1a1a + the dark wash (same image as alt-background04) at 5%;
            panel white at 5%, no edge; hairlines #4d4d4d; user pill #1a1a1a;
            active row #333333, orange tile, white glyph; page-head tile #1a1a1a;
            cards #333333, #4d4d4d edge, header tile #1a1a1a, kebab #333333. */
html[data-look="15"] {
  --sh-bg:            #ebebeb;
  --sh-backdrop:
    linear-gradient(rgba(235, 235, 235, 0.84), rgba(235, 235, 235, 0.84)),
    url("../assets/bg-wash-light.webp") center / cover no-repeat;
  --sh-panel:         rgba(255, 255, 255, 0.50);
  --sh-panel-glow:    none;
  --sh-panel-border:  transparent;
  /* v5.199 (Figma republish 04570e58): lines and the selected row move to translucent tints */
  --sh-line:          rgba(0, 0, 0, 0.12);
  --sh-pill-bg:       transparent;
  --sh-active-row:    rgba(251, 106, 31, 0.16);
  --sh-hover-row:     rgba(251, 106, 31, 0.16);
  --sh-active-tile:   #ffffff;
  --sh-active-glyph:  var(--sh-accent);
  --sh-pagehead-tile: rgba(251, 106, 31, 0.16);
  --rc-tile:          #f5f5f5;
  --color-bg:         #ebebeb;
  --mdc-card-background: #ffffff;
  --mdc-card-border:     transparent;   /* v5.197.7: no grey card edge (owner); Figma draws #e0e0e0 */
  --mdc-card-tile:       #f5f5f5;
  --mdc-card-kebab:      transparent;   /* v5.199: no tile behind the card menu */
  /* v5.197.1: no grey border on the filter controls (owner) */
  --mdc-control-border:  transparent;
}
html[data-look="15"][data-theme="dark"] {
  --sh-bg:            #1a1a1a;
  --sh-backdrop:
    linear-gradient(rgba(26, 26, 26, 0.95), rgba(26, 26, 26, 0.95)),
    url("../assets/bg-wash-dark.webp") center / cover no-repeat;
  --sh-panel:         rgba(255, 255, 255, 0.05);
  --sh-panel-border:  transparent;
  --sh-line:          rgba(255, 255, 255, 0.16);   /* v5.199 */
  --sh-pill-bg:       transparent;
  --sh-active-row:    rgba(255, 255, 255, 0.05);
  --sh-hover-row:     rgba(255, 255, 255, 0.05);
  --rc-tile:          #1a1a1a;
  --sh-active-tile:   var(--sh-accent);
  --sh-active-glyph:  #ffffff;
  --sh-pagehead-tile: #1a1a1a;
  --color-bg:         #1a1a1a;
  --mdc-card-background: #333333;
  --mdc-card-border:     transparent;   /* v5.197.7: no grey card edge (owner); Figma draws #4d4d4d */
  --mdc-card-tile:       #1a1a1a;
  --mdc-card-kebab:      transparent;
  /* v5.197.1: no grey border on the filter controls (owner) */
  --mdc-control-border:  transparent;
}

/* v5.190: empty for a merchant (no store name under the brand) -- take no room, so the name centres on the mark. */
.sh-brand__org:empty { display: none; }

.sh-search {
  display: flex; align-items: center; height: 40px; padding: 0 0 0 20px;
  border: 1px solid var(--sh-line); border-radius: 20px;
  color: var(--sh-placeholder); font-size: 14px; cursor: text; box-sizing: border-box;
}
.sh-search__ph { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-search .material-symbols-rounded { width: 40px; text-align: center; font-size: 20px; color: var(--sh-icon); font-variation-settings: 'wght' 300; }

/* The nav scrolls, and a scroll container clips its overflow on BOTH axes, so
   the edge marker (drawn 16px left of the row) needs room inside the box: the
   left gutter is moved into the nav's padding. */
.sh-nav {
  display: flex; flex-direction: column; gap: 4px; flex: 1; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  margin: 0 -4px 0 calc(-1 * var(--sh-gutter)); padding: 0 4px 0 var(--sh-gutter);
}

.sh-group { display: flex; flex-direction: column; gap: 4px; }
.sh-group + .sh-group { margin-top: 12px; }
.sh-group__head {
  display: flex; align-items: center; gap: 8px; height: 20px; padding: 0;
  background: none; border: 0; cursor: pointer; color: var(--sh-muted);
  font: 400 14px/1 var(--sh-font); text-align: left;
}
.sh-group__head .material-symbols-rounded { font-size: 14px; transition: transform .15s ease; }
.sh-group__head::after { content: ''; flex: 1; height: 1px; background: var(--sh-line); }
.sh-group.is-closed .sh-group__head .material-symbols-rounded { transform: rotate(-90deg); }
.sh-group.is-closed .sh-group__items { display: none; }
.sh-group__items { display: flex; flex-direction: column; gap: 4px; }

.sh-item {
  position: relative;
  display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 4px;
  border-radius: 8px; cursor: pointer; text-decoration: none;
  color: var(--sh-text); font-size: 14px; white-space: nowrap;
  transition: background-color .12s ease;
}
.sh-item__icon {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: var(--sh-icon);
}
.sh-item__icon .material-symbols-rounded { font-size: 20px; font-variation-settings: 'FILL' 0, 'wght' 300; }
.sh-item__label { overflow: hidden; text-overflow: ellipsis; }
/* Hover looks exactly like the active row -- David's review (2026-09-24): "the right
   behaviour is the Reports button's" (the Figma action-submenus frame: #fedfcf row,
   white tile, orange glyph). One rule for all three states, so hover follows every
   layout version and dark theme through the same tokens as the active row. */
.sh-item.active { background: var(--sh-active-row); font-weight: 500; }
.sh-item.is-flyout-open, .sh-item:hover:not(.active) { background: var(--sh-hover-row); font-weight: 500; }
.sh-item.active .sh-item__icon, .sh-item.is-flyout-open .sh-item__icon, .sh-item:hover .sh-item__icon {
  background: var(--sh-active-tile); color: var(--sh-active-glyph); box-shadow: var(--sh-shadow-sm);
}
.sh-item.is-flyout-open .sh-item__icon .material-symbols-rounded,
.sh-item:hover .sh-item__icon .material-symbols-rounded { font-variation-settings: 'FILL' 1, 'wght' 400; }
.sh-item.active .sh-item__icon { background: var(--sh-active-tile); color: var(--sh-active-glyph); box-shadow: var(--sh-shadow-sm); }
.sh-item.active .sh-item__icon .material-symbols-rounded { font-variation-settings: 'FILL' 1, 'wght' 400; }
/* The orange edge marker sits on the viewport edge, left of the gutter. */
.sh-item.active::before {
  content: ''; position: absolute; left: calc(-1 * var(--sh-gutter)); top: 10px;
  width: 2px; height: 20px; background: var(--sh-accent); border-radius: 0 2px 2px 0;
}
.sh-item:focus-visible, .sh-group__head:focus-visible, .sh-icon-btn:focus-visible,
.sh-user:focus-visible, .sh-flyout__row:focus-visible { outline: 2px solid var(--sh-accent); outline-offset: 2px; }

.sh-legal { display: flex; flex-direction: column; gap: 12px; font-size: 12px; color: var(--sh-muted); }
.sh-legal a { color: inherit; text-decoration: none; cursor: pointer; }
.sh-legal a:hover { color: var(--sh-text); text-decoration: underline; }
.sh-legal__copy-icon { display: none; }

/* Collapsed rail (Figma /collapsed-navigation). */
.nav-collapsed .sh-brand__text,
.nav-collapsed .sh-search__ph,
.nav-collapsed .sh-group__head,
.nav-collapsed .sh-item__label,
.nav-collapsed .sh-legal a,
.nav-collapsed .sh-legal__copy { display: none; }
.nav-collapsed .sh-search { width: 40px; padding: 0; border: 0; justify-content: center; cursor: pointer; }
.nav-collapsed .sh-group + .sh-group { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--sh-line); }
.nav-collapsed .sh-group.is-closed .sh-group__items { display: flex; }
.nav-collapsed .sh-item { width: 40px; padding: 0 4px; justify-content: center; }
.nav-collapsed .sh-item.active, .nav-collapsed .sh-item:hover, .nav-collapsed .sh-item.is-flyout-open { background: transparent; }
.nav-collapsed .sh-item.active .sh-item__icon, .nav-collapsed .sh-item:hover .sh-item__icon,
.nav-collapsed .sh-item.is-flyout-open .sh-item__icon { background: var(--sh-active-row); }
html:not([data-theme="dark"]) .nav-collapsed :is(.sh-item.active, .sh-item:hover) .sh-item__icon { outline: 1px solid var(--sh-accent-soft); }
.nav-collapsed .sh-legal { align-items: center; }
.nav-collapsed .sh-legal__copy-icon { display: inline-flex; font-size: 20px; color: var(--sh-icon); }

/* Collapsed-rail tooltip: data-tip on the row, shown to the right. */
.nav-collapsed .sh-item[data-tip]:hover::after {
  content: attr(data-tip); position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%);
  padding: 6px 10px; border-radius: 6px; background: var(--sh-text); color: var(--sh-bg);
  font-size: 12px; font-weight: 500; white-space: nowrap; pointer-events: none; z-index: 60;
}

/* ── MAIN COLUMN ────────────────────────────────────────────────────────── */
.mdp-main {
  margin-left: 0 !important;
  min-width: 0; min-height: calc(100vh - 12px);   /* the app's 12px bottom margin */
  display: flex; flex-direction: column;
  padding-top: 12px; box-sizing: border-box;
}
.mdp-app.nav-collapsed .mdp-main { margin-left: 0 !important; }

/* ── TOPBAR ─────────────────────────────────────────────────────────────── */
.mdp-topbar.sh-topbar {
  position: sticky; top: 0; z-index: 40;
  height: 48px; padding: 0; margin: 0 0 12px;
  /* Sticky, so it must be opaque or the page scrolls visibly through it (SPEC v5.172).
     The app's own backdrop, fixed-attached like .mdp-app's, lines up pixel for pixel. */
  background: var(--sh-backdrop), var(--sh-bg);
  background-attachment: fixed;
  border: 0;
  display: flex; align-items: center; gap: 16px;
}
.sh-topbar__left { display: flex; align-items: center; gap: 16px; min-width: 0; flex: 1; }
.sh-topbar__left::before { content: ''; order: -2; width: 1px; height: 40px; background: var(--sh-line); flex: 0 0 1px; }
.sh-topbar__right { display: flex; align-items: center; gap: 16px; }

.sh-icon-btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 0;
  height: 40px; min-width: 40px; padding: 0; border-radius: 8px;
  border: 1px solid transparent; background: var(--sh-btn-tile); cursor: pointer;
  color: var(--sh-icon); font: 500 14px/1 var(--sh-font);
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.sh-icon-btn .material-symbols-rounded { width: 38px; font-size: 20px; font-variation-settings: 'wght' 300; }
.sh-icon-btn__label { display: none; padding-right: 14px; white-space: nowrap; }
/* Hover expands the icon into a labelled pill (Figma /action-submenus). */
.sh-icon-btn--labelled:hover, .sh-icon-btn--labelled:focus-visible {
  background: var(--sh-surface); border-color: var(--sh-accent); color: var(--sh-accent);
  box-shadow: var(--sh-shadow-sm);
}
.sh-icon-btn--labelled:hover .sh-icon-btn__label,
.sh-icon-btn--labelled:focus-visible .sh-icon-btn__label { display: inline; }
.sh-icon-btn:not(.sh-icon-btn--labelled):hover { background: var(--sh-hover); color: var(--sh-text); }
/* Collapsed, the same glyph points the other way (Figma /collapsed-navigation). */
.nav-collapsed #nav-collapse-icon { transform: scaleX(-1); }
.sh-icon-btn.is-home { color: var(--sh-accent); }
.sh-icon-btn.is-home .material-symbols-rounded { font-variation-settings: 'FILL' 1, 'wght' 400; }
.sh-icon-btn[hidden] { display: none; }

.sh-crumb { display: flex; align-items: center; gap: 0; min-width: 0; font-size: 14px; white-space: nowrap; }
.sh-crumb__parent { color: var(--sh-muted); }
.sh-crumb__sep { font-size: 20px; color: var(--sh-muted); width: 32px; text-align: center; }
.sh-crumb__current { color: var(--sh-text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.sh-crumb__current img { height: 24px; width: auto; display: block; }
.sh-crumb:not(.has-parent) .sh-crumb__parent,
.sh-crumb:not(.has-parent) > .sh-crumb__sep { display: none; }

.sh-user-wrap { position: relative; }
.sh-user {
  display: flex; align-items: center; gap: 16px; height: 48px; padding: 0 0 0 4px;
  border-radius: 24px; border: 1px solid var(--sh-line); background: var(--sh-pill-bg);
  cursor: pointer; color: var(--sh-text); font: 500 14px/1 var(--sh-font);
  transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
}
.sh-user:hover, .sh-user[aria-expanded="true"] { background: var(--sh-surface); border-color: var(--sh-accent); box-shadow: var(--sh-shadow-sm); }
.sh-user .material-symbols-rounded { width: 40px; font-size: 20px; color: var(--sh-icon); transition: transform .15s ease; }
.sh-user[aria-expanded="true"] .material-symbols-rounded { transform: rotate(180deg); }
.sh-avatar {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%;
  background: var(--sh-accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font: 600 18px/1 var(--sh-font);
}

/* ── MENUS (user menu, Reports flyout) ─────────────────────────────────── */
.sh-menu {
  position: absolute; z-index: 70;
  background: var(--sh-surface); border: 1px solid var(--sh-line); border-radius: 12px;
  box-shadow: var(--sh-shadow-lg); color: var(--sh-text);
}
html[data-theme="dark"] .sh-menu { border-color: var(--sh-panel-border); }
.sh-menu[hidden] { display: none; }

.sh-usermenu { right: 0; top: calc(100% + 4px); width: 320px; }
.sh-usermenu__id { display: flex; align-items: center; gap: 16px; padding: 16px; border-bottom: 1px solid var(--sh-bg); }
html[data-theme="dark"] .sh-usermenu__id, html[data-theme="dark"] .sh-usermenu__row { border-color: var(--sh-panel-border); }
.sh-usermenu__who { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sh-usermenu__name { font-weight: 500; font-size: 14px; }
.sh-usermenu__email { font-size: 14px; color: var(--sh-muted); overflow: hidden; text-overflow: ellipsis; }
.sh-usermenu__row {
  display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 0 16px;
  border-bottom: 1px solid var(--sh-bg); font-size: 14px;
}
.sh-usermenu__row:last-child { border-bottom: 0; }
.sh-usermenu__row > .material-symbols-rounded { width: 32px; font-size: 20px; color: var(--sh-icon); font-variation-settings: 'wght' 300; }
.sh-usermenu__row > span:nth-child(2) { flex: 1; }
button.sh-usermenu__row { width: 100%; background: none; border-left: 0; border-right: 0; border-top: 0; cursor: pointer; color: inherit; font: inherit; text-align: left; }
button.sh-usermenu__row:hover { background: var(--sh-hover); }

/* Dark theme switch */
.sh-switch {
  position: relative; width: 52px; height: 24px; flex: 0 0 52px;
  border-radius: 12px; border: 1px solid var(--sh-toggle-edge); background: var(--sh-toggle-track);
  cursor: pointer; padding: 0;
}
.sh-switch::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--sh-muted); transition: transform .15s ease, background-color .15s ease;
}
.sh-switch[aria-checked="true"] { background: var(--sh-accent); border-color: var(--sh-accent); }
.sh-switch[aria-checked="true"]::after { transform: translateX(28px); background: #fff; }

/* Language segmented control */
.sh-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; border: 1px solid var(--sh-toggle-edge); background: var(--sh-toggle-track); }
.sh-seg button {
  width: 32px; height: 20px; border-radius: 6px; border: 1px solid transparent; background: transparent;
  color: var(--sh-muted); font: 700 10px/1 var(--sh-font); cursor: pointer; padding: 0;
}
/* The 1 | 2 | 3 version selector in the topbar reuses the segmented control. */
.sh-look button { width: 28px; height: 24px; font-size: 12px; }
.sh-look { align-self: center; }
.sh-seg button.active { background: var(--sh-surface); border-color: var(--sh-accent); color: var(--sh-accent); box-shadow: var(--sh-shadow-sm); }

/* Reports flyout (Figma /action-submenus): opens beside the Reports row. */
.sh-flyout { position: fixed; width: 240px; padding: 0 16px 16px; box-sizing: border-box; }
.sh-flyout__title { height: 40px; display: flex; align-items: center; color: var(--sh-muted); font-size: 14px; }
.sh-flyout__rows { display: flex; flex-direction: column; gap: 4px; }
.sh-flyout__row {
  display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 4px;
  border-radius: 8px; cursor: pointer; color: var(--sh-text); font-size: 14px; background: none; border: 0; text-align: left; width: 100%;
}
.sh-flyout__row:hover, .sh-flyout__row.active { background: var(--sh-active-row); }
.sh-flyout__row.active { font-weight: 500; }
.sh-flyout__row .sh-item__icon { color: var(--sh-icon); }
.sh-flyout__row.active .sh-item__icon, .sh-flyout__row:hover .sh-item__icon { background: var(--sh-active-tile); color: var(--sh-active-glyph); }
.sh-flyout__label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-flyout__count { font-size: 12px; color: var(--sh-muted); }
.sh-flyout__row.active .sh-flyout__count { color: var(--sh-accent); font-weight: 700; }

/* ── CONTENT PANEL ──────────────────────────────────────────────────────── */
.mdp-page.sh-panel {
  flex: 1; max-width: none; width: 100%; margin: 0;
  padding: 32px; box-sizing: border-box;
  background: var(--sh-panel-glow), var(--sh-panel);
  border: 1px solid var(--sh-panel-border); border-radius: 12px;
}

.sh-pagehead { display: flex; align-items: center; gap: 16px; margin-bottom: 32px; }
.sh-pagehead__action { margin-left: auto; align-self: flex-start; display: flex; gap: 8px; align-items: center; }
/* Refresh (v5.176): dimmed and disabled while the rebuilt embeds load. */
.mdp-refresh-btn { display: inline-flex; align-items: center; gap: 4px; }
.mdp-refresh-btn.is-busy { opacity: .7; cursor: progress; }
.sh-pagehead__icon {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 8px;
  background: var(--sh-pagehead-tile); color: var(--sh-accent);
  display: flex; align-items: center; justify-content: center;
}
.sh-pagehead__icon .material-symbols-rounded { font-size: 22px; font-variation-settings: 'FILL' 0, 'wght' 400; }
.sh-pagehead__title { margin: 0; font: 600 24px/1.05 var(--sh-font-display); color: var(--sh-panel-text); }
.sh-pagehead__sub { margin: 6px 0 0; font-size: 14px; color: var(--sh-panel-muted); }

/* The reporting build replaces this node's contents; nothing depends on the placeholder. */
.sh-report-slot {
  min-height: 560px; border: 2px dashed var(--sh-line); border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  color: var(--sh-muted); text-align: center; padding: 32px;
}
html[data-theme="dark"] .sh-report-slot { border-color: var(--sh-panel-border); }
.sh-report-slot .material-symbols-rounded { font-size: 40px; color: var(--sh-accent); }
.sh-report-slot__title { font: 600 18px/1.2 var(--sh-font-display); color: var(--sh-text); }
.sh-report-slot__note { font-size: 14px; max-width: 520px; }

/* Live: MDC_Overview_V1 fills the slot. Its canvas runs to grid row 52
   (~1,072px), so the host reserves 1,100px and the page does not jump when it
   mounts. The host stays WHITE in dark theme too -- the dashboard draws its
   filter strip and KPI row transparent, so they take the panel colour. */
.sh-report-slot.is-live {
  display: block; border: 0; padding: 0; min-height: 1100px; text-align: left;
}
/* The dashboard opens with ~40px of its own top padding above the filter row,
   which alone is about the Figma's subtitle-to-filters gap (~37px). So the
   header drops its own margin when the live report follows it. */
.sh-pagehead:has(+ .sh-report-slot.is-live) { margin-bottom: 0; }
.sh-report-slot__status { padding: 48px 0; text-align: center; color: var(--sh-muted); font-size: 14px; }
/* Transparent in every version and theme: the dashboard's filter strip and
   KPI row sit on the panel colour, and its cards paint themselves (white,
   grey in 7, #333 in dark). */
.sh-report-host { min-height: 1100px; background: transparent; border-radius: 12px; overflow: hidden; }

/* ── MOBILE: sidebar becomes an off-canvas drawer ──────────────────────── */
.sh-burger { display: none; }
@media (max-width: 768px) {
  .mdp-app, .mdp-app.nav-collapsed { grid-template-columns: minmax(0, 1fr); padding: 0 12px 12px; }
  .mdp-sidebar.sh-sidebar {
    position: fixed !important; top: 0; left: 0; bottom: 0; height: 100% !important;
    width: 272px !important; max-width: 84vw; padding: 16px;
    background: var(--sh-bg); box-shadow: none;
    transform: translateX(-100%); transition: transform .25s ease; z-index: 800;
  }
  /* Shadow only while open: a closed drawer's shadow bleeds onto the screen edge. */
  .mdp-app.mobile-nav-open .mdp-sidebar.sh-sidebar { transform: translateX(0); box-shadow: var(--sh-shadow-lg); }
  .mdp-topbar.sh-topbar, .sh-topbar__left, .sh-topbar__right { gap: 4px; }
  .sh-crumb { flex: 1; }
  /* The drawer is always the expanded rail, whatever the desktop state. */
  .nav-collapsed .sh-brand__text, .nav-collapsed .sh-search__ph, .nav-collapsed .sh-group__head,
  .nav-collapsed .sh-item__label, .nav-collapsed .sh-legal a, .nav-collapsed .sh-legal__copy { display: revert; }
  .nav-collapsed .sh-item { width: auto; justify-content: flex-start; }
  .nav-collapsed .sh-legal__copy-icon { display: none; }
  .sh-item.active::before { left: -16px; }
  .sh-burger { display: inline-flex; }
  #sh-collapse-btn { display: none; }
  .sh-topbar__left::before { display: none; }
  .sh-user > span:not(.sh-avatar):not(.material-symbols-rounded) { display: none; }
  .sh-user { gap: 0; }
  .sh-crumb__parent, .sh-crumb > .sh-crumb__sep { display: none; }
  .mdp-page.sh-panel { padding: 16px; }
  .sh-usermenu { width: min(320px, calc(100vw - 24px)); }
}

@media (prefers-reduced-motion: reduce) {
  .mdp-app, .sh-item, .sh-icon-btn, .sh-user, .sh-switch::after,
  .sh-group__head .material-symbols-rounded, .mdp-sidebar.sh-sidebar { transition: none !important; }
}

/* v5.198 (owner, 2026-10-02): the sidebar search box and the topbar bell are hidden -- neither
   did anything yet (search was a stub, the bell inert). Markup kept so either can return. */
#sh-search, #sh-bell { display: none !important; }

/* ── v5.199: David's Figma republish (bundle 04570e58, final-light / final-dark / tabs / button
   and section hover / reports catalog) ──────────────────────────────────────────────────────
   2. Refresh and PDF: 32px, radius 8, a 1px line, 12px muted label, 16px icon; hover white with
      an orange line, orange text and the large shadow (final-light-section-hover). */
html[data-look="15"] .sh-pagehead .mdp-btn--ghost {
  height: 32px; min-height: 32px; padding: 0 10px; gap: 6px; box-sizing: border-box;
  border: 1px solid var(--sh-line); border-radius: 8px; background: transparent; box-shadow: none;
  color: var(--sh-panel-muted); font: 400 12px/1 var(--sh-font);
}
html[data-look="15"] .sh-pagehead .mdp-btn--ghost .material-symbols-rounded { font-size: 16px; color: inherit;
  font-variation-settings: 'wght' 300; }
html[data-look="15"] .sh-pagehead .mdp-btn--ghost:hover,
html[data-look="15"] .sh-pagehead .mdp-btn--ghost[aria-expanded="true"] {
  background: var(--sh-surface); border-color: var(--sh-accent); color: var(--sh-accent); box-shadow: var(--sh-shadow-lg);
}
/* 3. one header everywhere: the section-header based heads (Dashboard) take the same layout */
.mdp-section-header.sh-pagehead { justify-content: flex-start; }
.sh-pagehead .mdp-section-header__actions { margin-left: auto; align-self: flex-start; display: flex; gap: 8px; align-items: center; }
/* 4. tabs (final-light-tabs): 14px dark labels, a 2px orange underline on the active one, a 1px line
   under the row across the whole panel; 24px under the header */
html[data-look="15"] .mdp-tab-bar {
  gap: 32px; margin: -8px -32px 24px; padding: 0 32px; border-bottom: 1px solid var(--sh-line);
}
html[data-look="15"] .mdp-tab-bar__item {
  position: relative; padding: 0 0 12px; margin: 0; border: 0;
  font: 400 14px/16px var(--sh-font); color: var(--sh-panel-text);
}
html[data-look="15"] .mdp-tab-bar__item:hover { color: var(--sh-accent); }
html[data-look="15"] .mdp-tab-bar__item.active { color: var(--sh-panel-text); font-weight: 400; border: 0; }
html[data-look="15"] .mdp-tab-bar__item.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 1px; background: var(--sh-accent);
}
/* the viewer's report sits on the panel like Account activity's, without a box of its own */
html[data-look="15"] #embeddable-report-host { background: transparent !important; border: 0 !important; padding: 0 !important; }
/* 5. reports catalog (final-light-reports-category / -subcategory / -favorites): separate white
   cards, radius 8, 16px apart; the search box unframed; favourites in a pale orange panel */
html[data-look="15"] #pg-analytics-reports-catalog .rc-list { gap: 16px !important; }
html[data-look="15"] .rc-list > .mdp-finance-card,
html[data-look="15"] .rc-list > .mdp-finance-card:last-child {
  min-height: 68px; background: var(--sh-surface); border: 1px solid transparent; border-radius: 8px;
}
/* !important: a favourite row carries an inline orange edge and tile from before v5.199; the Figma
   marks a favourite by its star alone */
html[data-look="15"] .rc-list > .mdp-finance-card { border-color: transparent !important; }
html[data-look="15"] .rc-list > .mdp-finance-card:hover { border-color: var(--sh-accent) !important; box-shadow: var(--sh-shadow-lg); }
html[data-look="15"] .rc-list .mdp-finance-card__icon-panel { background: var(--rc-tile) !important; }
html[data-look="15"] .rc-list > .mdp-finance-card:hover .mdp-finance-card__icon-panel { background: var(--sh-accent) !important; }
html[data-look="15"] .rc-search .mdp-input { border-color: transparent; background: var(--sh-surface); }
html[data-look="15"] .rc-search .mdp-input:focus { border-color: var(--sh-accent); }
html[data-look="15"] #catalog-favorites {
  background: rgba(251, 106, 31, 0.04) !important; border: 1px solid rgba(251, 106, 31, 0.16) !important;
  border-radius: 8px !important; padding: 16px !important; margin-bottom: 32px !important;
}
html[data-look="15"] #catalog-favorites > div:first-child { margin-bottom: 16px !important; gap: 8px !important; }
html[data-look="15"] #catalog-favorites > div:first-child .material-symbols-rounded { font-size: 16px !important; }
html[data-look="15"] #catalog-favorites > div:first-child [data-t="lite.cat.favorites"] {
  font: 500 14px/1 var(--sh-font) !important; color: var(--sh-panel-text);
}
html[data-look="15"] #catalog-favorites-count {
  font-size: 14px !important; color: var(--sh-panel-muted) !important; padding-left: 8px; border-left: 1px solid rgba(251, 106, 31, 0.24);
}
html[data-look="15"] #catalog-categories-label { display: none !important; }   /* the Figma draws none */