/* =====================================================================
 * OZDC - NetBox in the OZmap product family
 * ---------------------------------------------------------------------
 * NetBox is meant to run inside an OZmap iframe, so component anatomy is
 * copied from the compiled OZmap theme (ExtJS 6 / Triton) rather than
 * approximated. Every value below has a `.x-*` counterpart cited inline.
 *
 * Product palette wins. ozmap.com only contributes what the product has
 * no equivalent for: the brand green and the dark-mode greys.
 *
 * Loaded after netbox.css via the ozdc_theme plugin's head() hook, so
 * same-specificity declarations win.
 * ===================================================================== */

/* ---------------------------------------------------------------- *
 * 1. Open Sans - OZmap's UI typeface (self-hosted, no CDN)
 * ---------------------------------------------------------------- */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/open-sans-latin-ext-italic.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/open-sans-latin-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/open-sans-latin-ext-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/open-sans-latin-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------- *
 * 2. Tokens
 * ---------------------------------------------------------------- */
:root,
:host {
  /* -- Product: ExtJS Triton as OZmap ships it -------------------- */
  --oz-primary: #5fa2dd;            /* $base-color */
  --oz-primary-rgb: 95, 162, 221;
  --oz-primary-over: #5795cb;       /* .x-btn-over */
  --oz-primary-over-border: #518bbd;
  --oz-primary-pressed: #477aa6;    /* .x-btn-pressed */
  --oz-primary-pressed-border: #42719a;
  --oz-primary-focus-ring: #d3e0ec; /* .x-btn-focus inset ring */
  --oz-primary-hover-light: #7fb5e4;/* .x-boundlist-item-over */
  --oz-primary-field-focus: #77b0e2;/* .x-form-trigger-wrap-focus */
  --oz-primary-subtle: #e5edf4;

  /* Navigation rail - from `.x-treelist-*`, the component NetBox's sidebar
     actually is. These used to come from the nav TAB bar (`.x-tab-*-navigation`),
     which is a different component: that is where #acacac and #c4c4c4 came from,
     and #505050 came from reading `rgba(80, 80, 80, 0.08)` - an 8% hover TINT -
     as if it were a solid fill. OZmap overrides Triton's blue-greys with
     `!important` on every one of these, so the values below are the effective
     ones, not Triton's defaults. */
  --oz-nav-bg: #404040;             /* .x-treelist */
  --oz-nav-bg-active: #303030;      /* .x-treelist-item-selected > .x-treelist-row */
  --oz-nav-bg-hover: #303030;       /* .x-treelist-row-over - same band as selected */
  --oz-nav-text: #adb3b8;           /* .x-treelist-nav .x-treelist-item-text */
  --oz-nav-text-hover: #ffffff;     /* .x-treelist-nav .x-treelist-row-over ... */
  --oz-nav-text-active: #ffffff;

  /* Ink and surfaces */
  --oz-ink: #404040;                /* .x-panel-body-default */
  --oz-ink-muted: #606060;          /* .x-btn-inner-default-toolbar-small */
  --oz-ink-subtle: #919191;         /* .x-btn-icon-el-default-toolbar-small */
  --oz-on-primary: #f0f0f0;         /* .x-btn-inner-default-small */
  --oz-border: #d0d0d0;             /* .x-panel-body-default, .x-toolbar-default */
  --oz-surface: #ffffff;
  --oz-surface-alt: #f6f6f6;        /* .x-body, .x-grid-item-alt, toolbar btn */
  --oz-surface-sunken: #ececec;     /* .x-border-layout-ct, .x-toolbar-footer */

  /* Toolbar button, straight off .x-btn-default-toolbar-small */
  --oz-tbtn-bg: #f6f6f6;
  --oz-tbtn-border: #e4e4e4;
  --oz-tbtn-bg-over: #ececec;
  --oz-tbtn-border-over: #dbdbdb;
  --oz-tbtn-bg-pressed: #e2e2e2;
  --oz-tbtn-border-pressed: #d2d2d2;

  /* Grid */
  --oz-grid-line: #e9e9e9;          /* .x-grid-with-col-lines .x-grid-cell */
  --oz-row-alt: #f6f6f6;            /* .x-grid-item-alt */
  --oz-row-hover: #eaeff4;          /* .x-grid-item-over */
  --oz-row-selected: #ffefbb;       /* .x-grid-item-selected */
  --oz-row-selected-border: #f2e3b2;

  /* Row states from sass/var/all.scss */
  --oz-row-warning: #ffcc00;
  --oz-row-warning-ink: #000000;
  --oz-row-error: #ffe2e2;
  --oz-row-error-ink: #990000;
  --oz-row-ok: #e2ffe2;
  --oz-row-ok-ink: #009900;

  --oz-danger: #cf4c35;             /* .x-form-invalid-under-default */
  --oz-badge: #ff9a93;

  /* -- From ozmap.com, for what the product has no token for ------ */
  --oz-green: #00d256;              /* brand accent */
  --oz-dark-0: #131313;             /* site page background */
  --oz-dark-1: #1e1e1e;
  --oz-dark-2: #2d2d2d;

  /* Shape - OZmap never rounds a corner */
  --oz-radius: 0;
  --oz-font: 'Open Sans', 'Helvetica Neue', helvetica, arial, verdana, sans-serif;

  /* -- Login ------------------------------------------------------
     The one screen that does round, because OZmap's own login page
     rounds: card 12px, controls 4px (KcPage-*.css on the OZmap
     Keycloak). That page is green because OZmap's brand is green;
     OZDC keeps the product blue, so the gradient is built from three
     real Triton blues rather than a tinted guess. */
  --oz-login-radius: 12px;          /* #kc-content-wrapper border-radius */
  --oz-login-control-radius: 4px;   /* #kc-login, input[type=text] */
  --oz-login-pad: 40px;             /* #kc-content-wrapper padding */
  --oz-login-width: 450px;          /* .card-pf max-width */
  --oz-login-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  --oz-login-grad-1: #7fb5e4;       /* .x-boundlist-item-over */
  --oz-login-grad-2: #afd1ee;       /* .x-panel-default.x-masked */
  --oz-login-grad-3: #d3e0ec;       /* .x-btn-focus inset ring */
  /* The card keeps its own surface/ink tokens because section 16 remaps
     --oz-surface and --oz-ink for dark mode, and this card is white in
     both modes. Referencing the shared tokens here would repaint it. */
  --oz-login-card-bg: #ffffff;
  --oz-login-card-ink: #404040;     /* .x-panel-body-default { color } */
  --oz-login-sso-hover: #f5f5f5;    /* .social-login-btn:hover */
  --oz-login-field-bg: #fafafa;     /* input[type=text] background */
  --oz-login-field-border: #dddddd; /* input[type=text] border */
  --oz-login-divider: #e0e0e0;      /* .social-divider hr */
  --oz-login-divider-ink: #666666;  /* .social-divider */
}

