:root[data-bs-theme="dark"] .tabulator {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

/* Bootstrap's native select popup is browser-rendered; set explicit dark
 * colors so options remain readable instead of black text on a grey surface. */
:root[data-bs-theme="dark"] select,
:root[data-bs-theme="dark"] .form-select,
:root[data-bs-theme="dark"] select option {
  color: var(--bs-body-color);
  background-color: var(--bs-tertiary-bg);
  color-scheme: dark;
}
:root[data-bs-theme="dark"] .dropdown-menu,
:root[data-bs-theme="dark"] .dropdown-item,
:root[data-bs-theme="dark"] .ts-dropdown,
:root[data-bs-theme="dark"] .ts-dropdown .option,
:root[data-bs-theme="dark"] .ts-wrapper .ts-control {
  color: var(--bs-body-color);
  background-color: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color);
}
:root[data-bs-theme="dark"] .dropdown-item:hover,
:root[data-bs-theme="dark"] .dropdown-item:focus,
:root[data-bs-theme="dark"] .ts-dropdown .active,
:root[data-bs-theme="dark"] .ts-dropdown .option:hover {
  color: var(--bs-emphasis-color);
  background-color: var(--bs-secondary-bg);
}

:root[data-bs-theme="dark"] .tabulator .tabulator-tableholder,
:root[data-bs-theme="dark"] .tabulator .tabulator-tableholder .tabulator-table {
  background-color: var(--bs-body-bg);
}

