/**
 * Runtime white-label overrides.
 * Compiled SCSS bakes Entrance blues/purples as hex; this layer remaps the
 * high-traffic utilities to brand CSS variables injected on :root.
 */

:root {
  --brand-primary: #0162e8;
  --brand-accent: #7972bc;
  --brand-secondary: #8e8e8e;
  --brand-background: #ecf0fa;
  --brand-surface: #ffffff;
  --brand-primary-hover: color-mix(in srgb, var(--brand-primary) 82%, #000);
  --brand-primary-soft: color-mix(in srgb, var(--brand-primary) 18%, #fff);
  --brand-primary-soft-dark: color-mix(in srgb, var(--brand-primary) 22%, transparent);
  --brand-accent-soft: color-mix(in srgb, var(--brand-accent) 18%, transparent);
  --brand-accent-hover: color-mix(in srgb, var(--brand-accent) 82%, #000);
  --brand-focus-ring: color-mix(in srgb, var(--brand-primary) 45%, transparent);
}

/* Keep bootstrap custom props in sync when brands set --primary */
:root {
  --primary: var(--brand-primary);
  --blue: var(--brand-primary);
  --indigo: var(--brand-primary);
  --purple: var(--brand-accent);
}

/* —— Buttons —— */
.btn-main-primary,
.btn-primary,
.btn-main-secondary {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #fff !important;
}

/* Analytics/etc. are often <a class="btn btn-success">; keep label white
   when brand primary would otherwise paint link text. */
a.btn:not([class*="btn-outline"]),
a.btn:not([class*="btn-outline"]):hover,
a.btn:not([class*="btn-outline"]):focus {
  color: #fff !important;
}

.btn-main-primary:hover,
.btn-main-primary:focus,
.btn-main-primary:active,
.btn-main-primary.active,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-main-secondary:hover,
.btn-main-secondary:focus,
.show > .btn-main-primary.dropdown-toggle {
  background-color: var(--brand-primary-hover) !important;
  border-color: var(--brand-primary-hover) !important;
  color: #fff !important;
}

.btn-main-primary:focus,
.btn-main-primary.focus,
.btn-primary:focus,
.btn-main-primary:not(:disabled):not(.disabled):active:focus,
.btn-main-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-main-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem var(--brand-focus-ring) !important;
}

.btn-outline-primary {
  color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #fff !important;
}

/* —— Text / links —— */
.text-primary,
a.text-primary {
  color: var(--brand-primary) !important;
}

a.text-primary:hover,
a.text-primary:focus {
  color: var(--brand-primary-hover) !important;
}

/* Dark UI: brand primary is often a deep navy (e.g. LMV #0B3D5C) — unreadable
   on charcoal rows. Lighten for body links / campaign names. */
body.dark-theme {
  --brand-primary-on-dark: color-mix(in srgb, var(--brand-primary) 42%, #ffffff);
  --brand-primary-on-dark-hover: color-mix(in srgb, var(--brand-primary) 28%, #ffffff);
}

body.dark-theme .text-primary,
body.dark-theme a.text-primary,
body.dark-theme .campaign-name-link,
body.dark-theme .campaign-card-title.text-primary {
  color: var(--brand-primary-on-dark) !important;
}

body.dark-theme a.text-primary:hover,
body.dark-theme a.text-primary:focus,
body.dark-theme .campaign-name-link:hover,
body.dark-theme .campaign-name-link:focus,
body.dark-theme .campaign-card-title.text-primary:hover {
  color: var(--brand-primary-on-dark-hover) !important;
}

a:not(.btn):not(.side-menu__item):not(.nav-link):hover {
  /* leave generic links alone except obvious primary CTAs below */
}

.card-sigin .main-signup-header h2,
.card-sigin .main-signup-header h2.text-primary,
.card-sigin h2.text-primary,
.login h2,
.login h2.text-primary,
.main-signup-header h2 {
  color: var(--brand-primary) !important;
}

/* —— Backgrounds —— */
.bg-primary {
  background-color: var(--brand-primary) !important;
}

.bg-primary-transparent {
  background-color: var(--brand-primary-soft) !important;
}

body.dark-theme .bg-primary-transparent {
  background-color: var(--brand-primary-soft-dark) !important;
}

.bg-primary-gradient {
  background-image: linear-gradient(
    to left,
    color-mix(in srgb, var(--brand-primary) 70%, #fff) 0%,
    var(--brand-primary) 100%
  ) !important;
}

/* —— Forms / focus —— */
.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus,
.SumoSelect > .CaptionCont:focus,
.SumoSelect.open > .CaptionCont {
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 0.2rem var(--brand-focus-ring) !important;
}

.custom-control-input:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before,
.form-check-input:checked {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}

/* —— Nav / tabs / badges —— */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.nav-tabs .nav-link.active {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #fff !important;
}

.badge-primary,
.bg-primary.badge {
  background-color: var(--brand-primary) !important;
}

.progress-bar.bg-primary,
.progress-bar {
  background-color: var(--brand-primary);
}

/* —— Sidebar active (app chrome) —— */
.app-sidebar .side-menu__item.nav-active,
.side-menu__item.nav-active {
  background-color: var(--brand-primary-soft-dark) !important;
  box-shadow: inset 3px 0 0 var(--brand-primary) !important;
}

/* —— SumoSelect (hardcoded Entrance blue in plugin CSS) —— */
.SumoSelect > .optWrapper > .options li.opt.selected,
.SumoSelect > .optWrapper > .options li.opt.sel,
.SumoSelect > .optWrapper.multiple > .options li.opt.selected span i,
.SumoSelect > .optWrapper > .options li.opt:hover {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}

/* —— Spinners / loaders —— */
.lds-roller div:after {
  background: var(--brand-primary) !important;
}

body.dark-theme .lds-roller div:after {
  background: #fff !important;
}

.spinner-border {
  border-color: var(--brand-primary);
  border-right-color: transparent;
}

/* —— Auth / public left panel —— */
.page .bg-primary-transparent {
  background: linear-gradient(
    160deg,
    var(--brand-primary-soft) 0%,
    var(--brand-background, #f4f6f5) 55%,
    var(--brand-surface, #fff) 100%
  ) !important;
}

body.dark-theme .page .bg-primary-transparent {
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--brand-primary) 35%, #111) 0%,
    #1a1a1a 100%
  ) !important;
}

/* —— Misc chrome —— */
.header-alert-link,
.toggle-sidebar-button:hover,
.organization-name-edit-icon:hover {
  color: var(--brand-primary) !important;
}

.page a,
.card-sigin a {
  color: var(--brand-primary);
}

.page a:hover,
.card-sigin a:hover {
  color: var(--brand-primary-hover);
}

/*
 * Purple utilities → brand accent (Entrance keeps #7972bc; partners can
 * override --brand-accent, and SheetSend maps accent → primary below).
 */
.text-purple,
a.text-purple,
a.text-purple:hover,
a.text-purple:focus {
  color: var(--brand-accent) !important;
}

.btn-purple,
.btn-purple-gradient,
.show > .btn-purple.dropdown-toggle {
  background-color: var(--brand-accent) !important;
  background-image: none !important;
  border-color: var(--brand-accent) !important;
  color: #fff !important;
}

.btn-purple:hover,
.btn-purple:focus,
.btn-purple:active,
.btn-purple.active,
.btn-purple-gradient:hover {
  background-color: var(--brand-accent-hover) !important;
  border-color: var(--brand-accent-hover) !important;
  color: #fff !important;
}

.bg-purple,
.bg-purple-dark,
.badge-purple,
.badge-purple-transparent {
  background-color: var(--brand-accent) !important;
  color: #fff !important;
}

.bg-purple-transparent,
.badge-purple-transparent {
  background-color: var(--brand-accent-soft) !important;
  color: var(--brand-accent) !important;
}

.bg-purple-gradient,
.card.bg-purple-gradient {
  background-image: linear-gradient(
    to right,
    var(--brand-accent) 0%,
    var(--brand-accent-hover) 100%
  ) !important;
}

.card.card-purple,
.dark-theme .card.card-purple {
  border-top-color: var(--brand-accent) !important;
}

.dot-purple::before {
  border-color: var(--brand-accent) !important;
}

/* Hardcoded Entrance purple hexes in chrome / icons */
.user-gear-icon path,
.user-gear-icon svg,
svg[fill="#673ab7"],
svg [fill="#673ab7"],
svg [style*="#673ab7"] {
  fill: var(--brand-accent) !important;
}

/* SheetSend: collapse accent into primary so purple utilities go green */
body.brand-sheetsend {
  --brand-accent: var(--brand-primary);
  --brand-accent-soft: var(--brand-primary-soft-dark);
  --brand-accent-hover: var(--brand-primary-hover);
  --purple: var(--brand-primary);
}

/* Keep brand lockups sharp and sized for chrome / auth splash */
body.brand-sheetsend .main-logo,
body.brand-sheetsend .responsive-logo .main-logo {
  max-height: 2.25rem;
  width: auto;
  object-fit: contain;
}

body.brand-sheetsend .page img.ht-xl-80p,
body.brand-sheetsend .page img.wd-xl-80p {
  max-width: min(28rem, 85%);
  max-height: 8rem;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
}