/* Attendance page — list column tracks and roster header layout */

.attendance-roster-header-toolbar {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    width: 100%;
}

.attendance-roster-header-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
}

.attendance-roster-header-title {
    flex: 1 1 auto;
    min-width: 0;
}

.attendance-roster-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-shrink: 0;
}

.attendance-roster-header-search {
    width: 12.5rem;
    max-width: 12.5rem;
    min-width: 9rem;
}

.attendance-roster-header-scope {
    width: 12.75rem;
    max-width: 12.75rem;
    min-width: 10.5rem;
    flex-shrink: 0;
}

.attendance-close-btn {
    white-space: nowrap;
    flex-shrink: 0;
}

.attendance-roster-panel-summary {
    line-height: 1.35;
}

@media (max-width: 767.98px) {
    .attendance-roster-header-title-row {
        flex-wrap: wrap;
    }

    .attendance-roster-header-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .attendance-roster-header-search {
        flex: 1 1 auto;
        max-width: none;
    }

    .attendance-roster-header-scope {
        flex: 1 1 auto;
        max-width: none;
    }
}

@media (max-width: 575.98px) {
    .attendance-roster-header-actions {
        flex-wrap: wrap;
    }

    .attendance-close-btn {
        width: auto;
    }
}

.attendance-checkout-list {
    grid-template-columns:
        minmax(11rem, 1.5fr)
        minmax(8rem, 1.2fr)
        minmax(9.75rem, 9.75rem);
    min-width: 30rem;
}

.attendance-checkout-list-header span:last-child {
    justify-self: end;
    padding-right: 0.85rem;
}

.attendance-checkout-row__action {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 0.85rem;
    overflow: visible;
}

.attendance-checkout-row__action .list-action-btn--checkout {
    min-width: 3.5rem;
}

.attendance-checkout-row__action .list-action-btn--checkout .list-action-label {
    max-width: none;
    overflow: visible;
}

.attendance-records-list {
    grid-template-columns:
        minmax(12rem, 1.6fr)
        minmax(5rem, 0.75fr)
        minmax(8rem, 1fr)
        minmax(4.5rem, 0.65fr)
        minmax(4rem, 0.55fr)
        minmax(10rem, 10rem);
    min-width: 52rem;
}

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

.attendance-records-row__person {
    min-width: 0;
}

.attendance-records-list .attendance-records-row__person {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attendance-records-list .attendance-records-row > .directory-card-row__meta:nth-child(3) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attendance-records-row__name-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
    min-width: 0;
}

.attendance-records-row__name-line .retention-student-row__name {
    min-width: 0;
}

.attendance-off-schedule-pill {
    flex-shrink: 0;
    font-size: 0.5625rem;
    padding: 0.12rem 0.4rem;
    min-width: 0;
    cursor: help;
}

.attendance-records-row__type {
    margin-bottom: 0.15rem;
}

.attendance-records-row__type .retention-score-pill {
    font-size: 0.5625rem;
    padding: 0.12rem 0.4rem;
}

.attendance-records-row__notes .btn-link {
    font-size: 0.6875rem;
    white-space: nowrap;
}

.attendance-roster-list {
    --attendance-roster-hover: #fde68a;
    --attendance-roster-scheduled-a: #ffffff;
    --attendance-roster-scheduled-b: #c5e6d6;
    --attendance-roster-walkin-a: #fff7e6;
    --attendance-roster-walkin-b: #fde68a;
    --attendance-roster-active-a: #eff6ff;
    --attendance-roster-active-b: #bfdbfe;
    --attendance-roster-inactive-a: #f1f5f9;
    --attendance-roster-inactive-b: #cbd5e1;
    grid-template-columns:
        minmax(11rem, 1.6fr)
        minmax(6.5rem, 0.9fr)
        minmax(7rem, 0.85fr)
        minmax(12rem, 12rem);
    min-width: 40rem;
}

/*
 * Student roster stripes (match student-list hover).
 * Tone: scheduled (mint), walk-in checked-in (amber), active (blue), inactive (slate).
 */
.attendance-roster-panel .directory-card-subgrid-list.attendance-roster-list > article.attendance-roster-row {
    transition: background-color 0.15s ease;
}

.attendance-roster-panel .directory-card-subgrid-list.attendance-roster-list > article.attendance-roster-row--scheduled:nth-of-type(odd) {
    background: var(--attendance-roster-scheduled-a) !important;
}

.attendance-roster-panel .directory-card-subgrid-list.attendance-roster-list > article.attendance-roster-row--scheduled:nth-of-type(even) {
    background: var(--attendance-roster-scheduled-b) !important;
}