:root[data-bs-theme="dark"] .tabulator .tabulator-header,
:root[data-bs-theme="dark"] .tabulator .tabulator-footer {
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

:root[data-bs-theme="dark"] .tabulator .tabulator-header .tabulator-col {
  border-color: var(--bs-border-color);
}

:root[data-bs-theme="dark"] .tabulator .tabulator-header .tabulator-col .tabulator-col-content,
:root[data-bs-theme="dark"] .tabulator .tabulator-header .tabulator-col .tabulator-col-title {
  color: inherit;
}

:root[data-bs-theme="dark"] .tabulator .tabulator-header .tabulator-col .tabulator-col-sorter .tabulator-arrow {
  border-bottom-color: var(--bs-secondary-color);
}

:root[data-bs-theme="dark"] .tabulator .tabulator-header .tabulator-col,
:root[data-bs-theme="dark"] .tabulator .tabulator-tableholder {
  background-color: transparent;
}

:root[data-bs-theme="dark"] .tabulator .tabulator-row {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  border-color: rgba(255, 255, 255, 0.1);
}

:root[data-bs-theme="dark"] .tabulator .tabulator-row.tabulator-row-even {
  background-color: color-mix(in srgb, var(--bs-body-bg) 80%, var(--bs-tertiary-bg));
}

:root[data-bs-theme="dark"] .tabulator .tabulator-row.tabulator-selected {
  background-color: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
}

:root[data-bs-theme="dark"] .tabulator .tabulator-row .tabulator-cell {
  border-color: rgba(255, 255, 255, 0.08);
}

:root[data-bs-theme="dark"] .tabulator .tabulator-row .tabulator-cell.tabulator-editing input,
:root[data-bs-theme="dark"] .tabulator .tabulator-row .tabulator-cell.tabulator-editing select {
  color: var(--bs-body-color);
}

:root[data-bs-theme="dark"] .tabulator .tabulator-alert {
  background: rgba(0, 0, 0, 0.6);
}

:root[data-bs-theme="dark"] .tabulator .tabulator-alert .tabulator-alert-msg {
  background: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
}

:root[data-bs-theme="dark"] .tabulator .tabulator-alert .tabulator-alert-msg.tabulator-alert-state-msg {
  border-color: var(--bs-border-color);
}

:root[data-bs-theme="dark"] .tabulator .tabulator-alert .tabulator-alert-msg.tabulator-alert-state-error {
  border-color: var(--bs-danger);
  color: var(--bs-danger-text-emphasis);
}

:root[data-bs-theme="dark"] .tabulator .tabulator-placeholder-contents {
  color: var(--bs-secondary-color);
}

:root[data-bs-theme="dark"] .tabulator .tabulator-edit-box,
:root[data-bs-theme="dark"] .tabulator .tabulator-popup-container {
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

:root[data-bs-theme="dark"] .tabulator .tabulator-footer .tabulator-page {
  color: inherit;
}

:root[data-bs-theme="dark"] .tabulator .tabulator-footer .tabulator-page.active {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: var(--bs-primary-contrast);
}

.navbar-brand-logo {
  height: 32px;
  width: auto;
}

.img-responsive {
  max-width: 100%;
  height: auto;
}

.page-header-logo {
  max-height: 64px;
  width: auto;
}

@media (max-width: 576px) {
  .navbar-brand-logo {
    height: 26px;
  }

  .page-header-logo {
    max-height: 48px;
  }
}

.navbar-themed {
  background-color: var(--navbar-bg, var(--bs-primary));
  color: var(--navbar-color, var(--bs-body-color));
  z-index: 1030;
  box-shadow: 0 .15rem .5rem rgba(0, 0, 0, .14);
}

/* The Bootstrap sticky utility belongs to the header shell. Keeping the
 * navbar itself free of margins makes the complete navigation reliably stick
 * at the viewport edge, including its expanded mobile menu. */
.app-navbar-shell { z-index: 1030; }

.navbar-themed .navbar-brand,
.navbar-themed .navbar-brand:hover,
.navbar-themed .navbar-brand:focus,
.navbar-themed .nav-link,
.navbar-themed .nav-link:hover,
.navbar-themed .nav-link:focus {
  color: var(--navbar-color, #ffffff);
}

.navbar-themed .nav-link {
  opacity: 0.9;
  transition: opacity 0.2s ease;
}

/* Reserve one stable icon column so labels never jump between menu items. */
.navbar-themed .nav-link > i,
.navbar-themed .dropdown-item > i,
.navbar-themed .btn-outline-navbar > i,
details.card > summary > i {
  display: inline-block;
  width: 1.25rem;
  min-width: 1.25rem;
  text-align: center;
}

label.form-label > i,
label.form-check-label > i {
  display: inline-block;
  width: 1.25rem;
  min-width: 1.25rem;
  text-align: center;
  margin-right: .35rem !important;
}

/* Einwertige TomSelect-Felder bleiben kompakt und umbrechen nicht. */
.ts-hidden-accessible {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

.ts-wrapper.single .ts-control {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  white-space: nowrap;
  overflow: hidden;
}

.ts-wrapper.single .ts-control .item {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ts-wrapper.single .ts-control > input {
  min-width: 2rem;
  flex: 1 1 auto;
  width: auto !important;
}

.plugin-dropdown_input .dropdown-input-wrap {
  padding: .35rem;
}

.plugin-dropdown_input .dropdown-input {
  display: block;
  width: 100%;
  padding: .4rem .55rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-sm);
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
}

label.form-label {
  font-weight: 600;
}

.navbar-themed .nav-link > i,
.navbar-themed .dropdown-item > i,
.navbar-themed .btn-outline-navbar > i {
  margin-right: .25rem;
}

.navbar-themed .nav-link:hover,
.navbar-themed .nav-link:focus,
.navbar-themed .nav-link.active {
  opacity: 1;
}

/* Desktop navigation may reveal its primary menus on hover. Touch and
 * keyboard interaction deliberately retain Bootstrap's regular click/focus
 * dropdown behaviour. Account, notification and theme menus stay click-only. */
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  .navbar-themed .navbar-nav > .nav-item.dropdown:hover > .dropdown-menu {
    display: block;
    margin-top: 0;
  }

  .navbar-themed .navbar-nav > .nav-item.dropdown:hover > .dropdown-toggle {
    opacity: 1;
  }
}

/* Keep navigation state and yellow accent icons readable on the light
 * branded navbar as well as in the dark theme. */
[data-bs-theme="light"] .navbar-themed .nav-link.active,
[data-bs-theme="light"] .navbar-themed .nav-link.active:hover,
[data-bs-theme="light"] .navbar-themed .nav-link.active:focus,
[data-bs-theme="light"] .navbar-themed .dropdown-toggle.active {
  color: var(--navbar-color, var(--bs-emphasis-color));
  background-color: color-mix(in srgb, var(--navbar-color, var(--bs-emphasis-color)) 16%, transparent);
  border-radius: 0;
  box-shadow: inset 0 -2px 0 currentColor;
}

[data-bs-theme="light"] .navbar-themed .nav-link i,
[data-bs-theme="light"] .navbar-themed .dropdown-toggle i {
  color: currentColor;
  opacity: .9;
}

[data-bs-theme="light"] .navbar-themed .dropdown-toggle::after {
  border-top-color: currentColor;
}

[data-bs-theme="light"] .navbar-themed .dropdown-toggle.active::after {
  border-top-color: currentColor;
}

[data-bs-theme="light"] .navbar-themed .nav-link.active i,
[data-bs-theme="light"] .navbar-themed .dropdown-toggle.active i {
  color: currentColor;
}

[data-bs-theme="light"] .device-card-summary > .fa-plus-circle {
  color: var(--bs-emphasis-color) !important;
}

/* Reassure mouse and keyboard users which list item they are about to open.
 * Keep this behind the hover media query: cards must not look permanently
 * active on touch devices. */
.table-hover > tbody > tr {
  transition: background-color .14s ease, box-shadow .14s ease;
}

@media (hover: hover) and (pointer: fine) {
  .table-hover > tbody > tr:hover {
    --bs-table-hover-bg: color-mix(in srgb, var(--app-primary, var(--bs-primary)), transparent 86%);
  }

  details.device-card {
    transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
  }

  details.device-card:hover {
    border-color: color-mix(in srgb, var(--app-primary, var(--bs-primary)), var(--bs-border-color) 45%);
    box-shadow: 0 .3rem .9rem color-mix(in srgb, var(--app-primary, var(--bs-primary)), transparent 87%);
    transform: translateY(-1px);
  }

  details.device-card > summary.device-card-summary:hover {
    background-color: color-mix(in srgb, var(--app-primary, var(--bs-primary)), transparent 92%);
  }
}

details.device-card:focus-within {
  border-color: color-mix(in srgb, var(--app-primary, var(--bs-primary)), var(--bs-border-color) 40%);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--app-primary, var(--bs-primary)), transparent 78%);
}

.navbar-themed .btn-outline-navbar {
  color: var(--navbar-color, #ffffff);
  border-color: var(--navbar-color, #ffffff);
  background-color: transparent;
}

.navbar-themed .btn-outline-navbar:hover,
.navbar-themed .btn-outline-navbar:focus,
.navbar-themed .btn-outline-navbar:active {
  color: var(--navbar-bg, var(--bs-body-bg));
  background-color: var(--navbar-color, #ffffff);
  border-color: var(--navbar-color, #ffffff);
}

.navbar-themed .notification-menu {
  min-width: 22rem;
  max-width: min(90vw, 28rem);
}

.navbar-themed .notification-menu .dropdown-item {
  white-space: normal;
}

/* Shared mobile-first app shell. Desktop keeps the existing navbar layout;
 * below the Bootstrap expansion breakpoint the same navigation collapses into
 * one keyboard-accessible menu instead of shrinking the desktop header. */
.app-main-container {
  width: 100%;
  min-width: 0;
  padding-inline: clamp(.75rem, 2.5vw, 2rem) !important;
}
html, body { max-width: 100%; overflow-x: hidden; }
.app-main-container .row > [class*="col-"] { min-width: 0; }
.app-main-container input,
.app-main-container select,
.app-main-container textarea,
.app-main-container .form-control,
.app-main-container .form-select { max-width: 100%; }
.app-nav-container { width: 100%; min-width: 0; padding-inline: clamp(.75rem, 2.5vw, 2rem); }
.navbar-themed .navbar-toggler {
  color: var(--navbar-color, #fff);
  border-color: color-mix(in srgb, var(--navbar-color, #fff), transparent 35%);
  min-width: 2.75rem;
  min-height: 2.75rem;
}
.navbar-themed .navbar-toggler-icon {
  filter: brightness(0) invert(1);
}
[data-bs-theme="light"] .navbar-themed .navbar-toggler-icon {
  filter: brightness(0);
}

@media (max-width: 991.98px) {
  .navbar-themed { min-height: 4rem; }
  .navbar-themed .navbar-brand { min-width: 0; max-width: calc(100% - 4rem); }
  .navbar-themed .navbar-brand span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .navbar-themed #appNavbarContent {
    flex-basis: 100%;
    padding: .75rem 0 .25rem;
    border-top: 1px solid color-mix(in srgb, var(--navbar-color, #fff), transparent 70%);
    margin-top: .5rem;
  }
  .navbar-themed #appNavbarContent > .navbar-nav,
  .navbar-themed #appNavbarContent > .d-flex { width: 100%; }
  .navbar-themed .navbar-nav { gap: .15rem !important; }
  .navbar-themed .nav-link,
  .navbar-themed .dropdown-toggle,
  .navbar-themed .btn-outline-navbar,
  .navbar-themed .navbar-toggler { min-height: 2.75rem; }
  .navbar-themed .navbar-nav .nav-link { padding: .65rem .75rem; }
  .navbar-themed #appNavbarContent > .d-flex { margin-left: 0 !important; justify-content: flex-start !important; padding-top: .5rem; border-top: 1px solid color-mix(in srgb, var(--navbar-color, #fff), transparent 80%); }
  .navbar-themed .notification-menu { min-width: min(22rem, calc(100vw - 1.5rem)); }
  .page-header h1 { font-size: clamp(1.5rem, 5vw, 2.25rem); }
  .btn, .form-control, .form-select { min-height: 2.75rem; }
  .form-check-input { width: 1.25em; height: 1.25em; }
  .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 575.98px) {
  body { font-size: 1rem; }
  .app-main-container { padding-top: 1rem !important; padding-bottom: 1.25rem !important; }
  .card-body { padding: 1rem; }
  .btn-group { flex-wrap: wrap; }
  .btn-group > .btn { flex: 1 1 auto; }
  /* The primary action and its dropdown arrow are one split control, not
     two wrapping actions. Device creation needs this even on a phone. */
  .device-form > .col-12.text-end > .btn-group { flex-wrap: nowrap; }
  .device-form > .col-12.text-end > .btn-group > .dropdown-toggle-split { flex: 0 0 auto; }
  .d-flex.gap-2 > .btn,
  .d-flex.gap-3 > .btn { max-width: 100%; }
  .page-header { margin-bottom: 1rem !important; }
  .table { font-size: .9375rem; }
  .table th, .table td { white-space: normal; }
  details.card > summary.card-header { min-height: 2.9rem; display: flex; align-items: center; }
}

/* Barrierefreiheit: sichtbarer Fokus, Sprungmarke und gespeicherte Darstellung. */
.skip-link {
  position: fixed;
  z-index: 2000;
  top: .5rem;
  left: .5rem;
  padding: .65rem .9rem;
  color: #000;
  background: #ffdf00;
  border: 2px solid #000;
  border-radius: .35rem;
  transform: translateY(-150%);
}

.skip-link:focus { transform: translateY(0); }

:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 3px solid var(--app-focus-color, #ffbf00) !important;
  outline-offset: 2px;
}

:root[data-font-scale="large"] { font-size: 112.5%; }
:root[data-font-scale="xlarge"] { font-size: 125%; }
:root[data-font-scale="xxlarge"] { font-size: 140%; }
:root[data-font-weight="bold"] body { font-weight: 600; }
:root[data-font-weight="bold"] :is(.btn, .dropdown-item, .page-link, #page-action-navigation, .navbar) { font-weight: 600; }
:root[data-font-family="sans"] body { font-family: Verdana, Arial, Helvetica, sans-serif; }
:root[data-font-family="serif"] body { font-family: Georgia, "Times New Roman", serif; }
:root[data-font-family="mono"] body { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; }

:root[data-motion="reduce"] *,
:root[data-motion="reduce"] *::before,
:root[data-motion="reduce"] *::after {
  scroll-behavior: auto !important;
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
}

:root[data-contrast="yellow_black"] {
  color-scheme: dark;
  --app-primary: #ffdf00;
  --app-primary-text: #000;
  --app-focus-color: #ffdf00;
  --bs-body-bg: #000;
  --bs-body-color: #ffdf00;
  --bs-emphasis-color: #ffdf00;
  --bs-secondary-bg: #111;
  --bs-tertiary-bg: #1d1d1d;
  --bs-secondary-color: #fff0a6;
  --bs-tertiary-color: #fff0a6;
  --bs-border-color: #ffdf00;
  --bs-link-color: #ffeb3b;
  --bs-link-hover-color: #fff38a;
  --bs-primary-rgb: 255, 223, 0;
  --bs-success-rgb: 0, 255, 136;
  --bs-info-rgb: 0, 208, 255;
  --bs-warning-rgb: 255, 223, 0;
  --bs-danger-rgb: 255, 92, 92;
}

:root[data-contrast="white_black"] {
  color-scheme: dark;
  --app-primary: #fff;
  --app-primary-text: #000;
  --app-focus-color: #ffdf00;
  --bs-body-bg: #000;
  --bs-body-color: #fff;
  --bs-emphasis-color: #fff;
  --bs-secondary-bg: #111;
  --bs-tertiary-bg: #1d1d1d;
  --bs-secondary-color: #fff;
  --bs-tertiary-color: #fff;
  --bs-border-color: #fff;
  --bs-link-color: #fff;
  --bs-link-hover-color: #ffdf00;
  --bs-primary-rgb: 255, 255, 255;
  --bs-success-rgb: 0, 255, 136;
  --bs-info-rgb: 0, 208, 255;
  --bs-warning-rgb: 255, 223, 0;
  --bs-danger-rgb: 255, 92, 92;
}

:root[data-contrast="green_black"] {
  color-scheme: dark;
  --app-primary: #00e676;
  --app-primary-text: #000;
  --app-focus-color: #00ff88;
  --bs-body-bg: #000;
  --bs-body-color: #00ff88;
  --bs-emphasis-color: #00ff88;
  --bs-secondary-bg: #101510;
  --bs-tertiary-bg: #1a251a;
  --bs-secondary-color: #b7ffcf;
  --bs-tertiary-color: #b7ffcf;
  --bs-border-color: #00ff88;
  --bs-link-color: #6dff9d;
  --bs-link-hover-color: #c5ffd6;
  --bs-primary-rgb: 0, 230, 118;
  --bs-success-rgb: 0, 255, 136;
  --bs-info-rgb: 0, 208, 255;
  --bs-warning-rgb: 255, 223, 0;
  --bs-danger-rgb: 255, 92, 92;
}

:root[data-contrast="white_black"] .navbar-themed { --navbar-bg: #000 !important; --navbar-color: #fff !important; }
:root[data-contrast="yellow_black"] .navbar-themed { --navbar-bg: #000 !important; --navbar-color: #ffdf00 !important; }
:root[data-contrast="green_black"] .navbar-themed { --navbar-bg: #000 !important; --navbar-color: #00ff88 !important; }

:root[data-contrast="white_black"] :is(.card, .modal-content, .dropdown-menu, .offcanvas, .list-group-item, .form-control, .form-select, .input-group-text),
:root[data-contrast="yellow_black"] :is(.card, .modal-content, .dropdown-menu, .offcanvas, .list-group-item, .form-control, .form-select, .input-group-text),
:root[data-contrast="green_black"] :is(.card, .modal-content, .dropdown-menu, .offcanvas, .list-group-item, .form-control, .form-select, .input-group-text) {
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);
}

:root[data-contrast="white_black"] :is(.text-body-secondary, .text-body-tertiary, .text-secondary, .form-text),
:root[data-contrast="yellow_black"] :is(.text-body-secondary, .text-body-tertiary, .text-secondary, .form-text),
:root[data-contrast="green_black"] :is(.text-body-secondary, .text-body-tertiary, .text-secondary, .form-text) { color: var(--bs-secondary-color) !important; opacity: 1; }

:root[data-contrast="white_black"] :is(.btn, .badge, .alert),
:root[data-contrast="yellow_black"] :is(.btn, .badge, .alert),
:root[data-contrast="green_black"] :is(.btn, .badge, .alert) { border-width: 2px; font-weight: 600; }

:root[data-contrast="white_black"] :is(.btn-secondary, .btn-outline-secondary, .btn-light, .btn-outline-light) { color: #fff; background: #000; border-color: #fff; }
:root[data-contrast="yellow_black"] :is(.btn-secondary, .btn-outline-secondary, .btn-light, .btn-outline-light) { color: #ffdf00; background: #000; border-color: #ffdf00; }
:root[data-contrast="green_black"] :is(.btn-secondary, .btn-outline-secondary, .btn-light, .btn-outline-light) { color: #00ff88; background: #000; border-color: #00ff88; }

:root[data-contrast="yellow_black"] :is(.btn-success, .text-bg-success, .alert-success),
:root[data-contrast="green_black"] :is(.btn-success, .text-bg-success, .alert-success) { color: #000; background-color: #00ff88; border-color: #00ff88; }

:root[data-contrast="yellow_black"] :is(.btn-warning, .text-bg-warning, .alert-warning),
:root[data-contrast="green_black"] :is(.btn-warning, .text-bg-warning, .alert-warning) { color: #000; background-color: #ffdf00; border-color: #ffdf00; }

:root[data-contrast="yellow_black"] :is(.btn-danger, .text-bg-danger, .alert-danger),
:root[data-contrast="green_black"] :is(.btn-danger, .text-bg-danger, .alert-danger) { color: #fff; background-color: #c90000; border-color: #ff8a8a; }

:root[data-contrast="yellow_black"] :is(.btn-info, .text-bg-info, .alert-info),
:root[data-contrast="green_black"] :is(.btn-info, .text-bg-info, .alert-info) { color: #000; background-color: #00d0ff; border-color: #00d0ff; }

@media (prefers-reduced-motion: reduce) {
  :root[data-motion="system"] *,
  :root[data-motion="system"] *::before,
  :root[data-motion="system"] *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media (forced-colors: active) {
  .skip-link { forced-color-adjust: none; }
  :where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible { outline-color: Highlight !important; }
}

/* Keep the device action's main action and chevron visually attached at every
   viewport size; generic mobile button groups are allowed to wrap. */
.device-form > .col-12.text-end > .btn-group {
  display: inline-flex;
  flex-wrap: nowrap;
}
.device-form > .col-12.text-end > .btn-group > .dropdown-toggle-split { flex: 0 0 auto; }

/* TomSelect replaces the source input with a wrapper. Keep it behaving as the
   flexible member of an input group beside the Companion paperclip. */
.companion-field-group { display: flex; flex-wrap: nowrap !important; }
.companion-field-group .ts-wrapper,
.companion-field-group .ts-wrapper.form-control,
.companion-field-group .ts-wrapper.form-select { flex: 1 1 0 !important; min-width: 0; width: auto !important; }
.companion-field-group .ts-control { min-height: 2.75rem; }
.companion-field-group .ts-wrapper.form-select,
.companion-field-group .ts-wrapper.form-control { border-radius: var(--bs-border-radius) 0 0 var(--bs-border-radius); }
.companion-field-group > .btn { flex: 0 0 auto; white-space: nowrap; }

.stat-tile {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 0.75rem 1rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-lg);
  background-color: var(--bs-body-bg);
  min-width: 220px;
}

.stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  font-size: 1.4rem;
}

.stat-value {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1;
}

.stat-label {
  font-size: 0.9rem;
  color: var(--bs-secondary-color);
}

.default-company-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.85rem;
  font-size: 1.25rem;
}

.default-company-logo {
  transition: box-shadow 0.2s ease;
}

.default-company-logo:hover,
.default-company-logo:focus-within {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08);
}

.ts-wrapper.structure-filter-select .option[aria-disabled="true"] {
  display: none;
}

.ts-dropdown-content {
  max-height: min(45vh, 22rem);
}

@media (pointer: coarse), (max-width: 575.98px) {
  .ts-wrapper .ts-control {
    min-height: 44px;
    font-size: 16px;
    align-items: center;
  }

  .ts-dropdown .option {
    min-height: 44px;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
  }
}

@media (max-width: 575.98px) {
  .stat-tile {
    min-width: 0;
    width: 100%;
  }

  .stat-value {
    font-size: 1.5rem;
  }
}