.OdaSummaryMetric.GanttSidebarSection {
    padding: 5px 15px 5px 5px;
}

.OdaSummaryMetric-taskCount--noFilterButton {
    margin-right: 44px;
    padding: 3px 0;
}

.OdaSummaryMetric-rowList {
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.OdaSummaryMetric-listItem {
    padding: 5px 0;
}

.OdaSummaryMetric-listItem:not(:last-of-type) {
    border-bottom: 1px dashed var(--border-color);
}

.OdaSummaryMetric-row,
.OdaSummaryMetric .GanttSidebarSection-header {
    border-radius: 4px;
    margin-right: -5px;
    padding: 8px 5px;
    position: relative;
}

.OdaSummaryMetric .GanttSidebarSection-header {
    height: 30px;
}

.OdaSummaryMetric:not(.GanttSidebarSection--collapsible) .GanttSidebarSection-header {
    padding-left: 25px;
}

.OdaSummaryMetric-row {
    display: flex;
    gap: 6px;
}

.OdaSummaryMetric-row:hover,
.OdaSummaryMetric .GanttSidebarSection-header:hover {
    background-color: var(--bg-color-light);
}

.OdaSummaryMetric-row.highlighted,
.OdaSummaryMetric.highlighted .GanttSidebarSection-header {
    background-color: var(--bg-color-dark);
    color: var(--text-white);
}

.OdaSummaryMetric-rowText {
    line-height: 17px;
    align-self: center;
}

.OdaSummaryMetric-rowCount {
    margin-left: auto;
    text-align: right;
    width: 25px;
}

/* Button overrides
    AR: high specificity is needed to override default iconOnly styles */
.OdaSummaryMetric-filterButton.Btn {
    background-color: transparent;
    border-color: transparent;
    flex-shrink: 0;
    height: 18px;
}

.OdaSummaryMetric-filterButton.Btn:focus {
    box-shadow: none;
}

.OdaSummaryMetric-filterButton.Btn:focus-visible {
    outline: none;
}

.OdaSummaryMetric-filterButton.Btn:not(:disabled, .disabled):active,
.OdaSummaryMetric-filterButton.Btn:not(:disabled, .disabled):active:focus {
    /* AR: although bootstrap typically displays a focus ring on :focus */

    /* (i.e. shows up for keyboard focus and when clicked) */

    /* this looks a bit much for these large rows. I've chosen to remove this and target :focus-visible instead */

    /* (only visible via keyboard nav) */
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
}

.btn.btn-light .OdaSummaryMetric-filterButtonIcon {
    color: var(--text-color);
}

/* !important used here as this is an override - we always want all highlighted row's icons to be coloured white.
   This ensures that even if the icons change or new ones are added then colouring is covered.
   */
.OdaSummaryMetric-row.highlighted i,
.OdaSummaryMetric.highlighted i {
    color: var(--text-white) !important;
}

/* END: button overrides */

/* Making the row have the accessibility and target of a button:
    https://kittygiraudel.com/2022/04/02/accessible-cards/
 */

.OdaSummaryMetric-filterButton::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 4px;
}

.OdaSummaryMetric-filterButton:focus-visible::before {
    box-shadow: 0 0 0 0.2rem var(--bg-color-light-focus-ring);
}

.OdaSummaryMetric-row.highlighted .OdaSummaryMetric-filterButton:focus-visible::before,
.OdaSummaryMetric.highlighted .GanttSidebarSection-header .OdaSummaryMetric-filterButton:focus-visible::before {
    box-shadow: 0 0 0 0.2rem var(--bg-color-dark-focus-ring);
}

/* END: Making row have the accessibility of a button */

/* colour classes for icons */

.great-matches {
    color: var(--success);

    /* color: var(--success-green-d3); */
}

.trade-offs {
    /* color: var(--info-blue); */
    color: var(--info);
}

.unassignable {
    /* color: var(--alert-error); */
    color: var(--danger); /* NB: this colour is much darker than before */
}