/* ---------------------------------------------------------------- *
 * 3. Remap Tabler/Bootstrap tokens
 * ---------------------------------------------------------------- */
:root,
:host {
  --tblr-primary: var(--oz-primary);
  --tblr-primary-rgb: var(--oz-primary-rgb);
  --tblr-primary-fg: var(--oz-on-primary);
  --tblr-primary-lt: var(--oz-primary-subtle);
  --tblr-primary-darken: var(--oz-primary-pressed);
  --tblr-primary-text-emphasis: var(--oz-primary-pressed-border);
  --tblr-primary-bg-subtle: var(--oz-primary-subtle);
  --tblr-primary-border-subtle: var(--oz-border);

  --tblr-success: var(--oz-green);
  --tblr-green: var(--oz-green);
  --tblr-danger: var(--oz-danger);
  --tblr-red: var(--oz-danger);

  --tblr-font-sans-serif: var(--oz-font);
  --tblr-body-font-family: var(--oz-font);
  --tblr-body-font-size: 0.8125rem;   /* 13px, as ExtJS */
  --tblr-body-font-weight: 400;

  --tblr-border-radius: var(--oz-radius);
  --tblr-border-radius-sm: var(--oz-radius);
  --tblr-border-radius-md: var(--oz-radius);
  --tblr-border-radius-lg: var(--oz-radius);
  --tblr-border-radius-xl: var(--oz-radius);
  --tblr-border-radius-xxl: var(--oz-radius);
  --tblr-border-radius-2xl: var(--oz-radius);
}

:root,
:host,
[data-bs-theme='light'] {
  --tblr-body-bg: var(--oz-surface-alt);
  --tblr-body-color: var(--oz-ink);
  --tblr-border-color: var(--oz-border);
  --tblr-border-color-translucent: var(--oz-border);
  --tblr-bg-surface: var(--oz-surface);
  --tblr-bg-surface-secondary: var(--oz-surface-alt);
  --tblr-bg-surface-tertiary: var(--oz-surface-alt);
  --tblr-link-color: var(--oz-primary-pressed);
  --tblr-link-hover-color: var(--oz-primary-pressed-border);
  --tblr-secondary: var(--oz-ink-subtle);
  --tblr-secondary-color: var(--oz-ink-muted);
  --tblr-active-bg: var(--oz-row-hover);
  --tblr-highlight-bg: var(--oz-row-selected);
  --tblr-muted: var(--oz-ink-subtle);
}

/* ---------------------------------------------------------------- *
 * 4. Global
 * ---------------------------------------------------------------- */
body {
  font-family: var(--oz-font);
  font-size: 13px;
  color: var(--oz-ink);
}

/* ExtJS rounds nothing. */
.card,
.btn,
.form-control,
.form-select,
.input-group-text,
.dropdown-menu,
.modal-content,
.alert,
.badge,
.nav-tabs .nav-link,
.page-link,
.progress,
.list-group,
.toast,
.ts-control,
.ts-dropdown,
.form-check-input {
  border-radius: var(--oz-radius) !important;
}

a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------------- *
 * 5. Navigation rail - OZmap's charcoal treelist
 * ---------------------------------------------------------------- */
html[data-bs-theme='light'] .navbar-vertical.navbar-expand-lg,
html[data-bs-theme='dark'] .navbar-vertical.navbar-expand-lg {
  background: var(--oz-nav-bg);
  border-right: 0;
  --tblr-navbar-active-bg: var(--oz-nav-bg-active);
}

/* Blue brand block above the charcoal rail, mirroring OZmap's
   `$ui-header-background-color: $base-color` over `$ui-bar-background-color`. */
.navbar-vertical.navbar-expand-lg > .container-fluid {
  padding-left: 0;
  padding-right: 0;
}

.navbar-vertical.navbar-expand-lg .navbar-brand {
  background-color: var(--oz-primary);
  margin: 0;
  padding: 0;
  width: 100%;
}

.navbar-vertical.navbar-expand-lg .navbar-brand > a {
  display: block;
  /* .navbar-brand is a flex container and the link's content is hidden,
     so it needs an explicit width or it collapses to zero. */
  flex: 1 1 auto;
  width: 100%;
  height: 64px;
  padding: 0;
  background-image: url('ozdc-logo-white.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 152px auto;
  text-indent: -9999px;
  overflow: hidden;
}

.navbar-vertical.navbar-expand-lg .navbar-brand img,
.navbar-vertical.navbar-expand-lg .navbar-brand .netbox-edition {
  display: none !important;
}

.navbar-vertical.navbar-expand-lg #sidebar-menu {
  padding: 8px 6px 0;
}

.navbar-vertical.navbar-expand-lg .navbar-collapse .nav-link,
.navbar-vertical.navbar-expand-lg .navbar-collapse .nav-link-title,
.navbar-vertical.navbar-expand-lg .navbar-collapse .nav-link-icon {
  color: var(--oz-nav-text);
  font-size: 13px;
}

.navbar-vertical.navbar-expand-lg .navbar-collapse .nav-item > .nav-link:hover,
.navbar-vertical.navbar-expand-lg .navbar-collapse .nav-item > .nav-link:hover .nav-link-title,
.navbar-vertical.navbar-expand-lg .navbar-collapse .nav-item > .nav-link:hover .nav-link-icon {
  color: var(--oz-nav-text-hover);
}

