/* Metabase and Mantine set these on :root[data-mantine-color-scheme] from JS
   after this file loads, so the html: prefix is needed to outrank them. Mantine
   components (buttons, inputs) read --mantine-* aliases, not --mb-color-*. */

/* Travvia brand colours, named as in the Travvia Brand Guidelines (2024-09).
   Strong and tint variants are derived from those, not brand colours. */
html:root {
  --travvia-cloud: #7d9cc0;
  --travvia-cloud-strong: color-mix(in srgb, var(--travvia-cloud), var(--travvia-charcoal) 25%);
  --travvia-cloud-stronger: color-mix(in srgb, var(--travvia-cloud), var(--travvia-charcoal) 45%);
  --travvia-cloud-tint: #b0c4db;
  --travvia-cloud-tint-light: color-mix(in srgb, var(--travvia-cloud-tint), white 30%);
  --travvia-sunrise: #d69a2d;
  --travvia-sunrise-strong: color-mix(in srgb, var(--travvia-sunrise), var(--travvia-charcoal) 25%);
  --travvia-sunrise-tint: #e9ce96;
  --travvia-midnight: #545655;
  --travvia-mist: #9d9174;
  --travvia-charcoal: #39383a;
  --travvia-paper: #f2f4f5;
}

/* Metabase asks for 700 and 900 almost everywhere, so the weights are
   remapped lighter: 700 gets Regular and 800-900 get Medium. */
@font-face { font-family: Poppins; font-weight: 300; font-display: swap; src: url("/app/fonts/Poppins/Poppins-Light.woff2") format("woff2"); }
@font-face { font-family: Poppins; font-weight: 400; font-display: swap; src: url("/app/fonts/Poppins/Poppins-Regular.woff2") format("woff2"); }
@font-face { font-family: Poppins; font-weight: 500 600; font-display: swap; src: url("/app/fonts/Poppins/Poppins-Medium.woff2") format("woff2"); }
@font-face { font-family: Poppins; font-weight: 700; font-display: swap; src: url("/app/fonts/Poppins/Poppins-Regular.woff2") format("woff2"); }
@font-face { font-family: Poppins; font-weight: 800 900; font-display: swap; src: url("/app/fonts/Poppins/Poppins-Medium.woff2") format("woff2"); }
@font-face { font-family: "Poppins Metric"; font-weight: 600; font-display: swap; src: url("/app/fonts/Poppins/Poppins-SemiBold.woff2") format("woff2"); }

html:root[data-mantine-color-scheme] {
  --mb-default-font-family: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mantine-font-family: var(--mb-default-font-family);
  --mantine-font-family-headings: var(--mb-default-font-family);
}

