/*
 * weGAS theme for Metabase — data.w-gas.co.za
 *
 * Metabase v0.54.7 OSS. The whitelabel/custom-CSS feature is licensed and this
 * instance has no token, so this sheet is injected by nginx instead of through
 * Admin → Appearance. Nothing inside the Metabase install is modified.
 *
 * HOW IT WORKS
 * Metabase 0.50+ resolves its entire palette through CSS custom properties, and
 * its built-in "night" theme works purely by reassigning them — see the
 * [data-metabase-theme="night"] blocks in app-public.css. So this file does not
 * fight Metabase's stylesheet; it re-points the same variables at the weGAS
 * palette and lets Metabase's own dark layout do the structural work.
 *
 * That is what keeps this upgrade-safe. Metabase's hashed CSS-module class
 * names (.t8Rgx, .FRNiU …) change on every release and are never referenced
 * here. Only custom properties and stable data-testid attributes are used.
 *
 * SPECIFICITY
 * Metabase doubles its own attribute selector to reach (0,2,0). The tripled
 * selector below reaches (0,3,0) so these values win, regardless of load order.
 */

/* ---------------------------------------------------------------- type ---- *
 * Loaded from this origin rather than fonts.googleapis.com on purpose: the
 * instance's CSP is `style-src 'self' 'nonce-…'`, which blocks a Google Fonts
 * stylesheet outright. The font files themselves are served locally too, so the
 * dashboard has no third-party dependency at render time.
 *
 * Both faces are variable fonts — one file covers weights 100-900 each.
 */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/wgas/fonts/roboto-condensed.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('/wgas/fonts/roboto-mono.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* -------------------------------------------------------------- palette ---- *
 * The weGAS tokens, verbatim from app/styles.css in the demo repo. Kept as a
 * named block so the two systems can be diffed against each other by eye.
 */
:root {
  --wgas-canvas: #0e0e0e;
  --wgas-panel: #131313;
  --wgas-panel-2: #141414;
  --wgas-panel-3: #1b1b1b;
  --wgas-line: rgba(255, 255, 255, 0.1);
  --wgas-line-2: rgba(255, 255, 255, 0.06);
  --wgas-white: #ffffff;
  --wgas-grey: #8a8a8a;
  --wgas-grey-2: #6a6a6a;
  --wgas-magenta: #ee3ec9;
  --wgas-teal: #54c4c8;
  --wgas-lime: #7bff5f;
  --wgas-red: #ff4d4d;
  --wgas-coral: #f06a5a;
  --wgas-display: 'Roboto Condensed', 'Helvetica Neue', Arial, sans-serif;
  --wgas-mono: 'Roboto Mono', ui-monospace, monospace;
}

/* --------------------------------------------------- metabase remapping ---- *
 * Base layer first. Metabase's greys are the "orion" ramp and its interactive
 * colour is the "brand" ramp; almost every semantic variable resolves down to
 * one of these two, so remapping here reaches far more of the UI than chasing
 * the semantic variables one at a time.
 */
[data-metabase-theme='night'][data-metabase-theme='night'][data-metabase-theme='night'] {
  --mb-base-color-white: var(--wgas-white);

  --mb-base-color-orion-100: #ffffff;
  --mb-base-color-orion-90: #f2f2f2;
  --mb-base-color-orion-80: #d8d8d8;
  --mb-base-color-orion-70: #b4b4b4;
  --mb-base-color-orion-60: var(--wgas-grey);
  --mb-base-color-orion-50: var(--wgas-grey);
  --mb-base-color-orion-40: var(--wgas-grey-2);
  --mb-base-color-orion-30: #3a3a3a;
  --mb-base-color-orion-20: #262626;
  --mb-base-color-orion-10: var(--wgas-panel-3);
  --mb-base-color-orion-5: var(--wgas-panel-2);

  --mb-base-color-brand-70: #4a1240;
  --mb-base-color-brand-60: #7d1e6b;
  --mb-base-color-brand-50: #c92ba6;
  --mb-base-color-brand-40: var(--wgas-magenta);
  --mb-base-color-brand-30: #f36ad6;
  --mb-base-color-brand-20: #f9a6e6;
  --mb-base-color-brand-10: #fdd6f5;

  /* Semantic layer. */
  --mb-color-brand: var(--wgas-magenta);
  --mb-color-text-brand: var(--wgas-magenta);
  --mb-color-focus: rgba(238, 62, 201, 0.35);

  /*
   * Metabase paints dashcards with bg-dashboard in night mode, which would make
   * cards and canvas the same colour. The weGAS design separates them by one
   * step, so cards take --wgas-panel and the canvas is painted separately in
   * the layout section below.
   */
  --mb-color-bg-black: var(--wgas-panel);
  --mb-color-bg-dashboard: var(--wgas-panel);
  --mb-color-background: var(--wgas-panel);
  --mb-color-bg-white: var(--wgas-panel);
  --mb-color-bg-light: var(--wgas-panel-2);
  --mb-color-bg-medium: var(--wgas-panel-3);
  --mb-color-bg-night: var(--wgas-panel-2);
  --mb-color-bg-dark: var(--wgas-canvas);

  --mb-color-text-white: var(--wgas-white);
  --mb-color-text-primary: var(--wgas-white);
  --mb-color-text-dark: var(--wgas-white);
  --mb-color-text-secondary: var(--wgas-grey);
  --mb-color-text-medium: var(--wgas-grey);
  --mb-color-text-tertiary: var(--wgas-grey-2);
  --mb-color-text-light: var(--wgas-grey-2);

  /* Metabase aliases --mb-color-border to text-medium in night mode, which
   * gives solid grey rules. The design calls for a hairline instead. */
  --mb-color-border: var(--wgas-line);
  --mb-color-border-alpha-30: var(--wgas-line-2);

  --mb-color-success: var(--wgas-lime);
  --mb-color-error: var(--wgas-red);
  --mb-color-danger: var(--wgas-red);
  --mb-color-warning: var(--wgas-coral);
  --mb-color-filter: var(--wgas-teal);
  --mb-color-summarize: var(--wgas-teal);
  --mb-color-accent1: var(--wgas-teal);
  --mb-color-accent2: var(--wgas-magenta);
  --mb-color-accent3: var(--wgas-lime);
  --mb-color-accent4: var(--wgas-coral);

  --mb-color-shadow: rgba(0, 0, 0, 0.55);
  --mb-default-font-family: var(--wgas-display);
}

/* --------------------------------------------------------------- layout ---- */

html[data-metabase-theme='night'],
html[data-metabase-theme='night'] body {
  background: var(--wgas-canvas);
  font-family: var(--wgas-display);
  -webkit-font-smoothing: antialiased;
}

/* The dashboard scroll container and the public embed frame both paint their
 * own surface; without this the canvas reverts to Metabase's slate. */
[data-metabase-theme='night'] [data-testid='embed-frame'],
[data-metabase-theme='night'] [data-testid='dashboard-grid'],
[data-metabase-theme='night'] #root > div {
  background: var(--wgas-canvas);
}

