/*
 * Compact, readable data tables. Use on an HxGrid with:
 *   TableCssClass="data-grid" TableContainerCssClass="data-grid-scroll" Responsive="false"
 * Inside an HxCard put the grid in ChildContent (not BodyTemplate), so the table fills the card edge to edge.
 */

.data-grid-scroll {
    max-height: calc(100vh - 20rem);
    overflow: auto;
}

/* Smaller list next to other content */
.data-grid-scroll.data-grid-scroll-sm {
    max-height: 28rem;
}

/* Rounded bottom corners of the card stay visible */
.card > .data-grid-scroll:last-child {
    border-bottom-left-radius: var(--bs-card-inner-border-radius);
    border-bottom-right-radius: var(--bs-card-inner-border-radius);
}

/* The card header already has a border, the table header does not need one on top */
.card > .data-grid-scroll .data-grid > thead > tr > th {
    border-top: 0;
}

/* First and last column aligned with the card header text */
.card .data-grid > * > tr > :first-child {
    padding-left: var(--bs-card-spacer-x);
}

.card .data-grid > * > tr > :last-child {
    padding-right: var(--bs-card-spacer-x);
}

.data-grid {
    --bs-table-bg: transparent;
    font-size: .875rem;
    margin-bottom: 0;
}

    /* Header: small, calm, stays visible while scrolling */
    .data-grid > thead > tr > th {
        position: sticky;
        top: 0;
        z-index: 2;
        padding: .6rem .75rem;
        background: var(--bs-tertiary-bg);
        color: var(--bs-secondary-color);
        font-size: .72rem;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
        white-space: nowrap;
        border-bottom: 1px solid var(--bs-border-color);
    }

        .data-grid > thead > tr > th a {
            color: inherit;
            text-decoration: none;
        }

    .data-grid > tbody > tr > td {
        padding: .5rem .75rem;
        vertical-align: middle;
        border-color: var(--bs-border-color-translucent);
    }

    .data-grid > tbody > tr:hover > td {
        background: var(--bs-tertiary-bg);
    }

    /* Rows that open something on click */
    .data-grid.clickable > tbody > tr {
        cursor: pointer;
    }

    /* Totals row */
    .data-grid > tfoot > tr > td {
        position: sticky;
        bottom: 0;
        z-index: 2;
        padding: .6rem .75rem;
        background: var(--bs-tertiary-bg);
        font-weight: 600;
        white-space: nowrap;
        border-top: 2px solid var(--bs-border-color);
        border-bottom: 0;
    }

    /* Amounts and quantities: right aligned, digits below each other */
    .data-grid .num {
        text-align: right;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }

    /* Two-line cell: main value with a muted line below */
    .data-grid .cell-main {
        font-weight: 500;
        line-height: 1.3;
    }

    .data-grid .cell-sub {
        font-size: .75rem;
        line-height: 1.3;
        color: var(--bs-secondary-color);
    }

    /* Long text on one line, full text in the tooltip */
    .data-grid .clip {
        display: block;
        max-width: 18rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .data-grid .clip-sm {
        max-width: 11rem;
    }

    /* Changed value (import) and the previous value */
    .data-grid .changed,
    .changed-legend {
        padding: .05rem .35rem;
        border-radius: .3rem;
        background: var(--bs-warning-bg-subtle);
        color: var(--bs-warning-text-emphasis);
        font-weight: 600;
    }

    .data-grid .was {
        font-size: .75rem;
        color: var(--bs-secondary-color);
        text-decoration: line-through;
    }

/*
 * Virtualized list with the same look as a .data-grid table (e.g. the article list).
 * Rows are CSS grid rows with a fixed height, set grid-template-columns on the page.
 */
.list-grid {
    font-size: .875rem;
    min-width: 900px;
}

.list-grid-row {
    display: grid;
    align-items: center;
    column-gap: 1rem;
    height: 52px;
    padding: 0 var(--bs-card-spacer-x, 1rem);
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

    .list-grid-row > * {
        min-width: 0;
    }

    .list-grid-row .clip {
        max-width: none;
    }

.list-grid-header {
    position: sticky;
    top: 0;
    z-index: 2;
    height: auto;
    padding-top: .6rem;
    padding-bottom: .6rem;
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 1px solid var(--bs-border-color);
}

    .list-grid-header .sortable {
        cursor: pointer;
        user-select: none;
    }

        .list-grid-header .sortable:hover {
            color: var(--bs-body-color);
        }

.list-grid-row:not(.list-grid-header):hover {
    background: var(--bs-tertiary-bg);
}

.list-grid-row.selected,
.list-grid-row.selected:hover {
    background: var(--bs-primary-bg-subtle);
}

.list-grid-row.inactive > :not(.row-actions) {
    opacity: .55;
}

/* Row buttons only on hover or selection, keeps the list calm */
.list-grid-row .row-actions {
    display: flex;
    justify-content: flex-end;
    gap: .25rem;
    opacity: 0;
    transition: opacity .1s;
}

.list-grid-row:hover .row-actions,
.list-grid-row.selected .row-actions {
    opacity: 1;
}

.list-grid-empty {
    padding: 2rem var(--bs-card-spacer-x, 1rem);
    color: var(--bs-secondary-color);
}

/* Small feature icons (weight, scale, promotion...) */
.feature-icons {
    display: flex;
    gap: .4rem;
    color: var(--bs-secondary-color);
}

/* Margin percentage */
.margin-badge {
    display: inline-block;
    min-width: 4.2rem;
    padding: .15rem .45rem;
    border-radius: 1rem;
    font-size: .78rem;
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

    .margin-badge.good {
        background: var(--bs-success-bg-subtle);
        color: var(--bs-success-text-emphasis);
    }

    .margin-badge.low {
        background: var(--bs-warning-bg-subtle);
        color: var(--bs-warning-text-emphasis);
    }

    .margin-badge.negative {
        background: var(--bs-danger-bg-subtle);
        color: var(--bs-danger-text-emphasis);
    }

    .margin-badge.none {
        background: var(--bs-tertiary-bg);
        color: var(--bs-secondary-color);
    }

/* KPI tiles above a report */
.kpi-tile {
    height: 100%;
    padding: .85rem 1rem;
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: var(--bs-border-radius-lg);
    background: var(--bs-body-bg);
}

    .kpi-tile .kpi-label {
        font-size: .72rem;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--bs-secondary-color);
    }

    .kpi-tile .kpi-value {
        margin-top: .15rem;
        font-size: 1.35rem;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    .kpi-tile .kpi-sub {
        font-size: .78rem;
        color: var(--bs-secondary-color);
    }