/* spy.partners brand overlay for Metabase OSS v0.51.5
 * Injected via nginx sub_filter sidecar in front of Metabase, served at /spy-brand.css.
 * Selector policy (per AGENTS A2 spec):
 *   - PREFER [data-testid="..."], semantic role/aria, ARIA roles, stable class names.
 *   - AVOID hash-suffixed class names like .cssClass123 (regenerated per release).
 * Tested against Metabase 0.51.5 (Jetty 11.0.24 build).
 *
 * Design tokens — purple-dark spy.partners brand.
 */
:root {
  --sp-bg: oklch(15% 0.02 280);
  --sp-bg-elev: oklch(19% 0.025 282);
  --sp-bg-elev-2: oklch(23% 0.03 285);
  --sp-border: oklch(28% 0.04 285);
  --sp-text: oklch(95% 0.01 280);
  --sp-text-muted: oklch(72% 0.02 280);
  --sp-accent: oklch(60% 0.21 290);
  --sp-accent-soft: oklch(45% 0.15 290);
  --sp-accent-glow: oklch(72% 0.18 295);
  --sp-success: oklch(70% 0.16 155);
  --sp-warn: oklch(75% 0.16 75);
  --sp-danger: oklch(65% 0.21 25);
}

/* --- App-wide surface ---------------------------------------------------- */
html,
body,
#root,
.Layout-mainContainer,
[data-testid="main-navbar-root"] ~ * {
  background: var(--sp-bg) !important;
  color: var(--sp-text);
}

body {
  font-feature-settings: "ss01", "ss02", "cv05", "cv11";
}

/* Primary brand accent — Metabase exposes `--mb-color-brand` since 0.48 and it cascades. */
:root,
html {
  --mb-color-brand: var(--sp-accent) !important;
  --mb-color-brand-light: var(--sp-accent-glow) !important;
  --mb-color-brand-lighter: oklch(82% 0.10 290) !important;
  --mb-color-bg-light: var(--sp-bg-elev) !important;
  --mb-color-bg-medium: var(--sp-bg-elev-2) !important;
  --mb-color-bg-dark: var(--sp-bg) !important;
  --mb-color-text-dark: var(--sp-text) !important;
  --mb-color-text-medium: var(--sp-text-muted) !important;
  --mb-color-text-light: oklch(60% 0.02 280) !important;
  --mb-color-border: var(--sp-border) !important;
}

/* --- Top navbar ---------------------------------------------------------- */
[data-testid="main-navbar-root"],
[data-testid="app-bar"],
header[role="banner"] {
  background: linear-gradient(180deg, oklch(13% 0.02 280) 0%, oklch(16% 0.025 282) 100%) !important;
  border-bottom: 1px solid var(--sp-border) !important;
  box-shadow: 0 1px 0 oklch(28% 0.05 290 / 0.45);
}

[data-testid="main-navbar-root"] a,
[data-testid="app-bar"] a {
  color: var(--sp-text) !important;
}

[data-testid="main-navbar-root"] a:hover {
  color: var(--sp-accent-glow) !important;
}

/* --- Sidebar (collections tree) ----------------------------------------- */
[data-testid="sidebar-toggle-button"] ~ nav,
nav[aria-label="Main"] {
  background: oklch(13% 0.02 280) !important;
  border-right: 1px solid var(--sp-border) !important;
}

/* --- Dashboard tabs ----------------------------------------------------- */
[role="tablist"] {
  border-bottom: 1px solid var(--sp-border) !important;
  background: transparent !important;
}

[role="tab"] {
  color: var(--sp-text-muted) !important;
  font-weight: 500;
  transition: color 180ms ease, border-color 180ms ease;
}

[role="tab"][aria-selected="true"] {
  color: var(--sp-text) !important;
  border-bottom: 2px solid var(--sp-accent) !important;
  box-shadow: 0 1px 0 0 var(--sp-accent);
}

[role="tab"]:hover:not([aria-selected="true"]) {
  color: var(--sp-accent-glow) !important;
}

/* --- Dashboard cards (DashCard) ----------------------------------------- */
[data-testid="dashcard"] {
  background: var(--sp-bg-elev) !important;
  border: 1px solid var(--sp-border) !important;
  border-radius: 10px !important;
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 180ms ease;
}

