:root {
  --bs-font-sans-serif: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  --bs-body-bg: #f5f5f9;
  --bs-body-bg-rgb: 245, 245, 249;
  --bs-body-color: #646e78;
  --bs-primary: #696cff;
  --bs-primary-rgb: 105, 108, 255;
  --bs-link-color: #696cff;
  --bs-link-color-rgb: 105, 108, 255;
  --bs-link-hover-color: #5f61e6;
  --bs-link-hover-color-rgb: 95, 97, 230;
  --bs-border-color: rgba(56, 65, 81, .13);
  --bs-border-color-translucent: rgba(56, 65, 81, .13);
  --bs-card-bg: #ffffff;
  --bs-card-border-width: 0px;

  --heading-color: #384551;
  --shell-shadow-sm: 0 2px 6px 0 rgba(34, 48, 62, .08);
  --shell-shadow-md: 0 3px 8px 0 rgba(34, 48, 62, .1);
  --shell-surface-bg: #ffffff;
  --menu-active-bg: rgba(105, 108, 255, .16);
  --menu-active-color: #696cff;
  --menu-hover-bg: rgba(105, 108, 255, .06);
}

[data-bs-theme="dark"] {
  --bs-body-bg: #384551;
  --bs-body-bg-rgb: 56, 69, 81;
  --bs-body-color: #bdc1c5;
  --bs-border-color: rgba(189, 193, 197, .13);
  --bs-border-color-translucent: rgba(189, 193, 197, .13);
  --bs-card-bg: #434f5b;

  --heading-color: #bdc1c5;
  --shell-shadow-sm: 0 2px 6px 0 rgba(15, 20, 25, .3);
  --shell-shadow-md: 0 3px 8px 0 rgba(15, 20, 25, .3);
  --shell-surface-bg: #434f5b;
}

body {
  background-color: var(--bs-body-bg);
}

h1, h2, h3, h4, h5, h6, .card-title, label, .form-label {
  color: var(--heading-color);
}

a {
  text-decoration: none;
}

/* Bootstrap's own .card rule sets --bs-card-bg: var(--bs-body-bg) on itself, and a
   directly-matching declaration always beats one merely inherited from :root - so the
   --bs-card-bg set up there never actually reaches the card. Redeclaring it here, on
   the same selector Bootstrap uses, is what makes it stick. */
.card {
  --bs-card-bg: #ffffff;
  box-shadow: var(--shell-shadow-md);
  border-radius: .375rem;
}

[data-bs-theme="dark"] .card {
  --bs-card-bg: #434f5b;
}

.form-control, .form-select {
  border-color: var(--bs-border-color);
}

.table {
  --bs-table-bg: transparent;
}

/* Same reason as .card above: these are the handful of stock Bootstrap component rules
   that bake their accent color in as a literal hex value at build time instead of
   reading the --bs-primary custom property, so retinting the palette up in :root never
   reaches them - each needs its own direct override. */
.btn-primary {
  --bs-btn-bg: #696cff;
  --bs-btn-border-color: #696cff;
  --bs-btn-hover-bg: #5f61e6;
  --bs-btn-hover-border-color: #5f61e6;
  --bs-btn-active-bg: #5457cf;
  --bs-btn-active-border-color: #5457cf;
  --bs-btn-disabled-bg: #696cff;
  --bs-btn-disabled-border-color: #696cff;
  --bs-btn-focus-shadow-rgb: 105, 108, 255;
}

.btn-outline-primary {
  --bs-btn-color: #696cff;
  --bs-btn-border-color: #696cff;
  --bs-btn-hover-bg: #696cff;
  --bs-btn-hover-border-color: #696cff;
  --bs-btn-active-bg: #696cff;
  --bs-btn-active-border-color: #696cff;
  --bs-btn-disabled-color: #696cff;
  --bs-btn-disabled-border-color: #696cff;
  --bs-btn-focus-shadow-rgb: 105, 108, 255;
}

.form-check-input:checked {
  background-color: #696cff;
  border-color: #696cff;
}

.nav-pills {
  --bs-nav-pills-link-active-bg: #696cff;
}

.pagination {
  --bs-pagination-active-bg: #696cff;
  --bs-pagination-active-border-color: #696cff;
  --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(105, 108, 255, .25);
}

.dropdown-menu {
  --bs-dropdown-link-active-bg: #696cff;
}

.list-group {
  --bs-list-group-active-bg: #696cff;
  --bs-list-group-active-border-color: #696cff;
}

