/* Roster day-column layout and day-column header controls. */

.roster-grid-frame[data-roster-layout="day_columns"] {
    --roster-day-column-width: 30%;
}

.roster-day-columns {
    --roster-day-columns-end-buffer-width: 0.15rem;
    grid-template-columns: repeat(var(--roster-day-count), minmax(19.4rem, 1fr)) var(--roster-day-columns-end-buffer-width);
    min-width: min(88.9rem, calc((var(--roster-day-count) * 20rem) + 0.9rem));
}

.roster-day-columns-end-buffer {
    min-width: var(--roster-day-columns-end-buffer-width);
    pointer-events: none;
}

.roster-day-column {
    background: var(--app-white-alpha-015);
}

.roster-day-column-header {
    display: grid;
    grid-template-columns: minmax(5.6rem, 1fr) minmax(0, auto) minmax(5.6rem, 1fr);
    align-items: center;
    gap: 0.55rem;
    min-height: 4rem;
    padding: 0.65rem;
    border-bottom: 1px solid var(--app-border);
    background: var(--roster-subhead);
}

.roster-day-column-header .roster-day-heading,
.roster-day-column-wage-slot,
.roster-day-column-control-slot {
    min-width: 0;
}

.roster-day-column-header .roster-day-heading {
    align-self: center;
    justify-self: start;
    text-align: left;
}

.roster-day-column-wage-slot {
    align-self: center;
    justify-self: center;
    text-align: center;
}

.roster-day-column-control-slot {
    align-self: center;
    justify-self: end;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.roster-day-column-control-slot .roster-day-action {
    width: auto;
    min-width: 1.9rem;
    min-height: 1.9rem;
    padding: 0 0.48rem;
    border-radius: 0.55rem;
    font-size: 0.7rem;
    letter-spacing: 0.02em;
}

.roster-day-column-control-slot .roster-day-action-toggle.is-active {
    min-width: 4.85rem;
}

.roster-day-column-control-slot .roster-day-action-toggle.is-active {
    border-color: var(--app-warning-border-strong);
    color: var(--app-warning);
    background: var(--app-warning-tint);
}

.roster-day-column-header .roster-day-date {
    display: flex;
    align-items: center;
    min-height: 100%;
    font-size: var(--roster-text-sm);
    font-weight: 800;
}

.roster-day-column-header .roster-day-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.roster-day-column-body {
    display: grid;
    gap: 0.6rem;
    padding: 0.65rem;
}

.roster-day-column-row {
    display: grid;
    gap: 0.55rem;
}