[data-testid="dashcard"]:hover {
  transform: translateY(-1px);
  border-color: oklch(40% 0.10 290) !important;
  box-shadow: 0 12px 32px -16px oklch(20% 0.20 290 / 0.55),
              0 2px 6px -2px oklch(0% 0 0 / 0.4);
}

[data-testid="dashcard-title"],
[data-testid="dashcard"] h2,
[data-testid="dashcard"] h3 {
  color: var(--sp-text) !important;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* --- Scalar / number cards --------------------------------------------- */
[data-testid="scalar-value"],
[data-testid="scalar-container"] h1 {
  color: var(--sp-text) !important;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-shadow: 0 0 18px oklch(60% 0.21 290 / 0.18);
}

[data-testid="scalar-title"] {
  color: var(--sp-text-muted) !important;
  text-transform: uppercase;
  font-size: 0.72em;
  letter-spacing: 0.06em;
}

/* --- Tables ------------------------------------------------------------- */
[data-testid="table-root"],
[data-testid="TableInteractive-root"] {
  background: var(--sp-bg-elev) !important;
  color: var(--sp-text) !important;
}

[data-testid="TableInteractive-root"] thead,
[data-testid="table-header"] {
  background: oklch(18% 0.025 285) !important;
  color: var(--sp-text-muted) !important;
  border-bottom: 1px solid var(--sp-border) !important;
}

[data-testid="TableInteractive-root"] tr:hover td {
  background: oklch(22% 0.04 290 / 0.6) !important;
}

/* --- Filters / pill chrome --------------------------------------------- */
[data-testid="parameter-widget"],
[data-testid="filter-pill"] {
  background: var(--sp-bg-elev-2) !important;
  border: 1px solid var(--sp-border) !important;
  color: var(--sp-text) !important;
  border-radius: 999px !important;
}

[data-testid="parameter-widget"]:hover {
  border-color: var(--sp-accent) !important;
}

/* --- Buttons ------------------------------------------------------------ */
button[data-testid],
.Button,
[role="button"] {
  font-weight: 500;
  border-radius: 8px !important;
}

button.Button--primary,
[data-testid="dashboard-edit-button"],
[data-testid="dashboard-save-button"] {
  background: linear-gradient(180deg, var(--sp-accent) 0%, var(--sp-accent-soft) 100%) !important;
  color: oklch(98% 0 0) !important;
  border: 1px solid oklch(50% 0.18 290) !important;
  box-shadow: 0 1px 0 oklch(72% 0.18 295 / 0.4) inset,
              0 4px 14px -6px oklch(50% 0.20 290 / 0.6);
}

button.Button--primary:hover {
  filter: brightness(1.08);
}

/* --- Hero markdown dashcard 145: soft purple gradient ------------------ */
[data-dashcard-id="145"],
[data-testid="dashcard-145"],
.DashCard[data-card-id="145"] {
  background: linear-gradient(135deg,
              oklch(28% 0.10 290) 0%,
              oklch(22% 0.07 285) 60%,
              oklch(18% 0.03 280) 100%) !important;
  border: 1px solid oklch(38% 0.14 290) !important;
  box-shadow: 0 8px 28px -12px oklch(40% 0.22 290 / 0.45);
}

[data-dashcard-id="145"] h1,
[data-dashcard-id="145"] h2,
[data-testid="dashcard-145"] h1,
[data-testid="dashcard-145"] h2 {
  background: linear-gradient(90deg, oklch(98% 0 0), oklch(85% 0.12 290));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.02em;
}

/* --- Chart-axis & legend readability on dark ---------------------------- */
.x.axis text,
.y.axis text,
.legend text,
[data-testid="legend-item-label"] {
  fill: var(--sp-text-muted) !important;
  color: var(--sp-text-muted) !important;
}

.grid line,
.x.axis path,
.y.axis path,
.x.axis line,
.y.axis line {
  stroke: oklch(28% 0.03 285 / 0.6) !important;
}

/* --- Scrollbars (webkit) ------------------------------------------------ */
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-thumb {
  background: oklch(30% 0.05 285);
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--sp-accent-soft);
}

