.menu .app-brand.demo {
  height: 64px;
  margin-top: 12px;
}

.app-brand-logo.demo svg {
  width: 22px;
  height: 38px;
}

.app-brand-text.demo {
  font-size: 1.75rem;
  letter-spacing: -0.5px;
}

/* ! For .layout-navbar-fixed added fix padding top to .layout-page */
/* Detached navbar */
.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) .layout-page {
  padding-top: 74px !important;
}
/* Default navbar */
.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
  padding-top: 64px !important;
}
.docs-page .layout-navbar-fixed.layout-wrapper:not(.layout-without-menu) .layout-page,
.docs-page .layout-menu-fixed.layout-wrapper:not(.layout-without-menu) .layout-page {
  padding-top: 62px !important;
}

/* Navbar page z-index issue solution */
.content-wrapper .navbar {
  z-index: auto;
}

/*
* Content
******************************************************************************/

.demo-blocks > * {
  display: block !important;
}

.demo-inline-spacing > * {
  margin: 1rem 0.375rem 0 0 !important;
}

/* ? .demo-vertical-spacing class is used to have vertical margins between elements. To remove margin-top from the first-child, use .demo-only-element class with .demo-vertical-spacing class. For example, we have used this class in forms-input-groups.html file. */
.demo-vertical-spacing > * {
  margin-top: 1rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-lg > * {
  margin-top: 1.875rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing-lg.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-xl > * {
  margin-top: 5rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing-xl.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.rtl-only {
  display: none !important;
  text-align: left !important;
  direction: ltr !important;
}

[dir='rtl'] .rtl-only {
  display: block !important;
}

/* Dropdown buttons going out of small screens */
@media (max-width: 576px) {
  #dropdown-variation-demo .btn-group .text-truncate {
    width: 231px;
    position: relative;
  }
  #dropdown-variation-demo .btn-group .text-truncate::after {
    position: absolute;
    top: 45%;
    right: 0.65rem;
  }
}

.layout-demo-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: 1rem;
}
.layout-demo-placeholder img {
  width: 900px;
}
.layout-demo-info {
  text-align: center;
  margin-top: 1rem;
}

.misc-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 1.5rem * 2);
  text-align: center;
}

/* Increase the z-index so it shows above the bootstrap Offcanvas backdrop. */
.swal2-container.swal2-backdrop-show {
  z-index: 1090;
}

.nowrap {
  white-space: nowrap;
}

.btn-group.btn-group-visible-border > .btn-check:checked:not(:first-child) + .btn {
  border-left: 1px solid rgb(251 241 241 / 42%) !important;
}
.table-condensed tbody tr td {
  padding: 5px 5px 5px 8px;
}
.table-condensed thead tr th, .table-condensed tr th {
  padding-left: 8px;
}

@keyframes spin-icon {
  to { transform: translateY(0%) rotate(360deg); }
}

.btn-htmx-bx-loading-icon.htmx-request::before {
  content: "";
  position: absolute;
  width: 1rem;
  height: 1rem;
  border: 2px solid;
  border-radius: 50%;
  border-right-color: transparent;
  animation: spin-icon 0.75s linear infinite;
  opacity: 1;
  color: var(--bs-body-color);
}

.btn-htmx-bx-loading-icon.htmx-request .bx, .dropdown.htmx-request .dropdown-toggle .bx {
  animation: spin-icon 2s linear infinite;
  opacity: .5;
}
.btn-htmx-bx-loading-icon.htmx-request, .dropdown.htmx-request .dropdown-toggle {
  pointer-events: none;
}


/* Prevent bs-container dropdown from expanding beyond the select width */
.bootstrap-select.bs-container .dropdown-menu {
  max-width: 100%;
}

/* Prevent border from growing in size on focus. */
.light-style .bootstrap-select .dropdown-toggle.show, .light-style .bootstrap-select .dropdown-toggle:focus,
.dark-style .bootstrap-select .dropdown-toggle.show, .dark-style .bootstrap-select .dropdown-toggle:focus {
  border-width: 1px;
}

.card {
  --bs-card-spacer-y: 1.2rem;
  --bs-card-spacer-x: 1.2rem;
}

.tooltip {
  --bs-tooltip-max-width: 400px;
}

.btn {
  box-shadow: none;
}

.table thead tr th {
  padding-block: 0.7rem;
}
.table > :not(caption) > * > * {
  padding: 0.7rem;
}
.table td {
  padding-top: .4rem;
  padding-bottom: .4rem;
}

.select2-container {
  z-index: 10000;
}

.popover {
  max-width:600px;
}
.popover-header, .popover-body {
  padding-top: .5rem;
}

.btn-xs {
  border-radius: 0.25rem;
}
/* Match standalone .btn-xs radius; the theme ships 0.125rem for grouped xs buttons.
   Setting the var (not border-radius) keeps Bootstrap's inner-corner squaring intact. */
