/* Tipsoo navy/orange visual override for the existing Metabase OSS deployment.
 * Source: tipsoo_assets/logos/navy-orange (navy #275673, orange #F2935C).
 * Injected by nginx/snippets/branding.conf in production and local preview.
 * Recheck logo selectors and theme variables after each Metabase upgrade.
 * Official Metabase Appearance settings require Pro/Enterprise; this preserves
 * the existing proxy-based override without changing the Metabase image.
 */

:root,
html[data-mantine-color-scheme] {
  --tipsoo-navy: #275673;
  --tipsoo-orange: #f2935c;
  --tipsoo-orange-light: #fef1e9;

  /* Navy keeps links and white button labels readable. Orange is used on
     selected/hovered surfaces; success, warning and error colors keep their
     semantic meanings. Chart series are configured with the dashboards. */
  --mb-color-brand: var(--tipsoo-navy) !important;
  --mb-color-brand-hover: var(--tipsoo-orange-light) !important;
  --mb-color-brand-hover-light: #fff8f3 !important;
  --mb-color-background-brand: var(--tipsoo-orange-light) !important;
  --mb-color-illustration-brand-secondary: var(--tipsoo-orange-light) !important;
  --mb-color-focus: var(--tipsoo-navy) !important;
  --mb-color-filter: #a64e1e !important;
  --mb-color-admin-navbar: var(--tipsoo-navy) !important;
  --mb-color-admin-navbar-secondary: var(--tipsoo-orange) !important;
  --mb-color-admin-navbar-inverse: #19394d !important;

  /* Keep UA chrome, scrollbars and autofill consistent with the light logo.
     branding.js also keeps Mantine in the light scheme. */
  color-scheme: light !important;
}

/* Shared logo component: login, top navigation, public/shared app chrome. */
[data-testid="main-logo"] {
  background-image: url('/static/tipsoo/logo-navy-orange.svg') !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  background-size: contain !important;
  width: 124px !important;
  height: 32px !important;
  flex-shrink: 0;
}

[data-testid="main-logo"] > * {
  visibility: hidden !important;
}

[data-testid="login-form"] [data-testid="main-logo"],
form [data-testid="main-logo"] {
  margin: 0 auto 1rem auto !important;
  display: block !important;
}