/* --- Reduce motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  [data-testid="dashcard"] {
    transition: none !important;
  }
  [data-testid="dashcard"]:hover {
    transform: none !important;
  }
}

/* === PATCH 2026-05-19 — global header/nav/tab-strip ====================== */
/* The earlier overlay covered dashboard body but Metabase 0.51 app-shell
 * uses different containers for the topbar and tab strip. Cover them all. */

/* App-shell topbar — any container directly under #root that sits above the dashboard.
 * Selector ladder: semantic → data-element-id → element-tag.
 */
header,
nav,
[role="banner"],
[role="navigation"],
[data-element-id="app-bar"],
[data-element-id="main-navbar"],
[data-testid="main-navbar-root"],
[data-testid="app-bar"],
[data-testid="navbar"],
[data-testid="app-bar-root"],
[data-testid="main-bar"],
.AdminContainer > div:first-child,
#root > div > div > header,
#root > div > nav,
#root > div > div > nav {
  background: linear-gradient(180deg, oklch(11% 0.018 280) 0%, oklch(15% 0.025 282) 100%) !important;
  border-bottom: 1px solid var(--sp-border) !important;
  color: var(--sp-text) !important;
}

/* All text inside top-level navbars (links, breadcrumb crumbs, the "Our analytics" label) */
header *, nav *,
[role="banner"] *,
[role="navigation"] *,
[data-element-id="app-bar"] *,
[data-testid="main-navbar-root"] *,
[data-testid="app-bar"] * {
  color: var(--sp-text) !important;
}

/* Search input in topbar */
header input[type="text"],
nav input[type="text"],
[data-testid="search-bar"] input,
input[placeholder*="Search"] {
  background: oklch(19% 0.025 282) !important;
  border: 1px solid var(--sp-border) !important;
  color: var(--sp-text) !important;
}
header input::placeholder,
nav input::placeholder,
[data-testid="search-bar"] input::placeholder {
  color: var(--sp-text-muted) !important;
}

/* "+ New" button stays purple but with brand glow */
button[data-testid="new-button"],
button:has(> svg[data-element-id="plus-icon"]) {
  background: linear-gradient(180deg, var(--sp-accent) 0%, var(--sp-accent-soft) 100%) !important;
  color: oklch(98% 0 0) !important;
  border: 1px solid oklch(50% 0.18 290) !important;
}

/* Settings gear / question-mark icons */
header svg, nav svg,
[role="banner"] svg,
[data-testid="main-navbar-root"] svg {
  color: var(--sp-text-muted) !important;
  fill: currentColor !important;
}

/* Dashboard sub-header (the "spy.partners" title bar with edit / share icons) */
[data-testid="dashboard-header"],
[data-testid="dashboard-name-heading"],
[data-element-id="dashboard-header"] {
  background: transparent !important;
  color: var(--sp-text) !important;
}

/* TAB STRIP — Overview / Inventory / Landers / ... ----------------------- */
[data-testid="dashboard-tabs"],
[role="tablist"],
[data-element-id="dashboard-tabs"] {
  background: transparent !important;
  border-bottom: 1px solid var(--sp-border) !important;
}

[role="tab"],
[data-testid="dashboard-tab"] {
  color: var(--sp-text-muted) !important;
  background: transparent !important;
  border: none !important;
}

[role="tab"][aria-selected="true"],
[data-testid="dashboard-tab"][aria-selected="true"] {
  color: var(--sp-text) !important;
  border-bottom: 2px solid var(--sp-accent) !important;
  background: transparent !important;
}

[role="tab"]:hover {
  color: var(--sp-text) !important;
  background: oklch(22% 0.03 285 / 0.4) !important;
}

/* Hard fallback: anything direct under #root that is white-ish, force dark */
#root > div:first-child {
  background: var(--sp-bg) !important;
}

