/*
 * Shared Metabase brand overrides.
 *
 * Metabase sets colors via JS at runtime, so !important is needed.
 *
 * ================================================================
 * TO RE-SKIN: edit the per-theme variables.css (not this file).
 * Everything here is derived automatically from --brand, --dark,
 * --bg, and --font defined in the theme's variables.css.
 * ================================================================
 */

:root {
  /* ── Derived palette (auto-calculated from theme variables) ───── */
  --brand-dark:   color-mix(in srgb, var(--brand) 78%, black);
  --brand-focus:  color-mix(in srgb, var(--brand) 60%, black);
  --brand-70:     color-mix(in srgb, var(--brand) 70%, transparent);
  --brand-20:     color-mix(in srgb, var(--brand) 20%, transparent);
  --brand-15:     color-mix(in srgb, var(--brand) 15%, transparent);
  --brand-10:     color-mix(in srgb, var(--brand) 10%, transparent);
  --brand-05:     color-mix(in srgb, var(--brand) 5%, transparent);

  --dark-deeper:  color-mix(in srgb, var(--dark) 75%, black);
  --dark-hover:   color-mix(in srgb, var(--dark) 65%, black);
  --dark-60:      color-mix(in srgb, var(--dark) 60%, transparent);

  --text-sec:     color-mix(in srgb, var(--dark) 88%, var(--bg));
  --text-tert:    color-mix(in srgb, var(--dark) 55%, var(--bg));
  --text-dis:     color-mix(in srgb, var(--dark) 22%, var(--bg));

  --bg-near:      color-mix(in srgb, var(--bg) 98%, var(--dark));
  --bg-light:     color-mix(in srgb, var(--bg) 96%, var(--dark));
  --bg-hover:     color-mix(in srgb, var(--bg) 94%, var(--dark));
  --bg-medium:    color-mix(in srgb, var(--bg) 88%, var(--dark));
  --scroll-thumb: color-mix(in srgb, var(--dark) 25%, var(--bg));

  /* ── Metabase brand ──────────────────────────────────────────── */
  --mb-color-brand:          var(--brand) !important;
  --mb-color-brand-light:    var(--brand-10) !important;
  --mb-color-brand-lighter:  var(--brand-05) !important;
  --mb-color-brand-dark:     var(--brand-dark) !important;
  --mb-color-summarize:      var(--brand) !important;
  --mb-color-filter:         var(--brand-dark) !important;
  --mb-color-metabase-brand: var(--brand) !important;
  --mb-color-saturated-blue: var(--brand) !important;
  --mb-color-focus:          var(--brand-focus) !important;
  --mb-color-white:          var(--bg) !important;
  --mb-color-shadow-embedding-hub-card: var(--brand-70) !important;

  /* ── Metabase backgrounds ────────────────────────────────────── */
  --mb-color-bg-white:            var(--bg) !important;
  --mb-color-bg-primary:          var(--bg) !important;
  --mb-color-bg-light:            var(--bg-light) !important;
  --mb-color-bg-hover:            var(--bg-hover) !important;
  --mb-color-bg-medium:           var(--bg-medium) !important;
  --mb-color-bg-secondary:        var(--bg-medium) !important;
  --mb-color-bg-dark:             var(--dark) !important;
  --mb-color-bg-darker:           var(--dark-deeper) !important;
  --mb-color-bg-black:            var(--dark) !important;
  --mb-color-bg-black-alpha-60:   var(--dark-60) !important;
  --mb-color-background:          var(--bg) !important;
  --mb-color-background-hover:    var(--bg-light) !important;
  --mb-color-background-light:    var(--bg-near) !important;
  --mb-color-background-disabled: var(--bg-medium) !important;
  --mb-color-bg-dashboard:        var(--bg) !important;
  --mb-color-bg-dashboard-card:   var(--bg) !important;

  /* ── Metabase text ───────────────────────────────────────────── */
  --mb-color-text-primary:   var(--dark) !important;
  --mb-color-text-secondary: var(--text-sec) !important;
  --mb-color-text-tertiary:  var(--text-tert) !important;
  --mb-color-text-brand:     var(--brand) !important;
  --mb-color-text-white:     var(--bg) !important;
  --mb-color-text-dark:      var(--dark) !important;
  --mb-color-text-medium:    var(--text-sec) !important;
  --mb-color-text-light:     var(--text-tert) !important;
  --mb-color-text-hover:     var(--dark-hover) !important;
  --mb-color-text-selected:  var(--bg) !important;
  --mb-color-text-disabled:  var(--text-dis) !important;

  /* ── Mantine base ────────────────────────────────────────────── */
  --mantine-color-default:        var(--bg) !important;
  --mantine-color-default-hover:  var(--bg-hover) !important;
  --mantine-color-default-color:  var(--dark) !important;
  --mantine-color-default-border: var(--bg-medium) !important;
  --mantine-color-body:           var(--bg) !important;
  --mantine-color-text:           var(--dark) !important;
  --mantine-color-dimmed:         var(--text-tert) !important;

  /* ── Mantine brand ───────────────────────────────────────────── */
  --mantine-color-brand-filled:        var(--brand) !important;
  --mantine-color-brand-filled-hover:  var(--brand-dark) !important;
  --mantine-color-brand-light:         var(--brand-15) !important;
  --mantine-color-brand-light-hover:   var(--brand-20) !important;
  --mantine-color-brand-light-color:   var(--brand) !important;
  --mantine-color-brand-text:          var(--brand) !important;
  --mantine-color-brand-outline:       var(--brand) !important;
  --mantine-color-brand-outline-hover: var(--brand-05) !important;
  --mantine-color-brand-0: var(--brand) !important;
  --mantine-color-brand-1: var(--brand) !important;
  --mantine-color-brand-2: var(--brand) !important;
  --mantine-color-brand-3: var(--brand) !important;
  --mantine-color-brand-4: var(--brand) !important;
  --mantine-color-brand-5: var(--brand) !important;
  --mantine-color-brand-6: var(--brand) !important;
  --mantine-color-brand-7: var(--brand) !important;
  --mantine-color-brand-8: var(--brand) !important;
  --mantine-color-brand-9: var(--brand) !important;

  /*
   * ── Mantine background tokens ─────────────────────────────────
   * Each bg token needs: filled, filled-hover, text, outline, light-color, 0
   */

  /* bg-white / bg-primary */
  --mantine-color-bg-white-filled:       var(--bg) !important;
  --mantine-color-bg-white-filled-hover: var(--bg) !important;
  --mantine-color-bg-white-text:         var(--bg) !important;
  --mantine-color-bg-white-outline:      var(--bg) !important;
  --mantine-color-bg-white-light-color:  var(--bg) !important;
  --mantine-color-bg-white-0:            var(--bg) !important;
  --mantine-color-bg-primary-filled:       var(--bg) !important;
  --mantine-color-bg-primary-filled-hover: var(--bg) !important;
  --mantine-color-bg-primary-text:         var(--bg) !important;
  --mantine-color-bg-primary-outline:      var(--bg) !important;
  --mantine-color-bg-primary-light-color:  var(--bg) !important;
  --mantine-color-bg-primary-0:            var(--bg) !important;

  /* bg-secondary / bg-light */
  --mantine-color-bg-secondary-filled:       var(--bg-light) !important;
  --mantine-color-bg-secondary-filled-hover: var(--bg-light) !important;
  --mantine-color-bg-secondary-text:         var(--bg-light) !important;
  --mantine-color-bg-secondary-outline:      var(--bg-light) !important;
  --mantine-color-bg-secondary-light-color:  var(--bg-light) !important;
  --mantine-color-bg-secondary-0:            var(--bg-light) !important;
  --mantine-color-bg-light-filled:       var(--bg-light) !important;
  --mantine-color-bg-light-filled-hover: var(--bg-light) !important;
  --mantine-color-bg-light-text:         var(--bg-light) !important;
  --mantine-color-bg-light-outline:      var(--bg-light) !important;
  --mantine-color-bg-light-light-color:  var(--bg-light) !important;
  --mantine-color-bg-light-0:            var(--bg-light) !important;

  /* bg-hover */
  --mantine-color-bg-hover-filled:       var(--bg-hover) !important;
  --mantine-color-bg-hover-filled-hover: var(--bg-hover) !important;
  --mantine-color-bg-hover-text:         var(--bg-hover) !important;
  --mantine-color-bg-hover-outline:      var(--bg-hover) !important;
  --mantine-color-bg-hover-light-color:  var(--bg-hover) !important;
  --mantine-color-bg-hover-0:            var(--bg-hover) !important;

  /* bg-medium */
  --mantine-color-bg-medium-filled:       var(--bg-medium) !important;
  --mantine-color-bg-medium-filled-hover: var(--bg-medium) !important;
  --mantine-color-bg-medium-text:         var(--bg-medium) !important;
  --mantine-color-bg-medium-outline:      var(--bg-medium) !important;
  --mantine-color-bg-medium-light-color:  var(--bg-medium) !important;
  --mantine-color-bg-medium-0:            var(--bg-medium) !important;

  /* bg-dark / bg-black */
  --mantine-color-bg-dark-filled:       var(--dark) !important;
  --mantine-color-bg-dark-filled-hover: var(--dark) !important;
  --mantine-color-bg-dark-text:         var(--dark) !important;
  --mantine-color-bg-dark-outline:      var(--dark) !important;
  --mantine-color-bg-dark-light-color:  var(--dark) !important;
  --mantine-color-bg-dark-0:            var(--dark) !important;
  --mantine-color-bg-black-filled:       var(--dark) !important;
  --mantine-color-bg-black-filled-hover: var(--dark) !important;
  --mantine-color-bg-black-text:         var(--dark) !important;
  --mantine-color-bg-black-outline:      var(--dark) !important;
  --mantine-color-bg-black-light-color:  var(--dark) !important;
  --mantine-color-bg-black-0:            var(--dark) !important;

  /* bg-darker */
  --mantine-color-bg-darker-filled:       var(--dark-deeper) !important;
  --mantine-color-bg-darker-filled-hover: var(--dark-deeper) !important;
  --mantine-color-bg-darker-text:         var(--dark-deeper) !important;
  --mantine-color-bg-darker-outline:      var(--dark-deeper) !important;
  --mantine-color-bg-darker-light-color:  var(--dark-deeper) !important;
  --mantine-color-bg-darker-0:            var(--dark-deeper) !important;

  /*
   * ── Mantine text tokens ───────────────────────────────────────
   * Each text token needs: filled, filled-hover, text, outline, light-color
   */

  /* text-primary / text-dark */
  --mantine-color-text-primary-filled:       var(--dark) !important;
  --mantine-color-text-primary-filled-hover: var(--dark) !important;
  --mantine-color-text-primary-text:         var(--dark) !important;
  --mantine-color-text-primary-outline:      var(--dark) !important;
  --mantine-color-text-primary-light-color:  var(--dark) !important;
  --mantine-color-text-dark-filled:       var(--dark) !important;
  --mantine-color-text-dark-filled-hover: var(--dark) !important;
  --mantine-color-text-dark-text:         var(--dark) !important;
  --mantine-color-text-dark-outline:      var(--dark) !important;
  --mantine-color-text-dark-light-color:  var(--dark) !important;

  /* text-secondary / text-medium */
  --mantine-color-text-secondary-filled:       var(--text-sec) !important;
  --mantine-color-text-secondary-filled-hover: var(--text-sec) !important;
  --mantine-color-text-secondary-text:         var(--text-sec) !important;
  --mantine-color-text-secondary-outline:      var(--text-sec) !important;
  --mantine-color-text-secondary-light-color:  var(--text-sec) !important;
  --mantine-color-text-medium-filled:       var(--text-sec) !important;
  --mantine-color-text-medium-filled-hover: var(--text-sec) !important;
  --mantine-color-text-medium-text:         var(--text-sec) !important;
  --mantine-color-text-medium-outline:      var(--text-sec) !important;
  --mantine-color-text-medium-light-color:  var(--text-sec) !important;

  /* text-tertiary / text-light */
  --mantine-color-text-tertiary-filled:       var(--text-tert) !important;
  --mantine-color-text-tertiary-filled-hover: var(--text-tert) !important;
  --mantine-color-text-tertiary-text:         var(--text-tert) !important;
  --mantine-color-text-tertiary-outline:      var(--text-tert) !important;
  --mantine-color-text-tertiary-light-color:  var(--text-tert) !important;
  --mantine-color-text-light-filled:       var(--text-tert) !important;
  --mantine-color-text-light-filled-hover: var(--text-tert) !important;
  --mantine-color-text-light-text:         var(--text-tert) !important;
  --mantine-color-text-light-outline:      var(--text-tert) !important;
  --mantine-color-text-light-light-color:  var(--text-tert) !important;

  /* text-disabled */
  --mantine-color-text-disabled-filled:       var(--text-dis) !important;
  --mantine-color-text-disabled-filled-hover: var(--text-dis) !important;
  --mantine-color-text-disabled-text:         var(--text-dis) !important;
  --mantine-color-text-disabled-outline:      var(--text-dis) !important;
  --mantine-color-text-disabled-light-color:  var(--text-dis) !important;

  /* ── Logo (hide Metabase wordmark) ───────────────────────────── */
  --mb-color-logo-text:      transparent !important;
  --mb-color-logo-primary:   transparent !important;
  --mb-color-logo-secondary: transparent !important;
}

/* Override inline --view-button-color set by Metabase JS */
[style*="--view-button-color"] {
  --view-button-color: var(--brand) !important;
}

/* Scrollbar styling */
* {
  scrollbar-color: var(--scroll-thumb) var(--bg-light);
}
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-track {
  background: var(--bg-light);
}
*::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 4px;
}

/* Replace the Metabase nav logo with a custom image */
[data-testid="main-logo-link"] {
  display: flex;
  align-items: center;
  height: 32px;
}
[data-testid="main-logo-link"] svg {
  display: none !important;
}
[data-testid="main-logo-link"]::before {
  content: "";
  display: block;
  width: 120px;
  height: 32px;
  background: url("/app/assets/img/logo.svg") no-repeat left center / contain;
}

/* Chart settings tab indicator */
[data-testid="chartsettings-sidebar"] [role="radiogroup"] input[type="radio"]:checked + div {
  color: var(--brand) !important;
  border-bottom-color: var(--brand) !important;
}
[data-testid="chartsettings-sidebar"] [role="radiogroup"] input[type="radio"]:not(:checked) + div:hover {
  color: var(--brand) !important;
}