/* ---- App shell: sidebar, topbar, content area, footer ------------------------------- */

.layout-wrapper {
  display: flex;
  min-height: 100vh;
  align-items: stretch;
}

.layout-container {
  display: flex;
  flex: 1;
  min-width: 0;
}

#layout-menu {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background-color: var(--shell-surface-bg);
  box-shadow: var(--shell-shadow-sm);
  display: flex;
  flex-direction: column;
  transition: width .25s ease;
  position: relative;
  z-index: 1040;
}

/* Collapsed, the rail is lifted out of the flex flow and the container holds its width
   open instead. That keeps the content column still while hovering can widen the menu
   back to full size on top of the page - expanding it in flow would shove the whole
   page sideways on every accidental pass of the mouse.
   site.js parks .layout-menu-hover on <html> while the pointer is over the rail, and
   site.css already guards its collapsed rules with :not(.layout-menu-hover); every
   collapsed rule here is guarded to match, otherwise hovering reveals the toggle inside
   a rail that never widens - and with the toggle hidden there is then no way at all to
   expand the menu again. */
html.layout-menu-collapsed .layout-container {
  position: relative;
  padding-inline-start: var(--sidebar-width-collapsed, 78px);
}

html.layout-menu-collapsed #layout-menu {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--sidebar-width-collapsed, 78px);
  z-index: 1045;
}

html.layout-menu-collapsed.layout-menu-hover #layout-menu {
  width: var(--sidebar-width);
  box-shadow: var(--shell-shadow-md);
}

.app-brand {
  display: flex;
  align-items: center;
  padding: 1.3rem 1.5rem;
  flex-shrink: 0;
}

.app-brand-link {
  display: flex;
  align-items: center;
  color: var(--heading-color);
  font-size: 1.0625rem;
  font-weight: 600;
  text-decoration: none;
}

.menu-inner {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: .5rem .75rem 1rem;
}

/* Thin, trackless, and invisible until the menu is hovered - a permanently drawn bar
   reads as clutter in a rail this narrow. scrollbar-width/-color cover Firefox; the
   ::-webkit- rules cover Chrome and Safari. */
.menu-inner {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.menu-inner:hover {
  scrollbar-color: rgba(134, 146, 163, .4) transparent;
}

.menu-inner::-webkit-scrollbar {
  width: 4px;
}

.menu-inner::-webkit-scrollbar-track {
  background: transparent;
}

.menu-inner::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 4px;
  transition: background .15s ease;
}

.menu-inner:hover::-webkit-scrollbar-thumb {
  background: rgba(134, 146, 163, .4);
}

/* The menu root is itself a <ul>, so a combined "ul.menu-inner, .menu-inner ul" reset
   outranks .menu-inner's own padding (element+class beats class) and flattens the whole
   rail against both edges. Keeping the two apart: the root keeps its gutter, nested
   submenu lists get the plain reset, and .menu-sub re-states its indent with enough
   specificity to beat the descendant selector below. */
/* No inline padding on the list itself - the links carry it as a margin instead, so each
   <li> still spans the full width of the rail and the active stripe below can sit flush
   against the sidebar's edge rather than 12px short of it. */
ul.menu-inner {
  list-style: none;
  margin: 0;
  padding: .5rem 0 1rem;
}

.menu-inner ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-header {
  padding: .875rem .75rem .5rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bs-body-color);
  opacity: .65;
  white-space: nowrap;
  overflow: hidden;
}

/* position: relative anchors the active stripe below. */
.menu-item {
  position: relative;
  margin: .125rem 0;
}

/* The inline gutter is a margin, not the list's padding - see ul.menu-inner above. */
.menu-link {
  display: flex;
  align-items: center;
  gap: .625rem;
  margin-inline: .75rem;
  padding: .5625rem .75rem;
  border-radius: .375rem;
  color: var(--heading-color);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  font-size: .9375rem;
  transition: background-color .15s ease, color .15s ease;
}

.menu-link:hover {
  background-color: var(--menu-hover-bg);
  color: var(--heading-color);
}

/* Selected state is a tint carrying the brand color rather than a solid fill: the label
   and icon go primary against a light wash of the same hue. */
.menu-item.active > .menu-link {
  background-color: var(--menu-active-bg);
  color: var(--menu-active-color);
}

.menu-item.active > .menu-link .menu-icon {
  color: var(--menu-active-color);
}

/* The stripe: pinned to the sidebar's inline edge, not the pill's, which is why the list
   gutter had to move onto the links as a margin. Only the selected leaf gets one - a
   parent group is marked by its open submenu, not by a second stripe. */