html:root[data-mantine-color-scheme="light"] {
  --mb-color-brand: var(--travvia-cloud);
  --mb-color-core-brand: var(--travvia-cloud);
  --mb-color-core-brand-hover: var(--travvia-cloud-strong);
  --mb-color-text-brand: var(--travvia-cloud-strong);
  --mb-color-text-brand-hover: var(--travvia-cloud-stronger);
  --mb-color-icon-brand: var(--travvia-cloud);
  --mb-color-border-brand: var(--travvia-cloud);
  --mb-color-input-focus: var(--travvia-cloud);

  --mb-color-text-primary: var(--travvia-charcoal);
  --mb-color-text-secondary: var(--travvia-midnight);
  --mb-color-bg-dashboard: var(--travvia-paper);

  --mb-color-accent0: var(--travvia-cloud);
  --mb-color-accent0-dark: var(--travvia-cloud-strong);
  --mb-color-accent0-light: var(--travvia-cloud-tint);
  --mb-color-accent4: var(--travvia-sunrise);
  --mb-color-accent4-dark: var(--travvia-sunrise-strong);
  --mb-color-accent4-light: var(--travvia-sunrise-tint);
  --mb-color-feedback-warning: var(--travvia-sunrise);
  --mb-color-navbar-admin: var(--travvia-charcoal);
  --mb-color-navbar-admin-inverse: color-mix(in srgb, var(--travvia-charcoal), black 30%);
  --mb-color-navbar-admin-secondary: var(--travvia-midnight);

  /* Metabase keeps its own blue for the dashboard editing bar and purple for
     filter widgets, neither derived from core-brand. */
  --mb-color-metabase-brand: var(--travvia-cloud);
  --mb-color-core-metabase_brand: var(--travvia-cloud);
  --mb-color-core-metabase_brand-hover: var(--travvia-cloud-strong);
  --mb-color-filter: var(--travvia-cloud-strong);
  --mb-color-core-filter: var(--travvia-cloud-strong);

  /* Metabase turns every --mb-color-* into a Mantine family whose -filled,
     -text and -outline aliases point at literal shades -0 and -1, so the
     shades have to be set as well. */
  --mantine-color-navbar-admin-0: var(--travvia-charcoal);
  --mantine-color-navbar-admin-1: color-mix(in srgb, var(--travvia-charcoal), black 30%);
  --mantine-color-navbar-admin-light: color-mix(in srgb, var(--travvia-charcoal) 10%, transparent);
  --mantine-color-navbar-admin-light-hover: color-mix(in srgb, var(--travvia-charcoal) 12%, transparent);
  --mantine-color-navbar-admin-outline-hover: color-mix(in srgb, var(--travvia-charcoal) 5%, transparent);
  --mantine-color-navbar-admin-inverse-0: color-mix(in srgb, var(--travvia-charcoal), black 30%);
  --mantine-color-navbar-admin-inverse-1: color-mix(in srgb, var(--travvia-charcoal), black 30%);
  --mantine-color-navbar-admin-inverse-light: color-mix(in srgb, color-mix(in srgb, var(--travvia-charcoal), black 30%) 10%, transparent);
  --mantine-color-navbar-admin-inverse-light-hover: color-mix(in srgb, color-mix(in srgb, var(--travvia-charcoal), black 30%) 12%, transparent);
  --mantine-color-navbar-admin-inverse-outline-hover: color-mix(in srgb, color-mix(in srgb, var(--travvia-charcoal), black 30%) 5%, transparent);
  --mantine-color-navbar-admin-secondary-0: var(--travvia-cloud-tint);
  --mantine-color-navbar-admin-secondary-1: var(--travvia-cloud-tint-light);
  --mantine-color-navbar-admin-secondary-light: color-mix(in srgb, var(--travvia-cloud-tint) 10%, transparent);
  --mantine-color-navbar-admin-secondary-light-hover: color-mix(in srgb, var(--travvia-cloud-tint) 12%, transparent);
  --mantine-color-navbar-admin-secondary-outline-hover: color-mix(in srgb, var(--travvia-cloud-tint) 5%, transparent);
  --mantine-color-metabase-brand-0: var(--travvia-cloud);
  --mantine-color-metabase-brand-1: var(--travvia-cloud-strong);
  --mantine-color-metabase-brand-light: color-mix(in srgb, var(--travvia-cloud) 10%, transparent);
  --mantine-color-metabase-brand-light-hover: color-mix(in srgb, var(--travvia-cloud) 12%, transparent);
  --mantine-color-metabase-brand-outline-hover: color-mix(in srgb, var(--travvia-cloud) 5%, transparent);
  --mantine-color-metabase-brand-hover-0: var(--travvia-cloud-strong);
  --mantine-color-metabase-brand-hover-1: var(--travvia-cloud-strong);
  --mantine-color-metabase-brand-hover-light: color-mix(in srgb, var(--travvia-cloud-strong) 10%, transparent);
  --mantine-color-metabase-brand-hover-light-hover: color-mix(in srgb, var(--travvia-cloud-strong) 12%, transparent);
  --mantine-color-metabase-brand-hover-outline-hover: color-mix(in srgb, var(--travvia-cloud-strong) 5%, transparent);
  --mantine-color-core-metabase_brand-0: var(--travvia-cloud);
  --mantine-color-core-metabase_brand-1: var(--travvia-cloud-strong);
  --mantine-color-core-metabase_brand-light: color-mix(in srgb, var(--travvia-cloud) 10%, transparent);
  --mantine-color-core-metabase_brand-light-hover: color-mix(in srgb, var(--travvia-cloud) 12%, transparent);
  --mantine-color-core-metabase_brand-outline-hover: color-mix(in srgb, var(--travvia-cloud) 5%, transparent);
  --mantine-color-core-metabase_brand-hover-0: var(--travvia-cloud-strong);
  --mantine-color-core-metabase_brand-hover-1: var(--travvia-cloud-strong);
  --mantine-color-core-metabase_brand-hover-light: color-mix(in srgb, var(--travvia-cloud-strong) 10%, transparent);
  --mantine-color-core-metabase_brand-hover-light-hover: color-mix(in srgb, var(--travvia-cloud-strong) 12%, transparent);
  --mantine-color-core-metabase_brand-hover-outline-hover: color-mix(in srgb, var(--travvia-cloud-strong) 5%, transparent);
  --mantine-color-filter-0: var(--travvia-cloud-strong);
  --mantine-color-filter-1: var(--travvia-cloud-strong);
  --mantine-color-filter-light: color-mix(in srgb, var(--travvia-cloud-strong) 10%, transparent);
  --mantine-color-filter-light-hover: color-mix(in srgb, var(--travvia-cloud-strong) 12%, transparent);
  --mantine-color-filter-outline-hover: color-mix(in srgb, var(--travvia-cloud-strong) 5%, transparent);

  --mantine-primary-color-filled: var(--travvia-cloud);
  --mantine-primary-color-filled-hover: var(--travvia-cloud-strong);
  --mantine-primary-color-light: color-mix(in srgb, var(--travvia-cloud) 15%, transparent);
  --mantine-primary-color-light-hover: color-mix(in srgb, var(--travvia-cloud) 20%, transparent);
  --mantine-primary-color-light-color: var(--travvia-cloud-strong);
  --mantine-color-brand-filled: var(--travvia-cloud);
  --mantine-color-brand-filled-hover: var(--travvia-cloud-strong);
  --mantine-color-brand-light: color-mix(in srgb, var(--travvia-cloud) 15%, transparent);
  --mantine-color-brand-light-hover: color-mix(in srgb, var(--travvia-cloud) 20%, transparent);
  --mantine-color-brand-light-color: var(--travvia-cloud-strong);
  --mantine-color-brand-outline: var(--travvia-cloud);
  --mantine-color-brand-outline-hover: color-mix(in srgb, var(--travvia-cloud) 5%, transparent);
  --mantine-color-brand-text: var(--travvia-cloud-strong);
  --mantine-color-core-brand-filled: var(--travvia-cloud);
  --mantine-color-core-brand-filled-hover: var(--travvia-cloud-strong);
  --mantine-color-core-brand-light: color-mix(in srgb, var(--travvia-cloud) 15%, transparent);
  --mantine-color-core-brand-light-hover: color-mix(in srgb, var(--travvia-cloud) 20%, transparent);
  --mantine-color-core-brand-light-color: var(--travvia-cloud-strong);
  --mantine-color-core-brand-outline: var(--travvia-cloud);
  --mantine-color-core-brand-outline-hover: color-mix(in srgb, var(--travvia-cloud) 5%, transparent);
  --mantine-color-core-brand-text: var(--travvia-cloud-strong);
}

