.classroom-attendance { margin-block: 2rem; padding-block: 1.5rem; border-top: 1px solid var(--color-border, #d1d5db); color: var(--color-text, #172033); }
.classroom-attendance-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.classroom-attendance h2 { margin: 0 0 .5rem; font-size: 1.25rem; }
.classroom-attendance p { line-height: 1.6; }
.classroom-attendance-heading p { margin: 0; }
.classroom-attendance-heading > div { min-width: 0; }
.classroom-attendance-filter { display: flex; align-items: center; gap: .75rem; margin-block: 1.25rem; }
.classroom-attendance select { min-height: 44px; padding: .5rem .75rem; border: 1px solid var(--color-border, #b4bac5); border-radius: .5rem; background: var(--color-surface, #fff); color: inherit; font: inherit; }
.classroom-attendance-summary strong { font-variant-numeric: tabular-nums; }
.classroom-attendance-note { color: var(--color-text-secondary, #475569); font-size: .875rem; }
.classroom-attendance-scroll { overflow-x: auto; margin-block: 1rem; }
.classroom-attendance table { width: 100%; border-collapse: collapse; text-align: left; font-size: .9375rem; }
.classroom-attendance th, .classroom-attendance td { padding: .875rem .75rem; border-bottom: 1px solid var(--color-border, #d1d5db); vertical-align: top; min-width: 6rem; }
.classroom-attendance td { overflow-wrap: anywhere; }
.classroom-attendance th { font-weight: 600; }
.classroom-attendance td small, .classroom-attendance-source { display: block; color: var(--color-text-secondary, #475569); font-size: .875rem; margin-bottom: .25rem; }
.classroom-attendance-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.classroom-attendance-empty { padding-block: 1rem; }
.classroom-attendance :focus-visible { outline: 2px solid var(--color-primary, #1d4ed8); outline-offset: 3px; }
@media (max-width: 640px) {
  .classroom-attendance-heading { flex-direction: column; }
  .classroom-attendance table { min-width: 36rem; }
  .classroom-attendance { font-size: 1rem; }
}