/* Lightweight utility classes for spacing, layout, width and display */

/* Display */
.u-flex { display: flex !important; }
.u-inline-flex { display: inline-flex !important; }
.u-block { display: block !important; }
.u-inline { display: inline !important; }

/* Flex direction */
.u-flex-col { flex-direction: column !important; }
.u-flex-row { flex-direction: row !important; }

/* Flex grow/shrink */
.u-flex-1 { flex: 1 1 auto !important; }
.u-flex-none { flex: 0 0 auto !important; }

/* Align + justify */
.u-items-center { align-items: center !important; }
.u-justify-center { justify-content: center !important; }
.u-justify-between { justify-content: space-between !important; }

/* Gap */
.u-gap-2 { gap: 6px !important; }
.u-gap-3 { gap: 8px !important; }
.u-gap-4 { gap: 12px !important; }
.u-gap-5 { gap: 16px !important; }

/* Width/height */
.u-w-100 { width: 100% !important; }
.u-h-100 { height: 100% !important; }

/* Min heights */
.u-minh-0 { min-height: 0 !important; }
.u-minh-52 { min-height: 52px !important; }

/* Position helpers */
.u-sticky-top { position: sticky !important; top: 0 !important; }
.u-inset-0 { position: fixed !important; inset: 0 !important; }
.u-abs-inset-0 { position: absolute !important; inset: 0 !important; }
.u-z-100 { z-index: var(--ui-z-sticky) !important; }
.u-z-5000 { z-index: var(--ui-z-overlay) !important; }

/* Backgrounds */
.u-bg-black-98 { background: var(--ui-overlay-strong-bg) !important; }
.u-bg-white { background: var(--ui-surface-base) !important; }