.btn-group-xs > .btn {
  --bs-btn-border-radius: 0.25rem;
}
/* Icon-only dropdown toggles carry their own caret icon instead of the
   .dropdown-toggle class, and the .dropdown-menu that follows them makes them not
   :last-child — so Bootstrap squares off the group's right edge. Round it back. */
.btn-group > .btn[data-bs-toggle="dropdown"]:not(:last-child) {
  border-top-right-radius: var(--bs-btn-border-radius);
  border-bottom-right-radius: var(--bs-btn-border-radius);
}
.btn.btn-xs .bx {
  font-size: .8rem;
}
.btn-sm .bi {
  font-size: 1rem;
}

.btn:not(.btn-icon) .bx, .btn .bi {
  line-height: 1;
}

.btn:not(.btn-icon) .bx::before {
  /*vertical-align: -.125em;*/
}
.btn-icon.btn-xs {
  height: calc(1.29rem + calc(var(--bs-border-width) * 2))
}

.hover-dark:hover, .hover-dark .bx:hover {
  color: var(--bs-dark) !important;
}
.hover-secondary:hover, .hover-secondary .bx:hover {
  color: var(--bs-secondary) !important;
}
.hover-primary:hover {
  color: var(--bs-primary) !important;
}

/* An input group highlights as a single control on focus.

   The theme colours only the .form-control and .input-group-text, so a
   trailing .btn keeps its resting border and the highlight stops short of
   the group's edge. Every child takes the focus colour instead, which puts
   one continuous border around the group and leaves no seam half-lit.

   Widths stay at rest too. The theme's swap to a 2px border shaves padding
   to absorb the extra pixel, and a child carrying its own padding (the
   search partial sets one inline) cannot absorb it, so the group twitches.

   Each padding rule below repeats the size class of the theme rule it
   cancels. An unscoped one outranks the theme's .input-group-sm rules and
   hands small groups full-size padding, which inflates the whole group. */
.input-group:focus-within .form-control,
.input-group:focus-within .form-select,
.input-group:focus-within .input-group-text,
.input-group:focus-within .btn {
  border-color: var(--bs-primary) !important;
  border-width: var(--bs-border-width) !important;
  box-shadow: none;
}

.input-group:not(.input-group-sm):not(.input-group-lg):focus-within .form-control {
  padding: calc(0.543rem - var(--bs-border-width)) calc(0.9375rem - var(--bs-border-width));
}

.input-group:not(.input-group-sm):not(.input-group-lg):focus-within .input-group-text {
  padding: calc(0.543rem - 2px) calc(0.9375rem - var(--bs-border-width));
}

.input-group.input-group-sm:focus-within .form-control,
.input-group.input-group-sm:focus-within .input-group-text {
  padding: calc(0.3165rem - var(--bs-border-width)) calc(0.8125rem - var(--bs-border-width));
}

.input-group.input-group-lg:focus-within .form-control,
.input-group.input-group-lg:focus-within .input-group-text {
  padding: calc(0.7075rem - var(--bs-border-width)) calc(1.3125rem - var(--bs-border-width));
}

/* The theme slides the placeholder sideways on focus; focus moves nothing. */
.input-group:focus-within .form-control:focus::placeholder {
  transform: none;
}

/* Copied from the theme, which overlaps the seam by 2px to hide the focus
   border it doubles; a 1px border needs a 1px overlap. */
.input-group:focus-within > :not(:first-child):not(.dropdown-menu):not(.btn):not(.dropdown-menu + .form-control):not(.btn + .form-control):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  margin-inline-start: -1px;
}

.lh-1rem {
  line-height: 1rem !important;
}

.disabled-read-only:read-only {
  color: #a7acb2;
  background-color: rgba(34, 48, 62, 0.06);
  border-color: #cacdd1;
  opacity: 1;
  pointer-events: none !important;
}

.no-transform-on-hover:hover {
  transform: none !important;
}
.wsgi-editor-text-input {
  display: none;
}

.list-card-header {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  row-gap: 0.5rem;
  flex-wrap: wrap;
  overflow: auto;
}

.input-group:has(button):has(.dropdown.bootstrap-select) .bootstrap-select.form-control {
  padding: 0 !important;
}
.input-group:has(button):has(.dropdown.bootstrap-select) .bootstrap-select.form-control-sm .dropdown-toggle {
  padding: 0.35rem 0.5rem;
}


/* HTMX - Inline editable field */
.htmx-inline-editable-field {
  cursor: pointer;
  transition: background-color 0.2s;
  padding: 0.25rem 0.5rem;
  margin: -0.25rem -0.5rem;
  border-radius: 0.25rem;
}
.htmx-inline-editable-field:hover {
  background-color: rgba(0, 0, 0, 0.02);
}
.htmx-inline-editable-field .edit-icon {
  opacity: .25;
  transition: opacity .3s;
  color: var(--bs-secondary);
  font-size: 0.875rem;
  position: absolute;
  vertical-align: text-top;
}
.htmx-inline-editable-field:hover .edit-icon {
  opacity: 1;
}
.htmx-inline-editable-field .inline-field-spinner {
  display: none;
  position: absolute;
  vertical-align: text-top;
  color: var(--bs-secondary);
  width: 0.875rem;
  height: 0.875rem;
}
.htmx-inline-editable-field.htmx-request .edit-icon {
  display: none;
}
.htmx-inline-editable-field.htmx-request .inline-field-spinner {
  display: inline-block;
}
.inline-edit-form.htmx-request {
  opacity: 0.5;
  pointer-events: none;
}
/* .btn-sm padding sizes a button for a word of text; these hold a single glyph.
   .btn-label-* also leaves its top and bottom borders transparent while the theme
   paints only the sides, so the group's outline breaks where the buttons begin;
   draw the border the adjacent control uses on all four sides. */
.inline-edit-form .input-group .btn {
  padding-inline: 0.5rem;
  border: var(--bs-border-width) solid var(--bs-border-color) !important;
}
/* The theme drops the right border of a group's last button so a following
   .form-control can own the seam; nothing follows here, so the group would end
   open on the right. */
.inline-edit-form .input-group > .btn:last-of-type {
  border-right: var(--bs-border-width) solid var(--bs-border-color) !important;
}
/* .btn-label-* blanks its border again on hover and while pressed, which would
   punch a hole in the group's outline mid-interaction. */
.inline-edit-form .input-group .btn:hover,
.inline-edit-form .input-group .btn:active {
  border-color: var(--bs-border-color) !important;
}
.inline-edit-form .input-group > .btn:last-of-type:hover,
.inline-edit-form .input-group > .btn:last-of-type:active {
  border-right: var(--bs-border-width) solid var(--bs-border-color) !important;
}
.inline-edit-form .input-group:focus-within .btn,
.inline-edit-form .input-group:focus-within > .btn:last-of-type {
  border-color: var(--bs-primary) !important;
}
.inline-edit-form .input-group .btn .bx {
  font-size: 1rem;
}


.btn-blur {
  /*
  This CSS class is just a placeholder for auto-complete.
  The btn-blur class is used to blur buttons after click via javascript.
 */
}

.bg-gradient-primary-subtle {
  background: linear-gradient(135deg, rgba(13, 110, 253, 0.05) 0%, rgba(13, 110, 253, 0.15) 100%);
}
.bg-gradient-warning-subtle {
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.05) 0%, rgba(255, 193, 7, 0.15) 100%);
}
.bg-gradient-info-subtle {
  background: linear-gradient(135deg, rgba(13, 202, 240, 0.05) 0%, rgba(13, 202, 240, 0.15) 100%);
}
.bg-gradient-success-subtle {
  background: linear-gradient(135deg, rgba(25, 135, 84, 0.05) 0%, rgba(25, 135, 84, 0.15) 100%);
}
.bg-gradient-secondary-subtle {
  background: linear-gradient(135deg, rgba(108, 117, 125, 0.05) 0%, rgba(108, 117, 125, 0.15) 100%);
}

.hover-underline:hover {
  text-decoration: underline;
}
.hover-italic:hover {
  font-style: italic;
}
.tooltip-inner {
  text-align: left;
}

/* HTMX blur & shimmer loading overlay. Useful for swapping card-body content  */
.hx-loading-overlay.htmx-request {
  position: relative;
  overflow: hidden !important;
}
.hx-loading-overlay.htmx-request::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bs-body-bg);
  opacity: 0.85;
  backdrop-filter: blur(2px);
  z-index: 10;
}
.hx-loading-overlay.htmx-request::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 150%;
  height: 100%;
  background: linear-gradient(
          to right,
          transparent 0%,
          rgba(var(--bs-emphasis-color-rgb), 0.1) 50%,
          transparent 100%
  );
  z-index: 20;
  animation: shimmer 0.6s infinite;
}
@keyframes shimmer {
  0% {
    left: -150%;
  }
  100% {
    left: 100%;
  }
}

#body-loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: all; /* Prevent interactions with underlying UI */
}
#body-loading-overlay.htmx-request {
  display: flex !important;
}
#body-loading-overlay .spinner {
  border: 8px solid #f3f3f3;
  border-top: 8px solid #3498db;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: loading-overlay-spin 1s linear infinite;
}
/* Keyframes for the spinner animation */
@keyframes loading-overlay-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.bs-actionsbox {
  white-space: nowrap;
}
.form-control-sm.bootstrap-select .dropdown-toggle,
.form-control-sm.bootstrap-select .dropdown-toggle.show,
.form-control-sm.bootstrap-select .dropdown-toggle:focus {
  padding-right: 2rem !important;
}
.bootstrap-select .dropdown-toggle,
.bootstrap-select .dropdown-toggle.show,
.bootstrap-select .dropdown-toggle:focus {
  padding: calc(0.543rem - var(--bs-border-width)) 2rem calc(0.543rem - var(--bs-border-width)) 0.9375rem
}

