/*
 * Linteg Lava branding for NetBox.
 * Palette taken from linteglava.co.za (--ll-* variables on the website).
 * Served by Caddy at /branding/brand.css and linked from the netbox_menu_trim plugin.
 */
:root {
  --ll-primary: #d4451a;
  --ll-primary-rgb: 212, 69, 26;
  --ll-primary-dark: #a8350f;
  --ll-primary-light: #f7e0d6;
  --ll-accent: #e8682a;
  --ll-accent-rgb: 232, 104, 42;
  --ll-amber: #f5a623;
  --ll-ink: #1c1517;
  --ll-ink-2: #2a2023;
  /* Dark theme greys (VS Code Dark style) */
  --ll-dk-bg: #1e1e1e;
  --ll-dk-surface: #252526;
  --ll-dk-raised: #2d2d30;
  --ll-dk-input: #1b1b1c;
  --ll-dk-border: #3c3c3c;
  --ll-dk-text: #d4d4d4;
  --ll-cream: #fdf9f7;
}

/* ---------- Light theme ---------- */
:root,
[data-bs-theme=light] {
  --tblr-primary: var(--ll-primary);
  --tblr-primary-rgb: var(--ll-primary-rgb);
  --tblr-primary-fg: #ffffff;
  --tblr-primary-darken: var(--ll-primary-dark);
  --tblr-primary-lt: var(--ll-primary-light);
  --tblr-primary-lt-rgb: 247, 224, 214;
  --tblr-primary-bg-subtle: var(--ll-primary-light);
  --tblr-primary-border-subtle: #eeb9a5;
  --tblr-primary-text-emphasis: var(--ll-primary-dark);
  --tblr-link-color: var(--ll-primary);
  --tblr-link-color-rgb: var(--ll-primary-rgb);
  --tblr-link-hover-color: var(--ll-primary-dark);
  --tblr-link-hover-color-rgb: 168, 53, 15;
  --tblr-focus-ring-color: rgba(var(--ll-primary-rgb), .25);
  --tblr-body-bg: var(--ll-cream);
  --tblr-body-bg-rgb: 253, 249, 247;
  --tblr-bg-surface-secondary: var(--ll-cream);
  --tblr-bg-surface-tertiary: #f8efea;
}

html[data-bs-theme=light] .navbar-vertical.navbar-expand-lg {
  background: linear-gradient(180deg, rgba(var(--ll-primary-rgb), 0), rgba(var(--ll-primary-rgb), .10)), #ffffff;
}
.navbar-vertical.navbar-expand-lg .navbar-collapse .nav-link-icon,
.navbar-vertical.navbar-expand-lg .navbar-collapse .nav-link-title,
.navbar-vertical.navbar-expand-lg .navbar-collapse .dropdown-menu .dropdown-item > a {
  color: var(--ll-ink);
}
.navbar-vertical.navbar-expand-lg .navbar-collapse .text-secondary {
  color: var(--ll-primary) !important;
}
.navbar {
  --tblr-navbar-active-border-color: var(--ll-primary);
}
html[data-bs-theme=light] .navbar-vertical.navbar-expand-lg .nav-item.dropdown.active:after {
  border-color: var(--ll-primary) !important;
}

.list-group-item.active { border-left-color: var(--ll-primary); }
.page-link:hover .page-item-title { color: var(--ll-primary); }
.status-primary { --tblr-status-color: var(--ll-primary); --tblr-status-color-rgb: var(--ll-primary-rgb); }
.toast-primary { --tblr-toast-color: var(--ll-primary); }
.ts-wrapper.multi .ts-control > div.active { background: var(--ll-primary); }
.footer .text-primary { color: var(--ll-ink) !important; }
tr[data-virtual=true] { --tblr-table-bg-state: rgba(var(--ll-primary-rgb), .15); }

.btn-primary {
  --tblr-btn-bg: var(--ll-primary);
  --tblr-btn-border-color: var(--ll-primary);
  --tblr-btn-hover-bg: var(--ll-primary-dark);
  --tblr-btn-hover-border-color: var(--ll-primary-dark);
  --tblr-btn-active-bg: var(--ll-primary-dark);
  --tblr-btn-active-border-color: var(--ll-primary-dark);
  --tblr-btn-color: #ffffff;
  --tblr-btn-hover-color: #ffffff;
}

/* ---------- Dark theme ---------- */
[data-bs-theme=dark],
body[data-bs-theme=dark] [data-bs-theme=light] {
  --tblr-primary: var(--ll-accent);
  --tblr-primary-rgb: var(--ll-accent-rgb);
  --tblr-primary-fg: var(--ll-ink);
  --tblr-primary-bg-subtle: #3a1a10;
  --tblr-primary-border-subtle: #6b2a14;
  --tblr-primary-text-emphasis: #f3a27c;
  --tblr-link-color: #f0804a;
  --tblr-link-color-rgb: 240, 128, 74;
  --tblr-link-hover-color: var(--ll-amber);
  --tblr-link-hover-color-rgb: 245, 166, 35;
  --tblr-btn-active-color: var(--ll-ink);
  /* Neutral dark greys (VS Code Dark style) in place of NetBox's navy. */
  --tblr-body-bg: var(--ll-dk-bg);
  --tblr-body-bg-rgb: 30, 30, 30;
  --tblr-body-color: var(--ll-dk-text);
  --tblr-bg-surface: var(--ll-dk-surface);
  --tblr-bg-surface-secondary: var(--ll-dk-bg);
  --tblr-bg-surface-tertiary: var(--ll-dk-raised);
  --tblr-bg-surface-dark: var(--ll-dk-bg);
  --tblr-bg-forms: var(--ll-dk-input);
  --tblr-secondary-bg: var(--ll-dk-raised);
  --tblr-secondary-bg-rgb: 45, 45, 48;
  --tblr-tertiary-bg: var(--ll-dk-surface);
  --tblr-tertiary-bg-rgb: 37, 37, 38;
  --tblr-border-color: var(--ll-dk-border);
  --tblr-dark-mode-border-color: var(--ll-dk-border);
  --tblr-border-color-translucent: rgba(255, 255, 255, .08);
  --tblr-dark-mode-border-color-translucent: rgba(255, 255, 255, .08);
  --tblr-primary-bg-subtle: #3a2418;
  --tblr-primary-border-subtle: #6b3a20;
}

html[data-bs-theme=dark] body,
html[data-bs-theme=dark] .page-wrapper,
html[data-bs-theme=dark] .page-body {
  background-color: var(--ll-dk-bg);
}

html[data-bs-theme=dark],
html[data-bs-theme=dark] .navbar,
html[data-bs-theme=dark] .page-header {
  background-color: var(--ll-dk-bg);
}
html[data-bs-theme=dark] .card {
  background: var(--ll-dk-surface) !important;
}
html[data-bs-theme=dark] .table thead th,
html[data-bs-theme=dark] .markdown > table thead th {
  background: var(--ll-dk-raised) !important;
}
html[data-bs-theme=dark] .navbar-vertical.navbar-expand-lg {
  background: var(--ll-dk-surface);
  border-right: 1px solid var(--ll-dk-border);
}
html[data-bs-theme=dark] .navbar-vertical.navbar-expand-lg .navbar-collapse .nav-link-icon,
html[data-bs-theme=dark] .navbar-vertical.navbar-expand-lg .navbar-collapse .nav-link-title,
html[data-bs-theme=dark] .navbar-vertical.navbar-expand-lg .navbar-collapse .dropdown-menu .dropdown-item > a {
  color: var(--ll-dk-text);
}
html[data-bs-theme=dark] .navbar-vertical.navbar-expand-lg .nav-item.dropdown.active:after {
  border-color: var(--ll-accent) !important;
}
html[data-bs-theme=dark] .navbar-vertical.navbar-expand-lg .text-secondary {
  color: var(--ll-accent) !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(--ll-ink) !important;
}
html[data-bs-theme=dark] .btn-primary {
  --tblr-btn-bg: var(--ll-accent);
  --tblr-btn-border-color: var(--ll-accent);
  --tblr-btn-hover-bg: var(--ll-amber);
  --tblr-btn-hover-border-color: var(--ll-amber);
  --tblr-btn-active-bg: var(--ll-amber);
  --tblr-btn-active-border-color: var(--ll-amber);
}
html[data-bs-theme=dark] .page-link.active,
html[data-bs-theme=dark] .active > .page-link {
  color: var(--ll-ink);
}