/* Content color palette swatches. Values are persisted domain data, not theme tokens. */
.color-palette-swatch {
  background: var(--color-palette-value);
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius-sm);
  height: 32px;
  width: 32px;
}
.color-palette-swatch--0 { --color-palette-value: #F8D7DA; }
.color-palette-swatch--1 { --color-palette-value: #FDE2E4; }
.color-palette-swatch--2 { --color-palette-value: #FAD2E1; }
.color-palette-swatch--3 { --color-palette-value: #E2ECE9; }
.color-palette-swatch--4 { --color-palette-value: #DDEDEA; }
.color-palette-swatch--5 { --color-palette-value: #D6E2E9; }
.color-palette-swatch--6 { --color-palette-value: #CCE2CB; }
.color-palette-swatch--7 { --color-palette-value: #F9E2AE; }
.color-palette-swatch--8 { --color-palette-value: #FFF1B6; }
.color-palette-swatch--9 { --color-palette-value: #F7E1AE; }
.color-palette-swatch--10 { --color-palette-value: #EAE4E9; }
.color-palette-swatch--11 { --color-palette-value: #F3D1F4; }
.color-palette-swatch--12 { --color-palette-value: #EAD1DC; }
.color-palette-swatch--13 { --color-palette-value: #D1E8E2; }
.color-palette-swatch--14 { --color-palette-value: #E2F0CB; }
.color-palette-swatch--15 { --color-palette-value: #FFE5EC; }
.color-palette-swatch--16 { --color-palette-value: #FEE2F2; }
.color-palette-swatch--17 { --color-palette-value: #E6F3FF; }
.color-palette-swatch--18 { --color-palette-value: #EAF6F6; }
.color-palette-swatch--19 { --color-palette-value: #FCEFEF; }
.color-palette-swatch--20 { --color-palette-value: #F1F0FB; }
.color-palette-swatch--21 { --color-palette-value: #EDE7F6; }
.color-palette-swatch--22 { --color-palette-value: #FFF4E6; }
.color-palette-swatch--23 { --color-palette-value: #FDF7E4; }
.color-palette-swatch--24 { --color-palette-value: #F1FAEE; }
.color-palette-swatch--25 { --color-palette-value: #E5F4E3; }
.color-palette-swatch--26 { --color-palette-value: #E0F7FA; }
.color-palette-swatch--27 { --color-palette-value: #E3F2FD; }
.color-palette-swatch--28 { --color-palette-value: #E8EAF6; }
.color-palette-swatch--29 { --color-palette-value: #F3E5F5; }
.color-palette-swatch--30 { --color-palette-value: #FFF3E0; }
.color-palette-swatch--31 { --color-palette-value: #EDEDED; }
.color-palette-swatch--32 { --color-palette-value: #E0F2F1; }
.color-palette-swatch--33 { --color-palette-value: #F1F8E9; }
.color-palette-swatch--34 { --color-palette-value: #F9EBEA; }
.color-palette-swatch--35 { --color-palette-value: #EBDEF0; }
.color-palette-swatch--36 { --color-palette-value: #E8DAEF; }
.color-palette-swatch--37 { --color-palette-value: #D6EAF8; }
.color-palette-swatch--38 { --color-palette-value: #D1F2EB; }
.color-palette-swatch--39 { --color-palette-value: #FCF3CF; }
.color-palette-swatch--40 { --color-palette-value: #FDEBD0; }
.color-palette-swatch--41 { --color-palette-value: #F6DDCC; }
.color-palette-swatch--42 { --color-palette-value: #D5DBDB; }
.color-palette-swatch--43 { --color-palette-value: #FDF2F8; }
.color-palette-swatch--44 { --color-palette-value: #E0E7FF; }
.color-palette-swatch--45 { --color-palette-value: #E2E8F0; }
.color-palette-swatch--46 { --color-palette-value: #FAF5FF; }
.color-palette-swatch--47 { --color-palette-value: #F0FFF4; }
.color-palette-swatch--48 { --color-palette-value: #FFF5F5; }
.color-palette-swatch--49 { --color-palette-value: #FEF3C7; }
.color-palette-swatch--50 { --color-palette-value: #E9D5FF; }

/* Borders */
.u-border { border: 1px solid var(--ui-border-subtle) !important; }
.u-rounded { border-radius: var(--ui-radius-md) !important; }
.u-rounded-lg { border-radius: var(--ui-radius-lg) !important; }

/* Shadows */
.u-shadow-lg { box-shadow: var(--ui-shadow-md) !important; }

/* Padding + margin */
.u-p-2 { padding: 8px !important; }
.u-p-3 { padding: 12px !important; }
.u-p-4 { padding: 16px !important; }
.u-pt-2 { padding-top: 8px !important; }
.u-pt-3 { padding-top: 12px !important; }
.u-pb-2 { padding-bottom: 8px !important; }
.u-pb-3 { padding-bottom: 12px !important; }
.u-m-0 { margin: 0 !important; }
.u-mb-2 { margin-bottom: 8px !important; }
.u-mb-3 { margin-bottom: 12px !important; }
.u-mt-2 { margin-top: 8px !important; }
.u-mt-3 { margin-top: 12px !important; }
.u-gap-wrap { gap: 8px !important; flex-wrap: wrap !important; }
.u-flex-wrap { flex-wrap: wrap !important; }
.u-cursor-default { cursor: default !important; }
.u-cursor-pointer { cursor: pointer !important; }
.u-w-462 { width: 415.8px !important; } /* 462px - 10% = 415.8px */
.u-pre-wrap { white-space: pre-wrap !important; }
.u-overflow-auto { overflow: auto !important; }
.modal-body-scrollable { max-height: calc(100vh - 200px) !important; overflow-y: auto !important; }

/* Text */
.u-text-center { text-align: center !important; }
.u-text-muted { color: var(--ui-text-muted) !important; }
.text-muted { color: var(--ui-text-muted) !important; }
.u-fs-14 { font-size: 14px !important; }

/* Bootstrap semantic bridge: legacy markup keeps Bootstrap class names, colors come from UI tokens. */
.text-primary { color: var(--ui-color-action-text) !important; }
.text-danger { color: var(--ui-color-danger) !important; }
.text-success { color: var(--ui-color-success) !important; }
.text-warning { color: var(--ui-color-warning) !important; }
.text-info { color: var(--ui-color-info-strong) !important; }
.text-secondary { color: var(--ui-text-secondary) !important; }
.text-dark { color: var(--ui-text-primary) !important; }
.text-white { color: var(--ui-text-on-accent) !important; }

.bg-primary { background-color: var(--ui-color-action) !important; }
.bg-danger { background-color: var(--ui-color-danger) !important; }
.bg-success { background-color: var(--ui-color-success) !important; }
.bg-warning { background-color: var(--ui-color-warning) !important; }
.bg-info { background-color: var(--ui-color-info) !important; }
.bg-secondary { background-color: var(--ui-color-secondary-bg) !important; }
.bg-white { background-color: var(--ui-surface-raised) !important; }
.bg-light { background-color: var(--ui-surface-muted) !important; }
.bg-dark { background-color: var(--ui-surface-inverse) !important; }
.bg-success-light { background-color: var(--ui-color-success-muted) !important; }
.bg-danger-light { background-color: var(--ui-color-danger-muted) !important; }
.bg-info-light { background-color: var(--ui-color-info-muted) !important; }
.bg-warning-light { background-color: var(--ui-color-warning-muted) !important; }
.bg-success-subtle { background-color: var(--ui-color-success-muted) !important; }
.bg-danger-subtle { background-color: var(--ui-color-danger-muted) !important; }
.bg-info-subtle { background-color: var(--ui-color-info-muted) !important; }
.bg-warning-subtle { background-color: var(--ui-color-warning-muted) !important; }
.bg-primary-subtle { background-color: var(--ui-color-action-muted) !important; }
.bg-secondary-subtle { background-color: var(--ui-surface-muted) !important; }
.bg-light-subtle { background-color: var(--ui-surface-muted) !important; }
.text-success-dark { color: var(--ui-color-success-strong) !important; }
.text-danger-dark { color: var(--ui-color-danger-strong) !important; }
.text-info-dark { color: var(--ui-color-info-strong) !important; }
.text-warning-emphasis { color: var(--ui-color-warning) !important; }
.table-light,
.table {
  --bs-table-bg: var(--ui-surface-raised);
  --bs-table-color: var(--ui-text-primary);
  --bs-table-border-color: var(--ui-border-subtle);
  --bs-table-striped-bg: var(--ui-surface-muted);
  --bs-table-striped-color: var(--ui-text-primary);
  --bs-table-hover-bg: var(--ui-surface-hover);
  --bs-table-hover-color: var(--ui-text-primary);
}

.table-light { --bs-table-bg: var(--ui-surface-muted); --bs-table-color: var(--ui-text-primary); }
.text-bg-secondary { background-color: var(--ui-color-secondary-bg) !important; color: var(--ui-text-on-accent) !important; }
.text-bg-light { background-color: var(--ui-surface-muted) !important; color: var(--ui-text-primary) !important; }
.text-bg-primary { background-color: var(--ui-color-action) !important; color: var(--ui-text-on-accent) !important; }
.text-bg-success { background-color: var(--ui-color-success) !important; color: var(--ui-text-on-accent) !important; }
.text-bg-danger { background-color: var(--ui-color-danger) !important; color: var(--ui-text-on-accent) !important; }
.text-bg-warning { background-color: var(--ui-color-warning) !important; color: var(--ui-text-primary) !important; }
.text-bg-info { background-color: var(--ui-color-info) !important; color: var(--ui-text-on-accent) !important; }

.border,
.border-top,
.border-end,
.border-bottom,
.border-start { border-color: var(--ui-border-subtle) !important; }
.border-primary { border-color: var(--ui-color-action) !important; }
.border-danger { border-color: var(--ui-color-danger) !important; }
.border-success { border-color: var(--ui-color-success) !important; }
.border-warning { border-color: var(--ui-color-warning) !important; }
.border-info { border-color: var(--ui-color-info) !important; }
.border-secondary,
.border-secondary-subtle { border-color: var(--ui-border-subtle) !important; }
.border-light,
.border-white { border-color: var(--ui-border-subtle) !important; }

.alert {
  --bs-alert-bg: var(--ui-surface-muted);
  --bs-alert-border-color: var(--ui-border-subtle);
  --bs-alert-color: var(--ui-text-primary);
}

.alert-primary {
  --bs-alert-bg: var(--ui-color-action-muted);
  --bs-alert-border-color: var(--ui-color-action);
  --bs-alert-color: var(--ui-color-action-text);
}

.alert-secondary,
.alert-light {
  --bs-alert-bg: var(--ui-surface-muted);
  --bs-alert-border-color: var(--ui-border-subtle);
  --bs-alert-color: var(--ui-text-primary);
}

.alert-success {
  --bs-alert-bg: var(--ui-color-success-muted);
  --bs-alert-border-color: var(--ui-color-success);
  --bs-alert-color: var(--ui-color-success-strong);
}

.alert-danger {
  --bs-alert-bg: var(--ui-color-danger-muted);
  --bs-alert-border-color: var(--ui-color-danger);
  --bs-alert-color: var(--ui-color-danger-strong);
}

.alert-warning {
  --bs-alert-bg: var(--ui-color-warning-muted);
  --bs-alert-border-color: var(--ui-color-warning);
  --bs-alert-color: var(--ui-text-primary);
}

.alert-info {
  --bs-alert-bg: var(--ui-color-info-muted);
  --bs-alert-border-color: var(--ui-color-info);
  --bs-alert-color: var(--ui-color-info-strong);
}

.card,
.list-group-item,
.dropdown-menu {
  background: var(--ui-surface-raised);
  border-color: var(--ui-border-subtle);
  color: var(--ui-text-primary);
}

.card-header,
.card-footer {
  background: var(--ui-surface-muted);
  border-color: var(--ui-border-subtle);
  color: var(--ui-text-primary);
}

.dropdown-item {
  color: var(--ui-text-primary);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--ui-surface-hover);
  color: var(--ui-text-primary);
}

.dropdown-item.active,
.dropdown-item:active {
  background: var(--ui-btn-primary-hover-bg);
  color: var(--ui-color-action-text);
}

.dropdown-divider {
  border-top-color: var(--ui-border-subtle);
}

.list-group-item-action {
  color: var(--ui-text-primary);
}

.list-group-item-action:hover,
.list-group-item-action:focus {
  background: var(--ui-surface-hover);
  color: var(--ui-text-primary);
}

.list-group-item.active {
  background: var(--ui-btn-primary-hover-bg);
  border-color: var(--ui-btn-primary-hover-border);
  color: var(--ui-color-action-text);
}

.form-label,
.form-check-label {
  color: var(--ui-text-primary);
}

.form-text {
  color: var(--ui-text-muted);
}

.form-control,
.form-select,
.form-check-input {
  background-color: var(--ui-surface-raised);
  border-color: var(--ui-border-subtle);
  color: var(--ui-text-primary);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  background-color: var(--ui-surface-raised);
  border-color: var(--ui-color-action);
  box-shadow: var(--ui-focus-ring);
  color: var(--ui-text-primary);
}

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

.form-check-input:disabled,
.form-check-input[disabled] {
  background-color: var(--ui-surface-muted);
  border-color: var(--ui-border-subtle);
  opacity: 1;
}

.form-control::placeholder {
  color: var(--ui-text-muted);
  opacity: 1;
}

.btn-link,
.link-primary {
  color: var(--ui-color-action-text);
}

.btn-link:hover,
.btn-link:focus,
.link-primary:hover,
.link-primary:focus {
  color: var(--ui-color-action-hover);
}

.btn-link:focus-visible,
.link-primary:focus-visible {
  box-shadow: var(--ui-focus-ring);
  outline: 0;
}

.btn:not(.btn-link) {
  align-items: center;
  border-radius: var(--ui-btn-radius);
  display: inline-flex;
  font-size: var(--ui-btn-font-size);
  font-weight: var(--ui-btn-font-weight);
  gap: var(--ui-btn-gap);
  justify-content: center;
  line-height: 1.2;
  min-height: var(--ui-btn-height);
  padding: var(--ui-btn-padding);
}

.btn.btn-sm:not(.btn-link) {
  font-size: var(--ui-font-size-sm);
  min-height: var(--ui-btn-sm-height);
  padding: var(--ui-btn-sm-padding);
}

.btn.btn-xs:not(.btn-link) {
  font-size: var(--ui-font-size-xs);
  min-height: var(--ui-btn-xs-height);
  padding: var(--ui-btn-xs-padding);
}

.btn.btn-lg:not(.btn-link) {
  min-height: var(--ui-btn-lg-height);
  padding: var(--ui-btn-lg-padding);
}

.btn-primary {
  --bs-btn-token-source: var(--ui-color-action);
  --bs-btn-color: var(--ui-btn-primary-text);
  --bs-btn-bg: var(--ui-btn-primary-bg);
  --bs-btn-border-color: var(--ui-btn-primary-border);
  --bs-btn-hover-color: var(--ui-btn-primary-text);
  --bs-btn-hover-bg: var(--ui-btn-primary-hover-bg);
  --bs-btn-hover-border-color: var(--ui-btn-primary-hover-border);
  --bs-btn-active-color: var(--ui-btn-primary-text);
  --bs-btn-active-bg: var(--ui-btn-primary-active-bg);
  --bs-btn-active-border-color: var(--ui-btn-primary-active-border);
  --bs-btn-disabled-color: var(--ui-color-action-text);
  --bs-btn-disabled-bg: var(--ui-surface-muted);
  --bs-btn-disabled-border-color: var(--ui-border-subtle);
}

.btn-secondary {
  --bs-btn-token-source: var(--ui-color-secondary-bg);
  --bs-btn-color: var(--ui-btn-secondary-text);
  --bs-btn-bg: var(--ui-btn-secondary-bg);
  --bs-btn-border-color: var(--ui-btn-secondary-border);
  --bs-btn-hover-color: var(--ui-btn-secondary-text);
  --bs-btn-hover-bg: var(--ui-btn-secondary-hover-bg);
  --bs-btn-hover-border-color: var(--ui-btn-secondary-hover-border);
  --bs-btn-active-color: var(--ui-btn-secondary-text);
  --bs-btn-active-bg: var(--ui-btn-secondary-active-bg);
  --bs-btn-active-border-color: var(--ui-btn-secondary-active-border);
  --bs-btn-disabled-color: var(--ui-text-muted);
  --bs-btn-disabled-bg: var(--ui-surface-muted);
  --bs-btn-disabled-border-color: var(--ui-border-subtle);
}

.btn-info {
  --bs-btn-token-source: var(--ui-color-info);
  --bs-btn-color: var(--ui-color-info-strong);
  --bs-btn-bg: var(--ui-surface-transparent);
  --bs-btn-border-color: color-mix(in srgb, var(--ui-color-info) 62%, var(--ui-surface-raised));
  --bs-btn-hover-color: var(--ui-color-info-strong);
  --bs-btn-hover-bg: color-mix(in srgb, var(--ui-color-info) 12%, transparent);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--ui-color-info) 74%, var(--ui-surface-raised));
  --bs-btn-active-color: var(--ui-color-info-strong);
  --bs-btn-active-bg: color-mix(in srgb, var(--ui-color-info) 18%, transparent);
  --bs-btn-active-border-color: color-mix(in srgb, var(--ui-color-info) 82%, var(--ui-surface-raised));
  --bs-btn-disabled-color: var(--ui-color-info-strong);
  --bs-btn-disabled-bg: var(--ui-surface-muted);
  --bs-btn-disabled-border-color: var(--ui-border-subtle);
}

.btn-light {
  --bs-btn-token-source: var(--ui-surface-raised);
  --bs-btn-color: var(--ui-text-primary);
  --bs-btn-bg: var(--ui-surface-transparent);
  --bs-btn-border-color: var(--ui-border-subtle);
  --bs-btn-hover-color: var(--ui-text-primary);
  --bs-btn-hover-bg: var(--ui-surface-hover);
  --bs-btn-hover-border-color: var(--ui-border-strong);
  --bs-btn-active-color: var(--ui-text-primary);
  --bs-btn-active-bg: var(--ui-surface-active);
  --bs-btn-active-border-color: var(--ui-border-strong);
  --bs-btn-disabled-color: var(--ui-text-muted);
  --bs-btn-disabled-bg: var(--ui-surface-muted);
  --bs-btn-disabled-border-color: var(--ui-border-subtle);
}

.btn-danger {
  --bs-btn-token-source: var(--ui-color-danger);
  --bs-btn-color: var(--ui-btn-danger-text);
  --bs-btn-bg: var(--ui-btn-danger-bg);
  --bs-btn-border-color: var(--ui-btn-danger-border);
  --bs-btn-hover-color: var(--ui-btn-danger-text);
  --bs-btn-hover-bg: var(--ui-btn-danger-hover-bg);
  --bs-btn-hover-border-color: var(--ui-btn-danger-hover-border);
  --bs-btn-active-color: var(--ui-btn-danger-text);
  --bs-btn-active-bg: var(--ui-btn-danger-active-bg);
  --bs-btn-active-border-color: var(--ui-btn-danger-active-border);
  --bs-btn-disabled-color: var(--ui-color-danger-strong);
  --bs-btn-disabled-bg: var(--ui-surface-muted);
  --bs-btn-disabled-border-color: var(--ui-border-subtle);
}

.btn-success {
  --bs-btn-token-source: var(--ui-color-success);
  --bs-btn-color: var(--ui-color-success-strong);
  --bs-btn-bg: var(--ui-surface-transparent);
  --bs-btn-border-color: color-mix(in srgb, var(--ui-color-success) 62%, var(--ui-surface-raised));
  --bs-btn-hover-color: var(--ui-color-success-strong);
  --bs-btn-hover-bg: color-mix(in srgb, var(--ui-color-success) 12%, transparent);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--ui-color-success) 74%, var(--ui-surface-raised));
  --bs-btn-active-color: var(--ui-color-success-strong);
  --bs-btn-active-bg: color-mix(in srgb, var(--ui-color-success) 18%, transparent);
  --bs-btn-active-border-color: color-mix(in srgb, var(--ui-color-success) 82%, var(--ui-surface-raised));
  --bs-btn-disabled-color: var(--ui-color-success-strong);
  --bs-btn-disabled-bg: var(--ui-surface-muted);
  --bs-btn-disabled-border-color: var(--ui-border-subtle);
}

.btn-warning {
  --bs-btn-token-source: var(--ui-color-warning);
  --bs-btn-color: var(--ui-text-primary);
  --bs-btn-bg: var(--ui-surface-transparent);
  --bs-btn-border-color: color-mix(in srgb, var(--ui-color-warning) 62%, var(--ui-surface-raised));
  --bs-btn-hover-color: var(--ui-text-primary);
  --bs-btn-hover-bg: color-mix(in srgb, var(--ui-color-warning) 12%, transparent);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--ui-color-warning) 74%, var(--ui-surface-raised));
  --bs-btn-active-color: var(--ui-text-primary);
  --bs-btn-active-bg: color-mix(in srgb, var(--ui-color-warning) 18%, transparent);
  --bs-btn-active-border-color: color-mix(in srgb, var(--ui-color-warning) 82%, var(--ui-surface-raised));
  --bs-btn-disabled-color: var(--ui-text-primary);
  --bs-btn-disabled-bg: var(--ui-surface-muted);
  --bs-btn-disabled-border-color: var(--ui-border-subtle);
}

.btn-outline-primary {
  --bs-btn-token-source: var(--ui-color-action-text);
  --bs-btn-color: var(--ui-color-action-text);
  --bs-btn-border-color: var(--ui-btn-primary-border);
  --bs-btn-hover-color: var(--ui-color-action-text);
  --bs-btn-hover-bg: var(--ui-btn-primary-hover-bg);
  --bs-btn-hover-border-color: var(--ui-btn-primary-hover-border);
  --bs-btn-active-color: var(--ui-color-action-text);
  --bs-btn-active-bg: var(--ui-btn-primary-active-bg);
  --bs-btn-active-border-color: var(--ui-btn-primary-active-border);
  --bs-btn-disabled-color: var(--ui-color-action-text);
  --bs-btn-disabled-border-color: var(--ui-border-subtle);
}

.btn-outline-secondary {
  --bs-btn-token-source: var(--ui-text-secondary);
  --bs-btn-color: var(--ui-text-secondary);
  --bs-btn-border-color: var(--ui-btn-secondary-border);
  --bs-btn-hover-color: var(--ui-btn-secondary-text);
  --bs-btn-hover-bg: var(--ui-btn-secondary-hover-bg);
  --bs-btn-hover-border-color: var(--ui-btn-secondary-hover-border);
  --bs-btn-active-color: var(--ui-btn-secondary-text);
  --bs-btn-active-bg: var(--ui-btn-secondary-active-bg);
  --bs-btn-active-border-color: var(--ui-btn-secondary-active-border);
  --bs-btn-disabled-color: var(--ui-text-muted);
  --bs-btn-disabled-border-color: var(--ui-border-subtle);
}

.btn-outline-info {
  --bs-btn-token-source: var(--ui-color-info);
  --bs-btn-color: var(--ui-color-info-strong);
  --bs-btn-border-color: color-mix(in srgb, var(--ui-color-info) 62%, var(--ui-surface-raised));
  --bs-btn-hover-color: var(--ui-color-info-strong);
  --bs-btn-hover-bg: color-mix(in srgb, var(--ui-color-info) 12%, transparent);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--ui-color-info) 74%, var(--ui-surface-raised));
  --bs-btn-active-color: var(--ui-color-info-strong);
  --bs-btn-active-bg: color-mix(in srgb, var(--ui-color-info) 18%, transparent);
  --bs-btn-active-border-color: color-mix(in srgb, var(--ui-color-info) 82%, var(--ui-surface-raised));
  --bs-btn-disabled-color: var(--ui-color-info-strong);
  --bs-btn-disabled-border-color: var(--ui-border-subtle);
}

.btn-outline-danger {
  --bs-btn-token-source: var(--ui-color-danger);
  --bs-btn-color: var(--ui-btn-danger-text);
  --bs-btn-border-color: var(--ui-btn-danger-border);
  --bs-btn-hover-color: var(--ui-btn-danger-text);
  --bs-btn-hover-bg: var(--ui-btn-danger-hover-bg);
  --bs-btn-hover-border-color: var(--ui-btn-danger-hover-border);
  --bs-btn-active-color: var(--ui-btn-danger-text);
  --bs-btn-active-bg: var(--ui-btn-danger-active-bg);
  --bs-btn-active-border-color: var(--ui-btn-danger-active-border);
  --bs-btn-disabled-color: var(--ui-btn-danger-text);
  --bs-btn-disabled-border-color: var(--ui-border-subtle);
}

.btn-outline-success {
  --bs-btn-token-source: var(--ui-color-success);
  --bs-btn-color: var(--ui-color-success-strong);
  --bs-btn-border-color: color-mix(in srgb, var(--ui-color-success) 62%, var(--ui-surface-raised));
  --bs-btn-hover-color: var(--ui-color-success-strong);
  --bs-btn-hover-bg: color-mix(in srgb, var(--ui-color-success) 12%, transparent);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--ui-color-success) 74%, var(--ui-surface-raised));
  --bs-btn-active-color: var(--ui-color-success-strong);
  --bs-btn-active-bg: color-mix(in srgb, var(--ui-color-success) 18%, transparent);
  --bs-btn-active-border-color: color-mix(in srgb, var(--ui-color-success) 82%, var(--ui-surface-raised));
  --bs-btn-disabled-color: var(--ui-color-success-strong);
  --bs-btn-disabled-border-color: var(--ui-border-subtle);
}

.btn-outline-warning {
  --bs-btn-token-source: var(--ui-color-warning);
  --bs-btn-color: var(--ui-color-warning);
  --bs-btn-border-color: color-mix(in srgb, var(--ui-color-warning) 62%, var(--ui-surface-raised));
  --bs-btn-hover-color: var(--ui-text-primary);
  --bs-btn-hover-bg: color-mix(in srgb, var(--ui-color-warning) 12%, transparent);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--ui-color-warning) 74%, var(--ui-surface-raised));
  --bs-btn-active-color: var(--ui-text-primary);
  --bs-btn-active-bg: color-mix(in srgb, var(--ui-color-warning) 18%, transparent);
  --bs-btn-active-border-color: color-mix(in srgb, var(--ui-color-warning) 82%, var(--ui-surface-raised));
  --bs-btn-disabled-color: var(--ui-color-warning);
  --bs-btn-disabled-border-color: var(--ui-border-subtle);
}

.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-danger:focus-visible,
.btn-success:focus-visible,
.btn-warning:focus-visible,
.btn-info:focus-visible,
.btn-light:focus-visible,
.btn-outline-primary:focus-visible,
.btn-outline-secondary:focus-visible,
.btn-outline-danger:focus-visible,
.btn-outline-success:focus-visible,
.btn-outline-warning:focus-visible,
.btn-outline-info:focus-visible {
  box-shadow: var(--ui-focus-ring);
  outline: 0;
}

/* Containers */
.u-container-narrow { width: min(520px, 95vw) !important; max-width: 95vw !important; }
.u-container-medium { width: min(640px, 95vw) !important; max-width: 95vw !important; margin: 0 auto !important; }
.u-container-form { width: min(800px, 95vw) !important; max-width: 95vw !important; margin: 0 auto !important; }
.u-container-wide { width: min(960px, 95vw) !important; max-width: 95vw !important; margin: 0 auto !important; }
.u-max-w-520 { max-width: 520px !important; }
.u-max-w-70p { max-width: 70% !important; }
.u-w-1p { width: 1% !important; }
.u-w-90 { width: 90px !important; }
.u-w-240 { width: 240px !important; }
.u-w-48 { width: 48px !important; }
.u-w-160 { width: 160px !important; }
.u-min-w-150 { min-width: 150px !important; }
.u-max-w-240 { max-width: 240px !important; }
.u-w-10p { width: 10% !important; }
.u-w-12p { width: 12% !important; }
.u-w-15p { width: 15% !important; }
.u-w-16p { width: 16% !important; }
.u-w-18p { width: 18% !important; }
.u-w-24p { width: 24% !important; }
.u-w-28p { width: 28% !important; }
.u-w-36p { width: 36% !important; }
.u-max-w-120 { max-width: 120px !important; }
.u-field-inline-narrow { display: inline-block !important; min-width: 120px !important; width: 30% !important; }
.u-min-h-100 { min-height: 100px !important; }
.u-min-h-120 { min-height: 120px !important; }
.u-max-content-width { margin: 0 auto !important; width: min(100%, var(--content-max-width, 1100px)) !important; }


[hidden],
[hidden].u-flex,
[hidden].u-inline-flex,
[hidden].u-block { display: none !important; }