.filter-bar input {
    border: 1px solid var(--border);
    border-radius: .4rem;
    padding: .6rem
}

.attendance-report-filters {
    align-items: end;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(12rem,1fr) minmax(12rem,1fr) minmax(14rem,1.2fr) auto;
    margin-bottom: 1rem
}

    .attendance-report-filters .filter-field {
        display: grid;
        gap: .35rem
    }

    .attendance-report-filters label {
        color: var(--muted);
        font-size: .75rem;
        font-weight: 600
    }

    .attendance-report-filters input, .attendance-report-filters .search-select {
        width: 100%
    }

    .attendance-report-filters .btn {
        min-height: 2.65rem;
        white-space: nowrap
    }

.attendance-table-surface {
    overflow: hidden
}

    .attendance-table-surface .surface-heading {
        padding: 1.2rem 1.2rem 0
    }

.attendance-value {
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 999px;
    display: inline-flex;
    font-size: .82rem;
    font-weight: 500;
    gap: .4rem;
    line-height: 1;
    padding: .34rem .62rem
}

    .attendance-value:before {
        border-radius: 999px;
        content: "";
        height: .45rem;
        width: .45rem
    }

    .attendance-value.present {
        background: color-mix(in srgb,#2fb344 12%,var(--surface));
        border-color: color-mix(in srgb,#2fb344 38%,var(--border));
        color: #218739
    }

        .attendance-value.present:before {
            background: #2fb344
        }

    .attendance-value.absent {
        background: color-mix(in srgb,#d63939 12%,var(--surface));
        border-color: color-mix(in srgb,#d63939 38%,var(--border));
        color: #b42318
    }

        .attendance-value.absent:before {
            background: #d63939
        }

    .attendance-value.late {
        background: color-mix(in srgb,#f59f00 14%,var(--surface));
        border-color: color-mix(in srgb,#f59f00 40%,var(--border));
        color: #b7791f
    }

        .attendance-value.late:before {
            background: #f59f00
        }

    .attendance-value.excused {
        background: color-mix(in srgb,#206bc4 12%,var(--surface));
        border-color: color-mix(in srgb,#206bc4 38%,var(--border));
        color: #206bc4
    }

        .attendance-value.excused:before {
            background: #206bc4
        }

    .attendance-value.neutral {
        background: color-mix(in srgb,#667382 10%,var(--surface));
        color: var(--muted)
    }

        .attendance-value.neutral:before {
            background: var(--muted)
        }

.trend-up {
    color: #218739;
    font-size: .8rem
}

.trend-down {
    color: #b42318;
    font-size: .8rem
}

.attendance-metrics {
    margin-bottom: 1rem
}

.session-attendance-toolbar {
    align-items: end
}

.session-attendance-list {
    display: grid;
    gap: .75rem;
    margin-top: 1rem
}

.session-attendance-empty {
    margin-top: 1rem
}

.session-attendance-row {
    align-items: center;
    background: color-mix(in srgb,var(--surface) 94%,var(--primary) 6%);
    border: 1px solid var(--border);
    border-radius: 1rem;
    display: grid;
    gap: .85rem;
    grid-template-columns: minmax(11rem,1fr) minmax(15.5rem,auto) minmax(9rem,.6fr);
    padding: .8rem
}

.session-attendance-student {
    align-items: center;
    display: flex;
    gap: .75rem;
    min-width: 0
}

    .session-attendance-student b {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .session-attendance-student small {
        color: var(--muted);
        display: block;
        font-size: .78rem
    }

.session-status-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: .3rem;
    justify-content: flex-end
}

.session-status-button {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    cursor: pointer;
    font-size: .72rem;
    font-weight: 700;
    padding: .32rem .55rem;
    transition: .18s ease;
    white-space: nowrap
}

    .session-status-button:hover {
        transform: translateY(-1px)
    }

    .session-status-button.active {
        box-shadow: 0 8px 20px rgba(15,23,42,.12);
        color: #fff
    }

    .session-status-button.present-status.active {
        background: #218739;
        border-color: #218739
    }

    .session-status-button.absent-status.active {
        background: #b42318;
        border-color: #b42318
    }

    .session-status-button.late-status.active {
        background: #b7791f;
        border-color: #b7791f
    }

    .session-status-button.excused-status.active {
        background: #2563eb;
        border-color: #2563eb
    }

.session-reason-input {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: .75rem;
    color: var(--text);
    min-height: 2.4rem;
    padding: .55rem .7rem;
    width: 100%
}

@media(max-width:900px) {
    .session-attendance-row {
        grid-template-columns: 1fr
    }

    .session-status-actions {
        flex-wrap: wrap;
        justify-content: flex-start
    }
}

@media(max-width:800px) {
    .attendance-report-filters {
        grid-template-columns: 1fr 1fr
    }

        .attendance-report-filters .btn {
            width: 100%
        }
}

@media(max-width:560px) {
    .attendance-report-filters {
        grid-template-columns: 1fr
    }
}