/* Training and supplier screens opt in; dialog portals carry the same class. */
.cm-reference-theme {
    color: var(--mud-palette-text-primary);
}

.cm-reference-theme :is(.form-control, .form-select) {
    color: var(--mud-palette-text-primary);
    background-color: var(--mud-palette-surface);
    border-color: var(--mud-palette-lines-inputs);
}
.cm-reference-theme :is(.form-control, .form-select):focus {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--mud-palette-primary) 25%, transparent);
}
.cm-reference-theme .form-control::placeholder {
    color: var(--mud-palette-text-secondary);
    opacity: 1;
}
.cm-reference-theme :is(.form-control, .form-select):is(:disabled, [readonly]) {
    color: var(--mud-palette-text-disabled);
    background-color: var(--app-surface-subtle);
}
.cm-reference-theme select:is(.form-control, .form-select) {
    /* The native arrow follows color-scheme; Bootstrap's embedded arrow is black. */
    background-image: none;
    appearance: auto;
}
.cm-reference-theme select option {
    color: var(--mud-palette-text-primary);
    background-color: var(--mud-palette-surface);
}
.cm-reference-theme input[type="checkbox"] { accent-color: var(--mud-palette-primary); }
.cm-reference-theme .text-secondary { color: var(--mud-palette-text-secondary) !important; }
.cm-reference-theme .deep-purple-text { color: var(--mud-palette-info) !important; }
.cm-reference-theme .border-danger { border-color: var(--mud-palette-error) !important; }
.cm-reference-theme .bg-danger.bg-opacity-10 { background-color: var(--app-tint-error) !important; }
.cm-reference-theme .bg-secondary.bg-opacity-25 { background-color: var(--app-surface-hover) !important; }
.cm-reference-theme .card {
    color: var(--mud-palette-text-primary);
    background-color: var(--app-surface-raised);
    border-color: var(--mud-palette-divider);
}
.cm-reference-theme .table-secondary {
    --bs-table-bg: var(--app-surface-hover);
    --bs-table-striped-bg: var(--app-surface-hover);
    --bs-table-hover-bg: var(--app-surface-hover);
    color: var(--mud-palette-text-primary);
    border-color: var(--mud-palette-divider);
}
.cm-reference-theme .nav-tabs { border-color: var(--mud-palette-divider); }
.cm-reference-theme .nav-tabs .nav-link { color: var(--mud-palette-text-secondary); }
.cm-reference-theme .nav-tabs .nav-link:is(:hover, :focus-visible) {
    color: var(--mud-palette-text-primary);
    border-color: var(--mud-palette-divider);
    background-color: var(--app-surface-hover);
}
.cm-reference-theme .nav-tabs .nav-link.active {
    color: var(--mud-palette-primary);
    background-color: var(--mud-palette-surface);
    border-color: var(--mud-palette-divider) var(--mud-palette-divider) var(--mud-palette-surface);
}
.cm-reference-theme .dropdown-menu {
    color: var(--mud-palette-text-primary);
    background-color: var(--app-surface-raised);
    border-color: var(--mud-palette-divider);
}
.cm-reference-theme .dropdown-item { color: var(--mud-palette-text-primary); }
.cm-reference-theme .dropdown-item:is(:hover, :focus) {
    color: var(--mud-palette-text-primary);
    background-color: var(--app-surface-hover);
}

/* Preserve the meaning of ratings and actions while using the active palette. */
.cm-reference-theme :is(.btn-primary, .bg-primary) { --cm-accent: var(--mud-palette-primary); --cm-contrast: light-dark(var(--mud-palette-primary-text), #181818); }
.cm-reference-theme :is(.btn-success, .bg-success) { --cm-accent: var(--mud-palette-success); --cm-contrast: light-dark(var(--mud-palette-success-text), #181818); }
.cm-reference-theme :is(.btn-warning, .bg-warning) { --cm-accent: var(--mud-palette-warning); --cm-contrast: light-dark(var(--mud-palette-warning-text), #181818); }
.cm-reference-theme :is(.btn-danger, .bg-danger) { --cm-accent: var(--mud-palette-error); --cm-contrast: light-dark(var(--mud-palette-error-text), #181818); }
.cm-reference-theme :is(.btn-info, .bg-info) { --cm-accent: var(--mud-palette-info); --cm-contrast: light-dark(var(--mud-palette-info-text), #181818); }
.cm-reference-theme :is(.btn-secondary, .bg-secondary, .btn-light, .bg-light) { --cm-accent: var(--app-surface-hover); --cm-contrast: var(--mud-palette-text-primary); }
.cm-reference-theme :is(.btn-primary, .btn-success, .btn-warning, .btn-danger, .btn-info, .btn-secondary, .btn-light),
.cm-reference-theme :is(.badge, .form-select):is(.bg-primary, .bg-success, .bg-warning, .bg-danger, .bg-info, .bg-secondary, .bg-light) {
    color: var(--cm-contrast) !important;
    background-color: var(--cm-accent) !important;
    border-color: var(--cm-accent);
}
.cm-reference-theme .btn-outline-secondary {
    color: var(--mud-palette-text-primary);
    background-color: var(--app-outlined-button-background);
    border-color: var(--mud-palette-lines-inputs);
}
.cm-reference-theme .btn:not(:disabled):is(:hover, :focus-visible) {
    box-shadow: inset 0 0 0 100vmax color-mix(in srgb, currentColor 10%, transparent);
}
.cm-reference-theme .btn:focus-visible,
.cm-reference-theme .nav-link:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* Bootstrap uses currentColor for the heavier header separator. */
.cm-reference-theme .table > :not(:first-child),
.cm-reference-theme .table > :not(:last-child) > :last-child > * {
    border-color: var(--mud-palette-divider);
}

/* Dark palette accents are light; their labels need a dark foreground. */
.cm-reference-theme .mud-button-filled:is(.mud-button-filled-primary, .mud-button-filled-info, .mud-button-filled-success, .mud-button-filled-warning, .mud-button-filled-error):not(:disabled) {
    color: light-dark(var(--mud-theme-on-filled), #181818);
}
.cm-reference-theme .mud-button-filled-primary { --mud-theme-on-filled: var(--mud-palette-primary-text); }
.cm-reference-theme .mud-button-filled-info { --mud-theme-on-filled: var(--mud-palette-info-text); }
.cm-reference-theme .mud-button-filled-success { --mud-theme-on-filled: var(--mud-palette-success-text); }
.cm-reference-theme .mud-button-filled-warning { --mud-theme-on-filled: var(--mud-palette-warning-text); }
.cm-reference-theme .mud-button-filled-error { --mud-theme-on-filled: var(--mud-palette-error-text); }