.navbar-vertical.navbar-expand-lg .navbar-collapse .nav-item > .nav-link:hover {
  background-color: var(--oz-nav-bg-hover);
}

.navbar-vertical.navbar-expand-lg .navbar-collapse .nav-item.dropdown.active > .nav-link,
.navbar-vertical.navbar-expand-lg .navbar-collapse .nav-item.show > .nav-link,
.navbar-vertical.navbar-expand-lg .navbar-collapse .nav-item.active > .nav-link .nav-link-title,
.navbar-vertical.navbar-expand-lg .navbar-collapse .nav-item.active > .nav-link .nav-link-icon {
  color: var(--oz-nav-text-active);
}

.navbar-vertical.navbar-expand-lg .navbar-collapse .nav-item.dropdown.active > .nav-link,
.navbar-vertical.navbar-expand-lg .navbar-collapse .nav-item.show > .nav-link {
  background-color: var(--oz-nav-bg-active);
}

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

.navbar-vertical.navbar-expand-lg .navbar-collapse .dropdown-menu {
  background-color: transparent;
  border: 0;
  box-shadow: none;
}

.navbar-vertical.navbar-expand-lg .navbar-collapse .dropdown-menu .dropdown-item,
.navbar-vertical.navbar-expand-lg .navbar-collapse .dropdown-menu .dropdown-item > a {
  color: var(--oz-nav-text) !important;
  font-size: 13px;
}

.navbar-vertical.navbar-expand-lg .navbar-collapse .dropdown-menu .dropdown-item:hover,
.navbar-vertical.navbar-expand-lg .navbar-collapse .dropdown-menu .dropdown-item:focus-within {
  background-color: var(--oz-nav-bg-hover) !important;
}

.navbar-vertical.navbar-expand-lg .navbar-collapse .dropdown-menu .dropdown-item:hover > a,
.navbar-vertical.navbar-expand-lg .navbar-collapse .dropdown-menu .dropdown-item.active > a {
  color: var(--oz-nav-text-active) !important;
}

.navbar-vertical.navbar-expand-lg .navbar-collapse .dropdown-menu .dropdown-item.active {
  background-color: var(--oz-nav-bg-active) !important;
  box-shadow: inset 3px 0 0 var(--oz-primary);
}

.navbar-vertical.navbar-expand-lg .navbar-collapse .text-secondary {
  color: var(--oz-primary-hover-light) !important;
}

.navbar-vertical.navbar-expand-lg .navbar-collapse .text-muted,
.navbar-vertical.navbar-expand-lg .navbar-collapse .text-muted a {
  color: var(--oz-ink-subtle) !important;
}

/* ---------------------------------------------------------------- *
 * 6. Top bar - .x-toolbar-default: white face, 1px #d0d0d0
 * ---------------------------------------------------------------- */
.navbar:not(.navbar-vertical) {
  background-color: var(--oz-surface);
  border-bottom: 1px solid var(--oz-border);
  box-shadow: none;
  min-height: 44px;
  padding: 6px 8px;
}

/* ---------------------------------------------------------------- *
 * 7. Page and panels - .x-panel-default has a BLUE border
 * ---------------------------------------------------------------- */
.page {
  background-color: var(--oz-surface-alt);
}

.page-header {
  background-color: transparent;
}

.page-header .page-title {
  color: var(--oz-ink);
  font-size: 20px;
  font-weight: 600;
}

.card {
  --tblr-card-bg: var(--oz-surface);
  --tblr-card-border-color: var(--oz-primary);
  --tblr-card-cap-bg: var(--oz-primary);
  --tblr-card-cap-color: var(--oz-on-primary);
  --tblr-card-box-shadow: none;
  border: 1px solid var(--oz-primary);
  box-shadow: none;
}

/* NetBox ships `.page-body .card .card-header { background: … }` at
   specificity 0,3,0 - match it or the blue never lands. */
.card > .card-header,
.page-body .card > .card-header {
  background: var(--oz-primary);
  border-bottom: 1px solid var(--oz-primary);
  color: var(--oz-on-primary);
  min-height: 34px;
  padding: 5px 8px;
}

/* Dashboard widgets carry a user-chosen text-bg-* colour; leave those alone,
   except 'blue', which is what the OZDC default dashboard asks for - in this
   product "blue" means the OZmap blue, not Tabler's. */
.page-body .card > .card-header[class*='text-bg-'] {
  background: unset;
}

/* Dashboard widgets live outside .page-body, and Tabler's .text-bg-* carries
   !important - so this has to be both unscoped and !important. */
.card > .card-header.text-bg-blue,
.card > .card-header.text-bg-primary {
  background-color: var(--oz-primary) !important;
  color: var(--oz-on-primary) !important;
}

/* The widget config/close glyphs carry .text-bg-* too. In ExtJS a panel tool
   sits flat on the header (.x-tool-tool-el: #fff at 80% opacity). */
.card > .card-header [class*='text-bg-'] {
  background-color: transparent !important;
  color: #ffffff !important;
  opacity: 0.8;
}

.card > .card-header [class*='text-bg-']:hover {
  opacity: 1;
}

.card > .card-header,
.card > .card-header .card-title,
.card > .card-header h1,
.card > .card-header h2,
.card > .card-header h3,
.card > .card-header h4,
.card > .card-header h5,
.card > .card-header .text-muted,
.card > .card-header a:not(.btn) {
  color: var(--oz-on-primary);
}

/* .x-panel-header-title-default */
.card > .card-header .card-title {
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

/* .x-tool-tool-el - the +/gear/close glyphs on a panel header */
.card > .card-header .btn:not(.btn-primary):not(.btn-danger) {
  background-color: transparent;
  border-color: transparent;
  color: #ffffff;
  opacity: 0.8;
}

.card > .card-header .btn:not(.btn-primary):not(.btn-danger):hover {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.15);
  border-color: transparent;
  color: #ffffff;
}

.card > .card-footer {
  background-color: var(--oz-surface-alt);
  border-top: 1px solid var(--oz-border);
  color: var(--oz-ink);
}

/* ---------------------------------------------------------------- *
 * 8. Grids - .x-grid-*
 *
 *   header   .x-column-header   white, #404040, 400 13px/19px,
 *                               border-right 1px #d0d0d0, hover #eaeff4
 *   zebra    .x-grid-item-alt   #f6f6f6
 *   hover    .x-grid-item-over      #eaeff4
 *   selected .x-grid-item-selected  #ffefbb
 *   col line .x-grid-with-col-lines 1px #e9e9e9
 * ---------------------------------------------------------------- */
.table {
  --tblr-table-hover-bg: var(--oz-row-hover);
  --tblr-table-hover-color: var(--oz-ink);
  --tblr-table-border-color: var(--oz-grid-line);
  --tblr-table-striped-bg: var(--oz-row-alt);
  color: var(--oz-ink);
  font-size: 13px;
}

.table > thead > tr > th {
  background-color: var(--oz-surface);
  border-bottom: 1px solid var(--oz-border);
  border-right: 1px solid var(--oz-border);
  color: var(--oz-ink);
  font: 400 13px/19px var(--oz-font);
  letter-spacing: normal;
  text-transform: none;
  padding: 6px 8px;
  vertical-align: middle;
}

.table > thead > tr > th:last-child {
  border-right: 0;
}

.table > thead > tr > th:hover {
  background-color: var(--oz-row-hover);
}

.table > thead > tr > th a,
.table > thead > tr > th .table-sort {
  color: var(--oz-ink);
  font-weight: 400;
}

/* Column lines, the ExtJS default for a grid. */
.table > tbody > tr > td {
  border-top: 1px solid var(--oz-grid-line);
  border-right: 1px solid var(--oz-grid-line);
  padding: 6px 8px;
  vertical-align: middle;
}

.table > tbody > tr > td:last-child {
  border-right: 0;
}

/* .x-grid-item-alt */
.table > tbody > tr:nth-of-type(even) > td {
  background-color: var(--oz-row-alt);
}

.table > tbody > tr:hover > td {
  background-color: var(--oz-row-hover) !important;
  color: var(--oz-ink) !important;
}

/* .x-grid-item-selected - the amber that says "selected" in OZmap */
.table > tbody > tr:has(input[type='checkbox']:checked) > td,
.table > tbody > tr.table-active > td,
.table > tbody > tr.selected > td {
  background-color: var(--oz-row-selected) !important;
  border-color: var(--oz-row-selected-border) !important;
  color: var(--oz-ink) !important;
}

/* .row-with-warning / .row-with-error / .row-imported */
.table > tbody > tr.table-warning > td {
  background-color: var(--oz-row-warning) !important;
  color: var(--oz-row-warning-ink) !important;
}

.table > tbody > tr.table-danger > td {
  background-color: var(--oz-row-error) !important;
  color: var(--oz-row-error-ink) !important;
}

.table > tbody > tr.table-success > td {
  background-color: var(--oz-row-ok) !important;
  color: var(--oz-row-ok-ink) !important;
}

/* .x-grid-body */
.table-responsive,
.card > .table-responsive {
  border-top: 1px solid var(--oz-border);
}

/* ---------------------------------------------------------------- *
 * 9. Buttons
 *
 * ExtJS has exactly two button skins, and OZmap uses both:
 *
 *   .x-btn-default-small          the action button
 *       face #5fa2dd / 1px #5fa2dd / radius 0 / padding 7px
 *       text .x-btn-inner-default-small  400 12px/16px #f0f0f0
 *       over    #5795cb on #518bbd
 *       pressed #477aa6 on #42719a
 *       focus   inset 1px ring #d3e0ec
 *
 *   .x-btn-default-toolbar-small  the toolbar button
 *       face #f6f6f6 / 1px #e4e4e4 / text #606060 / icon #919191
 *       over    #ececec on #dbdbdb
 *       pressed #e2e2e2 on #d2d2d2
 *       focus   inset 1px ring #5fa2dd
 * ---------------------------------------------------------------- */
.btn {
  border-radius: var(--oz-radius);
  border-width: 1px;
  border-style: solid;
  padding: 6px 7px;
  font: 400 12px/16px var(--oz-font);
  transition: background-color 0.1s linear, border-color 0.1s linear;
}

.btn i,
.btn .mdi {
  font-size: 16px;
  line-height: 16px;
}

/* --- Action button: everything NetBox paints with a hue ---------- *
 * NetBox tints Bookmark cyan, Clone green, Edit yellow, Export purple.
 * ExtJS has one action face, so they all collapse onto it. Drop this
 * selector list to get NetBox's multi-coloured buttons back.         */
.btn-primary,
.btn-cyan,
.btn-teal,
.btn-green,
.btn-yellow,
.btn-orange,
.btn-purple,
.btn-indigo,
.btn-pink,
.btn-blue,
.btn-azure,
.btn-warning,
.btn-success,
.btn-info,
.btn-lime,
.btn-dark {
  --tblr-btn-bg: var(--oz-primary);
  --tblr-btn-border-color: var(--oz-primary);
  --tblr-btn-color: var(--oz-on-primary);
  --tblr-btn-hover-bg: var(--oz-primary-over);
  --tblr-btn-hover-border-color: var(--oz-primary-over-border);
  --tblr-btn-hover-color: var(--oz-on-primary);
  --tblr-btn-active-bg: var(--oz-primary-pressed);
  --tblr-btn-active-border-color: var(--oz-primary-pressed-border);
  --tblr-btn-active-color: var(--oz-on-primary);
  --tblr-btn-disabled-bg: var(--oz-primary);
  --tblr-btn-disabled-border-color: var(--oz-primary);
}

.btn-primary:focus-visible,
.btn-cyan:focus-visible,
.btn-teal:focus-visible,
.btn-green:focus-visible,
.btn-yellow:focus-visible,
.btn-orange:focus-visible,
.btn-purple:focus-visible,
.btn-blue:focus-visible,
.btn-azure:focus-visible,
.btn-warning:focus-visible,
.btn-success:focus-visible,
.btn-info:focus-visible {
  box-shadow: inset 0 0 0 1px var(--oz-primary-focus-ring);
  outline: 0;
}