html:root[data-mantine-color-scheme="dark"] {
  --mb-color-brand: var(--travvia-cloud-tint);
  --mb-color-core-brand: var(--travvia-cloud-tint);
  --mb-color-core-brand-hover: var(--travvia-cloud-tint-light);
  --mb-color-text-brand: var(--travvia-cloud-tint-light);
  --mb-color-text-brand-hover: color-mix(in srgb, var(--travvia-cloud-tint), white 55%);
  --mb-color-icon-brand: var(--travvia-cloud-tint);
  --mb-color-border-brand: var(--travvia-cloud-tint);
  --mb-color-input-focus: var(--travvia-cloud-tint);

  --mb-color-accent0: var(--travvia-cloud-tint);
  --mb-color-accent0-dark: var(--travvia-cloud);
  --mb-color-accent0-light: color-mix(in srgb, var(--travvia-cloud-tint), white 55%);
  --mb-color-accent4: var(--travvia-sunrise-tint);
  --mb-color-accent4-dark: var(--travvia-sunrise);
  --mb-color-accent4-light: color-mix(in srgb, var(--travvia-sunrise-tint), white 40%);
  --mb-color-feedback-warning: var(--travvia-sunrise-tint);

  --mb-color-metabase-brand: var(--travvia-cloud-tint);
  --mb-color-core-metabase_brand: var(--travvia-cloud-tint);
  --mb-color-core-metabase_brand-hover: var(--travvia-cloud-tint-light);
  --mb-color-filter: var(--travvia-cloud-tint);
  --mb-color-core-filter: var(--travvia-cloud-tint);

  --mantine-color-navbar-admin-0: var(--travvia-charcoal);
  --mantine-color-navbar-admin-1: color-mix(in srgb, var(--travvia-charcoal), black 30%);
  --mantine-color-navbar-admin-light: color-mix(in srgb, var(--travvia-charcoal) 10%, transparent);
  --mantine-color-navbar-admin-light-hover: color-mix(in srgb, var(--travvia-charcoal) 12%, transparent);
  --mantine-color-navbar-admin-outline-hover: color-mix(in srgb, var(--travvia-charcoal) 5%, transparent);
  --mantine-color-navbar-admin-inverse-0: color-mix(in srgb, var(--travvia-charcoal), black 30%);
  --mantine-color-navbar-admin-inverse-1: color-mix(in srgb, var(--travvia-charcoal), black 30%);
  --mantine-color-navbar-admin-inverse-light: color-mix(in srgb, color-mix(in srgb, var(--travvia-charcoal), black 30%) 10%, transparent);
  --mantine-color-navbar-admin-inverse-light-hover: color-mix(in srgb, color-mix(in srgb, var(--travvia-charcoal), black 30%) 12%, transparent);
  --mantine-color-navbar-admin-inverse-outline-hover: color-mix(in srgb, color-mix(in srgb, var(--travvia-charcoal), black 30%) 5%, transparent);
  --mantine-color-navbar-admin-secondary-0: var(--travvia-cloud-tint);
  --mantine-color-navbar-admin-secondary-1: var(--travvia-cloud-tint-light);
  --mantine-color-navbar-admin-secondary-light: color-mix(in srgb, var(--travvia-cloud-tint) 10%, transparent);
  --mantine-color-navbar-admin-secondary-light-hover: color-mix(in srgb, var(--travvia-cloud-tint) 12%, transparent);
  --mantine-color-navbar-admin-secondary-outline-hover: color-mix(in srgb, var(--travvia-cloud-tint) 5%, transparent);
  --mantine-color-metabase-brand-0: var(--travvia-cloud-tint);
  --mantine-color-metabase-brand-1: var(--travvia-cloud-tint-light);
  --mantine-color-metabase-brand-light: color-mix(in srgb, var(--travvia-cloud-tint) 10%, transparent);
  --mantine-color-metabase-brand-light-hover: color-mix(in srgb, var(--travvia-cloud-tint) 12%, transparent);
  --mantine-color-metabase-brand-outline-hover: color-mix(in srgb, var(--travvia-cloud-tint) 5%, transparent);
  --mantine-color-metabase-brand-hover-0: var(--travvia-cloud-tint-light);
  --mantine-color-metabase-brand-hover-1: var(--travvia-cloud-tint-light);
  --mantine-color-metabase-brand-hover-light: color-mix(in srgb, var(--travvia-cloud-tint-light) 10%, transparent);
  --mantine-color-metabase-brand-hover-light-hover: color-mix(in srgb, var(--travvia-cloud-tint-light) 12%, transparent);
  --mantine-color-metabase-brand-hover-outline-hover: color-mix(in srgb, var(--travvia-cloud-tint-light) 5%, transparent);
  --mantine-color-core-metabase_brand-0: var(--travvia-cloud-tint);
  --mantine-color-core-metabase_brand-1: var(--travvia-cloud-tint-light);
  --mantine-color-core-metabase_brand-light: color-mix(in srgb, var(--travvia-cloud-tint) 10%, transparent);
  --mantine-color-core-metabase_brand-light-hover: color-mix(in srgb, var(--travvia-cloud-tint) 12%, transparent);
  --mantine-color-core-metabase_brand-outline-hover: color-mix(in srgb, var(--travvia-cloud-tint) 5%, transparent);
  --mantine-color-core-metabase_brand-hover-0: var(--travvia-cloud-tint-light);
  --mantine-color-core-metabase_brand-hover-1: var(--travvia-cloud-tint-light);
  --mantine-color-core-metabase_brand-hover-light: color-mix(in srgb, var(--travvia-cloud-tint-light) 10%, transparent);
  --mantine-color-core-metabase_brand-hover-light-hover: color-mix(in srgb, var(--travvia-cloud-tint-light) 12%, transparent);
  --mantine-color-core-metabase_brand-hover-outline-hover: color-mix(in srgb, var(--travvia-cloud-tint-light) 5%, transparent);
  --mantine-color-filter-0: var(--travvia-cloud-tint);
  --mantine-color-filter-1: var(--travvia-cloud-tint);
  --mantine-color-filter-light: color-mix(in srgb, var(--travvia-cloud-tint) 10%, transparent);
  --mantine-color-filter-light-hover: color-mix(in srgb, var(--travvia-cloud-tint) 12%, transparent);
  --mantine-color-filter-outline-hover: color-mix(in srgb, var(--travvia-cloud-tint) 5%, transparent);

  --mantine-primary-color-filled: var(--travvia-cloud-tint);
  --mantine-primary-color-filled-hover: var(--travvia-cloud-tint-light);
  --mantine-primary-color-light: color-mix(in srgb, var(--travvia-cloud-tint) 15%, transparent);
  --mantine-primary-color-light-hover: color-mix(in srgb, var(--travvia-cloud-tint) 20%, transparent);
  --mantine-primary-color-light-color: var(--travvia-cloud-tint-light);
  --mantine-color-brand-filled: var(--travvia-cloud-tint);
  --mantine-color-brand-filled-hover: var(--travvia-cloud-tint-light);
  --mantine-color-brand-light: color-mix(in srgb, var(--travvia-cloud-tint) 15%, transparent);
  --mantine-color-brand-light-hover: color-mix(in srgb, var(--travvia-cloud-tint) 20%, transparent);
  --mantine-color-brand-light-color: var(--travvia-cloud-tint-light);
  --mantine-color-brand-outline: var(--travvia-cloud-tint);
  --mantine-color-brand-outline-hover: color-mix(in srgb, var(--travvia-cloud-tint) 5%, transparent);
  --mantine-color-brand-text: var(--travvia-cloud-tint-light);
  --mantine-color-core-brand-filled: var(--travvia-cloud-tint);
  --mantine-color-core-brand-filled-hover: var(--travvia-cloud-tint-light);
  --mantine-color-core-brand-light: color-mix(in srgb, var(--travvia-cloud-tint) 15%, transparent);
  --mantine-color-core-brand-light-hover: color-mix(in srgb, var(--travvia-cloud-tint) 20%, transparent);
  --mantine-color-core-brand-light-color: var(--travvia-cloud-tint-light);
  --mantine-color-core-brand-outline: var(--travvia-cloud-tint);
  --mantine-color-core-brand-outline-hover: color-mix(in srgb, var(--travvia-cloud-tint) 5%, transparent);
  --mantine-color-core-brand-text: var(--travvia-cloud-tint-light);
}

.searchTextButton,
.mb-mantine-Button-label {
  font-weight: normal;
}

html [data-testid="legend-caption-title"] {
  font-weight: 500;
}

html [data-testid="scalar-value"] {
  font-family: "Poppins Metric", var(--mb-default-font-family);
  font-weight: 600;
}

/* Metabase sets the period and comparison weights inline. */
html [data-testid="scalar-period"] {
  font-weight: 400 !important;
  color: var(--mb-color-text-secondary);
}

html [data-testid="scalar-previous-value"] .mb-mantine-Text-root {
  font-weight: 500 !important;
}

html [data-testid="main-navbar-root"] {
  border-right: none;
}

html aside:has([data-testid="tree-item-name"]) {
  --mb-color-navbar-admin: color-mix(in srgb, var(--mb-color-brand) 14%, transparent);
  --mb-color-navbar-admin-secondary: color-mix(in srgb, var(--mb-color-brand) 8%, transparent);
  --mb-color-text-secondary: var(--mb-color-text-primary);
  border-right: none;
}

/* The admin tree uses Mantine white for selected labels. */
html aside [role="menuitem"]:has(> [data-testid="tree-item-name"]) {
  --mantine-color-white: var(--mb-color-text-brand);
  font-weight: 400;
  border-radius: 4px;
}