:root {
  --menu-width: 0;
}

/* Custom toast positioning to align with side menu */
.toast-notification {
  left: calc(var(--menu-width, 260px) + 27px) !important;
  right: auto !important;
  top: 32px
}

.border-top-transparent {
  border-top: transparent !important;
}

.bg-success.toast, .bg-success.bs-toast {
  background-color: rgb(104 203 50 / 89%) !important;
}

.fit-content-popover {
  height: auto !important;
}
.fit-content-popover .popover-body {
  padding: 0;
}
.popover-transparent, .popover-transparent .popover-body {
  background-color: transparent;
}
.popover-bordered {
  border: 1px solid #dee2e6;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* Fix dark mode styles for apex charts */
.dark-style .apexcharts-yaxis-texts-g text,
.dark-style .apexcharts-xaxis-texts-g text {
  fill: #adb5bd;
}
.dark-style .apexcharts-yaxis-title text,
.dark-style .apexcharts-xaxis-title text {
  fill: #adb5bd;
}

.dark-style .apexcharts-datalabels-group text {
    fill: #adb5bd;
}

ul.errorlist {
  margin-bottom: 0;
  padding-left: 1.1rem;
}

/* Custom slash overlay for Boxicons */
.bx-slash {
  position: relative;
}
.bx-slash::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 3px;
  background-color: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
  transform-origin: center;
}

/* ---------------------------------------------------------------------
   Badges

   Two sizes app-wide: .badge and .badge-sm. Nothing else - no inline
   font-size/padding, no per-use flex or spacing utilities.

   Sizing is in `rem`, not the theme's `em`. Under `em` a badge inherits
   the font-size of whatever contains it, so the same badge renders at a
   different size in a table cell, a heading and a button. `rem` pins it
   to one size everywhere.

   inline-flex + gap centers the icon against the label and supplies the
   icon/text spacing, so icons need no `me-1` and badges need no
   `d-inline-flex align-items-center gap-1`. Colour is untouched: these
   work with `bg-label-*` and `bg-*` alike.
   -------------------------------------------------------------------- */
.badge {
  --bs-badge-padding-x: 0.425rem;
  --bs-badge-padding-y: 0.275rem;
  --bs-badge-font-size: 0.75rem;
  --bs-badge-font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  line-height: 1.2;
  vertical-align: middle;
  white-space: nowrap;
}

.badge-sm {
  --bs-badge-padding-x: 0.45rem;
  --bs-badge-padding-y: 0.15rem;
  --bs-badge-font-size: 0.6875rem;
  gap: 0.2rem;
}

.badge .bx,
.badge .bi,
.badge .fa {
  line-height: 1;
  flex-shrink: 0;
}

/* Boxicons hardcodes `font-size: 1.25rem`, which would dwarf the label and
   drive the badge's height; `em` scales the icon with whichever size is set.

   Explicit size classes must still beat this default. Boxicons' bx-sm/bx-lg
   and Bootstrap's fs-* are `!important`, so they win on their own; Font
   Awesome's are not, so exempt those elements by name instead. */
.badge :where(.bx, .bi, .fa):not(.fa-xs, .fa-sm, .fa-lg, .fa-xl, .fa-2xl,
                                 .fa-1x, .fa-2x, .fa-3x, .fa-4x, .fa-5x) {
  font-size: 1.15em;
}

/* The theme's .border-* classes are hardcoded to the full-strength brand hue
   in both light and dark stylesheets. On a tinted badge that outlines it more
   loudly than the fill - especially in dark mode, where a crisp 1px line reads
   far brighter than the antialiased label inside it. Deriving the border from
   the badge's own text colour keeps the two in the same family in either
   theme, and follows the darkened light-mode foregrounds automatically.
   `!important` is needed because .border-* carries it. */
.badge[class*="border"] {
  border-color: color-mix(in srgb, currentColor 75%, transparent) !important;
}

/* .bg-light is #dbdee0 in the light theme, and .badge's default label is
   white - about 1.3:1. The dark theme's #494a5d keeps white text readable,
   so only the light side takes a dark label (11.4:1). */
html.light-style .badge.bg-light {
  color: #2b2c40;
}

/* TomSelect: match form-control-sm sizing.
   TomSelect copies classes from the original <select>, so
   .form-control-sm lands on .ts-wrapper when the field has it. */
.ts-wrapper.form-control-sm .ts-control {
    min-height: 0;
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.5;
}

.ts-wrapper.form-control-sm .ts-control > input {
    font-size: 0.8125rem;
}

.ts-wrapper.form-control-sm .ts-control > .item {
    margin: 0;
}


