@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";:root{--color-primary:#1c3d6d;--color-primary-light:#818cf8;--color-secondary:#8b5cf6;--color-secondary-light:#a78bfa;--color-accent:#06b6d4;--color-success:#10b981;--color-warning:#f59e0b;--color-danger:#ef4444;--color-bg:#f8fafc;--color-surface:#fff;--color-surface-hover:#f9fafb;--color-text:#1f2937;--color-text-light:#6b7280;--color-border:#e5e7eb;--gradient-primary:linear-gradient(135deg, #1c3d6d 0%, #8b5cf6 100%);--gradient-soft:linear-gradient(135deg, #4f46e51a 0%, #8b5cf61a 100%);--gradient-attendance:linear-gradient(135deg, #1c3d6d 0%, #06b6d4 100%);--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -1px #0000000f;--shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -2px #0000000d;--shadow-glow:0 0 15px #4f46e54d;--radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.75rem;--radius-xl:1rem;--radius-2xl:1.5rem;--spacing-xs:.25rem;--spacing-sm:.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--color-bg);color:var(--color-text);-webkit-font-smoothing:antialiased;font-family:Inter,sans-serif;line-height:1.5}button,input,textarea,select{font-family:inherit}.app-container{height:100vh;display:flex;overflow:hidden}.sidebar{background-color:var(--color-surface);border-right:1px solid var(--color-border);width:250px;min-width:250px;box-shadow:var(--shadow-sm);z-index:10;flex-direction:column;padding:0;transition:width .35s cubic-bezier(.4,0,.2,1),min-width .35s cubic-bezier(.4,0,.2,1),opacity .25s,transform .35s cubic-bezier(.4,0,.2,1);display:flex;overflow:hidden}.sidebar-hidden{opacity:0;pointer-events:none;border-right:none;padding:0;transform:translate(-20px);width:0!important;min-width:0!important}.sidebar-logo{padding:0 var(--spacing-lg);margin-bottom:var(--spacing-xl);align-items:center;gap:var(--spacing-sm);font-size:1.5rem;font-weight:700;display:flex}.sidebar-logo-text{background:var(--gradient-primary);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.sidebar-nav{gap:var(--spacing-sm);padding:0 var(--spacing-md);flex-direction:column;display:flex}.nav-item{align-items:center;gap:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);color:var(--color-text-light);cursor:pointer;font-size:15px;font-weight:500;text-decoration:none;transition:all .2s;display:flex}.nav-item:hover{background-color:var(--color-surface-hover);color:var(--color-primary)}.nav-item.active{background:var(--gradient-soft);color:var(--color-primary);font-weight:600;position:relative}.nav-item.active:before{content:"";background-color:var(--color-primary);border-radius:0 4px 4px 0;width:4px;height:80%;position:absolute;top:10%;left:-16px}.sidebar-section-title{color:#94a3b8;text-transform:uppercase;letter-spacing:.08em;padding:var(--spacing-sm) var(--spacing-md);margin-top:var(--spacing-md);margin-bottom:-4px;font-size:12px;font-weight:700}.main-content{padding:var(--spacing-xl);background-color:var(--color-bg);flex:1;transition:padding .35s cubic-bezier(.4,0,.2,1);overflow-y:auto}.card{background-color:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--spacing-lg);transition:transform .2s,box-shadow .2s}.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}h1{color:var(--color-text);margin-bottom:var(--spacing-lg);font-size:1.875rem;font-weight:700}h2{color:var(--color-text);margin-bottom:var(--spacing-md);font-size:1.25rem;font-weight:600}.btn{justify-content:center;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius-md);cursor:pointer;border:none;font-size:.875rem;font-weight:500;transition:all .2s;display:inline-flex}.btn-primary{background-color:var(--color-primary);color:#fff;box-shadow:0 4px 6px #1c3d6d33}.btn-primary:hover{background-color:#153056;transform:translateY(-1px);box-shadow:0 6px 8px #1c3d6d4d}.btn-outline{border:1px solid var(--color-border);color:var(--color-text);background-color:#0000}.btn-outline:hover{background-color:var(--color-surface-hover);border-color:var(--color-primary-light);color:var(--color-primary)}.badge{border-radius:9999px;padding:.25rem .75rem;font-size:.75rem;font-weight:600}.badge-blue{color:var(--color-primary);background-color:#4f46e51a}.badge-purple{color:var(--color-secondary);background-color:#8b5cf61a}.badge-green{color:var(--color-success);background-color:#10b9811a}.badge-danger{color:var(--color-danger);background-color:#ef44441a}.table-container{width:100%;overflow-x:auto}table{border-collapse:collapse;width:100%}th{text-align:left;padding:var(--spacing-md);color:var(--color-text-light);border-bottom:2px solid var(--color-border);font-size:.875rem;font-weight:600}td{padding:var(--spacing-md);border-bottom:1px solid var(--color-border);color:var(--color-text);font-size:.875rem}tr:hover td{background-color:var(--color-surface-hover)}.avatar{background-color:var(--color-primary);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:.875rem;font-weight:600;display:flex}.dashboard-grid{gap:var(--spacing-lg);margin-bottom:var(--spacing-xl);grid-template-columns:repeat(auto-fit,minmax(240px,1fr));display:grid}.stat-card{align-items:center;gap:var(--spacing-lg);display:flex}.stat-icon{border-radius:var(--radius-lg);justify-content:center;align-items:center;width:48px;height:48px;font-size:1.5rem;display:flex}.stat-icon.blue{color:var(--color-primary);background:#4f46e51a}.stat-icon.purple{color:var(--color-secondary);background:#8b5cf61a}.stat-icon.green{color:var(--color-success);background:#10b9811a}.stat-icon.cyan{color:var(--color-accent);background:#06b6d41a}.stat-content h3{color:var(--color-text-light);font-size:.875rem;font-weight:500}.stat-content p{color:var(--color-text);font-size:1.5rem;font-weight:700}.tabs{gap:var(--spacing-md);border-bottom:1px solid var(--color-border);margin-bottom:var(--spacing-lg);display:flex}.tab{padding:var(--spacing-sm) 0;color:var(--color-text-light);cursor:pointer;border-bottom:2px solid #0000;font-weight:500;transition:all .2s}.tab:hover{color:var(--color-text)}.tab.active{color:var(--color-primary);border-bottom-color:var(--color-primary)}.progress-bar-container{background-color:var(--color-border);border-radius:999px;width:100%;height:8px;overflow:hidden}.progress-bar{border-radius:999px;height:100%;transition:width .3s}.progress-blue{background:var(--color-primary)}.progress-purple{background:var(--color-secondary)}.progress-green{background:var(--color-success)}.flex{display:flex}.flex-col{flex-direction:column;display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-2{gap:.5rem}.gap-4{gap:1rem}.mt-4{margin-top:1rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.w-full{width:100%}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.attendance-display{text-align:center;background:var(--gradient-soft);border-radius:var(--radius-2xl);min-height:400px;padding:var(--spacing-xl);border:1px solid #4f46e533;flex-direction:column;justify-content:center;align-items:center;display:flex}.attendance-code{letter-spacing:.5rem;background:var(--gradient-attendance);-webkit-text-fill-color:transparent;margin:var(--spacing-lg) 0;font-variant-numeric:tabular-nums;text-shadow:var(--shadow-glow);font-size:6rem;font-weight:800}.attendance-timer{align-items:center;gap:var(--spacing-sm);color:var(--color-text-light);font-size:1.25rem;font-weight:500;display:flex}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.05)}70%{transform:scale(.9)}to{transform:scale(1)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes spinSlow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-fade-in{animation:.4s ease-out forwards fadeIn}.animate-bounce-in{animation:.6s cubic-bezier(.175,.885,.32,1.275) forwards bounceIn}.animate-scale-in{animation:.4s ease-out forwards scaleIn}.animate-spin-slow{animation:8s linear infinite spinSlow}.animate-spin{animation:1s linear infinite spin}.custom-scrollbar::-webkit-scrollbar{width:6px}.custom-scrollbar::-webkit-scrollbar-track{background:0 0}.custom-scrollbar::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:10px}.custom-scrollbar::-webkit-scrollbar-thumb:hover{background:#fff3}@keyframes pulse{0%{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}to{opacity:1;transform:scale(1)}}.timer-urgent{color:var(--color-danger);animation:1s infinite pulse}.sticky-col-1{width:140px;min-width:140px;max-width:140px;z-index:10!important;background-color:#fff!important;position:sticky!important;left:0!important}.sticky-col-2{width:120px;min-width:120px;max-width:120px;z-index:10!important;background-color:#fff!important;border-right:1px solid #e2e8f0!important;position:sticky!important;left:140px!important;box-shadow:4px 0 6px -4px #00000026!important}th.sticky-col-1,th.sticky-col-2{z-index:20!important;background-color:#fff!important}tr:hover td.sticky-col-1,tr:hover td.sticky-col-2{background-color:var(--color-surface-hover)!important}.recharts-wrapper:focus,.recharts-surface:focus,.recharts-sector:focus,.recharts-radial-bar-sector:focus,path.recharts-radial-bar-sector:focus,path.recharts-sector:focus,.recharts-wrapper * :focus{outline:none!important}.react-hot-toast{letter-spacing:-.01em;-webkit-user-select:none;user-select:none;line-height:1.45;font-family:Inter,sans-serif!important}.login-container{width:100%;min-height:100vh;color:var(--color-text);background-color:#f8fafc;background-image:radial-gradient(circle at 15%,#4f46e514,#0000 25%),radial-gradient(circle at 85% 30%,#6366f114,#0000 25%);justify-content:center;align-items:center;padding:1.5rem;font-family:Inter,sans-serif;display:flex;position:relative;overflow:hidden}.login-card-wrapper{z-index:10;width:100%;max-width:460px;position:relative}.login-mobile-brand{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:1rem;margin-bottom:2rem;display:flex}.login-mobile-brand-icon{color:#1c3d6d;background-color:#e0e7ff;border-radius:1rem;justify-content:center;align-items:center;padding:.875rem;display:flex;box-shadow:0 4px 6px -1px #4f46e51a,0 2px 4px -1px #4f46e50f}.login-mobile-brand-text{letter-spacing:-.025em;color:#111827;font-size:1.75rem;font-weight:800}.login-tagline{color:#6b7280;max-width:300px;margin:0 auto;font-size:.875rem;font-weight:500}.login-card{background-color:#fff;border:1px solid #f3f4f6;border-radius:1.5rem;padding:2.5rem;box-shadow:0 20px 25px -5px #0000000d,0 8px 10px -6px #00000003}.login-card-header{text-align:center;margin-bottom:2rem}.login-card-title{color:#111827;letter-spacing:-.025em;margin-bottom:.5rem;font-size:1.5rem;font-weight:700}.login-card-subtitle{color:#6b7280;font-size:.875rem;font-weight:500}.login-error-message{background-color:#fef2f2;border:1px solid #fee2e2;border-radius:.75rem;align-items:flex-start;gap:.75rem;margin-bottom:1.5rem;padding:1rem;display:flex}.login-error-dot{background-color:#ef4444;border-radius:50%;width:.375rem;height:.375rem;margin-top:.5rem}.login-error-text{color:#dc2626;font-size:.875rem;font-weight:500}.login-form{flex-direction:column;gap:1.25rem;display:flex}.login-input-group{flex-direction:column;gap:.5rem;display:flex}.login-label{color:#374151;font-size:.875rem;font-weight:600}.login-input-wrapper{position:relative}.login-input-icon{pointer-events:none;color:#9ca3af;align-items:center;padding-left:1rem;display:flex;position:absolute;top:0;bottom:0;left:0}.login-input{color:#111827;background-color:#f9fafb;border:1px solid #e5e7eb;border-radius:.75rem;outline:none;width:100%;padding:.875rem 1rem .875rem 3rem;font-size:.875rem;font-weight:500;transition:all .2s;display:block}.login-input::placeholder{color:#9ca3af}.login-input:focus{background-color:#fff;border-color:#1c3d6d;box-shadow:0 0 0 4px #4f46e51a}.login-password-toggle{cursor:pointer;color:#9ca3af;background:0 0;border:none;align-items:center;padding-right:1rem;transition:color .2s;display:flex;position:absolute;top:0;bottom:0;right:0}.login-password-toggle:hover{color:#4b5563}.login-options{justify-content:space-between;align-items:center;padding-top:.25rem;display:flex}.login-remember-me{align-items:center;display:flex}.login-checkbox{color:#1c3d6d;cursor:pointer;border:1px solid #d1d5db;border-radius:.25rem;width:1rem;height:1rem}.login-checkbox-label{color:#4b5563;cursor:pointer;-webkit-user-select:none;user-select:none;margin-left:.5rem;font-size:.875rem;font-weight:500}.login-forgot-password{color:#1c3d6d;font-size:.875rem;font-weight:600;text-decoration:none;transition:color .2s}.login-forgot-password:hover{color:#4338ca}.login-submit-btn{color:#fff;cursor:pointer;background-color:#1c3d6d;border:none;border-radius:.75rem;justify-content:center;align-items:center;width:100%;margin-top:1rem;padding:.875rem 1rem;font-size:.875rem;font-weight:700;transition:all .2s;display:flex;box-shadow:0 4px 6px -1px #1c3d6d33,0 2px 4px -1px #1c3d6d1a}.login-submit-btn:hover:not(:disabled){background-color:#2a508f;transform:translateY(-1px)}.login-submit-btn:active:not(:disabled){transform:translateY(0)}.login-submit-btn:focus{outline:none;box-shadow:0 0 0 4px #1c3d6d33}.login-submit-btn:disabled{opacity:.7;cursor:not-allowed}.login-loading-spinner{color:#fff;width:1.25rem;height:1.25rem;margin-right:.5rem;animation:1s linear infinite spin}.login-security-notice{text-align:center;color:#9ca3af;margin-top:2rem;padding:0 1rem;font-size:.75rem;font-weight:500;line-height:1.6}.login-security-notice-break{display:block}