/*
 * HackSpaceLabs theme for NetBox 4.7.
 *
 * Colours come from the Android app's Brand / HackSpaceLabsTheme (Theme.kt) and the H mark's
 * bands (HMark.kt). Most of NetBox's look is driven by Tabler CSS variables, which are
 * overridden first; the few rules NetBox hard-codes its teal/navy into are overridden after.
 * Loaded after netbox.css via the plugin's head() template extension.
 */

:root {
  --hsl-navy: #01355D;
  --hsl-ink: #0B3560;
  --hsl-orange: #FE6A18;
  --hsl-amber: #FCAC24;
  --hsl-cyan: #00ABD0;
  --hsl-sky: #74D6ED;
  --hsl-deep-cyan: #04779A;
  --hsl-paper: #F7F9FB;
  --hsl-night: #07182A;
  /* The H's bands, left to right: warm over cool. */
  --hsl-bands: linear-gradient(90deg, #FCAC24 0%, #FE6A18 20%, #ED1F23 40%, #DA141E 48%,
                               #00ABD0 52%, #0099BE 70%, #04779A 85%, #01355D 100%);
  /* Full logo width / height (tools/gen_brand.mjs prints this). */
  --hsl-logo-aspect: 5.706;
  --hsl-logo-h: 2.25rem;
}

/* ---------------------------------------------------------------- light */
html[data-bs-theme=light],
html:not([data-bs-theme]) {
  --tblr-primary: #01355D;
  --tblr-primary-rgb: 1, 53, 93;
  --tblr-primary-fg: #ffffff;
  --tblr-primary-darken: #012846;
  --tblr-primary-text-emphasis: #012138;
  --tblr-primary-bg-subtle: #D3E6F5;
  --tblr-primary-border-subtle: #A6C4DB;
  --tblr-primary-lt: #E6EEF4;
  --tblr-primary-lt-rgb: 230, 238, 244;
  --tblr-link-color: #04779A;
  --tblr-link-color-rgb: 4, 119, 154;
  --tblr-link-hover-color: #01355D;
  --tblr-link-hover-color-rgb: 1, 53, 93;
  --tblr-focus-ring-color: rgba(0, 171, 208, .3);
  --tblr-body-bg: var(--hsl-paper);
  --tblr-bg-surface-secondary: #F1F4F7;
  --hsl-wordmark: var(--hsl-ink);
  --hsl-accent: var(--hsl-orange);
}

/* ----------------------------------------------------------------- dark */
html[data-bs-theme=dark] {
  --tblr-primary: #74D6ED;
  --tblr-primary-rgb: 116, 214, 237;
  --tblr-primary-fg: #00303D;
  --tblr-primary-darken: #A5E4F3;
  --tblr-primary-text-emphasis: #CDEFF8;
  --tblr-primary-bg-subtle: #0E3A55;
  --tblr-primary-border-subtle: #1E5677;
  --tblr-primary-lt: #10324A;
  --tblr-primary-lt-rgb: 16, 50, 74;
  --tblr-link-color: #74D6ED;
  --tblr-link-color-rgb: 116, 214, 237;
  --tblr-link-hover-color: #CDEFF8;
  --tblr-link-hover-color-rgb: 205, 239, 248;
  --tblr-focus-ring-color: rgba(116, 214, 237, .3);
  --tblr-body-bg: #0B1F33;
  --tblr-body-color: #E4ECF3;
  --tblr-bg-surface: #10253A;
  --tblr-bg-surface-secondary: #0B1F33;
  --tblr-border-color: #2A4157;
  --hsl-wordmark: #EAF2F8;
  --hsl-accent: var(--hsl-amber);
}

/* ------------------------------------------- NetBox's hard-coded colours */
.navbar { --tblr-navbar-active-border-color: var(--hsl-accent); }
.list-group-item.active { border-left-color: var(--tblr-primary); }
.page-link:hover .page-item-title { color: var(--tblr-primary); }
.status-primary { --tblr-status-color: var(--tblr-primary); --tblr-status-color-rgb: var(--tblr-primary-rgb); }
.toast-primary { --tblr-toast-color: var(--tblr-primary); }
.ts-wrapper.multi .ts-control > div.active { background: var(--tblr-primary); }
tr[data-virtual=true] { --tblr-table-bg-state: rgba(var(--tblr-primary-rgb), .15); }

.navbar-vertical.navbar-expand-lg .navbar-collapse .text-secondary,
html[data-bs-theme=dark] .navbar-vertical.navbar-expand-lg .text-secondary {
  color: var(--tblr-primary) !important;
}
html[data-bs-theme=dark] .navbar-vertical.navbar-expand-lg .nav-item.dropdown.active:after {
  border-color: var(--hsl-accent) !important;
}

html[data-bs-theme=light] .navbar-vertical.navbar-expand-lg {
  background: linear-gradient(180deg, #01355D00, #01355D12), #fff;
}
html[data-bs-theme=dark] .navbar-vertical.navbar-expand-lg {
  background: linear-gradient(180deg, #74D6ED00, #74D6ED14), var(--hsl-night);
}

/* NetBox's dark navy (#001423) becomes the app's Night. */
html[data-bs-theme=dark],
html[data-bs-theme=dark] .navbar,
html[data-bs-theme=dark] .page-header {
  background-color: var(--hsl-night);
}
html[data-bs-theme=dark] .card,
html[data-bs-theme=dark] .table thead th,
html[data-bs-theme=dark] .markdown > table thead th {
  background: var(--hsl-night) !important;
}
html[data-bs-theme=dark] .btn-primary,
html[data-bs-theme=dark] .bg-primary .card-title,
html[data-bs-theme=dark] .bg-primary a,
html[data-bs-theme=dark] .bg-primary i,
html[data-bs-theme=dark] .text-bg-primary {
  color: var(--tblr-primary-fg) !important;
}
html[data-bs-theme=dark] .page-link.active,
html[data-bs-theme=dark] .active > .page-link {
  color: var(--tblr-primary-fg);
}

/* NetBox's decorative motif in the sidebar. */
.motif { display: none !important; }

/* ------------------------------------------------------------- brand bands */
/* A thin stripe of the H's bands along the top of the sidebar and the login card. */
.navbar-vertical.navbar-expand-lg::before,
.page-center .card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--hsl-bands);
  z-index: 1;
}
.page-center .card { overflow: hidden; }

/* -------------------------------------------------------------------- logo */
/*
 * NetBox's <img> tags point at its own logo files. Push that image out of the box with
 * padding and paint the HackSpaceLabs logo as the background instead (works without JS).
 * .hide-theme-dark is the light-mode logo; .hide-theme-light is the dark-mode one.
 */
img.navbar-brand-image,
.page-center img.logo {
  box-sizing: border-box;
  height: var(--hsl-logo-h);
  width: calc(var(--hsl-logo-h) * var(--hsl-logo-aspect));
  padding-left: calc(var(--hsl-logo-h) * var(--hsl-logo-aspect));
  max-width: none;
  background: url("../img/hsl-logo-light.svg") center / contain no-repeat;
}
.page-center img.logo { --hsl-logo-h: 4rem; }
img.navbar-brand-image.hide-theme-light,
.page-center img.logo.hide-theme-light {
  background-image: url("../img/hsl-logo-dark.svg");
}

/* NetBox's edition label ("Community") under the logo. */
.navbar-brand .netbox-edition,
.page-center .netbox-edition { display: none; }

/* ------------------------------------------------- animated login logo */
/* hsl-login.js replaces the static login logo; this class is set before first paint.
   Must out-rank NetBox's ":root:not(.dummy)[data-bs-theme=light] .hide-theme-dark" (0,4,0). */
:root.hsl-login-anim .page-center img.logo.hide-theme-dark,
:root.hsl-login-anim .page-center img.logo.hide-theme-light { display: none !important; }

.hsl-splash {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  margin: .5rem auto 0;
}
.hsl-splash-mark {
  width: 7.5rem;
  aspect-ratio: 1000 / 934;
  cursor: pointer;
  will-change: transform;
}
.hsl-splash-wordmark {
  width: min(21rem, 100%);
  aspect-ratio: 1407 / 211;
  background-color: var(--hsl-wordmark);
  -webkit-mask: url("../img/hsl-wordmark.png") center / contain no-repeat;
  mask: url("../img/hsl-wordmark.png") center / contain no-repeat;
  opacity: 0;
  transform: translateY(.5rem);
  transition: opacity .6s ease, transform .7s cubic-bezier(.2, 0, 0, 1);
}
.hsl-splash.is-settled .hsl-splash-wordmark {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .hsl-splash-wordmark { transition: none; }
}