/* Student Attendance home (Figma 22316:163018 / 163190 / 163104 SMT, 22316:162865 / 163334 Teacher). Prefix sa-. */
.sa-page { display: flex; flex-direction: column; gap: 24px; padding: calc(var(--sb-dash) + 24px) 20px 96px; }

/* Header */
.sa-head { display: flex; align-items: center; gap: 8px; height: 40px; }
.sa-head h1 { flex: 1; min-width: 0; }
.sa-back { flex: none; width: 31.69px; height: 31.69px; display: grid; place-items: center; border-radius: 6px; }
.sa-back img { transform: scaleX(-1); }
.sa-star { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 8px; }
.sa-back:hover, .sa-star:hover { background: var(--heles); }

/* Quick-action tiles */
.sa-tiles { display: flex; gap: 16px; padding: 12px; border-radius: 8px; background: rgba(255, 255, 255, 0.6); }
.sa-tile { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sa-tile-ic { width: 100%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 16px;
  background: linear-gradient(var(--jiren), var(--jiren)), var(--gohan); transition: filter .15s; }
.sa-tile:hover .sa-tile-ic { filter: brightness(0.96); }
.sa-tile-l { width: 100%; text-align: center; font: 500 12px/16px var(--font); color: var(--bulma); }

/* Your Classes (Teacher) */
.sa-classes { display: flex; flex-direction: column; gap: 20px; }
.sa-h2 { font: 700 16px/24px var(--font); color: var(--bulma); }
.sa-cards { display: flex; gap: 12px; margin: 0 -20px; padding: 0 20px; scroll-padding: 0 20px; }
.sa-class { flex: none; display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-radius: 12px;
  background: var(--gohan); border: 1px solid var(--beerus); color: var(--bulma); cursor: pointer; }
.sa-class:hover { border-color: var(--piccolo); }
.sa-class.is-on { background: var(--piccolo); border-color: var(--piccolo); color: var(--gohan); cursor: default; }
.sa-class-t { width: 120px; display: flex; flex-direction: column; }
.sa-class-t b { font: 700 14px/24px var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-class-t span { font: 400 12px/16px var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-class-x { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; }
button.sa-class-x:hover { background: rgba(255, 255, 255, 0.16); }

/* Cards */
.sa-card { background: var(--gohan); border-radius: 8px; overflow: hidden; }
.sa-card[hidden] { display: none; }
.sa-card-head { display: flex; align-items: center; gap: 12px; padding: 12px; }
.sa-card-head .sa-h2 { flex: 1; min-width: 0; }

/* Filter chips */
.sa-chips { display: flex; gap: 8px; padding: 8px 16px; overflow-x: auto; scrollbar-width: none; }
.sa-chips::-webkit-scrollbar { display: none; }
.sa-chip { flex: none; display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 8px; background: var(--goku);
  font: 400 14px/24px var(--font); color: var(--bulma); white-space: nowrap; }
.sa-chip:hover { filter: brightness(0.97); }
.sa-chip.is-on { background: linear-gradient(var(--jiren), var(--jiren)), var(--gohan); }
.sa-chip[aria-expanded="true"] { box-shadow: inset 0 0 0 1px var(--piccolo); }
.sa:not(.is-teacher) .sa-chip.is-on { color: var(--piccolo); }

/* Donut + legend / notices */
.sa-att-body { display: flex; align-items: center; gap: 40px; padding: 16px; }
.sa-donut { flex: none; display: block; }
.sa-legend { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sa-leg { display: flex; flex-direction: column; min-width: 0; }
.sa-leg-l { display: flex; align-items: center; gap: 4px; font: 400 12px/16px var(--font); color: var(--trunks); white-space: nowrap; }
.sa-leg-l i { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.sa-leg b { padding-left: 14px; font: 700 18px/28px var(--font); color: var(--bulma); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-notice { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px; border-radius: 8px; background: var(--goku); }
.sa-notice-t { font: 400 14px/20px var(--font); color: var(--dodoria); }
.sa-notice-s { font: 400 14px/20px var(--font); color: var(--trunks); }

/* List of Absentees */
.sa-abs-link { flex: 1; min-width: 0; display: flex; align-items: center; font: 700 16px/24px var(--font); color: var(--bulma); text-align: left; }
.sa-abs-link:hover { color: var(--piccolo); }
.sa-abs-date { flex: none; display: flex; align-items: center; gap: 8px; font: 400 14px/24px var(--font); color: var(--bulma); border-radius: 6px; }
.sa-abs-date img { transform: rotate(180deg); }
.sa-abs-date:hover { background: var(--heles); }
.sa-abs-body { padding: 8px 12px; }
.sa-table { display: flex; flex-direction: column; gap: 12px; padding-top: 8px; border: 1px solid var(--beerus); border-radius: 8px; background: var(--goku); overflow: hidden;
  font: 400 14px/24px var(--font); }
.sa-tr { display: flex; align-items: flex-start; gap: 24px; padding: 12px 8px; border-bottom: 1px solid var(--beerus); }
.sa-th { padding: 0 8px; border: 0; align-items: center; color: var(--piccolo); }
.sa-tbody { background: var(--gohan); }
.sa-tbody .sa-tr:last-child { border-bottom: 0; }
.sa-c-class { flex: none; width: 40px; display: flex; gap: 4px; white-space: nowrap; }
.sa-c-roll { flex: none; width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-c-name { flex: 1; min-width: 0; }
.sa-c-date { flex: none; width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-tbody .sa-c-roll, .sa-tbody .sa-c-date { color: var(--trunks); }
.sa-tbody .sa-c-class, .sa-tbody .sa-c-name { color: var(--bulma); }
.sa-empty-row { padding: 16px 8px; text-align: center; font: 400 14px/20px var(--font); color: var(--trunks); }

/* FAB */
.sa-fab { white-space: nowrap; }
.sa-hidden-date { position: absolute; left: 50%; bottom: 120px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }