/* ============================================================================
   LIST GROUPS
   A list group is a set of sibling rows that read as one object: the
   container owns the frame (border, radius, clipping) and each row owns
   only a hairline against its predecessor. That is the whole trick — the
   old look drew a full border per row inside a bordered container, so
   every seam was two pixels of two different greys.

   Fill: rows are transparent and let the container's --bg-raise through,
   so a group on a card sits one step above it, and .card-section /
   .card-inset groups return to --bg-surface (see below). Only interactive
   rows (.list-group-item-action) respond to hover; a plain row is text,
   not a target, and lighting it up on hover is a lie.

   State — hover, active, contextual — is carried by the row's own fill and
   text colour across the full width of the row. Nothing is drawn in the
   left margin: an edge mark has to negotiate the frame's radius on the end
   rows and reads as an ornament stuck to the container rather than as a
   property of the row it belongs to.
   ============================================================================ */

.list-group {
    /* Row metrics live on the container so the size modifiers only have to
       reset two values instead of re-stating every rule. */
    --lg-pad-y: 0.6875rem;
    --lg-pad-x: 1rem;
    --lg-font-size: inherit;

    background: var(--bg-raise);
    border: 1px solid var(--border-normal);
    border-radius: 8px;
    overflow: hidden;
}

.card-section .list-group,
.card-inset .list-group,
.card fieldset .list-group {
    background: var(--bg-surface);
}

.list-group-item {
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--text-secondary);
    padding: var(--lg-pad-y) var(--lg-pad-x);
    font-size: var(--lg-font-size);
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* The seam between rows is the only structure inside the frame, so it
   reads at --border-normal; --border-subtle disappears against the row
   fill it is meant to divide. It has to hang off the adjacent-sibling
   selector because Bootstrap zeroes `.list-group-item + .list-group-item`
   at that same specificity, and it also spares the end rows a border they
   would only have to remove. */
.list-group-item + .list-group-item {
    border-top: 1px solid var(--border-normal);
}

/* Bootstrap pulls an active row up a pixel to cover the collapsed border
   above it. There is no collapsed border here, so that would misalign it. */
.list-group-item + .list-group-item.active {
    margin-top: 0;
}

/* The end rows carry the frame's inner radius (8px frame less its 1px
   border) so their fill still follows the curve in a group that scrolls,
   where overflow-y replaces the container's clip. */
.list-group-item:first-child {
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
}

.list-group-item:last-child {
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
}

.list-group-flush > .list-group-item {
    border-radius: 0;
}

/* --------------------------- INTERACTIVE ROWS ------------------------------ */

/* Bootstrap paints :focus #f8f9fa and :active #e9ecef — near-white slabs
   in either theme, and the :focus one outlives the click that set it, so
   a clicked row stays lit until something else takes focus. Neither is
   reachable by loading after it: they have to be answered by name. */
.list-group-item-action:focus,
.list-group-item-action:active {
    background: transparent;
    color: var(--text-secondary);
}

/* :focus-visible, not :focus, for the same reason — a mouse click must
   not leave the row looking hovered. Keyboard focus still gets the fill,
   plus the outline below. */
.list-group-item-action:hover,
.list-group-item-action:focus-visible {
    background: var(--surface-2);
    color: var(--text-primary);
}

.list-group-item-action:focus-visible {
    outline: 2px solid rgba(var(--bs-primary-rgb), 0.6);
    outline-offset: -2px;
}

/* The selected row is the one place a group carries hue, so the wash does
   the work alone: enough tint to hold at a glance, and a heavier, primary-
   coloured title so the row still reads as selected where the fill is
   washed out by a projector or a bright room. */
.list-group-item.active {
    background: rgba(var(--bs-primary-rgb), 0.14);
    color: var(--text-primary);
    font-weight: 500;
}

.list-group-item.active .list-group-item-title {
    color: var(--bs-primary);
    font-weight: 600;
}

.list-group-item-action.active:hover {
    background: rgba(var(--bs-primary-rgb), 0.2);
}

.list-group-item.disabled,
.list-group-item:disabled {
    background: transparent;
    color: var(--text-muted);
}

/* ------------------------------ ROW CONTENT -------------------------------- */

/* Two-line rows: a title that carries the row's identity and a quieter
   supporting line. Anything else in a row (badge, button, icon) is placed
   with the existing d-flex utilities. */
.list-group-item-title {
    display: block;
    color: var(--text-primary);
    font-weight: 500;
}

.list-group-item-meta {
    display: block;
    color: var(--text-muted);
    font-size: var(--lg-meta-size, 0.8125rem);
}

.list-group-item-action:hover .list-group-item-meta {
    color: var(--text-tertiary);
}

/* ------------------------------- MODIFIERS --------------------------------- */

/* Flush: no frame of its own, for a group that already sits inside one
   (a card body, a drawer, a scroll well). */
.list-group-flush {
    background: transparent;
    border: 0;
    border-radius: 0;
}

/* The meta line steps down with the row: at the default size it is the
   step below body copy, and in a small group it has to clear the row's own
   0.8125rem or the supporting line reads as a second title. */
.list-group-sm {
    --lg-pad-y: 0.375rem;
    --lg-pad-x: 0.75rem;
    --lg-font-size: 0.8125rem;
    --lg-meta-size: 0.6875rem;
}

.list-group-lg {
    --lg-pad-y: 1rem;
    --lg-pad-x: 1.25rem;
}

/* ------------------------------- VARIANTS ---------------------------------- */

/* A contextual row carries its hue in a faint wash and its text, not in a
   solid block: a group is mostly neutral rows, and one saturated slab in
   the middle of them reads as a broken row rather than a flagged one. */

.list-group-item-primary {
    --lg-accent-rgb: var(--bs-primary-rgb);
    --lg-accent-fg: var(--color-blue);
}

.list-group-item-secondary {
    --lg-accent-rgb: var(--bs-secondary-rgb);
    --lg-accent-fg: var(--color-gray);
}

.list-group-item-success {
    --lg-accent-rgb: var(--bs-success-rgb);
    --lg-accent-fg: var(--color-green);
}

.list-group-item-warning {
    --lg-accent-rgb: var(--bs-warning-rgb);
    --lg-accent-fg: var(--color-orange);
}

.list-group-item-danger {
    --lg-accent-rgb: var(--bs-danger-rgb);
    --lg-accent-fg: var(--color-red);
}

.list-group-item-info {
    --lg-accent-rgb: var(--bs-info-rgb);
    --lg-accent-fg: var(--color-purple);
}

.list-group-item-primary,
.list-group-item-secondary,
.list-group-item-success,
.list-group-item-warning,
.list-group-item-danger,
.list-group-item-info {
    background: rgba(var(--lg-accent-rgb), 0.12);
    color: var(--lg-accent-fg);
}

.list-group-item-primary .list-group-item-title,
.list-group-item-secondary .list-group-item-title,
.list-group-item-success .list-group-item-title,
.list-group-item-warning .list-group-item-title,
.list-group-item-danger .list-group-item-title,
.list-group-item-info .list-group-item-title {
    color: inherit;
}

a.list-group-item-primary:hover,
a.list-group-item-secondary:hover,
a.list-group-item-success:hover,
a.list-group-item-warning:hover,
a.list-group-item-danger:hover,
a.list-group-item-info:hover,
button.list-group-item-primary:hover,
button.list-group-item-secondary:hover,
button.list-group-item-success:hover,
button.list-group-item-warning:hover,
button.list-group-item-danger:hover,
button.list-group-item-info:hover {
    background: rgba(var(--lg-accent-rgb), 0.18);
    color: var(--lg-accent-fg);
}