/* === PATCH 2026-05-19 #2 — top app-bar root cause + popovers / dropdowns =====
   Root cause of the lingering white top bar: Metabase 0.51 paints the app-bar,
   breadcrumbs, popovers, modals and menus with `background: var(--mb-color-bg-white)`
   via inline Emotion-generated styles. We previously only overrode
   --mb-color-bg-light / --mb-color-bg-dark, so the `white` token stayed #FFFFFF.
   This patch:
     1. Overrides every white/background Metabase CSS variable to dark surfaces.
     2. Forces app-bar + breadcrumbs background regardless of inline style.
     3. Themes Mantine popovers, menus, selects, calendars, modals, tooltips.
     4. Themes generic [role=dialog] / [role=menu] / [role=listbox] popovers.
   ========================================================================== */

/* ---- 1. Override Metabase semantic color tokens that resolve to white ---- */
:root,
body,
#root,
[data-element-id="app-bar"],
[data-element-id="mantine-popover"],
[data-element-id="legacy-popover"] {
  --mb-color-bg-white: var(--sp-bg-elev) !important;
  --mb-color-background: var(--sp-bg) !important;
  --mb-color-bg-light: var(--sp-bg-elev) !important;
  --mb-color-bg-medium: var(--sp-bg-elev-2) !important;
  --mb-color-bg-dark: var(--sp-bg) !important;
  --mb-color-bg-night: var(--sp-bg) !important;
  --mb-color-bg-dashboard: var(--sp-bg) !important;
  --mb-color-bg-dashboard-card: var(--sp-bg-elev) !important;
  --mb-color-bg-question: var(--sp-bg-elev) !important;
  --mb-color-background-hover: var(--sp-bg-elev-2) !important;
  --mb-color-background-selected: oklch(28% 0.08 290) !important;
  --mb-color-background-disabled: oklch(22% 0.02 285) !important;
  --mb-color-background-brand: var(--sp-accent-soft) !important;
  --mb-color-background-info: var(--sp-bg-elev-2) !important;
  --mb-color-text-white: var(--sp-text) !important;
  --mb-color-text-medium: var(--sp-text) !important;
  --mb-color-text-light: var(--sp-text-muted) !important;
  --mb-color-text-hover: var(--sp-text) !important;
  --mb-color-text-disabled: var(--sp-text-muted) !important;
  --mb-color-shadow: oklch(0% 0 0 / 0.4) !important;
  --mb-color-focus: var(--sp-accent-glow) !important;
}

/* ---- 2. Top app-bar — root cause fix --------------------------------------
   `[data-element-id="app-bar"]` IS the actual top header (verified by reading
   `/app/dist/app-main.*.js`). The white came from inline `background-color:
   var(--mb-color-bg-white)`; the override above neutralises it, but we also
   force the bg here for any direct hardcoded `#fff` fallbacks. */
[data-element-id="app-bar"],
[data-testid="app-bar"],
[data-element-id="app-bar"] > *,
[data-element-id="app-bar"] header,
[data-element-id="app-bar"] nav {
  background: var(--sp-bg) !important;
  background-color: var(--sp-bg) !important;
  color: var(--sp-text) !important;
  border-bottom: 1px solid var(--sp-border) !important;
  box-shadow: 0 1px 0 0 var(--sp-border) !important;
}

/* All descendants — transparent unless they explicitly want a colour (buttons) */
[data-element-id="app-bar"] *:not(button):not([data-testid="new-button"]):not(input) {
  background-color: transparent !important;
}

/* Breadcrumbs row (the "📁 Our analytics" strip) */
[data-testid="breadcrumbs"],
[data-element-id="breadcrumbs"],
section[data-testid="breadcrumbs"] {
  background: transparent !important;
  color: var(--sp-text) !important;
}
[data-testid="breadcrumbs"] a,
[data-testid="breadcrumbs"] span {
  color: var(--sp-text-muted) !important;
}
[data-testid="breadcrumbs"] a:hover {
  color: var(--sp-accent-glow) !important;
}

/* Sidebar toggle, collection-name heading, profile link, settings button */
[data-testid="sidebar-toggle"],
[data-testid="collection-name-heading"],
button[data-testid*="settings"],
button[data-testid*="profile"],
a[data-testid*="profile"] {
  background: transparent !important;
  color: var(--sp-text-muted) !important;
}