/* ---------------------------------------------------------------- cards ---- *
 * The weGAS card: one step up from the canvas, hairline border, 16px radius,
 * no drop shadow.
 */
[data-metabase-theme='night'] [data-testid='dashcard'] {
  background: var(--wgas-panel);
  border: 1px solid var(--wgas-line);
  border-radius: 16px;
  box-shadow: none;
  overflow: hidden;
}

[data-metabase-theme='night'] [data-testid='dashcard'] [data-testid='legend-caption'] {
  font-family: var(--wgas-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wgas-grey);
}

/* --------------------------------------------------------------- tables ---- *
 * 17 of the 18 cards on the RCG dashboard are tables, so this is the section
 * that carries the look. Header rules follow the demo's .dtable: condensed,
 * uppercase, tracked out, hairline underneath. Body cells are mono so digits
 * align in a column — the single biggest readability win on a numeric table.
 */
[data-metabase-theme='night'] [data-testid='table-root'] {
  --cell-bg-color: transparent;
  --cell-hover-bg-color: rgba(238, 62, 201, 0.08);
  font-family: var(--wgas-mono);
}

/*
 * `header-cell` is the real hook — [role="columnheader"] sits on a wrapper that
 * carries none of the paint.
 *
 * The background reset is load-bearing. Metabase tints header cells with
 * --mb-color-brand-alpha-04, which is derived from --mb-color-brand; repointing
 * brand to magenta turned every column header into a magenta pill. Forcing the
 * surface transparent here keeps the accent for things that are actually
 * interactive.
 */
