/*
 * The sold-items report table.
 *
 * It is a pivot: a lot of columns, a lot of rows, and every number only means
 * something together with the label at the start of its row and the week at the
 * top of its column. So both of those stay frozen in place, as do the totals —
 * the reader can scroll to the far side of a year without losing the thread.
 */

.report {
    --report-head-height: 2rem;
    --report-heat: var(--primary);
}

.report-scroll {
    max-height: min(70vh, 44rem);
    overflow: auto;
    overscroll-behavior-x: contain;
}

.report-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.8125rem;
    line-height: 1.125rem;
    /* Digits of equal width: a column of figures only reads as a column when
       the decimal points line up. */
    font-variant-numeric: tabular-nums;
}

.report-table th,
.report-table td {
    padding: 0.3125rem 0.75rem;
    white-space: nowrap;
    text-align: right;
    background-color: var(--background);
    border-bottom: 1px solid var(--border);
}

/* --- Frozen headers ------------------------------------------------------ */

.report-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    height: var(--report-head-height);
    font-weight: 500;
    color: var(--muted-foreground);
    /* An inset shadow rather than a border: a sticky cell's own border scrolls
       away with the box, the shadow does not. */
    box-shadow: inset 0 -1px 0 var(--border);
    border-bottom: 0;
}

.report-table thead.report-head-nested .report-weeks th {
    top: var(--report-head-height);
}

.report-table .report-month {
    text-align: center;
    font-weight: 600;
    color: var(--foreground);
    text-transform: capitalize;
}

/* --- Frozen label column ------------------------------------------------- */

.report-table .report-label {
    position: sticky;
    left: 0;
    z-index: 2;
    /* A fixed width so the spare width of a narrow report goes to the figures
       rather than stretching the labels across half the screen. */
    width: 18rem;
    min-width: 14rem;
    max-width: 24rem;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    box-shadow: 1px 0 0 var(--border);
}

.report-table thead .report-label {
    z-index: 4;
    box-shadow: 1px 0 0 var(--border), inset 0 -1px 0 var(--border);
}

/* --- Frozen total column ------------------------------------------------- */

.report-table .report-total {
    position: sticky;
    right: 0;
    z-index: 2;
    font-weight: 600;
    box-shadow: -1px 0 0 var(--border);
}

.report-table thead .report-total {
    z-index: 4;
    color: var(--foreground);
    box-shadow: -1px 0 0 var(--border), inset 0 -1px 0 var(--border);
}

/* The first week of a month gets a rule down its left-hand side, so a month
   reads as a block instead of a run of numbers. */
.report-boundary {
    border-left: 1px solid var(--border);
}

/* --- Rows ---------------------------------------------------------------- */

.report-table .report-row-group > * {
    background-color: var(--muted);
    font-weight: 600;
    color: var(--foreground);
}

.report-table .report-row-group .report-label {
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.report-table .report-row-item .report-label {
    padding-left: 1.75rem;
    color: var(--foreground);
}

.report-row-item:hover > * {
    background-color: color-mix(in oklab, var(--report-heat) 7%, var(--background));
}

.report-row-item.is-hidden {
    display: none;
}

/* --- Cells --------------------------------------------------------------- */

/* Shaded against the row's own best column, so a week that stands out can be
   spotted without reading a single number. */
.report-cell[data-heat='1'] {
    background-color: color-mix(in oklab, var(--report-heat) 5%, var(--background));
}

.report-cell[data-heat='2'] {
    background-color: color-mix(in oklab, var(--report-heat) 11%, var(--background));
}

.report-cell[data-heat='3'] {
    background-color: color-mix(in oklab, var(--report-heat) 18%, var(--background));
}

.report-cell[data-heat='4'] {
    background-color: color-mix(in oklab, var(--report-heat) 27%, var(--background));
}

/* A reversed sale reads as a loss, and should look like one. */
.report-negative {
    color: var(--destructive);
}

.report-blank {
    color: color-mix(in oklab, var(--muted-foreground) 40%, transparent);
}

/* --- Closing total ------------------------------------------------------- */

.report-table tfoot th,
.report-table tfoot td {
    position: sticky;
    bottom: 0;
    z-index: 3;
    font-weight: 600;
    color: var(--foreground);
    background-color: var(--muted);
    border-bottom: 0;
    box-shadow: inset 0 1px 0 var(--border);
}

.report-table tfoot .report-label {
    z-index: 5;
    box-shadow: 1px 0 0 var(--border), inset 0 1px 0 var(--border);
}

.report-table tfoot .report-total {
    z-index: 5;
    box-shadow: -1px 0 0 var(--border), inset 0 1px 0 var(--border);
}

/* --- Collapsing a group -------------------------------------------------- */

.report-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

.report-toggle-icon {
    flex: none;
    font-size: 0.625rem;
    color: var(--muted-foreground);
    transition: transform 0.15s ease;
}

.report-row-group.is-collapsed .report-toggle-icon {
    transform: rotate(-90deg);
}

.report-toggle-count {
    margin-left: auto;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--muted-foreground);
}