/* ---------------------------------------------------------------------
   Dropdown panels: TomSelect matches .dropdown-menu

   TomSelect's bootstrap5 sheet paints its own panel from stock Bootstrap
   values - a hardcoded #343a40 text colour that survives into dark mode,
   plus --bs-tertiary-bg / --bs-border-color-translucent, which the theme
   never defines - so its menu reads as a different component from every
   other dropdown on the page. The values below are the theme's own
   --bs-dropdown-* set, restated because those variables live on
   .dropdown-menu itself and so cannot be inherited here.

   Both panels also carry a 1px border: the theme ships
   --bs-dropdown-border-width: 0, leaving menus to float on shadow alone,
   which loses their edge against a card or a modal.

   Every TomSelect rule below is prefixed with `html`. Any htmx fragment
   carrying a TomSelect field ships that widget's `form.media`, which
   re-injects tom-select.bootstrap5.css at the end of <head> - after
   main.css. Matching the stock selector's specificity is not enough
   once its sheet loads last; the extra element bumps ours above it.
   -------------------------------------------------------------------- */
.dropdown-menu {
  --bs-dropdown-border-width: 1px;
}

html.light-style .ts-dropdown {
  --ts-dd-bg: #fff;
  --ts-dd-border-color: #e4e6e8;
  --ts-dd-color: #384551;
  --ts-dd-muted-color: rgba(34, 48, 62, 0.6);
  --ts-dd-hover-bg: rgba(34, 48, 62, 0.06);
  --ts-dd-active-color: #696cff;
  --ts-dd-active-bg: rgba(105, 108, 255, 0.16);
  --ts-dd-shadow: 0 0.25rem 0.75rem 0 rgba(34, 48, 62, 0.14);
}

html.dark-style .ts-dropdown {
  --ts-dd-bg: #2b2c40;
  --ts-dd-border-color: #4e4f6c;
  --ts-dd-color: #d5d5e2;
  --ts-dd-muted-color: rgba(230, 230, 241, 0.6);
  --ts-dd-hover-bg: rgba(230, 230, 241, 0.06);
  --ts-dd-active-color: #696cff;
  --ts-dd-active-bg: rgba(105, 108, 255, 0.16);
  --ts-dd-shadow: 0 0.25rem 0.75rem 0 rgba(20, 20, 29, 0.24);
}

html .ts-dropdown,
html .ts-dropdown.form-control,
html .ts-dropdown.form-select {
  color: var(--ts-dd-color);
  background: var(--ts-dd-bg);
  border: 1px solid var(--ts-dd-border-color);
  border-radius: var(--bs-border-radius);
  box-shadow: var(--ts-dd-shadow);
}

html .ts-dropdown .optgroup-header {
  color: var(--ts-dd-muted-color);
  background: var(--ts-dd-bg);
}

html .ts-dropdown .optgroup::before {
  border-top-color: var(--ts-dd-border-color);
}

/* TomSelect marks the keyboard/pointer-highlighted row `.active` and an
   already-chosen row `.selected`; .dropdown-item's hover and .active map
   onto those two respectively. */
html .ts-dropdown .active {
  color: var(--ts-dd-color);
  background-color: var(--ts-dd-hover-bg);
}

html .ts-dropdown .selected,
html .ts-dropdown .selected.active {
  color: var(--ts-dd-active-color);
  background-color: var(--ts-dd-active-bg);
}

html .ts-dropdown .create,
html .ts-dropdown .no-results {
  color: var(--ts-dd-muted-color);
}

/* The control is styled as a .form-control by the theme, but TomSelect
   hardcodes the text colour it inherited from stock Bootstrap. */
html .ts-control,
html .ts-control input {
  color: var(--bs-body-color);
}


/* ---------------------------------------------------------------------
   Accessible brand palette (light mode)

   The vendored Sneat palette is tuned for dark surfaces: white text on its
   brand hues lands between 1.7:1 and 4.1:1, and the same hues used as text
   on white land equally low. Every badge, button and .text-* utility
   inherited that.

   Two strategies, because one does not suit all six hues:

   * success / warning / info are light enough that darkening them until
     white text passes turns them muddy - a lime that carries white text is
     no longer lime. These keep the theme's original background and take a
     dark label instead, so the hue survives intact.
   * primary / danger / secondary are already dark enough that white text
     needs only a small nudge, and their dark-text equivalents would read
     nearly black. These keep white text on a slightly darkened background.

   Colours are derived in OKLCh - hue held, chroma kept at the original
   value (clamped to the sRGB gamut), lightness moved only as far as the
   4.5:1 target demands. Scaling lightness in HLS instead drops chroma with
   it, which is what made the first pass look washed out.

   Scoped to .light-style: the stock palette already clears AA on the dark
   theme's surfaces, so unscoped these would regress it.

   The solid .btn-* rules need `!important` to beat the theme, which would
   otherwise let them hijack an element carrying both a solid and a tinted
   class (`btn-secondary btn-label-secondary`) - the theme's tint wins there
   on source order alone, so the :not() guards keep that intact.
   -------------------------------------------------------------------- */

/* success: background stays the theme's #71dd37; the label goes
   dark instead (5.64:1 resting, 4.56:1 hover) so the hue stays vivid. */