[data-metabase-theme='night'] [data-testid='table-root'] [data-testid='header-cell'],
[data-metabase-theme='night'] [data-testid='table-root'] [role='columnheader'],
[data-metabase-theme='night'] [data-testid='table-root'] thead [data-testid='cell-data'] {
  font-family: var(--wgas-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wgas-grey);
  border-bottom: 1px solid var(--wgas-line);
  background: transparent;
  border-radius: 0;
}

[data-metabase-theme='night'] [data-testid='table-root'] [data-testid='header-cell']:hover {
  background: transparent;
  color: var(--wgas-white);
}

/*
 * Metabase nests a cell-data div inside each header cell and gives it
 * --cell-hover-bg-color as its RESTING background, not just on hover — a
 * permanent brand-tinted pill behind every column name. Harmless while that
 * tint is 4%-blue; loud once brand is magenta. Reset it here and let the pill
 * appear only on actual hover.
 */
[data-metabase-theme='night'] [data-testid='header-cell'] [data-testid='cell-data'],
[data-metabase-theme='night'] [data-testid='header-cell'] > div {
  background: transparent;
  border-radius: 0;
}

[data-metabase-theme='night'] [data-testid='header-cell']:hover [data-testid='cell-data'] {
  background: rgba(238, 62, 201, 0.1);
  border-radius: 4px;
}

/* The column resize grips read the brand colour directly, which put a solid
 * magenta bar between every pair of columns. */
[data-metabase-theme='night'] [data-testid^='resize-handle-'] {
  background: var(--wgas-line);
}

[data-metabase-theme='night'] [data-testid^='resize-handle-']:hover {
  background: var(--wgas-magenta);
}

/*
 * Body cells are Roboto Condensed with tabular figures, NOT Roboto Mono.
 *
 * The demo uses mono for data and that was the first thing tried here, but
 * Metabase stores column widths per saved question and those widths were sized
 * against its own sans. Roboto Mono is materially wider, so it clipped 26 of
 * 160 cells on the deposits tab — "11,976,158" rendered as "11,976…". Shrinking
 * it to 11.5px with negative tracking still left 11 clipped and cost legibility.
 *
 * Condensed + tabular-nums gets the same column-aligned digits with room to
 * spare: 0 of 160 clipped, identical to stock Metabase. Measured, not guessed.
 *
 * If the questions are ever rebuilt with wider columns, mono becomes viable —
 * swap --wgas-display for --wgas-mono here and re-measure.
 */
[data-metabase-theme='night'] [data-testid='table-root'] [data-testid='cell-data'] {
  font-family: var(--wgas-display);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid var(--wgas-line-2);
}

/*
 * Re-assert the header type AFTER the body-cell rule above.
 *
 * The header rule further up scopes one of its branches to
 * `thead [data-testid='cell-data']`, but this table is a div grid with no
 * thead — the real structure is
 *     header-cell > div > cell-data > div(text)
 * so the header's inner cell-data is matched by the BODY rule above instead,
 * which is the same (0,3,0) specificity and comes later in the file. The text
 * therefore rendered at the body's 13px while still inheriting `uppercase` and
 * the 0.08em tracking from the header cell above it.
 *
 * 13px uppercase in a column Metabase sized for 12.5px lowercase overflows:
 * measured 3 of 8 headers clipped on the deposits tab ("platform", "Deposits",
 * "zar_equiv_approx") against 0 of 8 with the theme's stylesheet disabled on
 * the same render. Same failure as the mono experiment, one row higher up.
 *
 * Pinning the leaf to 11px puts it below stock's 12.5px, which buys back more
 * width than uppercasing costs.
 */