html aside [role="menuitem"]:has(> [data-testid="tree-item-name"]):focus-visible {
  outline: none;
  background-color: color-mix(in srgb, var(--mb-color-brand) 18%, transparent);
}

html [data-testid="main-navbar-root"] li:focus-within {
  outline: none;
  background-color: color-mix(in srgb, var(--mb-color-brand) 18%, transparent);
}

html [data-testid="main-navbar-root"] a,
html [data-testid="main-navbar-root"] a > div {
  font-weight: 400;
}

html [data-testid="main-navbar-root"] h4 {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--mb-color-text-secondary);
}

html [data-testid="main-navbar-root"] li:not([aria-selected="true"]):hover {
  background-color: color-mix(in srgb, var(--mb-color-brand) 8%, transparent);
}

html [data-testid="main-navbar-root"] [aria-selected="true"] {
  background-color: color-mix(in srgb, var(--mb-color-brand) 14%, transparent);
}

html [data-testid="main-navbar-root"] [aria-selected="true"] a,
html [data-testid="main-navbar-root"] [aria-selected="true"] a > div {
  font-weight: 500;
  color: var(--mb-color-text-brand);
}

html [data-testid="home-page"] a:has(> .Icon) {
  box-shadow: 0 1px 3px color-mix(in srgb, var(--travvia-charcoal) 7%, transparent);
}