/* ---- 3. Mantine popovers / menus / selects / calendars ----------------- */
.mantine-Popover-dropdown,
.mantine-Menu-dropdown,
.mantine-Select-dropdown,
.mantine-MultiSelect-dropdown,
.mantine-Combobox-dropdown,
.mantine-HoverCard-dropdown,
.mantine-Tooltip-tooltip,
.mantine-Modal-content,
.mantine-Modal-header,
.mantine-Drawer-content,
.mantine-DatePicker-root,
.mantine-Calendar-root,
.mantine-MonthLevel-root,
.mantine-YearLevel-root,
.mantine-DecadeLevel-root,
[data-element-id="mantine-popover"],
[data-element-id="legacy-popover"] {
  background: var(--sp-bg-elev) !important;
  background-color: var(--sp-bg-elev) !important;
  color: var(--sp-text) !important;
  border: 1px solid var(--sp-border) !important;
  box-shadow: 0 12px 32px oklch(0% 0 0 / 0.5),
              0 0 0 1px var(--sp-border) !important;
}

/* Items inside menus / selects */
.mantine-Menu-item,
.mantine-Select-item,
.mantine-Combobox-option,
.mantine-MultiSelect-item {
  background: transparent !important;
  color: var(--sp-text) !important;
}
.mantine-Menu-item:hover,
.mantine-Menu-item[data-hovered="true"],
.mantine-Select-item[data-hovered="true"],
.mantine-Combobox-option[data-hovered="true"],
.mantine-MultiSelect-item[data-hovered="true"] {
  background: var(--sp-bg-elev-2) !important;
  color: var(--sp-text) !important;
}
.mantine-Menu-item[data-selected="true"],
.mantine-Select-item[data-selected="true"],
.mantine-Combobox-option[data-combobox-selected="true"] {
  background: var(--sp-accent-soft) !important;
  color: oklch(98% 0 0) !important;
}

/* Inputs inside popovers (search filter, date input) */
.mantine-Popover-dropdown input,
.mantine-Select-dropdown input,
.mantine-DatePicker-root input,
[data-element-id="mantine-popover"] input,
[data-element-id="legacy-popover"] input {
  background: var(--sp-bg) !important;
  color: var(--sp-text) !important;
  border: 1px solid var(--sp-border) !important;
}
.mantine-Popover-dropdown input::placeholder,
[data-element-id="mantine-popover"] input::placeholder {
  color: var(--sp-text-muted) !important;
}

/* Calendar / date-picker grid */
.mantine-Calendar-calendarHeader,
.mantine-MonthLevel-calendarHeader {
  background: transparent !important;
  color: var(--sp-text) !important;
}
.mantine-Calendar-calendarHeaderControl,
.mantine-Calendar-calendarHeaderLevel {
  color: var(--sp-text) !important;
  background: transparent !important;
}
.mantine-Calendar-calendarHeaderControl:hover,
.mantine-Calendar-calendarHeaderLevel:hover {
  background: var(--sp-bg-elev-2) !important;
}
.mantine-MonthLevel-monthRow th,
.mantine-MonthLevel-weekday {
  color: var(--sp-text-muted) !important;
  background: transparent !important;
}
.mantine-Day-day,
.mantine-MonthLevel-day {
  color: var(--sp-text) !important;
  background: transparent !important;
}
.mantine-Day-day:hover,
.mantine-MonthLevel-day:hover {
  background: var(--sp-bg-elev-2) !important;
  color: var(--sp-text) !important;
}
.mantine-Day-day[data-selected="true"],
.mantine-Day-day[data-in-range="true"],
.mantine-MonthLevel-day[data-selected="true"] {
  background: var(--sp-accent) !important;
  color: oklch(98% 0 0) !important;
}
.mantine-Day-day[data-outside="true"],
.mantine-MonthLevel-day[data-outside="true"] {
  color: oklch(40% 0.02 285) !important;
}

/* ---- 4. Generic ARIA-based popovers / Radix / floating-ui ---------------- */
[role="dialog"],
[role="menu"],
[role="listbox"],
[role="tooltip"],
[data-popover-content],
[data-radix-popper-content-wrapper] > *,
[data-floating-ui-portal] > * {
  background: var(--sp-bg-elev) !important;
  color: var(--sp-text) !important;
  border: 1px solid var(--sp-border) !important;
  box-shadow: 0 12px 32px oklch(0% 0 0 / 0.5) !important;
}

