/* Student Attendance — MARK group (js/attendance/mark.js). Figma 22316:159042 … 22316:165711. Prefix sm-. */

/* ---------- Shared page frame ---------- */
.screen.sm { display: flex; flex-direction: column; overflow: hidden; background: var(--beerus); }
.sm-body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; padding: calc(var(--sb) + 30px) 20px 16px; display: flex; flex-direction: column; gap: 24px; }
.sm-body::-webkit-scrollbar { display: none; }
.sm-head { display: flex; align-items: center; gap: 8px; min-height: 40px; }
.sm-head h1 { flex: 1; min-width: 0; }
.sm-back { flex: none; width: 31.69px; height: 31.69px; display: grid; place-items: center; border-radius: 6px; }
.sm-back img { transform: scaleX(-1); }
.sm-back:hover, .sm-icon-btn:hover { background: rgba(0, 0, 0, 0.05); }
.sm-icon-btn { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 6px; }
.screen.sm .an-foot { position: relative; z-index: 1; }

/* ---------- Setup form (22316:159042 / 160653) ---------- */
.sm-cards { display: flex; flex-direction: column; gap: 8px; }
.sm-card { display: flex; flex-direction: column; gap: 24px; padding: 16px; border-radius: 8px; background: var(--gohan); }
.sm-card-title { font: 700 16px/24px var(--font); color: var(--trunks); }
.sm-card-title b { color: var(--bulma); }
.sm-seg { display: flex; gap: 4px; padding: 4px; max-height: 48px; border-radius: var(--radius-i-md); background: var(--goku); }
.sm-seg button { flex: 1; min-width: 0; padding: 8px 16px; border-radius: 8px; font: 700 14px/24px var(--font); color: var(--bulma); text-align: center; }
.sm-seg button.is-on { background: var(--piccolo); color: var(--gohan); }
.sm-seg button:not(.is-on):hover { background: rgba(0, 0, 0, 0.04); }
.sm-selects { display: flex; flex-direction: column; gap: 8px; }
.sm-select { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 8px 8px 12px; border: 1px solid var(--beerus); border-radius: var(--radius-s-sm); background: var(--gohan); text-align: left; }
.sm-select span { flex: 1; min-width: 0; font: 400 14px/24px var(--font); color: var(--trunks); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-select.is-filled span { color: var(--bulma); }
.sm-select img { flex: none; }
.sm-select:hover, .sm-date:hover { border-color: #CFCFCF; }
.sm-select[aria-disabled="true"] { opacity: 0.6; }
.sm-date { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 8px 8px 12px; border: 1px solid var(--beerus); border-radius: var(--radius-s-sm); background: var(--gohan); text-align: left; }
.sm-date-label { flex: 1; font: 400 16px/24px var(--font); color: var(--trunks); }
.sm-date-chip { flex: none; padding: 4px 8px; border-radius: 4px; background: var(--heles); font: 400 16px/24px var(--font); color: var(--piccolo); white-space: nowrap; }
.sm-hr { width: 100%; height: 0; border: 0; border-top: 1px solid var(--beerus); margin: 0; }
.sm-sessions { display: flex; gap: 12px; }
.sm-session { width: 80px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 12px; border: 1px solid var(--beerus); border-radius: var(--radius-i-sm); font: 400 14px/24px var(--font); color: var(--bulma); white-space: nowrap; }
.sm-session.is-on { background: var(--jiren); border-color: var(--piccolo); color: var(--piccolo); }
.sm-session:not(.is-on):hover, .sm-tile:not(.is-on):hover { background: var(--goku); }
.sm-periods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px 8px; }
.sm-tile { display: flex; align-items: center; justify-content: center; padding: 8px 12px; border: 1px solid var(--beerus); border-radius: var(--radius-i-sm); font: 400 14px/24px var(--font); color: var(--bulma); white-space: nowrap; }
.sm-tile.is-on { background: var(--jiren); border-color: var(--piccolo); }
.sm-periods .sm-tile { padding: 8px 4px; }
.sm-alls { display: flex; flex-wrap: wrap; gap: 8px; }
.sm-alls .sm-tile { min-width: 74px; }
.sm-alls.is-solid .sm-tile.is-on { background: var(--piccolo); border-color: var(--piccolo); color: var(--gohan); }

/* Select sheet (22316:159111) */
.sm-opts { display: flex; flex-direction: column; gap: 8px; padding-top: 0; }
.sm-opt { width: 100%; padding: 12px 16px; border: 1px solid var(--beerus); border-radius: 8px; background: var(--gohan); text-align: left; font: 400 20px/32px var(--font); color: var(--trunks); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-opt:hover { background: var(--goku); }
.sm-opt.is-on { border-color: var(--piccolo); color: var(--piccolo); background: var(--jiren); }

/* ---------- Overlays ---------- */
.sm-layer { position: absolute; inset: 0; z-index: 55; }
.sm-scrim { position: absolute; inset: 0; background: var(--zeno); animation: fade-in .2s ease-out both; }

/* Date picker (22316:159199) */
.sm-cal { position: absolute; left: 20px; right: 20px; bottom: 34px; display: flex; flex-direction: column; gap: 20px; padding: 12px; border-radius: var(--radius-s-sm); background: var(--gohan); animation: sheet-up .25s cubic-bezier(.2, .8, .2, 1) both; }
.sm-cal-title { display: flex; align-items: center; padding: 10.563px 0; }
.sm-cal-nav { flex: none; width: 31.69px; height: 31.69px; display: grid; place-items: center; border-radius: 6px; }
.sm-cal-nav.prev img { transform: scaleX(-1); }
.sm-cal-nav:not(:disabled):hover { background: var(--goku); }
.sm-cal-nav:disabled { opacity: 0.4; cursor: default; }
.sm-cal-month { flex: 1; text-align: center; font: 700 18px/28px var(--font); color: var(--trunks); }
.sm-cal-grid { display: flex; flex-direction: column; gap: 5.282px; padding: 0 8px; }
.sm-cal-week, .sm-cal-days { display: grid; grid-template-columns: repeat(7, 1fr); column-gap: 5.282px; }
.sm-cal-days { row-gap: 5px; }
.sm-cal-week span { padding: 8px 0; text-align: center; font: 700 16px/24px var(--font); color: rgba(0, 0, 0, 0.25); }
.sm-cal-day { height: 40px; border: 1.32px solid transparent; border-radius: 8px; font: 700 16px/24px var(--font); color: var(--bulma); text-align: center; }
.sm-cal-day:not(:disabled):not(.is-on):hover { background: var(--goku); }
.sm-cal-day.is-today:not(.is-on) { color: var(--piccolo); }
.sm-cal-day.is-on { background: var(--piccolo); border-color: var(--piccolo); color: var(--gohan); }
.sm-cal-day:disabled { color: rgba(0, 0, 0, 0.25); cursor: default; }

/* Dialog (22316:164607 / 164766) */
.sm-dialog-layer { display: grid; place-items: center; }
.sm-dialog { position: relative; width: 312px; max-width: calc(100% - 40px); border-radius: 16px; background: var(--gohan); overflow: hidden; display: flex; flex-direction: column; animation: fade-in .18s ease-out both; }
.sm-dialog-text { display: flex; flex-direction: column; gap: 16px; padding: 24px 24px 20px; text-align: center; }
.sm-dialog-title { font: 400 24px/32px var(--font); color: #1D1B20; }
.sm-dialog-msg { font: 400 14px/20px var(--font); color: #49454F; }
.sm-dialog-msg b { font-weight: 700; }
.sm-dialog-btn { height: 56px; border-top: 1px solid var(--beerus); font: 700 16px/24px var(--font); color: var(--trunks); text-align: center; }
.sm-dialog-btn.danger { font-weight: 600; color: var(--dodoria); }
.sm-dialog-btn.primary { font-weight: 600; color: var(--piccolo); }
.sm-dialog-btn:hover { background: var(--goku); }

/* ---------- Marking list (22316:164097) ---------- */
.sm-search { margin-top: -8px; }
.sm-search input { font-weight: 400; }
.sm-search input::-webkit-search-cancel-button { cursor: pointer; }
.sm-list-wrap { display: flex; flex-direction: column; gap: 16px; }
.sm-chips { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 0 20px; }
.sm-chips::-webkit-scrollbar { display: none; }
.sm-chip { flex: none; display: flex; align-items: center; gap: 4px; height: 32px; padding: 4px 8px 4px 12px; border-radius: 4px; background: var(--gohan); font: 400 14px/24px var(--font); color: var(--bulma); white-space: nowrap; }
.sm-chip.is-on { background: var(--piccolo); color: var(--gohan); }
.sm-chip:hover { filter: brightness(0.97); }
.sm-chip.is-on:hover { filter: brightness(1.08); }
.sm-segs { display: flex; gap: 8px; }
.sm-segbtn { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border: 1px solid transparent; border-radius: 8px; background: var(--gohan); font: 400 16px/24px var(--font); color: var(--bulma); white-space: nowrap; }
.sm-segbtn.is-on { border-color: var(--piccolo); background: linear-gradient(var(--jiren), var(--jiren)), var(--gohan); color: var(--piccolo); }
.sm-segbtn img { flex: none; }
.sm-period { font: 400 14px/24px var(--font); color: var(--trunks); }
.sm-period b { color: var(--bulma); }
.sm-list-block { display: flex; flex-direction: column; gap: 8px; }
.sm-markall { align-self: flex-end; display: flex; align-items: center; gap: 12px; padding: 0 12px; font: 400 14px/24px var(--font); color: var(--piccolo); }
.sm-list { display: flex; flex-direction: column; gap: 4px; }
.sm-empty { padding: 24px 12px; text-align: center; font: 400 14px/20px var(--font); color: var(--trunks); }
.sm-row { display: flex; flex-direction: column; gap: 12px; padding: 8px 12px; border-radius: 8px; background: var(--gohan); }
.sm-row-main { display: flex; align-items: center; gap: 12px; min-height: 40px; cursor: pointer; }
.sm-no { flex: none; min-width: 14px; text-align: center; font: 400 14px/24px var(--font); color: var(--bulma); }
.sm-av { flex: none; width: 32px; height: 32px; border-radius: 50%; background-color: #BAEBF1; background-size: 379.29% 270.83%; background-repeat: no-repeat; }
.sm-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sm-name { font: 400 14px/24px var(--font); color: var(--bulma); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-adm { font: 400 12px/16px var(--font); color: var(--trunks); white-space: nowrap; }
.sm-row.is-leave .sm-adm { color: #B07A00; }
.sm-punch { flex: none; font: 400 12px/16px var(--font); color: var(--trunks); white-space: nowrap; }
.sm-rm-btn { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 6px; }
.sm-rm-btn:hover, .sm-rm-edit-btn:hover { background: var(--heles); }

/* Present / Absent switch (22316:165341) */
.sm-sw { position: relative; flex: none; width: 44px; height: 24px; border-radius: 9999px; background: var(--beerus); overflow: hidden; transition: background-color .15s; }
.sm-sw.on-white.is-none { background: var(--goten); }
.sm-sw.is-p { background: var(--roshi); }
.sm-sw.is-a { background: var(--dodoria); }
.sm-sw.is-l { background: var(--krillin); cursor: default; }
.sm-sw-t { position: absolute; top: 4px; left: 14px; width: 16px; height: 16px; font: 700 12px/16px var(--font); color: var(--bulma); text-align: center; }
.sm-sw.is-p .sm-sw-t { left: 24px; color: var(--gohan); }
.sm-sw.is-a .sm-sw-t { left: 4px; color: var(--goten); }
.sm-sw.is-l .sm-sw-t { color: var(--gohan); }
.sm-knob { position: absolute; top: 3px; left: 3px; transition: left .15s; pointer-events: none; }
.sm-sw.is-a .sm-knob { left: 23px; }

/* Inline remarks (22316:166053) */
.sm-rm-edit { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border: 1px solid var(--beerus); border-radius: var(--radius-i-sm); background: var(--gohan); }
.sm-rm-edit:focus-within { border-color: var(--piccolo); }
.sm-rm-input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 14px/24px var(--font); color: var(--bulma); }
.sm-rm-input::placeholder { color: var(--trunks); }
.sm-rm-ok, .sm-rm-x { flex: none; display: grid; place-items: center; padding: 4px; border-radius: 4px; }
.sm-rm-ok { background: var(--piccolo); }
.sm-rm-ok:disabled { background: var(--jiren); cursor: default; }
.sm-rm-x { background: var(--dodoria); }
.sm-rm-saved { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: var(--radius-i-sm); background: var(--goku); }
.sm-rm-saved span { flex: 1; min-width: 0; font: 400 14px/24px var(--font); color: var(--bulma); overflow-wrap: anywhere; }
.sm-rm-edit-btn { flex: none; width: 24px; height: 24px; display: grid; place-items: center; padding: 0 0 0 2px; border-radius: 4px; }

/* Mark Attendance sheet (22316:164937) */
.sm-sum { display: flex; flex-direction: column; gap: 24px; }
.sm-sum-block { display: flex; flex-direction: column; gap: 8px; }
.sm-sum-label { font: 400 14px/24px var(--font); color: var(--trunks); }
.sm-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 12px 16px; border-radius: 8px; background: var(--goku); }
.sm-stat { display: flex; flex-direction: column; min-width: 0; }
.sm-stat-l { display: flex; align-items: center; gap: 4px; font: 400 12px/16px var(--font); color: var(--trunks); white-space: nowrap; }
.sm-stat-l i { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.sm-stat b { padding-left: 14px; font: 700 18px/28px var(--font); color: var(--bulma); }
.sm-notify { display: flex; flex-direction: column; gap: 16px; padding: 16px; border-radius: 8px; background: var(--goku); }
.sm-notify-row { display: flex; align-items: center; gap: 12px; }
.sm-notify-ic { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; overflow: hidden; }
.sm-notify-ic.wa { background: #40C351; }
.sm-notify-ic.sms { background: var(--hit); }
.sm-notify-t { flex: 1; font: 400 16px/24px var(--font); color: var(--bulma); }
.sm-note { margin-top: -4px; padding: 0 12px; font: 400 12px/16px var(--font); color: #999CA0; }

/* Photo card (22316:159270 …) */
.sm-pc-layer { display: flex; align-items: center; justify-content: center; }
.sm-pc-scrim { position: absolute; inset: 0; background: var(--zeno); animation: fade-in .2s ease-out both; }
.sm-pc-close { position: absolute; top: 31px; right: 30px; z-index: 1; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--goten); }
.sm-pc { position: relative; display: flex; align-items: center; gap: 3px; animation: fade-in .18s ease-out both; }
.sm-pc-nav { flex: none; display: flex; padding: 8px; border-radius: 16px; background: var(--zeno); }
.sm-pc-nav:disabled { opacity: 0.35; cursor: default; }
.sm-pc-nav:not(:disabled):hover { background: rgba(0, 0, 0, 0.72); }
.sm-pc-box { width: 280px; display: flex; flex-direction: column; border-radius: 16px; background: var(--zeno); }
.sm-pc-card { display: flex; flex-direction: column; border-radius: 16px; background: var(--gohan); overflow: hidden; }
.sm-pc-photo { position: relative; width: 280px; height: 280px; background-color: #BAEBF1; background-size: 379.29% 270.83%; background-repeat: no-repeat; }
.sm-pc-bar { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--zeno); font: 400 16px/24px var(--font); color: var(--goten); }
.sm-pc-bar span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-pc-pa { display: flex; gap: 4px; padding: 4px; max-height: 48px; border-radius: var(--radius-i-md); background: var(--goku); }
.sm-pc-pa button { flex: 1; min-width: 0; height: 40px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 16px 8px 8px; border-radius: 8px; font: 700 14px/24px var(--font); color: var(--bulma); }
.sm-pc-pa button:not(:disabled):not(.is-p):not(.is-a):hover { background: rgba(0, 0, 0, 0.05); }
.sm-pc-pa button:disabled { opacity: 0.4; cursor: default; }
.sm-pc-pa [data-v="P"] img { filter: invert(1); }
.sm-pc-pa button.is-p { background: var(--roshi); color: var(--goten); }
.sm-pc-pa button.is-p img { filter: none; }
.sm-pc-pa button.is-a { background: var(--dodoria); color: var(--goten); }
.sm-pc-pa button.is-a img { filter: invert(1); }
.sm-pc-leave { padding: 6px 12px 0; text-align: center; font: 400 12px/16px var(--font); color: var(--goten); }
.sm-pc-more { align-self: center; display: flex; align-items: center; gap: 8px; height: 32px; padding: 4px 8px; border-radius: 4px; font: 400 14px/24px var(--font); color: var(--goten); }
.sm-pc-more img:last-child { transition: transform .15s; }
.sm-pc-more.is-open img:last-child { transform: rotate(180deg); }
.sm-pc-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 8px 8px 12px; }
.sm-qchip { flex: none; height: 32px; display: flex; align-items: center; padding: 4px 8px; border: 1px solid transparent; border-radius: 4px; background: var(--goku); font: 400 12px/16px var(--font); color: var(--bulma); white-space: nowrap; }
.sm-qchip:hover { background: #EDEDED; }
.sm-qchip.is-on { border-color: var(--piccolo); background: linear-gradient(var(--jiren), var(--jiren)), var(--gohan); color: var(--piccolo); }
.sm-pc-custom { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; padding: 4px 8px; border: 1px solid var(--beerus); border-radius: var(--radius-i-sm); background: var(--gohan); }
.sm-pc-custom input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 14px/24px var(--font); color: var(--bulma); }
.sm-pc-custom input::placeholder { color: var(--trunks); }
.sm-pc-ok { flex: none; display: grid; place-items: center; padding: 4px; border-radius: 4px; background: var(--piccolo); }
.sm-pc-ok:disabled { background: var(--beerus); cursor: default; }
.sm-search[hidden] { display: none; }