[data-metabase-theme='night'] [data-testid='table-root'] [data-testid='header-cell'] [data-testid='cell-data'],
[data-metabase-theme='night'] [data-testid='table-root'] [data-testid='header-cell'] [data-testid='cell-data'] * {
  font-family: var(--wgas-display);
  font-size: 11px;
  font-weight: 700;
  /* 0.04em, not the 0.08em used elsewhere for labels. Tracking is charged per
   * character, so the longest header pays the most: at 0.08em the 16-character
   * "zar_equiv_approx" spent ~14px on tracking alone and overran its column by
   * 3px (107 into 104). Halving it returns ~7px and clears the column with room
   * to spare, at no visible cost to the letterspaced-label look. */
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wgas-grey);
}

/* Metabase renders clickable dimension values in the brand colour; keeping that
 * as magenta is the one place the accent should appear inside a table. */
[data-metabase-theme='night'] [data-testid='table-root'] a,
[data-metabase-theme='night'] [data-testid='table-root'] .link {
  color: var(--wgas-magenta);
  text-decoration: none;
}

/* ------------------------------------------------------- scalar / trend ---- */

[data-metabase-theme='night'] [data-testid='scalar-value'] {
  font-family: var(--wgas-mono);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--wgas-white);
}

[data-metabase-theme='night'] [data-testid='scalar-title'] {
  font-family: var(--wgas-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--wgas-grey);
}

/* ------------------------------------------------------- header + tabs ---- *
 * The public dashboard header holds the title and the tab strip. The weGAS
 * tab treatment is a magenta underline on the active tab, everything else grey.
 */
[data-metabase-theme='night'] [data-testid='fixed-width-dashboard-header'] h1,
[data-metabase-theme='night'] [data-testid='embed-frame'] h1 {
  font-family: var(--wgas-display);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--wgas-white);
}

[data-metabase-theme='night'] [role='tab'] {
  font-family: var(--wgas-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wgas-grey);
  border-bottom: 2px solid transparent;
  background: transparent;
}

[data-metabase-theme='night'] [role='tab']:hover {
  color: var(--wgas-white);
}

[data-metabase-theme='night'] [role='tab'][aria-selected='true'],
[data-metabase-theme='night'] [role='tab'][data-active] {
  color: var(--wgas-white);
  border-bottom-color: var(--wgas-magenta);
  background: transparent;
}

/* ------------------------------------------------------------- controls ---- *
 * Metabase's Mantine buttons ("Export tab as PDF", the fullscreen and refresh
 * controls) render in #509EE3 — its house blue — which they read straight off
 * the blue base ramp rather than through --mb-color-brand. Repointing the ramp
 * catches them without having to chase each hashed Mantine class.
 */
[data-metabase-theme='night'][data-metabase-theme='night'][data-metabase-theme='night'] {
  --mb-base-color-blue-40: var(--wgas-magenta);
  --mb-base-color-blue-30: #f36ad6;
  --mb-base-color-blue-50: var(--wgas-magenta);
}

[data-metabase-theme='night'] [class*='mb-mantine-Button-root'] {
  font-family: var(--wgas-display);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--wgas-magenta);
}

[data-metabase-theme='night'] [class*='mb-mantine-Button-root']:hover {
  color: #f36ad6;
  background: rgba(238, 62, 201, 0.08);
}

/* Row-count / footer strip under each table.
 *
 * The `+ div` is excluded from anything a page module mounts. It is meant for
 * the small grey strip Metabase renders after a table, but it matches ANY div
 * placed next to a visualisation — including the RCG takeover block, which it
 * greyed out wholesale at (0,2,1) against that block's own (0,1,0). Narrowing
 * it here is the fix at source; the alternative was an arms race on
 * specificity in every module that ever mounts beside a card. */
[data-metabase-theme='night'] [data-testid='visualization-root'] + div:not([class*='wgas-']),
[data-metabase-theme='night'] [data-testid='table-footer'] {
  font-family: var(--wgas-mono);
  font-size: 11px;
  color: var(--wgas-grey-2);
}