.attendance-roster-panel .directory-card-subgrid-list.attendance-roster-list > article.attendance-roster-row--walkin:nth-of-type(odd) {
    background: var(--attendance-roster-walkin-a) !important;
}

.attendance-roster-panel .directory-card-subgrid-list.attendance-roster-list > article.attendance-roster-row--walkin:nth-of-type(even) {
    background: var(--attendance-roster-walkin-b) !important;
}

.attendance-roster-panel .directory-card-subgrid-list.attendance-roster-list > article.attendance-roster-row--active:nth-of-type(odd) {
    background: var(--attendance-roster-active-a) !important;
}

.attendance-roster-panel .directory-card-subgrid-list.attendance-roster-list > article.attendance-roster-row--active:nth-of-type(even) {
    background: var(--attendance-roster-active-b) !important;
}

.attendance-roster-panel .directory-card-subgrid-list.attendance-roster-list > article.attendance-roster-row--inactive:nth-of-type(odd) {
    background: var(--attendance-roster-inactive-a) !important;
}

.attendance-roster-panel .directory-card-subgrid-list.attendance-roster-list > article.attendance-roster-row--inactive:nth-of-type(even) {
    background: var(--attendance-roster-inactive-b) !important;
}

.attendance-roster-panel .directory-card-subgrid-list.attendance-roster-list > article.attendance-roster-row:hover:not(.attendance-off-allocated-day):not(.attendance-on-allocated-day):not(.attendance-checkout-overdue-blink) {
    background: var(--attendance-roster-hover) !important;
    box-shadow: none !important;
}

.attendance-roster-list--with-enrollments {
    grid-template-columns:
        minmax(11rem, 1.6fr)
        minmax(6.5rem, 0.9fr)
        minmax(7rem, 1fr)
        minmax(7rem, 0.85fr)
        minmax(5rem, 0.65fr)
        minmax(12rem, 12rem);
    min-width: 54rem;
}

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

/* Match centered Days / Shift / Enrollments chips */
.attendance-roster-list-header span:nth-child(2),
.attendance-roster-list--with-enrollments .attendance-roster-list-header span:nth-child(3) {
    justify-self: center;
    text-align: center;
}

.attendance-roster-row__name-stack {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
}

.attendance-roster-row__name-last {
    font-weight: 600;
    line-height: 1.25;
}

.attendance-roster-row__name-first {
    font-weight: 500;
    font-size: 0.8125rem;
    line-height: 1.2;
    color: var(--app-text-muted, #1e293b);
}

.attendance-roster-row__enrollments {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-width: 0;
}

.attendance-roster-row__enrollments-value {
    display: inline-block;
    width: 80%;
    max-width: 80%;
    box-sizing: border-box;
    text-align: center;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    background: #f5f3ff;
    color: #5b21b6;
    border: 1px solid #ddd6fe;
}

.attendance-roster-row__days {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-width: 0;
}

/* Days (students) and Shift (staff) share this chip */
.attendance-roster-row__days-value {
    display: inline-block;
    width: 80%;
    max-width: 80%;
    box-sizing: border-box;
    text-align: center;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    background: #e0f2fe;
    color: #075985;
    border: 1px solid #bae6fd;
}

.attendance-roster-row__walkin {
    display: inline-block;
    align-self: center;
    font-size: 0.5625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
}

.attendance-roster-row__status .retention-score-pill {
    font-size: 0.625rem;
    min-width: 0;
    padding: 0.15rem 0.45rem;
}

.attendance-roster-row__notes .btn-link {
    font-size: 0.6875rem;
    white-space: nowrap;
}

.attendance-roster-row__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Show a full roster page (up to 100 rows) without an inner scrollbar —
   the page itself scrolls instead of a nested 28rem panel. */
.attendance-roster-panel .directory-card-list-scroll:not(.directory-card-list-scroll--menu-open),
.attendance-roster-panel .directory-card-list-scroll--menu-open {
    --directory-list-scroll-max-height: none;
    max-height: none;
    overflow-y: visible;
}

@media (max-width: 768px) {
    .attendance-checkout-list {
        grid-template-columns:
            minmax(10rem, 1.35fr)
            minmax(7rem, 1fr)
            minmax(9.25rem, 9.25rem);
    }

    .attendance-roster-list {
        grid-template-columns:
            minmax(9rem, 1.3fr)
            minmax(5.5rem, 0.8fr)
            minmax(6rem, 0.8fr)
            minmax(10rem, 10rem);
    }

    .attendance-roster-list--with-enrollments {
        grid-template-columns:
            minmax(9rem, 1.3fr)
            minmax(5.5rem, 0.8fr)
            minmax(6rem, 0.9fr)
            minmax(6rem, 0.8fr)
            minmax(4.5rem, 0.55fr)
            minmax(10rem, 10rem);
    }
}