[role="menuitem"],
[role="option"] {
  background: transparent !important;
  color: var(--sp-text) !important;
}
[role="menuitem"]:hover,
[role="menuitem"][aria-selected="true"],
[role="option"]:hover,
[role="option"][aria-selected="true"] {
  background: var(--sp-bg-elev-2) !important;
}

/* Modal backdrop */
.mantine-Modal-overlay,
.mantine-Drawer-overlay,
[data-radix-portal] [data-state="open"][class*="overlay" i] {
  background: oklch(0% 0 0 / 0.55) !important;
  backdrop-filter: blur(4px);
}

/* === END PATCH 2026-05-19 #2 ============================================ */

/* === PATCH 2026-05-19 #3 — topbar search button =========================== */
/* Discovered via JS bundle grep: Metabase 0.51.5 renders the topbar search   */
/* as a Mantine <Button variant="subtle" aria-label="Search" h:36 w:240px>   */
/* — NOT an <input>. The visible "Search…" pill is button background + the   */
/* leftIcon. So input-selectors miss it; we target button[aria-label].        */

/* The button itself */
[data-element-id="app-bar"] button[aria-label="Search"],
button[aria-label="Search"] {
  background: oklch(19% 0.025 282) !important;
  color: var(--sp-text-muted) !important;
  border: 1px solid var(--sp-border) !important;
  border-radius: 999px !important;
}
[data-element-id="app-bar"] button[aria-label="Search"]:hover,
button[aria-label="Search"]:hover {
  background: var(--sp-bg-elev-2) !important;
  color: var(--sp-text) !important;
  border-color: var(--sp-accent) !important;
}
[data-element-id="app-bar"] button[aria-label="Search"] svg,
button[aria-label="Search"] svg {
  color: var(--sp-text-muted) !important;
  fill: currentColor !important;
}

/* Safety net: any input that ends up in app-bar (e.g. search modal renders   */
/* inline on some routes) — keep dark.                                        */
[data-element-id="app-bar"] input,
[data-element-id="app-bar"] input[type="text"],
[data-element-id="app-bar"] .mantine-TextInput-input,
[data-element-id="app-bar"] [class*="SearchBar"] input,
[data-element-id="app-bar"] [class*="Search-"] input {
  background: oklch(19% 0.025 282) !important;
  color: var(--sp-text) !important;
  border: 1px solid var(--sp-border) !important;
  border-radius: 999px !important;
}
[data-element-id="app-bar"] input::placeholder,
[data-element-id="app-bar"] .mantine-TextInput-input::placeholder {
  color: var(--sp-text-muted) !important;
  opacity: 1 !important;
}

/* Search modal (opened on click / cmd-k) — also `data-testid="search-app"`   */
/* and `data-testid="search-bar"` per bundle constants. Make sure the modal   */
/* surface and its input match the brand.                                     */
[data-testid="search-app"],
[data-testid="search-bar"],
[data-testid="search-bar-results-container"],
[data-testid="search-results-floating-container"] {
  background: var(--sp-bg-elev) !important;
  color: var(--sp-text) !important;
  border: 1px solid var(--sp-border) !important;
}
[data-testid="search-app"] input,
[data-testid="search-bar"] input {
  background: oklch(19% 0.025 282) !important;
  color: var(--sp-text) !important;
  border: 1px solid var(--sp-border) !important;
}
[data-testid="search-app"] input::placeholder,
[data-testid="search-bar"] input::placeholder {
  color: var(--sp-text-muted) !important;
  opacity: 1 !important;
}

/* === END PATCH 2026-05-19 #3 ============================================ */