/* ---------- Logo ---------- */
/* Replace both NetBox logo variants (light/dark) with the Linteg Lava logo. */
img.navbar-brand-image {
  content: url("/branding/logo-sm.png");
  height: 3.25rem;
  width: auto;
}
.page-center img.logo {
  content: url("/branding/logo.png");
  height: 110px;
  width: auto;
}

/* ---------- Product label under the logo ---------- */
/* Replaces NetBox's "Community" edition label. */
.netbox-edition {
  font-size: 0 !important;
  letter-spacing: normal;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-top: .35rem !important;
  /* shrink to the label so the right-hand rule sits next to the text */
  width: fit-content;
  margin-left: auto !important;
  margin-right: auto !important;
}
.netbox-edition::before,
.netbox-edition::after {
  font-weight: 600;
  text-transform: uppercase;
}
.netbox-edition::after {
  content: "NetOps";
  text-transform: none !important;
  font-size: .9rem;
  letter-spacing: .22em;
  color: var(--ll-ink);
  white-space: nowrap;
}
/* thin orange rules either side of the label */
.netbox-edition::before {
  content: "";
  order: 0;
  flex: 0 0 1.1rem;
  height: 2px;
  background: var(--ll-accent);
  border-radius: 1px;
}
.netbox-edition {
  background:
    linear-gradient(var(--ll-accent), var(--ll-accent)) right center / 1.1rem 2px no-repeat;
  padding-right: 1.75rem;
  padding-left: 0;
}
.page-center .netbox-edition::after {
  font-size: .95rem;
}
html[data-bs-theme=dark] .netbox-edition::after,
html.ll-login .netbox-edition::after {
  color: #f0f0f0;
}

/* Sidebar: stack logo and label on one centre line. */
.navbar-brand > a {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.navbar-brand > a img.navbar-brand-image {
  display: block;
  margin: 0 auto;
}

/* NetBox paints .page (login screen) and the active tab navy with !important. */
html[data-bs-theme=dark] .page,
html[data-bs-theme=dark] .page-tabs .nav-tabs .nav-link.active {
  background-color: var(--ll-dk-bg) !important;
}
html[data-bs-theme=dark] .page-center .card {
  background: var(--ll-dk-surface) !important;
  border-color: var(--ll-dk-border);
}

/* ---------- Login page: dark grey + network constellation (see login-bg.js) ---------- */
html.ll-login,
html.ll-login body {
  background: radial-gradient(ellipse at center, #232323 0%, var(--ll-dk-bg) 55%, #161616 100%) fixed !important;
}
html.ll-login .page {
  background: transparent !important;
  position: relative;
  z-index: 1;
}
canvas.ll-login-bg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
}
html.ll-login .page-center .card {
  background: var(--ll-dk-surface) !important;
  border: 1px solid var(--ll-dk-border);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
  color: var(--ll-dk-text);
}
html.ll-login .page-center .card .form-control {
  background: var(--ll-dk-input);
  border-color: var(--ll-dk-border);
  color: var(--ll-dk-text);
}
html.ll-login .page-center .card .form-label,
html.ll-login .page-center .card h2 {
  color: var(--ll-dk-text);
}

/* Soft dark halo behind the login logo so it blends into the background. */
html.ll-login .page-center .container-tight > .text-center {
  position: relative;
}
html.ll-login .page-center .container-tight > .text-center::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 45%;
  width: 34rem;
  height: 15rem;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(22, 22, 22, .95) 0%, rgba(22, 22, 22, .75) 35%, rgba(22, 22, 22, 0) 70%);
  z-index: -1;
  pointer-events: none;
}
html.ll-login .page-center img.logo {
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .85)) drop-shadow(0 0 28px rgba(212, 69, 26, .18));
}

/* Same soft shadow behind the sidebar logo as on the login page. */
.navbar-brand > a {
  position: relative;
}
.navbar-brand > a::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 40%;
  width: 15rem;
  height: 7rem;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .25) 40%, rgba(0, 0, 0, 0) 70%);
  pointer-events: none;
  z-index: 0;
}
.navbar-brand > a > * {
  position: relative;
  z-index: 1;
}
html[data-bs-theme=light] .navbar-brand > a::before {
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .10) 0%, rgba(0, 0, 0, 0) 70%);
}
.navbar-brand img.navbar-brand-image {
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .8)) drop-shadow(0 0 16px rgba(212, 69, 26, .18));
}
html[data-bs-theme=light] .navbar-brand img.navbar-brand-image {
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .25));
}

/* Hide the NetBox release / "Get Cloud | Get Enterprise" text at the bottom of the sidebar. */
aside.navbar-vertical .text-muted.text-center.fs-5.my-3 {
  display: none !important;
}
/* Footer: keep Docs / REST API / GraphQL, hide NetBox community & vendor links. */
.footer li.list-inline-item:has(> a[href*="github.com"]),
.footer li.list-inline-item:has(> a[href*="slack"]),
.footer li.list-inline-item:has(> a[href*="linkedin.com"]),
.footer li.list-inline-item:has(> a[href*="netboxlabs"]),
.footer li.list-inline-item:has(> a[href^="mailto:"]),
.footer li.list-inline-item:has(> a[aria-label="Community"]) {
  display: none !important;
}

/* Point-to-Point Links page */
table.ll-p2p td { vertical-align: top; }
.ll-p2p-arrow { color: var(--ll-accent); font-size: 1.25rem; }

