:root {
  --tblr-font-sans-serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --app-sidebar-bg: #0b1220;
}

.navbar.app-sidebar {
  --tblr-navbar-bg: var(--app-sidebar-bg);
  --tblr-navbar-border-color: rgba(255, 255, 255, .06);
  background: var(--app-sidebar-bg);
}
.app-sidebar .app-logo {
  height: 6rem;
  width: auto;
}
@media screen and (max-width: 991px) {
  .app-sidebar .app-logo {
    height: 4rem;
    width: auto;
  }
}
.app-sidebar .nav-link-icon .ti {
  font-size: 1.25rem;
}
.app-sidebar .dropdown-toggle:has(.nav-group-badge)::after {
  margin-inline-start: .5rem;
}
.app-sidebar .dropdown-toggle.show .nav-group-badge {
  display: none;
}
.app-sidebar .dropdown-toggle.show:has(.nav-group-badge)::after {
  margin-inline-start: auto;
}
.app-sidebar .dropdown-item .badge {
  margin-inline-start: auto;
}
.app-avatar {
  --tblr-avatar-bg: var(--tblr-primary);
  color: #fff;
  font-weight: var(--tblr-font-weight-bold);
}

.page-title {
  gap: .5rem;
  flex-wrap: wrap;
}
.page-title .badge {
  font-size: .75rem;
}

.btn,
.nav-tabs .nav-link,
.card-header,
.list-group-item-action {
  gap: .375rem;
}
.card-header {
  flex-wrap: wrap;
}
.btn .ti {
  font-size: 1.125em;
  line-height: 1;
}
.alert > .ti.alert-icon {
  font-size: var(--tblr-alert-icon-size);
  line-height: 1;
}

.badge.bg-primary,
.badge.text-bg-primary {
  color: var(--tblr-primary) !important;
  background-color: var(--tblr-primary-lt) !important;
}
.badge.bg-success,
.badge.text-bg-success {
  color: var(--tblr-success) !important;
  background-color: var(--tblr-success-lt) !important;
}
.badge.bg-danger,
.badge.text-bg-danger {
  color: var(--tblr-danger) !important;
  background-color: var(--tblr-danger-lt) !important;
}
.badge.bg-warning,
.badge.text-bg-warning {
  color: color-mix(in oklab, var(--tblr-warning) 70%, #000) !important;
  background-color: var(--tblr-warning-lt) !important;
}
.badge.bg-info,
.badge.text-bg-info {
  color: color-mix(in oklab, var(--tblr-info) 80%, #000) !important;
  background-color: var(--tblr-info-lt) !important;
}
.badge.bg-secondary,
.badge.text-bg-secondary {
  color: var(--tblr-secondary) !important;
  background-color: var(--tblr-secondary-lt) !important;
}
.badge.bg-dark,
.badge.text-bg-dark {
  color: var(--tblr-dark) !important;
  background-color: var(--tblr-dark-lt) !important;
}
.badge.bg-light,
.badge.text-bg-light {
  color: var(--tblr-secondary) !important;
  background-color: var(--tblr-bg-surface) !important;
  border: var(--tblr-border-width) solid var(--tblr-border-color) !important;
}

.kpi-card .subheader {
  margin-bottom: .25rem;
}
.kpi-card .kpi-value {
  font-size: 1.625rem;
  font-weight: var(--tblr-font-weight-bold);
  line-height: 1.2;
}

.chart-box {
  position: relative;
}
.legend-swatch {
  width: .65rem;
  height: .65rem;
  border-radius: 2px;
  flex: 0 0 auto;
}

.wizard-steps .step-item a {
  color: inherit;
}
.wiz-actions {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  margin-top: 1.5rem;
}
.token-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}
.token-bar .btn {
  font-size: .78rem;
  padding: .15rem .5rem;
}

.logo-preview {
  display: inline-flex;
  padding: .75rem 1rem;
  border-radius: var(--tblr-border-radius);
  background: var(--app-sidebar-bg);
}
.logo-preview img {
  height: 2.25rem;
  width: auto;
}

.offcanvas-wide {
  width: min(560px, 100vw);
}
.text-prewrap {
  white-space: pre-wrap;
  word-break: break-word;
}

.auth-page {
  background: radial-gradient(1200px 600px at 10% -10%, rgba(6, 111, 209, .18), transparent 60%),
              radial-gradient(900px 500px at 110% 110%, rgba(47, 179, 68, .12), transparent 60%),
              var(--app-sidebar-bg);
}
.auth-page .auth-logo {
  height: 6rem;
  width: auto;
}