html [data-testid="home-page"] a:has(> .Icon):hover {
  border-color: var(--mb-color-border-brand);
  box-shadow: 0 3px 8px color-mix(in srgb, var(--travvia-charcoal) 10%, transparent);
}

html [data-testid="home-page"] a:has(> .Icon) .mb-mantine-Text-root,
html [data-testid="greeting-message"],
html [data-testid="collection-entry-name"] h3,
html [data-testid="items-table-head"] [role="button"] {
  font-weight: 500;
}

html [data-testid="home-page"] a:focus-visible {
  outline: 2px solid var(--mb-color-text-brand);
  outline-offset: 2px;
  border-radius: 4px;
}

/* The Metabase logo is an inline SVG, so the Travvia logo is painted as a
   background on it and the original paths are hidden. */
svg[data-testid="main-logo"] {
  background: url("/app/assets/img/travvia-logo.svg") center / contain no-repeat;
  aspect-ratio: 462.2 / 131.4;
  width: auto;
}

svg[data-testid="main-logo"] path {
  display: none;
}

/* The dashboard editing bar colour is computed in JS from Metabase's own
   palette, not a CSS variable, so it is matched by its Emotion label class.
   That class can change on a Metabase upgrade. */
html .e15ohzis0 {
  background-color: color-mix(in srgb, var(--travvia-cloud) 85%, transparent);
}