/* --- Toolbar button: the neutral face -------------------------- */
.btn-secondary,
.btn-light,
.btn-default,
.btn-outline-secondary,
.btn-ghost-secondary,
.btn-white {
  --tblr-btn-bg: var(--oz-tbtn-bg);
  --tblr-btn-border-color: var(--oz-tbtn-border);
  --tblr-btn-color: var(--oz-ink-muted);
  --tblr-btn-hover-bg: var(--oz-tbtn-bg-over);
  --tblr-btn-hover-border-color: var(--oz-tbtn-border-over);
  --tblr-btn-hover-color: var(--oz-ink-muted);
  --tblr-btn-active-bg: var(--oz-tbtn-bg-pressed);
  --tblr-btn-active-border-color: var(--oz-tbtn-border-pressed);
  --tblr-btn-active-color: var(--oz-ink-muted);
}

/* Tabler's .btn-ghost keeps these transparent; the icon colour is already
   #919191, which is .x-btn-icon-el-default-toolbar-small. Leave them be. */
.btn-ghost {
  --tblr-btn-bg: transparent;
  --tblr-btn-border-color: transparent;
}

.btn-secondary i,
.btn-light i,
.btn-outline-secondary i,
.btn-ghost-secondary i {
  color: var(--oz-ink-subtle);
}

.btn-secondary:focus-visible,
.btn-light:focus-visible,
.btn-outline-secondary:focus-visible,
.btn-ghost-secondary:focus-visible {
  box-shadow: inset 0 0 0 1px var(--oz-primary);
  outline: 0;
}

/* --- Destructive keeps OZmap's own error red -------------------- */
.btn-red,
.btn-danger,
.btn-outline-danger {
  --tblr-btn-bg: var(--oz-danger);
  --tblr-btn-border-color: var(--oz-danger);
  --tblr-btn-color: #ffffff;
  --tblr-btn-hover-bg: #b93e2b;
  --tblr-btn-hover-border-color: #a33724;
  --tblr-btn-hover-color: #ffffff;
  --tblr-btn-active-bg: #a33724;
  --tblr-btn-active-border-color: #8e3020;
  --tblr-btn-active-color: #ffffff;
}

/* Outline/ghost variants of the action colour read as toolbar buttons
   with blue text, which is how ExtJS renders a secondary action. */
.btn-outline-primary,
.btn-ghost-primary {
  --tblr-btn-bg: var(--oz-tbtn-bg);
  --tblr-btn-color: var(--oz-primary-pressed);
  --tblr-btn-border-color: var(--oz-tbtn-border);
  --tblr-btn-hover-bg: var(--oz-primary);
  --tblr-btn-hover-border-color: var(--oz-primary);
  --tblr-btn-hover-color: var(--oz-on-primary);
}

.btn:disabled,
.btn.disabled {
  opacity: 0.5;
}

/* Icon-only buttons keep the square ExtJS tool footprint. */
.btn-icon,
.btn-action {
  padding: 6px;
  min-width: 28px;
}

/* ---------------------------------------------------------------- *
 * 10. Forms - .x-form-text-default / .x-form-trigger-wrap-default
 * ---------------------------------------------------------------- */
.form-control,
.form-select,
.ts-control,
.input-group-text {
  border: 1px solid var(--oz-border);
  color: var(--oz-ink);
  background-color: var(--oz-surface);
  font: 300 13px/21px var(--oz-font);
  padding: 5px 10px 4px;
  min-height: 30px;
  box-shadow: none;
}

/* .x-form-trigger-wrap-focus - a plain border swap, no glow. */
.form-control:focus,
.form-select:focus,
.ts-control.focus,
.ts-wrapper.focus .ts-control {
  border-color: var(--oz-primary-field-focus);
  box-shadow: none;
  outline: 0;
}

.form-control.is-invalid,
.form-select.is-invalid,
.ts-wrapper.is-invalid .ts-control {
  border-color: var(--oz-danger);
}

/* .x-form-invalid-under-default */
.invalid-feedback,
.form-text.text-danger {
  color: var(--oz-danger);
  font: 300 13px/16px var(--oz-font);
}

/* .x-form-item-label-default */
.form-label {
  color: var(--oz-ink);
  font: 600 13px/17px var(--oz-font);
  margin-bottom: 4px;
}

.form-check-input {
  border-color: var(--oz-border);
}

.form-check-input:checked {
  background-color: var(--oz-primary);
  border-color: var(--oz-primary);
}

.form-check-input:focus {
  border-color: var(--oz-primary-field-focus);
  box-shadow: none;
}

/* ---------------------------------------------------------------- *
 * 11. Tabs - .x-tab-bar-default is solid #5fa2dd with #f0f0f0 labels
 * ---------------------------------------------------------------- */
.page-tabs .nav-tabs,
.card > .card-header + .nav-tabs,
.nav-tabs {
  background-color: var(--oz-primary);
  border-bottom: 0;
  padding: 4px 4px 0 8px;
  gap: 0;
}

.nav-tabs .nav-link {
  background-color: transparent;
  border: 0;
  border-radius: 0;
  color: var(--oz-on-primary);
  font: 400 13px/20px var(--oz-font);
  padding: 8px 10px;
}

.nav-tabs .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.15);
  border: 0;
  color: #ffffff;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  background-color: var(--oz-surface);
  border: 0;
  color: var(--oz-ink);
  font-weight: 600;
}

.nav-tabs .nav-link .badge {
  background-color: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}

.nav-tabs .nav-link.active .badge {
  background-color: var(--oz-primary) !important;
  color: #ffffff !important;
}

/* Pills and underline navs stay flat and square. */
.nav-pills .nav-link.active {
  background-color: var(--oz-primary);
  color: var(--oz-on-primary);
}

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

.page-link {
  color: var(--oz-ink-muted);
  border-color: var(--oz-border);
}

/* ---------------------------------------------------------------- *
 * 12. Modals - .x-window-*: 2px blue frame, blue title, grey footer
 * ---------------------------------------------------------------- */