.menu-item.active::after {
  content: "";
  position: absolute;
  inset-inline-end: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 1.75rem;
  border-start-start-radius: 3px;
  border-end-start-radius: 3px;
  background-color: var(--bs-primary);
}

.menu-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.menu-icon svg, .menu-icon img {
  width: 100%;
  height: 100%;
}

.menu-item.active > .menu-link .menu-icon {
  color: var(--menu-active-color);
}

html.layout-menu-collapsed:not(.layout-menu-hover) .menu-link > div,
html.layout-menu-collapsed:not(.layout-menu-hover) .menu-header,
html.layout-menu-collapsed:not(.layout-menu-hover) .menu-link.menu-toggle::after {
  display: none;
}

/* Collapsed to the icon rail, the label is gone but .menu-link still lays out as a
   left-aligned row, leaving the icon off-centre and the active pill stretched the full
   width of the rail. Centre the glyph and drop the inline padding so the pill is a
   square tile inset by the rail's own gutter. */
html.layout-menu-collapsed:not(.layout-menu-hover) .menu-link {
  justify-content: center;
  padding-inline: 0;
}

/* An expanded group stays .open across the collapse, so its submenu kept rendering into
   the rail - indented 1.75rem inside a 78px column, which squeezed those items into a
   narrow off-centre stub. The rail shows one icon per top-level group; the children come
   back when it's hovered open. */
html.layout-menu-collapsed:not(.layout-menu-hover) .menu-sub {
  display: none;
}

/* Two classes deep so it outranks the ".menu-inner ul" reset above, which would
   otherwise flatten the submenu indent to zero. */
.menu-inner .menu-sub {
  list-style: none;
  margin: 0;
  padding-left: 1.75rem;
}

/* Child rows carry a dot where their parents carry an icon, so the labels in both levels
   still start on a common edge. It becomes a flex item, so .menu-link's own gap spaces
   it exactly like an icon would be. */
.menu-sub .menu-link::before {
  content: "";
  flex: 0 0 auto;
  width: .375rem;
  height: .375rem;
  border-radius: 50%;
  background-color: currentColor;
  opacity: .4;
}

.menu-sub .menu-item.active > .menu-link::before {
  opacity: 1;
}

.menu-item:not(.open) > .menu-sub {
  display: none;
}

/* The submenu group toggle (BuildSidebar emits <a class="menu-link menu-toggle"> with no
   separate icon element for it) gets its chevron as a pseudo-element rather than a real DOM
   node, and the rotation on open/close comes from ::after alone. */
.menu-link.menu-toggle {
  position: relative;
  padding-right: 1.75rem;
}

.menu-link.menu-toggle::after {
  content: "";
  position: absolute;
  right: .75rem;
  top: 50%;
  width: .5rem;
  height: .5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-65%) rotate(-45deg);
  transition: transform .15s ease;
  opacity: .6;
}

.menu-item.open > .menu-link.menu-toggle::after {
  transform: translateY(-35%) rotate(45deg);
}

.menu-divider {
  height: 1px;
  background-color: var(--bs-border-color);
  margin: .5rem .75rem;
}

.layout-menu-toggle {
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: .5rem .75rem;
  border-radius: .375rem;
  color: var(--heading-color);
}
.layout-menu-toggle:hover {
  background-color: rgba(var(--bs-primary-rgb), .08);
}

.layout-page {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.layout-navbar {
  height: var(--topbar-height);
  flex-shrink: 0;
  background-color: var(--shell-surface-bg);
  box-shadow: var(--shell-shadow-sm);
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  position: sticky;
  top: 0;
  z-index: 1030;
}

.content-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* A quiet closing line rather than a slab: no surface fill of its own, so it reads as part
   of the page background, with small muted text. */
.content-footer {
  background-color: transparent;
  padding: 0;
  margin-top: auto;
  font-size: .8125rem;
  color: var(--bs-secondary-color);
}

.footer-link {
  color: var(--bs-secondary-color);
}
.footer-link:hover {
  color: var(--bs-primary);
}

.layout-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, .5);
  z-index: 1035;
}

@media (max-width: 1199.98px) {
  #layout-menu {
    position: fixed;
    inset: 0 auto 0 0;
    transform: translateX(-100%);
    transition: transform .25s ease;
  }
  html.layout-menu-expanded #layout-menu {
    transform: translateX(0);
  }
  html.layout-menu-expanded .layout-overlay {
    display: block;
  }
}

