/* Administrator controlled theme, navigation, and button colors. Brand marks keep their own colors. */
:root {
  --system-accent: #0b6db8;
  --system-theme-color: #123957;
  --system-button-color: #087c89;
  --system-button-foreground: #fff;
  --indigo: var(--system-theme-color);
  --teal: var(--system-theme-color);
  --blue: var(--system-theme-color);
}

html[data-gastoswise-theme],
html[data-gastoswise-theme][data-gastoswise-palette],
html[data-gastoswise-theme][data-gastoswise-palette]:not([data-gastoswise-palette="__none__"]) {
  --indigo: var(--system-theme-color);
  --teal: var(--system-theme-color);
  --blue: var(--system-theme-color);
}

html[data-gastoswise-theme] .sidebar {
  background: var(--system-theme-color) !important;
  color: var(--system-theme-foreground, #fff);
}

html[data-gastoswise-theme] .sidebar nav a {
  color: var(--system-theme-foreground, #fff);
}

html[data-gastoswise-theme] .sidebar .brand-name,
html[data-gastoswise-theme] .sidebar .brand-custom-name {
  color: var(--system-theme-foreground, #fff);
}

html[data-gastoswise-theme] .sidebar .side-user small {
  color: color-mix(in srgb, var(--system-theme-foreground, #fff) 78%, transparent);
}

html .site-header {
  background: var(--system-theme-color) !important;
  color: var(--system-theme-foreground, #fff);
}

html .site-header .brand-name,
html .site-header .primary-nav,
html .site-header .primary-nav a,
html .site-header .header-signin {
  color: var(--system-theme-foreground, #fff);
}

body .btn-primary,
body .button-primary,
.site-header .header-cta {
  background-color: var(--system-button-color);
  border-color: var(--system-button-color);
  color: var(--system-button-foreground, #fff);
}

body .btn-primary:hover,
body .button-primary:hover,
.site-header .header-cta:hover {
  background-color: color-mix(in srgb, var(--system-button-color) 84%, #000);
  border-color: color-mix(in srgb, var(--system-button-color) 84%, #000);
  color: var(--system-button-foreground, #fff);
}

.btn-primary {
  box-shadow: 0 7px 17px color-mix(in srgb, var(--system-button-color) 20%, transparent);
}

.text-link,
.mini-link,
.auth-switch a,
.hero h1 em,
.hero .eyebrow,
.app-topbar .eyebrow,
.settings-tab[aria-selected="true"] {
  color: var(--system-theme-color);
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.filter-row input:focus,
.filter-row select:focus {
  border-color: var(--system-theme-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--system-theme-color) 14%, transparent);
}

.field-check input,
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--system-theme-color);
}

.progress-track > span,
.chart-bar-track i,
.usage-trend-track i {
  background: var(--system-theme-color);
}

html[data-gastoswise-theme] .sidebar nav a.active {
  background: color-mix(in srgb, var(--system-accent) 34%, #123957);
  box-shadow: inset 3px 0 var(--system-accent);
}

html[data-gastoswise-theme="light"][data-gastoswise-palette]:not([data-gastoswise-palette="ocean"]) .sidebar nav a.active {
  background: color-mix(in srgb, var(--system-accent) 34%, #123957);
  color: #fff;
}

html[data-gastoswise-theme="dark"] .sidebar nav a.active {
  background: color-mix(in srgb, var(--system-accent) 35%, #091d2e);
  color: #fff;
}

html[data-gastoswise-theme="light"][data-gastoswise-palette]:not([data-gastoswise-palette="ocean"]) .sidebar nav a.active {
  background: color-mix(in srgb, var(--system-accent) 34%, #123957);
  box-shadow: inset 3px 0 var(--system-accent);
  color: #fff;
}

/* The saved navigation highlight also colors hover states in every user palette. */
html[data-gastoswise-theme] .sidebar nav a:hover,
html[data-gastoswise-theme] .sidebar nav a.active {
  background: color-mix(in srgb, var(--system-accent) 38%, #123957) !important;
  color: #fff !important;
}

html[data-gastoswise-theme] .sidebar nav a.active {
  box-shadow: inset 3px 0 var(--system-accent) !important;
}

html[data-gastoswise-theme] .sidebar nav a:is(:hover, .active) .nav-mark {
  background: var(--system-accent);
  color: #fff;
}