/* Payroll — card lists */

.payroll-summary-list {
    grid-template-columns:
        minmax(10rem, 1.5fr)
        minmax(6rem, 0.85fr)
        minmax(8rem, 8rem)
        minmax(5.5rem, 0.75fr)
        minmax(6rem, 0.75fr);
    min-width: 38rem;
}

.payroll-summary-list .directory-card-row__meta--end {
    font-variant-numeric: tabular-nums;
}

.payroll-attendance-list {
    grid-template-columns:
        minmax(8rem, 1fr)
        minmax(9rem, 1.15fr)
        minmax(6rem, 0.75fr)
        minmax(5rem, 0.65fr)
        minmax(5rem, 0.65fr)
        minmax(5rem, 0.65fr)
        minmax(4.5rem, 0.55fr);
    min-width: 44rem;
}

.payroll-summary-list-header span:nth-child(4),
.payroll-summary-list-header span:nth-child(5) {
    justify-self: end;
}

.payroll-attendance-list-header span:last-child {
    justify-self: end;
}

/*
 * Saved payroll reports — explicit columns (not subgrid).
 * student-card-row card styles were collapsing Total gross into Last saved.
 */
.directory-card-subgrid-list.payroll-snapshot-list {
    --payroll-snapshot-cols:
        minmax(13rem, 1.5fr)
        7rem
        9.5rem
        minmax(11rem, 1.15fr)
        9.5rem;
    --payroll-snapshot-gap: 1.5rem;
    --payroll-snapshot-pad-x: 0.85rem;
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
    width: 100%;
    min-width: 54rem;
    grid-template-columns: none !important;
    column-gap: normal !important;
    row-gap: normal !important;
}

.directory-card-subgrid-list.payroll-snapshot-list > .directory-card-list-header.payroll-snapshot-list-header,
.directory-card-subgrid-list.payroll-snapshot-list > article.student-card-row.payroll-snapshot-row {
    display: grid !important;
    grid-template-columns: var(--payroll-snapshot-cols) !important;
    grid-column: auto !important;
    gap: 0 var(--payroll-snapshot-gap) !important;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding-left: var(--payroll-snapshot-pad-x) !important;
    padding-right: var(--payroll-snapshot-pad-x) !important;
}

.directory-card-subgrid-list.payroll-snapshot-list > .directory-card-list-header.payroll-snapshot-list-header {
    padding-top: 0;
    padding-bottom: 0.35rem;
}

.directory-card-subgrid-list.payroll-snapshot-list > article.student-card-row.payroll-snapshot-row {
    padding-top: 0.55rem !important;
    padding-bottom: 0.55rem !important;
    border-radius: 0.5rem;
    box-shadow: none;
}

.payroll-snapshot-list .payroll-snapshot-row:has(.list-action-btn--more.is-open) {
    position: relative;
    z-index: 1060;
}

.payroll-snapshot-list .payroll-snapshot-more-menu {
    z-index: 1061;
}

.payroll-snapshot-list .payroll-snapshot-more-menu.is-viewport-positioned {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.payroll-snapshot-list-header .payroll-snapshot-col-period,
.payroll-snapshot-list .payroll-snapshot-row__period,
.payroll-snapshot-list-header .payroll-snapshot-col-saved,
.payroll-snapshot-list .payroll-snapshot-row__saved {
    justify-self: stretch;
    text-align: start;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.payroll-snapshot-list-header .payroll-snapshot-col-hours,
.payroll-snapshot-list .payroll-snapshot-row__hours,
.payroll-snapshot-list-header .payroll-snapshot-col-gross,
.payroll-snapshot-list .payroll-snapshot-row__gross {
    justify-self: stretch;
    text-align: end;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.payroll-snapshot-list-header .payroll-snapshot-col-actions,
.payroll-snapshot-list .payroll-snapshot-row__actions {
    justify-self: end;
    min-width: 0;
    overflow: visible;
}

.payroll-snapshot-list .payroll-snapshot-row__actions .list-action-bar {
    justify-content: flex-end;
    flex-wrap: nowrap;
}

@media (max-width: 768px) {
    .payroll-summary-list,
    .payroll-attendance-list {
        min-width: 36rem;
    }

    .directory-card-subgrid-list.payroll-snapshot-list {
        min-width: 50rem;
    }
}