/* ---- Shell classes the generated markup relies on ------------------------------------
   _Layout/_Sidebar emit a set of layout hooks that Bootstrap knows nothing about
   (.container-p-y, .navbar-detached, .navbar-nav-right, the bg-*-theme surface classes,
   and a 6-8 spacing step Bootstrap's 0-5 scale doesn't reach). With none of them
   defined the page still *structures* correctly - flex does that - but it renders with
   zero vertical rhythm and a full-bleed navbar, which is most of why the shell looked
   unfinished. These supply the missing geometry. */

.container-p-y {
  padding-top: 1.75rem;
  padding-bottom: 1.5rem;
}

/* Bootstrap's .container-xxl steps its cap down per breakpoint (1140px from 1200px up,
   1320px from 1400px), which is tighter than this design wants. One flat cap instead,
   so wide screens stop the content spreading without narrowing mid-range ones. */
.layout-page .container-xxl {
  max-width: 1440px;
  padding-inline: 1.625rem;
}

/* Sneat's signature topbar: a floating rounded surface inset from the content edges
   rather than a full-bleed bar. .layout-navbar above supplies the color/shadow; this
   detaches it. */
.navbar-detached {
  width: auto;
  border-radius: .375rem;
}

/* The floating navbar has to occupy exactly the content column's INNER box, or it drifts
   out of line with the cards below it. The content column is capped at 1440 with a 26px
   gutter, so that inner box is 1440 - 2*26 = 1388 wide - hence this cap.
   Its inline margin is the same max() the browser would need to reproduce the content
   column's own behaviour: while the column is narrower than its cap it is flush and the
   gutter is a flat 26px, and once the cap engages the column centres and the gutter grows
   to (available - 1388) / 2. A fixed 26px margin only matches the first case, which is why
   the navbar and the cards separated on wide screens. */
.layout-page .navbar-detached.container-xxl {
  max-width: 1388px;
  margin-block: 1rem 0;
  margin-inline: max(1.625rem, (100% - 1388px) / 2);
  padding-inline: 1.5rem;
}

/* Bootstrap's .navbar wraps by default and .navbar-expand-xl only turns that off from
   1200px up, so below xl the bar laid out as two lines: the hamburger on the first and
   the whole right-hand group pushed onto a second, which then spilled out of the bar's
   fixed height and over the breadcrumb. The toggle here opens the sidebar rather than a
   collapsing navbar menu, so there is nothing that ever needs to wrap. */
.layout-navbar {
  flex-wrap: nowrap;
}

/* min-width: 0 lets the search actually shrink. A flex item's floor is its content width
   unless this is set, which would keep the row wider than the screen no matter the
   flex-basis. */
.navbar-nav-right {
  flex: 1 1 auto;
  min-width: 0;
  gap: .5rem;
}

/* Narrow screens can't fit the scope picker as well as the field and the icon row, and
   the field is the part worth keeping - the picker keeps its last choice from
   localStorage (see global-search.js), so searching still works, just without switching
   entity until there's room for the control again. */
@media (max-width: 767.98px) {
  .global-search-entity {
    display: none;
  }
}

/* .bg-footer-theme is deliberately absent: the footer sits on the page background rather
   than on its own panel (see .content-footer). */
.bg-navbar-theme,
.bg-menu-theme {
  background-color: var(--shell-surface-bg);
}

.content-backdrop.show {
  position: fixed;
  inset: 0;
  z-index: 1039;
  background-color: rgba(0, 0, 0, .5);
}

/* Decorative fade at the top of the scrolling menu; inert until the menu scrolls. */
.menu-inner-shadow {
  display: none;
}

.footer-container {
  min-height: 0;
}

/* ---- Spacing scale ------------------------------------------------------------------
   The markup this generator emits was written against a LINEAR 4px scale, where step N
   is N * .25rem: 3 = 12px, 4 = 16px, 5 = 20px, 6 = 24px. Bootstrap's own scale is not
   linear - its 3, 4 and 5 are 16px, 24px and 48px - so on stock Bootstrap every
   .mb-3/.py-3/.mb-4 in these views renders noticeably larger than intended, which is
   most of why the spacing read as loose next to the reference design.
   Steps 0-2 already agree (0, 4px, 8px) and are left alone; 3 upwards are restated
   here, and 6+ simply don't exist in Bootstrap. !important matches the specificity
   Bootstrap's own utilities carry. */