html.light-style .text-success { color: #378000 !important; }
html.light-style .bg-success,
html.light-style .btn-success:not([class*="btn-label-"]):not([class*="btn-outline-"]),
html.light-style .btn-success:not([class*="btn-label-"]):not([class*="btn-outline-"]):hover,
html.light-style .btn-success:not([class*="btn-label-"]):not([class*="btn-outline-"]):focus,
html.light-style .btn-success:not([class*="btn-label-"]):not([class*="btn-outline-"]):active {
  color: #1e4e00 !important;
}
html.light-style .bg-label-success,
html.light-style .btn-label-success,
html.light-style .btn-outline-success { color: #378000 !important; }
html.light-style .btn-outline-success { border-color: #378000 !important; }

/* warning: background stays the theme's #ffab00; the label goes
   dark instead (5.59:1 resting, 4.54:1 hover) so the hue stays vivid. */
html.light-style .text-warning { color: #986400 !important; }
html.light-style .bg-warning,
html.light-style .btn-warning:not([class*="btn-label-"]):not([class*="btn-outline-"]),
html.light-style .btn-warning:not([class*="btn-label-"]):not([class*="btn-outline-"]):hover,
html.light-style .btn-warning:not([class*="btn-label-"]):not([class*="btn-outline-"]):focus,
html.light-style .btn-warning:not([class*="btn-label-"]):not([class*="btn-outline-"]):active {
  color: #583800 !important;
}
html.light-style .bg-label-warning,
html.light-style .btn-label-warning,
html.light-style .btn-outline-warning { color: #986400 !important; }
html.light-style .btn-outline-warning { border-color: #986400 !important; }

/* info: background stays the theme's #03c3ec; the label goes
   dark instead (5.58:1 resting, 4.55:1 hover) so the hue stays vivid. */
html.light-style .text-info { color: #007791 !important; }
html.light-style .bg-info,
html.light-style .btn-info:not([class*="btn-label-"]):not([class*="btn-outline-"]),
html.light-style .btn-info:not([class*="btn-label-"]):not([class*="btn-outline-"]):hover,
html.light-style .btn-info:not([class*="btn-label-"]):not([class*="btn-outline-"]):focus,
html.light-style .btn-info:not([class*="btn-label-"]):not([class*="btn-outline-"]):active {
  color: #003e4d !important;
}
html.light-style .bg-label-info,
html.light-style .btn-label-info,
html.light-style .btn-outline-info { color: #007791 !important; }
html.light-style .btn-outline-info { border-color: #007791 !important; }

/* primary: #696cff -> #6263f5, white text (4.54:1) */
html.light-style {
  --bs-primary: #6263f5;
  --bs-primary-rgb: 98, 99, 245;
}
html.light-style .btn-primary:not([class*="btn-label-"]):not([class*="btn-outline-"]),
html.light-style .btn-primary:not([class*="btn-label-"]):not([class*="btn-outline-"]).disabled,
html.light-style .btn-primary:not([class*="btn-label-"]):not([class*="btn-outline-"]):disabled {
  background-color: #6263f5 !important;
  border-color: #6263f5 !important;
}
html.light-style .btn-primary:not([class*="btn-label-"]):not([class*="btn-outline-"]):hover,
html.light-style .btn-primary:not([class*="btn-label-"]):not([class*="btn-outline-"]):focus,
html.light-style .btn-primary:not([class*="btn-label-"]):not([class*="btn-outline-"]):active,
html.light-style .btn-primary:not([class*="btn-label-"]):not([class*="btn-outline-"]).active,
html.light-style .btn-check:checked + .btn-primary:not([class*="btn-label-"]):not([class*="btn-outline-"]),
html.light-style .show > .btn-primary:not([class*="btn-label-"]):not([class*="btn-outline-"]).dropdown-toggle {
  background-color: #4e48d8 !important;
  border-color: #4e48d8 !important;
}
html.light-style .bg-label-primary,
html.light-style .btn-label-primary,
html.light-style .btn-outline-primary { color: #5654e5 !important; }
html.light-style .btn-outline-primary { border-color: #5654e5 !important; }

/* danger: #ff3e1d -> #e52800, white text (4.53:1) */
html.light-style {
  --bs-danger: #e52800;
  --bs-danger-rgb: 229, 40, 0;
}
html.light-style .btn-danger:not([class*="btn-label-"]):not([class*="btn-outline-"]),
html.light-style .btn-danger:not([class*="btn-label-"]):not([class*="btn-outline-"]).disabled,
html.light-style .btn-danger:not([class*="btn-label-"]):not([class*="btn-outline-"]):disabled {
  background-color: #e52800 !important;
  border-color: #e52800 !important;
}
html.light-style .btn-danger:not([class*="btn-label-"]):not([class*="btn-outline-"]):hover,
html.light-style .btn-danger:not([class*="btn-label-"]):not([class*="btn-outline-"]):focus,
html.light-style .btn-danger:not([class*="btn-label-"]):not([class*="btn-outline-"]):active,
html.light-style .btn-danger:not([class*="btn-label-"]):not([class*="btn-outline-"]).active,
html.light-style .btn-check:checked + .btn-danger:not([class*="btn-label-"]):not([class*="btn-outline-"]),
html.light-style .show > .btn-danger:not([class*="btn-label-"]):not([class*="btn-outline-"]).dropdown-toggle {
  background-color: #bb1e00 !important;
  border-color: #bb1e00 !important;
}
html.light-style .bg-label-danger,
html.light-style .btn-label-danger,
html.light-style .btn-outline-danger { color: #ca2200 !important; }
html.light-style .btn-outline-danger { border-color: #ca2200 !important; }

/* secondary: #8592a3 -> #6b7787, white text (4.55:1) */
html.light-style {
  --bs-secondary: #6b7787;
  --bs-secondary-rgb: 107, 119, 135;
}
html.light-style .btn-secondary:not([class*="btn-label-"]):not([class*="btn-outline-"]),
html.light-style .btn-secondary:not([class*="btn-label-"]):not([class*="btn-outline-"]).disabled,
html.light-style .btn-secondary:not([class*="btn-label-"]):not([class*="btn-outline-"]):disabled {
  background-color: #6b7787 !important;
  border-color: #6b7787 !important;
}
html.light-style .btn-secondary:not([class*="btn-label-"]):not([class*="btn-outline-"]):hover,
html.light-style .btn-secondary:not([class*="btn-label-"]):not([class*="btn-outline-"]):focus,
html.light-style .btn-secondary:not([class*="btn-label-"]):not([class*="btn-outline-"]):active,
html.light-style .btn-secondary:not([class*="btn-label-"]):not([class*="btn-outline-"]).active,
html.light-style .btn-check:checked + .btn-secondary:not([class*="btn-label-"]):not([class*="btn-outline-"]),
html.light-style .show > .btn-secondary:not([class*="btn-label-"]):not([class*="btn-outline-"]).dropdown-toggle {
  background-color: #556070 !important;
  border-color: #556070 !important;
}
html.light-style .bg-label-secondary,
html.light-style .btn-label-secondary,
html.light-style .btn-outline-secondary { color: #616d7d !important; }
html.light-style .btn-outline-secondary { border-color: #616d7d !important; }

/* ---------------------------------------------------------------------
   Hover / focus / active states for the tinted button variants

   The palette rules above colour .btn-label-* and .btn-outline-* at
   (0,2,1), which outranks the theme's own (0,2,0) `color: #fff !important`
   on every interactive state. The label colour therefore survived into
   hover and focus, leaving the resting foreground on the theme's solid
   fill - 1.14:1 for primary, 2.30:1 for success.

   Restating each state at (0,3,1) hands the foreground back. Solid-group
   fills are darkened to the value that colour's .btn-* hover already uses,
   so a tinted button and a solid one of the same colour land identically.
   --------------------------------------------------------------------- */
html.light-style .btn-label-success:hover,
html.light-style .btn-label-success:focus,
html.light-style .btn-label-success.focus,
html.light-style .btn-label-success:focus-visible,
html.light-style .btn-label-success:active,
html.light-style .btn-label-success.active,
html.light-style .btn-label-success.show.dropdown-toggle,
html.light-style .btn-outline-success:hover,
html.light-style .btn-outline-success:focus,
html.light-style .btn-outline-success.focus,
html.light-style .btn-outline-success:focus-visible,
html.light-style .btn-outline-success:active,
html.light-style .btn-outline-success.active,
html.light-style .btn-outline-success.show.dropdown-toggle {
  color: #1e4e00 !important;
  background-color: #66c732 !important;
  border-color: #66c732 !important;
}

html.light-style .btn-label-warning:hover,
html.light-style .btn-label-warning:focus,
html.light-style .btn-label-warning.focus,
html.light-style .btn-label-warning:focus-visible,
html.light-style .btn-label-warning:active,
html.light-style .btn-label-warning.active,
html.light-style .btn-label-warning.show.dropdown-toggle,
html.light-style .btn-outline-warning:hover,
html.light-style .btn-outline-warning:focus,
html.light-style .btn-outline-warning.focus,
html.light-style .btn-outline-warning:focus-visible,
html.light-style .btn-outline-warning:active,
html.light-style .btn-outline-warning.active,
html.light-style .btn-outline-warning.show.dropdown-toggle {
  color: #583800 !important;
  background-color: #e69a00 !important;
  border-color: #e69a00 !important;
}

html.light-style .btn-label-info:hover,
html.light-style .btn-label-info:focus,
html.light-style .btn-label-info.focus,
html.light-style .btn-label-info:focus-visible,
html.light-style .btn-label-info:active,
html.light-style .btn-label-info.active,
html.light-style .btn-label-info.show.dropdown-toggle,
html.light-style .btn-outline-info:hover,
html.light-style .btn-outline-info:focus,
html.light-style .btn-outline-info.focus,
html.light-style .btn-outline-info:focus-visible,
html.light-style .btn-outline-info:active,
html.light-style .btn-outline-info.active,
html.light-style .btn-outline-info.show.dropdown-toggle {
  color: #003e4d !important;
  background-color: #03b0d4 !important;
  border-color: #03b0d4 !important;
}

html.light-style .btn-label-primary:hover,
html.light-style .btn-label-primary:focus,
html.light-style .btn-label-primary.focus,
html.light-style .btn-label-primary:focus-visible,
html.light-style .btn-label-primary:active,
html.light-style .btn-label-primary.active,
html.light-style .btn-label-primary.show.dropdown-toggle,
html.light-style .btn-outline-primary:hover,
html.light-style .btn-outline-primary:focus,
html.light-style .btn-outline-primary.focus,
html.light-style .btn-outline-primary:focus-visible,
html.light-style .btn-outline-primary:active,
html.light-style .btn-outline-primary.active,
html.light-style .btn-outline-primary.show.dropdown-toggle {
  color: #fff !important;
  background-color: #4e48d8 !important;
  border-color: #4e48d8 !important;
}

html.light-style .btn-label-danger:hover,
html.light-style .btn-label-danger:focus,
html.light-style .btn-label-danger.focus,
html.light-style .btn-label-danger:focus-visible,
html.light-style .btn-label-danger:active,
html.light-style .btn-label-danger.active,
html.light-style .btn-label-danger.show.dropdown-toggle,
html.light-style .btn-outline-danger:hover,
html.light-style .btn-outline-danger:focus,
html.light-style .btn-outline-danger.focus,
html.light-style .btn-outline-danger:focus-visible,
html.light-style .btn-outline-danger:active,
html.light-style .btn-outline-danger.active,
html.light-style .btn-outline-danger.show.dropdown-toggle {
  color: #fff !important;
  background-color: #bb1e00 !important;
  border-color: #bb1e00 !important;
}

html.light-style .btn-label-secondary:hover,
html.light-style .btn-label-secondary:focus,
html.light-style .btn-label-secondary.focus,
html.light-style .btn-label-secondary:focus-visible,
html.light-style .btn-label-secondary:active,
html.light-style .btn-label-secondary.active,
html.light-style .btn-label-secondary.show.dropdown-toggle,
html.light-style .btn-outline-secondary:hover,
html.light-style .btn-outline-secondary:focus,
html.light-style .btn-outline-secondary.focus,
html.light-style .btn-outline-secondary:focus-visible,
html.light-style .btn-outline-secondary:active,
html.light-style .btn-outline-secondary.active,
html.light-style .btn-outline-secondary.show.dropdown-toggle {
  color: #fff !important;
  background-color: #556070 !important;
  border-color: #556070 !important;
}
/* ---------------------------------------------------------------------
   Search bar buttons in dark mode

   The search partial pairs .bg-light with .btn-outline-dark. In dark mode
   both resolve to mid-purples - background #494a5d against label #6b6c9d,
   about 2:1 - so the Search/Reset labels wash out. Light mode pairs
   #dbdee0 with #2b2c40 and is fine, so only the dark side is restated.
   --------------------------------------------------------------------- */
html.dark-style .input-group .btn-outline-dark.bg-light {
  color: #d5d5e2;
  border-color: #8384b3;
}

/* ---------------------------------------------------------------------
   Dark theme gaps

   The dark stylesheet clears AA on most of its tinted surfaces, but two
   labels fall short against their own fill: secondary at 3.43:1 and
   danger at 3.34:1. Both are lightened along their own hue until they
   reach 4.5:1, leaving the other four untouched.
   -------------------------------------------------------------------- */
html.dark-style .bg-label-secondary,
html.dark-style .btn-label-secondary,
html.dark-style .btn-outline-secondary {
  color: #9ca9ba !important;
}

html.dark-style .bg-label-danger,
html.dark-style .btn-label-danger,
html.dark-style .btn-outline-danger {
  color: #ff775e !important;
}

/* ---------------------------------------------------------------------
   .hover-brighten

   Opt-in hover affordance for any element: lifts the whole element
   (background, text, icons, images) on hover. Light surfaces are already
   near white, so there the lift comes from a slight contrast bump rather
   than raw brightness.
   -------------------------------------------------------------------- */
.hover-brighten {
  transition: filter 0.15s ease-in-out;
}

.hover-brighten:hover,
.hover-brighten:focus-visible {
  filter: brightness(1.12) contrast(1.03);
}

html.dark-style .hover-brighten:hover,
html.dark-style .hover-brighten:focus-visible {
  filter: brightness(1.25);
}

/* ---------------------------------------------------------------------
   Menu overlay scroll lock

   The vendor stylesheet sets `overflow: hidden` on the body while the
   mobile menu is expanded. That removes the page scrollbar, so the
   document reflows sideways every time the menu opens or closes. The
   scrollbar stays put instead.
   -------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  html.layout-menu-expanded body {
    overflow: visible;
  }
}