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{align-items:center;gap:7px;display:flex}.form-actions{margin-top:22px}.form-actions .primary-btn{margin-top:0}.clear-btn{color:#334155;background:#fff;border:1px solid #cbd5e1;border-radius:10px;flex:none;height:46px;padding:0 16px;font-size:14px;font-weight:600;width:auto!important;min-width:0!important;margin-top:0!important}.clear-btn:hover{background:#f1f5f9}.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}}.full-width{grid-column:1/-1}.modal-backdrop{z-index:1000;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#0f172a9e;justify-content:center;align-items:flex-start;padding:28px 18px;display:flex;position:fixed;inset:0;overflow-y:auto}.modal-card{background:#fff;border:1px solid #e2e8f0;border-radius:18px;width:min(760px,100%);max-height:calc(100vh - 56px);margin:0 auto;padding:28px;overflow-y:auto;box-shadow:0 24px 80px #0f172a47}.modal-card h2{color:#0f172a;margin:0;font-size:24px;line-height:1.25}.modal-card p{color:#64748b;margin:7px 0 20px}.modal-card .section-header{align-items:flex-start;margin-bottom:18px}.modal-card .section-header>button{color:#334155;background:#fff;border:1px solid #cbd5e1;border-radius:10px;flex:none;width:38px;height:38px;padding:0;font-size:18px}.modal-card form{width:100%}.modal-card .form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 18px;display:grid}.modal-card .form-grid>div{min-width:0}.modal-card label{color:#334155;margin:0 0 7px;font-size:13px;font-weight:700;display:block}.modal-card input,.modal-card select,.modal-card textarea{color:#0f172a;background:#fff;border:1px solid #cbd5e1;border-radius:9px;width:100%;min-width:0;max-width:100%;padding:11px 12px;font-size:14px;line-height:1.35;display:block}.modal-card input:focus,.modal-card select:focus,.modal-card textarea:focus{border-color:#2563eb;outline:none;box-shadow:0 0 0 3px #2563eb1f}.modal-card textarea{resize:vertical}.modal-card .full-width{grid-column:1/-1}.modal-card .form-actions{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:10px;display:flex}.modal-card .form-actions button{width:auto;min-width:120px;margin:0}.modal-card .form-actions .form-submit{max-width:none}.primary-small-btn,.secondary-btn{border-radius:9px;padding:9px 13px;font-size:13px;font-weight:700}.primary-small-btn{color:#fff;background:linear-gradient(135deg,#2563eb,#4f46e5);border:0}.secondary-btn{color:#334155;background:#fff;border:1px solid #cbd5e1}.primary-small-btn:hover,.primary-btn:hover{filter:brightness(.97)}@media (width<=760px){.modal-backdrop{padding:12px}.modal-card{border-radius:14px;max-height:calc(100vh - 24px);padding:20px}.modal-card .form-grid{grid-template-columns:1fr;gap:12px}.modal-card .full-width{grid-column:auto}.modal-card .form-actions{justify-content:stretch}.modal-card .form-actions button{flex:140px}}