.m-3  { margin: .75rem !important; }
.mt-3 { margin-top: .75rem !important; }
.mb-3 { margin-bottom: .75rem !important; }
.ms-3 { margin-inline-start: .75rem !important; }
.me-3 { margin-inline-end: .75rem !important; }
.mx-3 { margin-inline: .75rem !important; }
.my-3 { margin-block: .75rem !important; }
.p-3  { padding: .75rem !important; }
.pt-3 { padding-top: .75rem !important; }
.pb-3 { padding-bottom: .75rem !important; }
.ps-3 { padding-inline-start: .75rem !important; }
.pe-3 { padding-inline-end: .75rem !important; }
.px-3 { padding-inline: .75rem !important; }
.py-3 { padding-block: .75rem !important; }
.gap-3 { gap: .75rem !important; }

.m-4  { margin: 1rem !important; }
.mt-4 { margin-top: 1rem !important; }
.mb-4 { margin-bottom: 1rem !important; }
.ms-4 { margin-inline-start: 1rem !important; }
.me-4 { margin-inline-end: 1rem !important; }
.mx-4 { margin-inline: 1rem !important; }
.my-4 { margin-block: 1rem !important; }
.p-4  { padding: 1rem !important; }
.pt-4 { padding-top: 1rem !important; }
.pb-4 { padding-bottom: 1rem !important; }
.ps-4 { padding-inline-start: 1rem !important; }
.pe-4 { padding-inline-end: 1rem !important; }
.px-4 { padding-inline: 1rem !important; }
.py-4 { padding-block: 1rem !important; }
.gap-4 { gap: 1rem !important; }

.m-5  { margin: 1.25rem !important; }
.mt-5 { margin-top: 1.25rem !important; }
.mb-5 { margin-bottom: 1.25rem !important; }
.ms-5 { margin-inline-start: 1.25rem !important; }
.me-5 { margin-inline-end: 1.25rem !important; }
.mx-5 { margin-inline: 1.25rem !important; }
.my-5 { margin-block: 1.25rem !important; }
.p-5  { padding: 1.25rem !important; }
.pt-5 { padding-top: 1.25rem !important; }
.pb-5 { padding-bottom: 1.25rem !important; }
.ps-5 { padding-inline-start: 1.25rem !important; }
.pe-5 { padding-inline-end: 1.25rem !important; }
.px-5 { padding-inline: 1.25rem !important; }
.py-5 { padding-block: 1.25rem !important; }
.gap-5 { gap: 1.25rem !important; }

.m-6  { margin: 1.5rem !important; }
.mt-6 { margin-top: 1.5rem !important; }
.mb-6 { margin-bottom: 1.5rem !important; }
.ms-6 { margin-inline-start: 1.5rem !important; }
.me-6 { margin-inline-end: 1.5rem !important; }
.mx-6 { margin-inline: 1.5rem !important; }
.my-6 { margin-block: 1.5rem !important; }
.p-6  { padding: 1.5rem !important; }
.pt-6 { padding-top: 1.5rem !important; }
.pb-6 { padding-bottom: 1.5rem !important; }
.ps-6 { padding-inline-start: 1.5rem !important; }
.pe-6 { padding-inline-end: 1.5rem !important; }
.px-6 { padding-inline: 1.5rem !important; }
.py-6 { padding-block: 1.5rem !important; }
.gap-6 { gap: 1.5rem !important; }

@media (min-width: 576px) {
  .px-sm-6 { padding-inline: 1.5rem !important; }
}
@media (min-width: 1200px) {
  .me-xl-6 { margin-inline-end: 1.5rem !important; }
  .me-xl-0 { margin-inline-end: 0 !important; }
}

/* ---- Typography ---------------------------------------------------------------------
   Bootstrap's default scale (h1 = 2.5rem) is sized for marketing pages and reads far
   too large in a dense admin screen. */

h1, .h1 { font-size: 1.75rem; }
h2, .h2 { font-size: 1.5rem; }
h3, .h3 { font-size: 1.25rem; }
h4, .h4 { font-size: 1.125rem; }
h5, .h5 { font-size: 1rem; }
h6, .h6 { font-size: .9375rem; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 500;
  line-height: 1.375;
}

body {
  font-size: .9375rem;
  line-height: 1.375;
}

.text-large { font-size: 1.125rem; }

