/* ===== Disrupt dashboard theme — dashboard pages only =====
   Light page; a muted slate band behind the header, tabs, filters and the
   first row of tiles. Pop-ups (drop-downs, menus, tooltips) keep Lightdash's own
   light styling on purpose. */
body:has(.react-grid-layout){--dx-ink:#0B1220;--dx-muted:#5B6478;--dx-line:rgba(15,23,42,.08);--dx-canvas:#F1F2F6;
  background:var(--dx-canvas) !important}
body:has(.react-grid-layout) main{background:var(--dx-canvas) !important;position:relative}
body:has(.react-grid-layout) main > *{position:relative;z-index:1}
/* the band: scrolls with the page, fades into the canvas */
body:has(.react-grid-layout) main::before{content:"";position:absolute;left:0;right:0;top:0;height:540px;z-index:0;pointer-events:none;
  background:
   radial-gradient(700px 360px at 90% 0%,rgba(120,140,190,.35),transparent 65%),
   linear-gradient(120deg,#3B4560 0%,#4A5573 100%);
  -webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}

/* header on the band */
body:has(.react-grid-layout) .mantine-8-Card-root:has(.mantine-8-Title-root){background:transparent !important;border:0 !important;box-shadow:none !important;padding-top:34px !important;position:relative}
body:has(.react-grid-layout) .mantine-8-Card-root:has(.mantine-8-Title-root)::before{content:"DISRUPT  ·  SOCIAL INTELLIGENCE";position:absolute;top:14px;left:20px;
  font:700 10.5px/1 Inter,sans-serif;letter-spacing:.24em;color:rgba(255,255,255,.72)}
body:has(.react-grid-layout) .mantine-8-Title-root{color:#fff !important;font-size:32px !important;font-weight:800 !important;letter-spacing:-.03em !important}
body:has(.react-grid-layout) .mantine-8-Card-root:has(.mantine-8-Title-root) .mantine-8-ActionIcon-root,
body:has(.react-grid-layout) .mantine-8-Card-root:has(.mantine-8-Title-root) .mantine-8-Button-root{background:rgba(255,255,255,.14) !important;border:1px solid rgba(255,255,255,.25) !important;color:#fff !important}
body:has(.react-grid-layout) .mantine-8-Card-root:has(.mantine-8-Title-root) svg{color:#fff}

/* tabs + filter strip: frosted white on the band */
body:has(.react-grid-layout) [class*="_stickyTabsAndFilters_"]{background:transparent !important;border:0 !important}
body:has(.react-grid-layout) .mantine-8-Tabs-list{gap:2px !important;padding:4px !important;background:rgba(255,255,255,.14) !important;border:1px solid rgba(255,255,255,.22) !important;
  border-radius:14px !important;width:max-content;margin:6px 0 6px 18px;backdrop-filter:blur(8px)}
body:has(.react-grid-layout) .mantine-8-Tabs-list::before{display:none !important}
body:has(.react-grid-layout) .mantine-8-Tabs-tab{border:0 !important;border-radius:10px !important;padding:8px 18px !important;font-weight:600 !important;color:rgba(255,255,255,.85) !important}
body:has(.react-grid-layout) .mantine-8-Tabs-tab[data-active]{background:#fff !important;color:#0112E7 !important;box-shadow:0 6px 18px -6px rgba(1,18,231,.6) !important}
body:has(.react-grid-layout) .mantine-8-Tabs-tab:hover:not([data-active]){background:rgba(255,255,255,.16) !important;color:#fff !important}
body:has(.react-grid-layout) [class*="_filtersBar_"]{background:transparent !important;border:0 !important}
body:has(.react-grid-layout) [class*="_filtersBar_"] > * > *:not(.mantine-8-Button-root):not(button){color:#fff}
body:has(.react-grid-layout) [class*="_bar_"]{background:rgba(255,255,255,.96) !important;border:0 !important;border-radius:14px !important;box-shadow:0 10px 30px -12px rgba(11,18,32,.35) !important}

/* cards */
body:has(.react-grid-layout) [class*="_tileCard_"]{background:#fff !important;border:1px solid var(--dx-line) !important;border-radius:16px !important;
  box-shadow:0 1px 2px rgba(15,23,42,.04),0 12px 32px -14px rgba(15,23,42,.18) !important;transition:box-shadow .2s,transform .2s}
body:has(.react-grid-layout) [class*="_tileCard_"]:hover{transform:translateY(-2px);box-shadow:0 1px 2px rgba(15,23,42,.05),0 22px 44px -18px rgba(1,18,231,.30) !important}
body:has(.react-grid-layout) [class*="_tileTitle_"]{color:var(--dx-ink) !important;font-size:14px !important;font-weight:700 !important;letter-spacing:-.01em !important}

/* KPI tiles: white, coloured accent bar + tinted corner, big ink numbers */
body:has(.react-grid-layout) [class*="_tileCard_"]:has([class*="_bigNumberText_"]){position:relative;overflow:hidden;
  background:radial-gradient(220px 140px at 100% 0%,var(--kpi-tint,rgba(1,18,231,.10)),transparent 70%),#fff !important;
  border:0 !important;box-shadow:0 18px 40px -18px rgba(11,18,32,.45) !important}
body:has(.react-grid-layout) [class*="_tileCard_"]:has([class*="_bigNumberText_"])::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--kpi,#0112E7)}
body:has(.react-grid-layout) .react-grid-item:nth-child(6n+2) [class*="_tileCard_"]{--kpi:#0112E7;--kpi-tint:rgba(1,18,231,.12)}
body:has(.react-grid-layout) .react-grid-item:nth-child(6n+3) [class*="_tileCard_"]{--kpi:#7C3AED;--kpi-tint:rgba(124,58,237,.12)}
body:has(.react-grid-layout) .react-grid-item:nth-child(6n+4) [class*="_tileCard_"]{--kpi:#0EA5E9;--kpi-tint:rgba(14,165,233,.12)}
body:has(.react-grid-layout) .react-grid-item:nth-child(6n+5) [class*="_tileCard_"]{--kpi:#EC4899;--kpi-tint:rgba(236,72,153,.12)}
body:has(.react-grid-layout) .react-grid-item:nth-child(6n+6) [class*="_tileCard_"]{--kpi:#10B981;--kpi-tint:rgba(16,185,129,.12)}
body:has(.react-grid-layout) .react-grid-item:nth-child(6n+7) [class*="_tileCard_"]{--kpi:#F59E0B;--kpi-tint:rgba(245,158,11,.14)}
body:has(.react-grid-layout) [class*="_bigNumberText_"]{color:var(--dx-ink) !important;font-size:42px !important;font-weight:800 !important;letter-spacing:-.04em !important;line-height:1 !important}
body:has(.react-grid-layout) [class*="_tileCard_"]:has([class*="_bigNumberText_"]) p:not([class*="_bigNumberText_"]){color:var(--dx-muted) !important;
  text-transform:uppercase;letter-spacing:.14em !important;font-size:10.5px !important;font-weight:700 !important;margin-top:12px !important}

/* notes: white text on the band */
body:has(.react-grid-layout) [class*="_tileCard_"]:has([class*="_markdownContainer_"]){background:transparent !important;border:0 !important;box-shadow:none !important;transform:none !important}
body:has(.react-grid-layout) [class*="_markdownContainer_"],
body:has(.react-grid-layout) [class*="_markdownContainer_"] *{color:rgba(255,255,255,.88) !important;font-size:13.5px !important}
body:has(.react-grid-layout) [class*="_markdownContainer_"] strong{color:#fff !important}

/* charts: softer grid, brighter brand bars */
body:has(.react-grid-layout) [_echarts_instance_] svg [fill="#0112E7"],
body:has(.react-grid-layout) [_echarts_instance_] svg [fill="#0112e7"]{fill:#2B45FF !important}
body:has(.react-grid-layout) [_echarts_instance_] svg path[stroke*="ldGray-1"],
body:has(.react-grid-layout) [_echarts_instance_] svg path[stroke-dasharray]{stroke:rgba(15,23,42,.06) !important}
body:has(.react-grid-layout) [_echarts_instance_] svg text{fill:#5B6478 !important}

/* tables */
body:has(.react-grid-layout) [class*="_tileCard_"] table thead th{background:#F7F8FC !important;color:var(--dx-muted) !important;font-size:10.5px !important;text-transform:uppercase;letter-spacing:.1em}
body:has(.react-grid-layout) [class*="_tileCard_"] table td{border-color:var(--dx-line) !important;white-space:nowrap !important;max-width:420px;overflow:hidden;text-overflow:ellipsis}
body:has(.react-grid-layout) [class*="_tileCard_"] table tbody tr:hover td{background-color:rgba(43,69,255,.05)}
/* header card has a fixed height in Lightdash: let it grow for the eyebrow line */
body:has(.react-grid-layout) .mantine-8-Card-root:has(.mantine-8-Title-root){height:auto !important;min-height:84px;overflow:visible !important;padding-bottom:6px !important}
body:has(.react-grid-layout) [class*="_filtersBar_"] button:not(.mantine-8-Button-root):not([class*="_pill_"]),
body:has(.react-grid-layout) [class*="_filtersBar_"] button:not(.mantine-8-Button-root):not([class*="_pill_"]) *{color:#fff !important}
/* "Hide / Show filters" is a subtle button: make it readable on the slate band */
body:has(.react-grid-layout) [class*="_stickyTabsAndFilters_"] .mantine-8-Button-root[data-variant="subtle"]{color:#fff !important;background:rgba(255,255,255,.12) !important}
body:has(.react-grid-layout) [class*="_stickyTabsAndFilters_"] .mantine-8-Button-root[data-variant="subtle"]:hover{background:rgba(255,255,255,.22) !important}