/* Fit the whole salience report page within the viewport: header, filters and
   legend keep their natural height, the table area flexes to fill what's left
   and scrolls internally instead of growing the page. */
.salience-main-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.salience-content-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.salience-content-wrapper .filters {
    flex-shrink: 0;
}

.salience-content-wrapper .table-container {
    flex: 1;
    min-height: 0;
    display: flex;
    overflow: hidden;
}

.salience-content-wrapper .table-container .card {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.salience-content-wrapper .table-container .salience-legend {
    flex-shrink: 0;
}

.salience-content-wrapper .table-container .table-responsive {
    flex: 1;
    min-height: 0;
    max-height: none;
}

.salience-content-wrapper .table-container .card > div:last-child {
    flex-shrink: 0;
}

/* Distinguishable color palette shared by the legend and the table column groups.
   The class breakdown (A/B/C/D/N/A/...) is dynamic - however many classes the
   API returns, they all share the single --salience-cat-* color below. */
:root {
    --salience-sales-bg: #d6e8fc;
    --salience-sales-border: #3f7dd9;

    --salience-cat-bg: #d7f2dc;
    --salience-cat-border: #2f9e44;

    --salience-uo-bg: #c9f1ec;
    --salience-uo-border: #129c8d;

    --salience-uni-bg: #e1d6fb;
    --salience-uni-border: #7c4fd1;
}

/* Legend showing column-group colors used in the salience table */
.salience-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1.5rem;
    padding: 0.65rem 1rem;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
}

.salience-legend-groups {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
}

.legend-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #495057;
    white-space: nowrap;
}

.legend-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    flex-shrink: 0;
}

.legend-swatch.group-sales {
    background-color: var(--salience-sales-bg);
    border: 2px solid var(--salience-sales-border);
}
.legend-swatch.group-cat {
    background-color: var(--salience-cat-bg);
    border: 2px solid var(--salience-cat-border);
}
.legend-swatch.group-uo {
    background-color: var(--salience-uo-bg);
    border: 2px solid var(--salience-uo-border);
}
.legend-swatch.group-uni {
    background-color: var(--salience-uni-bg);
    border: 2px solid var(--salience-uni-border);
}

.salience-legend-abbr {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.9rem;
    font-size: 0.78rem;
    color: #6c757d;
}

.salience-legend-abbr strong {
    color: #343a40;
    margin-right: 0.2rem;
}

/* Salience table column-group background and border styles */
.salience-table {
    border-collapse: separate; /* allow thicker group borders */
    border-spacing: 0;
}

/* Force content-fit column widths instead of stretching to fill the container */
.salience-table {
    table-layout: auto !important;
    width: auto !important;
    min-width: unset !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.salience-table th,
.salience-table td {
    width: auto !important;
    min-width: unset !important;
    max-width: none !important;
    white-space: nowrap !important;
}

.salience-table thead th,
.salience-table tbody td,
.salience-table tfoot td {
    transition: background-color 120ms ease;
}

/* Consistent grid border across the whole table. With border-collapse:
   separate (needed below for the colored group-edge borders to render at
   full thickness), giving every cell a border on all four sides makes
   adjacent cells each draw their own line, doubling the visual thickness
   between columns/rows while the table's outer edges only get one cell's
   line (so they look thinner). Drawing only the right/bottom edge on every
   cell, then adding the left edge on the first column and the top edge on
   the first header row, produces a single 1px line everywhere. The colored
   group-edge borders below override individual sides via higher selector
   specificity. */
.salience-table thead th,
.salience-table tbody td,
.salience-table tfoot td {
    border-left: none;
    border-top: none;
    border-right: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
}
.salience-table thead th:first-child,
.salience-table tbody td:first-child,
.salience-table tfoot td:first-child {
    border-left: 1px solid #dee2e6;
}
.salience-table thead tr:first-child th {
    border-top: 1px solid #dee2e6;
}

/* Make group borders visually consistent with existing cell borders */
.salience-table thead th,
.salience-table tbody td,
.salience-table tfoot td {
    box-sizing: border-box;
}

/* Class-based group background/border selectors shared by thead, tbody, and
   tfoot. The number of "cat" column pairs is dynamic (whatever classes the
   API returns), so grouping can't rely on nth-child column positions —
   every cell carries its group-* class, plus edge-left/edge-right on the
   cells at a group's left/right boundary, directly from JS. */
.salience-table thead th.group-sales,
.salience-table tbody td.group-sales,
.salience-table tfoot td.group-sales {
    background-color: var(--salience-sales-bg) !important;
}
.salience-table thead th.group-cat,
.salience-table tbody td.group-cat,
.salience-table tfoot td.group-cat {
    background-color: var(--salience-cat-bg) !important;
}
.salience-table thead th.group-uo,
.salience-table tbody td.group-uo,
.salience-table tfoot td.group-uo {
    background-color: var(--salience-uo-bg) !important;
}
.salience-table thead th.group-uni,
.salience-table tbody td.group-uni,
.salience-table tfoot td.group-uni {
    background-color: var(--salience-uni-bg) !important;
}

.salience-table thead th.group-sales.edge-left,
.salience-table tbody td.group-sales.edge-left,
.salience-table tfoot td.group-sales.edge-left {
    border-left: 3px solid var(--salience-sales-border) !important;
}
.salience-table thead th.group-sales.edge-right,
.salience-table tbody td.group-sales.edge-right,
.salience-table tfoot td.group-sales.edge-right {
    border-right: 3px solid var(--salience-sales-border) !important;
}
.salience-table thead th.group-cat.edge-left,
.salience-table tbody td.group-cat.edge-left,
.salience-table tfoot td.group-cat.edge-left {
    border-left: 3px solid var(--salience-cat-border) !important;
}
.salience-table thead th.group-cat.edge-right,
.salience-table tbody td.group-cat.edge-right,
.salience-table tfoot td.group-cat.edge-right {
    border-right: 3px solid var(--salience-cat-border) !important;
}
.salience-table thead th.group-uo.edge-left,
.salience-table tbody td.group-uo.edge-left,
.salience-table tfoot td.group-uo.edge-left {
    border-left: 3px solid var(--salience-uo-border) !important;
}
.salience-table thead th.group-uo.edge-right,
.salience-table tbody td.group-uo.edge-right,
.salience-table tfoot td.group-uo.edge-right {
    border-right: 3px solid var(--salience-uo-border) !important;
}
.salience-table thead th.group-uni.edge-left,
.salience-table tbody td.group-uni.edge-left,
.salience-table tfoot td.group-uni.edge-left {
    border-left: 3px solid var(--salience-uni-border) !important;
}
.salience-table thead th.group-uni.edge-right,
.salience-table tbody td.group-uni.edge-right,
.salience-table tfoot td.group-uni.edge-right {
    border-right: 3px solid var(--salience-uni-border) !important;
}

.salience-table thead th {
    text-align: center;
}

/* Outermost bottom border for the table, matching the top border drawn via
   the ::after pseudo-element in layout.css for the (sticky) header row. */
.salience-table tbody tr:last-child td {
    border-bottom: 1px solid #dee2e6;
}

/* Sticky total / average footer row */
.salience-table tfoot td {
    position: sticky;
    bottom: 0;
    z-index: 2;
    font-weight: 700;
    border-top: 2px solid #6c757d !important;
}