/* --------------------------------------------------------- attribution ---- *
 * Left visible on purpose — see the note at the foot of wgas-theme.js. Toned
 * down so it reads as a footer rather than a card.
 */
[data-metabase-theme='night'] [class*='LogoBadge'],
[data-metabase-theme='night'] a[href*='metabase.com'] {
  opacity: 0.4;
  font-family: var(--wgas-display);
  font-size: 11px;
  letter-spacing: 0.06em;
  filter: grayscale(1);
}

[data-metabase-theme='night'] [class*='LogoBadge']:hover,
[data-metabase-theme='night'] a[href*='metabase.com']:hover {
  opacity: 0.7;
}

/* ---------------------------------------------------------------- logo ---- *
 * Injected by wgas-theme.js as the first child of the dashboard header. The
 * demo sets .topbar-logo to font-size:0 with the mark as a background image;
 * the same trick is used here so there is no alt text flash before it paints.
 */
.wgas-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  /*
   * The primary mount, [data-testid="embed-frame"], is a COLUMN flex container.
   * flex-basis there resolves against height, not width — `flex: 1 0 100%`
   * makes the bar 100% of the viewport height and swallows the dashboard. The
   * bar must size to its content on the main axis and stretch on the cross one.
   */
  flex: 0 0 auto;
  width: 100%;
  box-sizing: border-box;
  padding: 16px 24px 14px;
  border-bottom: 1px solid var(--wgas-line-2);
}

/*
 * Fallback mount only: the dashboard header is a ROW, so there flex-basis does
 * resolve against width and a full-width basis plus a wrapping parent is what
 * puts the bar on its own line.
 */
[data-testid='fixed-width-dashboard-header'] > .wgas-brand {
  flex-basis: 100%;
}

[data-testid='fixed-width-dashboard-header']:has(> .wgas-brand) {
  flex-wrap: wrap;
}

.wgas-brand-mark {
  width: 122px;
  height: 27px;
  flex: 0 0 auto;
  background: url('/wgas/wegas-logo.png') left center / contain no-repeat;
  /* The supplied mark is dark-on-transparent; the dashboard is dark. */
  filter: invert(1);
  font-size: 0;
  line-height: 0;
  color: transparent;
}

.wgas-brand-rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--wgas-line-2);
}

.wgas-brand-tag {
  font-family: var(--wgas-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wgas-grey-2);
  white-space: nowrap;
}

/* ------------------------------------------------------------ scrollbar ---- */

[data-metabase-theme='night'] ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
[data-metabase-theme='night'] ::-webkit-scrollbar-track {
  background: var(--wgas-canvas);
}
[data-metabase-theme='night'] ::-webkit-scrollbar-thumb {
  background: #2a2a2a;
  border-radius: 6px;
  border: 2px solid var(--wgas-canvas);
}
[data-metabase-theme='night'] ::-webkit-scrollbar-thumb:hover {
  background: #3a3a3a;
}

/* ----------------------------------------------------------------- mobile ---- *
 * Layout only. No colour, type or spacing decision from the design changes here;
 * the phone gets the same dashboard, shaped to fit the screen.
 *
 * THE PROBLEM
 * Metabase lays dashcards out with react-grid-layout: absolutely positioned,
 * with width/height/transform written as inline styles. Its mobile layout is
 * built by
 *     push({ ...card, x: 0, w: 1, y: <running sum of heights>,
 *            h: heightForDisplayType(card.display) })
 * so on a phone every card is full-width in one column — but its height is a
 * constant per visualisation type, not a function of content. A 24-row, 8-column
 * table is handed the same 290px box a sparkline gets. On a 390x844 screen that
 * meant 5 of 24 rows and 4 of 8 columns visible, inside a letterbox with ~540px
 * of empty canvas underneath it.
 *
 * WHY DROPPING position:absolute IS SAFE
 * Because that same generator emits x:0, w:1 and a monotonically increasing y,
 * the mobile visual order is already exactly the DOM order, in a single column.
 * Letting the cards flow therefore reproduces the identical order — this is not
 * relying on DOM order happening to match, it is the order Metabase computed.
 * That matters because this stylesheet is injected instance-wide, so it has to
 * hold for dashboards with many cards, not just the single-card ones here.
 */
