/*
 * Blue Light Art brand override.
 * Loaded after the Vuexy theme so these values win.
 *
 * Every rule below reads from the tokens in the :root block, so changing a
 * token there (or from Admin > Index Settings > Brand colors) repaints the
 * whole panel. Do not hardcode colours further down.
 */

:root {
  --bl-primary: #126fff;
  --bl-primary-hover: #0e59d6;
  --bl-primary-active: #0a41a3;
  --bl-primary-subtle: #eef4ff;
  --bl-glow: #4fa9ff;
  --bl-success: #16865b;
  --bl-warning: #b7791f;
  --bl-danger: #c13b3b;
}

/* map the brand tokens onto bootstrap / vuexy */
:root,
[data-bs-theme='light'],
[data-bs-theme='dark'] {
  --bs-primary: var(--bl-primary);
  --bs-link-color: var(--bl-primary);
  --bs-link-hover-color: var(--bl-primary-hover);
  --bs-success: var(--bl-success);
  --bs-warning: var(--bl-warning);
  --bs-danger: var(--bl-danger);
  --bs-info: var(--bl-glow);
}

/* ---- components that hardcode the stock Vuexy purple ---- */

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

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

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

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

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

.bg-label-primary {
  background-color: var(--bl-primary-subtle) !important;
  color: var(--bl-primary) !important;
}

.border-primary {
  border-color: var(--bl-primary) !important;
}

.form-check-input:checked,
.form-check-input[type='checkbox']:indeterminate,
.form-switch .form-check-input:checked {
  background-color: var(--bl-primary);
  border-color: var(--bl-primary);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--bl-glow);
  box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--bl-primary) 18%, transparent);
}

.menu-item.active > .menu-link,
.menu-vertical .menu-item.active > .menu-link {
  background: linear-gradient(
    72.47deg,
    var(--bl-primary) 22.16%,
    color-mix(in srgb, var(--bl-primary) 70%, transparent) 76.47%
  ) !important;
  color: #fff !important;
}

.menu-item .menu-link:hover { color: var(--bl-primary); }

.progress-bar { background-color: var(--bl-primary); }
.spinner-border.text-primary { color: var(--bl-primary) !important; }

.pagination .page-item.active .page-link {
  background-color: var(--bl-primary);
  border-color: var(--bl-primary);
}

.btn-success, .bg-success { background-color: var(--bl-success) !important; border-color: var(--bl-success) !important; }
.btn-danger,  .bg-danger  { background-color: var(--bl-danger)  !important; border-color: var(--bl-danger)  !important; }
.btn-warning, .bg-warning { background-color: var(--bl-warning) !important; border-color: var(--bl-warning) !important; }

:focus-visible { outline-color: var(--bl-primary-hover); }

/* ---- brand logo ----
 * the horizontal lockup is 2.5:1, so it is sized by height and left to
 * keep its own width instead of being stretched into the old logo's box.
 */
.bl-brand-logo {
  display: block;
  width: auto;
  max-width: 100%;
  height: 38px;
  object-fit: contain;
  margin-inline: auto;
}

/* sidebar brand */
.app-brand-logo.demo .bl-brand-logo { height: 34px; }

/* auth pages have more room */
.authentication-wrapper .bl-brand-logo,
.auth-cover-brand .bl-brand-logo { height: 46px; }

@media (max-width: 575.98px) {
  .bl-brand-logo { height: 30px; }
}