*{box-sizing:border-box}body{margin:0;font-family:Segoe UI,Arial,sans-serif;background:#f4f5fa;color:#1f2937}a{text-decoration:none}.app-layout{display:flex;min-height:100vh}.sidebar{width:230px;background:#1e1b4b;color:#fff;padding:20px 0;flex-shrink:0}.sidebar-logo{font-size:20px;font-weight:700;padding:0 20px 20px}.sidebar-link{display:flex;align-items:center;gap:10px;padding:12px 20px;color:#cbd5e1}.sidebar-link.active,.sidebar-link:hover{background:#312e81;color:#fff}.main-content{flex:1;display:flex;flex-direction:column}.navbar{display:flex;justify-content:space-between;align-items:center;background:#fff;padding:15px 25px;box-shadow:0 1px 4px #00000014}.navbar-user{display:flex;align-items:center;gap:12px}.navbar-user button{background:#ef4444;color:#fff;border:none;padding:6px 12px;border-radius:6px;cursor:pointer}.page-content{padding:25px}h1{margin-top:0}.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:20px}.stat-card{background:#fff;padding:18px;border-radius:10px;box-shadow:0 1px 4px #0000000f}.stat-value{font-size:26px;font-weight:700}.stat-label{color:#6b7280;font-size:13px;margin-top:4px}.chart-card,.panel{background:#fff;padding:20px;border-radius:10px;margin-bottom:20px;box-shadow:0 1px 4px #0000000f}.two-col{display:grid;grid-template-columns:2fr 1fr;gap:20px}table{width:100%;border-collapse:collapse;margin-top:10px}th,td{text-align:left;padding:8px 10px;border-bottom:1px solid #e5e7eb;font-size:14px}th{color:#6b7280;font-weight:600}.emp-list{list-style:none;padding:0}.emp-list li{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:14px}.dot{width:8px;height:8px;border-radius:50%;display:inline-block}.dot.online{background:#16a34a}.dot.offline{background:#9ca3af}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}.emp-card{background:#fff;border-radius:10px;padding:14px;display:flex;gap:12px;align-items:center;cursor:pointer;box-shadow:0 1px 4px #0000000f}.emp-card img{width:50px;height:50px;border-radius:50%;object-fit:cover}.badge{font-size:12px;padding:2px 8px;border-radius:12px}.badge.online{background:#dcfce7;color:#16a34a}.badge.offline{background:#f3f4f6;color:#6b7280}.filter-tabs{margin-bottom:15px}.filter-tabs button{background:#e5e7eb;border:none;padding:8px 16px;margin-right:8px;border-radius:6px;cursor:pointer;text-transform:capitalize}.filter-tabs button.active{background:#4f46e5;color:#fff}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;align-items:center;margin-bottom:20px;background:#fff;padding:18px;border-radius:10px}.form-grid input,.form-grid select{padding:8px;border:1px solid #d1d5db;border-radius:6px}.form-grid button{background:#4f46e5;color:#fff;border:none;padding:9px;border-radius:6px;cursor:pointer;grid-column:span 1}button{font-family:inherit}table button{background:#4f46e5;color:#fff;border:none;padding:4px 10px;border-radius:5px;margin-right:5px;cursor:pointer;font-size:12px}.login-page{display:flex;align-items:center;justify-content:center;height:100vh}.login-card{background:#fff;padding:30px;border-radius:10px;width:320px;display:flex;flex-direction:column;gap:10px;box-shadow:0 2px 10px #0000001a}.login-card input{padding:9px;border:1px solid #d1d5db;border-radius:6px}.login-card button{background:#4f46e5;color:#fff;border:none;padding:10px;border-radius:6px;cursor:pointer;margin-top:8px}.error-text{color:#dc2626;font-size:13px}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.animate-slideDown{animation:slideDown .2s ease-out}@keyframes pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.8}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:#f4f5fa;color:#1f2937;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#f1f5f9;border-radius:4px}::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px;transition:background .2s}::-webkit-scrollbar-thumb:hover{background:#94a3b8}::selection{background:#4f46e5;color:#fff}::-moz-selection{background:#4f46e5;color:#fff}a{color:#4f46e5;text-decoration:none;transition:color .2s}a:hover{color:#7c3aed}.text-center{text-align:center}.text-muted{color:#6b7280}.text-sm{font-size:.875rem}.text-xs{font-size:.75rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-4{gap:1rem}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.fade-in{animation:fadeIn .4s ease-out}.slide-down{animation:slideDown .3s ease-out}.slide-up{animation:slideUp .3s ease-out}@media(max-width:640px){body{font-size:14px}}@media print{.no-print{display:none!important}body{background:#fff!important}}:focus-visible{outline:2px solid #4f46e5;outline-offset:2px}