/*
 * 768px inclusive, because that is where Metabase itself switches: measured at
 * 768 the card is already single-column and full-width (720px of 768), and at
 * 900 it is back on the desktop grid.
 *
 * .react-grid-layout / .react-grid-item are react-grid-layout's own class names,
 * not Metabase CSS-module hashes, so unlike .t8Rgx they do not rotate on
 * release. The library sets an inline pixel height on the container to make room
 * for its absolutely positioned children; that has to be released too, or the
 * cards grow and their parent stays 300px — which is precisely the empty canvas
 * this block exists to remove.
 */
@media (max-width: 768px) {
  [data-metabase-theme='night'] [data-testid='dashboard-grid'],
  [data-metabase-theme='night'] [data-testid='dashboard-grid'] .react-grid-layout {
    display: flex;
    flex-direction: column;
    height: auto !important;
    /* react-grid-layout writes the width it measured (462px at 390px) inline;
     * every 100%-wide card below inherits the overflow unless it is capped. */
    width: 100% !important;
    max-width: 100%;
  }

  /* Inline styles, so !important is the only lever. */
  [data-metabase-theme='night'] [data-testid='dashcard-container'] {
    position: relative !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    /* Sized against the viewport rather than a fixed pixel cap: a flat cap was
     * set for phones and then became the binding constraint on tablets, leaving
     * a 1024px-tall iPad with 292px of empty canvas under a 560px card. 72vh
     * leaves room for the brand bar, title and tab strip (~140px) on every
     * screen tested, from a 667px SE to a 1024px iPad. */
    margin-bottom: 14px;
    /* Default is chart-sized: Metabase only draws a chart or table once its
     * container has a size, so a rule keyed on the rendered chart never fires. */
    min-height: 52vh;
  }

  /* Height by what the card is, not one figure for all of them. The flat 72vh
   * was written for RCG, where every card is a big table; on the AMS
   * dashboards it turned each section heading into a screen and a half of
   * empty canvas and stretched a single number to the same. Headings take
   * their text height, numbers a tile, tables and charts a screen they can
   * scroll inside. :has() is iOS 15.4+ / Chrome 105+; older browsers fall
   * back to content height, which is still better than 72vh of nothing. */
  [data-metabase-theme='night'] [data-testid='dashcard-container']:has([data-testid='scalar-container']) {
    min-height: 150px;
  }
  /* height:100% of an auto-height card is 0, which swallows the heading text. */
  [data-metabase-theme='night'] [data-testid='dashcard-container']:has([data-testid='saved-dashboard-heading-content']) {
    min-height: 56px;
  }
  [data-metabase-theme='night'] [data-testid='dashcard-container']:has([data-testid='table-scroll-container']),
  [data-metabase-theme='night'] [data-testid='dashcard-container']:has([data-testid='header-cell']) {
    min-height: 72vh;
  }

  [data-metabase-theme='night'] [data-testid='dashcard'],
  [data-metabase-theme='night'] [data-testid='visualization-root'] {
    height: 100% !important;
  }

  /* Both axes scroll inside the card; give it momentum on iOS. */
  [data-metabase-theme='night'] [data-testid='table-scroll-container'] {
    -webkit-overflow-scrolling: touch;
  }

  /* The canvas keeps desktop side padding it cannot afford at 390px. */
  [data-metabase-theme='night'] [data-testid='dashboard-parameters-and-cards'],
  [data-metabase-theme='night'] [data-testid='dashboard-grid'] {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Reclaim vertical space from the brand bar for the data. */
  .wgas-brand {
    padding: 10px 14px 9px;
    gap: 10px;
  }
  .wgas-brand-logo {
    height: 18px;
  }
  .wgas-brand-tag {
    font-size: 9px;
    letter-spacing: 0.1em;
  }
}