html,body,#root{min-height:100%}body{margin:0}*{box-sizing:border-box}:root{color:#172033;font-synthesis:none;text-rendering:optimizelegibility;background:#f4f7fb;font-family:Inter,Arial,Helvetica,sans-serif}body{background:#f4f7fb;min-width:320px;min-height:100vh;margin:0}button,input,textarea{font:inherit}button{cursor:pointer}.login-page{background:linear-gradient(135deg,#eef5ff 0%,#f8f7ff 48%,#eefcf9 100%);justify-content:center;align-items:center;min-height:100vh;padding:24px;display:flex}.login-card{background:#fffffff7;border:1px solid #e6eaf2;border-radius:24px;width:100%;max-width:440px;padding:38px;box-shadow:0 24px 70px #1e325a1f}.logo-circle{color:#fff;background:linear-gradient(135deg,#2563eb,#7c3aed);border-radius:20px;justify-content:center;align-items:center;width:70px;height:70px;margin-bottom:20px;font-size:34px;font-weight:800;display:flex}.login-card h1{margin:0;font-size:32px}.subtitle{color:#64748b;margin:8px 0 28px}.login-card label,.form-card label{color:#334155;margin:15px 0 7px;font-size:13px;font-weight:700;display:block}.login-card input,.form-card input,.form-card textarea{background:#fff;border:1px solid #d9e0eb;border-radius:11px;outline:none;width:100%;padding:13px 14px}.login-card input:focus,.form-card input:focus,.form-card textarea:focus{border-color:#2563eb;box-shadow:0 0 0 3px #2563eb17}.primary-btn{color:#fff;background:linear-gradient(135deg,#2563eb,#4f46e5);border:0;border-radius:11px;width:100%;margin-top:22px;padding:14px;font-weight:700}.primary-btn:hover{filter:brightness(.96)}.primary-btn:disabled{opacity:.65;cursor:not-allowed}.login-info{color:#64748b;background:#f5f7fb;border-radius:12px;margin-top:24px;padding:14px;font-size:13px;line-height:1.5}.error,.success{border-radius:10px;margin-bottom:18px;padding:12px 15px}.error{color:#b42318;background:#fff0f0;border:1px solid #ffd5d2}.success{color:#087443;background:#ecfdf3;border:1px solid #c7f0d8}.app{min-height:100vh}.topbar{z-index:10;background:#fff;border-bottom:1px solid #e6eaf0;justify-content:space-between;align-items:center;height:76px;padding:0 30px;display:flex;position:sticky;top:0}.topbar h2{margin:0;font-size:20px}.topbar span{color:#64748b;font-size:12px}.user-area{align-items:center;gap:16px;display:flex}.user-area strong,.user-area small{display:block}.user-area small{color:#64748b;margin-top:3px}.logout-btn{color:#334155;background:#fff;border:1px solid #d8dee8;border-radius:9px;padding:9px 16px}.logout-btn:hover{background:#f8fafc}.layout{min-height:calc(100vh - 76px);display:flex}.sidebar{color:#fff;background:#111827;flex:0 0 245px;width:245px;padding:22px 14px}.sidebar-brand{align-items:center;gap:11px;padding:4px 9px 22px;display:flex}.sidebar-brand strong,.sidebar-brand small{display:block}.sidebar-brand small{color:#9ca3af;margin-top:3px;font-size:11px}.sidebar-logo{background:linear-gradient(135deg,#2563eb,#7c3aed);border-radius:12px;justify-content:center;align-items:center;width:40px;height:40px;font-size:20px;font-weight:800;display:flex}.sidebar-title{color:#6b7280;letter-spacing:.12em;padding:15px 10px 8px;font-size:10px;font-weight:800}.sidebar button{color:#cbd5e1;text-align:left;background:0 0;border:0;border-radius:9px;width:100%;margin:2px 0;padding:12px 13px;font-size:13px}.sidebar button:hover{color:#fff;background:#1f2937}.sidebar button.nav-active{color:#fff;background:#2563eb}.dashboard{flex:1;min-width:0;max-width:1500px;padding:32px}.welcome{margin-bottom:25px}.eyebrow{color:#2563eb;letter-spacing:.13em;margin-bottom:7px;font-size:10px;font-weight:800}.welcome h1{margin:0;font-size:30px}.welcome p{color:#64748b;margin:7px 0 0}.cards{grid-template-columns:repeat(4,1fr);gap:17px;display:grid}.stat-card{background:#fff;border:1px solid #e7ebf2;border-radius:15px;align-items:center;gap:15px;padding:20px;display:flex;box-shadow:0 5px 20px #1e325a0a}.stat-card.clickable{cursor:pointer;transition:transform .18s,box-shadow .18s}.stat-card.clickable:hover{transform:translateY(-2px);box-shadow:0 10px 25px #1e325a17}.stat-icon{font-size:27px}.stat-card span{color:#64748b;font-size:12px;display:block}.stat-card strong{margin-top:5px;font-size:24px;display:block}.panel,.table-section,.form-card,.module-placeholder,.student-card{background:#fff;border:1px solid #e7ebf2;border-radius:16px;box-shadow:0 5px 20px #1e325a0a}.panel{margin-top:22px;padding:22px}.panel-header,.section-header{justify-content:space-between;align-items:center;gap:15px;margin-bottom:18px;display:flex}.panel-header h2,.section-header h2{margin:0;font-size:19px}.panel-header p,.section-header p{color:#64748b;margin:5px 0 0;font-size:13px}.section-header>span{color:#64748b;font-size:12px}.quick-grid{grid-template-columns:repeat(4,1fr);gap:13px;display:grid}.quick-grid button{color:#1e293b;text-align:left;background:#f8fafc;border:1px solid #e1e7f0;border-radius:11px;padding:17px 14px;font-weight:700}.quick-grid button:hover{background:#eff6ff;border-color:#93c5fd}.student-card{align-items:center;gap:18px;margin-bottom:20px;padding:25px;display:flex}.student-icon{background:#eff6ff;border-radius:16px;justify-content:center;align-items:center;width:62px;height:62px;font-size:30px;display:flex}.student-card h2{margin:0}.student-card p{color:#64748b;margin:7px 0 0}.student-stats{margin-bottom:20px}.table-section{padding:22px}.table-wrapper{overflow-x:auto}table{border-collapse:collapse;width:100%}th,td{text-align:left;white-space:nowrap;border-bottom:1px solid #edf0f5;padding:13px 12px}th{color:#475569;background:#f8fafc;font-size:12px}td{font-size:13px}tbody tr:hover{background:#fafcff}.badge{color:#475569;text-transform:capitalize;background:#eef2f7;border-radius:999px;padding:5px 9px;font-size:11px;font-weight:800;display:inline-block}.status-approved,.status-active,.status-present{color:#166534;background:#dcfce7}.status-pending,.status-late{color:#92400e;background:#fef3c7}.status-rejected,.status-absent{color:#991b1b;background:#fee2e2}.status-half_day{color:#3730a3;background:#e0e7ff}.action-buttons{gap:7px;display:flex}.approve-btn,.reject-btn{border:0;border-radius:7px;padding:7px 10px;font-size:11px;font-weight:700}.approve-btn{color:#166534;background:#dcfce7}.reject-btn{color:#991b1b;background:#fee2e2}.remarks{color:#64748b;font-size:12px}.form-card{max-width:760px;padding:26px}.form-heading{align-items:center;gap:14px;margin-bottom:22px;display:flex}.form-icon{background:#eff6ff;border-radius:13px;justify-content:center;align-items:center;width:50px;height:50px;font-size:25px;display:flex}.form-heading h2{margin:0}.form-heading p{color:#64748b;margin:5px 0 0;font-size:13px}.form-grid{grid-template-columns:1fr 1fr;gap:16px;display:grid}.form-submit{max-width:260px}.module-placeholder{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:350px;padding:55px 30px;display:flex}.big-module-icon{margin-bottom:12px;font-size:52px}.modul-placeholder h2{margin:0}.module-placeholder p{color:#64748b;max-width:500px;line-height:1.6}.coming-soon{color:#4338ca;background:#eef2ff;border-radius:999px;padding:7px 12px;font-size:11px;font-weight:800;display:inline-block}.empty-state{text-align:center;color:#64748b;padding:45px 20px}.back-btn{color:#334155;background:#fff;border:1px solid #d8dee8;border-radius:9px;margin-top:20px;padding:10px 15px;font-weight:700}.back-btn:hover{background:#f8fafc}@media (width<=1100px){.cards,.quick-grid{grid-template-columns:repeat(2,1fr)}.sidebar{flex-basis:220px;width:220px}}@media (width<=760px){.topbar{padding:0 15px}.topbar h2{font-size:16px}.layout{display:block}.sidebar{width:100%;padding:10px}.sidebar-brand,.sidebar-title{display:none}.sidebar button{width:auto;margin:2px;display:inline-block}.dashboard{padding:20px 15px}.cards,.quick-grid,.form-grid{grid-template-columns:1fr}.user-area>div{display:none}.student-card{align-items:flex-start}}@media (width<=500px){.login-card{padding:27px 20px}.welcome h1{font-size:25px}.form-submit{max-width:none}}