/* ─────────────────────────────────── */
/* COMPONENT: Collapsible group        */
/* ─────────────────────────────────── */

.group {
    border-top: 1px solid var(--color-grey-300);
    border-bottom: 1px solid var(--color-grey-300);
}

/* avoid double border between adjacent groups */
.group+.group {
    border-top: none;
}

/* Expanded groups get blue-dark 2px borders. 
   Adjacent groups share the preceding group's bottom border as the
   visual divider, so an active group following another group suppresses
   its own top, and the preceding group gets a 2px blue bottom instead. */
.group[data-active='true'] {
    border-top: 2px solid var(--color-blue-dark);
    border-bottom: 2px solid var(--color-blue-dark);
}

.group+.group[data-active='true'] {
    border-top: none;
}

.group[data-active='true']+.group {
    border-top: none;
}

.group:has(+ .group[data-active='true']) {
    border-bottom: 2px solid var(--color-blue-dark);
}

.group__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
}

.group__label {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: var(--space-2);
    row-gap: var(--space-1);
    font-size: var(--font-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-subtle);
    text-align: left;
    padding: var(--space-1) 0;
    transition: color var(--transition-fast);
}

.group__label:hover {
    color: var(--color-blue-dark);
}

.group__header:has(.group__label:hover) .group__label-icon[data-role="data-indicator"] {
    color: var(--color-blue-dark);
}

.group[data-active='true']>.group__header .group__label {
    color: var(--color-blue-dark);
    font-weight: var(--weight-bold);
}

.group[data-active='true']>.group__header .group__label-icon[data-role="data-indicator"] {
    color: var(--color-blue-dark);
}

.group__label-text {
    flex: 0 1 auto;
    min-width: 0;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.group__label-text strong {
    font-weight: var(--weight-bold);
}

/* When label contains an icon, switch to flex so icon sits next to text */
.group__label-text:has(.group__label-icon),
.group__label-text:has([data-badges-for]) {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Gap between badges within a header badge container */
[data-badges-for] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.group__label-text:has(.group__label-icon) strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.group__label-icon {
    font-size: var(--icon-md);
    flex-shrink: 0;
    color: var(--color-grey-500);
}

.group__label-icon[data-role="data-indicator"] {
    font-size: var(--icon-sm);
}

.group__label-icon[data-state="full"] {
    font-variation-settings: 'FILL' 1;
}

.group__label-icon--green {
    color: var(--color-green);
}

.group__label-icon--yellow {
    color: var(--color-orange);
}

.group__label-icon--hidden {
    display: none;
}

.group__label-count {
    font-size: var(--font-xs);
    font-weight: var(--weight-bold);
    color: inherit;
    flex-shrink: 0;
}

.group__label-count--hidden {
    display: none;
}

/* Group header value preview — second row inside the group__label button */
.group__preview {
    flex-basis: 100%;
    font-size: var(--font-xs);
    color: var(--color-text-subtle);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
    padding-left: calc(var(--icon-sm) + var(--space-2));
    padding-bottom: var(--space-1);
    font-style: italic;
}

.group__preview:empty {
    display: none;
}

.group__label:hover .group__preview {
    color: var(--color-blue-dark);
}

.group[data-active='true']>.group__header .group__preview {
    color: var(--color-blue-dark);
}

.group__label-value {
    font-weight: inherit;
}

.group__label-chevron {
    font-size: var(--icon-sm);
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}

.group[data-active='false'] .group__label-chevron {
    transform: rotate(-90deg);
}

.group__body {
    padding-bottom: var(--space-8);
}

.group[data-active='true'] {
    padding-bottom: var(--space-3);
}

.group[data-active='false'] .group__body {
    display: none;
}

/* Dynamic pill containers sit inline with surrounding pills */
.pill-row>[data-role='dynamic-tag-pills'],
.pill-row>[data-role='dynamic-resources-held-pills'],
.pill-row>[data-role='dynamic-resources-required-pills'] {
    display: contents;
}

.group__cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: var(--space-2);
    padding-bottom: var(--space-2);
}