/* Icon spans in the sidebar/navbar; sized by their SVG child, this just aligns them. */
.tf-icons {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

.hide-arrow::after,
.hide-arrow > .dropdown-toggle::after {
  display: none !important;
}

/* ---- Component density --------------------------------------------------------------
   Bootstrap's stock paddings are looser than this theme's; these tighten cards, tables
   and controls to the same rhythm as the shell above. */

.card-body { padding: 1.5rem; }

.card-header {
  padding: 1.5rem;
  background-color: transparent;
  border-bottom: 0;
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--heading-color);
}

/* A header already supplies the card's top inset, so the body starts flush under it. */
.card-header + .card-body { padding-top: 0; }

.table {
  --bs-table-color: var(--bs-body-color);
  margin-bottom: 0;
}

.table > thead > tr > th {
  padding: .782rem 1.25rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--heading-color);
  border-bottom-color: var(--bs-border-color);
  white-space: nowrap;
}

.table > tbody > tr > td {
  padding: .782rem 1.25rem;
  border-bottom-color: var(--bs-border-color);
  vertical-align: middle;
}

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

/* bootstrap-table.min.css loads after this file and zeroes the <th> padding, moving it
   onto a .th-inner wrapper it injects. Left alone, headers indent by its 12px while the
   body cells above use 1.25rem, so every column header sits off from its own column.
   Matching the inline padding here re-aligns them; the vertical padding stays
   bootstrap-table's, and the extra inline-end room for the sort button is preserved. */
.table > thead > tr > th > .th-inner {
  padding-inline: 1.25rem;
}

.form-control, .form-select {
  padding: .4805rem .875rem;
  font-size: .9375rem;
  border-radius: .375rem;
}

.form-control:focus, .form-select:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 .25rem .05rem rgba(var(--bs-primary-rgb), .1);
}

.form-label {
  margin-bottom: .25rem;
  font-size: .8125rem;
  font-weight: 400;
}

.btn {
  --bs-btn-padding-y: .4812rem;
  --bs-btn-padding-x: 1.25rem;
  --bs-btn-font-size: .9375rem;
  --bs-btn-font-weight: 500;
  --bs-btn-border-radius: .375rem;
}

.btn-sm {
  --bs-btn-padding-y: .317rem;
  --bs-btn-padding-x: .75rem;
  --bs-btn-font-size: .8125rem;
  --bs-btn-border-radius: .25rem;
}

/* Tonal button: the theme's quiet secondary action - tinted fill, no border. */
.btn-label-secondary {
  --bs-btn-color: #8592a3;
  --bs-btn-bg: rgba(133, 146, 163, .16);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #8592a3;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #8592a3;
  --bs-btn-active-border-color: transparent;
}

.badge { font-weight: 500; }

.dropdown-menu {
  border: 0;
  box-shadow: var(--shell-shadow-md);
  font-size: .9375rem;
}

/* .dropdown-user sits on the <li>, not on the menu - putting a min-width on it stretches
   the list item itself and leaves a wide dead gap between the avatar and the navbar's
   right edge. The width belongs to the panel that drops out of it. */
.dropdown-user .dropdown-menu { min-width: 12rem; }

.breadcrumb {
  margin-bottom: 1rem;
  font-size: .9375rem;
}

.alert { border: 0; }

/* ---- Navbar controls ----------------------------------------------------------------
   The bar's trailing actions: equally-sized round icon buttons that only reveal a fill on
   hover, so the row reads as icons rather than as a toolbar of buttons. */

.navbar-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.375rem;
  height: 2.375rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--heading-color);
  background-color: transparent;
  transition: background-color .15s ease, color .15s ease;
}

.navbar-icon-btn:hover,
.navbar-icon-btn:focus-visible {
  background-color: rgba(var(--bs-primary-rgb), .08);
  color: var(--bs-primary);
}

.navbar-nav-right .navbar-nav {
  gap: .25rem;
}

/* Sneat's core.css sized .avatar; without it the initials span collapsed to its text box
   and the online dot had nothing square to pin to. */
.avatar {
  position: relative;
  display: inline-flex;
  width: 2.375rem;
  height: 2.375rem;
  flex-shrink: 0;
}

.avatar .avatar-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: .875rem;
  font-weight: 500;
  text-transform: uppercase;
}

.avatar-online::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: .625rem;
  height: .625rem;
  border-radius: 50%;
  background-color: #71dd37;
  box-shadow: 0 0 0 2px var(--shell-surface-bg);
}

/* ---- Auth pages (Login/Register) ----------------------------------------------------- */

.authentication-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.authentication-inner {
  width: 100%;
  max-width: 28rem;
}

.authentication-inner .card {
  border-radius: .5rem;
}