:root{color:#172033;background:#f7fafc;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button,input,select{font:inherit}button{cursor:pointer}.appShell{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:100vh}.sidebar{background:#fff;border-right:1px solid #d9e2ec;display:flex;flex-direction:column;gap:14px;padding:18px;position:sticky;top:0;height:100vh}.sidebar h1,.pageHeader h1{margin:0 0 3px;font-size:26px;line-height:1.1}.eyebrow{color:#2563eb;font-size:12px;font-weight:800;letter-spacing:0;margin:0;text-transform:uppercase}.profileBlock{border:1px solid #d9e2ec;border-radius:8px;display:grid;gap:2px;padding:10px}.profileBlock span,.muted,.pageHeader p,.helperText{color:#667085}nav{display:grid;gap:2px}.navItem,.ghostButton,.linkButton{background:transparent;border:0;color:#334155;text-align:left}.navItem{border-radius:8px;padding:7px 10px}.navItem.active{background:#eaf1ff;color:#1d4ed8;font-weight:700}.ghostButton{border:1px solid #d9e2ec;border-radius:8px;margin-top:auto;padding:10px 12px;text-align:center}.content{padding:18px 24px}.pageHeader{display:flex;justify-content:space-between;margin-bottom:8px}.pageHeader p{margin:0}.metricGrid{display:grid;gap:12px;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:12px}.metricCard,.panel,.loginCard,.notice{background:#fff;border:1px solid #d9e2ec;border-radius:8px}.metricCard{display:grid;gap:8px;padding:14px}.metricCard span{color:#667085}.metricCard strong{font-size:28px}.panel{margin-bottom:12px;padding:14px}.panelHeader{align-items:center;display:flex;justify-content:space-between;margin-bottom:14px}.panelHeader h2{font-size:18px;margin:0}.inlineStats{display:flex;flex-wrap:wrap;gap:10px}.inlineStats span{background:#eef2f6;border-radius:8px;padding:8px 10px}.formGrid{align-items:end;background:#fff;border:1px solid #d9e2ec;border-radius:8px;display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:16px;padding:18px}.filters{grid-template-columns:repeat(5,minmax(0,1fr))}label{color:#334155;display:grid;font-size:13px;font-weight:700;gap:6px}input,select{background:#fff;border:1px solid #a7b4c2;border-radius:8px;color:#172033;min-height:42px;padding:9px 10px}.primaryButton,.secondaryButton,.dangerButton{border:0;border-radius:8px;color:#fff;font-weight:800;min-height:42px;padding:10px 14px}.primaryButton{background:#2563eb}.secondaryButton{background:#475569}.dangerButton{background:#dc2626}.linkButton{color:#2563eb;font-weight:800;padding:0}.tableWrap{overflow-x:auto}table{border-collapse:collapse;min-width:720px;width:100%}th,td{border-bottom:1px solid #e5edf5;padding:10px;text-align:left;vertical-align:middle}th{color:#667085;font-size:12px;text-transform:uppercase}.twoColumn{display:grid;gap:16px;grid-template-columns:minmax(0,1fr) minmax(360px,.8fr)}.detailGrid{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:12px}.fullWidth{margin-bottom:12px}.compactTable table{min-width:420px}.buttonRow{display:flex;gap:10px;margin-top:14px}.notice{border-color:#b8cef7;color:#1d4ed8;margin-bottom:16px;padding:12px 14px}.errorText{color:#dc2626;font-weight:700}.loginPage{align-items:center;background:#f7fafc;display:flex;min-height:100vh;justify-content:center;padding:24px}.loginCard{display:grid;gap:14px;max-width:420px;padding:28px;width:100%}.loginCard h1{margin:0 0 6px}@media (max-width: 1000px){.appShell{grid-template-columns:1fr}.sidebar{height:auto;position:static}nav{grid-template-columns:repeat(2,minmax(0,1fr))}.metricGrid,.formGrid,.filters,.settingsForm,.twoColumn{grid-template-columns:1fr}.settingsForm .wideField{grid-column:span 1}}.settingsForm{align-items:end;display:grid;gap:14px;grid-template-columns:repeat(4,minmax(0,1fr))}.settingsForm .wideField{grid-column:span 2}.settingsStack{display:grid;gap:16px;width:100%}.loadingOverlay{align-items:center;background:#f7fafcb8;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1000}.loadingBox{align-items:center;background:#fff;border:1px solid #d9e2ec;border-radius:8px;box-shadow:0 18px 45px #0f172a1f;display:flex;gap:12px;padding:16px 18px}.loadingSpinner{animation:spin .8s linear infinite;border:3px solid #d9e2ec;border-top-color:#2563eb;border-radius:50%;height:26px;width:26px}button:disabled{cursor:wait;opacity:.72}@keyframes spin{to{transform:rotate(360deg)}}.sidebarClock{border:1px solid #d9e2ec;border-radius:8px;color:#334155;font-size:13px;font-weight:800;margin-top:auto;padding:9px 10px;text-align:center}.toast{background:#172033;border-radius:8px;bottom:24px;box-shadow:0 18px 45px #0f172a2e;color:#fff;font-weight:800;left:50%;max-width:min(520px,calc(100vw - 32px));padding:12px 16px;position:fixed;text-align:center;transform:translate(-50%);z-index:1100}.toastError{background:#dc2626}.attendanceFilters{grid-template-columns:repeat(6,minmax(0,1fr))}.attendanceDetailPanel{margin-top:16px}.detailSummaryGrid{display:grid;gap:12px;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:14px}.compactGhost{margin-top:0;min-width:88px}@media (max-width: 1000px){.attendanceFilters,.detailSummaryGrid{grid-template-columns:1fr}}.uploadActions{flex-wrap:wrap}.uploadActions .secondaryButton{min-width:120px}.fileButton{align-items:center;background:#eef4ff;border:1px solid #cbd9ef;border-radius:8px;color:#1d4ed8;cursor:pointer;display:inline-flex;font-size:14px;font-weight:800;justify-content:center;min-height:38px;padding:0 14px}.fileButton input{display:none}.uploadFileName{margin:12px 0 0}.uploadErrors{background:#fff1f2;border:1px solid #fecdd3;border-radius:8px;color:#be123c;font-size:13px;font-weight:700;margin-top:12px;padding:10px 12px}.primaryButton:disabled,.secondaryButton:disabled{cursor:not-allowed;opacity:.55}.uploadClassSelect{display:block;max-width:260px}.uploadClassSelect select{margin-top:6px}.uploadCheck{align-items:center;display:inline-flex;font-weight:800;gap:8px;margin-top:12px}.uploadCheck input{height:16px;width:16px}.uploadHint{background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;color:#1d4ed8;font-size:13px;font-weight:800;margin:12px 0 0;padding:10px 12px}.uploadSuccess{background:#ecfdf5;border:1px solid #bbf7d0;border-radius:8px;color:#047857;font-size:13px;font-weight:800;margin:12px 0 0;padding:10px 12px}.subTabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}.subTab{background:#eef4ff;border:1px solid #cbd9ef;border-radius:8px;color:#1d4ed8;cursor:pointer;font-weight:800;min-height:34px;padding:0 12px}.subTab.active{background:#2563eb;border-color:#2563eb;color:#fff}.studentPhotoField{display:flex;flex-direction:column;gap:6px}.studentPhotoButton{align-self:flex-start}.noTopMargin{margin-top:0}.teacherPhotoPreview{align-items:center;aspect-ratio:1;background:#f8fafc;border:1px dashed #94a3b8;border-radius:8px;color:#475569;cursor:pointer;display:inline-flex;font-weight:800;justify-content:center;max-width:132px;min-height:132px;overflow:hidden;padding:0;width:132px}.teacherPhotoPreview img{height:100%;object-fit:cover;width:100%}.hiddenFileInput{display:none}.teacherPhotoMessage{align-self:end;margin:0}.tableAvatar{border-radius:6px;height:42px;object-fit:cover;width:42px}.reportTabs{margin-bottom:14px}.reportTabs .subTab{min-width:108px}.compactFilters{margin-bottom:12px}.inlineActions{align-items:center;display:inline-flex;gap:10px}.dangerLink{background:transparent;border:0;color:#dc2626;cursor:pointer;font-weight:800;padding:0}.paginationBar{align-items:center;display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;margin-top:10px}.paginationBar label{align-items:center;display:inline-flex;gap:6px}.paginationBar select{min-height:34px}.reportExportActions{justify-content:flex-end;margin:10px 0 12px}@media (max-width: 1000px){.settingsForm{grid-template-columns:1fr}.settingsForm .wideField{grid-column:span 1}}.schoolLogoField{display:flex;flex-direction:column;gap:8px}.schoolLogoPreview{align-items:center;background:#f8fafc;border:1px dashed #94a3b8;border-radius:8px;color:#475569;cursor:pointer;display:inline-flex;font-weight:800;height:86px;justify-content:center;overflow:hidden;padding:0;width:142px}.schoolLogoPreview img{height:100%;object-fit:contain;width:100%}textarea{border:1px solid #cbd5e1;border-radius:8px;font:inherit;min-height:74px;padding:10px 12px;resize:vertical}.approvalDetailPanel{margin-top:12px}.approvalPreview pre{font-family:inherit;margin:0;max-width:360px;overflow:auto;white-space:pre-wrap}.sidebarFooter{display:grid;gap:8px;margin-top:auto}.sidebarFooter .ghostButton,.sidebarFooter .sidebarClock{margin-top:0}.approvalTabs .subTab{align-items:center;display:inline-flex;gap:8px;justify-content:center}.tabBadge{align-items:center;background:#dc2626;border-radius:999px;color:#fff;display:inline-flex;font-size:12px;height:20px;justify-content:center;min-width:20px;padding:0 6px}.subTab.active .tabBadge{background:#fff;color:#1d4ed8}.clickableTable tbody tr{cursor:pointer}.clickableTable tbody tr:hover{background:#f8fbff}.statusPill{border-radius:999px;display:inline-flex;font-size:12px;font-weight:800;padding:3px 9px;text-transform:capitalize}.statusPill.pending{background:#fff7ed;color:#c2410c}.statusPill.approved{background:#ecfdf3;color:#047857}.statusPill.rejected{background:#fef2f2;color:#b91c1c}.statusHint{color:#b45309;font-size:13px;font-weight:700;margin:0}.modalOverlay{align-items:center;background:#0f172a6b;display:flex;top:0;right:0;bottom:0;left:0;justify-content:center;padding:24px;position:fixed;z-index:40}.modalPanel{background:#fff;border:1px solid #d9e2ec;border-radius:8px;box-shadow:0 24px 70px #0f172a38;max-height:calc(100vh - 48px);overflow:auto;padding:16px 18px;width:min(1080px,100%)}.modalHeader{gap:16px;position:sticky;top:0;z-index:1;background:#fff;padding-bottom:12px}.approvalModal .approvalPreview{max-height:52vh;overflow:auto}.modalActions{justify-content:flex-end}.compactGhost{margin-top:0}.attendanceToolbar{align-items:end;display:grid;gap:12px;grid-template-columns:minmax(220px,320px) 1fr auto;margin-bottom:12px}.attendanceCounts{color:#334155;font-size:14px;font-weight:800;margin:0 0 9px}@media (max-width: 900px){.attendanceToolbar{grid-template-columns:1fr}.attendanceCounts{margin:0}}