/* Student Attendance › Reports (Figma 22316:155660 · 155842 · 156354 · 156057 · 158436 · 158039 · 158301 · 157685 ·
   158497 · 158736 · 157773 · 157950 · 157862). Prefix sr-. */
.sr-screen { background: var(--goku); scrollbar-width: none; }
.sr-screen::-webkit-scrollbar { display: none; }
.sr-page { display: flex; flex-direction: column; gap: 24px; padding: calc(var(--sb-dash) + 24px) 20px 108px; }

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

/* Chips (MDS-Public-TW-Chip; purple = chosen value, grey = card period switch) */
.sr-chips { gap: 4px; margin: 0 -20px; padding: 0 20px; scroll-padding: 0 20px; scroll-snap-type: none; }
.sr-chip {
  flex: none; display: flex; align-items: center; gap: 4px; height: 32px; padding: 4px 8px 4px 12px;
  border: 1px solid transparent; border-radius: 4px; background: var(--gohan);
  font: 400 14px/24px var(--font); color: var(--bulma); white-space: nowrap;
}
.sr-chip:hover { border-color: var(--beerus); }
.sr-chip.is-on { background: var(--piccolo); border-color: var(--piccolo); color: var(--gohan); }
.sr-chip.is-on:hover { filter: brightness(1.08); }
.sr-chip.grey { background: var(--goku); border-color: transparent; }
.sr-chip.grey:hover { background: #ECECEC; }
.sr-chip.is-open:not(.is-on) { border-color: var(--piccolo); }

.sr-body { display: flex; flex-direction: column; gap: 8px; }

/* Overview card (chart card 22316:155674) */
.sr-card { background: var(--gohan); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.sr-card-head { display: flex; align-items: center; gap: 8px; }
.sr-card-title { flex: 1; min-width: 0; font: 700 18px/28px var(--font); color: var(--bulma); }
.sr-rule { display: block; height: 1px; margin: 0 -4.5px; background: var(--beerus); }
.sr-ov-body { display: flex; align-items: center; gap: 40px; }
.sr-overview.is-faded .sr-ov-body { opacity: 0.5; }
.sr-donut { flex: none; display: block; }
.sr-stats { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sr-stat { display: flex; flex-direction: column; }
.sr-stat-l { display: flex; align-items: center; gap: 4px; font: 400 12px/16px var(--font); color: var(--trunks); white-space: nowrap; }
.sr-stat b { padding-left: 14px; font: 700 18px/28px var(--font); color: var(--bulma); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.sr-dot.total { background: #D9D9D9; }
.sr-dot.leave { background: #FFB319; }
.sr-dot.present { background: var(--roshi); }
.sr-dot.absent { background: var(--dodoria); }

/* Show Punches switch (MDS-Public-TW-Switch xs) */
.sr-punch-row { display: flex; justify-content: flex-end; }
.sr-switch-wrap { display: flex; align-items: center; gap: 8px; font: 400 14px/24px var(--font); color: var(--bulma); cursor: pointer; }
.sr-switch { position: relative; width: 44px; height: 24px; border-radius: 12px; background: var(--beerus); transition: background .15s; }
.sr-switch i {
  position: absolute; top: 4px; left: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--gohan);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.4), 0 6px 6px -6px rgba(0, 0, 0, 0.16); transition: transform .15s;
}
.sr-switch.is-on { background: var(--piccolo); }
.sr-switch.is-on i { transform: translateX(20px); }

/* Student grid: fixed student column + value columns */
.sr-grid { display: flex; align-items: flex-start; }
.sr-left { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sr-right { flex: none; display: flex; flex-direction: column; gap: 4px; }
.sr-right.is-scroll { flex: 1 1 0; min-width: 0; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.sr-right.is-scroll::-webkit-scrollbar { display: none; }
.sr-right.is-scroll > * { width: max-content; min-width: 100%; }
.sr-head-spacer { flex: none; }
.sr-lc {
  height: 64px; display: flex; align-items: center; gap: 12px; padding: 12px; min-width: 0;
  background: var(--gohan); border-radius: 12px 0 0 12px;
}
.sr-num { flex: none; width: 14px; text-align: center; font: 400 14px/24px var(--font); color: var(--bulma); }
.sr-av { flex: none; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; cursor: pointer; }
.sr-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sr-name { font: 400 14px/24px var(--font); color: var(--bulma); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-adm { font: 400 12px/16px var(--font); color: var(--trunks); white-space: nowrap; }
.sr-punch { flex: none; width: 43px; display: flex; flex-direction: column; gap: 4px; font: 400 12px/16px var(--font); color: var(--trunks); white-space: nowrap; }
.sr-rc {
  height: 64px; display: flex; align-items: center; gap: 8px; padding: 12px;
  background: var(--gohan); border-radius: 0 12px 12px 0;
}
.sr-rhead { display: flex; align-items: flex-end; }

/* Daily: Morning / Evening pills */
.sr-right.is-daily .sr-rhead { gap: 8px; padding: 16px 12px 0; }
.sr-hl { width: 42px; text-align: center; font: 700 10px/16px var(--font); color: var(--trunks); }

/* Monthly: day columns with M/E */
.sr-right.is-scroll:not(.is-cols) .sr-rhead { padding: 16px 8px 0; align-items: flex-start; }
.sr-right.is-scroll:not(.is-cols) .sr-rc { gap: 0; padding: 0 8px; }
.sr-dh { flex: none; width: 84px; display: flex; flex-direction: column; align-items: center; gap: 4px; font: 700 10px/16px var(--font); color: var(--trunks); text-align: center; }
.sr-me { display: flex; justify-content: center; gap: 8px; width: 88px; border-top: 1px solid var(--trunks); border-bottom: 1px solid var(--trunks); }
.sr-me span { width: 24px; }
.sr-day { flex: none; width: 84px; display: flex; justify-content: center; gap: 4px; }

/* Yearly / subject / term: text columns */
.sr-right.is-cols .sr-rhead { gap: 24px; padding: 16px 12px 0; }
.sr-right.is-cols .sr-rhead { border-bottom: 1px solid var(--trunks); }
.sr-ch { flex: none; width: 73px; text-align: center; font: 700 10px/16px var(--font); color: var(--trunks); white-space: nowrap; }
.sr-right.is-cols .sr-rc { gap: 24px; }
.sr-cv { flex: none; width: 73px; text-align: center; font: 400 14px/24px var(--font); color: var(--bulma); }
.sr-type-subject .sr-grid, .sr-type-term .sr-grid { margin-top: 8px; }

/* P / A pills (22316:163561) */
.sr-pill {
  flex: none; width: 42px; height: 24px; display: grid; place-items: center; border: 1px solid; border-radius: 9999px;
  font: 700 14px/24px var(--font);
}
.sr-pill.sm { width: 32px; }
.sr-pill.p { color: var(--roshi); border-color: var(--roshi); background: linear-gradient(rgba(46, 125, 50, 0.12), rgba(46, 125, 50, 0.12)), var(--goku); }
.sr-pill.a { color: var(--dodoria); border-color: var(--dodoria); background: linear-gradient(rgba(211, 48, 48, 0.12), rgba(211, 48, 48, 0.12)), var(--goku); }
.sr-pill.l { color: #B07A00; border-color: #FFB319; background: linear-gradient(rgba(255, 179, 25, 0.16), rgba(255, 179, 25, 0.16)), var(--goku); }
.sr-pill.na { color: var(--trunks); border-color: var(--beerus); background: var(--goku); font-weight: 400; }

/* Class-wise table (MDS-Public-TW-Leaderboard 22316:158466) */
.sr-table-card { border-radius: 16px; }
.sr-table-wrap {
  border: 1px solid var(--beerus); border-radius: 8px; overflow-x: auto; overscroll-behavior-x: contain;
  background: linear-gradient(rgba(78, 70, 180, 0.12), rgba(78, 70, 180, 0.12)), var(--gohan);
  scrollbar-width: thin; scrollbar-color: #9A9A9A transparent;
}
.sr-table { display: flex; flex-direction: column; width: max-content; min-width: 100%; font: 400 14px/24px var(--font); }
.sr-tr { display: flex; gap: 24px; padding: 12px; background: var(--gohan); border-bottom: 1px solid var(--beerus); }
.sr-tr:last-child { border-bottom: 0; }
.sr-th { padding: 12px 12px 12px; background: transparent; color: var(--piccolo); border-bottom: 1px solid var(--beerus); }
.sr-td { flex: 1 0 64.5px; text-align: center; color: inherit; white-space: nowrap; }
.sr-td.first { flex: 0 0 140px; text-align: left; position: sticky; left: 0; }
.sr-table:not(.is-daily) .sr-tr { gap: 0; }
.sr-table:not(.is-daily) .sr-td { flex: 0 0 56px; }
.sr-table:not(.is-daily) .sr-td.first { flex: 0 0 104px; padding-left: 4px; }
.sr-table.is-yearly .sr-td { flex: 0 0 97px; }
.sr-table:not(.is-daily) .sr-tr .sr-td.first { background: var(--gohan); }
.sr-table:not(.is-daily) .sr-th .sr-td.first { background: #EBEAF6; }
.sr-none { padding: 12px 0; text-align: center; font: 400 14px/20px var(--font); color: var(--trunks); }

/* Empty states (22316:157773 · 157950 · 157862 · 157685) */
.sr-empty { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 40px 20px; text-align: center; }
.sr-empty-t { white-space: pre-line; font: 400 16px/24px var(--font); color: var(--bulma); }
.sr-empty-t b { display: block; font-weight: 700; }
.sr-btn {
  width: 100%; padding: 8px 16px; border-radius: 8px; background: var(--piccolo);
  font: 700 14px/24px var(--font); color: var(--gohan); text-align: center;
}
.sr-btn:hover { filter: brightness(1.08); }
.sr-link { font: 700 14px/24px var(--font); color: var(--piccolo); text-decoration: underline; text-underline-offset: 2px; }
.sr-link:hover { color: #3D3690; }

/* Filters sheet (Switcher pills 22316:163492) */
.sr-filters { display: flex; flex-direction: column; gap: 20px; padding-bottom: 24px; }
.sr-f { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sr-f-l { font: 700 14px/24px var(--font); color: var(--bulma); }
.sr-pills { gap: 8px; margin: 0 -20px; padding: 0 20px; scroll-snap-type: none; }
.sr-pill-opt {
  flex: none; height: 32px; padding: 4px 12px; border-radius: 16px; background: var(--goku);
  font: 400 14px/24px var(--font); color: var(--trunks); white-space: nowrap;
}
.sr-pill-opt:hover { background: #ECECEC; }
.sr-pill-opt.is-on { background: var(--piccolo); color: var(--gohan); }
.sr-f-date {
  display: flex; align-items: center; gap: 8px; height: 48px; padding: 12px; border: 1px solid var(--beerus); border-radius: 8px;
  font: 400 16px/24px var(--font); color: var(--bulma); text-align: left;
}
.sr-f-date span { flex: 1; }
.sr-f-btns { padding-bottom: 8px; }
.sr-hidden-date { position: absolute; left: 50%; bottom: 120px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }