/*
 * AIR theme: NetBox's Tabler UI restyled to the shadcn "mira" preset
 * (b1D0dv72: neutral base colour, Inter, radius from AMP's .45rem scale) that AIM uses, so
 * the AIR pages read as the same product.
 *
 * NetBox 4.2 has no custom-CSS setting. configuration.py links this file from
 * BANNER_TOP and BANNER_LOGIN, which render on every page after netbox.css,
 * so a rule here beats a NetBox rule of the same specificity. NetBox also
 * hardcodes its teal in a handful of !important sidebar rules; those are
 * matched selector for selector below.
 *
 * Only colour, radius, borders, shadows and control sizing change. NetBox's
 * layout and markup are untouched. The DCI Planner reads the --tblr-*
 * variables (frontend/src/theme/netbox-tokens.ts), so it follows this file
 * with no change of its own.
 */

/* --- mira neutral tokens (oklch values from the preset, as hex) ------------ */
:root,
[data-bs-theme=light] {
  /* radius: AMP's scale (apps/web index.css, --radius .45rem) */
  --air-radius: .45rem;
  --air-radius-sm: calc(var(--air-radius) * .6);
  --air-radius-md: calc(var(--air-radius) * .8);
  --air-radius-lg: var(--air-radius);
  --air-radius-xl: calc(var(--air-radius) * 1.4);
  --air-bg: #ffffff;
  --air-fg: #0a0a0a;
  --air-card: #ffffff;
  --air-primary: #171717;
  --air-primary-rgb: 23, 23, 23;
  --air-primary-fg: #fafafa;
  --air-secondary: #f5f5f5;
  --air-secondary-hover: #ebebeb;
  --air-muted-fg: #737373;
  --air-border: #e5e5e5;
  --air-input: #e5e5e5;
  --air-ring: rgba(161, 161, 161, .5);
  --air-destructive: #e7000b;
  --air-destructive-rgb: 231, 0, 11;
  --air-sidebar: #fafafa;
  --air-sidebar-accent: #f0f0f0;
  --air-sidebar-tree: #d4d4d4;
  --air-table-head: #f5f5f5;
}

[data-bs-theme=dark],
body[data-bs-theme=dark] {
  --air-bg: #0a0a0a;
  --air-fg: #fafafa;
  --air-card: #171717;
  --air-primary: #e5e5e5;
  --air-primary-rgb: 229, 229, 229;
  --air-primary-fg: #171717;
  --air-secondary: #262626;
  --air-secondary-hover: #303030;
  --air-muted-fg: #a1a1a1;
  --air-border: rgba(255, 255, 255, .1);
  --air-input: rgba(255, 255, 255, .15);
  --air-ring: rgba(115, 115, 115, .5);
  --air-destructive: #ff6467;
  --air-destructive-rgb: 255, 100, 103;
  --air-sidebar: #171717;
  --air-sidebar-accent: #262626;
  --air-sidebar-tree: #3d3d3d; /* solid: the tree pieces overlap */
  --air-table-head: #212121;
}

/* --- Tabler variables -> mira tokens ------------------------------------- */
:root,
[data-bs-theme=light],
[data-bs-theme=dark],
body[data-bs-theme=dark] {
  --tblr-body-bg: var(--air-bg);
  --tblr-body-color: var(--air-fg);
  --tblr-emphasis-color: var(--air-fg);
  --tblr-heading-color: var(--air-fg);
  --tblr-bg-surface: var(--air-card);
  --tblr-bg-surface-secondary: var(--air-secondary);
  --tblr-bg-surface-tertiary: var(--air-bg);
  --tblr-bg-forms: transparent;
  --tblr-secondary: var(--air-muted-fg);
  --tblr-secondary-color: var(--air-muted-fg);
  --tblr-muted: var(--air-muted-fg);
  --tblr-border-color: var(--air-border);
  --tblr-border-color-translucent: var(--air-border);
  --tblr-shadow-card: none;
  --tblr-box-shadow-card: none;

  --tblr-primary: var(--air-primary);
  --tblr-primary-rgb: var(--air-primary-rgb);
  --tblr-primary-darken: var(--air-primary);
  --tblr-primary-fg: var(--air-primary-fg);
  --tblr-primary-lt: var(--air-secondary);
  --tblr-primary-bg-subtle: var(--air-secondary);
  --tblr-primary-border-subtle: var(--air-border);
  --tblr-primary-text-emphasis: var(--air-fg);
  --tblr-link-color: var(--air-fg);
  --tblr-link-color-rgb: var(--air-primary-rgb);
  --tblr-link-hover-color: var(--air-fg);
  --tblr-link-hover-color-rgb: var(--air-primary-rgb);
  --tblr-navbar-active-border-color: var(--air-primary);
  --tblr-focus-ring-color: var(--air-ring);

  /* radius: AMP's scale -- controls md, popovers lg, cards xl */
  --tblr-border-radius: var(--air-radius-md);
  --tblr-border-radius-sm: var(--air-radius-sm);
  --tblr-border-radius-lg: var(--air-radius-lg);
  --tblr-border-radius-xl: var(--air-radius-xl);
}

body {
  background: var(--air-bg);
  color: var(--air-fg);
  font-family: "Inter", system-ui, sans-serif;
}

::selection {
  background: rgba(var(--air-primary-rgb), .15);
}

/* NetBox's dark theme paints these navy with literal hex values (several
 * !important) instead of variables; each selector matches NetBox's. */
body[data-bs-theme=dark],
body[data-bs-theme=dark] .navbar,
body[data-bs-theme=dark] .page-header {
  background-color: var(--air-bg);
}
body[data-bs-theme=dark] .page,
body[data-bs-theme=dark] .page-tabs .nav-tabs .nav-link.active {
  background-color: var(--air-bg) !important;
}
body[data-bs-theme=dark] .card {
  background: var(--air-card) !important;
}
body[data-bs-theme=dark] .table thead th,
body[data-bs-theme=dark] .markdown > table thead th {
  background: var(--air-table-head) !important;
}
body[data-bs-theme=dark] .text-bg-primary {
  color: var(--air-primary-fg) !important;
}

/* --- links: foreground text, underline on hover (shadcn link style) ------ */
a {
  text-underline-offset: 4px;
}
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item):not(.page-link):hover {
  text-decoration: underline;
}
.table a:not(.btn),
.attr-table a:not(.btn) {
  font-weight: 500;
}

