/*
 * LDC brand stylesheet for Metabase 0.63.10 OSS (bi.ldcbi.com). Rebuilt 26 Sep 2026.
 *
 * Installed into the jar by bi/scripts/install_custom_visualizations.py as app/ldc/brand-custom.css, next to
 * app/ldc/custom-logo.jpg, and linked from index.html. Fonts and the brand blue #0b5cad stay in ldc-ui.css
 * (bi/scripts/patch_metabase_fonts.py).
 *
 * Three parts: the header logo (both themes); the LDC light design (Kirk approved it 26 Sep 2026 03:20 ICT after a
 * live preview; light mode only, keyed on [data-mantine-color-scheme='light'], the attribute Metabase switches);
 * and a dark-mode contrast fix for the brand blue.
 *
 * Only selectors that exist in the 0.63.10 bundle (checked 26 Sep 2026). The build uses hashed CSS-module class
 * names, so plain classes such as ".dashboard .card" or ".metabase-logo" match nothing. The stable hooks are
 * data-testid attributes.
 */

/* Header logo. The OSS logo is an inline <svg data-testid="main-logo" viewBox="0 0 212 256" height="32"> inside
 * <a data-testid="main-logo-link"> (flex, centred, height 3.25rem, max-width 14rem). The Metabase paths are hidden
 * and the LDC logo is painted as the svg's background. custom-logo.jpg is 1000 x 1000: the LdC mark spans x 205-790,
 * y 290-615, the company line y 670-705 (unreadable at 40 px). Zoom 170 % at position 50 % 19 % shows x 206-794,
 * y 77-665: the whole mark, without the company line. The same rule turns the larger logo on the sign-in page into
 * the LDC logo. Rendered and checked 26 Sep 2026 against the 0.63.10 app-bar markup. */
[data-testid="main-logo"] {
  aspect-ratio: 1 / 1;
  width: auto;
  background: #fff url("custom-logo.jpg") 50% 19% / 170% no-repeat;
  border-radius: 4px;
}

[data-testid="main-logo"] > * {
  display: none;
}

[data-testid="main-logo-link"] [data-testid="main-logo"] {
  width: 40px;
  height: 40px;
}

/* ---- LDC light design (light mode only) ------------------------------------------------------------------------ */
/* Metabase writes its colour variables into an inline :root style block that loads after this file; html[...] (0,1,1)
 * outranks :root (0,1,0), so these values win. Checked live 26 Sep 03:35 ICT. */
html[data-mantine-color-scheme='light'] {
  --mb-color-bg-dashboard: #eef2f7;
  --mb-color-bg-dashboard-card: #ffffff;
  --mb-color-border-neutral: #dde3ea;
  --mb-color-text-primary: hsla(210, 55%, 12%, 0.92);
  --mb-color-text-secondary: hsla(210, 35%, 22%, 0.66);
  --mb-color-shadow-default: rgba(15, 45, 80, 0.12);
}
/* Canvas behind the dashboard cards (the element has no hook of its own; its child does). */
[data-mantine-color-scheme='light'] div:has(> [data-testid="dashboard-parameters-and-cards"]) {
  background: #eef2f7;
}
/* A thin line in the logo's colours under the top bar. The bar is already position: relative. */
[data-mantine-color-scheme='light'] [data-testid="app-bar"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, #0b5cad 0%, #1b9e4b 70%, #e02b36 100%);
  pointer-events: none; z-index: 3;
}
[data-mantine-color-scheme='light'] [data-testid="dashboard-header-container"] {
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
}
/* Cards lift off the canvas. Section headings (no background) are left flat. */
[data-mantine-color-scheme='light'] [data-testid="dashcard"]:not(:has([data-testid="saved-dashboard-heading-content"])) {
  border-radius: 12px;
  border-color: #e2e8f0;
  box-shadow: 0 1px 2px rgba(15, 45, 80, 0.06), 0 6px 18px rgba(15, 45, 80, 0.07);
}
[data-mantine-color-scheme='light'] [data-testid="saved-dashboard-heading-content"] {
  color: #0b3d6e;
}
/* Link tiles on the home and module pages. */
[data-mantine-color-scheme='light'] [data-testid="dashcard"]:has([data-testid="entity-view-display-link"]) {
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
[data-mantine-color-scheme='light'] [data-testid="dashcard"]:has([data-testid="entity-view-display-link"]):hover {
  box-shadow: 0 2px 4px rgba(15, 45, 80, 0.08), 0 10px 24px rgba(15, 45, 80, 0.12);
  transform: translateY(-1px);
}
[data-mantine-color-scheme='light'] [data-testid="entity-view-display-link"] {
  color: #0b3d6e;
  font-weight: 600;
}
/* KPI numbers and table headers. */
[data-mantine-color-scheme='light'] [data-testid="scalar-value"] {
  color: #0f2d4d;
}
[data-mantine-color-scheme='light'] [data-testid="header-cell"] {
  background: #eef4fb;
  color: #0b3d6e;
}
/* Filter bar as one white panel. */
[data-mantine-color-scheme='light'] [data-testid="dashboard-parameters-widget-container"],
[data-mantine-color-scheme='light'] [data-testid="fixed-width-filters"] {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 45, 80, 0.05);
}
/* Link tile labels wrap to two lines instead of being cut with an ellipsis. */
[data-mantine-color-scheme='light'] [data-testid="entity-view-display-link"] * {
  white-space: normal !important;
  text-overflow: clip !important;
  overflow: visible !important;
  line-height: 1.35;
}

/* ---- Dark mode: readable brand blue ------------------------------------------------------------------------------
 * ldc-ui.css forces --mb-color-brand #0b5cad with !important on :root in every theme. On Metabase's dark background
 * (about #071722) that is ~2.9:1, below the 4.5:1 needed for text. html[...] outranks :root, so these win in dark mode
 * only: #5b9ee6 is ~6.5:1 on the same background. */
html[data-mantine-color-scheme='dark'] {
  --mb-color-brand: #5b9ee6 !important;
  --mb-color-text-brand: #7db3ee !important;
  --mb-color-text-brand-hover: #a3c9f3 !important;
  --mb-color-core-brand: #5b9ee6 !important;
  --mb-color-focus: #5b9ee6 !important;
}