/*
 * Text contrast fixes (WCAG 1.4.3, minimum 4.5:1).
 * The light brand teal (#4EB1BA) and Bootstrap's subtle badges are too light for
 * text, so text and text-on-colour states use the darker brand teal (#2E7291).
 */

/* Active tabs and selected toggle buttons: white text on dark teal */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.btn-check:checked + .btn-outline-primary,
.btn-check:checked + .btn,
.btn-check:checked + .btn:hover {
    background-color: #2E7291 !important;
    border-color: #2E7291 !important;
    color: #ffffff !important;
}

/* Outline buttons: dark teal text and border, filled on hover */
.btn-outline-primary {
    color: #2E7291 !important;
    border-color: #2E7291 !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus-visible,
.btn-outline-primary:active {
    background-color: #2E7291 !important;
    border-color: #2E7291 !important;
    color: #ffffff !important;
}

/* Bootstrap subtle badges: darker text on the light tint */
.badge.text-success,
.badge.bg-success-subtle,
.badge-soft-success {
    color: #0f5132 !important;
}
.badge.text-warning,
.badge.bg-warning-subtle {
    color: #664d03 !important;
}
.badge.text-danger,
.badge.bg-danger-subtle {
    color: #842029 !important;
}
.badge.text-info,
.badge.bg-info-subtle {
    color: #055160 !important;
}

/* Green action buttons: darker green behind white text */
.action-btn-success {
    background: #047857 !important;
}

/* Grey helper text on light grey panels */
.fe-self_assessments-questions-page .fe-self_assessments-questions-page-display {
    color: #565e64 !important;
}

/* "Learn More" links on light grey cards */
[id^="previewArtifactBtn"] {
    color: #0a58ca !important;
}

/* Clear-search buttons: at least 24x24px to tap (WCAG 2.5.8) */
#clearSearch {
    min-width: 28px;
    min-height: 28px;
    align-items: center;
    justify-content: center;
}
#clearSearch svg {
    width: 16px;
    height: 16px;
}

/* Reflow (WCAG 1.4.10): no sideways scrolling.
 * Bootstrap rows placed straight in an unpadded container stick out by their
 * negative side margins; grid cards must be allowed to shrink to their column. */
#main-content > .row,
section.content > .row,
.section-content > .row {
    margin-left: 0;
    margin-right: 0;
}
.artifacts-grid-view > li {
    min-width: 0;
    overflow-wrap: anywhere;
}