/* ---------- Dashboard: live network topology widget ---------- */
.ll-topo-wrap { width: 100%; overflow-x: auto; }
svg.ll-topo { width: 100%; min-width: 760px; height: auto; display: block; font-family: inherit; }
.ll-topo-dc { font-size: 15px; font-weight: 600; fill: var(--tblr-secondary); letter-spacing: .04em; text-transform: uppercase; }
.ll-node { stroke: rgba(255, 255, 255, .14); stroke-width: 1.5; }
.ll-node-missing { stroke: #8a8a8a; stroke-dasharray: 6 4; opacity: .65; }
.ll-node-stale { stroke: var(--ll-amber); }
svg.ll-topo a:hover .ll-node { stroke: var(--ll-accent); stroke-width: 2.5; }
.ll-node-title { fill: #fff; font-size: 15px; font-weight: 600; }
.ll-node-sub { fill: rgba(255, 255, 255, .72); font-size: 11.5px; }
.ll-link { stroke-linecap: round; }
.ll-link-live, .ll-link-extra { stroke: var(--ll-accent); stroke-width: 3; }
.ll-link-extra { stroke-width: 1.8; opacity: .75; }
.ll-link-documented { stroke: #9a9a9a; stroke-width: 2; stroke-dasharray: 7 5; }
.ll-link-logical { stroke: #6f6f6f; stroke-width: 1.6; }
.ll-link-label rect { fill: var(--tblr-bg-surface, #252526); stroke: rgba(127, 127, 127, .35); }
.ll-link-label text { font-size: 11.5px; fill: var(--tblr-body-color, #d4d4d4); }
.ll-link-label-live text { fill: var(--ll-accent); font-weight: 600; }
.ll-dot-up { fill: #3fb950; } .ll-dot-stale { fill: var(--ll-amber); } .ll-dot-missing { fill: #7a7a7a; }
.ll-topo-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; align-items: center; font-size: .8rem;
  color: var(--tblr-secondary); padding: .6rem .25rem 0; }
.ll-topo-legend i.ll-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: middle; }
.ll-topo-legend i.ll-dot-up { background: #3fb950; } .ll-topo-legend i.ll-dot-stale { background: var(--ll-amber); }
.ll-topo-legend i.ll-dot-missing { background: #7a7a7a; }
.ll-swatch { display: inline-block; width: 22px; height: 0; vertical-align: middle; border-top: 3px solid var(--ll-accent); }
.ll-swatch-documented { border-top: 2px dashed #9a9a9a; }

.ll-link { fill: none; }
.ll-link-live { stroke: var(--ll-accent); stroke-width: 2; opacity: .85; }
.ll-link-cross { stroke: var(--ll-accent); stroke-width: 3.5; }
.ll-link-label-cross text { fill: var(--ll-accent); font-weight: 700; font-size: 12.5px; }
.ll-chip { fill: var(--tblr-bg-surface-tertiary, #2d2d30); stroke: rgba(127, 127, 127, .3); }
svg.ll-topo a:hover .ll-chip { stroke: var(--ll-accent); }
.ll-chip-label { fill: var(--tblr-secondary, #9ca3af); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.ll-chip-value { fill: var(--tblr-body-color, #d4d4d4); font-size: 15px; font-weight: 600; }

/* ---------- Topology v2: per-cable lines, compact card, full zoomable view ---------- */
.ll-cable { fill: none; stroke-linejoin: round; transition: stroke-width .1s; }
.ll-cable-s100 { stroke: #e8682a; stroke-width: 4; }
.ll-cable-s40 { stroke: #f5a623; stroke-width: 3; }
.ll-cable-s10 { stroke: #f2c94c; stroke-width: 2.2; }
.ll-cable-s1, .ll-cable-unknown { stroke: #a0a0a0; stroke-width: 1.5; }
.ll-cable-documented { stroke: #8a8a8a; stroke-width: 1.5; stroke-dasharray: 6 5; }
svg.ll-topo a:hover .ll-cable, svg.ll-topo .ll-cable:hover { stroke-width: 6; }
.ll-port { font-size: 10px; fill: var(--tblr-secondary, #9ca3af); font-family: var(--tblr-font-monospace, monospace); }
.ll-cable-doc-label { font-size: 10.5px; fill: #9a9a9a; }
.ll-node-title { font-size: 16px; }
.ll-node-sub { font-size: 12px; }
.ll-dot-manual { fill: #4dabf7; }
.ll-topo-legend i.ll-dot-manual { background: #4dabf7; }
.ll-key { display: inline-block; width: 22px; height: 0; vertical-align: middle; border-top: 3px solid; }
.ll-key.ll-cable-s100 { border-color: #e8682a; border-top-width: 4px; }
.ll-key.ll-cable-s40 { border-color: #f5a623; }
.ll-key.ll-cable-s10 { border-color: #f2c94c; border-top-width: 2px; }
.ll-key.ll-cable-s1 { border-color: #a0a0a0; border-top-width: 1.5px; }
.ll-key.ll-cable-documented { border-top: 2px dashed #8a8a8a; }
/* compact dashboard card: whole diagram fits the card, click to open the full view */
.card-body:has(> .ll-topo-widget) { overflow: hidden !important; }
.ll-topo-widget { display: flex; flex-direction: column; height: 100%; }
.ll-topo-preview { position: relative; flex: 1 1 auto; min-height: 0; display: block; }
.ll-topo-preview svg.ll-topo { width: 100%; height: 100%; min-width: 0; }
.ll-topo-open { position: absolute; right: .5rem; top: .25rem; opacity: .9; }
.ll-topo-preview:hover .ll-topo-open { opacity: 1; }
.ll-topo-compact .ll-node-sub { display: none; }
/* full view */
.ll-topo-full { overflow: hidden; }
.ll-topo-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .6rem .75rem;
  border-bottom: 1px solid var(--tblr-border-color); }
.ll-topo-toolbar .ll-topo-legend { padding: 0; }
.ll-topo-stage { height: calc(100vh - 230px); min-height: 480px; cursor: grab; touch-action: none; user-select: none; }
.ll-topo-stage.dragging { cursor: grabbing; }
.ll-topo-stage svg.ll-topo { width: 100%; height: 100%; min-width: 0; }

/* ---------- Sidebar: each menu section is a rounded panel that expands around its items ---------- */
.navbar-vertical.navbar-expand-lg .navbar-nav > .nav-item.dropdown {
  margin: 4px 10px;
  border: 1px solid rgba(255, 255, 255, .11);          /* always visible; turns orange when open */
  background-color: rgba(255, 255, 255, .015);
  border-radius: 12px;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.navbar-vertical.navbar-expand-lg .navbar-nav > .nav-item.dropdown > .nav-link {
  border-radius: 11px;
  padding-left: .75rem;
  padding-right: .75rem;
}
.navbar-vertical.navbar-expand-lg .navbar-nav > .nav-item.dropdown:hover {
  background-color: rgba(127, 127, 127, .07);
}
/* open section: orange outline + tint around the heading and everything under it */
.navbar-vertical.navbar-expand-lg .navbar-nav > .nav-item.dropdown:has(> .nav-link[aria-expanded="true"]),
.navbar-vertical.navbar-expand-lg .navbar-nav > .nav-item.dropdown:has(> .dropdown-menu.show) {
  border-color: rgba(232, 104, 42, .55);
  background-color: rgba(255, 255, 255, .045);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
.navbar-vertical.navbar-expand-lg .navbar-nav > .nav-item.dropdown:has(> .nav-link[aria-expanded="true"]) > .nav-link {
  color: var(--ll-accent) !important;
}
.navbar-vertical.navbar-expand-lg .navbar-nav > .nav-item.dropdown:has(> .nav-link[aria-expanded="true"]) > .nav-link .nav-link-title,
.navbar-vertical.navbar-expand-lg .navbar-nav > .nav-item.dropdown:has(> .nav-link[aria-expanded="true"]) > .nav-link .nav-link-icon {
  color: var(--ll-accent) !important;
}
.navbar-vertical.navbar-expand-lg .navbar-nav > .nav-item.dropdown > .dropdown-menu {
  background: transparent !important;
  border: 0;
  margin: 0 0 .35rem;
  padding-top: 0;
}
.navbar-vertical.navbar-expand-lg .navbar-nav > .nav-item.dropdown > .dropdown-menu .dropdown-item {
  border-radius: 8px;
  margin: 0 .4rem;
  width: auto;
}
.navbar-vertical.navbar-expand-lg .navbar-nav > .nav-item.dropdown > .dropdown-menu .dropdown-item:hover {
  background-color: rgba(255, 255, 255, .06);
}
/* NetBox's thin "active section" bar would sit outside the rounded panel; the panel outline replaces it */
.navbar-vertical.navbar-expand-lg .nav-item.dropdown.active:after { display: none; }
html[data-bs-theme=light] .navbar-vertical.navbar-expand-lg .navbar-nav > .nav-item.dropdown:has(> .nav-link[aria-expanded="true"]) {
  background-color: rgba(0, 0, 0, .025);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .06);
}

.ll-port { fill: rgba(255, 255, 255, .78); font-size: 10.5px; }
.ll-node-rule { stroke: rgba(255, 255, 255, .15); stroke-width: 1; }

html[data-bs-theme=light] .navbar-vertical.navbar-expand-lg .navbar-nav > .nav-item.dropdown {
  border-color: rgba(0, 0, 0, .12);
  background-color: rgba(0, 0, 0, .01);
}
.navbar-vertical.navbar-expand-lg .navbar-nav > .nav-item.dropdown:hover {
  border-color: rgba(232, 104, 42, .35);
}

/* ---------- Sidebar: neon-orange rounded frame (like a neon tube) ---------- */
:root { --ll-neon: #ff7a1a; --ll-neon-rgb: 255, 122, 26; }
aside.navbar-vertical.navbar-expand-lg::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 2px solid var(--ll-neon);
  border-radius: 18px;
  pointer-events: none;
  z-index: 3;
  box-shadow:
    0 0 4px rgba(var(--ll-neon-rgb), .95),
    0 0 12px rgba(var(--ll-neon-rgb), .70),
    0 0 28px rgba(var(--ll-neon-rgb), .40),
    inset 0 0 4px rgba(var(--ll-neon-rgb), .85),
    inset 0 0 16px rgba(var(--ll-neon-rgb), .30);
  animation: ll-neon-breathe 4s ease-in-out infinite;
}
/* keep the menu content inside the frame */
aside.navbar-vertical.navbar-expand-lg > .container-fluid {
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 10px;
}
@keyframes ll-neon-breathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: .82; }
}
@media (prefers-reduced-motion: reduce) {
  aside.navbar-vertical.navbar-expand-lg::before { animation: none; }
}
/* slightly softer in light mode so it doesn't overpower the page */
html[data-bs-theme=light] aside.navbar-vertical.navbar-expand-lg::before {
  box-shadow:
    0 0 3px rgba(var(--ll-neon-rgb), .9),
    0 0 10px rgba(var(--ll-neon-rgb), .45),
    inset 0 0 3px rgba(var(--ll-neon-rgb), .6);
}

/* ---------- Main content: neon-orange rounded frame, matching the sidebar ---------- */
.page-wrapper { position: relative; }
.page-wrapper::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 2px solid var(--ll-neon);
  border-radius: 18px;
  pointer-events: none;
  z-index: 2;
  box-shadow:
    0 0 4px rgba(var(--ll-neon-rgb), .95),
    0 0 12px rgba(var(--ll-neon-rgb), .65),
    0 0 26px rgba(var(--ll-neon-rgb), .35),
    inset 0 0 4px rgba(var(--ll-neon-rgb), .8),
    inset 0 0 14px rgba(var(--ll-neon-rgb), .25);
  animation: ll-neon-breathe 4s ease-in-out infinite;
}
/* keep page content clear of the frame: an even gap on every side, on every page */
.page-wrapper { padding: 22px 24px 18px; }
.page-wrapper .footer { padding-left: 6px; padding-right: 6px; }
@media (prefers-reduced-motion: reduce) { .page-wrapper::before { animation: none; } }
html[data-bs-theme=light] .page-wrapper::before {
  box-shadow: 0 0 3px rgba(var(--ll-neon-rgb), .9), 0 0 10px rgba(var(--ll-neon-rgb), .4), inset 0 0 3px rgba(var(--ll-neon-rgb), .55);
}

/* ---------- Network Topology page: centred, styled header ---------- */
html[data-netbox-url-name="topology"] .page-header .container-fluid > .d-flex {
  justify-content: center !important;
  position: relative;
  text-align: center;
  padding: .4rem 0 .2rem;
}
html[data-netbox-url-name="topology"] .page-header .container-fluid > .d-flex > .d-print-none {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
}
html[data-netbox-url-name="topology"] .page-title {
  display: inline-block;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #ff7a1a, #f5a623 55%, #ff7a1a);
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important;
  text-shadow: 0 0 18px rgba(var(--ll-neon-rgb), .35);
  margin-bottom: .35rem;
}
html[data-netbox-url-name="topology"] .page-title::after {
  content: "";
  display: block;
  height: 3px;
  margin: .4rem auto 0;
  width: 60%;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--ll-neon), transparent);
  box-shadow: 0 0 10px rgba(var(--ll-neon-rgb), .8);
}
html[data-netbox-url-name="topology"] .page-header .text-secondary {
  max-width: 46rem; margin: 0 auto; font-size: .92rem;
}
/* breathing room between the neon frame and page headers */
.page-wrapper > .page-header { padding-top: 6px; }
html[data-netbox-url-name="topology"] .page-header .container-fluid > .d-flex > .d-print-none { top: 58%; right: 10px; }

/* ---------- Rack elevations: look like a real cabinet ---------- */
.rack_elevation svg {
  --nbx-rack-bg: #101113;               /* cabinet interior */
  --nbx-rack-border: #6b7178;           /* steel frame */
  --nbx-rack-slot-bg: #17181a;          /* empty unit: dark, like an open rack */
  --nbx-rack-slot-border: #26282c;
  --nbx-rack-slot-hover-bg: #23252a;
  --nbx-rack-unit-color: #8d939b;
  --nbx-rack-link-color: var(--ll-accent);
  border-radius: 6px;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .55));
}
.rack_elevation svg .rack {
  stroke: #7b828a !important;
  stroke-width: 5px !important;
}
.rack_elevation svg .unit {
  font-family: var(--tblr-font-monospace, monospace);
  font-size: 11px;
}
.rack_elevation svg .slot {
  stroke-width: 1px;
}
/* reservation stripe beside the units: orange instead of blue/white hatching */
.rack_elevation svg .reservation[class] {
  fill: rgba(232, 104, 42, .55) !important;
}
/* device names over faceplates: readable on any panel colour */
.rack_elevation svg .device-image-label,
.rack_elevation svg text.label {
  font-weight: 600;
  font-size: 12px;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, .9);
  stroke-width: 3px;
  fill: #fff !important;
}

/* ---------- Neon frames: subtle version (overrides the stronger glow above) ---------- */
aside.navbar-vertical.navbar-expand-lg::before {
  border-width: 1.5px;
  border-color: rgba(var(--ll-neon-rgb), .75);
  box-shadow:
    0 0 3px rgba(var(--ll-neon-rgb), .55),
    0 0 10px rgba(var(--ll-neon-rgb), .22),
    inset 0 0 6px rgba(var(--ll-neon-rgb), .12);
  animation: none;
}
.page-wrapper::before {
  border-width: 1px;
  border-color: rgba(var(--ll-neon-rgb), .5);
  box-shadow:
    0 0 2px rgba(var(--ll-neon-rgb), .35),
    0 0 8px rgba(var(--ll-neon-rgb), .12);
  animation: none;
}
html[data-bs-theme=light] aside.navbar-vertical.navbar-expand-lg::before { box-shadow: 0 0 4px rgba(var(--ll-neon-rgb), .35); }
html[data-bs-theme=light] .page-wrapper::before { box-shadow: 0 0 3px rgba(var(--ll-neon-rgb), .25); }

/* ---------- Interfaces: grey out ports whose link is down (oper_status from SNMP) ---------- */
tr[data-oper="down"] > td { opacity: .42; }
tr[data-oper="down"] > td:first-child,
tr[data-oper="down"] > td:last-child { opacity: 1; }          /* keep checkbox and action buttons usable */
tr[data-oper="down"]:hover > td { opacity: .85; }
tr[data-oper="down"] a { color: var(--tblr-secondary) !important; }

/* ---------- Full network map (test) ---------- */
.ll-map-group { font-size: 12px; font-weight: 700; fill: var(--ll-accent); letter-spacing: .06em; text-transform: uppercase; }
.ll-map-core { fill: none; stroke: #e8682a; stroke-width: 2; opacity: .8; }
.ll-map-bh { fill: none; stroke-width: 2.4; }
.ll-map-bh:hover { stroke-width: 5; }
.ll-map-bh-label { font-size: 10.5px; font-weight: 600; }
.ll-map-olt-bus { fill: none; stroke: #6b6f75; stroke-width: 1.5; }
.ll-map-chain { fill: none; stroke-width: 2.4; }
.ll-map-olt-title { fill: #fff; font-size: 11px; font-weight: 600; }
.ll-mount-btn { vertical-align: middle; padding: .1rem .5rem; font-size: .75rem; }
.ll-map-port { font-size: 10px; fill: rgba(255, 255, 255, .7); font-family: var(--tblr-font-monospace, monospace); }
.ll-node-external { stroke: #8a8a8a; stroke-dasharray: 5 4; stroke-width: 1.2; }
.ll-vlan-big { font-size: 2rem; font-weight: 700; color: var(--ll-accent, #e8682a); font-family: var(--tblr-font-monospace, monospace); }

/* VLAN form: suggestion dropdowns + "already in use" confirm */
.ll-dd { position: relative; }
.ll-dd > .form-control { padding-right: 2.2rem; }
.ll-dd-toggle { position: absolute; top: 0; right: 0; height: 100%; width: 2rem; border: 0; background: none; color: var(--tblr-secondary); }
.ll-dd-toggle.has { color: var(--ll-accent, #e8682a); }
.ll-dd-menu { display: none; position: absolute; z-index: 1050; left: 0; right: 0; top: calc(100% + 4px); max-height: 320px; overflow-y: auto;
  background: var(--tblr-bg-surface, #252526); border: 1px solid rgba(232, 104, 42, .5); border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); padding: 4px 0; }
.ll-dd.open .ll-dd-menu { display: block; }
.ll-dd-head { padding: .35rem .75rem .2rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tblr-secondary); }
.ll-dd-item { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem .75rem; cursor: pointer; }
.ll-dd-item:hover { background: rgba(232, 104, 42, .14); }
.ll-dd-item.rec .ll-dd-val { color: var(--ll-accent, #e8682a); font-weight: 700; }
.ll-dd-val { font-family: var(--tblr-font-monospace, monospace); }
.ll-dd-hint { font-size: .78rem; color: var(--tblr-secondary); }
.ll-vlan-info { margin-top: .35rem; }
.ll-modal { position: fixed; inset: 0; z-index: 2000; background: rgba(0, 0, 0, .55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.ll-modal-box { background: var(--tblr-bg-surface, #252526); border: 1px solid rgba(232, 104, 42, .6); border-radius: 12px; padding: 1.25rem 1.5rem; max-width: 560px; width: 100%; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }
.ll-modal-box h3 { margin-bottom: .75rem; }
.ll-modal-box ul { max-height: 220px; overflow-y: auto; font-size: .85rem; }
.ll-modal-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }

/* Create / edit forms: two columns of field groups on wide screens instead of one long column */
@media (min-width: 1400px) {
  form.object-edit #form_fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; align-items: start; }
  form.object-edit #form_fields > .field-group { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
  form.object-edit #form_fields > .field-group:only-of-type,
  form.object-edit #form_fields > .field-group:has(textarea[name="comments"]),
  form.object-edit #form_fields > :not(.field-group) { grid-column: 1 / -1; }
}
.ll-dd > input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.ll-dd > input[type=number]::-webkit-outer-spin-button, .ll-dd > input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ll-vlan-warn { margin-top: .35rem; font-size: .85rem; }
.ll-vlan-warn .ok { color: var(--tblr-success, #2fb344); }
.ll-vlan-warn .bad { color: var(--tblr-warning, #f59f00); font-weight: 600; }
.ll-purpose { border-left: 3px solid var(--ll-accent, #e8682a); padding-left: .5rem; }
.ll-util-num { font-size: 1.9rem; font-weight: 700; color: var(--ll-accent, #e8682a); line-height: 1.2; }
.ll-util-num span { font-size: 1rem; color: var(--tblr-secondary); font-weight: 400; }
.ll-stack { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: rgba(255, 255, 255, .08); }
.ll-stack span { display: block; height: 100%; }
.ll-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }
.ll-olt-row { padding: .5rem 0; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.ll-olt-n { font-size: 1.4rem; font-weight: 700; color: var(--ll-accent, #e8682a); line-height: 1; }

/* ---- Dashboard widgets ---------------------------------------------------------------------------- */
.grid-stack .card > .card-header {
  background: linear-gradient(90deg, #2a2a2d, #313135) !important; color: #f3f3f3 !important;
  border-bottom: 2px solid var(--ll-accent, #e8682a) !important; letter-spacing: .03em;
}
.grid-stack .card > .card-header .btn, .grid-stack .card > .card-header a { color: #cfcfcf !important; }
.grid-stack .card > .card-header .card-title, .grid-stack .card > .card-header strong { font-weight: 600; }
.grid-stack .card > .card-body { overflow-y: auto; }
.ll-w { display: flex; flex-direction: column; gap: .55rem; min-height: 100%; }
.ll-w-hero { display: flex; align-items: center; gap: 1rem; }
.ll-ring { --p: 0; --c: var(--ll-accent, #e8682a); position: relative; flex: 0 0 auto; width: 84px; height: 84px; border-radius: 50%;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), rgba(255, 255, 255, .08) 0); display: grid; place-items: center; }
.ll-ring.warn { --c: #f59f00; } .ll-ring.crit { --c: #e5484d; }
.ll-ring::before { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: var(--tblr-bg-surface, #252526); }
.ll-ring span { position: relative; font-weight: 700; font-size: .95rem; }
.ll-w-big { font-size: 2.1rem; font-weight: 700; line-height: 1; color: var(--ll-accent, #e8682a); }
.ll-w-big small { font-size: 1rem; font-weight: 400; color: var(--tblr-secondary); }
.ll-w-sub { color: var(--tblr-secondary); font-size: .85rem; margin-top: .25rem; }
.ll-w-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.ll-w-tiles-2 { grid-template-columns: repeat(2, 1fr); }
.ll-tile { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07); border-radius: 8px; padding: .5rem .65rem; }
.ll-tile-n { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.ll-tile-l { font-size: .78rem; color: var(--tblr-body-color); }
.ll-tile-l span { color: var(--tblr-secondary); }
.ll-w-sec { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--tblr-secondary); margin-top: .2rem; border-bottom: 1px solid rgba(255, 255, 255, .07); padding-bottom: .2rem; }
.ll-bar-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto; align-items: center; gap: .6rem; font-size: .82rem; }
.ll-bar-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ll-bar-v { color: var(--tblr-secondary); font-variant-numeric: tabular-nums; }
.ll-bar { display: block; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.ll-bar i { display: block; height: 100%; background: var(--ll-accent, #e8682a); border-radius: 4px; }
.ll-bar i.warn { background: #f59f00; } .ll-bar i.crit { background: #e5484d; }
.ll-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.ll-chip { font-size: .75rem; padding: .1rem .5rem; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .09); }
.ll-chip b { color: var(--ll-accent, #e8682a); margin-left: .2rem; }
.ll-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .15rem .9rem; font-size: .8rem; }
.ll-legend div { display: flex; align-items: center; gap: .4rem; }
.ll-legend i { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.ll-legend b { margin-left: auto; color: var(--tblr-secondary); font-weight: 500; }
.ll-grid4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.ll-tile-24 { display: flex; flex-direction: column; gap: .35rem; }
.ll-olt-table { width: 100%; font-size: .82rem; }
.ll-olt-table th { font-size: .7rem; text-transform: uppercase; color: var(--tblr-secondary); font-weight: 500; padding: .15rem .3rem; }
.ll-olt-table td { padding: .2rem .3rem; border-top: 1px solid rgba(255, 255, 255, .05); }
.ll-olt-table td.num { text-align: center; font-variant-numeric: tabular-nums; }
.ll-w-foot { margin-top: auto; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding-top: .3rem; }
.ll-ce-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); gap: .75rem; }
.ll-ce-summary .ll-tile { text-decoration: none; color: inherit; }
.ll-ce-summary .ll-tile.active { border-color: var(--ll-accent, #e8682a); }
.ll-ce-err .ll-tile-n { color: #e5484d; } .ll-ce-warn .ll-tile-n { color: #f59f00; }
.ll-ce-card { border-left: 3px solid #f59f00; } .ll-ce-card.ll-ce-error { border-left-color: #e5484d; }
a.ll-chip { text-decoration: none; color: inherit; } a.ll-chip:hover { border-color: var(--ll-accent, #e8682a); }
.ll-vid { font-size: 1.05rem; font-weight: 700; font-family: var(--tblr-font-monospace, monospace); margin-right: .35rem; }
.ll-vid-big { font-size: 3rem; font-weight: 800; color: var(--ll-accent, #e8682a); font-family: var(--tblr-font-monospace, monospace); line-height: 1; }
.ll-vlan-ov td { vertical-align: middle; }
.ll-purpose-badge { display: inline-block; font-size: .75rem; padding: .12rem .55rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.05); white-space: nowrap; }
.ll-purpose-badge[data-p="ISP access"] { border-color: #e8682a; color: #f39a63; }
.ll-purpose-badge[data-p="Backhaul"] { border-color: #a78bfa; color: #c4b5fd; }
.ll-purpose-badge[data-p="Vumatel"] { border-color: #2dd4bf; color: #5eead4; }
.ll-purpose-badge[data-p="Core infrastructure"], .ll-purpose-badge[data-p="Management"] { border-color: #60a5fa; color: #93c5fd; }
.ll-purpose-badge[data-p="Site LFISP"] { border-color: #f2c94c; color: #f2c94c; }
.ll-purpose-badge[data-p="External ISP"] { border-color: #f472b6; color: #f9a8d4; }
.ll-how { font-size: .78rem; padding: .08rem .45rem; border-radius: 6px; background: rgba(255,255,255,.06); white-space: nowrap; }
.ll-how[data-h^="Tagged"] { color: #93c5fd; } .ll-how[data-h^="Untagged"] { color: #5eead4; }
.ll-how[data-h^="SVI"], .ll-how[data-h="VLAN interface"], .ll-how[data-h="Bridge"], .ll-how[data-h="Sub-interface"] { color: #f39a63; }
.ll-how[data-h^="VXLAN"] { color: #c4b5fd; }
.ll-row-down td { opacity: .5; }
.ll-scope { font-size: .75rem; white-space: nowrap; }
.ll-scope[data-k="wide"]::before { content: "\F01E7"; font-family: "Material Design Icons"; margin-right: .25rem; }
.ll-scope[data-k="site"]::before { content: "\F034E"; font-family: "Material Design Icons"; margin-right: .25rem; }
.ll-scope[data-k="core"]::before { content: "\F048B"; font-family: "Material Design Icons"; margin-right: .25rem; }
.ll-path { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.ll-path-hop { display: inline-flex; flex-direction: column; padding: .3rem .7rem; border-radius: 8px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); font-weight: 600; }
.ll-path-hop small { font-weight: 400; color: var(--tblr-secondary); font-size: .72rem; }
.ll-path-hop.home { border-color: var(--ll-accent, #e8682a); }
.ll-path-hop.end { border-color: #60a5fa; }
.ll-site-role { font-size: .75rem; font-weight: 400; color: var(--tblr-secondary); }
.ll-rings { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.ll-ring-box { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.ll-ring-label { font-size: .8rem; font-weight: 600; color: var(--tblr-body-color); }
.ll-ring.free { --c: #2fb344; }
.ll-hero-stats { display: flex; flex-direction: column; gap: .2rem; margin-left: .5rem; }
.ll-hero-stats div { display: flex; align-items: baseline; gap: .4rem; }
.ll-hero-stats b { font-size: 1.35rem; color: var(--ll-accent, #e8682a); font-variant-numeric: tabular-nums; }
.ll-hero-stats span { font-size: .85rem; color: var(--tblr-body-color); }
.ll-vlan-ports td:last-child { white-space: nowrap; }
.ll-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #9ca3af; }
.ll-dot-up { background: #2fb344; } .ll-dot-stale { background: #f59f00; } .ll-dot-manual { background: #60a5fa; }
.ll-print-head, .ll-print-foot { display: none; }
/* Every page gets a top / bottom margin; our own footer (with page numbers) replaces the browser's URL / date. */
@page {
  size: A4; margin: 14mm 0 16mm;
  @top-left { content: ""; } @top-center { content: ""; } @top-right { content: ""; }
  @bottom-left { content: ""; } @bottom-right { content: ""; }
  @bottom-center { content: "Linteg Lava NetOps  ·  Confidential  ·  Page " counter(page) " of " counter(pages);
                   font-family: Inter, Arial, sans-serif; font-size: 7.5pt; color: #8a8a8f; }
}
@media print {
  /* Ink-friendly: white paper, dark text, thin grey lines; colour only for small accents. */
  html, body { background: #fff !important; color: #1d1d1f !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { padding: 0 12mm !important; font-size: 10pt; }
  aside.navbar-vertical, header.navbar, .page-header, .page-wrapper::before, footer, .d-print-none, nav, .breadcrumb,
  .alert, .messages, .toast-container { display: none !important; }
  .page, .page-wrapper, .page-body, .container-fluid, .container-xl { margin: 0 !important; padding: 0 !important; max-width: none !important;
    border: 0 !important; box-shadow: none !important; background: #fff !important; min-height: 0 !important; }

  /* everything inside the sheet: no dark fills, dark text */
  .ll-sheet, .ll-sheet * { background-color: transparent !important; background-image: none !important; color: #1d1d1f !important;
    box-shadow: none !important; text-shadow: none !important; }
  .ll-sheet .text-secondary, .ll-sheet .small.text-secondary, .ll-sheet .ll-tile-l, .ll-sheet .ll-bh-speed,
  .ll-sheet th, .ll-sheet .ll-hop-l, .ll-sheet .ll-w-sec { color: #5f5f66 !important; }

  .ll-print-head { display: flex; align-items: center; gap: 14px; padding: 0 0 8px; margin-bottom: 12px; border-bottom: 2px solid #e8682a; }
  .ll-print-head img { height: 40px; }
  .ll-print-title { flex: 1; }
  .ll-print-site { font-size: 19pt; font-weight: 800; color: #1d1d1f; line-height: 1.1; }
  .ll-print-sub, .ll-print-date { font-size: 9pt; color: #5f5f66; }
  .ll-print-date { text-align: right; }
  .ll-print-foot { display: none !important; }        /* the page footer (with page numbers) replaces it */

  .ll-sheet .h1 { display: none; }                         /* the print header already names the site */
  .ll-sheet .row { display: block !important; margin: 0 !important; }
  .ll-sheet .col, .ll-sheet [class*="col-"] { width: 100% !important; max-width: 100% !important; flex: none !important; padding: 0 !important; }

  .ll-sheet .card { border: 1px solid #cfcfd4 !important; border-radius: 10px !important; margin: 0 0 9px !important;
    break-inside: avoid; page-break-inside: avoid; overflow: hidden; }
  .ll-sheet .card-header { background-color: #faf6f3 !important; border-bottom: 1px solid #e3e3e8 !important; border-left: 4px solid #e8682a !important;
    font-weight: 700; padding: 5px 10px !important; font-size: 10.5pt; }
  .ll-sheet .card-header .mdi { color: #e8682a !important; }
  .ll-sheet .card-body { padding: 7px 10px !important; }
  .ll-sheet .table { margin: 0 !important; font-size: 9pt; }
  .ll-sheet .table thead th, .ll-sheet .table th { font-size: 7.5pt; text-transform: uppercase; letter-spacing: .04em;
    border-bottom: 1px solid #cfcfd4 !important; }
  .ll-sheet .table td, .ll-sheet .table th { border-color: #ececf0 !important; padding: 3px 8px !important; }
  .ll-sheet .list-group-item { border-color: #ececf0 !important; padding: 4px 10px !important; }

  .ll-sheet .ll-tile, .ll-sheet .ll-chip, .ll-sheet .ll-hop { border: 1px solid #cfcfd4 !important; border-radius: 8px !important; }
  .ll-sheet .ll-tile-n, .ll-sheet .ll-bh-prov { color: #c4501a !important; }
  .ll-sheet .ll-bh { border-color: #e3e3e8 !important; }
  .ll-sheet .ll-bh-role, .ll-sheet .badge { border: 1px solid #9a9aa0 !important; border-radius: 999px !important; padding: 0 6px !important; }
  .ll-sheet .ll-bh-role { color: #1e7a34 !important; border-color: #1e7a34 !important; }
  .ll-sheet .ll-bh-role.sec { color: #9a6200 !important; border-color: #9a6200 !important; }
  .ll-sheet .ll-dot { border: 1px solid #888 !important; }
  .ll-sheet .ll-dot-up { background-color: #2fb344 !important; border-color: #2fb344 !important; }
  .ll-sheet .ll-dot-stale { background-color: #f59f00 !important; border-color: #f59f00 !important; }
  .ll-sheet .text-danger { color: #b42318 !important; }
  .ll-sheet .text-success { color: #1e7a34 !important; }
}
.ll-wizard .card-header { font-size: 1.05rem; }
.ll-step { display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--ll-accent, #e8682a); color: #111; font-weight: 800; margin-right: .6rem; }
.ll-wizard .form-label { font-weight: 600; font-size: .95rem; }
.ll-hint { font-size: .88rem; display: flex; flex-direction: column; gap: .3rem; }
.ll-missing .btn { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.ll-missing-what { font-size: .72rem; opacity: .8; font-weight: 400; }
.ll-inside { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; }
.ll-bh { padding: .8rem 1rem; }
.ll-bh-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .55rem; }
.ll-bh-prov { font-weight: 800; font-size: 1.05rem; }
.ll-bh-role { font-size: .75rem; padding: .1rem .5rem; border-radius: 999px; background: rgba(47, 179, 68, .15); color: #4ade80; }
.ll-bh-role.sec { background: rgba(245, 159, 0, .15); color: #fbbf24; }
.ll-bh-speed { font-size: .8rem; color: var(--tblr-secondary); }
.ll-bh-path { display: flex; align-items: stretch; flex-wrap: wrap; gap: .35rem; }
.ll-bh-path > i { align-self: center; color: var(--tblr-secondary); }
.ll-hop { display: inline-flex; flex-direction: column; padding: .25rem .55rem; border-radius: 7px; border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.035); font-size: .8rem; text-decoration: none; color: inherit; line-height: 1.25; }
.ll-hop:hover { border-color: var(--ll-accent, #e8682a); }
.ll-hop small { font-size: .65rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tblr-secondary); }
@media print { .ll-hop { border-color: #999 !important; background: #f5f5f5 !important; } }

/* ---------- Sidebar: no frame; only the menu scrolls ---------- */
@media (min-width: 992px) {
  aside.navbar-vertical.navbar-expand-lg { overflow: hidden !important; }
  aside.navbar-vertical.navbar-expand-lg::before { display: none !important; }
  aside.navbar-vertical.navbar-expand-lg > .container-fluid {
    position: absolute; inset: 8px; width: auto !important; height: auto !important; min-height: 0 !important; max-width: none !important; max-height: none !important; overflow-y: auto; overflow-x: hidden;
    padding: 6px 6px 0 !important; border: 0 !important; box-shadow: none !important;   /* no frame around the sidebar */
    scrollbar-width: thin; scrollbar-color: rgba(var(--ll-neon-rgb), .45) transparent;
  }
  /* menu panels sit fully inside the frame (Tabler pulls the list outwards with negative margins) */
  aside.navbar-vertical.navbar-expand-lg .navbar-nav { margin-left: 0 !important; margin-right: 0 !important; }
  aside.navbar-vertical.navbar-expand-lg .navbar-nav > .nav-item.dropdown { margin: 4px 2px; }
  /* nothing inside may be wider than the sidebar (it was overflowing on the right, so the tabs sat off-centre) */
  aside.navbar-vertical.navbar-expand-lg > .container-fluid > *,
  aside.navbar-vertical.navbar-expand-lg .navbar-collapse,
  aside.navbar-vertical.navbar-expand-lg .navbar-nav { width: auto !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box; }
  aside.navbar-vertical.navbar-expand-lg > .container-fluid { padding-left: 8px !important; padding-right: 8px !important; }
  /* items fade out at the bottom edge of the frame while there's more to scroll */
  aside.navbar-vertical.navbar-expand-lg > .container-fluid::after {
    content: ""; display: block; flex: none; position: sticky; bottom: 0; height: 28px; margin-top: 4px;
    pointer-events: none; background: linear-gradient(to bottom, transparent, var(--ll-dk-surface) 85%);
  }
  html[data-bs-theme=light] aside.navbar-vertical.navbar-expand-lg > .container-fluid::after { background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 85%); }
  aside.navbar-vertical.navbar-expand-lg > .container-fluid::-webkit-scrollbar { width: 6px; }
  aside.navbar-vertical.navbar-expand-lg > .container-fluid::-webkit-scrollbar-thumb { background: rgba(var(--ll-neon-rgb), .45); border-radius: 6px; }
  aside.navbar-vertical.navbar-expand-lg > .container-fluid::-webkit-scrollbar-track { background: transparent; }
}

/* ---------- Sidebar logo: on a rounded, darker panel (same in light and dark mode; the logo is made for dark) ---------- */
aside.navbar-vertical .navbar-brand { width: 100%; padding-left: 2px; padding-right: 2px; }
aside.navbar-vertical .navbar-brand > a {
  background: linear-gradient(180deg, #1c1b1a, #24211f);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 14px;
  padding: 12px 10px 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 4px 14px rgba(0, 0, 0, .35);
}
aside.navbar-vertical .navbar-brand > a::before { display: none; }       /* the panel replaces the old soft glow */
html[data-bs-theme=light] aside.navbar-vertical .navbar-brand > a { box-shadow: 0 3px 10px rgba(0, 0, 0, .18); }
html[data-bs-theme=light] aside.navbar-vertical .navbar-brand .netbox-edition::after { color: #f0f0f0; }

/* ---------- New Site: documents drop zone and "filled in from the documents" ---------- */
.ll-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 16px; margin: 0;
  border: 2px dashed rgba(var(--ll-neon-rgb), .45); border-radius: 14px; cursor: pointer; text-align: center;
  background: rgba(var(--ll-neon-rgb), .04); transition: background .15s, border-color .15s; }
.ll-drop .mdi { font-size: 2rem; color: var(--ll-accent); line-height: 1; }
.ll-drop:hover, .ll-drop.ll-drop-over { background: rgba(var(--ll-neon-rgb), .10); border-color: var(--ll-accent); }
.ll-docs-card #id_docs { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ll-doc-row { padding: 6px 0; border-bottom: 1px solid var(--tblr-border-color); }
.ll-doc-row:last-child { border-bottom: 0; }
.ll-chip { display: inline-block; padding: 1px 8px; margin: 1px 0; border-radius: 10px; font-size: .78rem;
  background: rgba(var(--ll-neon-rgb), .12); color: var(--ll-accent); }
.form-control.ll-autofilled, .form-select.ll-autofilled { border-color: var(--ll-accent) !important; box-shadow: 0 0 0 2px rgba(var(--ll-neon-rgb), .18); }

/* ---------- Quick add: big plain buttons ---------- */
.ll-qa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.ll-qa { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: 14px; text-decoration: none !important;
  color: inherit !important; background: var(--tblr-bg-surface); border: 1px solid var(--tblr-border-color);
  transition: border-color .15s, background .15s, transform .15s; }
a.ll-qa:hover { border-color: var(--ll-accent); background: rgba(var(--ll-neon-rgb), .06); transform: translateY(-1px); }
.ll-qa > .mdi { font-size: 2.1rem; line-height: 1; color: var(--ll-accent); }
.ll-qa-t { font-size: 1.15rem; font-weight: 700; margin-bottom: 2px; }
.ll-qa-d { color: var(--tblr-secondary); font-size: .9rem; }
.ll-qa-main { grid-column: 1 / -1; border-color: rgba(var(--ll-neon-rgb), .55); background: rgba(var(--ll-neon-rgb), .07); }
.ll-qa-main .ll-qa-t { font-size: 1.35rem; }
.ll-qa-main > .mdi { font-size: 2.6rem; }
.ll-doc-providers { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.ll-doc-providers .ll-tile:hover { border-color: rgba(232, 104, 42, .6); }

/* ---------- Light mode, softened (Keagan 2026-10-29: "my eyes are being flashbanged") ----------
   Warm greys instead of white / cream, quieter borders and a thin calm orange line instead of the neon glow.
   Everything here is light-mode only; dark mode is untouched. NetBox sets the theme on <html> and on <body>, and
   Tabler redefines its colours at both, so both get these values. */
html[data-bs-theme=light],
html[data-bs-theme=light] body,
body[data-bs-theme=light] {
  --ll-lt-page: #e6e3de;        /* page behind everything */
  --ll-lt-card: #f1efeb;        /* cards, tables, panels */
  --ll-lt-raised: #e9e6e1;      /* table heads, hover, inputs' neighbours */
  --ll-lt-input: #f7f5f2;
  --ll-lt-border: #d3cec6;
  --ll-lt-text: #2b2725;
  --ll-lt-muted: #6b645e;
  --tblr-body-bg: var(--ll-lt-page);
  --tblr-body-bg-rgb: 230, 227, 222;
  --tblr-bg-surface: var(--ll-lt-card);
  --tblr-bg-surface-rgb: 241, 239, 235;
  --tblr-bg-surface-secondary: var(--ll-lt-raised);
  --tblr-bg-surface-tertiary: var(--ll-lt-raised);
  --tblr-bg-forms: var(--ll-lt-input);
  --tblr-border-color: var(--ll-lt-border);
  --tblr-border-color-translucent: rgba(60, 50, 40, .14);
  --tblr-body-color: var(--ll-lt-text);
  --tblr-body-color-rgb: 43, 39, 37;
  --tblr-secondary: var(--ll-lt-muted);
  --tblr-secondary-color: var(--ll-lt-muted);
  --tblr-link-color: #b8461c;
  --tblr-link-color-rgb: 184, 70, 28;
  --tblr-link-hover-color: #8f3412;
  --tblr-card-bg: var(--ll-lt-card);
  --tblr-table-bg: transparent;
  color-scheme: light;
}
html[data-bs-theme=light] body,
html[data-bs-theme=light] .page,
html[data-bs-theme=light] .page-wrapper { background-color: var(--ll-lt-page) !important; }
html[data-bs-theme=light] .card,
html[data-bs-theme=light] .dropdown-menu,
html[data-bs-theme=light] .modal-content,
html[data-bs-theme=light] .list-group-item { background-color: var(--ll-lt-card); border-color: var(--ll-lt-border); }
html[data-bs-theme=light] .card-header,
html[data-bs-theme=light] .table thead th { background-color: var(--ll-lt-raised); }
html[data-bs-theme=light] .form-control,
html[data-bs-theme=light] .form-select,
html[data-bs-theme=light] .ts-control { background-color: var(--ll-lt-input); border-color: var(--ll-lt-border); }
html[data-bs-theme=light] .navbar,
html[data-bs-theme=light] header.navbar { background-color: var(--ll-lt-page) !important; border-color: var(--ll-lt-border) !important; }
/* sidebar: same warm grey, no orange wash */
html[data-bs-theme=light] .navbar-vertical.navbar-expand-lg { background: #dedad4 !important; }
html[data-bs-theme=light] aside.navbar-vertical.navbar-expand-lg > .container-fluid::after { background: linear-gradient(to bottom, rgba(222,218,212,0), #dedad4 85%); }
html[data-bs-theme=light] .navbar-vertical.navbar-expand-lg .navbar-nav > .nav-item.dropdown { background-color: rgba(255, 255, 255, .25); border-color: rgba(60, 50, 40, .14); }
/* the neon frames: a thin calm line, no glow or breathing */
html[data-bs-theme=light] aside.navbar-vertical.navbar-expand-lg::before,
html[data-bs-theme=light] .page-wrapper::before {
  border-width: 1.5px; border-color: rgba(200, 95, 45, .55); box-shadow: none !important; animation: none !important;
}
/* NetBox's bright banners (e.g. "new release"): muted */
html[data-bs-theme=light] .alert { background-color: var(--ll-lt-raised); border-color: var(--ll-lt-border); color: var(--ll-lt-text); }
html[data-bs-theme=light] .alert-info { border-left: 3px solid #5b8fb9; }
html[data-bs-theme=light] .alert-warning { border-left: 3px solid #d08a1e; }
html[data-bs-theme=light] .alert-danger { border-left: 3px solid #c0392b; }
html[data-bs-theme=light] .alert-success { border-left: 3px solid #3f8f4f; }
/* table rows: a gentle hover instead of a bright flash */
html[data-bs-theme=light] .table-hover > tbody > tr:hover > * { --tblr-table-hover-bg: rgba(60, 50, 40, .05); }
html[data-bs-theme=light] .page-header,
html[data-bs-theme=light] .page-body > .container-fluid > .page-header { background: transparent !important; }
html[data-bs-theme=light] .alert { --tblr-alert-bg: var(--ll-lt-raised); --tblr-alert-color: var(--ll-lt-text);
  --tblr-alert-border-color: var(--ll-lt-border); }
html[data-bs-theme=light] .ll-tile { background: var(--ll-lt-card) !important; border-color: var(--ll-lt-border) !important; }
html[data-bs-theme=light] .alert,
html[data-bs-theme=light] .alert[class*="alert-"] { background: var(--ll-lt-raised) !important; color: var(--ll-lt-text) !important; border-color: var(--ll-lt-border) !important; }

/* ---------- Standard print layout (print.js) for pages without their own: logo header, white cards, fits A4 ---------- */
.ll-print-std-head { display: none; }
@media print {
  @page { size: A4 portrait; margin: 11mm 10mm 12mm 10mm; }
  html.ll-print-std body { padding: 0 !important; }
  html.ll-print-std .ll-print-std-head { display: flex !important; align-items: center; gap: 4mm; border-bottom: 2px solid #e8682a;
    padding-bottom: 2.5mm; margin: 0 0 4mm; }
  html.ll-print-std .ll-print-std-head img { height: 13mm; width: auto; }
  html.ll-print-std .ll-print-std-head .t { font-size: 15pt; font-weight: 700; color: #1d1d1f; }
  html.ll-print-std .ll-print-std-head .s { font-size: 8.5pt; color: #5f5f66; margin-top: .8mm; }
  html.ll-print-std .ll-win, html.ll-print-std .ll-win ~ .mb-2 { display: none !important; }      /* the picker: on screen only */
  html.ll-print-std .card, html.ll-print-std .ll-tile, html.ll-print-std .card-body, html.ll-print-std .card-footer,
  html.ll-print-std .table, html.ll-print-std .table > :not(caption) > * > * {
    background: #fff !important; color: #1d1d1f !important; box-shadow: none !important; }
  html.ll-print-std .card { border: 1px solid #d9d9de !important; border-radius: 8px !important; margin: 0 0 4mm !important; break-inside: avoid; }
  html.ll-print-std .card-header { background: #f4f4f6 !important; color: #1d1d1f !important; border-bottom: 1px solid #d9d9de !important;
    font-size: 10.5pt !important; padding: 1.5mm 3mm !important; }
  html.ll-print-std .ll-tile { border: 1px solid #d9d9de !important; }
  html.ll-print-std .text-secondary, html.ll-print-std .small, html.ll-print-std th { color: #5f5f66 !important; }
  html.ll-print-std .table-responsive { overflow: visible !important; }
  html.ll-print-std .ll-uplot, html.ll-print-std canvas, html.ll-print-std svg { max-width: 100% !important; }
  html.ll-print-std .ll-uplot { break-inside: avoid; }
  html.ll-print-std .row { --tblr-gutter-x: 3mm; }
}