/* Student Attendance — leave applications (js/attendance/leave.js). Prefix sl-.
   List 22316:161967 / 162244 / 162474, multi-select 161503 / 161735, detail 166076 … 166365,
   Add New Leave 162704 / 162740 / 162804, Select Student 163598 … 163927, Leave Calendar 160778. */

.sl [hidden] { display: none !important; }
.sl-hidden-date { position: absolute; left: 50%; top: 50%; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sl-back { flex: none; width: 31.69px; height: 31.69px; display: grid; place-items: center; border-radius: 6px; }
.sl-back img { transform: rotate(180deg); }
.sl-back.plain { width: 24px; height: 24px; }
.sl-back.plain img { transform: none; }
.sl-icon-btn { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; }
.sl-back:hover, .sl-icon-btn:hover { background: var(--heles); }
.sl-search { margin: 0; }
.sl-search input { font-weight: 400; }

/* ---------- Leave card ---------- */
.sl-card { display: flex; flex-direction: column; border: 1px solid var(--beerus); border-radius: 8px; background: var(--gohan); overflow: hidden; }
.sl-card.is-on { border-color: var(--piccolo); background: linear-gradient(var(--jiren), var(--jiren)), var(--gohan); }
.sl-card-main { width: 100%; display: flex; flex-direction: column; gap: 12px; padding: 12px 4px; text-align: left; }
.sl-card-main:hover { background: rgba(0, 0, 0, 0.012); }
.sl-card-top { display: flex; align-items: flex-start; gap: 12px; padding: 0 8px; }
.sl-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sl-name { font: 700 16px/24px var(--font); color: var(--bulma); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-sub { font: 400 12px/16px var(--font); color: #5D626C; }
.sl-when { flex: none; font: 400 12px/16px var(--font); color: var(--trunks); white-space: nowrap; }
.sl-box { display: flex; align-items: flex-start; gap: 4px; padding: 12px; border-radius: 8px; background: var(--heles); }
.sl-type { flex: 1; min-width: 0; font: 700 12px/16px var(--font); color: var(--bulma); }
.sl-dates { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-end; text-align: right; font: 400 12px/16px var(--font); color: #5D626C; }
.sl-foot { display: flex; align-items: center; gap: 8px; padding: 0 8px; }
.sl-reason { flex: 1; min-width: 0; font: 400 12px/16px var(--font); color: var(--trunks); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-att { flex: none; display: flex; align-items: center; gap: 4px; font: 400 12px/16px var(--font); color: #5D626C; border-radius: 4px; cursor: pointer; }
.sl-att u { text-underline-position: from-font; }
.sl-att:hover { color: var(--piccolo); }
.sl-actions { display: flex; gap: 4px; padding: 12px; border-top: 1px solid var(--beerus); }
.sl-act { flex: 1; padding: 8px 16px; border-radius: 8px; font: 700 14px/24px var(--font); color: var(--gohan); text-align: center; }
.sl-act.reject { background: var(--dodoria); }
.sl-act.approve { background: var(--roshi); }
.sl-act:hover { filter: brightness(1.08); }

/* Checkbox (MDS-Public-TW-Checkbox, 24px) */
.sl-check { flex: none; position: relative; width: 24px; height: 24px; }
.sl-check::before { content: ''; position: absolute; inset: 16.67%; border: 2px solid var(--trunks); border-radius: 5.333px; }
.sl-check.is-on::before { border: 0; background: var(--piccolo); }
.sl-check img { position: absolute; left: 4px; top: 4px; }

/* ---------- Leave Application list ---------- */
.screen.sl-list { background: var(--goku); }
.sl-page { display: flex; flex-direction: column; gap: 12px; min-height: 100%; padding: calc(var(--sb-dash) + 12px) 20px 20px; }
.sl-head { display: flex; align-items: center; gap: 8px; height: 40px; }
.sl-head h1 { flex: 1; min-width: 0; }
.sl-types { gap: 8px; margin: 0 -20px; padding: 12px 20px; scroll-snap-type: none; }
.sl-type-tab { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 8px; font: 700 14px/24px var(--font); color: var(--trunks); white-space: nowrap; }
.sl-type-tab.is-on { background: var(--gohan); color: var(--bulma); }
.sl-type-tab:not(.is-on):hover { background: rgba(255, 255, 255, 0.6); }
.sl-badge { min-width: 16px; max-width: 34px; padding: 0 4px; border-radius: 100px; background: var(--piccolo); font: 500 12px/16px var(--font); color: var(--gohan); text-align: center; }
.sl-chips { display: flex; gap: 4px; }
.sl-chips .m-chip, .sl-cal-chips .m-chip { border-color: transparent; }
.sl-chips .m-chip.is-on, .sl-chips .m-chip.is-open, .sl-cal-chips .m-chip.is-on, .sl-cal-chips .m-chip.is-open { border-color: var(--piccolo); }
.sl-panel { flex: 1; display: flex; flex-direction: column; gap: 16px; padding-bottom: 12px; border-radius: 8px; background: var(--gohan); }
.sl-seg { display: flex; border-bottom: 1px solid var(--beerus); border-radius: 8px 8px 0 0; overflow: hidden; }
.sl-seg-tab {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px;
  border-bottom: 2px solid transparent; margin-bottom: -1px; font: 700 14px/24px var(--font); color: var(--trunks); white-space: nowrap;
}
.sl-seg-tab:not(.is-on):hover { background: var(--heles); }
.sl-seg-tab.is-on { color: var(--gohan); }
.sl-seg-tab.pending.is-on { background: var(--piccolo); border-color: var(--piccolo); }
.sl-seg-tab.approved.is-on { background: var(--roshi); border-color: var(--roshi); }
.sl-seg-tab.rejected.is-on { background: var(--dodoria); border-color: var(--dodoria); }
.sl-seg-badge { min-width: 16px; max-width: 34px; padding: 0 4px; border-radius: 100px; background: var(--trunks); font: 500 12px/16px var(--font); color: var(--gohan); text-align: center; }
.sl-seg-tab.is-on .sl-seg-badge { background: var(--gohan); color: var(--piccolo); }
.sl-multi-row { display: flex; justify-content: flex-end; padding: 0 12px; }
.sl-multi { display: flex; align-items: center; gap: 4px; padding: 4px 12px 4px 4px; border-radius: 8px; background: var(--piccolo); font: 400 14px/24px var(--font); color: var(--gohan); }
.sl-multi:hover { filter: brightness(1.08); }
.sl-cards { display: flex; flex-direction: column; gap: 12px; padding: 0 12px; }

/* ---------- Multi-select ---------- */
.screen.sl-select, .screen.sl-detail, .screen.sl-new { display: flex; flex-direction: column; overflow: hidden; }
.screen.sl-select { background: var(--goku); }
.sl-sel-top { flex: none; background: var(--gohan); }
.sl-sel-head { display: flex; align-items: center; gap: 16px; min-height: 58px; padding: calc(var(--sb-dash) + 8px) 20px 8px; }
.sl-sel-head h1 { flex: 1; min-width: 0; }
.sl-sel-tools { display: flex; align-items: center; justify-content: space-between; padding: 8px 20px; }
.sl-all { display: flex; align-items: center; gap: 8px; border-radius: 6px; font: 400 16px/24px var(--font); color: var(--piccolo); text-align: left; }
.sl-sort { display: flex; align-items: center; gap: 12px; align-self: stretch; }
.sl-sort-key { display: flex; align-items: center; gap: 10px; border-radius: 6px; font: 400 16px/24px var(--font); color: var(--trunks); }
.sl-sort-div { width: 1px; align-self: stretch; background: var(--beerus); }
.sl-sort-dir { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; }
.sl-sort-dir.is-asc img { transform: rotate(180deg); }
.sl-sort-key:hover, .sl-sort-dir:hover, .sl-all:hover { background: var(--heles); }
.sl-sel-body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; padding: 16px 20px 12px; }
.sl-sel-body::-webkit-scrollbar, .sl-scroll::-webkit-scrollbar, .sl-ss-body::-webkit-scrollbar { display: none; }
.sl-sel-list { display: flex; flex-direction: column; gap: 16px; }

/* Sticky Reject / Approve bar (multi-select + detail) */
.sl-bar { flex: none; padding: 12px 20px 0; background: var(--gohan); border-top: 1px solid var(--beerus); filter: drop-shadow(0 -2px 8px rgba(0, 0, 0, 0.08)); }
.sl-bar-btns { display: flex; gap: 8px; }
.sl-bar-btn { flex: 1; padding: 16px 24px; border-radius: 8px; font: 600 16px/24px var(--font); color: var(--gohan); text-align: center; white-space: nowrap; }
.sl-bar-btn.reject { background: var(--dodoria); }
.sl-bar-btn.approve { background: var(--roshi); }
.sl-bar-btn:not(:disabled):hover { filter: brightness(1.08); }
.sl-bar-btn:disabled { background: #BDBDBD; color: rgba(255, 255, 255, 0.72); cursor: default; }
.sl-bar .home-indicator { height: 34px; }

/* Confirmation sheet buttons */
.btn.sl-confirm { font-weight: 600; color: var(--gohan); }
.btn.sl-confirm.reject { background: var(--dodoria); }
.btn.sl-confirm.approve { background: var(--roshi); }
.btn.sl-confirm:hover { filter: brightness(1.08); }

/* Attachments (sheet + detail) */
.sl-files { display: flex; flex-direction: column; gap: 16px; }
.sl-file { display: flex; align-items: center; gap: 12px; }
.sl-file-thumb { flex: none; width: 32px; height: 32px; border: 0.5px solid rgba(0, 0, 0, 0.25); border-radius: 4px; object-fit: cover; }
.sl-file-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sl-file-name { font: 400 14px/24px var(--font); color: var(--bulma); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-file-meta { font: 400 12px/16px var(--font); color: var(--trunks); }
.sl-view { flex: none; padding: 4px 0; font: 400 12px/16px var(--font); color: var(--piccolo); text-decoration: underline; text-underline-position: from-font; }
.sl-preview { display: grid; place-items: center; padding: 16px; border-radius: 8px; background: var(--goku); }
.sl-preview img { width: 220px; height: auto; border: 0.5px solid rgba(0, 0, 0, 0.25); border-radius: 4px; background: var(--gohan); }
.sl-preview-meta { margin-top: -12px; text-align: center; font: 400 12px/16px var(--font); color: var(--trunks); }

/* ---------- Detail ---------- */
.screen.sl-detail { background: var(--goku); }
.sl-scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.sl-d-page { display: flex; flex-direction: column; gap: 16px; padding: calc(var(--sb-dash) + 24px) 20px 20px; }
.sl-d-head { display: flex; align-items: center; justify-content: space-between; height: 40px; }
.sl-d-card { background: var(--gohan); border-radius: 8px; overflow: hidden; }
.sl-d-student { display: flex; flex-direction: column; gap: 16px; padding: 16px 0; }
.sl-d-student.has-banner { padding-top: 0; }
.sl-banner { padding: 12px 24px; border-radius: 4px; font: 400 12px/16px var(--font); }
.sl-banner.ok { background: var(--roshi-10); color: var(--roshi); }
.sl-banner.bad { background: rgba(211, 48, 48, 0.12); color: var(--dodoria); }
.sl-d-who { display: flex; align-items: center; gap: 12px; padding: 0 20px; }
.sl-d-av { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.sl-d-name { font: 700 18px/28px var(--font); color: #0C1322; }
.sl-d-sub { font: 400 14px/24px var(--font); color: #5D626C; }
.sl-d-sections { display: flex; flex-direction: column; gap: 16px; }
.sl-d-sec { display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.sl-d-h { font: 700 14px/24px var(--font); color: var(--bulma); }
.sl-d-details { display: flex; flex-direction: column; gap: 24px; }
.sl-d-range-wrap { display: flex; flex-direction: column; gap: 4px; }
.sl-d-range { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 8px; background: var(--goku); }
.sl-d-range p { display: flex; align-items: center; gap: 8px; font: 400 16px/24px var(--font); color: var(--bulma); }
.sl-d-range p span:first-child { flex: 1; min-width: 0; }
.sl-d-range i { height: 2px; border-radius: 2px; background: var(--gohan); }
.sl-d-days { padding: 0 12px; font: 400 14px/24px var(--font); color: var(--trunks); }
.sl-d-kv { display: flex; flex-direction: column; gap: 4px; padding: 0 12px; font: 400 12px/16px var(--font); }
.sl-d-kv b { font-weight: 700; color: var(--bulma); }
.sl-d-kv span { color: var(--trunks); overflow-wrap: anywhere; }
.sl-timeline { display: flex; flex-direction: column; gap: 24px; list-style: none; margin: 0; padding: 0; }
.sl-ev { position: relative; display: flex; flex-direction: column; gap: 4px; }
.sl-ev:not(:last-child)::after { content: ''; position: absolute; left: 5px; top: 22px; bottom: -20px; width: 2px; background: var(--beerus); }
.sl-ev-line { display: flex; align-items: center; gap: 12px; font: 400 14px/24px var(--font); color: var(--bulma); }
.sl-ev-line b { font-weight: 700; }
.sl-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; }
.sl-dot.wait { background: rgba(255, 179, 25, 0.56); }
.sl-dot.raised { background: rgba(92, 51, 207, 0.56); }
.sl-dot.approved { background: rgba(46, 125, 50, 0.56); }
.sl-dot.rejected { background: rgba(211, 48, 48, 0.56); }
.sl-ev-time { padding: 0 24px; font: 400 12px/16px var(--font); color: #5D626C; }

/* ---------- Add New Leave ---------- */
.screen.sl-new { background: var(--gohan); }
.sl-n-page { display: flex; flex-direction: column; gap: 32px; padding: calc(var(--sb) + 24px) 20px 40px; }
.sl-n-head { display: flex; align-items: center; gap: 8px; height: 40px; }
.sl-n-head h1 { flex: 1; min-width: 0; }
.sl-form { display: flex; flex-direction: column; gap: 24px; }
.sl-stack { display: flex; flex-direction: column; gap: 8px; }
.sl-field {
  width: 100%; display: flex; align-items: center; gap: 16px; padding: 0 16px; border: 1px solid var(--beerus); border-radius: var(--radius-i-sm);
  background: var(--gohan); text-align: left; cursor: pointer;
}
.sl-field:hover { border-color: #CFCFCF; }
.sl-field:focus-visible { outline: none; border-color: var(--piccolo); }
.sl-field > img { flex: none; }
.sl-field-text { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 16px 0; }
.sl-field.is-filled .sl-field-text { padding: 12px 0 8px; }
.sl-field-label { font: 400 12px/12px var(--font); color: var(--trunks); }
.sl-field-value { font: 400 16px/24px var(--font); color: var(--bulma); }
.sl-field-ph { font: 400 16px/24px var(--font); color: var(--trunks); }
.sl-students .sl-field-text { gap: 8px; }
.sl-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.sl-tag {
  display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 8px; border-radius: 4px; background: var(--jiren);
  font: 700 10px/16px var(--font); letter-spacing: 0.5px; text-transform: uppercase; color: var(--bulma); white-space: nowrap;
}
.sl-tag button { display: flex; border-radius: 50%; }
.sl-tag button:hover { background: rgba(78, 70, 180, 0.2); }
.sl-plain-btn { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; }
.sl-plain-btn:hover { background: var(--heles); }
.sl-help { padding: 0 12px; font: 400 12px/16px var(--font); color: #999CA0; }
.sl-range { display: flex; flex-direction: column; gap: 16px; padding: 16px; border: 1px solid var(--beerus); border-radius: var(--radius-i-sm); }
.sl-range.is-error { border: 0.5px solid var(--chichi); padding: 16.5px; }
.sl-range-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sl-date-chip { padding: 4px 8px; border-radius: 4px; background: var(--heles); font: 400 16px/24px var(--font); color: var(--piccolo); white-space: nowrap; }
.sl-half-chip { display: flex; align-items: center; gap: 4px; padding: 4px 8px 4px 12px; border-radius: 4px; background: var(--heles); font: 400 16px/24px var(--font); color: var(--piccolo); }
.sl-half-chip.is-error { box-shadow: inset 0 0 0 0.5px var(--chichi); }
.sl-date-chip:hover, .sl-half-chip:hover { background: var(--jiren); }
.sl-range-div { height: 1px; background: var(--beerus); }
.sl-error { padding: 0 12px; font: 400 12px/16px var(--font); color: var(--chichi); }
.sl-remarks textarea { min-height: 72px; }
.sl-attach-row { padding-left: 12px; }
.sl-n-foot .an-next { font-weight: 700; }

/* ---------- Select Student overlay ---------- */
.sl-ss { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; background: var(--goku); animation: fade-in .15s ease-out both; }
.sl-ss-top { flex: none; background: var(--gohan); }
.sl-ss-head { display: flex; align-items: center; gap: 16px; min-height: 62px; padding: calc(var(--sb-dash) + 8px) 24px 12px; box-shadow: inset 0 -1px 0 #EAEAEA; }
.sl-ss-head h1 { flex: 1; min-width: 0; }
.sl-save { flex: none; padding: 0 4px; border-radius: 6px; font: 600 16px/24px var(--font); color: var(--piccolo); }
.sl-save:hover { background: var(--jiren); }
.sl-ss-to { border: 0; box-shadow: inset 0 -1px 0 #EAEAEA; }
.sl-ss-field { overflow-x: auto; scrollbar-width: none; }
.sl-ss-field::-webkit-scrollbar { display: none; }
.sl-ss-field .nm-chip { flex: none; }
.sl-ss-body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: 12px; padding: 16px 20px 24px; }
.sl-ss-tools { display: flex; align-items: center; gap: 10px; padding-right: 12px; }
.sl-ss-tools .sl-all { flex: 1; gap: 10px; }
.sl-sort.small .sl-sort-key { font-size: 14px; }
.sl-sort.small .sl-sort-dir { width: 16px; height: 16px; }
.sl-ss-list { display: flex; flex-direction: column; gap: 4px; }
.sl-ss-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 16px; border-radius: 8px; background: var(--gohan); text-align: left; }
.sl-ss-row:hover { background: #FAFAFA; }
.sl-ss-row.is-on { background: linear-gradient(var(--jiren), var(--jiren)), var(--gohan); }
.sl-ss-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sl-ss-name { font: 700 16px/24px var(--font); color: #0C1322; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-ss-sub { font: 400 12px/16px var(--font); color: #5D626C; }

/* ---------- Leave Calendar ---------- */
.screen.sl-cal { background: var(--goku); }
.sl-cal-top { background: var(--gohan); }
.sl-cal-head { display: flex; align-items: center; gap: 8px; padding: calc(var(--sb-dash) + 16px) 20px 20px; }
.sl-cal-head h1 { flex: 1; min-width: 0; }
.sl-cal-search { margin: 0 20px 12px; background: var(--goku); }
.sl-week { display: flex; gap: 8px; padding-right: 20px; border-top: 1px solid var(--beerus); border-bottom: 1px solid var(--beerus); touch-action: pan-y; user-select: none; outline: none; }
.sl-week:focus-visible { box-shadow: inset 0 0 0 1px var(--piccolo); }
.sl-month { flex: none; display: flex; flex-direction: column; justify-content: center; padding: 8px; background: var(--jiren); font: 700 12px/16px var(--font); color: var(--bulma); text-align: center; }
.sl-days { flex: 1; min-width: 0; display: flex; gap: 8px; padding: 8px 0; }
.sl-day { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 8px; border-radius: 8px; background: var(--gohan); text-align: center; }
.sl-day span { font: 400 12px/16px var(--font); color: rgba(0, 0, 0, 0.25); }
.sl-day b { font: 700 16px/24px var(--font); color: var(--bulma); }
.sl-day:hover { background: var(--heles); }
.sl-day.is-on { background: var(--jiren); }
.sl-cal-body { display: flex; flex-direction: column; gap: 24px; padding: 16px 0; }
.sl-cal-chips { gap: 4px; padding: 0 20px; scroll-snap-type: none; }
.sl-cal-list { display: flex; flex-direction: column; gap: 8px; padding: 0 20px; }
.sl-group { padding: 0 16px; font: 700 10px/16px var(--font); letter-spacing: 0.5px; text-transform: uppercase; color: var(--zeno); }
.sl-cal-cards { display: flex; flex-direction: column; gap: 8px; }