:root,
[data-bs-theme='light'] {
  --tblr-primary: #285ca8;
  --tblr-primary-rgb: 40, 92, 168;
  --tblr-link-color: #285ca8;
  --tblr-link-color-rgb: 40, 92, 168;
  --tblr-link-hover-color: #1f457c;
  --tblr-body-bg: #f5f7fa;
  --tblr-body-bg-rgb: 245, 247, 250;
  --tblr-bg-surface-secondary: #eef2f6;
}

[data-bs-theme='dark'],
body[data-bs-theme='dark'] [data-bs-theme='light'] {
  --tblr-primary: #6ea8fe;
  --tblr-primary-rgb: 110, 168, 254;
  --tblr-link-color: #9ec5fe;
  --tblr-link-color-rgb: 158, 197, 254;
  --tblr-link-hover-color: #cfe2ff;
  --tblr-body-bg: #101214;
  --tblr-body-bg-rgb: 16, 18, 20;
  --tblr-bg-surface: #15181c;
  --tblr-bg-surface-secondary: #191d22;
  --tblr-bg-surface-tertiary: #222832;
}

.navbar-brand-image {
  max-height: 3.15rem;
  width: auto;
}

.netbox-edition {
  display: none;
}

html[data-bs-theme='dark'] .netbox-edition {
  display: none;
}

html[data-bs-theme='light'] .navbar-vertical.navbar-expand-lg {
  background: #ffffff;
  border-right: 1px solid rgba(15, 23, 42, .10);
}

html[data-bs-theme='dark'] .navbar-vertical.navbar-expand-lg {
  background: #14171b;
  border-right: 1px solid rgba(148, 163, 184, .14);
}

html[data-bs-theme='dark'] body,
html[data-bs-theme='dark'] .page-wrapper,
html[data-bs-theme='dark'] .page-body,
html[data-bs-theme='dark'] .page {
  background: #101214;
}

.navbar-vertical.navbar-expand-lg img.inetworks-motif {
  display: none;
}

.navbar-vertical.navbar-expand-lg .navbar-collapse .text-secondary,
.navbar-vertical.navbar-expand-lg .navbar-collapse .nav-item.dropdown.active:after {
  color: var(--tblr-primary) !important;
  border-color: var(--tblr-primary) !important;
}

.navbar-vertical.navbar-expand-lg .dropdown-menu .dropdown-item.active,
.navbar-vertical.navbar-expand-lg .dropdown-menu .dropdown-item:hover {
  background-color: rgba(var(--tblr-primary-rgb), .12) !important;
}

.page-center {
  background: var(--tblr-body-bg);
}

.page-center .card {
  border: 1px solid rgba(var(--tblr-primary-rgb), .14);
  box-shadow: 0 20px 42px rgba(15, 27, 45, .08);
}

html[data-bs-theme='dark'] .page-center .card {
  box-shadow: 0 20px 42px rgba(0, 0, 0, .25);
}

.btn-primary {
  --tblr-btn-bg: #285ca8;
  --tblr-btn-border-color: #285ca8;
  --tblr-btn-hover-bg: #234f91;
  --tblr-btn-hover-border-color: #234f91;
  --tblr-btn-active-bg: #1f457c;
  --tblr-btn-active-border-color: #1f457c;
}

html[data-bs-theme='dark'] .btn-primary {
  --tblr-btn-color: #08111f;
  --tblr-btn-bg: #6ea8fe;
  --tblr-btn-border-color: #6ea8fe;
  --tblr-btn-hover-color: #08111f;
  --tblr-btn-hover-bg: #9ec5fe;
  --tblr-btn-hover-border-color: #9ec5fe;
}

.grid-stack .card {
  border: 1px solid rgba(148, 163, 184, .16);
  box-shadow: none;
}

.grid-stack .card-header {
  background: #334155 !important;
  color: #f8fafc !important;
}

html[data-bs-theme='dark'] .grid-stack .card-header {
  background: #222832 !important;
  color: #e5e7eb !important;
}

html[data-bs-theme='dark'] .grid-stack .card {
  background: #15181c;
  border-color: rgba(148, 163, 184, .20);
}

html[data-bs-theme='dark'] .grid-stack .card-body {
  background: #15181c;
}

html[data-bs-theme='dark'] .atlas-metric {
  background: #171b21;
  border-color: rgba(110, 168, 254, .23);
}

html[data-bs-theme='dark'] .atlas-standards span {
  background: #1b2128;
}

.atlas-isp-widget {
  display: flex;
  flex-direction: column;
  gap: .9rem;
}

.atlas-metric-grid {
  display: grid;
  gap: .6rem;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
}

.atlas-metric {
  align-items: center;
  border: 1px solid rgba(var(--tblr-primary-rgb), .20);
  border-radius: .35rem;
  color: var(--tblr-body-color);
  display: grid;
  gap: .05rem .55rem;
  grid-template-columns: auto 1fr;
  min-height: 4.8rem;
  padding: .65rem .7rem;
  text-decoration: none;
}

.atlas-metric:hover {
  background: rgba(var(--tblr-primary-rgb), .08);
  color: var(--tblr-body-color);
  text-decoration: none;
}

.atlas-metric-icon {
  align-items: center;
  background: rgba(var(--tblr-primary-rgb), .13);
  border-radius: 999px;
  color: var(--tblr-primary);
  display: inline-flex;
  grid-row: span 2;
  height: 2.1rem;
  justify-content: center;
  width: 2.1rem;
}

.atlas-metric-label {
  color: var(--tblr-secondary);
  font-size: .78rem;
  line-height: 1.1;
  text-transform: uppercase;
}

.atlas-metric strong {
  font-size: 1.35rem;
  line-height: 1.1;
}

.atlas-standards {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.atlas-standards span {
  background: rgba(148, 163, 184, .12);
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 999px;
  color: var(--tblr-secondary);
  font-size: .78rem;
  padding: .22rem .55rem;
}

.atlas-standards strong {
  color: var(--tblr-body-color);
}

.atlas-imports {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