/* --- page header and tabs ------------------------------------------------- */
.page-header,
.page-tabs,
.page-body {
  background: var(--air-bg);
}
.page-title {
  font-weight: 600;
  letter-spacing: -.01em;
}
.nav-tabs {
  --tblr-nav-tabs-border-color: var(--air-border);
  --tblr-nav-tabs-link-active-color: var(--air-fg);
  --tblr-nav-tabs-link-active-border-color: var(--air-border) var(--air-border) var(--air-card);
}
.nav-tabs .nav-link {
  color: var(--air-muted-fg);
  font-weight: 500;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-link:hover {
  color: var(--air-fg);
}

/* --- cards: flat, hairline border, white header --------------------------- */
.card {
  --tblr-card-bg: var(--air-card);
  --tblr-card-border-color: var(--air-border);
  --tblr-card-border-radius: var(--air-radius-xl);
  --tblr-card-inner-border-radius: calc(var(--air-radius-xl) - 1px);
  --tblr-card-box-shadow: none;
  --tblr-card-cap-bg: var(--air-table-head);
  box-shadow: none;
}
/* Card titles sit on the same light band as table header rows. Headers
 * that carry their own colour (dashboard widgets' text-bg-*) keep it. */
.page-body .card .card-header:not([class*="text-bg-"]),
.card > .card-header:not([class*="text-bg-"]) {
  background: var(--air-table-head) !important;
}
.card > .card-header,
.card > h2.card-header,
.card > h5.card-header {
  font-size: .875rem;
  font-weight: 500;
  color: var(--air-fg);
  border-bottom-color: var(--air-border);
}

/* --- tables --------------------------------------------------------------- */
.table {
  --tblr-table-border-color: var(--air-border);
  --tblr-table-hover-bg: var(--air-secondary);
  --tblr-table-active-bg: var(--air-secondary);
  --tblr-table-striped-bg: var(--air-secondary);
}
.table thead th,
.table > :not(caption) > tr > th {
  color: var(--air-muted-fg);
  font-weight: 500;
  letter-spacing: 0;
  background: transparent;
}
/* Header row on a light band, so it reads apart from the rows under it. */
.table thead th,
.table > thead > tr > th,
.markdown > table thead th {
  background: var(--air-table-head);
  --tblr-table-bg-state: var(--air-table-head);
}
/* A table at the top of a card would square off the card's rounded corners
 * with its band; round the band's outer corners to match. */
.card:not(:has(> .card-header)) .table > thead > tr:first-child > th:first-child {
  border-top-left-radius: calc(var(--air-radius-xl) - 1px);
}
.card:not(:has(> .card-header)) .table > thead > tr:first-child > th:last-child {
  border-top-right-radius: calc(var(--air-radius-xl) - 1px);
}
.table tbody tr:hover > * {
  --tblr-table-bg-state: var(--air-secondary);
}

/* --- buttons ---------------------------------------------------------------
 * mira: compact (28px), 12px medium text, 8px radius. One solid primary;
 * NetBox's rainbow of action colours (Add/Import/Export/Clone/Edit/...)
 * become outline buttons, and the destructive ones a soft red. */
.btn {
  --tblr-btn-font-size: .8125rem;
  --tblr-btn-font-weight: 500;
  --tblr-btn-padding-y: .3125rem;
  --tblr-btn-padding-x: .625rem;
  --tblr-btn-border-radius: var(--air-radius-md);
  --tblr-btn-box-shadow: none;
  --tblr-btn-focus-box-shadow: 0 0 0 3px var(--air-ring);
  box-shadow: none;
}
.btn-sm,
.btn-group-sm > .btn {
  --tblr-btn-font-size: .75rem;
  --tblr-btn-padding-y: .1875rem;
  --tblr-btn-padding-x: .5rem;
  --tblr-btn-border-radius: var(--air-radius-md);
}
.btn:active:not([aria-haspopup]) {
  transform: translateY(1px);
}

.btn-primary,
.btn-dark,
.btn-black,
.text-bg-primary {
  --tblr-btn-color: var(--air-primary-fg);
  --tblr-btn-bg: var(--air-primary);
  --tblr-btn-border-color: var(--air-primary);
  --tblr-btn-hover-color: var(--air-primary-fg);
  --tblr-btn-hover-bg: rgba(var(--air-primary-rgb), .8);
  --tblr-btn-hover-border-color: transparent;
  --tblr-btn-active-color: var(--air-primary-fg);
  --tblr-btn-active-bg: rgba(var(--air-primary-rgb), .8);
  --tblr-btn-active-border-color: transparent;
  --tblr-btn-disabled-color: var(--air-primary-fg);
  --tblr-btn-disabled-bg: var(--air-primary);
}
.text-bg-primary {
  background-color: var(--air-primary) !important;
  color: var(--air-primary-fg) !important;
}

.btn-blue,
.btn-azure,
.btn-indigo,
.btn-purple,
.btn-pink,
.btn-orange,
.btn-yellow,
.btn-lime,
.btn-green,
.btn-teal,
.btn-cyan,
.btn-info,
.btn-success,
.btn-warning,
.btn-secondary,
.btn-gray,
.btn-muted,
.btn-white,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-dark {
  --tblr-btn-color: var(--air-fg);
  --tblr-btn-bg: transparent;
  --tblr-btn-border-color: var(--air-border);
  --tblr-btn-hover-color: var(--air-fg);
  --tblr-btn-hover-bg: var(--air-secondary);
  --tblr-btn-hover-border-color: var(--air-border);
  --tblr-btn-active-color: var(--air-fg);
  --tblr-btn-active-bg: var(--air-secondary);
  --tblr-btn-active-border-color: var(--air-border);
  --tblr-btn-disabled-color: var(--air-muted-fg);
  --tblr-btn-disabled-bg: transparent;
  --tblr-btn-disabled-border-color: var(--air-border);
}
[data-bs-theme=dark] :is(.btn-blue, .btn-azure, .btn-indigo, .btn-purple, .btn-pink, .btn-orange,
  .btn-yellow, .btn-lime, .btn-green, .btn-teal, .btn-cyan, .btn-info, .btn-success, .btn-warning,
  .btn-secondary, .btn-gray, .btn-muted, .btn-white, .btn-outline-primary, .btn-outline-secondary,
  .btn-outline-dark),
body[data-bs-theme=dark] :is(.btn-blue, .btn-azure, .btn-indigo, .btn-purple, .btn-pink, .btn-orange,
  .btn-yellow, .btn-lime, .btn-green, .btn-teal, .btn-cyan, .btn-info, .btn-success, .btn-warning,
  .btn-secondary, .btn-gray, .btn-muted, .btn-white, .btn-outline-primary, .btn-outline-secondary,
  .btn-outline-dark) {
  --tblr-btn-bg: rgba(255, 255, 255, .045);
  --tblr-btn-border-color: var(--air-input);
  --tblr-btn-hover-bg: rgba(255, 255, 255, .075);
  --tblr-btn-hover-border-color: var(--air-input);
}

.btn-red,
.btn-danger,
.btn-outline-danger {
  --tblr-btn-color: var(--air-destructive);
  --tblr-btn-bg: rgba(var(--air-destructive-rgb), .1);
  --tblr-btn-border-color: transparent;
  --tblr-btn-hover-color: var(--air-destructive);
  --tblr-btn-hover-bg: rgba(var(--air-destructive-rgb), .2);
  --tblr-btn-hover-border-color: transparent;
  --tblr-btn-active-color: var(--air-destructive);
  --tblr-btn-active-bg: rgba(var(--air-destructive-rgb), .2);
  --tblr-btn-active-border-color: transparent;
  --tblr-btn-disabled-color: var(--air-destructive);
  --tblr-btn-disabled-bg: rgba(var(--air-destructive-rgb), .1);
}

.btn-ghost-primary,
.btn-ghost-secondary,
.btn-link {
  --tblr-btn-color: var(--air-fg);
  --tblr-btn-hover-color: var(--air-fg);
  --tblr-btn-hover-bg: var(--air-secondary);
  --tblr-btn-active-bg: var(--air-secondary);
}

/* --- forms ---------------------------------------------------------------- */
.form-control,
.form-select,
.ts-wrapper .ts-control,
.input-group-text {
  border-color: var(--air-input);
  border-radius: var(--air-radius-md);
  box-shadow: none;
}
[data-bs-theme=dark] :is(.form-control, .form-select, .ts-wrapper .ts-control),
body[data-bs-theme=dark] :is(.form-control, .form-select, .ts-wrapper .ts-control) {
  background-color: rgba(255, 255, 255, .045);
}
.form-control:focus,
.form-select:focus,
.ts-wrapper.focus .ts-control {
  border-color: #a1a1a1;
  box-shadow: 0 0 0 3px var(--air-ring);
}
.form-check-input:checked {
  background-color: var(--air-primary);
  border-color: var(--air-primary);
}
.form-check-input:focus {
  border-color: #a1a1a1;
  box-shadow: 0 0 0 3px var(--air-ring);
}
.ts-wrapper.multi .ts-control > div.active {
  background: var(--air-primary) !important;
  color: var(--air-primary-fg) !important;
}
.ts-dropdown,
.dropdown-menu {
  --tblr-dropdown-border-color: var(--air-border);
  --tblr-dropdown-border-radius: var(--air-radius-lg);
  --tblr-dropdown-link-hover-bg: var(--air-secondary);
  --tblr-dropdown-link-active-bg: var(--air-secondary);
  --tblr-dropdown-link-active-color: var(--air-fg);
  --tblr-dropdown-box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
  border-color: var(--air-border);
}

/* --- badges: pill, medium weight (semantic colours kept) ------------------ */
.badge {
  --tblr-badge-border-radius: 999px;
  --tblr-badge-font-weight: 500;
  --tblr-badge-padding-x: .55em;
}
.status-primary {
  --tblr-status-color: var(--air-primary);
  --tblr-status-color-rgb: var(--air-primary-rgb);
}
.toast-primary {
  --tblr-toast-color: var(--air-primary);
}
.border-primary {
  border-color: var(--air-primary) !important;
}
.list-group-item.active {
  border-left-color: var(--air-primary) !important;
}
tr[data-virtual=true] {
  background-color: rgba(var(--air-primary-rgb), .06) !important;
}
.page-link:hover .page-item-title {
  color: var(--air-fg) !important;
}
.page-link {
  --tblr-pagination-active-bg: var(--air-primary);
  --tblr-pagination-active-border-color: var(--air-primary);
  --tblr-pagination-active-color: var(--air-primary-fg);
}

/* --- sidebar: shadcn sidebar (soft surface, muted group labels) ----------
 * NetBox colours these with body-scoped !important rules in teal (light) and
 * cyan (dark); each override matches that selector. */
.navbar {
  --tblr-navbar-active-border-color: var(--air-primary);
}
body .navbar-vertical.navbar-expand-lg,
body[data-bs-theme=dark] .navbar-vertical.navbar-expand-lg {
  background: var(--air-sidebar) !important;
  box-shadow: inset -1px 0 0 0 var(--air-border);
}
.navbar-vertical.navbar-expand-lg .navbar-collapse .text-secondary,
body[data-bs-theme=dark] .navbar-vertical.navbar-expand-lg .text-secondary {
  color: var(--air-muted-fg) !important;
  font-weight: 500;
  letter-spacing: 0;
}
.navbar-vertical.navbar-expand-lg .nav-item.dropdown.active:after,
body[data-bs-theme=dark] .navbar-vertical.navbar-expand-lg .nav-item.dropdown.active:after {
  border-color: var(--air-primary) !important;
}
.navbar-vertical.navbar-expand-lg .dropdown-item {
  border-radius: var(--air-radius-lg);
}
.navbar-vertical.navbar-expand-lg .dropdown-item:hover,
.navbar-vertical.navbar-expand-lg .dropdown-item.active {
  background-color: var(--air-sidebar-accent) !important;
}
.navbar-vertical.navbar-expand-lg .dropdown-item.active,
.navbar-vertical.navbar-expand-lg .dropdown-item.active a,
.navbar-vertical.navbar-expand-lg .dropdown-item.active .nav-link-title {
  font-weight: 500;
}

/* --- sidebar tree: an open menu's entries hang off a guide line ----------
 * A thin line drops from the menu's icon; each entry branches off it with a
 * rounded elbow, and the line ends in the last entry's elbow. NetBox renders
 * a menu's group labels and entries as flat siblings of one column
 * (navigation/menu.html), so every child draws its own piece: group labels
 * carry the straight line through and branch a divider off it that runs
 * beside the label (never under its letters), entries add the elbow, and the
 * column's last child (always an entry) stops at its elbow. Desktop sidebar only:
 * below lg NetBox hides the menu icons the line hangs from.
 *   --air-tree-x     guide line, under the centre of the menu icon
 *   --air-tree-indent where the entries' highlight starts (just before the
 *                    menu label) */
@media (min-width: 992px) {
  .navbar-vertical.navbar-expand-lg {
    --air-tree-x: 1.375rem;
    --air-tree-indent: 2.5rem;
    --air-tree-line: var(--air-sidebar-tree);
    --air-tree-radius: .5rem;
  }
  /* The tree replaces NetBox's accent bar on the open menu. */
  .navbar-vertical.navbar-expand-lg .nav-item.dropdown.active:after,
  body[data-bs-theme=dark] .navbar-vertical.navbar-expand-lg .nav-item.dropdown.active:after {
    display: none !important;
  }
  /* Open / closed indicator at the right of each menu heading. */
  .navbar-vertical.navbar-expand-lg .nav-link.dropdown-toggle:after {
    content: "\F0415"; /* mdi-plus */
    font-family: "Material Design Icons";
    font-size: 1rem;
    line-height: 1;
    width: auto;
    height: auto;
    margin-left: auto;
    border: 0 !important;
    transform: none !important;
    color: var(--air-muted-fg);
    display: inline-block;
  }
  .navbar-vertical.navbar-expand-lg .nav-link.dropdown-toggle[aria-expanded=true]:after {
    content: "\F0374"; /* mdi-minus */
  }
  .navbar-vertical.navbar-expand-lg .dropdown-menu-column > .dropdown-item {
    position: relative;
    margin-left: var(--air-tree-indent);
    margin-right: .75rem;
    padding-left: .75rem !important;
  }
  .navbar-vertical.navbar-expand-lg .dropdown-menu-column > .dropdown-item:before,
  .navbar-vertical.navbar-expand-lg .dropdown-menu-column > .dropdown-item:after {
    content: "";
    position: absolute;
    left: calc(var(--air-tree-x) - var(--air-tree-indent));
    pointer-events: none;
  }
  /* straight line through every entry but the last */
  .navbar-vertical.navbar-expand-lg .dropdown-menu-column > .dropdown-item:not(:last-child):after {
    top: 0;
    bottom: 0;
    border-left: 1px solid var(--air-tree-line);
  }
  /* Group label: its box starts at the sidebar edge so its background can
   * paint the guide line straight through; :before and :after are the
   * divider on either side of the label, sitting on its baseline. */
  .navbar-vertical.navbar-expand-lg .dropdown-menu-column > .text-secondary {
    display: flex;
    align-items: flex-end;
    gap: .375rem;
    margin-right: .75rem;
    padding-left: var(--air-tree-x) !important;
    background: linear-gradient(var(--air-tree-line), var(--air-tree-line)) no-repeat var(--air-tree-x) 0 / 1px 100%;
  }
  .navbar-vertical.navbar-expand-lg .dropdown-menu-column > .text-secondary:before,
  .navbar-vertical.navbar-expand-lg .dropdown-menu-column > .text-secondary:after {
    content: "";
    height: 1px;
    margin-bottom: .1875rem;
    background: var(--air-tree-line);
  }
  /* from the guide line to the label, which lines up with the entries' text */
  .navbar-vertical.navbar-expand-lg .dropdown-menu-column > .text-secondary:before {
    flex: 0 0 calc(var(--air-tree-indent) + .75rem - var(--air-tree-x) - .375rem);
  }
  .navbar-vertical.navbar-expand-lg .dropdown-menu-column > .text-secondary:after {
    flex: 1 1 0;
    min-width: .75rem;
  }
  /* Both pieces show one gradient, blue to violet to pink, fading out
   * towards the panel edge. It is pinned to the viewport (the sidebar is
   * fixed at the left edge), so the piece before the label and the piece
   * after it read as one line broken only by the label. */
  .navbar-vertical.navbar-expand-lg .dropdown-menu-column > .text-secondary:before,
  .navbar-vertical.navbar-expand-lg .dropdown-menu-column > .text-secondary:after {
    background: linear-gradient(to right, #3b82f6 var(--air-tree-x), #8b5cf6 7rem, #ec4899 12rem, transparent 17rem) fixed;
    opacity: .55;
  }
  body[data-bs-theme=dark] .navbar-vertical.navbar-expand-lg .dropdown-menu-column > .text-secondary:before,
  body[data-bs-theme=dark] .navbar-vertical.navbar-expand-lg .dropdown-menu-column > .text-secondary:after {
    opacity: .85;
  }
  /* the first label reaches up to just under the menu icon (the dark
   * selector outranks the dark group-label rule's padding below) */
  .navbar-vertical.navbar-expand-lg .dropdown-menu-column > .text-secondary:first-child,
  body[data-bs-theme=dark] .navbar-vertical.navbar-expand-lg .dropdown-menu-column > .text-secondary:first-child {
    margin-top: -.5rem;
    padding-top: 1.375rem !important;
  }
  /* each entry's elbow: down from the top, curving into the entry */
  .navbar-vertical.navbar-expand-lg .dropdown-menu-column > .dropdown-item:before {
    top: 0;
    height: 50%;
    width: calc(var(--air-tree-indent) - var(--air-tree-x) - .1875rem);
    border-left: 1px solid var(--air-tree-line);
    border-bottom: 1px solid var(--air-tree-line);
    border-bottom-left-radius: var(--air-tree-radius);
  }
}
/* Hierarchy: the menu heading leads, its group labels step back. NetBox
 * renders group labels bold at body size (fw-bold fs-5), which outweighs the
 * regular-weight menu heading above them; here they become small, spaced,
 * muted eyebrows and the heading gains weight, more again when open. */
.navbar-vertical.navbar-expand-lg .nav-link.dropdown-toggle .nav-link-title {
  font-weight: 500;
}
.navbar-vertical.navbar-expand-lg .nav-link.dropdown-toggle[aria-expanded=true] .nav-link-title {
  font-weight: 600;
  color: var(--air-fg);
}
.navbar-vertical.navbar-expand-lg .dropdown-menu-column > .text-secondary,
body[data-bs-theme=dark] .navbar-vertical.navbar-expand-lg .dropdown-menu-column > .text-secondary {
  font-size: .625rem !important;
  font-weight: 600 !important;
  line-height: 1rem;
  letter-spacing: .08em;
  color: color-mix(in srgb, var(--air-muted-fg) 35%, var(--air-fg)) !important;
  padding-top: .875rem !important;
  padding-bottom: .5rem !important;
}
header.navbar,
.page-wrapper > .navbar {
  background: var(--air-bg) !important;
  border-bottom: 1px solid var(--air-border);
  box-shadow: none;
}

/* --- netbox-air-approvals: its .air-ap tokens -> mira neutral --------------
 * Surfaces, borders, text and the accent follow the palette above; the
 * status pills and notices keep their semantic colours. approvals.css loads
 * after this file, so each selector carries one extra element (body) to win. */
body .air-ap,
body[data-bs-theme=dark] .air-ap {
  --ap-bg: var(--air-bg);
  --ap-surface: var(--air-card);
  --ap-surface-2: var(--air-secondary);
  --ap-border: var(--air-border);
  --ap-border-soft: var(--air-border);
  --ap-input-border: var(--air-input);
  --ap-text: var(--air-fg);
  --ap-muted: var(--air-muted-fg);
  --ap-th: var(--air-muted-fg);
  --ap-accent: var(--air-primary);
  --ap-accent-ink: var(--air-fg);
  --ap-accent-soft: var(--air-secondary);
  --ap-accent-wash: var(--air-secondary);
  --ap-avatar: var(--air-secondary);
  font-family: "Inter", system-ui, sans-serif;
}
body .air-ap .ap-btn-p {
  color: var(--air-primary-fg);
}

/* --- sizing: mira's compact scale ------------------------------------------
 * mira measured in AIM: 12px control and table text, 28px controls, ~36px
 * table rows, 10px badges, 8px control radius. Body copy stays 13px so
 * NetBox's long forms and detail tables stay readable. */
:root,
[data-bs-theme=light],
[data-bs-theme=dark],
body[data-bs-theme=dark] {
  --tblr-body-font-size: .8125rem;
}
body {
  font-size: .8125rem;
}

/* buttons: 28px default, 24px small */
body .btn {
  --tblr-btn-font-size: .75rem;
  --tblr-btn-line-height: 1.125rem;
  --tblr-btn-padding-y: .25rem;
  --tblr-btn-padding-x: .5rem;
  min-height: 1.75rem;
  border-radius: var(--air-radius-md);
  gap: .25rem;
}
body .btn-sm,
body .btn-group-sm > .btn {
  --tblr-btn-font-size: .75rem;
  --tblr-btn-padding-y: .125rem;
  --tblr-btn-padding-x: .5rem;
  min-height: 1.5rem;
  border-radius: var(--air-radius-md);
}
body .btn .mdi,
body .btn i[class*=mdi-] {
  font-size: .875rem;
  line-height: 1;
}
body .btn-icon {
  min-width: 1.75rem;
  padding: .25rem;
}

/* inputs, selects, TomSelect: 28px, 12px text */
body .form-control,
body .form-select,
body .input-group-text {
  font-size: .75rem;
  line-height: 1.125rem;
  padding: .25rem .625rem;
  min-height: 1.75rem;
}
body .form-select {
  padding-right: 2rem;
  background-position: right .5rem center;
}
body textarea.form-control {
  min-height: 4rem;
}
body .ts-wrapper .ts-control,
body .ts-wrapper.single .ts-control {
  font-size: .75rem;
  line-height: 1.125rem;
  min-height: 1.75rem;
  padding: .25rem 2rem .25rem .625rem;
}
body .ts-wrapper.multi .ts-control {
  padding: .1875rem .375rem;
}

/* TomSelect: NetBox's wrapper (.ts-wrapper, which inherits the select's
 * form-select class) is the visible box -- border, chevron, radius -- and
 * the .ts-control inside it is borderless. The control sizing above would
 * otherwise stack a 28px control inside the wrapper's border (30px fields,
 * taller than the inputs beside them) and double the padding. */
body .ts-wrapper.form-select {
  padding: 0;
  min-height: 1.75rem;
}
body .ts-wrapper.form-select .ts-control {
  min-height: calc(1.75rem - 2px);
  border: 0;
  border-radius: inherit;
  background-color: transparent;
  box-shadow: none;
}
/* TomSelect's typing input sizes to its placeholder, so a few chips push it
 * onto an empty second row of its own; let it shrink onto the chips' row. */
body .ts-wrapper.multi .ts-control > input {
  flex: 1 1 2.5rem;
  width: 2.5rem;
  min-width: 2.5rem !important;
}
body .ts-wrapper.form-select.focus {
  border-color: #a1a1a1;
  box-shadow: 0 0 0 3px var(--air-ring);
}
body .input-group > .input-group-text {
  background: var(--air-secondary);
  color: var(--air-muted-fg);
}
body .input-group > .input-group-text .mdi {
  font-size: .875rem;
  line-height: 1;
}

/* List pages' saved filter: one select with the filter icon inside it, as
 * wide as the quick search beside it (TomSelect otherwise shrinks to its
 * empty value). NetBox renders the select inside a .d-flex div, so that div
 * and the TomSelect wrapper in it both stretch to the group's width. */
body .input-group:has(> .input-group-text > .mdi-filter) {
  position: relative;
  flex-wrap: nowrap;
  width: 15rem;
}
body .input-group:has(> .input-group-text > .mdi-filter) > .d-flex {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 0 !important;
}
body .input-group:has(> .input-group-text > .mdi-filter) > .input-group-text {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 6;
  padding: 0 0 0 .625rem;
  background: transparent;
  border: 0;
  pointer-events: none;
}
body .input-group:has(> .input-group-text > .mdi-filter) .ts-wrapper {
  flex: 1 1 auto;
  width: 100%;
  margin-left: 0 !important;
  border-radius: var(--air-radius-md) !important;
}
body .input-group:has(> .input-group-text > .mdi-filter) .ts-wrapper .ts-control {
  padding-left: 1.875rem;
}

/* List pages' quick search: one box with a magnifier in front and the clear
 * button inside it. NetBox draws the clear button as a separate input-group
 * cell; it loses its border and fill, and the focus ring wraps the group. */
body .quicksearch {
  width: 15rem;
  position: relative;
  flex-wrap: nowrap;
  border-radius: var(--air-radius-md);
}
body .quicksearch:before {
  content: "\F0349"; /* mdi-magnify */
  font-family: "Material Design Icons";
  font-size: .875rem;
  line-height: 1;
  position: absolute;
  left: .625rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--air-muted-fg);
  pointer-events: none;
  z-index: 6;
}
body .quicksearch > #quicksearch {
  padding-left: 1.875rem;
  border-right: 0;
  box-shadow: none;
}
body .quicksearch > #quicksearch::-webkit-search-cancel-button {
  display: none;
}
body .quicksearch > .input-group-text {
  background: transparent;
  border-left: 0;
  margin-left: 0; /* Bootstrap's -1px overlap would double the dark fill */
  padding-left: .25rem;
  padding-right: .5rem;
}
/* Dark fields are a translucent fill; two cells side by side leave a seam
 * where they meet, so the group carries the fill and its cells stay clear. */
[data-bs-theme=dark] body .quicksearch,
body[data-bs-theme=dark] .quicksearch {
  background-color: rgba(255, 255, 255, .045);
}
[data-bs-theme=dark] body .quicksearch > :is(#quicksearch, .input-group-text),
body[data-bs-theme=dark] .quicksearch > :is(#quicksearch, .input-group-text) {
  background-color: transparent;
}
body .quicksearch:focus-within {
  box-shadow: 0 0 0 3px var(--air-ring);
}
/* NetBox paints a focused flat input group's borders teal, !important */
body .input-group-flat:focus-within .form-control,
body .input-group-flat:focus-within .input-group-text {
  border-color: #a1a1a1 !important;
}
body .ts-wrapper .ts-control > input {
  font-size: .75rem;
}
body .ts-dropdown,
body .dropdown-menu {
  font-size: .75rem;
}
body .dropdown-item {
  padding: .3125rem .625rem;
}
body .col-form-label,
body .form-label {
  font-size: .75rem;
  font-weight: 500;
}
body .col-form-label {
  padding-top: .3125rem;
  padding-bottom: .3125rem;
}
body .form-text {
  font-size: .6875rem;
}

/* tables: 12px, ~36px rows; header row smaller */
body .table {
  font-size: .75rem;
}
body .table > :not(caption) > * > * {
  padding: .4375rem .5rem;
}
body .table thead th,
body .table > thead > tr > th {
  font-size: .6875rem;
  text-transform: none;
  padding-top: .4375rem;
  padding-bottom: .4375rem;
}
body .table td .btn,
body .table td .btn-group > .btn {
  min-height: 1.5rem;
  --tblr-btn-padding-y: .0625rem;
  --tblr-btn-padding-x: .375rem;
}

/* cards: 14px titles, 16px padding */
body .card {
  --tblr-card-spacer-y: .75rem;
  --tblr-card-spacer-x: 1rem;
  --tblr-card-cap-padding-y: .625rem;
  --tblr-card-cap-padding-x: 1rem;
}
body .card > .card-header,
body .card > h2.card-header,
body .card > h5.card-header {
  font-size: .8125rem;
}

/* badges: pill, 10px */
body .badge {
  --tblr-badge-font-size: .625rem;
  --tblr-badge-padding-y: .125rem;
  --tblr-badge-padding-x: .5rem;
  line-height: .875rem;
}

/* page header and tabs */
body .page-title {
  font-size: 1.125rem;
}
body .nav-tabs .nav-link {
  display: inline-flex;
  align-items: center;
  font-size: .75rem;
  padding: .5rem .75rem;
}
body .nav-tabs .nav-link .badge {
  margin-left: .25rem;
}
/* A count badge makes its tab taller; a plain tab beside it would end short
 * of the strip's bottom border, so when active it shows the line under it
 * instead of covering it. Stretch every tab to the row's full height. */
body .nav-tabs > .nav-item {
  display: flex;
}
body .nav-tabs > .nav-item > .nav-link {
  flex: 1 1 auto;
}

/* sidebar: 13px items, 11px group labels, 28px rows */
body .navbar-vertical .navbar-nav .nav-link,
body .navbar-vertical .navbar-collapse .navbar-nav .nav-link {
  font-size: .8125rem;
  padding-top: .375rem;
  padding-bottom: .375rem;
}
body .navbar-vertical .navbar-collapse .dropdown-menu .dropdown-item {
  font-size: .8125rem;
  padding-top: .25rem;
  padding-bottom: .25rem;
}
body .navbar-vertical .navbar-collapse .text-secondary {
  font-size: .6875rem;
}

/* pagination, list groups, alerts */
body .page-link {
  font-size: .75rem;
}
body .list-group-item {
  font-size: .75rem;
  padding: .5rem .75rem;
}
body .alert {
  font-size: .75rem;
  padding: .625rem .875rem;
  border-radius: var(--air-radius-xl);
}

/* --- AIR select (air-select.js): mira Select for plugin pages -------------
 * The native <select> stays in the form but is visually hidden; the trigger
 * reuses .form-select (chevron, 28px) and the menu is a popover on <body>. */
select.air-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}
body .air-select-trigger {
  display: inline-flex;
  align-items: center;
  text-align: left;
  cursor: pointer;
  width: 100%;
  min-width: 0;
  color: var(--air-fg);
}
body .air-select-trigger.w-auto {
  width: auto;
}
body .air-select-trigger .air-select-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body .air-select-trigger.air-select-placeholder {
  color: var(--air-muted-fg);
}
body .air-select-trigger[aria-expanded=true] {
  border-color: #a1a1a1;
  box-shadow: 0 0 0 3px var(--air-ring);
}
body .air-select-trigger:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.air-select-menu {
  position: fixed;
  z-index: 1080;
  max-height: 280px;
  max-width: min(420px, calc(100vw - 16px));
  overflow-y: auto;
  padding: .25rem;
  background: var(--air-card);
  color: var(--air-fg);
  border: 1px solid var(--air-border);
  border-radius: var(--air-radius-lg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .04);
  font-family: "Inter", system-ui, sans-serif;
  font-size: .75rem;
}
.air-select-menu[hidden] {
  display: none;
}
.air-select-item {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 1.75rem;
  padding: .25rem 2rem .25rem .5rem;
  border-radius: var(--air-radius-md);
  cursor: default;
  user-select: none;
  white-space: nowrap;
}
.air-select-item.air-select-active {
  background: var(--air-secondary);
}
.air-select-item[aria-selected=true] {
  font-weight: 500;
}
.air-select-item[aria-selected=true]::after {
  content: "";
  position: absolute;
  right: .625rem;
  top: 50%;
  width: .4rem;
  height: .7rem;
  margin-top: -.42rem;
  border: solid currentColor;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.air-select-item[aria-disabled=true] {
  opacity: .5;
}

/* every other coloured outline / ghost button variant NetBox and the plugins
 * use (btn-outline-cyan, btn-ghost-info, ...): neutral outline / ghost */
body .btn[class*="btn-outline-"]:not(.btn-outline-danger):not(.btn-outline-red) {
  --tblr-btn-color: var(--air-fg);
  --tblr-btn-bg: transparent;
  --tblr-btn-border-color: var(--air-border);
  --tblr-btn-hover-color: var(--air-fg);
  --tblr-btn-hover-bg: var(--air-secondary);
  --tblr-btn-hover-border-color: var(--air-border);
  --tblr-btn-active-color: var(--air-fg);
  --tblr-btn-active-bg: var(--air-secondary);
  --tblr-btn-active-border-color: var(--air-border);
}
body .btn[class*="btn-ghost-"]:not(.btn-ghost-danger):not(.btn-ghost-red) {
  --tblr-btn-color: var(--air-fg);
  --tblr-btn-bg: transparent;
  --tblr-btn-border-color: transparent;
  --tblr-btn-hover-color: var(--air-fg);
  --tblr-btn-hover-bg: var(--air-secondary);
  --tblr-btn-hover-border-color: transparent;
  --tblr-btn-active-color: var(--air-fg);
  --tblr-btn-active-bg: var(--air-secondary);
}
body .btn-ghost-danger,
body .btn-ghost-red {
  --tblr-btn-color: var(--air-destructive);
  --tblr-btn-hover-color: var(--air-destructive);
  --tblr-btn-hover-bg: rgba(var(--air-destructive-rgb), .1);
}

/* checkbox / radio: mira 16px, 4px radius (radio stays round) */
body .form-check-input {
  width: 1rem;
  height: 1rem;
  border-color: var(--air-input);
  border-radius: .25rem;
  box-shadow: none;
  background-size: .75rem;
}
body .form-check-input[type=checkbox] {
  border-radius: .25rem;
}
body .form-check-input[type=radio] {
  border-radius: 50%;
}
body .form-switch .form-check-input,
body .form-switch .form-check-input[type=checkbox] {
  width: 2rem;
  height: 1.125rem;
  border-radius: 999px;
  background-size: contain;
}
body .form-check {
  min-height: 1.25rem;
  font-size: .75rem;
}
/* dark mode's primary is near-white, so the tick and dot are drawn dark */
body[data-bs-theme=dark] .form-check-input:checked[type=checkbox] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23171717' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8.5l2.5 2.5l5.5 -5.5'/%3e%3c/svg%3e");
}
body[data-bs-theme=dark] .form-check-input:checked[type=radio] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23171717'/%3e%3c/svg%3e");
}
body[data-bs-theme=dark] .form-switch .form-check-input:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23171717'/%3e%3c/svg%3e");
}

/* NetBox's TomSelect dropdown drawn like the AIR select menu */
body .ts-dropdown {
  margin-top: 4px;
  padding: .25rem;
  border: 1px solid var(--air-border);
  border-radius: var(--air-radius-lg);
  background: var(--air-card);
  color: var(--air-fg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .04);
  font-size: .75rem;
}
body .ts-dropdown .ts-dropdown-content {
  max-height: 280px;
}
body .ts-dropdown .option,
body .ts-dropdown .no-results,
body .ts-dropdown .optgroup-header {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 1.75rem;
  padding: .25rem 2rem .25rem .5rem;
  border-radius: var(--air-radius-md);
  font-size: .75rem;
}
body .ts-dropdown .optgroup-header {
  color: var(--air-muted-fg);
  font-weight: 500;
  font-size: .6875rem;
}
body .ts-dropdown .option.active,
body .ts-dropdown .option:hover {
  background: var(--air-secondary);
  color: var(--air-fg);
}
body .ts-dropdown .option.selected {
  font-weight: 500;
  background: transparent;
}
body .ts-dropdown .option.selected.active {
  background: var(--air-secondary);
}
body .ts-dropdown .option.selected::after {
  content: "";
  position: absolute;
  right: .625rem;
  top: 50%;
  width: .4rem;
  height: .7rem;
  margin-top: -.42rem;
  border: solid currentColor;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
body .ts-dropdown .dropdown-input-wrap {
  padding: 0 0 .25rem;
}
body .ts-dropdown .dropdown-input {
  font-size: .75rem;
  border-radius: var(--air-radius-md);
}

/* Tabler makes dropdowns inside .table-responsive position:static so row
 * menus can escape the scroll box, which sizes the menu against the whole
 * table instead of its button; with NetBox's inline-block items the
 * paginator's Per Page menu then stretches across the table. Stack the
 * items and size the menu to the widest one. */
body .table-responsive .dropdown-menu {
  width: max-content;
}
body .table-responsive .dropdown-menu > .dropdown-item {
  display: block;
}

/* Overlays on AMP's radius scale: dialogs xl like cards, popovers lg like
 * menus, tooltips md like controls. */
.modal {
  --tblr-modal-border-radius: var(--air-radius-xl);
  --tblr-modal-inner-border-radius: calc(var(--air-radius-xl) - 1px);
}
.popover {
  --tblr-popover-border-radius: var(--air-radius-lg);
}
.tooltip {
  --tblr-tooltip-border-radius: var(--air-radius-md);
}

/* Login page: the four-colour Microsoft mark (netbox_air_auth) at text size. */
img.sso-icon { height: 16px; width: 16px; vertical-align: -3px; }

/* Sidebar hide/show (sidebar.js): the top-bar button toggles
 * html.air-sidebar-hidden. Desktop only; below lg NetBox's own burger
 * already folds the menu. */
.air-sidebar-toggle {
  display: none;
}
@media (min-width: 992px) {
  .air-sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-right: .5rem;
    padding: 0;
    border: 0;
    border-radius: var(--air-radius-md);
    background: transparent;
    color: var(--tblr-secondary);
    font-size: 1.25rem;
  }
  .air-sidebar-toggle:hover,
  .air-sidebar-toggle:focus-visible {
    background: var(--air-sidebar-accent);
    color: var(--tblr-body-color);
  }
  html.air-sidebar-hidden .navbar-vertical.navbar-expand-lg {
    display: none !important;
  }
  html.air-sidebar-hidden .navbar-expand-lg.navbar-vertical ~ .navbar,
  html.air-sidebar-hidden .navbar-expand-lg.navbar-vertical ~ .page-wrapper {
    margin-left: 0 !important;
  }
}

/* Top bar (page-header.js): sidebar toggle, then the page's breadcrumb, then
 * search on the right before the docs links and user menu. NetBox shows this
 * bar from lg up only; below that its mobile header is unchanged. */
header.navbar > .container-fluid {
  flex-wrap: nowrap;
  gap: .25rem;
}
header.navbar .air-crumbs {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  padding-left: .75rem;
  margin-right: 1rem;
  border-left: 1px solid var(--air-border);
}
header.navbar .air-crumbs .breadcrumb {
  --tblr-breadcrumb-divider: "›";
  flex-wrap: nowrap;
  min-width: 0;
  margin: 0;
  padding: 0;
  font-size: .8125rem;
  white-space: nowrap;
}
header.navbar .air-crumbs .breadcrumb-item {
  min-width: 0;
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
header.navbar .air-crumbs .breadcrumb-item,
header.navbar .air-crumbs .breadcrumb-item a,
header.navbar .air-crumbs .breadcrumb-item + .breadcrumb-item::before {
  color: var(--air-muted-fg);
}
header.navbar .air-crumbs .breadcrumb-item a:hover {
  color: var(--air-fg);
}
header.navbar .air-crumbs .breadcrumb-item.active {
  flex: 0 1 auto;
  max-width: 28rem;
  color: var(--air-fg);
  font-weight: 500;
}
/* Menu and group crumbs open a menu of their pages (page-header.js). */
header.navbar .air-crumbs .air-crumb-menu {
  overflow: visible;
  flex: 0 0 auto;
}
header.navbar .air-crumbs .air-crumb-btn {
  display: inline-flex;
  align-items: center;
  gap: .125rem;
  max-width: 14rem;
  margin: -.125rem -.375rem;
  padding: .125rem .375rem;
  border: 0;
  border-radius: .375rem;
  background: transparent;
  color: var(--air-muted-fg);
  font: inherit;
  line-height: inherit;
  cursor: pointer;
}
header.navbar .air-crumbs .air-crumb-btn > span {
  overflow: hidden;
  text-overflow: ellipsis;
}
header.navbar .air-crumbs .air-crumb-btn .mdi {
  font-size: .875rem;
  opacity: .7;
}
header.navbar .air-crumbs .air-crumb-btn:hover,
header.navbar .air-crumbs .air-crumb-btn[aria-expanded="true"] {
  background: var(--air-secondary);
  color: var(--air-fg);
}
header.navbar .air-crumbs .air-crumb-btn:focus-visible {
  outline: 2px solid var(--air-primary);
  outline-offset: 1px;
}
header.navbar .air-crumbs .air-crumb-dropdown {
  min-width: 12rem;
  max-height: min(70vh, 32rem);
  overflow-y: auto;
  font-size: .8125rem;
}
header.navbar .air-crumbs .air-crumb-dropdown .dropdown-item.active {
  font-weight: 500;
}
header.navbar #navbar-menu {
  flex: 0 0 auto !important;
  width: 16rem;
  margin-left: auto;
  margin-right: .5rem;
}
header.navbar #navbar-menu form {
  width: 100%;
}
header.navbar .air-search-kbd {
  left: auto !important;
  right: 0;
  pointer-events: none;
}
header.navbar .air-search-kbd kbd {
  padding: 0 .3125rem;
  border: 1px solid var(--air-border);
  border-radius: .25rem;
  background: var(--air-secondary);
  color: var(--air-muted-fg);
  font-size: .6875rem;
  line-height: 1.25rem;
  box-shadow: none;
}
header.navbar #navbar-menu input[name="q"] {
  padding-right: 2rem;
}
html.air-crumbs-top body .page-header > .container-fluid:has(.breadcrumb) {
  display: none !important;
}
@media (max-width: 1199.98px) {
  header.navbar .air-crumbs .breadcrumb-item:not(:first-child):not(:last-child) {
    display: none;
  }
  header.navbar #navbar-menu {
    width: 12rem;
  }
}

/* --- page header: one layout on every page (page-header.js) ---------------
 * NetBox's generic/_base.html header -- breadcrumb row, title + subtitle,
 * controls, tabs -- is shared by core pages and every AIR plugin page. It is
 * drawn as one bar: muted breadcrumb, a 24px title, one row of actions
 * (page-header.js folds Bookmark, Subscribe, Clone and Delete into a "More"
 * menu) and underline tabs on the bar's bottom edge. The bar sticks under
 * the top bar; once the page scrolls, html gets .air-head-compact and the
 * bar keeps only the title, actions and tabs. */
body .page-header {
  position: sticky;
  top: var(--air-topbar-h, 0px);
  z-index: 1010;
  padding: .75rem 0 0;
  background: var(--air-card);
  border-bottom: 1px solid var(--air-border);
}
body .page-header > .container-fluid,
body .page-header .page-tabs > .container-fluid,
body .page-body > .container-fluid {
  padding-left: 1rem;
  padding-right: 1rem;
}
/* tight header: 12px above the title (the header's own padding; NetBox's
 * mt-2 on the title row goes), 12px between the header and the content */
body .page-header > .container-fluid.mt-2 {
  margin-top: 0 !important;
}
body .page-body {
  margin-top: 0 !important;
}
body .page-body > .container-fluid.py-3 {
  padding-top: .75rem !important;
}
body .page-header .breadcrumb {
  --tblr-breadcrumb-divider: "›";
  margin: 0;
  font-size: .8125rem;
}
body .page-header .breadcrumb,
body .page-header .breadcrumb a,
body .page-header .breadcrumb-item + .breadcrumb-item::before {
  color: var(--air-muted-fg);
}
body .page-header .breadcrumb a:hover {
  color: var(--air-fg);
}
body .page-header > .container-fluid code {
  font-size: .75rem;
  color: var(--air-muted-fg);
}
body .page-header > .container-fluid > .d-flex.justify-content-between:not(.align-items-center) {
  align-items: center;
  gap: 1.5rem;
}
body .page-header .page-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.02em;
  overflow-wrap: anywhere; /* long names: evidence files, serials */
}
body .page-header .page-title + * {
  margin-top: .25rem;
  font-size: .8125rem;
  color: var(--air-muted-fg);
}
body .page-header .btn-list {
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: .5rem;
  margin: 0 !important;
}
body .page-header .btn-list > * {
  margin: 0;
}
body .page-header .btn-list > form {
  display: inline-flex;
}
/* title avatar (avatar.py + page-header.js): the main object pages only */
body .page-header .air-title-wrap {
  display: flex;
  align-items: center;
  gap: .875rem;
  min-width: 0;
}
body .page-header .air-avatar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: .75rem;
  border: 1px solid rgba(0, 0, 0, .06);
  font-size: 1.5rem;
  line-height: 1;
}
body .page-header .air-avatar-img {
  width: auto;
  min-width: 3.25rem;
  max-width: 7rem;
  padding: .25rem;
  background: var(--air-card);
  border-color: var(--air-border);
}
body .page-header .air-avatar-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
html.air-head-compact body .page-header .air-avatar {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  border-radius: .5rem;
  font-size: 1rem;
}
html.air-head-compact body .page-header .air-avatar-img {
  width: auto;
  max-width: 4rem;
  padding: .125rem;
}

/* NetBox's own "Help" (model documentation) button on edit pages: the AIR
 * Help button beside the title already opens the page's docs, so one Help. */
body .page-header .btn-list > a.btn:has(> i.mdi-help-circle) {
  display: none;
}
/* custom links: a second, quieter row under the actions */
body .page-header .btn-list + .d-flex .btn-list:not(:empty) {
  margin-top: .5rem !important;
}

/* tabs: underline, on the bar's bottom border */
body .page-header .page-tabs {
  margin-top: .5rem !important;
  background: transparent;
}
body .page-header .page-tabs:not(:has(.nav-link)) {
  display: none;
}
body .page-header:not(:has(.page-tabs .nav-link)) {
  padding-bottom: .75rem;
}
body .page-header .nav-tabs {
  gap: 1.5rem;
  border-bottom: 0;
}
body .page-header .nav-tabs > .nav-item > .nav-link {
  margin-bottom: -1px;
  padding: .4375rem 0;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent !important;
  color: var(--air-muted-fg);
  font-size: .8125rem;
}
body .page-header .nav-tabs > .nav-item > .nav-link:hover {
  color: var(--air-fg);
}
body .page-header .nav-tabs > .nav-item > .nav-link.active {
  color: var(--air-fg);
  border-bottom-color: var(--air-fg);
}
body .page-header .nav-tabs .nav-link .badge {
  background: var(--air-secondary) !important;
  color: var(--air-fg) !important;
}

/* the More menu */
body .page-header .air-more-btn {
  width: 2.25rem;
  padding-left: 0;
  padding-right: 0;
  justify-content: center;
}
body .page-header .air-more .dropdown-menu form {
  display: block;
}
body .page-header .air-more .dropdown-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
}
body .page-header .air-more .dropdown-item:hover {
  background: var(--air-secondary);
}
body .page-header .air-more .dropdown-item.air-more-danger {
  color: var(--air-destructive);
}

/* compact (scrolled): title, actions and tabs only. The header sits in the
 * page flow, so the browser's scroll anchoring would move the scroll
 * position by the height it loses or gains and bounce it between the two
 * states; turn anchoring off for pages that have it. */
html:has(body .page-header) {
  overflow-anchor: none;
}
html.air-head-compact body .page-header {
  padding-top: .5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
html.air-head-compact body .page-header > .text-center,
html.air-head-compact body .page-header > .alert,
html.air-head-compact body .page-header > .container-fluid:has(.breadcrumb),
html.air-head-compact body .page-header .page-title + *,
html.air-head-compact body .page-header .btn-list + .d-flex {
  display: none !important;
}
html.air-head-compact body .page-header > .container-fluid.mt-2 {
  margin-top: 0 !important;
}
html.air-head-compact body .page-header .page-title {
  font-size: 1.0625rem;
}
html.air-head-compact body .page-header .page-tabs {
  margin-top: .375rem !important;
}
html.air-head-compact body .page-header:not(:has(.page-tabs .nav-link)) {
  padding-bottom: .5rem;
}

@media print {
  body .page-header {
    position: static;
  }
}

/* --- forms: labels on top, sections as cards, one centred column ---------
 * Every NetBox form field (form_helpers/render_field.html) is a .row with a
 * col-sm-3 label beside a .col input; inline groups use a col-3 label and
 * several .col inputs. Stack the label above the input(s) everywhere, so
 * each field reads top to bottom. Edit forms (and bulk edit) also sit in a
 * 760px column, each fieldset (.field-group) is a card, and the Cancel /
 * Save buttons ride in a bar stuck to the bottom of the window. */
body .page-body form .row:has(> .col-sm-3.text-lg-end),
body .page-body form .row:has(> label.col-form-label),
body .page-body form .row:has(> .col.offset-3) {
  flex-wrap: wrap;
  column-gap: .75rem;
  margin: 0 0 1rem 0;
}
body .page-body form .row > .col-sm-3.text-lg-end,
body .page-body form .row > label.col-form-label {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  margin: 0 0 .375rem 0;
  padding: 0;
  text-align: left !important;
}
body .page-body form .row > .col-sm-3.text-lg-end > label.col-form-label,
body .page-body form .row > label.col-form-label {
  padding: 0;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--air-fg);
}
body .page-body form .row:has(> .col-sm-3.text-lg-end) > .col,
body .page-body form .row:has(> label.col-form-label) > .col,
body .page-body form .row > .col.offset-3 {
  flex: 1 1 0;
  min-width: 0;
  margin-left: 0;
  padding: 0;
}
body .page-body form .row > .col > .form-text,
body .page-body form .row > .col > span.form-text {
  display: block;
  margin-top: .375rem;
  font-size: .75rem;
}
/* the tabs layout (e.g. "Parent" pick one of several) */
body .page-body form .field-group .row > .col.offset-3 > .nav-pills {
  margin-bottom: .5rem;
}

/* section cards */
body .page-body form .field-group {
  margin-bottom: 1.25rem !important;
  padding: 1.25rem 1.5rem .25rem;
  background: var(--air-card);
  border: 1px solid var(--air-border);
  border-radius: .75rem;
}
body .page-body form .field-group > .row:first-child:has(> h2) {
  margin: 0;
}
body .page-body form .field-group > .row:first-child > h2 {
  flex: 0 0 100%;
  max-width: 100%;
  margin: 0 0 1rem 0;
  padding: 0;
  font-size: .9375rem;
  font-weight: 600;
}
body .page-body form .field-group .hr-text {
  margin: .5rem 0 1rem;
}

/* the edit column and its button bar */
body .page-body form.object-edit,
body .page-body form.form-horizontal:has(> .field-group),
body .page-body form.form-horizontal:has(.field-group):not(:has(#object_list)) {
  max-width: 760px;
  margin: 1.5rem auto 0 !important;
}
body .page-body form.object-edit > .btn-float-group-right,
body .page-body form.form-horizontal:has(.field-group):not(:has(#object_list)) > .btn-float-group-right {
  position: sticky;
  bottom: 0;
  z-index: 5;
  float: none;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: .5rem;
  padding: .75rem 0;
  background: var(--air-bg);
  border-top: 1px solid var(--air-border);
}
/* Create & Add Another, then Create on the far right */
body .page-body form .btn-float-group-right > .btn-group {
  display: flex;
  flex-direction: row-reverse;
  gap: .5rem;
}
body .page-body form .btn-float-group-right > .btn-group > .btn {
  margin-left: 0 !important;
  border-radius: var(--tblr-btn-border-radius, .5rem) !important;
}

/* --- list filters: a side panel beside the results (forms.js) -----------
 * forms.js moves the Filters tab's form into aside.air-filter-panel next to
 * the table and adds a Filters button to the table controls. Applied
 * filters above the table become removable chips. */
body .air-list-layout {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
}
body .air-list-main {
  flex: 1 1 auto;
  min-width: 0;
}
body .air-filter-panel {
  flex: 0 0 300px;
  width: 300px;
  display: flex;
  flex-direction: column;
  background: var(--air-card);
  border: 1px solid var(--air-border);
  border-radius: .75rem;
}
html.air-filters-closed body .air-filter-panel {
  display: none;
}
body .air-filter-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--air-border);
}
body .air-filter-head h2 {
  margin: 0;
  font-size: .875rem;
  font-weight: 600;
}
body .air-filter-panel > form > .card {
  margin: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
body .air-filter-panel > form > .card > .card-body {
  display: block !important;
  padding: .875rem 1rem .25rem !important;
}
body .air-filter-panel > form > .card > .card-body > .col {
  width: 100%;
  padding: 0;
}
body .page-body .air-filter-panel form .field-group {
  margin-bottom: .5rem !important;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
body .page-body .air-filter-panel form .field-group > .row:first-child > h2 {
  margin: .25rem 0 .75rem;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--air-muted-fg);
}
body .page-body .air-filter-panel form .row:has(> .col-sm-3.text-lg-end) {
  margin-bottom: .75rem;
}
body .air-filter-panel .btn-float-group-right {
  position: static;
  float: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
  margin: 0 !important;
  padding: .75rem 1rem;
  border-top: 1px solid var(--air-border);
}
body .air-filter-panel .btn-float-group-right > .btn {
  justify-content: center;
}
body .air-filter-toggle .badge {
  margin-left: .25rem;
}
@media (max-width: 991.98px) {
  body .air-list-layout {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  body .air-filter-panel {
    flex-basis: auto;
    width: 100%;
  }
}

/* applied filters: chips */
body #object-list > .mb-3 > a.badge.rounded-pill {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  height: 1.75rem;
  margin: 0 .375rem .375rem 0;
  padding: 0 .75rem 0 .625rem;
  font-size: .75rem;
  font-weight: 500;
  line-height: 1;
  background: var(--air-card) !important;
  color: var(--air-fg) !important;
  border: 1px solid var(--air-border);
  border-radius: 999px;
}
body #object-list > .mb-3 > a.badge.rounded-pill:hover {
  background: var(--air-secondary) !important;
  text-decoration: none;
}
body #object-list > .mb-3 > a.badge.rounded-pill.text-bg-danger {
  border-color: transparent;
  background: transparent !important;
  color: var(--air-muted-fg) !important;
  text-decoration: underline;
}