*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f5f5f5}.container{max-width:1200px;margin:0 auto;padding:0 20px}.app-layout{display:flex;min-height:100vh}.sidebar{width:250px;background:#3949ab;color:#fff;padding:20px 0;position:fixed;height:100vh;overflow-y:auto}.main-content{flex:1;margin-left:250px;background:#f8f9fa}.navbar{background:linear-gradient(135deg,#1a237e,#1e88e5);padding:15px 30px;box-shadow:0 2px 4px #0000001a;display:flex;justify-content:space-between;align-items:center;color:#fff;border-left:3px solid rgba(255,255,255,.2)}.content{padding:30px}.card{background:#fff;border-radius:8px;padding:20px;box-shadow:0 2px 4px #0000001a;margin-bottom:20px;border:1px solid #283593}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:30px}.stat-card{background:#fff;padding:20px;border-radius:8px;box-shadow:0 2px 4px #0000001a;text-align:center;border:1px solid #283593}.stat-number{font-size:2rem;font-weight:700;color:#3498db;margin-bottom:5px}.stat-label{color:#666;font-size:.9rem}.form-group{margin-bottom:20px}.form-label{display:block;margin-bottom:5px;font-weight:500;color:#333}.form-input{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;font-size:14px}.form-input:focus{outline:none;border-color:#3498db;box-shadow:0 0 0 2px #3498db33}.form-select{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;font-size:14px;background:#fff}.form-textarea{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;font-size:14px;min-height:100px;resize:vertical;box-sizing:border-box;line-height:1.5;font-family:inherit;word-wrap:break-word;overflow-wrap:break-word;white-space:pre-wrap}.form-textarea:focus{outline:none;border-color:#3498db;box-shadow:0 0 0 2px #3498db33}.btn{padding:10px 20px;border:none;border-radius:4px;cursor:pointer;font-size:14px;font-weight:500;text-decoration:none;display:inline-block;text-align:center;transition:all .2s}.btn-primary{background:linear-gradient(135deg,#000,#1a237e,#1e88e5);color:#fff;border:none;box-shadow:0 4px 15px #1a237e4d}.btn-primary:hover{background:linear-gradient(135deg,#1a1a1a,#283593,#1976d2);transform:translateY(-2px);box-shadow:0 6px 20px #1a237e66}.btn-success{background:linear-gradient(135deg,#000,#1a237e,#1e88e5);color:#fff;border:none;box-shadow:0 4px 15px #1a237e4d}.btn-success:hover{background:linear-gradient(135deg,#1a1a1a,#283593,#1976d2);transform:translateY(-2px);box-shadow:0 6px 20px #1a237e66}.btn-danger{background:linear-gradient(135deg,#000,#1a237e,#1e88e5);color:#fff;border:none;box-shadow:0 4px 15px #1a237e4d}.btn-danger:hover{background:linear-gradient(135deg,#1a1a1a,#283593,#1976d2);transform:translateY(-2px);box-shadow:0 6px 20px #1a237e66}.btn-warning{background:linear-gradient(135deg,#000,#1a237e,#1e88e5);color:#fff;border:none;box-shadow:0 4px 15px #1a237e4d}.btn-warning:hover{background:linear-gradient(135deg,#1a1a1a,#283593,#1976d2);transform:translateY(-2px);box-shadow:0 6px 20px #1a237e66}.btn-secondary{background:linear-gradient(135deg,#000,#1a237e,#1e88e5);color:#fff;border:none;box-shadow:0 4px 15px #1a237e4d}.btn-secondary:hover{background:linear-gradient(135deg,#1a1a1a,#283593,#1976d2);transform:translateY(-2px);box-shadow:0 6px 20px #1a237e66}.btn-info{background:linear-gradient(135deg,#000,#1a237e,#1e88e5);color:#fff;border:none;box-shadow:0 4px 15px #1a237e4d}.btn-info:hover{background:linear-gradient(135deg,#1a1a1a,#283593,#1976d2);transform:translateY(-2px);box-shadow:0 6px 20px #1a237e66}.table{width:100%;border-collapse:collapse;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 4px #0000001a}.table th,.table td{padding:12px;text-align:left;border-bottom:1px solid #eee}.table th{background:#f8f9fa;font-weight:600;color:#333}.table tr:hover{background:#f8f9fa}.nav-item{padding:10px 20px;cursor:pointer;transition:background .2s;border-left:3px solid transparent}.nav-item:hover{background:linear-gradient(135deg,#000,#1a237e,#1e88e5)}.nav-item.active{background:linear-gradient(135deg,#000,#1a237e,#1e88e5);border-left-color:#1e88e5}.nav-item a{color:#fff;text-decoration:none;display:flex;align-items:center;gap:10px}.login-container{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#1a237e;position:relative;overflow:hidden}.login-container:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;pointer-events:none;background-image:radial-gradient(white 1px,transparent 1px),radial-gradient(white 1.5px,transparent 1.5px),radial-gradient(white .8px,transparent .8px);background-size:60px 60px,120px 120px,200px 200px;background-position:0 0,30px 60px,100px 120px;opacity:.7}.login-card{background:#fff;border-radius:20px;box-shadow:0 20px 60px #0000004d,0 8px 32px #0000001a;border:2px solid rgba(255,255,255,.9);width:100%;max-width:400px;padding:40px}.login-title{text-align:center;margin-bottom:30px;background:linear-gradient(135deg,#000,#1a237e,#1e88e5);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-size:2rem}.text-center{text-align:center}.text-right{text-align:right}.mb-20{margin-bottom:20px}.mt-20{margin-top:20px}.flex{display:flex}.justify-between{justify-content:space-between}.align-center{align-items:center}.gap-10{gap:10px}.status-badge{padding:4px 8px;border-radius:12px;font-size:12px;font-weight:500}.status-pending{background:#fff3cd;color:#856404}.status-approved{background:#d4edda;color:#155724}.status-rejected{background:#f8d7da;color:#721c24}.status-completed{background:#d1ecf1;color:#0c5460}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:#fff;border-radius:8px;box-shadow:0 10px 25px #0003;max-width:500px;width:90%;max-height:90vh;overflow-y:auto}.modal-header{padding:20px 20px 0;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #eee;margin-bottom:20px}.modal-header h3{margin:0;color:#333}.modal-close{background:none;border:none;font-size:24px;cursor:pointer;color:#666;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .2s}.modal-close:hover{background:#f5f5f5}.modal-body{padding:0 20px 20px}.mobile-menu-btn{display:none;background:none;border:none;color:#333;cursor:pointer;padding:8px;border-radius:6px;transition:background-color .2s ease}.mobile-menu-btn:hover{background-color:#f0f0f0}.mobile-menu-btn:active{background-color:#e0e0e0}.navbar-left{display:flex;align-items:center;gap:15px}.navbar-title{display:block}.navbar-title h1,.navbar .flex div{color:#fff!important}.navbar .flex svg{color:#fff!important}.mobile-sidebar-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;z-index:999}@media (max-width: 480px){.mobile-menu-btn{display:block}.navbar-title{display:none}.sidebar{transform:translate(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:1000;box-shadow:2px 0 10px #0000001a}.sidebar.mobile-open{transform:translate(0)}.mobile-sidebar-overlay{display:block}.main-content{margin-left:0}.stats-grid{grid-template-columns:1fr}.content{padding:15px}.navbar{padding:12px 15px}.login-container{padding:20px 15px;min-height:100vh;min-height:100dvh}.login-card{padding:32px 24px 28px!important;max-width:100%!important;width:100%;margin:0;border-radius:12px;box-shadow:0 8px 24px #344e7b1f}.login-card img{width:280px!important;max-width:95%!important;height:auto!important;max-height:100px!important;object-fit:contain!important}.sidebar img{width:180px!important;max-width:90%!important;height:auto!important;max-height:60px!important;object-fit:contain!important}.login-card>div{padding:0 15px!important}.login-title{font-size:1.8rem!important;margin-bottom:6px!important}.login-card div[style*="Employee Management System"]{font-size:.95rem!important;margin-bottom:20px!important;line-height:1.3}.form-group{margin-bottom:22px!important}.form-input{padding:16px 12px 10px!important;font-size:16px!important;border-radius:8px}.form-label{font-size:13px!important;left:12px!important}.form-group button[aria-label*=password]{right:12px!important;padding:4px!important}.login-card div[style*="justify-content: space-between"]{flex-direction:column!important;align-items:flex-start!important;gap:12px!important;margin-bottom:24px!important}.login-card label[style*="Remember me"]{font-size:14px!important}.login-card a[href="#"]{font-size:14px!important;align-self:flex-end}.modern-login-btn{padding:14px 20px!important;font-size:16px!important;border-radius:8px;min-height:48px}.fspro-bg-text{font-size:18vw!important;color:#fff3!important}.login-card div[style*="background: #ffeaea"]{padding:12px!important;font-size:14px!important;border-radius:8px;margin-bottom:20px!important}.form-textarea{padding:12px!important;font-size:16px!important;border-radius:8px;min-height:120px!important;line-height:1.4!important}.form-input,.form-select{padding:12px!important;font-size:16px!important;border-radius:8px;box-sizing:border-box}div[style*=gridTemplateColumns]{grid-template-columns:1fr!important;gap:15px!important}.table{font-size:14px;overflow-x:auto;display:block;white-space:nowrap}.table thead,.table tbody,.table tr{display:block}.table th,.table td{padding:8px 6px;display:inline-block;vertical-align:top;min-width:100px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.modal-content{width:95%!important;max-width:none!important;margin:10px;max-height:90vh}.modal-body{padding:15px!important}.attendance-summary{display:flex!important;flex-direction:column!important;gap:2px!important;align-items:center!important}.attendance-record-item{display:flex!important;align-items:center!important;gap:4px!important;justify-content:center!important;font-size:10px!important;padding:2px 4px!important;border-radius:4px!important;background:#fffc!important;margin:1px 0!important}.working-hours-mobile{display:flex!important;flex-direction:column!important;align-items:center!important;gap:2px!important;font-size:10px!important}.filter-grid-mobile{display:grid!important;grid-template-columns:1fr!important;gap:15px!important}.attendance-modal{width:98%!important;margin:10px!important;max-height:90vh!important;padding:20px!important}.attendance-modal h3{font-size:18px!important}.attendance-record-detail{flex-direction:column!important;align-items:flex-start!important;gap:8px!important}.table svg{width:12px!important;height:12px!important}}@media (min-width: 481px) and (max-width: 768px){.login-card img{width:300px!important;max-width:98%!important;height:auto!important;max-height:110px!important;object-fit:contain!important}.sidebar img{width:190px!important;max-width:95%!important;height:auto!important;max-height:65px!important;object-fit:contain!important}.sidebar{transform:translate(-100%);transition:transform .3s ease}.sidebar.open{transform:translate(0)}.main-content{margin-left:0}.stats-grid{grid-template-columns:repeat(2,1fr)}.content{padding:20px}.form-textarea{padding:12px;font-size:15px;border-radius:6px;min-height:120px;line-height:1.5}.form-input,.form-select{padding:12px;font-size:15px;border-radius:6px}div[style*=gridTemplateColumns]:not([style*="1fr 1fr"]){grid-template-columns:1fr 1fr!important;gap:20px!important}.table{font-size:13px}.table th,.table td{padding:10px 8px;max-width:200px}.modal-content{width:90%;max-width:600px}}@media (min-width: 769px) and (max-width: 1024px){.form-textarea{padding:12px;font-size:14px;min-height:120px;line-height:1.5}.form-input,.form-select{padding:12px;font-size:14px}.table th,.table td{padding:12px 10px}}@media (min-width: 1025px){.form-textarea{padding:14px;font-size:14px;min-height:140px;line-height:1.6}.form-input,.form-select{padding:12px;font-size:14px}.table th,.table td{padding:14px 12px}.modal-content{max-width:700px}}.form-textarea{overflow-x:hidden;overflow-y:auto;word-break:break-word;overflow-wrap:break-word;white-space:pre-wrap;scroll-behavior:smooth}.modal-overlay{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.modal-content{box-shadow:0 20px 60px #00000026;border:1px solid rgba(255,255,255,.2)}.modal-close:hover{background-color:#f5f5f5!important}.modal-close:active{background-color:#e0e0e0!important}.btn.btn-secondary,.btn.btn-info{transition:all .2s ease;border:1px solid transparent}.btn.btn-secondary:hover,.btn.btn-info:hover{transform:translateY(-1px);box-shadow:0 4px 8px #0000001a}.logo-container{transition:transform .2s ease,filter .2s ease}.logo-container:hover{transform:scale(1.02);filter:brightness(1.05)}.login-card .logo-container:hover{transform:scale(1.03)}.spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.form-group input:focus+.form-label,.form-group input:not(:placeholder-shown)+.form-label{top:2px!important;font-size:12px!important;color:#3498db!important;background:#fff;padding:0 4px}.form-group input{transition:border-color .2s,box-shadow .2s}.form-group input:focus{border-color:#3498db;box-shadow:0 0 0 2px #3498db1f}@keyframes pulse{0%{opacity:.05;transform:scale(1)}50%{opacity:.08;transform:scale(1.05)}to{opacity:.05;transform:scale(1)}}.fspro-bg-text{font-size:22vw;font-weight:900;color:#ffffff26;background:none;background-clip:initial;-webkit-background-clip:initial;-webkit-text-fill-color:rgba(255,255,255,.15);opacity:1;text-align:center;text-shadow:none;animation:none;position:relative;z-index:1;-webkit-user-select:none;user-select:none;pointer-events:none;line-height:1;white-space:nowrap;text-overflow:clip}.modern-login-btn{background:linear-gradient(135deg,#000,#1a237e,#1e88e5)!important;color:#fff!important;font-weight:700;border:none;box-shadow:0 4px 20px #1a237e40;transition:transform .18s cubic-bezier(.4,2,.6,1),box-shadow .18s,background .18s}.modern-login-btn:hover:not(:disabled){transform:scale(1.035) translateY(-2px);box-shadow:0 8px 30px #1a237e59;background:linear-gradient(135deg,#1a1a1a,#283593,#1976d2)!important}