.modal-content {
  border: 2px solid var(--oz-primary);
  border-radius: 0;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.modal-header {
  background-color: var(--oz-primary);
  border-bottom: 0;
  padding: 6px 8px;
  min-height: 34px;
}

.modal-title {
  color: var(--oz-on-primary);
  font: 400 16px/20px var(--oz-font);
}

.modal-header .btn-close {
  filter: brightness(0) invert(1);
  opacity: 0.8;
}

.modal-header .btn-close:hover {
  opacity: 1;
}

/* .x-window-body-default */
.modal-body {
  background-color: var(--oz-surface);
  color: var(--oz-ink);
  font: 300 13px/21px var(--oz-font);
}

.modal-footer {
  background-color: var(--oz-surface-alt);
  border-top: 1px solid var(--oz-border);
  padding: 8px;
}

/* ---------------------------------------------------------------- *
 * 13. Menus and combo lists - .x-menu-*, .x-boundlist-*
 * ---------------------------------------------------------------- */
.dropdown-menu:not(.navbar-vertical .dropdown-menu),
.ts-dropdown {
  border: 1px solid var(--oz-border);
  border-radius: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  padding: 2px 0;
}

.dropdown-item {
  color: var(--oz-ink);
  font: 400 13px/20px var(--oz-font);
  padding: 5px 10px;
}

/* .x-menu-item-active / .x-boundlist-item-over */
.dropdown-item:hover,
.dropdown-item:focus,
.ts-dropdown .option.active {
  background-color: var(--oz-primary-hover-light);
  color: #ffffff;
}

/* .x-boundlist-selected */
.dropdown-item.active,
.ts-dropdown .option.selected {
  background-color: var(--oz-primary);
  color: #ffffff;
}

.ts-dropdown .option {
  font: 400 13px/30px var(--oz-font);
  padding: 0 10px;
}

/* ---------------------------------------------------------------- *
 * 14. Status colour - the product has no green, so ozmap.com's
 *     brand green stands in for "active/ok".
 * ---------------------------------------------------------------- */
.badge.bg-green,
.badge.bg-success,
.badge.text-bg-green,
.badge.text-bg-success {
  background-color: var(--oz-green) !important;
  color: #ffffff !important;
}

.badge {
  border-radius: 0;
  font: 400 11px/15px var(--oz-font);
  padding: 3px 6px;
}

.badge.bg-primary,
.badge.bg-blue,
.badge.text-bg-primary,
.badge.text-bg-blue {
  background-color: var(--oz-primary) !important;
  color: #ffffff !important;
}

.progress-bar {
  background-color: var(--oz-primary);
}

.alert {
  border-radius: 0;
  border: 1px solid var(--oz-border);
}

/* Footer matches .x-toolbar-default. */
.footer {
  background-color: var(--oz-surface);
  border-top: 1px solid var(--oz-border);
  color: var(--oz-ink-subtle);
  font-size: 12px;
}

/* ---------------------------------------------------------------- *
 * 15. Login - OZmap's own login page, in the product blue
 *
 * Geometry is lifted from the OZmap Keycloak theme (KcPage-*.css): a
 * 180deg gradient behind a 450px white card, 12px radius, 40px padding,
 * 4px controls, full-width submit at weight 700. That page is green
 * because OZmap's brand is green - the green login belongs to Keycloak.
 * OZDC keeps the product blue, so the three gradient stops are real
 * Triton blues (cited on the tokens) rather than tinted guesses.
 *
 * This is the only screen in OZDC that rounds a corner. Section 4 forces
 * `--oz-radius: 0` with !important, so every rule here needs !important
 * plus the `.page-center` ancestor to outrank it.
 * ---------------------------------------------------------------- */
html:has(.page-center),
html:has(.page-center) body {
  background: linear-gradient(
    180deg,
    var(--oz-login-grad-1) 0%,
    var(--oz-login-grad-2) 55%,
    var(--oz-login-grad-3) 100%
  );
}

html .page.page-center,
html[data-bs-theme='dark'] .page.page-center,
body[data-bs-theme='dark'] html[data-bs-theme='light'] .page.page-center {
  background: transparent !important;
}

.page-center .container-tight {
  max-width: var(--oz-login-width);
}

/* OZmap carries the wordmark INSIDE the card, above the fields; NetBox
   puts it outside, above the card, as two <img> plus an edition label.
   Drop NetBox's block and draw the horizontal mark on the first
   .card-body instead - dark variant, since the card is white in both
   colour modes. */
.page-center .container-tight > .text-center:first-child {
  display: none !important;
}

.page-center .card-body:first-child::before {
  content: '';
  display: block;
  height: 44px;
  margin-bottom: 1.5rem;
  background: url('ozdc-logo-dark.svg') center / contain no-repeat;
}

/* The card: white, soft, rounded - the one rounded surface in OZDC. */
.page-center .card {
  border: 0;
  border-radius: var(--oz-login-radius) !important;
  box-shadow: var(--oz-login-shadow);
  background: var(--oz-login-card-bg);
}

/* Two .card-body siblings straddle the "Or" divider, so padding is split
   between them instead of applied twice. */
.page-center .card-body {
  padding: 1.5rem var(--oz-login-pad);
}
.page-center .card-body:first-child {
  padding-top: var(--oz-login-pad);
}
.page-center .card-body:last-child {
  padding-bottom: var(--oz-login-pad);
}

.page-center .card-body h2 {
  color: var(--oz-login-card-ink);
  font-size: 16px;
  font-weight: 600;
}

.page-center .form-label {
  color: var(--oz-login-card-ink);
  font-size: 13px;
  font-weight: 600;
}

.page-center .form-control {
  background-color: var(--oz-login-field-bg);
  border: 1px solid var(--oz-login-field-border);
  border-radius: var(--oz-login-control-radius) !important;
  padding: 10px;
  color: var(--oz-login-card-ink);
}

.page-center .form-control:focus {
  background-color: var(--oz-login-card-bg);
  border-color: var(--oz-primary);
  box-shadow: 0 0 0 2px rgba(var(--oz-primary-rgb), 0.2);
}

/* Submit: full width, 12px tall, bold - `#kc-login`. */
.page-center .btn-primary {
  background-color: var(--oz-primary);
  border-color: var(--oz-primary);
  border-radius: var(--oz-login-control-radius) !important;
  color: var(--oz-login-card-bg);
  padding: 12px;
  font-weight: 700;
  margin-top: 0.5rem;
}

.page-center .btn-primary:hover,
.page-center .btn-primary:focus {
  background-color: var(--oz-primary-over);
  border-color: var(--oz-primary-over-border);
  color: var(--oz-login-card-bg);
}

.page-center .btn-primary:active {
  background-color: var(--oz-primary-pressed) !important;
  border-color: var(--oz-primary-pressed-border) !important;
}

/* "Or" divider - `.social-divider`: a hairline with the label sitting in
   a gap. NetBox's .hr-text already builds the gap; only the colours and
   the type size come from OZmap. */
.page-center .hr-text {
  color: var(--oz-login-divider-ink);
  font-size: 14px;
  font-weight: 400;
  text-transform: none;
  --tblr-hr-text-bg: var(--oz-login-card-bg);
}

.page-center .hr-text::before,
.page-center .hr-text::after {
  background: var(--oz-login-divider);
}

/* SSO button - `.social-login-btn`: white, hairline border, never blue
   until hovered, so the primary action stays unambiguous. */
.page-center .sso-login-form .btn {
  background-color: var(--oz-login-card-bg);
  border: 1px solid var(--oz-login-field-border);
  border-radius: var(--oz-login-control-radius) !important;
  color: var(--oz-login-card-ink);
  padding: 12px;
  font-weight: 600;
}

.page-center .sso-login-form .btn:hover {
  background-color: var(--oz-login-sso-hover);
  border-color: #bbbbbb;
  color: var(--oz-login-card-ink);
}

.page-center a {
  color: var(--oz-primary-pressed);
}

/* OZmap's login has no dark variant, so neither does OZDC's: the card
   stays white whichever mode the user picked. Section 16 paints `.card`
   with `!important`, and it comes later in the file, so every rule here
   has to carry `!important` too - specificity alone does not settle it.
   Both scopes are repeated because Tabler emits the second one. */
html[data-bs-theme='dark'] .page-center .card,
body[data-bs-theme='dark'] html[data-bs-theme='light'] .page-center .card,
html[data-bs-theme='dark'] .page-center .card-body,
body[data-bs-theme='dark'] html[data-bs-theme='light'] .page-center .card-body {
  background: var(--oz-login-card-bg) !important;
  color: var(--oz-login-card-ink) !important;
}

html[data-bs-theme='dark'] .page-center .card-body h2,
body[data-bs-theme='dark'] html[data-bs-theme='light'] .page-center .card-body h2,
html[data-bs-theme='dark'] .page-center .form-label,
body[data-bs-theme='dark'] html[data-bs-theme='light'] .page-center .form-label {
  color: var(--oz-login-card-ink) !important;
}

html[data-bs-theme='dark'] .page-center .form-control,
body[data-bs-theme='dark'] html[data-bs-theme='light'] .page-center .form-control {
  background-color: var(--oz-login-field-bg) !important;
  border-color: var(--oz-login-field-border) !important;
  color: var(--oz-login-card-ink) !important;
}

html[data-bs-theme='dark'] .page-center .hr-text,
body[data-bs-theme='dark'] html[data-bs-theme='light'] .page-center .hr-text {
  color: var(--oz-login-divider-ink) !important;
  --tblr-hr-text-bg: var(--oz-login-card-bg);
}

html[data-bs-theme='dark'] .page-center .sso-login-form .btn,
body[data-bs-theme='dark'] html[data-bs-theme='light'] .page-center .sso-login-form .btn {
  background-color: var(--oz-login-card-bg) !important;
  border-color: var(--oz-login-field-border) !important;
  color: var(--oz-login-card-ink) !important;
}

/* ---------------------------------------------------------------- *
 * 16. Dark mode
 *
 * The OZmap product has no dark theme, so this is the one place the
 * website's palette leads: #131313 / #1e1e1e / #2d2d2d, with the
 * product blue kept intact.
 *
 * NetBox hard-codes its navy with literal hex plus !important on the
 * selectors below, including Tabler's second
 * `body[data-bs-theme=dark] …` scope - so each one is restated.
 * ---------------------------------------------------------------- */
html[data-bs-theme='dark'],
[data-bs-theme='dark'] {
  --tblr-primary: var(--oz-primary);
  --tblr-primary-rgb: var(--oz-primary-rgb);
  --tblr-body-bg: var(--oz-dark-0);
  --tblr-body-color: #d6d6d6;
  --tblr-border-color: #3a3a3a;
  --tblr-border-color-translucent: #3a3a3a;
  --tblr-bg-surface: var(--oz-dark-1);
  --tblr-bg-surface-secondary: var(--oz-dark-0);
  --tblr-bg-surface-tertiary: var(--oz-dark-2);
  --tblr-bg-forms: #262626;
  --tblr-link-color: var(--oz-primary-hover-light);
  --tblr-link-hover-color: #a9cdee;
  --tblr-secondary: #8c8c8c;

  --oz-ink: #d6d6d6;
  --oz-ink-muted: #b0b0b0;
  --oz-ink-subtle: #8c8c8c;
  --oz-border: #3a3a3a;
  --oz-surface: var(--oz-dark-1);
  --oz-surface-alt: var(--oz-dark-2);
  --oz-grid-line: #2f2f2f;
  --oz-row-alt: #232323;
  --oz-row-hover: #2b3742;
  --oz-row-selected: #4f4630;
  --oz-row-selected-border: #645838;

  --oz-tbtn-bg: #2d2d2d;
  --oz-tbtn-border: #3a3a3a;
  --oz-tbtn-bg-over: #383838;
  --oz-tbtn-border-over: #464646;
  --oz-tbtn-bg-pressed: #424242;
  --oz-tbtn-border-pressed: #505050;
}

html[data-bs-theme='dark'],
body[data-bs-theme='dark'] html[data-bs-theme='light'],
html[data-bs-theme='dark'] .navbar,
body[data-bs-theme='dark'] html[data-bs-theme='light'] .navbar,
html[data-bs-theme='dark'] .page-header,
body[data-bs-theme='dark'] html[data-bs-theme='light'] .page-header {
  background-color: var(--oz-dark-1);
}

html[data-bs-theme='dark'] .page,
body[data-bs-theme='dark'] html[data-bs-theme='light'] .page {
  background-color: var(--oz-dark-0) !important;
}

html[data-bs-theme='dark'] .card,
body[data-bs-theme='dark'] html[data-bs-theme='light'] .card {
  background: var(--oz-dark-1) !important;
}

html[data-bs-theme='dark'] .card > .card-header {
  background-color: var(--oz-primary-pressed) !important;
  border-bottom-color: var(--oz-primary-pressed);
}

html[data-bs-theme='dark'] .card {
  border-color: var(--oz-primary-pressed);
}

/* NetBox paints primary-button text navy; OZmap's blue needs light ink. */
html[data-bs-theme='dark'] .btn-primary,
body[data-bs-theme='dark'] html[data-bs-theme='light'] .btn-primary,
html[data-bs-theme='dark'] .bg-primary .card-title,
html[data-bs-theme='dark'] .page-link.active,
html[data-bs-theme='dark'] .active > .page-link {
  color: var(--oz-on-primary) !important;
}

html[data-bs-theme='dark'] .table > thead > tr > th,
body[data-bs-theme='dark'] html[data-bs-theme='light'] .table > thead > tr > th {
  background: var(--oz-dark-2) !important;
  color: #d6d6d6;
}

html[data-bs-theme='dark'] .table > tbody > tr:nth-of-type(even) > td {
  background-color: var(--oz-row-alt);
}

html[data-bs-theme='dark'] .navbar-vertical.navbar-expand-lg,
body[data-bs-theme='dark'] html[data-bs-theme='light'] .navbar-vertical.navbar-expand-lg {
  background: var(--oz-nav-bg-active);
}

html[data-bs-theme='dark'] .navbar-vertical.navbar-expand-lg .nav-item.dropdown.active:after,
body[data-bs-theme='dark'] html[data-bs-theme='light'] .navbar-vertical.navbar-expand-lg .nav-item.dropdown.active:after {
  border-color: var(--oz-primary) !important;
}

html[data-bs-theme='dark'] .navbar-vertical.navbar-expand-lg .text-secondary,
body[data-bs-theme='dark'] html[data-bs-theme='light'] .navbar-vertical.navbar-expand-lg .text-secondary {
  color: var(--oz-primary-hover-light) !important;
}

html[data-bs-theme='dark'] .navbar-vertical.navbar-expand-lg .nav-link-title,
html[data-bs-theme='dark'] .navbar-vertical.navbar-expand-lg .nav-link-icon,
html[data-bs-theme='dark'] .navbar-vertical.navbar-expand-lg .dropdown-item > a {
  color: var(--oz-nav-text) !important;
}

html[data-bs-theme='dark'] .navbar-vertical.navbar-expand-lg .nav-item.active > .nav-link .nav-link-title,
html[data-bs-theme='dark'] .navbar-vertical.navbar-expand-lg .nav-item.active > .nav-link .nav-link-icon,
html[data-bs-theme='dark'] .navbar-vertical.navbar-expand-lg .dropdown-item.active > a,
html[data-bs-theme='dark'] .navbar-vertical.navbar-expand-lg .dropdown-item:hover > a {
  color: var(--oz-nav-text-active) !important;
}

html[data-bs-theme='dark'] .navbar-vertical.navbar-expand-lg .dropdown-item.active,
body[data-bs-theme='dark'] html[data-bs-theme='light'] .navbar-vertical.navbar-expand-lg .dropdown-item.active {
  background-color: var(--oz-nav-bg) !important;
}

html[data-bs-theme='dark'] .footer .text-primary,
body[data-bs-theme='dark'] html[data-bs-theme='light'] .footer .text-primary {
  color: var(--oz-primary-hover-light) !important;
}

html[data-bs-theme='dark'] .footer,
html[data-bs-theme='dark'] .modal-body {
  background-color: var(--oz-dark-1);
}

/* Fields need to read as recessed against the card, which is also dark-1. */
html[data-bs-theme='dark'] .form-control,
html[data-bs-theme='dark'] .form-select,
html[data-bs-theme='dark'] .ts-control,
html[data-bs-theme='dark'] .input-group-text {
  background-color: #262626;
}

html[data-bs-theme='dark'] .modal-footer,
html[data-bs-theme='dark'] .card > .card-footer {
  background-color: var(--oz-dark-2);
}

/* ---------------------------------------------------------------- *
 * 17. Odds and ends
 * ---------------------------------------------------------------- */
.navbar .badge.bg-red,
.navbar .badge.bg-danger {
  background-color: var(--oz-badge) !important;
  color: var(--oz-ink) !important;
}

::selection {
  background-color: var(--oz-primary-hover-light);
  color: #ffffff;
}

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

/* ---------------------------------------------------------------- *
 * 18. White-label
 *
 * ISOLATED_DEPLOYMENT in netbox/config/branding.py already removes the
 * "Get Cloud / Get Enterprise" links and the GitHub + Slack footer
 * icons server-side. What is left here has no config switch.
 * ---------------------------------------------------------------- */

/* The release line under the sidebar menu is rewritten to the product
   version by the middleware, so it is kept - only the edition label goes. */
.navbar-vertical.navbar-expand-lg .netbox-edition,
.page-center .netbox-edition {
  display: none !important;
}

.navbar-vertical.navbar-expand-lg .navbar-collapse > .text-muted.text-center {
  color: var(--oz-ink-subtle) !important;
  font-size: 11px;
}

/* The footer "Docs" icon opens /static/docs/, the bundled NetBox manual. The
   bundle is deleted in the Dockerfile, so hide the link that would 404. */
.footer a[href$='/static/docs/'],
.footer li:has(> a[href$='/static/docs/']) {
  display: none !important;
}

/* The NetBox logos are replaced by background-image on their container;
   hide the <img> elements wherever they appear. */
img[src*='logo_netbox'],
img[src*='netbox_icon'],
img[alt*='NetBox'],
img.motif {
  display: none !important;
}