/* === BEGIN PATCH 2026-05-19 #4 (Patch-4) =================================
 * Hide the Category parameter dropdown ONLY on the dashboard 38 Overview tab.
 *
 * Metabase OSS does not support per-tab dashboard parameters — all params are
 * global. We use the companion script spy-brand.js to mirror the URL ?tab=
 * value onto <body data-active-tab>. On the Overview tab the attribute is:
 *   - ""             before SPA mounts (first paint, no ?tab= yet), AND
 *   - "10-overview"  once Metabase appends the tab id (id 10 = Overview).
 * Verified live (2026-05-19) on dashboard 38: tab id pattern is
 *   <numeric-id>-<slugified-name>  →  "10-overview", "11-inventory", etc.
 *
 * DOM probe (2026-05-19, Metabase 0.51.5) showed the Category chip is rendered
 * as <div aria-label="Category"> inside
 *   [data-testid="dashboard-parameters-widget-container"]
 * There is NO data-parameter-slug / data-parameter-name attribute exposed on
 * the chip itself; only data-testid="parameter-value-widget-target" on the
 * inner clickable target. We scope by aria-label="Category" on the wrapper
 * AND on the inner target via :has() to make the rule resilient.
 * ----------------------------------------------------------------------- */

/* Primary selector — works on the live build (verified). */
body[data-active-tab=""]            [data-testid="dashboard-parameters-widget-container"] [aria-label="Category"],
body[data-active-tab^="10-"]        [data-testid="dashboard-parameters-widget-container"] [aria-label="Category"],
body[data-active-tab="10"]          [data-testid="dashboard-parameters-widget-container"] [aria-label="Category"],
/* Fallback — :has() on the inner target in case the aria-label moves. */
body[data-active-tab=""]            [data-testid="dashboard-parameters-widget-container"] > div:has(> [aria-label="Category"]),
body[data-active-tab^="10-"]        [data-testid="dashboard-parameters-widget-container"] > div:has(> [aria-label="Category"]),
body[data-active-tab="10"]          [data-testid="dashboard-parameters-widget-container"] > div:has(> [aria-label="Category"]),
/* Future-proofing — if Metabase ever adds data-parameter-slug on the chip. */
body[data-active-tab=""]            [data-parameter-slug="category"],
body[data-active-tab^="10-"]        [data-parameter-slug="category"],
body[data-active-tab="10"]          [data-parameter-slug="category"] {
  display: none !important;
}
/* === END PATCH 2026-05-19 #4 ============================================ */

/* === BEGIN PATCH 2026-05-20 #5 (Patch-5) =================================
 * Hide the "Дата публикации FB" parameter widget on ALL dashboard 38 tabs
 * EXCEPT Inventory (tab id 11) and Acquisition (tab id 13).
 *
 * Mechanism mirrors Patch-4 exactly: companion script /spy-brand.js mirrors
 * the URL ?tab= value onto <body data-active-tab>. Metabase OSS params are
 * global (no per-tab params), so we scope visibility via CSS.
 *
 * Param (dashboard 38): name "Дата публикации FB", slug "pub_date",
 * id "p_pubdate". Per Patch-4 DOM probe, the widget chip is rendered as
 *   [data-testid="dashboard-parameters-widget-container"] [aria-label="<name>"]
 * data-parameter-slug is NOT present on 0.51.5 — the slug selectors below are
 * future-proofing and no-op today.
 *
 * Default: hidden everywhere. Re-shown only when data-active-tab starts with
 * "11" (Inventory) or "13" (Acquisition). Tab URL pattern: "<id>-<slug>".
 * ----------------------------------------------------------------------- */

/* Hide by default on every tab. */
[data-testid="dashboard-parameters-widget-container"] [aria-label="Дата публикации FB"],
[data-testid="dashboard-parameters-widget-container"] > div:has(> [aria-label="Дата публикации FB"]),
[data-parameter-slug="pub_date"] {
  display: none !important;
}

/* Re-show ONLY on Inventory (11) and Acquisition (13). */
body[data-active-tab^="11"] [data-testid="dashboard-parameters-widget-container"] [aria-label="Дата публикации FB"],
body[data-active-tab^="13"] [data-testid="dashboard-parameters-widget-container"] [aria-label="Дата публикации FB"],
body[data-active-tab^="11"] [data-testid="dashboard-parameters-widget-container"] > div:has(> [aria-label="Дата публикации FB"]),
body[data-active-tab^="13"] [data-testid="dashboard-parameters-widget-container"] > div:has(> [aria-label="Дата публикации FB"]),
body[data-active-tab^="11"] [data-parameter-slug="pub_date"],
body[data-active-tab^="13"] [data-parameter-slug="pub_date"] {
  display: flex !important;
}
/* === END PATCH 2026-05-20 #5 ============================================ */