.notification-container{position:fixed;top:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:12px;max-width:400px;pointer-events:none}.notification{display:flex;align-items:center;gap:12px;padding:14px 16px;background:#fff;border-radius:8px;box-shadow:0 4px 12px #00000026;min-width:320px;max-width:400px;pointer-events:all;animation:slideIn .3s ease-out;transition:all .3s ease;border-left:4px solid}.notification:hover{box-shadow:0 6px 16px #0003;transform:translate(-4px)}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.notification-success{border-left-color:#10b981}.notification-success .notification-icon{color:#10b981}.notification-error{border-left-color:#ef4444}.notification-error .notification-icon{color:#ef4444}.notification-warning{border-left-color:#f59e0b}.notification-warning .notification-icon{color:#f59e0b}.notification-info{border-left-color:#3b82f6}.notification-info .notification-icon{color:#3b82f6}.notification-icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:20px;height:20px}.notification-message{flex:1;font-size:14px;line-height:1.5;color:#374151;font-weight:500;word-wrap:break-word}.notification-close{flex-shrink:0;background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:#9ca3af;border-radius:4px;transition:all .2s}.notification-close:hover{background-color:#f3f4f6;color:#6b7280}.notification-close:active{transform:scale(.95)}@media (max-width: 768px){.notification-container{top:10px;right:10px;left:10px;max-width:none}.notification{min-width:auto;max-width:none}}@media (max-width: 480px){.notification{padding:12px 14px;font-size:13px}.notification-message{font-size:13px}}*{margin:0;padding:0;box-sizing:border-box}.login-container{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f5f7fa,#e4e8ec);padding:20px}.login-card{display:flex;width:100%;max-width:663px;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 20px 60px #00000026}.login-left{flex:1;background:#fff;padding:25px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}.logo-container{text-align:center;margin-bottom:0}.logo{width:160px;height:auto;margin:0 auto}.logo-svg{width:100%;height:100%}.logo-image{width:100%;height:100%;object-fit:contain}.brand-name{font-size:28px;font-weight:700;letter-spacing:1px}.brand-octane{color:#ff8c00}.brand-ware{color:#000}.time-display{text-align:center;margin-top:0}.time{font-size:28px;font-weight:600;color:#2c3e50;margin-bottom:8px}.date{font-size:14px;color:#7f8c8d;line-height:1.4}.login-right{flex:1;background:linear-gradient(to top,#ef6c00,#ffa726,#ffb74d);padding:30px;display:flex;align-items:center;justify-content:center}.login-form-container{width:100%;max-width:400px}.login-title{font-size:28px;font-weight:600;color:#fff;margin-bottom:4px;text-align:center}.login-subtitle{font-size:14px;color:#ffffffe6;margin-bottom:20px;text-align:center}.error-message{background:#dc3545f2;border:1px solid rgba(255,255,255,.4);color:#fff;padding:10px 14px;border-radius:6px;font-size:13px;font-weight:500;text-align:center;margin-top:4px;box-shadow:0 2px 8px #00000026}.error-placeholder{height:20px;margin-top:4px}.login-form{display:flex;flex-direction:column;gap:12px}.input-group{width:100%}.input-wrapper{position:relative;display:flex;align-items:center;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 8px #0000001a;transition:box-shadow .3s ease}.input-wrapper:focus-within{box-shadow:0 4px 12px #00000026}.input-icon{width:40px;min-width:40px;display:flex;align-items:center;justify-content:center;color:#95a5a6}.login-input{flex:1;padding:12px 12px 12px 8px;border:none;outline:none;font-size:14px!important;line-height:1.5!important;color:#2c3e50;background:transparent;-webkit-text-size-adjust:none!important;-moz-text-size-adjust:none!important;-ms-text-size-adjust:none!important;text-size-adjust:none!important;transform:scale(1)!important;-webkit-transform:scale(1)!important;zoom:1!important;-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;font-family:-apple-system,BlinkMacSystemFont,Roboto,sans-serif!important}.login-input::placeholder{color:#bdc3c7;font-size:14px!important;line-height:1.5!important;transform:scale(1)!important}.login-input:focus,.login-input:active,.login-input:hover,.login-input:focus-visible,.login-input:focus-within{font-size:14px!important;line-height:1.5!important;transform:scale(1)!important;-webkit-transform:scale(1)!important;zoom:1!important;-webkit-text-size-adjust:none!important}.login-input:disabled{background:#f8f9fa;cursor:not-allowed;font-size:14px!important}.password-toggle{width:40px;min-width:40px;background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#95a5a6;transition:color .2s ease}.password-toggle:hover{color:#7f8c8d}.password-toggle:disabled{cursor:not-allowed;opacity:.5}.login-button{width:100%;padding:12px;background:linear-gradient(135deg,#ffd54f,#ffa726);color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #ffa7264d;margin-top:6px}.login-button:hover:not(:disabled){background:linear-gradient(135deg,#ffb74d,#ff9800);box-shadow:0 6px 16px #ffa72666;transform:translateY(-2px)}.login-button:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 8px #ff8c004d}.login-button:disabled{opacity:.6;cursor:not-allowed;transform:none}@media (max-width: 768px){.login-card{flex-direction:column;max-width:500px}.login-left,.login-right{padding:40px 30px}.time-display{margin-top:20px}.time,.login-title{font-size:28px}}@media (max-width: 480px){.login-container{padding:10px}.login-left,.login-right{padding:30px 20px}.brand-name,.login-title{font-size:24px}.login-subtitle{font-size:14px}}.location-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000000bf;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;animation:fadeIn .2s ease-in-out}.location-modal-content{background:#fff;border-radius:12px;max-width:700px;width:100%;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 20px 60px #0000004d;animation:slideUp .3s ease-out}.location-modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid #e0e0e0}.location-modal-header h2{margin:0;font-size:1.5rem;font-weight:600;color:#333}.location-modal-close{background:none;border:none;padding:8px;cursor:pointer;border-radius:6px;color:#666;transition:all .2s;display:flex;align-items:center;justify-content:center}.location-modal-close:hover{background-color:#f5f5f5;color:#333}.location-modal-body{padding:24px;overflow-y:auto;flex:1}.location-address-section{background:linear-gradient(135deg,#f8f9fa,#e9ecef);padding:20px;border-radius:12px;margin-bottom:16px;border:1px solid #dee2e6}.address-header{display:flex;align-items:center;gap:8px;margin-bottom:12px}.address-header h3{margin:0;font-size:.95rem;font-weight:600;color:#495057;text-transform:uppercase;letter-spacing:.5px}.address-main{font-size:1.25rem;font-weight:600;color:#212529;line-height:1.4;margin-bottom:6px}.address-details{font-size:.95rem;color:#6c757d;font-weight:500}.address-loading,.address-unavailable{display:flex;align-items:center;gap:10px;color:#6c757d;font-size:.95rem;font-weight:500;justify-content:center;padding:8px 0}.address-loading svg.spinning{animation:spin 1s linear infinite}.location-coordinates{background:#fff;padding:16px 20px;border-radius:10px;margin-bottom:20px;border:1px solid #e0e0e0;box-shadow:0 2px 8px #0000000d}.coordinate-item{display:flex;justify-content:space-between;align-items:center;padding:8px 0;color:#495057}.coordinate-item:not(:last-child){border-bottom:1px solid #f0f0f0}.coordinate-label{font-weight:600;font-size:.9rem;color:#6c757d}.coordinate-value{font-family:Courier New,monospace;font-size:.95rem;font-weight:600;letter-spacing:.5px;color:#212529}.location-map-container{margin-bottom:20px;border-radius:8px;overflow:hidden;box-shadow:0 4px 12px #0000001a;background:#f5f5f5}.location-map-container iframe{display:block}.location-modal-footer{display:flex;gap:12px;justify-content:flex-end}.location-modal-footer .btn{padding:10px 20px;border-radius:8px;border:none;font-weight:500;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:8px;text-decoration:none;font-size:.95rem}.location-modal-footer .btn-secondary{background-color:#f5f5f5;color:#333}.location-modal-footer .btn-secondary:hover{background-color:#e0e0e0}.location-modal-footer .btn-orange{background:linear-gradient(135deg,#f26930,#ff8c5a);color:#fff}.location-modal-footer .btn-orange:hover{background:linear-gradient(135deg,#d95a28,#f26930);box-shadow:0 4px 12px #f269304d}@media (max-width: 768px){.location-modal-overlay{padding:10px}.location-modal-content{max-height:95vh}.location-modal-header{padding:16px 20px}.location-modal-header h2{font-size:1.25rem}.location-modal-body{padding:20px}.location-coordinates{padding:16px}.coordinate-label,.coordinate-value{font-size:.9rem}.location-map-container iframe{height:300px}.location-modal-footer{flex-direction:column-reverse}.location-modal-footer .btn{width:100%;justify-content:center}}.leaflet-popup-content-wrapper{border-radius:8px;box-shadow:0 4px 12px #00000026}.leaflet-popup-content{margin:12px;font-size:.9rem;line-height:1.6}.leaflet-popup-content strong{color:#f26930;font-size:1rem}.camera-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000000e6;display:flex;align-items:center;justify-content:center;z-index:2000;padding:20px;animation:fadeIn .2s ease-in-out}.camera-modal-content{background:#1a1a1a;border-radius:16px;max-width:900px;width:100%;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 20px 60px #00000080;animation:slideUp .3s ease-out;overflow:hidden}@keyframes slideUp{0%{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}.camera-modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid #333;background:#2a2a2a}.camera-modal-header h2{margin:0;font-size:1.5rem;font-weight:600;color:#fff}.camera-modal-close{background:none;border:none;padding:8px;cursor:pointer;border-radius:6px;color:#999;transition:all .2s;display:flex;align-items:center;justify-content:center}.camera-modal-close:hover{background-color:#3a3a3a;color:#fff}.camera-modal-body{padding:24px;overflow-y:auto;flex:1;display:flex;align-items:center;justify-content:center;background:#1a1a1a}.camera-error{display:flex;flex-direction:column;align-items:center;gap:16px;padding:40px;background:#f443361a;border:1px solid rgba(244,67,54,.3);border-radius:12px;color:#f44336;text-align:center}.camera-error p{margin:0;font-size:.95rem}.camera-view-container{position:relative;width:100%;max-width:800px;background:#000;border-radius:12px;overflow:hidden;box-shadow:0 8px 24px #0006}.camera-video{width:100%;height:auto;display:block;max-height:600px;object-fit:cover}.camera-overlay{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}.camera-frame{width:300px;height:300px;border:3px solid rgba(242,105,48,.8);border-radius:50%;box-shadow:0 0 0 9999px #0006;animation:pulse 2s infinite}@keyframes pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.8}}.camera-instruction{position:absolute;bottom:40px;left:50%;transform:translate(-50%);background:#000000b3;color:#fff;padding:12px 24px;border-radius:24px;font-size:.95rem;font-weight:500;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.photo-preview-container{width:100%;max-width:800px;display:flex;justify-content:center;background:#000;border-radius:12px;overflow:hidden;box-shadow:0 8px 24px #0006}.captured-photo{width:100%;height:auto;max-height:600px;object-fit:contain;display:block}.camera-modal-footer{display:flex;gap:12px;justify-content:center;padding:20px 24px;background:#2a2a2a;border-top:1px solid #333}.camera-modal-footer .btn{padding:12px 32px;border-radius:8px;border:none;font-weight:600;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:8px;font-size:.95rem;min-width:160px;justify-content:center}.camera-modal-footer .btn:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{background-color:#3a3a3a;color:#fff}.btn-secondary:hover:not(:disabled){background-color:#4a4a4a}.btn-capture{background:linear-gradient(135deg,#f26930,#ff8c5a);color:#fff;box-shadow:0 4px 12px #f269304d}.btn-capture:hover:not(:disabled){background:linear-gradient(135deg,#d95a28,#f26930);box-shadow:0 6px 16px #f2693066;transform:translateY(-2px)}.btn-capture:active:not(:disabled){transform:translateY(0)}.btn-confirm{background:linear-gradient(135deg,#66bb6a,#43a047);color:#fff;box-shadow:0 4px 12px #4caf504d}.btn-confirm:hover:not(:disabled){background:linear-gradient(135deg,#43a047,#2e7d32);box-shadow:0 6px 16px #4caf5066;transform:translateY(-2px)}.btn-confirm:active:not(:disabled){transform:translateY(0)}@media (max-width: 768px){.camera-modal-overlay{padding:10px}.camera-modal-content{max-height:95vh}.camera-modal-header{padding:16px 20px}.camera-modal-header h2{font-size:1.25rem}.camera-modal-body{padding:16px}.camera-frame{width:200px;height:200px}.camera-instruction{bottom:20px;font-size:.85rem;padding:10px 20px}.camera-modal-footer{flex-direction:column;padding:16px}.camera-modal-footer .btn{width:100%;min-width:auto}.camera-video,.captured-photo{max-height:400px}}@media (max-width: 480px){.camera-frame{width:150px;height:150px}.camera-instruction{font-size:.8rem;padding:8px 16px}.camera-modal-footer .btn{padding:10px 24px;font-size:.9rem}}.kiosk-container{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f5f7fa,#e4e8ec);padding:20px}.kiosk-card{width:100%;max-width:500px;background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 20px 60px #00000026}.kiosk-header{background:linear-gradient(to top,#ef6c00,#ffa726,#ffb74d);padding:40px 30px;text-align:center}.kiosk-logo{display:flex;justify-content:center;margin-bottom:16px}.kiosk-title{font-size:36px;font-weight:600;color:#fff;margin-bottom:8px}.kiosk-subtitle{font-size:16px;color:#ffffffe6;margin:0}.kiosk-form{padding:40px 30px;display:flex;flex-direction:column;gap:20px}.alert{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:8px;font-size:14px}.alert-error{background:#dc35451a;border:1px solid rgba(220,53,69,.3);color:#721c24}.alert-success{background:#4caf501a;border:1px solid rgba(76,175,80,.3);color:#1b5e20}.attendance-info{background:linear-gradient(135deg,#f5f7fa,#e8f0fe);border:1px solid #d1e3f8;border-radius:12px;padding:20px;margin-bottom:10px}.attendance-info h3{font-size:16px;font-weight:600;color:#2c3e50;margin-bottom:16px;text-align:center}.info-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid #e0e0e0}.info-row:last-child{border-bottom:none}.info-row .label{font-size:14px;color:#7f8c8d;font-weight:500}.info-row .value{font-size:14px;color:#2c3e50;font-weight:600}.status-badge{padding:4px 12px;border-radius:12px;font-size:12px;font-weight:600;text-transform:uppercase}.status-badge.status-clocked_in{background:#e3f2fd;color:#1976d2}.status-badge.status-clocked_out{background:#e8f5e9;color:#388e3c}.status-badge.status-absent{background:#ffebee;color:#d32f2f}.form-group{display:flex;flex-direction:column;gap:8px}.form-group label{font-size:14px;font-weight:500;color:#2c3e50}.form-group input{padding:14px 16px;border:1px solid #dfe6e9;border-radius:10px;font-size:14px;color:#2c3e50;background:#fff;transition:all .3s ease;outline:none}.form-group input:focus{border-color:#f26930;box-shadow:0 0 0 3px #f269301a}.form-group input:disabled{background:#f8f9fa;cursor:not-allowed;opacity:.6}.form-group input::placeholder{color:#bdc3c7}.location-display-container{display:flex;gap:8px;align-items:stretch}.location-info{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#e8f5e9;border:1px solid #a5d6a7;border-radius:8px;font-size:13px;color:#2e7d32;font-weight:500}.location-info-clickable{cursor:pointer;transition:all .2s ease;flex:1;justify-content:space-between}.location-info-clickable:hover{background:#c8e6c9;border-color:#81c784;transform:translateY(-1px);box-shadow:0 2px 8px #2e7d3226}.location-info-clickable:active{transform:translateY(0);box-shadow:none}.location-low-accuracy{background:#fff3e0;border-color:#ffb74d;color:#e65100}.location-low-accuracy:hover{background:#ffe0b2;border-color:#ffa726}.location-info-text{display:flex;flex-direction:column;gap:2px;flex:1;text-align:left}.location-main-text{font-size:13px;font-weight:500}.location-accuracy-text{font-size:11px;opacity:.8;font-weight:400}.location-refresh-btn{display:flex;align-items:center;justify-content:center;padding:10px 12px;background:#f5f5f5;border:1px solid #ddd;border-radius:8px;cursor:pointer;transition:all .2s ease;color:#666}.location-refresh-btn:hover:not(:disabled){background:#e0e0e0;border-color:#bbb;color:#333}.location-refresh-btn:disabled{opacity:.6;cursor:not-allowed}.location-refresh-btn svg.spinning{animation:spin 1s linear infinite}.location-warning{background:#fff3e0;border-color:#ffb74d;color:#e65100}.location-required-message{display:flex;align-items:center;gap:8px;padding:10px 14px;margin-top:10px;background:#fff3e0;border:1px solid #ffb74d;border-radius:8px;font-size:13px;color:#e65100;font-weight:500;text-align:center;justify-content:center}.camera-container{border:2px solid #e0e0e0;border-radius:12px;overflow:hidden;background:#000}.camera-video{width:100%;height:auto;display:block}.camera-controls{display:flex;gap:10px;padding:12px;background:#fff}.camera-controls .btn{flex:1}.photo-thumbnail-container{display:flex;flex-direction:column;align-items:center;gap:8px}.photo-thumbnail-wrapper{position:relative;width:150px;height:150px;border-radius:12px;overflow:hidden;box-shadow:0 4px 12px #00000026;border:2px solid #e0e0e0}.photo-thumbnail{width:100%;height:100%;object-fit:cover;display:block}.photo-thumbnail-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;gap:12px;opacity:0;transition:opacity .2s ease}.photo-thumbnail-wrapper:hover .photo-thumbnail-overlay{opacity:1}.btn-icon{width:40px;height:40px;border-radius:50%;border:none;background:#fff3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.btn-icon:hover{background:#ffffff4d;transform:scale(1.1)}.btn-icon-danger:hover{background:#f44336cc}.photo-thumbnail-label{margin:0;font-size:13px;color:#666;font-weight:500}.photo-preview-container{display:flex;flex-direction:column;align-items:center;gap:12px;border:2px solid #e0e0e0;border-radius:12px;padding:12px;background:#f8f9fa}.photo-preview{width:100%;max-width:300px;height:auto;border-radius:8px;box-shadow:0 2px 8px #0000001a}.btn{padding:14px 24px;border:none;border-radius:10px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:8px}.btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.btn-full{width:100%}.btn-sm{padding:8px 16px;font-size:14px}.btn-orange{background:linear-gradient(135deg,#ffd54f,#ffa726);color:#fff;box-shadow:0 4px 12px #ffa7264d}.btn-orange:hover:not(:disabled){background:linear-gradient(135deg,#ffb74d,#ff9800);box-shadow:0 6px 16px #ffa72666;transform:translateY(-2px)}.btn-orange:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 8px #ff8c004d}.btn-clock-in{background:linear-gradient(135deg,#66bb6a,#43a047);color:#fff;box-shadow:0 4px 12px #4caf504d}.btn-clock-in:hover:not(:disabled){background:linear-gradient(135deg,#43a047,#2e7d32);box-shadow:0 6px 16px #4caf5066;transform:translateY(-2px)}.btn-clock-in:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 8px #4caf504d}.btn-clock-out{background:linear-gradient(135deg,#ef5350,#e53935);color:#fff;box-shadow:0 4px 12px #f443364d}.btn-clock-out:hover:not(:disabled){background:linear-gradient(135deg,#e53935,#c62828);box-shadow:0 6px 16px #f4433666;transform:translateY(-2px)}.btn-clock-out:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 8px #f443364d}.btn-secondary{background:#e0e0e0;color:#2c3e50}.btn-secondary:hover:not(:disabled){background:#bdbdbd;transform:translateY(-1px)}.btn-secondary:active:not(:disabled){transform:translateY(0)}.kiosk-footer{padding:20px 30px;text-align:center;border-top:1px solid #e0e0e0}.link-button{background:none;border:none;color:#f26930;font-size:14px;font-weight:500;cursor:pointer;text-decoration:none;transition:color .2s ease}.link-button:hover{color:#d35825;text-decoration:underline}@media (max-width: 768px){.kiosk-card{max-width:100%}.kiosk-header{padding:30px 20px}.kiosk-title{font-size:28px}.kiosk-subtitle{font-size:14px}.kiosk-form{padding:30px 20px}}@media (max-width: 480px){.kiosk-container{padding:10px}.kiosk-header{padding:24px 16px}.kiosk-title{font-size:24px}.kiosk-form{padding:24px 16px;gap:16px}.attendance-info{padding:16px}.camera-controls{flex-direction:column}.btn{font-size:14px;padding:12px 20px}}.app-header{background:linear-gradient(135deg,#f26930,#fba91a);height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;box-shadow:0 2px 8px #0000001a;position:sticky;top:0;z-index:100;width:100%;max-width:100%;overflow:visible}.header-left{display:flex;align-items:center;gap:20px}.menu-toggle{background:none;border:none;cursor:pointer;padding:8px;display:flex;align-items:center;justify-content:center;transition:opacity .2s}.menu-toggle:hover{opacity:.8}.header-search{position:relative;display:flex;align-items:center}.search-input{width:320px;height:40px;padding:8px 40px 8px 16px;border:none;border-radius:4px;background:#fff;font-size:14px;color:#333;outline:none;transition:box-shadow .2s}.search-input:focus{box-shadow:0 0 0 2px #ffffff4d}.search-input::placeholder{color:#999}.search-button{position:absolute;right:8px;background:none;border:none;cursor:pointer;padding:8px;display:flex;align-items:center;justify-content:center}.header-right{display:flex;align-items:center;gap:20px;overflow:visible}.header-date,.header-time{display:flex;align-items:center;gap:8px;background:#fff;color:#333;font-size:14px;font-weight:500;padding:8px 12px;border-radius:4px;transition:all .2s}.header-date:hover,.header-time:hover{box-shadow:0 2px 4px #0000001a}.header-icon-button{background:#fff;border:none;cursor:pointer;padding:8px;display:flex;align-items:center;justify-content:center;position:relative;transition:all .2s;border-radius:4px;width:36px;height:36px}.header-icon-button:hover{transform:scale(1.05);box-shadow:0 2px 4px #0000001a}.notification-button{position:relative}.notification-badge{position:absolute;top:2px;right:2px;background:#f44;color:#fff;font-size:10px;font-weight:700;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px;border:2px solid white}.profile-dropdown-container{position:relative;z-index:1001}.user-avatar{width:36px;height:36px;border-radius:4px;background:#fff;color:#f26930;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;cursor:pointer;transition:all .2s;border:none;padding:0}.user-avatar:hover{transform:scale(1.05);box-shadow:0 2px 4px #00000026}.profile-dropdown{position:absolute;top:calc(100% + 8px);right:0;background:#fff;border-radius:4px;box-shadow:0 4px 12px #00000026;min-width:200px;padding:8px 0;z-index:10000;animation:dropdownFadeIn .2s ease}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.profile-dropdown-item{width:100%;padding:12px 16px;background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:12px;font-size:14px;color:#333;text-align:left;transition:background .2s}.profile-dropdown-item:hover{background:#f5f5f5}.profile-dropdown-item svg{flex-shrink:0}.profile-dropdown-item span{flex:1}.profile-dropdown-divider{height:1px;background:#e0e0e0;margin:8px 0}.logout-item{color:#f26930}.logout-item:hover{background:#fff5f0}@media (max-width: 1024px){.app-header{padding:0 16px}.search-input{width:240px}.header-right{gap:16px}}@media (max-width: 768px){.app-header{height:56px;padding:0 12px}.header-left{gap:12px}.search-input{width:180px;height:36px;font-size:13px}.header-right{gap:12px}.header-date,.header-time{font-size:12px;gap:6px;padding:6px 10px}.header-date svg,.header-time svg{width:16px;height:16px}.header-icon-button{padding:6px;width:32px;height:32px}.user-avatar{width:32px;height:32px;font-size:12px}.header-icon-button svg{width:18px;height:18px}}@media (max-width: 640px){.header-date{display:none}.search-input{width:140px}.header-right{gap:8px}}@media (max-width: 480px){.app-header{padding:0 10px}.header-left{gap:8px}.search-input{width:120px;height:32px;font-size:12px;padding:6px 36px 6px 12px}.header-time{display:none}.header-icon-button svg{width:20px;height:20px}}.app-sidebar{width:240px;background:#fff;border-right:1px solid #e0e0e0;display:flex;flex-direction:column;position:fixed;left:0;top:0;bottom:0;z-index:101;overflow-y:auto;transition:width .3s ease}.app-sidebar.collapsed{width:70px}.sidebar-logo{border-bottom:1px solid #e0e0e0;display:flex;align-items:center;justify-content:center}.sidebar-logo-image{width:100%;max-width:120px;height:auto;object-fit:contain}.sidebar-logo-icon{width:40px;height:40px;background:linear-gradient(135deg,#f26930,#fba91a);color:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}.sidebar-logo-icon-img{width:50px;height:50px;object-fit:contain}.sidebar-user{padding:24px;border-bottom:1px solid #e0e0e0}.user-name{font-size:14px;font-weight:600;color:#333;margin-bottom:4px}.user-role{font-size:12px;color:#999}.sidebar-nav{flex:1;padding:16px 0}.nav-item-wrapper{margin-bottom:4px}.nav-item{width:100%;display:flex;align-items:center;gap:12px;padding:12px 24px;background:none;border:none;cursor:pointer;text-align:left;transition:all .2s;position:relative}.app-sidebar.collapsed .nav-item{padding:12px;justify-content:center}.nav-item:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:transparent;transition:background .2s}.nav-item:hover{background:#f5f5f5}.nav-item.active:before{background:linear-gradient(135deg,#f26930,#fba91a)}.nav-item.active{background:#fff5f0}.nav-icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.nav-label{flex:1;font-size:14px;color:#666;font-weight:500}.nav-item.active .nav-label{color:#f26930;font-weight:600}.nav-arrow{width:12px;height:12px;display:flex;align-items:center;justify-content:center;color:#999;transition:transform .2s}.nav-item.active .nav-arrow{color:#f26930}.submenu{display:flex;flex-direction:column;background:transparent;margin-left:24px;margin-top:4px;margin-bottom:4px;animation:slideDown .3s ease}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.submenu-item{width:100%;padding:10px 20px;background:none;border:none;cursor:pointer;text-align:left;font-size:14px;color:#666;transition:all .2s;position:relative;font-weight:400;display:flex;align-items:center;justify-content:space-between}.submenu-item:hover{background:#f5f5f5;color:#f26930}.submenu-item.active{background:transparent;color:#f26930;font-weight:500}.submenu-arrow{width:12px;height:12px;display:flex;align-items:center;justify-content:center;color:#999;transition:transform .2s;margin-left:8px;flex-shrink:0}.submenu-arrow.expanded{transform:rotate(0)}.submenu-item.active .submenu-arrow{color:#f26930}.nested-submenu{display:flex;flex-direction:column;background:transparent;margin-left:16px;margin-top:2px;margin-bottom:2px;animation:slideDown .3s ease}.nested-submenu-item{width:100%;padding:8px 16px;background:none;border:none;cursor:pointer;text-align:left;font-size:13px;color:#666;transition:all .2s;position:relative;font-weight:400}.nested-submenu-item:hover{background:#f5f5f5;color:#f26930}.nested-submenu-item.active{background:transparent;color:#f26930;font-weight:500}@media (max-width: 1024px){.app-sidebar{transform:translate(-100%);transition:transform .3s ease;z-index:1000;box-shadow:2px 0 10px #0000001a}.app-sidebar.open{transform:translate(0)}.app-sidebar.collapsed{width:0;transform:translate(-100%)}}@media (max-width: 768px){.app-sidebar{width:260px}.sidebar-user{padding:20px}.nav-item{padding:10px 20px}}@media (max-width: 480px){.app-sidebar{width:100%;max-width:280px}}.app-layout{display:flex;min-height:100vh;background-color:#f5f5f5;overflow-x:hidden;width:100%;max-width:100vw;position:relative}.sidebar-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;z-index:999;animation:fadeIn .3s ease}.main-container{flex:1;display:flex;flex-direction:column;margin-left:240px;width:calc(100% - 240px);max-width:calc(100vw - 240px);overflow-x:hidden;transition:margin-left .3s ease,width .3s ease,max-width .3s ease}.main-container.sidebar-collapsed{margin-left:70px;width:calc(100% - 70px);max-width:calc(100vw - 70px)}.main-content{flex:1;padding:24px;overflow-y:auto;overflow-x:hidden;width:100%}@media (max-width: 1024px){.main-container,.main-container.sidebar-collapsed{margin-left:0;width:100%;max-width:100vw}.main-content{padding:20px}}@media (max-width: 768px){.main-content{padding:16px}}@media (max-width: 480px){.main-content{padding:12px}}.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;padding:20px}.attendance-modal{background:#fff;border-radius:12px;width:100%;max-width:700px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 60px #0003;animation:modalSlideIn .2s ease-out}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.attendance-modal .modal-header{padding:20px 24px;border-bottom:1px solid #e0e0e0;display:flex;justify-content:space-between;align-items:center;background:#f9f9f9}.attendance-modal .modal-header h2{font-size:18px;font-weight:600;color:#333;margin:0}.modal-close-btn{background:none;border:none;cursor:pointer;padding:8px;border-radius:6px;color:#666;transition:all .2s;display:flex;align-items:center;justify-content:center}.modal-close-btn:hover{background:#e0e0e0;color:#333}.attendance-modal .modal-body{padding:24px;overflow-y:auto;flex:1}.employee-info-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid #f0f0f0}.employee-info-header .employee-label{font-size:13px;color:#666;margin-right:8px}.employee-info-header .employee-value{font-size:15px;font-weight:600;color:#333}.employee-info-header .employee-details{display:flex;align-items:center}.attendance-date{display:flex;align-items:center;gap:8px;font-size:13px;color:#666}.no-location-data,.no-images-data{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;color:#999}.no-location-data p,.no-images-data p{margin-top:16px;font-size:14px}.location-sections{display:flex;flex-direction:column;gap:24px}.location-section{border:1px solid #e0e0e0;border-radius:10px;overflow:hidden;background:#fafafa}.location-section.has-data{background:#fff}.location-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#f5f5f5;border-bottom:1px solid #e0e0e0}.location-badge{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}.location-badge.clock-in{color:#2e7d32}.location-badge.clock-out{color:#c62828}.location-time{font-size:14px;font-weight:600;color:#333;background:#fff;padding:4px 12px;border-radius:20px;border:1px solid #e0e0e0}.map-container{padding:16px}.map-container iframe{display:block;margin-bottom:12px}.location-details{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}.coordinates{display:flex;align-items:center;gap:8px;font-size:12px;color:#666;font-family:Courier New,Courier,monospace}.view-map-link{display:flex;align-items:center;gap:6px;font-size:13px;color:#f26930;text-decoration:none;font-weight:500;transition:color .2s}.view-map-link:hover{color:#d4561e;text-decoration:underline}.no-location-placeholder{padding:40px 20px;text-align:center;color:#999;font-size:14px}.images-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}@media (max-width: 600px){.images-grid{grid-template-columns:1fr}}.image-section{border:1px solid #e0e0e0;border-radius:10px;overflow:hidden;background:#fafafa}.image-section.has-data{background:#fff}.image-header{padding:12px 16px;background:#f5f5f5;border-bottom:1px solid #e0e0e0}.image-badge{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}.image-badge.clock-in{color:#2e7d32}.image-badge.clock-out{color:#c62828}.image-container{padding:16px}.attendance-image{width:100%;height:200px;object-fit:cover;border-radius:8px;background:#f0f0f0;display:block}.image-timestamp{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;padding:10px 16px;background:linear-gradient(135deg,#f5f5f5,#e8e8e8);border-radius:8px;font-size:14px;font-weight:600;color:#333}.image-timestamp svg{color:#f26930}.no-image-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;color:#999}.no-image-placeholder span{margin-top:12px;font-size:13px}.attendance-modal .modal-footer{padding:16px 24px;border-top:1px solid #e0e0e0;display:flex;justify-content:flex-end;gap:12px;background:#f9f9f9}.attendance-modal .btn-secondary{padding:10px 24px;border:1px solid #ddd;background:#fff;color:#666;font-size:14px;font-weight:500;border-radius:6px;cursor:pointer;transition:all .2s}.attendance-modal .btn-secondary:hover{background:#f5f5f5;border-color:#ccc;color:#333}.attendance-modal .btn-primary{padding:10px 24px;border:none;background:linear-gradient(135deg,#f26930,#ff8c5a);color:#fff;font-size:14px;font-weight:500;border-radius:6px;cursor:pointer;transition:all .2s}.attendance-modal .btn-primary:hover{background:linear-gradient(135deg,#d95a28,#f26930);box-shadow:0 4px 12px #f269304d}@media (max-width: 768px){.attendance-modal{max-width:100%;margin:10px;max-height:calc(100vh - 40px)}.attendance-modal .modal-header{padding:16px 20px}.attendance-modal .modal-body{padding:20px}.employee-info-header,.location-header{flex-direction:column;align-items:flex-start;gap:8px}.location-time{align-self:flex-start}.location-details{flex-direction:column;align-items:flex-start}}.dashboard-page{max-width:100%;width:100%;margin:0 auto;overflow-x:hidden}.page-title{font-size:28px;font-weight:600;color:#333;margin-bottom:24px}.dashboard-stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:24px}.dashboard-stat-card{border-radius:8px;padding:20px;position:relative;min-height:110px;display:flex;align-items:flex-start;justify-content:space-between;color:#fff}.dashboard-stat-left{display:flex;flex-direction:column;gap:4px}.dashboard-stat-label{font-size:15px;font-weight:500;color:#fff;opacity:.95}.dashboard-stat-number{font-size:42px;font-weight:700;color:#fff;line-height:1.1}.dashboard-stat-right{display:flex;align-items:center;justify-content:center}.dashboard-stat-right svg{opacity:.9}@media (max-width: 1200px){.dashboard-stats-row{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.dashboard-stats-row{grid-template-columns:1fr}.dashboard-stat-card{min-height:100px}.dashboard-stat-number{font-size:36px}}.content-grid{display:grid;grid-template-columns:350px 1fr;gap:24px;margin-bottom:24px}@media (min-width: 1600px){.content-grid{grid-template-columns:380px 1fr}}.left-column,.right-column{display:flex;flex-direction:column;gap:24px;min-width:0;overflow:hidden}.card{background:#fff;border-radius:8px;box-shadow:0 2px 8px #00000014;overflow:hidden;width:100%;display:flex;flex-direction:column}.card-header{padding:20px 24px;border-bottom:1px solid #e0e0e0;display:flex;justify-content:space-between;align-items:center}.add-button{background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;transition:transform .2s}.add-button:hover{transform:scale(1.1)}.card-content{padding:24px;flex:1;overflow:auto}.empty-state{text-align:center;color:#999;padding:40px 20px;font-size:14px}.search-box input{width:240px;height:36px;padding:8px 36px 8px 12px;border:1px solid #e0e0e0;border-radius:4px;font-size:13px;outline:none;transition:border-color .2s}.search-box svg{position:absolute;right:12px}.table-container{overflow-x:hidden;overflow-y:visible;width:100%;max-width:100%;flex:1;min-height:0}.notice-board{height:320px}.notice-board .card-content{flex:1;display:flex;align-items:center;justify-content:center}.attendance-table{height:320px}.attendance-table .table-container{flex:1;overflow-y:auto}@media (max-width: 768px){.table-container{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#f26930 #f5f5f5}.table-container::-webkit-scrollbar{height:8px}.table-container::-webkit-scrollbar-track{background:#f5f5f5}.table-container::-webkit-scrollbar-thumb{background:#f26930;border-radius:4px}}.data-table{width:100%;border-collapse:collapse;font-size:11px;table-layout:fixed}@media (min-width: 1200px){.data-table{font-size:12px}}@media (min-width: 1400px){.data-table{font-size:13px}}.data-table thead{background:#f9f9f9;border-top:1px solid #e0e0e0;border-bottom:1px solid #e0e0e0}.data-table th{padding:8px 6px;text-align:left;font-weight:600;color:#333;white-space:nowrap;font-size:inherit;overflow:hidden;text-overflow:ellipsis}.attendance-table .employee-table th:nth-child(1),.attendance-table .employee-table td:nth-child(1){width:5%}.attendance-table .employee-table th:nth-child(2),.attendance-table .employee-table td:nth-child(2){width:22%}.attendance-table .employee-table th:nth-child(3),.attendance-table .employee-table td:nth-child(3){width:10%}.attendance-table .employee-table th:nth-child(4),.attendance-table .employee-table td:nth-child(4){width:12%}.attendance-table .employee-table th:nth-child(5),.attendance-table .employee-table td:nth-child(5){width:12%}.attendance-table .employee-table th:nth-child(6),.attendance-table .employee-table td:nth-child(6){width:14%}.attendance-table .employee-table th:nth-child(7),.attendance-table .employee-table td:nth-child(7){width:10%}.attendance-table .employee-table th:nth-child(8),.attendance-table .employee-table td:nth-child(8){width:15%}.action-center .data-table th:nth-child(1){width:5%}.action-center .data-table th:nth-child(2){width:15%}.action-center .data-table th:nth-child(3){width:17%}.action-center .data-table th:nth-child(4){width:15%}.action-center .data-table th:nth-child(5){width:12%}.action-center .data-table th:nth-child(6){width:15%}.action-center .data-table th:nth-child(7){width:10%}.action-center .data-table th:nth-child(8){width:11%}.action-center .data-table td:nth-child(1){width:5%}.action-center .data-table td:nth-child(2){width:15%}.action-center .data-table td:nth-child(3){width:17%}.action-center .data-table td:nth-child(4){width:15%}.action-center .data-table td:nth-child(5){width:12%}.action-center .data-table td:nth-child(6){width:15%}.action-center .data-table td:nth-child(7){width:10%}.action-center .data-table td:nth-child(8){width:11%}@media (min-width: 1200px){.data-table th{padding:10px 12px}}@media (min-width: 1400px){.data-table th{padding:12px 16px}}.data-table th svg.sort-icon{margin-left:4px;vertical-align:middle;color:#999}.data-table tbody tr{border-bottom:1px solid #f0f0f0;transition:background .2s}.data-table tbody tr:hover{background:#f9f9f9}.data-table td{padding:8px 6px;color:#666;vertical-align:middle;font-size:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media (min-width: 1200px){.data-table td{padding:10px 12px}}@media (min-width: 1400px){.data-table td{padding:12px 16px}}.employee-cell{display:flex;align-items:center;gap:6px;overflow:hidden;max-width:100%}.employee-avatar{width:24px;height:24px;border-radius:50%;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#f0f0f0}@media (min-width: 1200px){.employee-avatar{width:28px;height:28px}.employee-cell{gap:8px}}.employee-cell span{color:#333;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.status-badge{display:inline-block;padding:4px 8px;border-radius:4px;font-size:11px;font-weight:600;text-transform:capitalize;white-space:nowrap}@media (min-width: 1200px){.status-badge{padding:6px 10px;font-size:12px}}.status-present{background:#e8f5e9;color:#4caf50}.status-absent,.status-disapproved{background:#ffebee;color:#f44336}.status-approved{background:#e8f5e9;color:#4caf50}.status-pending{background:#fff9e6;color:#ff9800}.status-leave{background:#e3f2fd;color:#1976d2}.status-late{background:#fff3e0;color:#e65100}.worked-time{color:#4caf50!important;font-weight:600}.running-time{color:#4caf50!important;font-weight:400;font-family:Courier New,Courier,monospace;animation:pulse-running 1s ease-in-out infinite}.loading-state{text-align:center;padding:40px 20px;color:#f26930;font-size:14px;font-weight:500}.no-data{text-align:center;padding:40px 20px!important;color:#999;font-size:14px}.action-btn.location-btn:disabled{opacity:.3;cursor:not-allowed}.action-btn.location-btn:disabled:hover{transform:none}.action-buttons{display:flex;gap:4px;align-items:center;justify-content:center}.action-btn{background:none;border:none;cursor:pointer;padding:2px;display:flex;align-items:center;justify-content:center;transition:transform .2s;flex-shrink:0}.action-btn svg{width:16px;height:16px}@media (min-width: 1200px){.action-buttons{gap:6px}.action-btn{padding:4px}.action-btn svg{width:18px;height:18px}}.table-footer{padding:16px 24px;border-top:1px solid #e0e0e0;display:flex;align-items:center;gap:16px}.pagination-info{font-size:13px;color:#666}.view-all-link{margin-left:auto;color:#333;text-decoration:underline;font-size:13px;font-weight:600;transition:color .2s}.view-all-link:hover{color:#f26930}.pending-count{margin-left:auto;font-size:13px;font-weight:600;color:#f26930;background:#fff3e0;padding:4px 12px;border-radius:12px}.action-center .table-container{max-height:320px;overflow-y:auto}.action-table{table-layout:fixed;width:100%}.action-table th:nth-child(1){width:40px}.action-table th:nth-child(2){width:140px}.action-table th:nth-child(3){width:90px}.action-table th:nth-child(4){width:auto}.action-table th:nth-child(5){width:130px}.action-table th:nth-child(6){width:70px}.details-cell{max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.date-cell{font-size:11px;white-space:nowrap}.request-type-badge{display:inline-block;padding:3px 8px;border-radius:4px;font-size:10px;font-weight:600;text-transform:uppercase;white-space:nowrap}.type-leave{background:#e3f2fd;color:#1565c0}.type-overtime{background:#f3e5f5;color:#7b1fa2}.type-undertime{background:#fff3e0;color:#e65100}.type-ob{background:#e8f5e9;color:#2e7d32}.type-cert{background:#fce4ec;color:#c2185b}.action-btn.approve-btn{color:#4caf50}.action-btn.approve-btn:hover{background:#e8f5e9;border-radius:4px}.action-btn.reject-btn{color:#f44336}.action-btn.reject-btn:hover{background:#ffebee;border-radius:4px}.action-btn:disabled{opacity:.5;cursor:not-allowed}.action-btn:disabled:hover{transform:none;background:none}@media (max-width: 1400px){.content-grid{grid-template-columns:1fr}}@media (max-width: 1024px){.stats-grid{grid-template-columns:repeat(2,1fr);gap:16px}.content-grid{gap:20px}.card-header{padding:16px 20px}.card-content{padding:20px}.data-table{font-size:11px}}@media (max-width: 768px){.stats-grid{grid-template-columns:1fr;gap:12px}.page-title{font-size:24px;margin-bottom:20px}.table-container{overflow-x:scroll}.stat-card{padding:20px;min-height:100px}.stat-value{font-size:32px}.stat-icon{width:50px;height:50px}.search-box input{width:180px;font-size:12px}.card-header{padding:14px 16px;flex-wrap:wrap;gap:12px}.card-title{font-size:16px}.data-table{font-size:10px}.data-table th,.data-table td{padding:6px 8px}.employee-avatar{width:24px;height:24px}.status-badge{padding:4px 8px;font-size:10px}.action-buttons{gap:6px}}@media (max-width: 480px){.page-title{font-size:20px}.stats-grid{gap:10px}.stat-card{padding:16px}.stat-title{font-size:13px}.stat-value{font-size:28px}.search-box,.search-box input{width:100%}.card-header{padding:12px 14px}.table-footer{padding:12px 16px;flex-wrap:wrap;gap:12px}.view-all-link{width:100%;text-align:center;margin-left:0}}.employee-list-page{max-width:100%;width:100%;overflow-x:hidden}.employee-list-card{background:#fff;border-radius:8px;box-shadow:0 2px 8px #00000014;overflow:hidden}.employee-list-header{padding:20px 24px;border-bottom:1px solid #e0e0e0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}.employee-table{table-layout:fixed}.employee-table th:nth-child(1){width:4%}.employee-table th:nth-child(2){width:15%}.employee-table th:nth-child(3){width:11%}.employee-table th:nth-child(4){width:10%}.employee-table th:nth-child(5){width:14%}.employee-table th:nth-child(6){width:7%}.employee-table th:nth-child(7){width:10%}.employee-table th:nth-child(8){width:11%}.employee-table th:nth-child(9){width:8%}.employee-table th:nth-child(10){width:10%}.employee-table td:nth-child(1){width:4%}.employee-table td:nth-child(2){width:15%}.employee-table td:nth-child(3){width:11%}.employee-table td:nth-child(4){width:10%}.employee-table td:nth-child(5){width:14%}.employee-table td:nth-child(6){width:7%}.employee-table td:nth-child(7){width:10%}.employee-table td:nth-child(8){width:11%}.employee-table td:nth-child(9){width:8%}.employee-table td:nth-child(10){width:10%}.employee-name-cell{display:flex;align-items:center;gap:8px;overflow:hidden}.employee-avatar{width:28px;height:28px;border-radius:50%;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#f0f0f0}.employee-avatar img{width:100%;height:100%;object-fit:cover;display:block}.employee-name-cell span{color:#333;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}.status-badge{display:inline-block;padding:4px 12px;border-radius:4px;font-size:12px;font-weight:600;text-transform:capitalize;white-space:nowrap}.status-active{background:#e8f5e9;color:#4caf50}.status-inactive{background:#ffebee;color:#f44336}@media (max-width: 1024px){.employee-list-header{flex-direction:column;align-items:flex-start}.header-actions{width:100%;justify-content:flex-start}.search-box input{width:200px}}@media (max-width: 768px){.page-title{font-size:24px}.breadcrumb{font-size:12px}.employee-list-header{padding:16px 20px}.header-actions{flex-direction:column;align-items:stretch}.search-box,.search-box input{width:100%}.btn{justify-content:center;width:100%}.table-container{overflow-x:auto;-webkit-overflow-scrolling:touch}table{font-size:11px}table th,table td{padding:3px 6px}.employee-avatar{width:24px;height:24px}}@media (max-width: 480px){.page-title{font-size:20px}.employee-list-header{padding:14px 16px}.card-title{font-size:16px}.btn{font-size:13px;padding:8px 14px}.table-footer{padding:12px 16px}}.add-employee-page{max-width:100%;width:100%;overflow-x:hidden}.add-employee-page .page-header{margin-bottom:24px}.add-employee-page .page-title{font-size:24px;font-weight:600;color:#333;margin:0 0 8px}.add-employee-page .breadcrumb{display:flex;align-items:center;gap:8px;font-size:14px;color:#666}.add-employee-page .breadcrumb-item{color:#666}.add-employee-page .breadcrumb-item.active{color:#f26930;font-weight:500}.add-employee-page .breadcrumb-separator{color:#999}.tabs-container{display:flex;gap:8px;margin-bottom:24px;background-color:#fff;border-radius:8px;padding:12px;box-shadow:0 1px 3px #0000001a;overflow-x:auto}.tab-button{padding:10px 24px;border:none;background-color:#e0e0e0;color:#666;font-size:14px;font-weight:500;border-radius:6px;cursor:pointer;transition:all .3s ease;white-space:nowrap}.tab-button:hover{background-color:#d0d0d0}.tab-button.active{background-color:#f26930;color:#fff}.employee-form-card{background-color:#fff;border-radius:8px;padding:32px;box-shadow:0 1px 3px #0000001a}.error-alert{display:flex;align-items:center;gap:12px;padding:12px 16px;background-color:#ffebee;border:1px solid #f44336;border-radius:6px;color:#c62828;font-size:14px;margin-bottom:24px}.tab-content{animation:fadeIn .3s ease-in}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.form-section{margin-bottom:32px}.section-title{font-size:18px;font-weight:600;color:#333;margin:0 0 20px;padding-bottom:12px;border-bottom:2px solid #f0f0f0}.profile-photo-section{display:flex;justify-content:center;margin-bottom:24px}.profile-photo-upload{text-align:center}.photo-preview{width:120px;height:120px;border-radius:8px;border:2px solid #ddd;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;overflow:hidden;background-color:#f9f9f9}.photo-preview img{width:100%;height:100%;object-fit:cover}.upload-label{display:block;color:#666;font-size:13px;cursor:pointer;margin-top:8px}.upload-label:hover{color:#f26930}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}.form-row .full-width{grid-column:1 / -1}.form-group{display:flex;flex-direction:column}.form-group label{font-size:14px;font-weight:500;color:#333;margin-bottom:8px}.form-group .required{color:#f26930;margin-left:2px}.form-group input,.form-group select,.form-group textarea{padding:10px 14px;border:1px solid #ddd;border-radius:6px;font-size:14px;color:#333;transition:border-color .3s ease;font-family:inherit}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:#f26930}.form-group input.error,.form-group select.error,.form-group textarea.error{border-color:#f44336}.error-text{color:#f44336;font-size:12px;margin-top:4px}.help-text{color:#999;font-size:12px;margin-top:4px}.radio-group{display:flex;gap:24px;margin-top:8px}.radio-label{display:flex;align-items:center;gap:8px;font-size:14px;color:#333;cursor:pointer;font-weight:400}.radio-label input[type=radio]{width:18px;height:18px;cursor:pointer;accent-color:#f26930}.form-actions{display:flex;justify-content:center;gap:24px;margin-top:32px;padding-top:24px;border-top:1px solid #f0f0f0}.btn{padding:12px 32px;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:150px}.btn-orange{background-color:#f26930;color:#fff}.btn-orange:hover:not(:disabled){background-color:#e55a20;transform:translateY(-1px);box-shadow:0 2px 4px #f269304d}.btn-orange:disabled{opacity:.6;cursor:not-allowed}.btn-secondary{background-color:#6c757d;color:#fff}.btn-secondary:hover{background-color:#5a6268}.btn-primary{background-color:#007bff;color:#fff}.btn-primary:hover:not(:disabled){background-color:#0069d9;transform:translateY(-1px);box-shadow:0 2px 4px #007bff4d}.btn-primary:disabled{opacity:.6;cursor:not-allowed}.placeholder-content{text-align:center;padding:60px 20px}.placeholder-content p{font-size:16px;color:#666;margin-bottom:20px}@media (max-width: 768px){.tabs-container{padding:8px;gap:4px}.tab-button{padding:8px 16px;font-size:13px}.employee-form-card{padding:20px}.form-row{grid-template-columns:1fr;gap:16px}.section-title{font-size:16px}.photo-preview{width:100px;height:100px}}@media (max-width: 480px){.add-employee-page .page-title{font-size:20px}.tabs-container{flex-wrap:wrap}.tab-button{flex:1;min-width:calc(50% - 4px)}.employee-form-card{padding:16px}.form-actions{flex-direction:column}.btn{width:100%}}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-subtitle{font-size:16px;font-weight:600;color:#333;margin:0 0 16px}.approver-row .approver-input-group{display:flex;gap:8px;align-items:center}.approver-input-group select{flex:1}.btn-icon{width:32px;height:32px;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;transition:all .3s ease}.btn-icon.btn-add{background-color:#4caf50;color:#fff}.btn-icon.btn-add:hover{background-color:#45a049}.btn-icon.btn-remove{background-color:#f44336;color:#fff}.btn-icon.btn-remove:hover{background-color:#da190b}.checkbox-group{display:flex;flex-direction:column;gap:12px}.checkbox-label{display:flex;align-items:center;gap:8px;font-size:14px;color:#333;cursor:pointer;font-weight:400}.checkbox-label input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:#f26930}.checkbox-item-with-input{display:flex;justify-content:space-between;align-items:center;padding:8px;background-color:#f9f9f9;border-radius:4px}.checkbox-item-with-input .checkbox-label{flex:1}.inline-input{width:80px;padding:4px 8px;border:1px solid #ddd;border-radius:4px;font-size:14px;margin-left:4px}.btn-icon-small{width:24px;height:24px;border:none;background-color:transparent;color:#f26930;cursor:pointer;font-size:16px}.btn-icon-small:hover{color:#e55a20}.shift-schedule-table{width:100%;overflow-x:auto;margin-top:20px}.shift-schedule-table table{width:100%;border-collapse:collapse;background-color:#fff}.shift-schedule-table th,.shift-schedule-table td{padding:12px;text-align:left;border:1px solid #e0e0e0}.shift-schedule-table th{background-color:#f5f5f5;font-weight:600;font-size:13px;color:#333}.shift-schedule-table td{font-size:14px;color:#666}.shift-schedule-table input[type=time]{width:100%;padding:6px;border:1px solid #ddd;border-radius:4px;font-size:13px}.shift-schedule-table .toggle-switch{width:40px;height:20px;cursor:pointer}.education-item,.work-item{padding:20px;margin-bottom:20px;background-color:#f9f9f9;border:1px solid #e0e0e0;border-radius:8px}.item-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:16px;padding-top:16px;border-top:1px solid #e0e0e0}.btn-icon-large,.btn-remove-large,.btn-add-large{padding:8px 16px;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .3s ease}.btn-remove-large{background-color:#f44336;color:#fff}.btn-remove-large:hover{background-color:#da190b}.btn-add-large{background-color:#4caf50;color:#fff}.btn-add-large:hover{background-color:#45a049}.btn-success{background-color:#4caf50;color:#fff}.btn-success:hover{background-color:#45a049;transform:translateY(-1px);box-shadow:0 2px 4px #4caf504d}.empty-state{text-align:center;padding:40px 20px;color:#999;font-size:14px}.preview-section{padding:20px 0}.preview-card{background-color:#fff;border-radius:8px;overflow:hidden}.preview-header{display:flex;gap:24px;padding:32px;background:linear-gradient(135deg,#f26930,#e55a20);color:#fff}.preview-photo{width:120px;height:120px;border-radius:50%;overflow:hidden;border:4px solid white;flex-shrink:0}.preview-photo img{width:100%;height:100%;object-fit:cover}.preview-photo-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:#ddd;color:#999;font-size:14px}.preview-basic-info{display:flex;flex-direction:column;justify-content:center}.preview-basic-info h2{margin:0 0 8px;font-size:28px;font-weight:600}.preview-designation{font-size:16px;margin:0 0 4px;opacity:.9}.preview-department{font-size:14px;margin:0;opacity:.8}.preview-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;padding:32px}.preview-section-block{background-color:#f9f9f9;padding:20px;border-radius:8px}.preview-section-block h4{font-size:16px;font-weight:600;color:#333;margin:0 0 16px;padding-bottom:12px;border-bottom:2px solid #e0e0e0}.preview-item{padding:8px 0;font-size:14px;color:#666;display:flex;gap:8px}.preview-item strong{color:#333;min-width:140px}@media (max-width: 768px){.preview-header{flex-direction:column;text-align:center;align-items:center}.preview-grid{grid-template-columns:1fr}.preview-basic-info h2{font-size:24px}}input[type=file]{padding:8px;border:1px solid #ddd;border-radius:6px;font-size:14px;cursor:pointer;background-color:#fff}input[type=file]::-webkit-file-upload-button{padding:6px 12px;border:none;background-color:#f26930;color:#fff;border-radius:4px;cursor:pointer;margin-right:12px}input[type=file]::-webkit-file-upload-button:hover{background-color:#e55a20}.department-page{max-width:100%;width:100%;overflow-x:hidden}.page-header{margin-bottom:24px}.page-title{font-size:28px;font-weight:600;color:#333;margin-bottom:8px}.breadcrumb{display:flex;align-items:center;gap:8px;font-size:14px}.breadcrumb-item{color:#999;transition:color .2s}.breadcrumb-item:hover{color:#666;cursor:pointer}.breadcrumb-item.active{color:#f26930;font-weight:500}.breadcrumb-separator{color:#ccc}.department-card{background:#fff;border-radius:8px;box-shadow:0 2px 8px #00000014;overflow:hidden}.department-header{padding:20px 24px;border-bottom:1px solid #e0e0e0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}.card-title{font-size:18px;font-weight:600;color:#333}.header-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.search-box{position:relative;display:flex;align-items:center}.search-box input{width:240px;height:40px;padding:8px 40px 8px 12px;border:1px solid #e0e0e0;border-radius:4px;font-size:14px;outline:none;transition:border-color .2s}.search-box input:focus{border-color:#f26930}.search-btn{position:absolute;right:8px;background:none;border:none;cursor:pointer;padding:8px;display:flex;align-items:center;justify-content:center}.btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;white-space:nowrap}.btn:hover{transform:translateY(-1px);box-shadow:0 4px 8px #00000026}.btn-orange{background:linear-gradient(135deg,#f26930,#fba91a);color:#fff}.btn-green{background:#4caf50;color:#fff}.btn-green:hover{background:#45a049}.btn-secondary{background:#e0e0e0;color:#666}.btn-secondary:hover{background:#d0d0d0}.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;padding:20px;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background:#fff;border-radius:8px;width:100%;max-width:500px;max-height:90vh;overflow-y:auto;animation:slideUp .3s ease}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-header{padding:20px 24px;border-bottom:1px solid #e0e0e0;display:flex;justify-content:space-between;align-items:center}.modal-header h3{font-size:18px;font-weight:600;color:#333;margin:0}.modal-close{background:none;border:none;padding:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background .2s}.modal-close:hover{background:#f5f5f5}.form-group{margin-bottom:20px}.form-group label{display:block;font-size:14px;font-weight:500;color:#333;margin-bottom:8px}.form-group input[type=text],.form-group textarea{width:100%;padding:10px 12px;border:1px solid #e0e0e0;border-radius:4px;font-size:14px;font-family:inherit;transition:all .2s}.form-group input[type=text]:focus,.form-group textarea:focus{outline:none;border-color:#f26930;box-shadow:0 0 0 3px #f269301a}.checkbox-group label{display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:400}.checkbox-group input[type=checkbox]{width:18px;height:18px;cursor:pointer}.modal-footer{padding:16px 24px;border-top:1px solid #e0e0e0;display:flex;justify-content:flex-end;gap:12px}@media (max-width: 1024px){.department-header{flex-direction:column;align-items:flex-start}.header-actions{width:100%;justify-content:flex-start}.search-box input{width:200px}}@media (max-width: 768px){.page-title{font-size:24px}.breadcrumb{font-size:12px}.department-header{padding:16px 20px}.header-actions{flex-direction:column;align-items:stretch}.search-box,.search-box input{width:100%}.btn{justify-content:center;width:100%}.table-container{overflow-x:auto;-webkit-overflow-scrolling:touch}table{font-size:11px}table th,table td{padding:3px 6px}}@media (max-width: 480px){.page-title{font-size:20px}.department-header{padding:14px 16px}.card-title{font-size:16px}.btn{font-size:13px;padding:8px 14px}.table-footer{padding:12px 16px}}.leave-types-page{max-width:100%;width:100%;overflow-x:hidden}.leave-types-card{background:#fff;border-radius:8px;box-shadow:0 2px 8px #00000014;overflow:hidden}.leave-types-header{padding:20px 24px;border-bottom:1px solid #e0e0e0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}.leave-types-page .table-container{overflow-x:auto;width:100%}.code-badge{display:inline-block;padding:4px 8px;background-color:#f26930;color:#fff;font-size:12px;font-weight:600;border-radius:4px;text-transform:uppercase}.leave-types-page .badge{display:inline-block;padding:4px 12px;border-radius:12px;font-size:12px;font-weight:500;text-transform:capitalize;white-space:nowrap}.leave-types-page .badge-success{background-color:#e8f5e9;color:#2e7d32}.leave-types-page .badge-danger{background-color:#ffebee;color:#c62828}.leave-types-page .badge-secondary{background-color:#f5f5f5;color:#757575}.modal-large{max-width:800px!important}.form-section{margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid #e0e0e0}.form-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}.section-title{font-size:16px;font-weight:600;color:#333;margin:0 0 16px;display:flex;align-items:center;gap:8px}.section-title:before{content:"";width:4px;height:16px;background:linear-gradient(135deg,#f26930,#ff8c5a);border-radius:2px}.form-row:last-child{margin-bottom:0}.form-group:last-child{margin-bottom:0}.form-group input[type=text],.form-group input[type=number],.form-group select,.form-group textarea{width:100%;padding:10px 12px;border:1px solid #ddd;border-radius:6px;font-size:14px;color:#333;background-color:#fff;transition:all .2s}.form-group input[type=text]:focus,.form-group input[type=number]:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:#f26930;box-shadow:0 0 0 3px #f269301a}.checkbox-group{margin-bottom:12px}.checkbox-group label{display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;font-weight:500}.checkbox-group input[type=checkbox]{margin-right:8px;width:18px;height:18px;cursor:pointer}.checkbox-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;overflow-y:auto}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid #e0e0e0;position:sticky;top:0;background:#fff;z-index:10}.modal-close{background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .2s}.modal-footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid #e0e0e0;position:sticky;bottom:0;background:#fff}@media (max-width: 1024px){.modal-large{max-width:90%!important}.checkbox-grid{grid-template-columns:1fr}}@media (max-width: 768px){.leave-types-header,.header-actions{flex-direction:column;align-items:stretch}.search-box,.search-box input{width:100%}.form-row{grid-template-columns:1fr}.modal-content{max-width:100%}}@media (max-width: 480px){.code-badge{font-size:10px;padding:3px 6px}.leave-types-page .badge{font-size:10px;padding:3px 8px}}.government-tables-page{max-width:100%;width:100%;overflow-x:hidden}.government-tables-page .page-header{margin-bottom:24px}.government-tables-page .page-title{font-size:28px;font-weight:600;color:#333;margin-bottom:8px}.government-tables-page .breadcrumb{display:flex;align-items:center;gap:8px;font-size:14px}.government-tables-page .breadcrumb-item{color:#999;transition:color .2s}.government-tables-page .breadcrumb-item:hover{color:#666;cursor:pointer}.government-tables-page .breadcrumb-item.active{color:#f26930;font-weight:500}.government-tables-page .breadcrumb-separator{color:#ccc}.government-card{background:#fff;border-radius:8px;box-shadow:0 2px 8px #00000014;overflow:hidden}.government-header{padding:20px 24px;border-bottom:1px solid #e0e0e0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}.government-header .card-title{font-size:18px;font-weight:600;color:#333}.government-header .header-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.government-header .search-box{position:relative;display:flex;align-items:center}.government-header .search-box input{width:240px;height:40px;padding:8px 40px 8px 12px;border:1px solid #e0e0e0;border-radius:4px;font-size:14px;outline:none;transition:border-color .2s}.government-header .search-box input:focus{border-color:#f26930}.government-header .search-btn{position:absolute;right:8px;background:none;border:none;cursor:pointer;padding:8px;display:flex;align-items:center;justify-content:center}.government-tables-page .btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;white-space:nowrap}.government-tables-page .btn:hover{transform:translateY(-1px);box-shadow:0 4px 8px #00000026}.government-tables-page .btn-green{background:#4caf50;color:#fff}.government-tables-page .btn-green:hover{background:#45a049}.government-tables-page .btn-orange{background:linear-gradient(135deg,#f26930,#fba91a);color:#fff}.government-tables-page .btn-secondary{background-color:#e0e0e0;color:#333}.government-tables-page .btn-secondary:hover{background-color:#d5d5d5}.government-tables-page .table-container{min-height:400px;overflow-x:auto}.government-tables-page td.font-weight-bold{font-weight:600;color:#2c3e50}.government-tables-page .status-badge{display:inline-block;padding:4px 12px;border-radius:12px;font-size:12px;font-weight:500;text-transform:capitalize;white-space:nowrap}.government-tables-page .status-active{background:#e8f5e9;color:#2e7d32}.government-tables-page .status-inactive{background:#f5f5f5;color:#757575}.filing-status-badge{display:inline-block;padding:4px 10px;border-radius:10px;font-size:12px;font-weight:500;background-color:#e3f2fd;color:#1976d2;text-transform:capitalize}.frequency-badge{display:inline-block;padding:4px 10px;border-radius:10px;font-size:12px;font-weight:500;background-color:#f3e5f5;color:#7b1fa2;text-transform:capitalize}.error-state svg{margin-bottom:20px}.empty-state svg{margin-bottom:20px}.empty-state p{font-size:16px;color:#999;margin-bottom:20px}.table-footer{display:flex;justify-content:flex-end;align-items:center;padding:16px 24px;border-top:1px solid #e0e0e0}.pagination-btn{padding:6px 12px;border:1px solid #ddd;background:#fff;border-radius:4px;cursor:pointer;font-size:16px;color:#666;transition:all .2s}.pagination-btn:hover:not(:disabled){background-color:#f5f5f5;border-color:#4caf50;color:#4caf50}.pagination-btn:disabled{opacity:.5;cursor:not-allowed}.pagination-info{display:flex;align-items:center;gap:8px;font-size:14px;color:#666}.page-input{width:50px;padding:4px 8px;border:1px solid #ddd;border-radius:4px;text-align:center;font-size:14px}.modal-content.modal-large{max-width:800px}.form-group input,.form-group select,.form-group textarea{padding:10px 12px;border:1px solid #ddd;border-radius:4px;font-size:14px;color:#333;outline:none;transition:border-color .2s;font-family:inherit}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:#4caf50}.form-group textarea{resize:vertical;min-height:80px}.form-group.checkbox-group input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:#4CAF50}@media (max-width: 1024px){.government-header{flex-direction:column;align-items:flex-start}.header-actions{width:100%;justify-content:flex-start}.government-header .search-box input{width:200px}}@media (max-width: 768px){.government-tables-page .page-title{font-size:24px}.government-tables-page .breadcrumb{font-size:12px}.government-header{padding:16px 20px}.government-header .header-actions{flex-direction:column;align-items:stretch}.government-header .search-box,.government-header .search-box input{width:100%}.government-tables-page .btn{justify-content:center;width:100%}.table-container{overflow-x:auto;-webkit-overflow-scrolling:touch}table{font-size:11px}table th,table td{padding:3px 6px}.form-row{grid-template-columns:1fr}.modal-content{max-width:100%;margin:0 10px}}@media (max-width: 480px){.government-tables-page .page-title{font-size:20px}.government-header{padding:14px 16px}.government-header .card-title{font-size:16px}.government-tables-page .btn{font-size:13px;padding:8px 14px}.table-footer{padding:12px 16px}}.calculator-page{max-width:100%;width:100%;overflow-x:hidden}.calculator-page .page-header{margin-bottom:24px}.calculator-page .page-title{font-size:28px;font-weight:600;color:#333;margin-bottom:8px}.calculator-page .breadcrumb{display:flex;align-items:center;gap:8px;font-size:14px}.calculator-page .breadcrumb-item{color:#999;transition:color .2s}.calculator-page .breadcrumb-item:hover{color:#666;cursor:pointer}.calculator-page .breadcrumb-item.active{color:#f26930;font-weight:500}.calculator-page .breadcrumb-separator{color:#ccc}.calculator-container{display:flex;flex-direction:column;gap:24px}.calculator-card{background:#fff;border-radius:8px;box-shadow:0 2px 8px #00000014;overflow:hidden}.calculator-header{padding:20px 24px;border-bottom:1px solid #e0e0e0}.calculator-header .card-title{font-size:18px;font-weight:600;color:#333;margin-bottom:4px}.calculator-header .card-subtitle{font-size:14px;color:#999}.calculator-form{padding:24px}.form-group label{font-size:14px;font-weight:500;color:#555}.form-group input,.form-group select{padding:10px 12px;border:1px solid #e0e0e0;border-radius:4px;font-size:14px;color:#333;outline:none;transition:border-color .2s;font-family:inherit}.form-group input[type=number]{-moz-appearance:textfield}.form-group input[type=number]::-webkit-outer-spin-button,.form-group input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.alert-success{background-color:#e8f5e9;color:#2e7d32;border:1px solid #c8e6c9}.calculator-page .btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;white-space:nowrap}.calculator-page .btn:hover{transform:translateY(-1px);box-shadow:0 4px 8px #00000026}.calculator-page .btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.calculator-page .btn-orange{background:linear-gradient(135deg,#f26930,#fba91a);color:#fff}.calculator-page .btn-secondary{background-color:#e0e0e0;color:#333}.calculator-page .btn-secondary:hover{background-color:#d5d5d5}.results-container{display:flex;flex-direction:column;gap:20px}.result-card{background:#fff;border-radius:8px;box-shadow:0 2px 8px #00000014;padding:20px 24px}.result-card .result-title{font-size:16px;font-weight:600;color:#333;margin-bottom:16px;padding-bottom:12px;border-bottom:2px solid #f5f5f5}.summary-card{background:linear-gradient(135deg,#f26930,#fba91a);color:#fff}.summary-card .result-title{color:#fff;border-bottom-color:#fff3}.summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.summary-item{display:flex;flex-direction:column;gap:8px}.summary-item.highlight{padding:16px;background:#ffffff26;border-radius:8px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.summary-label{font-size:13px;font-weight:500;opacity:.9}.summary-value{font-size:24px;font-weight:700}.summary-value.gross{color:#fff}.summary-value.deductions{color:#ffebee}.summary-value.net{color:#fff}.result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.result-item{display:flex;justify-content:space-between;align-items:center;padding:12px;background-color:#f9f9f9;border-radius:4px}.result-item.highlight{background:linear-gradient(135deg,#f269301a,#fba91a1a);border:1px solid #f26930}.result-label{font-size:14px;color:#666;font-weight:500}.result-value{font-size:15px;color:#333;font-weight:600}.result-value.total{color:#f26930;font-size:16px}.breakdown-card{background:#fafafa;border:1px solid #e0e0e0}.breakdown-table{display:flex;flex-direction:column;gap:2px}.breakdown-row{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;background:#fff}.breakdown-row.deduction{background:#fff9f5}.breakdown-row.total-row{background:#ffebee;border-top:2px solid #f26930;border-bottom:2px solid #f26930;font-weight:600}.breakdown-row.net-row{background:linear-gradient(135deg,#f269301a,#fba91a1a);border:2px solid #f26930;font-size:16px;font-weight:700;padding:16px}.breakdown-label{font-size:14px;color:#555}.breakdown-value{font-size:15px;color:#333;font-weight:600}.breakdown-row.net-row .breakdown-label,.breakdown-row.net-row .breakdown-value{color:#f26930;font-size:18px}.tabs-navigation{display:flex;gap:2px;background:#f5f5f5;padding:4px;border-radius:6px;margin-bottom:24px}.tab-button{flex:1;padding:12px 16px;background:transparent;border:none;border-radius:4px;font-size:14px;font-weight:500;color:#666;cursor:pointer;transition:all .2s;white-space:nowrap}.tab-button:hover{background:#f269301a;color:#f26930}.tab-button.active{background:#fff;color:#f26930;box-shadow:0 2px 4px #00000014}.calculator-page .tab-content{display:none}.calculator-page .tab-content.active{display:block}.info-box{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;background:#e3f2fd;border-left:4px solid #1976d2;border-radius:4px;margin-bottom:16px}.info-box svg{flex-shrink:0;margin-top:2px}.info-box-content{flex:1}.info-box-title{font-size:14px;font-weight:600;color:#1565c0;margin-bottom:4px}.info-box-text{font-size:13px;color:#1976d2;line-height:1.5}@media (max-width: 1400px){.summary-grid{grid-template-columns:repeat(3,1fr);gap:16px}.result-grid{grid-template-columns:1fr;gap:12px}}@media (max-width: 1024px){.form-row{grid-template-columns:1fr}.summary-grid{grid-template-columns:1fr;gap:12px}.result-grid{grid-template-columns:1fr}}@media (max-width: 768px){.calculator-page .page-title{font-size:24px}.calculator-page .breadcrumb{font-size:12px}.calculator-header{padding:16px 20px}.calculator-form{padding:20px}.form-row{grid-template-columns:1fr}.form-actions{flex-direction:column}.calculator-page .btn{justify-content:center;width:100%}.summary-grid{grid-template-columns:1fr}.summary-value{font-size:20px}.result-card{padding:16px 20px}.breakdown-row{padding:12px}.breakdown-row.net-row .breakdown-label,.breakdown-row.net-row .breakdown-value{font-size:16px}.tabs-navigation{flex-direction:column}.tab-button{text-align:center}}@media (max-width: 480px){.calculator-page .page-title{font-size:20px}.calculator-header .card-title{font-size:16px}.calculator-page .btn{font-size:13px;padding:8px 14px}.summary-value{font-size:18px}.result-value{font-size:14px}.breakdown-label,.breakdown-value{font-size:13px}.breakdown-row.net-row .breakdown-label,.breakdown-row.net-row .breakdown-value{font-size:15px}}.compliance-page{max-width:100%;width:100%;overflow-x:hidden}.compliance-page .page-header{margin-bottom:24px;display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:16px}.compliance-page .header-content{flex:1}.compliance-page .page-title{font-size:28px;font-weight:600;color:#333;margin-bottom:8px}.compliance-page .breadcrumb{display:flex;align-items:center;gap:8px;font-size:14px}.compliance-page .breadcrumb-item{color:#999;transition:color .2s}.compliance-page .breadcrumb-item:hover{color:#666;cursor:pointer}.compliance-page .breadcrumb-item.active{color:#f26930;font-weight:500}.compliance-page .breadcrumb-separator{color:#ccc}.compliance-page .btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;white-space:nowrap}.compliance-page .btn:hover{transform:translateY(-1px);box-shadow:0 4px 8px #00000026}.compliance-page .btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.compliance-page .btn-orange{background:linear-gradient(135deg,#f26930,#fba91a);color:#fff}.compliance-page .btn-secondary{background-color:#e0e0e0;color:#333}.compliance-page .btn-secondary:hover{background-color:#d5d5d5}.compliance-page .btn-link{background:none;border:none;color:#f26930;cursor:pointer;font-size:14px;text-decoration:underline;padding:4px 8px}.compliance-page .btn-link:hover{color:#d45920}.compliance-card{background:#fff;border-radius:8px;box-shadow:0 2px 8px #00000014;overflow:hidden;margin-bottom:24px}.compliance-card .card-header{padding:20px 24px;border-bottom:1px solid #e0e0e0}.compliance-card .card-title{font-size:18px;font-weight:600;color:#333;margin-bottom:4px}.compliance-card .card-subtitle{font-size:14px;color:#999}.dashboard-container{display:flex;flex-direction:column;gap:24px}.score-card{background:#fff;border-radius:8px;box-shadow:0 2px 8px #00000014;padding:24px}.score-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.score-header h2{font-size:20px;font-weight:600;color:#333;margin:0}.score-date{font-size:13px;color:#999}.score-display{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center}.score-circle{width:180px;height:180px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative}.score-inner{width:150px;height:150px;background:#fff;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center}.score-value{font-size:48px;font-weight:700;color:#333;line-height:1}.score-label{font-size:16px;color:#999;margin-top:4px}.score-breakdown{display:flex;flex-direction:column;gap:16px}.breakdown-item{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#f9f9f9;border-radius:6px}.breakdown-label{font-size:14px;color:#666;font-weight:500}.breakdown-value{font-size:16px;color:#333;font-weight:600}.violations-summary{background:#fff;border-radius:8px;box-shadow:0 2px 8px #00000014;padding:24px}.summary-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.summary-header h3{font-size:18px;font-weight:600;color:#333;margin:0}.total-count{font-size:14px;font-weight:500;color:#999}.severity-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.severity-card{display:flex;flex-direction:column;align-items:center;padding:20px;border-radius:8px;transition:transform .2s}.severity-card:hover{transform:translateY(-2px)}.severity-card.critical{background:linear-gradient(135deg,#f44336,#d32f2f);color:#fff}.severity-card.high{background:linear-gradient(135deg,#ff9800,#f57c00);color:#fff}.severity-card.medium{background:linear-gradient(135deg,#ffc107,#ffa000);color:#fff}.severity-card.low{background:linear-gradient(135deg,#4caf50,#388e3c);color:#fff}.severity-icon{margin-bottom:12px}.severity-content{display:flex;flex-direction:column;align-items:center;gap:4px}.severity-count{font-size:32px;font-weight:700}.severity-label{font-size:14px;font-weight:500;opacity:.9}.violations-chart{display:flex;flex-direction:column;gap:16px;padding:24px}.chart-item{display:flex;flex-direction:column;gap:8px}.chart-label{display:flex;justify-content:space-between;align-items:center}.type-name{font-size:14px;font-weight:500;color:#333}.type-count{font-size:14px;font-weight:600;color:#f26930}.chart-bar{height:8px;background:#f5f5f5;border-radius:4px;overflow:hidden}.chart-fill{height:100%;background:linear-gradient(90deg,#f26930,#fba91a);border-radius:4px;transition:width .3s ease}.violations-list{padding:24px;display:flex;flex-direction:column;gap:16px}.violation-item{padding:16px;background:#f9f9f9;border-radius:8px;border-left:4px solid #f26930;transition:all .2s}.violation-item:hover{background:#f5f5f5;transform:translate(4px)}.violation-header{display:flex;align-items:center;gap:12px;margin-bottom:8px}.violation-type{font-size:13px;font-weight:600;color:#333;text-transform:uppercase;letter-spacing:.5px}.violation-date{font-size:13px;color:#999;margin-left:auto}.violation-description{font-size:14px;color:#555;line-height:1.5;margin:8px 0}.violation-footer{display:flex;justify-content:space-between;align-items:center;margin-top:12px;font-size:13px}.affected-count{color:#666}.financial-impact{color:#f26930;font-weight:600}.severity-badge{display:inline-block;padding:4px 12px;border-radius:4px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}.severity-badge.severity-critical{background:#ffebee;color:#c62828}.severity-badge.severity-high{background:#fff3e0;color:#e65100}.severity-badge.severity-medium{background:#fff8e1;color:#f57f17}.severity-badge.severity-low{background:#e8f5e9;color:#2e7d32}.status-badge{display:inline-block;padding:4px 12px;border-radius:4px;font-size:12px;font-weight:600;text-transform:capitalize}.status-badge.status-completed{background:#e8f5e9;color:#4caf50}.status-badge.status-approved{background:#e3f2fd;color:#1976d2}.status-badge.status-in-review{background:#fff8e1;color:#f57f17}.status-badge.status-pending{background:#fff3e0;color:#e65100}.status-badge.status-rejected{background:#ffebee;color:#c62828}.recommendations-card{background:linear-gradient(135deg,#e3f2fd,#f3e5f5);border:1px solid #bbdefb}.recommendations-list{padding:24px;display:flex;flex-direction:column;gap:12px}.recommendation-item{display:flex;gap:12px;padding:12px;background:#fff;border-radius:6px;box-shadow:0 1px 3px #00000014}.recommendation-icon{color:#1976d2;flex-shrink:0}.recommendation-text{font-size:14px;color:#555;line-height:1.6;margin:0}.filters-section{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:24px;border-bottom:1px solid #e0e0e0}.filter-group{display:flex;flex-direction:column;gap:6px}.filter-group label{font-size:13px;font-weight:500;color:#555}.filter-group select,.filter-group input{padding:8px 12px;border:1px solid #e0e0e0;border-radius:4px;font-size:14px;color:#333;outline:none;transition:border-color .2s}.filter-group select:focus,.filter-group input:focus{border-color:#f26930}.results-header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-bottom:1px solid #e0e0e0}.results-count{font-size:14px;color:#666}.compliance-page .table-container{overflow-x:auto;padding:24px}.violation-type-badge{display:inline-block;padding:4px 10px;background:#f3e5f5;color:#7b1fa2;border-radius:4px;font-size:11px;font-weight:600;text-transform:uppercase}.violation-description-cell{max-width:300px}.violation-description-cell p{margin:0 0 4px;font-size:13px;color:#333}.correction-hint{display:block;font-size:12px;color:#1976d2;font-style:italic}.modal-content{background:#fff;border-radius:8px;width:100%;max-width:600px;max-height:90vh;overflow-y:auto;box-shadow:0 4px 20px #00000026}.modal-content.modal-large{max-width:900px}.modal-header h3{margin:0;font-size:20px;font-weight:600;color:#333}.modal-close{background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color .2s}.modal-close:hover{background-color:#f5f5f5}.correction-summary{padding:16px;background:#e3f2fd;border-radius:6px;margin-bottom:20px}.correction-summary p{margin:0 0 8px;font-size:14px;color:#1565c0}.corrections-list{display:flex;flex-direction:column;gap:12px}.correction-item{padding:16px;background:#f9f9f9;border-radius:6px;border-left:4px solid #f26930}.correction-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.correction-type{font-size:13px;font-weight:600;color:#333;text-transform:uppercase}.correction-cost{font-size:14px;font-weight:600;color:#f26930}.correction-description{font-size:14px;color:#555;margin:0}.reports-container{display:flex;flex-direction:column;gap:24px}.report-form{padding:24px}.report-type-selector{display:flex;gap:8px;margin-bottom:24px;background:#f5f5f5;padding:6px;border-radius:8px}.report-type-btn{flex:1;padding:10px 16px;background:transparent;border:none;border-radius:6px;font-size:14px;font-weight:500;color:#666;cursor:pointer;transition:all .2s}.report-type-btn:hover{background:#f269301a;color:#f26930}.report-type-btn.active{background:#fff;color:#f26930;box-shadow:0 2px 4px #00000014}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}.form-group{display:flex;flex-direction:column;gap:6px}.form-group label{font-size:13px;font-weight:500;color:#555}.form-group input,.form-group select{padding:10px 12px;border:1px solid #e0e0e0;border-radius:4px;font-size:14px;color:#333;outline:none;transition:border-color .2s}.form-group input:focus,.form-group select:focus{border-color:#f26930}.form-group.checkbox-group{flex-direction:row;align-items:center}.form-group.checkbox-group label{display:flex;align-items:center;gap:8px;cursor:pointer;margin:0}.form-group.checkbox-group input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:#f26930}.form-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:24px}.alert{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:4px;font-size:14px;margin-bottom:16px}.alert-error{background-color:#ffebee;color:#c62828;border:1px solid #ffcdd2}.alert svg{flex-shrink:0}.report-results{display:flex;flex-direction:column;gap:24px}.report-header-card{background:linear-gradient(135deg,#f26930,#fba91a);color:#fff}.report-title-section{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.report-title{font-size:24px;font-weight:700;margin:0}.report-type{display:inline-block;padding:6px 16px;background:#fff3;border-radius:20px;font-size:13px;font-weight:600;text-transform:uppercase}.report-meta{display:flex;gap:24px;flex-wrap:wrap}.meta-item{display:flex;flex-direction:column;gap:4px}.meta-label{font-size:12px;opacity:.8;font-weight:500}.meta-value{font-size:14px;font-weight:600}.report-score-card{text-align:center}.score-display-large{display:flex;justify-content:center;padding:20px 0}.score-circle-large{width:220px;height:220px;border-radius:50%;display:flex;align-items:center;justify-content:center}.score-inner-large{width:180px;height:180px;background:#fff;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center}.score-value-large{font-size:56px;font-weight:700;color:#333;line-height:1}.score-label-large{font-size:18px;color:#999;margin-top:6px}.summary-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:24px}.stat-card{display:flex;flex-direction:column;align-items:center;padding:20px;background:#f9f9f9;border-radius:8px;border:2px solid #e0e0e0}.stat-card.resolved{background:#e8f5e9;border-color:#4caf50}.stat-card.pending{background:#fff3e0;border-color:#ff9800}.stat-card.rate{background:#e3f2fd;border-color:#1976d2}.stat-value{font-size:36px;font-weight:700;color:#333;line-height:1}.stat-label{font-size:13px;color:#666;margin-top:8px;text-align:center}.category-list{padding:24px;display:flex;flex-direction:column;gap:20px}.category-item{display:flex;flex-direction:column;gap:8px}.category-header{display:flex;justify-content:space-between;align-items:center}.category-name{font-size:15px;font-weight:600;color:#333}.category-score{font-size:16px;font-weight:700}.category-bar{height:10px;background:#f5f5f5;border-radius:5px;overflow:hidden}.category-fill{height:100%;border-radius:5px;transition:width .3s ease}.category-violations{font-size:12px;color:#999}.report-summary{padding:24px;font-size:15px;line-height:1.7;color:#555;background:#f9f9f9;border-left:4px solid #f26930;border-radius:4px}.violations-details-list,.corrections-details-list{padding:24px;display:flex;flex-direction:column;gap:16px}.violation-detail-item,.correction-detail-item{padding:16px;background:#f9f9f9;border-radius:6px;border-left:4px solid #f26930}.violation-detail-header,.correction-detail-header{display:flex;align-items:center;gap:12px;margin-bottom:8px}.correction-status{padding:4px 10px;background:#e3f2fd;color:#1976d2;border-radius:4px;font-size:11px;font-weight:600;text-transform:uppercase;margin-left:auto}.violation-impact{display:flex;gap:8px;align-items:center;margin-top:8px;font-size:13px;color:#666}.more-items{text-align:center;font-size:14px;color:#999;padding:12px;background:#f9f9f9;border-radius:6px;margin:0}.loading-state{padding:80px 20px;text-align:center;color:#666}.spinner{width:40px;height:40px;margin:0 auto 20px;border:4px solid #f5f5f5;border-top:4px solid #f26930;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-state p{font-size:16px;color:#666}.error-state{padding:80px 20px;text-align:center}.error-state svg{margin-bottom:20px;color:#f44336}.error-state p{font-size:16px;color:#f44336;margin-bottom:20px}.empty-state{padding:80px 20px;text-align:center}.empty-state svg{margin-bottom:20px;color:#999}.empty-state p{font-size:16px;color:#999;margin:0}@media (max-width: 1400px){.severity-grid,.filters-section,.summary-stats-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 1024px){.score-display{grid-template-columns:1fr;gap:24px}.filters-section,.form-row{grid-template-columns:1fr}}@media (max-width: 768px){.compliance-page .page-title{font-size:24px}.compliance-page .breadcrumb{font-size:12px}.compliance-page .page-header{flex-direction:column;align-items:stretch}.compliance-page .btn{justify-content:center;width:100%}.severity-grid{grid-template-columns:1fr}.score-breakdown{gap:12px}.summary-stats-grid{grid-template-columns:1fr}.report-meta{flex-direction:column;gap:12px}.report-type-selector{flex-direction:column}.modal-content{max-width:100%;margin:0 10px}}@media (max-width: 480px){.compliance-page .page-title{font-size:20px}.compliance-card .card-title{font-size:16px}.compliance-page .btn{font-size:13px;padding:8px 14px}.score-circle{width:140px;height:140px}.score-inner{width:110px;height:110px}.score-value{font-size:36px}}.attendance-report-page{max-width:100%;width:100%;overflow-x:hidden}.attendance-report-page .page-header{margin-bottom:24px}.attendance-report-page .page-title{font-size:28px;font-weight:600;color:#333;margin:0 0 8px}.attendance-report-page .breadcrumb{display:flex;align-items:center;gap:8px;font-size:14px;color:#666}.attendance-report-page .breadcrumb-item{color:#666}.attendance-report-page .breadcrumb-item.active{color:#f26930;font-weight:500}.attendance-report-page .breadcrumb-separator{color:#999}.attendance-report-card{background:#fff;border-radius:8px;box-shadow:0 2px 8px #00000014;overflow:hidden}.tabs-container{display:flex;gap:4px;margin-bottom:0;background-color:#fafafa;padding:4px;border-bottom:1px solid #e0e0e0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.tabs-container::-webkit-scrollbar{display:none}.tab-btn{padding:12px 28px;border:none;background-color:transparent;color:#666;font-size:15px;font-weight:500;cursor:pointer;transition:all .3s ease;border-radius:6px;position:relative;white-space:nowrap}.tab-btn:after{content:"";position:absolute;bottom:-6px;left:50%;transform:translate(-50%);width:0;height:3px;background:linear-gradient(135deg,#f26930,#ff8c5a);border-radius:3px 3px 0 0;transition:width .3s ease}.tab-btn.active{background-color:#fff;color:#f26930;font-weight:600;box-shadow:0 2px 8px #0000000f}.tab-btn.active:after{width:100%}.tab-btn:hover:not(.active){background-color:#f269300d;color:#f26930}.tab-content{background:#fff;padding:20px 24px}.attendance-report-page .filters-row{display:flex;gap:16px;margin-bottom:20px;flex-wrap:wrap;align-items:flex-end}.attendance-report-page .filter-group{display:flex;flex-direction:column;gap:6px;flex:0 0 auto;min-width:200px}.attendance-report-page .filter-group label{font-size:13px;font-weight:600;color:#333}.attendance-report-page .filter-group select,.attendance-report-page .filter-group input{padding:10px 14px;border:1px solid #ddd;border-radius:6px;font-size:14px;color:#333;background-color:#fff;transition:all .2s;min-width:180px}.attendance-report-page .filter-group select:focus,.attendance-report-page .filter-group input:focus{outline:none;border-color:#f26930;box-shadow:0 0 0 3px #f269301a}.attendance-report-page .filter-group input[type=date]{cursor:pointer}.attendance-report-page .action-buttons{display:flex;gap:12px;align-items:center}.attendance-report-page .action-buttons.ml-auto{margin-left:auto}.attendance-report-page .btn{padding:10px 20px;border-radius:6px;border:none;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;white-space:nowrap}.attendance-report-page .btn-primary{background:linear-gradient(135deg,#f26930,#ff8c5a);color:#fff;box-shadow:0 2px 8px #f2693033}.attendance-report-page .btn-primary:hover{background:linear-gradient(135deg,#d95a28,#f26930);box-shadow:0 4px 12px #f269304d;transform:translateY(-1px)}.attendance-report-page .btn-secondary{background-color:#fff;color:#666;border:1px solid #ddd}.attendance-report-page .btn-secondary:hover{background-color:#f5f5f5;border-color:#ccc}.attendance-report-page .legend-row{display:flex;align-items:center;gap:20px;margin-bottom:20px;padding:12px;background-color:#f8f9fa;border-radius:6px;flex-wrap:wrap}.attendance-report-page .legend-item{display:flex;align-items:center;gap:6px;font-size:13px;color:#666}.attendance-report-page .legend-item svg{flex-shrink:0}.attendance-report-page .legend-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.attendance-report-page .legend-icon svg{width:16px;height:16px}.attendance-report-page .entries-select{margin-left:auto}.attendance-report-page .entries-select select{padding:6px 12px;border:1px solid #ddd;border-radius:6px;font-size:13px;color:#333;background-color:#fff;cursor:pointer}.overview-table-container{overflow-x:hidden;margin-bottom:20px;width:100%}.attendance-report-page .table-container{overflow-x:visible;margin-bottom:20px;width:100%}.attendance-report-page .employee-table{width:100%;border-collapse:collapse;table-layout:fixed}.attendance-report-page .employee-table th,.attendance-report-page .employee-table td{padding:10px 8px;text-align:left;border-bottom:1px solid #eee;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.attendance-report-page .employee-table th{background-color:#f9f9f9;font-weight:600;color:#333}.attendance-report-page .employee-table tbody tr:hover{background-color:#f9f9f9}.attendance-report-page .employee-table th:nth-child(1),.attendance-report-page .employee-table td:nth-child(1){width:40px;text-align:center}.attendance-report-page .employee-table th:nth-child(2),.attendance-report-page .employee-table td:nth-child(2){width:140px}.attendance-report-page .employee-table th:nth-child(3),.attendance-report-page .employee-table td:nth-child(3){width:85px}.attendance-report-page .employee-table th:nth-child(4),.attendance-report-page .employee-table td:nth-child(4){width:45px;text-align:center}.attendance-report-page .employee-table th:nth-child(5),.attendance-report-page .employee-table td:nth-child(5){width:75px;text-align:center}.attendance-report-page .employee-table th:nth-child(6),.attendance-report-page .employee-table td:nth-child(6){width:70px;text-align:center}.attendance-report-page .employee-table th:nth-child(7),.attendance-report-page .employee-table td:nth-child(7){width:70px;text-align:center}.attendance-report-page .employee-table th:nth-child(8),.attendance-report-page .employee-table td:nth-child(8){width:80px;text-align:center}.attendance-report-page .employee-table th:nth-child(9),.attendance-report-page .employee-table td:nth-child(9){width:85px;text-align:center}.attendance-report-page .employee-table th:nth-child(10),.attendance-report-page .employee-table td:nth-child(10){width:50px;text-align:center}.attendance-report-page .employee-table th:nth-child(11),.attendance-report-page .employee-table td:nth-child(11){width:70px;text-align:center}.by-day-tab .employee-table th:nth-child(1),.by-day-tab .employee-table td:nth-child(1){width:50px}.by-day-tab .employee-table th:nth-child(2),.by-day-tab .employee-table td:nth-child(2){width:200px}.by-day-tab .employee-table th:nth-child(3),.by-day-tab .employee-table td:nth-child(3){width:100px}.by-day-tab .employee-table th:nth-child(4),.by-day-tab .employee-table td:nth-child(4){width:100px}.by-day-tab .employee-table th:nth-child(5),.by-day-tab .employee-table td:nth-child(5){width:100px}.by-day-tab .employee-table th:nth-child(6),.by-day-tab .employee-table td:nth-child(6){width:100px}.by-day-tab .employee-table th:nth-child(7),.by-day-tab .employee-table td:nth-child(7){width:80px}.by-day-tab .employee-table th:nth-child(8),.by-day-tab .employee-table td:nth-child(8){width:80px}.overview-table{width:100%;border-collapse:collapse;font-size:11px;background-color:#fff;table-layout:fixed}.overview-table thead{background:#f9f9f9;border-bottom:2px solid #e0e0e0}.overview-table th{padding:3px 2px;text-align:center;font-weight:600;color:#333;white-space:nowrap;font-size:11px;line-height:1.3}.overview-table tbody tr{border-bottom:1px solid #f0f0f0;transition:background .2s}.overview-table tbody tr:hover{background:#f9f9f9}.overview-table td{padding:3px 2px;color:#666;vertical-align:middle}.day-header{font-size:9px;text-transform:uppercase;letter-spacing:-.5px}.date-header{font-size:10px;color:#333}.overview-table .header-row{background-color:#f9f9f9;font-weight:600}.overview-table .empty-cell{padding:2px}.employee-col-header{width:140px;min-width:140px;max-width:140px;padding:3px 4px;text-align:left;background-color:#f9f9f9;position:sticky;left:0;z-index:11}.employee-header-content{display:flex;align-items:center;gap:4px}.header-no{font-weight:600;color:#333;min-width:20px;font-size:11px}.header-name{font-weight:600;color:#333;font-size:11px}.employee-col{width:140px;min-width:140px;max-width:140px;padding:3px 4px;background-color:#fff;position:sticky;left:0;z-index:5}.employee-info{display:flex;align-items:center;gap:4px}.employee-no{font-weight:500;color:#666;min-width:18px;font-size:11px}.employee-avatar,.employee-avatar-small{width:22px;height:22px;border-radius:50%;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#f0f0f0}.employee-avatar img,.employee-avatar-small img{width:100%;height:100%;object-fit:cover}.employee-name{font-size:11px;color:#333;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:80px}.calendar-cell{width:24px;min-width:24px;max-width:24px;padding:3px 1px;text-align:center;vertical-align:middle}.status-icon{display:inline-flex;align-items:center;justify-content:center}.status-icon svg{width:14px;height:14px}.status-empty{color:#ccc;font-size:11px}.total-header,.total-col{width:45px;min-width:45px;padding:3px 2px;text-align:center;font-weight:600;color:#333;background-color:#f9f9f9;white-space:nowrap;font-size:11px}.total-col{background-color:#fff}.employee-cell{display:flex;align-items:center;gap:4px}.attendance-report-page .status-badge{padding:3px 8px;border-radius:10px;font-size:11px;font-weight:500;text-transform:capitalize;display:inline-block;white-space:nowrap;min-width:auto;text-align:center;box-sizing:border-box}.attendance-report-page .status-badge.status-present{background-color:#e8f5e9;color:#2e7d32}.attendance-report-page .status-badge.status-absent{background-color:#ffebee;color:#c62828}.attendance-report-page .status-badge.status-late{background-color:#fff3e0;color:#e65100}.attendance-report-page .status-badge.status-halfday{background-color:#e3f2fd;color:#1565c0}.attendance-report-page .status-badge.status-leave{background-color:#e3f2fd;color:#1976d2}.attendance-report-page .text-success{color:#4caf50!important;font-weight:500}.attendance-report-page .text-warning{color:#ff9800!important;font-weight:400}.attendance-report-page .running-time{font-family:Courier New,Courier,monospace;font-weight:400;animation:pulse-running 1s ease-in-out infinite}@keyframes pulse-running{0%,to{opacity:1}50%{opacity:.7}}.attendance-report-page .action-btn.location-btn{color:#f26930}.attendance-report-page .action-btn.location-btn:hover{background-color:#fff3e0;border-radius:4px}.attendance-report-page .action-icons{display:flex;align-items:center;justify-content:center;gap:4px}.attendance-report-page .icon-btn{background:none;border:none;padding:4px;cursor:pointer;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.attendance-report-page .icon-btn:hover{background-color:#f5f5f5}.attendance-report-page .icon-btn.location-icon{color:#f26930}.attendance-report-page .icon-btn.location-icon:hover{background-color:#fff3e0}.attendance-report-page .icon-btn.view-icon{color:#2196f3}.attendance-report-page .icon-btn.view-icon:hover{background-color:#e3f2fd}.attendance-report-page .icon-btn svg{width:18px;height:18px}.attendance-report-page .no-data{text-align:center;padding:40px!important;color:#999;font-size:15px}.attendance-report-page .loading-state,.attendance-report-page .no-data-state{text-align:center;padding:60px 20px;color:#666;font-size:15px;background:#f8f9fa;border-radius:8px;margin:20px 0}.attendance-report-page .loading-state{color:#f26930;font-weight:500}.attendance-report-page .pagination{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:20px}.attendance-report-page .pagination-btn{background:#fff;border:1px solid #ddd;width:36px;height:36px;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;color:#666}.attendance-report-page .pagination-btn:hover:not(:disabled){background-color:#f5f5f5;border-color:#f26930;color:#f26930}.attendance-report-page .pagination-btn:disabled{opacity:.4;cursor:not-allowed}.attendance-report-page .pagination-info{font-size:14px;color:#666;font-weight:500}@media (max-width: 1200px){.attendance-report-page .filters-row{flex-direction:column;align-items:stretch}.attendance-report-page .filter-group{min-width:100%}.attendance-report-page .action-buttons{flex-wrap:wrap}.attendance-report-page .action-buttons.ml-auto{margin-left:0}}@media (max-width: 768px){.attendance-report-page .page-title{font-size:24px}.attendance-report-page .tabs-container{overflow-x:auto}.attendance-report-page .tab-btn{padding:12px 24px;font-size:14px}.attendance-report-page .tab-content{padding:16px}.attendance-report-page .legend-row{gap:12px}.attendance-report-page .legend-item{font-size:11px}.overview-table,.attendance-table{font-size:10px}.attendance-report-page .btn{padding:8px 16px;font-size:13px}.overview-table-container{overflow-x:hidden}.attendance-report-page .table-container{overflow-x:visible}.attendance-report-page .employee-table th,.attendance-report-page .employee-table td{padding:8px 4px;font-size:11px}.attendance-report-page .employee-table th:nth-child(2),.attendance-report-page .employee-table td:nth-child(2){width:120px}.attendance-report-page .icon-btn{padding:4px}.attendance-report-page .icon-btn svg{width:16px;height:16px}.calendar-cell{width:22px;min-width:22px;max-width:22px;padding:2px 1px}.employee-col-header,.employee-col{width:120px;min-width:120px;max-width:120px}.employee-name{max-width:60px}.employee-avatar,.employee-avatar-small{width:20px;height:20px}.status-icon svg{width:12px;height:12px}.attendance-report-page .legend-icon svg{width:14px;height:14px}.day-header{font-size:8px}.date-header{font-size:9px}.total-header,.total-col{width:40px;min-width:40px;font-size:10px}}@media (max-width: 480px){.attendance-report-page .breadcrumb{font-size:12px}.attendance-report-page .tab-btn{padding:10px 16px;font-size:13px}.attendance-report-page .filter-group{min-width:100%}.attendance-report-page .action-buttons{flex-direction:column;width:100%}.attendance-report-page .btn{width:100%}}.leave-page{max-width:100%;width:100%;overflow-x:hidden}.leave-page .page-header{margin-bottom:24px}.leave-page .page-title{font-size:28px;font-weight:600;color:#333;margin:0 0 8px}.leave-page .breadcrumb{display:flex;align-items:center;gap:8px;font-size:14px;color:#666}.leave-page .breadcrumb-item{color:#666}.leave-page .breadcrumb-item.active{color:#f26930;font-weight:500}.leave-page .breadcrumb-separator{color:#999}.leave-card{background:#fff;border-radius:8px;box-shadow:0 2px 8px #00000014;overflow:hidden}.leave-page .tabs-container{display:flex;gap:4px;margin-bottom:0;background-color:#fafafa;padding:4px;border-bottom:1px solid #e0e0e0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.leave-page .tabs-container::-webkit-scrollbar{display:none}.leave-page .tab-btn{padding:12px 28px;border:none;background-color:transparent;color:#666;font-size:15px;font-weight:500;cursor:pointer;transition:all .3s ease;border-radius:6px;position:relative;white-space:nowrap}.leave-page .tab-btn:after{content:"";position:absolute;bottom:-6px;left:50%;transform:translate(-50%);width:0;height:3px;background:linear-gradient(135deg,#f26930,#ff8c5a);border-radius:3px 3px 0 0;transition:width .3s ease}.leave-page .tab-btn.active{background-color:#fff;color:#f26930;font-weight:600;box-shadow:0 2px 8px #0000000f}.leave-page .tab-btn.active:after{width:100%}.leave-page .tab-btn:hover:not(.active){background-color:#f269300d;color:#f26930}.leave-page .tab-content{background:#fff;padding:20px 24px}.leave-page .filters-row{display:flex;gap:16px;margin-bottom:20px;flex-wrap:wrap;align-items:flex-end}.leave-page .filter-group{display:flex;flex-direction:column;gap:6px;flex:0 0 auto;min-width:200px}.leave-page .filter-group label{font-size:13px;font-weight:600;color:#333}.leave-page .filter-group select,.leave-page .filter-group input{padding:10px 14px;border:1px solid #ddd;border-radius:6px;font-size:14px;color:#333;background-color:#fff;transition:all .2s;min-width:180px}.leave-page .filter-group select:focus,.leave-page .filter-group input:focus{outline:none;border-color:#f26930;box-shadow:0 0 0 3px #f269301a}.leave-page .filter-group input[type=date]{cursor:pointer}.leave-page .action-buttons{display:flex;gap:12px;align-items:center}.leave-page .action-buttons.ml-auto{margin-left:auto}.leave-page .btn{padding:10px 20px;border-radius:6px;border:none;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;white-space:nowrap}.leave-page .btn-primary{background:linear-gradient(135deg,#f26930,#ff8c5a);color:#fff;box-shadow:0 2px 8px #f2693033}.leave-page .btn-primary:hover{background:linear-gradient(135deg,#d95a28,#f26930);box-shadow:0 4px 12px #f269304d;transform:translateY(-1px)}.leave-page .btn-secondary{background-color:#fff;color:#666;border:1px solid #ddd}.leave-page .btn-secondary:hover{background-color:#f5f5f5;border-color:#ccc}.leave-page .table-container{overflow-x:auto;margin-bottom:20px;width:100%}.leave-page .no-data{text-align:center;padding:40px!important;color:#999;font-size:15px}.leave-page .status-badge{padding:4px 12px;border-radius:12px;font-size:12px;font-weight:500;text-transform:capitalize;display:inline-block;white-space:nowrap}.leave-page .status-badge.status-approved,.leave-page .status-badge.status-active{background-color:#e8f5e9;color:#2e7d32}.leave-page .status-badge.status-pending{background-color:#fff3e0;color:#e65100}.leave-page .status-badge.status-rejected{background-color:#ffebee;color:#c62828}.leave-page .status-badge.status-cancelled,.leave-page .status-badge.status-inactive{background-color:#f5f5f5;color:#757575}.leave-page .status-badge.status-waiting{background-color:#e3f2fd;color:#1565c0}.leave-page .action-btn.approve-btn{color:#2e7d32}.leave-page .action-btn.approve-btn:hover{background-color:#e8f5e9;border-radius:4px}.leave-page .action-btn.reject-btn{color:#c62828}.leave-page .action-btn.reject-btn:hover{background-color:#ffebee;border-radius:4px}.leave-page .action-btn.disapprove-btn{color:#c62828}.leave-page .action-btn.disapprove-btn:hover{background-color:#ffcdd2;border-radius:4px}.leave-page .loading-state,.leave-page .no-data-state{text-align:center;padding:60px 20px;color:#666;font-size:15px;background:#f8f9fa;border-radius:8px;margin:20px 0}.leave-page .loading-state{color:#f26930;font-weight:500}.leave-page .balances-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;padding:10px 0}.leave-page .balance-card{background:#fff;border:1px solid #e0e0e0;border-radius:8px;padding:20px;transition:all .3s ease}.leave-page .balance-card:hover{box-shadow:0 4px 12px #0000001a;transform:translateY(-2px)}.leave-page .balance-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #e0e0e0}.leave-page .balance-header h3{margin:0;font-size:16px;font-weight:600;color:#333}.leave-page .leave-code{font-size:12px;font-weight:600;color:#f26930;background:#f269301a;padding:4px 10px;border-radius:4px}.leave-page .balance-body{margin-bottom:16px}.leave-page .balance-row{display:flex;justify-content:space-between;padding:8px 0;font-size:14px}.leave-page .balance-row.highlight{background-color:#f269300d;padding:10px 12px;margin:8px -12px 0;border-radius:6px}.leave-page .balance-label{color:#666;font-weight:500}.leave-page .balance-value{font-weight:600;color:#333}.leave-page .balance-value.used{color:#c62828}.leave-page .balance-value.pending{color:#e65100}.leave-page .balance-value.available{color:#2e7d32;font-size:18px}.leave-page .balance-footer{margin-top:16px;padding-top:16px;border-top:1px solid #e0e0e0}.leave-page .progress-bar{width:100%;height:8px;background-color:#f0f0f0;border-radius:4px;overflow:hidden;margin-bottom:8px}.leave-page .progress-fill{height:100%;background:linear-gradient(135deg,#f26930,#ff8c5a);transition:width .3s ease}.leave-page .progress-text{font-size:12px;color:#666;text-align:center;display:block}@media (max-width: 1200px){.leave-page .filters-row{flex-direction:column;align-items:stretch}.leave-page .filter-group{min-width:100%}.leave-page .action-buttons{flex-wrap:wrap}.leave-page .action-buttons.ml-auto{margin-left:0}.leave-page .balances-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}}@media (max-width: 768px){.leave-page .page-title{font-size:24px}.leave-page .tabs-container{overflow-x:auto}.leave-page .tab-btn{padding:12px 24px;font-size:14px}.leave-page .tab-content{padding:16px}.leave-page .leave-table{font-size:9px}.leave-page .btn{padding:8px 16px;font-size:13px}.leave-page .balances-grid{grid-template-columns:1fr}}@media (max-width: 480px){.leave-page .breadcrumb{font-size:12px}.leave-page .tab-btn{padding:10px 16px;font-size:13px}.leave-page .filter-group{min-width:100%}.leave-page .action-buttons{flex-direction:column;width:100%}.leave-page .btn{width:100%}}.form-group input[type=text],.form-group input[type=tel],.form-group input[type=url],.form-group input[type=date],.form-group select,.form-group textarea{width:100%;padding:10px 12px;border:1px solid #ddd;border-radius:6px;font-size:14px;color:#333;background-color:#fff;transition:all .2s}.form-group input[type=text]:focus,.form-group input[type=tel]:focus,.form-group input[type=url]:focus,.form-group input[type=date]:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:#f26930;box-shadow:0 0 0 3px #f269301a}.form-group input[type=checkbox]{margin-right:8px}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:16px}.detail-item.full-width{grid-column:1 / -1}.detail-item label{font-size:12px;font-weight:600;color:#666;text-transform:uppercase;letter-spacing:.5px}.detail-item span{font-size:14px;color:#333}.reason-text{margin:0;font-size:14px;color:#333;line-height:1.5;background:#f9f9f9;padding:12px;border-radius:6px;border-left:3px solid #f26930}.workflow-step{display:flex;gap:16px;position:relative}.step-indicator{display:flex;flex-direction:column;align-items:center;position:relative}.step-number{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:#fff;background-color:#ccc;z-index:1}.step-line{width:2px;flex:1;min-height:40px;background-color:#e0e0e0}.step-content{flex:1;padding-bottom:20px}.step-status{font-size:11px;padding:2px 8px}.step-badges{display:flex;align-items:center;gap:8px}.approval-type-badge{font-size:10px;padding:2px 8px;border-radius:10px;font-weight:600;text-transform:uppercase;letter-spacing:.3px}.approval-type-badge.sequential{background-color:#e3f2fd;color:#1565c0;border:1px solid #90caf9}.approval-type-badge.anyone{background-color:#f3e5f5;color:#7b1fa2;border:1px solid #ce93d8}.step-details{display:flex;flex-direction:column;gap:4px;font-size:13px;color:#666}.approver-name{font-weight:500}.step-remarks{margin-top:8px;padding:8px 12px;background-color:#f8f9fa;border-radius:4px;font-size:13px;color:#666}.step-remarks .remarks-label{font-weight:600;color:#333;font-style:normal}.workflow-step.workflow-approved .step-number,.workflow-step.workflow-approved .step-line{background-color:#2e7d32}.workflow-step.workflow-rejected .step-number,.workflow-step.workflow-rejected .step-line{background-color:#c62828}.workflow-step.workflow-pending .step-line{background-color:#e0e0e0}.workflow-step.workflow-skipped .step-line{background-color:#e0e0e0}.workflow-step.workflow-waiting .step-number{background-color:#1565c0}.workflow-step.workflow-waiting .step-line{background-color:#e0e0e0}.status-badge.status-skipped{background-color:#f5f5f5;color:#757575}.status-badge.status-waiting{background-color:#e3f2fd;color:#1565c0}@media (max-width: 768px){.detail-grid{grid-template-columns:1fr}.step-header{flex-direction:column;align-items:flex-start;gap:4px}.step-details{flex-direction:column;gap:4px}}.approval-modal{max-width:550px}.approval-modal .modal-header.approval-header{background:linear-gradient(135deg,#e8f5e9,#c8e6c9);border-bottom:2px solid #4caf50}.approval-modal .modal-header.approval-header h2{color:#2e7d32}.approval-modal .modal-header.disapproval-header{background:linear-gradient(135deg,#ffebee,#ffcdd2);border-bottom:2px solid #ef5350}.approval-modal .modal-header.disapproval-header h2{color:#c62828}.confirmation-banner{display:flex;align-items:flex-start;gap:16px;padding:16px;border-radius:8px;margin-bottom:20px}.confirmation-banner.approve-banner{background-color:#e8f5e9;border:1px solid #a5d6a7}.confirmation-banner.disapprove-banner{background-color:#ffebee;border:1px solid #ef9a9a}.confirmation-icon{flex-shrink:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:#fff}.confirmation-icon svg{width:24px;height:24px}.confirmation-text{flex:1}.confirmation-title{margin:0 0 4px;font-size:15px;font-weight:600;color:#333}.confirmation-subtitle{margin:0;font-size:13px;color:#666;line-height:1.4}.disapprove-banner .confirmation-subtitle{color:#c62828;font-weight:500}.approval-details{margin-bottom:20px}.approval-details h4{margin:0 0 12px;font-size:14px;font-weight:600;color:#333;text-transform:uppercase;letter-spacing:.5px}.approval-details .employee-name{font-weight:600;color:#f26930}.btn-approve{background:linear-gradient(135deg,#4caf50,#66bb6a);color:#fff;box-shadow:0 2px 8px #4caf504d}.btn-approve:hover:not(:disabled){background:linear-gradient(135deg,#43a047,#4caf50);box-shadow:0 4px 12px #4caf5066;transform:translateY(-1px)}.btn-approve:disabled{background:#a5d6a7;cursor:not-allowed;transform:none;box-shadow:none}.btn-disapprove{background:linear-gradient(135deg,#ef5350,#e57373);color:#fff;box-shadow:0 2px 8px #ef53504d}.btn-disapprove:hover:not(:disabled){background:linear-gradient(135deg,#e53935,#ef5350);box-shadow:0 4px 12px #ef535066;transform:translateY(-1px)}.btn-disapprove:disabled{background:#ef9a9a;cursor:not-allowed;transform:none;box-shadow:none}.leave-page .action-btn:disabled{opacity:.6;cursor:not-allowed}.leave-page .action-btn:disabled:hover{background-color:transparent}@media (max-width: 768px){.approval-modal{max-width:100%}.confirmation-banner{flex-direction:column;align-items:center;text-align:center}.confirmation-icon{margin-bottom:8px}}.ob-page{max-width:100%;width:100%;overflow-x:hidden}.ob-page .page-header{margin-bottom:24px}.ob-page .page-title{font-size:28px;font-weight:600;color:#333;margin:0 0 8px}.ob-page .breadcrumb{display:flex;align-items:center;gap:8px;font-size:14px;color:#666}.ob-page .breadcrumb-item{color:#666}.ob-page .breadcrumb-item.active{color:#f26930;font-weight:500}.ob-page .breadcrumb-separator{color:#999}.ob-card{background:#fff;border-radius:8px;box-shadow:0 2px 8px #00000014;overflow:hidden}.ob-page .tabs-container{display:flex;gap:4px;margin-bottom:0;background-color:#fafafa;padding:4px;border-bottom:1px solid #e0e0e0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.ob-page .tabs-container::-webkit-scrollbar{display:none}.ob-page .tab-btn{padding:12px 28px;border:none;background-color:transparent;color:#666;font-size:15px;font-weight:500;cursor:pointer;transition:all .3s ease;border-radius:6px;position:relative;white-space:nowrap}.ob-page .tab-btn:after{content:"";position:absolute;bottom:-6px;left:50%;transform:translate(-50%);width:0;height:3px;background:linear-gradient(135deg,#f26930,#ff8c5a);border-radius:3px 3px 0 0;transition:width .3s ease}.ob-page .tab-btn.active{background-color:#fff;color:#f26930;font-weight:600;box-shadow:0 2px 8px #0000000f}.ob-page .tab-btn.active:after{width:100%}.ob-page .tab-btn:hover:not(.active){background-color:#f269300d;color:#f26930}.ob-page .tab-content{background:#fff;padding:20px 24px}.ob-page .filters-row{display:flex;gap:16px;margin-bottom:20px;flex-wrap:wrap;align-items:flex-end}.ob-page .filter-group{display:flex;flex-direction:column;gap:6px;flex:0 0 auto;min-width:200px}.ob-page .filter-group label{font-size:13px;font-weight:600;color:#333}.ob-page .filter-group select,.ob-page .filter-group input{padding:10px 14px;border:1px solid #ddd;border-radius:6px;font-size:14px;color:#333;background-color:#fff;transition:all .2s;min-width:180px}.ob-page .filter-group select:focus,.ob-page .filter-group input:focus{outline:none;border-color:#f26930;box-shadow:0 0 0 3px #f269301a}.ob-page .filter-group input[type=date]{cursor:pointer}.ob-page .action-buttons{display:flex;gap:12px;align-items:center}.ob-page .action-buttons.ml-auto{margin-left:auto}.ob-page .btn{padding:10px 20px;border-radius:6px;border:none;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;white-space:nowrap}.ob-page .btn-primary{background:linear-gradient(135deg,#f26930,#ff8c5a);color:#fff;box-shadow:0 2px 8px #f2693033}.ob-page .btn-primary:hover{background:linear-gradient(135deg,#d95a28,#f26930);box-shadow:0 4px 12px #f269304d;transform:translateY(-1px)}.ob-page .btn-secondary{background-color:#fff;color:#666;border:1px solid #ddd}.ob-page .btn-secondary:hover{background-color:#f5f5f5;border-color:#ccc}.ob-page .table-container{overflow-x:auto;margin-bottom:20px;width:100%}.ob-page .no-data{text-align:center;padding:40px!important;color:#999;font-size:15px}.ob-page .status-badge{padding:4px 12px;border-radius:12px;font-size:12px;font-weight:500;text-transform:capitalize;display:inline-block;white-space:nowrap}.ob-page .status-badge.status-approved,.ob-page .status-badge.status-active{background-color:#e8f5e9;color:#2e7d32}.ob-page .status-badge.status-pending{background-color:#fff3e0;color:#e65100}.ob-page .status-badge.status-rejected{background-color:#ffebee;color:#c62828}.ob-page .status-badge.status-cancelled,.ob-page .status-badge.status-inactive{background-color:#f5f5f5;color:#757575}.ob-page .employee-table th:last-child,.ob-page .employee-table td:last-child{min-width:140px;width:140px;white-space:nowrap}.ob-page td .action-buttons{display:flex;gap:4px;justify-content:flex-start;flex-wrap:nowrap}.ob-page td .action-btn{flex-shrink:0}.ob-page .action-btn.disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.ob-page .action-btn.approve-btn{color:#2e7d32}.ob-page .action-btn.approve-btn:hover{background-color:#e8f5e9;border-radius:4px}.ob-page .action-btn.reject-btn{color:#c62828}.ob-page .action-btn.reject-btn:hover{background-color:#ffebee;border-radius:4px}.ob-page .loading-state,.ob-page .no-data-state{text-align:center;padding:60px 20px;color:#666;font-size:15px;background:#f8f9fa;border-radius:8px;margin:20px 0}.ob-page .loading-state{color:#f26930;font-weight:500}@media (max-width: 1200px){.ob-page .filters-row{flex-direction:column;align-items:stretch}.ob-page .filter-group{min-width:100%}.ob-page .action-buttons{flex-wrap:wrap}.ob-page .action-buttons.ml-auto{margin-left:0}}@media (max-width: 768px){.ob-page .page-title{font-size:24px}.ob-page .tabs-container{overflow-x:auto}.ob-page .tab-btn{padding:12px 24px;font-size:14px}.ob-page .tab-content{padding:16px}.ob-page .ob-table{font-size:9px}.ob-page .btn{padding:8px 16px;font-size:13px}}@media (max-width: 480px){.ob-page .breadcrumb{font-size:12px}.ob-page .tab-btn{padding:10px 16px;font-size:13px}.ob-page .filter-group{min-width:100%}.ob-page .action-buttons{flex-direction:column;width:100%}.ob-page .btn{width:100%}}.coa-page{max-width:100%;width:100%;overflow-x:hidden}.coa-page .page-header{margin-bottom:24px}.coa-page .page-title{font-size:28px;font-weight:600;color:#333;margin:0 0 8px}.coa-page .breadcrumb{display:flex;align-items:center;gap:8px;font-size:14px;color:#666}.coa-page .breadcrumb-item{color:#666}.coa-page .breadcrumb-item.active{color:#f26930;font-weight:500}.coa-page .breadcrumb-separator{color:#999}.coa-card{background:#fff;border-radius:8px;box-shadow:0 2px 8px #00000014;overflow:hidden}.coa-page .tabs-container{display:flex;gap:4px;margin-bottom:0;background-color:#fafafa;padding:4px;border-bottom:1px solid #e0e0e0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.coa-page .tabs-container::-webkit-scrollbar{display:none}.coa-page .tab-btn{padding:12px 28px;border:none;background-color:transparent;color:#666;font-size:15px;font-weight:500;cursor:pointer;transition:all .3s ease;border-radius:6px;position:relative;white-space:nowrap}.coa-page .tab-btn:after{content:"";position:absolute;bottom:-6px;left:50%;transform:translate(-50%);width:0;height:3px;background:linear-gradient(135deg,#f26930,#ff8c5a);border-radius:3px 3px 0 0;transition:width .3s ease}.coa-page .tab-btn.active{background-color:#fff;color:#f26930;font-weight:600;box-shadow:0 2px 8px #0000000f}.coa-page .tab-btn.active:after{width:100%}.coa-page .tab-btn:hover:not(.active){background-color:#f269300d;color:#f26930}.coa-page .tab-content{background:#fff;padding:20px 24px}.coa-page .filters-row{display:flex;gap:16px;margin-bottom:20px;flex-wrap:wrap;align-items:flex-end}.coa-page .filter-group{display:flex;flex-direction:column;gap:6px;flex:0 0 auto;min-width:200px}.coa-page .filter-group label{font-size:13px;font-weight:600;color:#333}.coa-page .filter-group select,.coa-page .filter-group input{padding:10px 14px;border:1px solid #ddd;border-radius:6px;font-size:14px;color:#333;background-color:#fff;transition:all .2s;min-width:180px}.coa-page .filter-group select:focus,.coa-page .filter-group input:focus{outline:none;border-color:#f26930;box-shadow:0 0 0 3px #f269301a}.coa-page .filter-group input[type=date]{cursor:pointer}.coa-page .action-buttons{display:flex;gap:12px;align-items:center}.coa-page .action-buttons.ml-auto{margin-left:auto}.coa-page .btn{padding:10px 20px;border-radius:6px;border:none;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;white-space:nowrap}.coa-page .btn-primary{background:linear-gradient(135deg,#f26930,#ff8c5a);color:#fff;box-shadow:0 2px 8px #f2693033}.coa-page .btn-primary:hover{background:linear-gradient(135deg,#d95a28,#f26930);box-shadow:0 4px 12px #f269304d;transform:translateY(-1px)}.coa-page .btn-secondary{background-color:#fff;color:#666;border:1px solid #ddd}.coa-page .btn-secondary:hover{background-color:#f5f5f5;border-color:#ccc}.coa-page .table-container{overflow-x:auto;margin-bottom:20px;width:100%}.coa-page .no-data{text-align:center;padding:40px!important;color:#999;font-size:15px}.coa-page .status-badge{padding:4px 12px;border-radius:12px;font-size:12px;font-weight:500;text-transform:capitalize;display:inline-block;white-space:nowrap}.coa-page .status-badge.status-approved,.coa-page .status-badge.status-active{background-color:#e8f5e9;color:#2e7d32}.coa-page .status-badge.status-pending{background-color:#fff3e0;color:#e65100}.coa-page .status-badge.status-rejected{background-color:#ffebee;color:#c62828}.coa-page .status-badge.status-cancelled,.coa-page .status-badge.status-inactive{background-color:#f5f5f5;color:#757575}.coa-page .status-badge.status-completed{background-color:#e3f2fd;color:#1565c0}.coa-page .action-btn.approve-btn{color:#2e7d32}.coa-page .action-btn.approve-btn:hover{background-color:#e8f5e9;border-radius:4px}.coa-page .action-btn.reject-btn{color:#c62828}.coa-page .action-btn.reject-btn:hover{background-color:#ffebee;border-radius:4px}.coa-page .loading-state,.coa-page .no-data-state{text-align:center;padding:60px 20px;color:#666;font-size:15px;background:#f8f9fa;border-radius:8px;margin:20px 0}.coa-page .loading-state{color:#f26930;font-weight:500}@media (max-width: 1200px){.coa-page .filters-row{flex-direction:column;align-items:stretch}.coa-page .filter-group{min-width:100%}.coa-page .action-buttons{flex-wrap:wrap}.coa-page .action-buttons.ml-auto{margin-left:0}}@media (max-width: 768px){.coa-page .page-title{font-size:24px}.coa-page .tabs-container{overflow-x:auto}.coa-page .tab-btn{padding:12px 24px;font-size:14px}.coa-page .tab-content{padding:16px}.coa-page .coa-table{font-size:9px}.coa-page .btn{padding:8px 16px;font-size:13px}}@media (max-width: 480px){.coa-page .breadcrumb{font-size:12px}.coa-page .tab-btn{padding:10px 16px;font-size:13px}.coa-page .filter-group{min-width:100%}.coa-page .action-buttons{flex-direction:column;width:100%}.coa-page .btn{width:100%}}.form-group input[type=text],.form-group input[type=tel],.form-group input[type=url],.form-group input[type=date],.form-group input[type=time],.form-group input[type=number],.form-group select,.form-group textarea{width:100%;padding:10px 12px;border:1px solid #ddd;border-radius:6px;font-size:14px;color:#333;background-color:#fff;transition:all .2s}.form-group input[type=text]:focus,.form-group input[type=tel]:focus,.form-group input[type=url]:focus,.form-group input[type=date]:focus,.form-group input[type=time]:focus,.form-group input[type=number]:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:#f26930;box-shadow:0 0 0 3px #f269301a}@media (max-width: 768px){.modal-content{max-width:100%}.form-row{grid-template-columns:1fr}.modal-body{padding:16px}}.overtime-page{max-width:100%;width:100%;overflow-x:hidden}.overtime-page .page-header{margin-bottom:24px}.overtime-page .page-title{font-size:28px;font-weight:600;color:#333;margin:0 0 8px}.overtime-page .breadcrumb{display:flex;align-items:center;gap:8px;font-size:14px;color:#666}.overtime-page .breadcrumb-item{color:#666}.overtime-page .breadcrumb-item.active{color:#f26930;font-weight:500}.overtime-page .breadcrumb-separator{color:#999}.overtime-card{background:#fff;border-radius:8px;box-shadow:0 2px 8px #00000014;overflow:hidden}.overtime-page .tabs-container{display:flex;gap:4px;margin-bottom:0;background-color:#fafafa;padding:4px;border-bottom:1px solid #e0e0e0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.overtime-page .tabs-container::-webkit-scrollbar{display:none}.overtime-page .tab-btn{padding:12px 28px;border:none;background-color:transparent;color:#666;font-size:15px;font-weight:500;cursor:pointer;transition:all .3s ease;border-radius:6px;position:relative;white-space:nowrap}.overtime-page .tab-btn:after{content:"";position:absolute;bottom:-6px;left:50%;transform:translate(-50%);width:0;height:3px;background:linear-gradient(135deg,#f26930,#ff8c5a);border-radius:3px 3px 0 0;transition:width .3s ease}.overtime-page .tab-btn.active{background-color:#fff;color:#f26930;font-weight:600;box-shadow:0 2px 8px #0000000f}.overtime-page .tab-btn.active:after{width:100%}.overtime-page .tab-btn:hover:not(.active){background-color:#f269300d;color:#f26930}.overtime-page .tab-content{background:#fff;padding:20px 24px}.overtime-page .filters-row{display:flex;gap:16px;margin-bottom:20px;flex-wrap:wrap;align-items:flex-end}.overtime-page .filter-group{display:flex;flex-direction:column;gap:6px;flex:0 0 auto;min-width:200px}.overtime-page .filter-group label{font-size:13px;font-weight:600;color:#333}.overtime-page .filter-group select,.overtime-page .filter-group input{padding:10px 14px;border:1px solid #ddd;border-radius:6px;font-size:14px;color:#333;background-color:#fff;transition:all .2s;min-width:180px}.overtime-page .filter-group select:focus,.overtime-page .filter-group input:focus{outline:none;border-color:#f26930;box-shadow:0 0 0 3px #f269301a}.overtime-page .filter-group input[type=date]{cursor:pointer}.overtime-page .action-buttons{display:flex;gap:12px;align-items:center}.overtime-page .action-buttons.ml-auto{margin-left:auto}.overtime-page .btn{padding:10px 20px;border-radius:6px;border:none;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;white-space:nowrap}.overtime-page .btn-primary{background:linear-gradient(135deg,#f26930,#ff8c5a);color:#fff;box-shadow:0 2px 8px #f2693033}.overtime-page .btn-primary:hover{background:linear-gradient(135deg,#d95a28,#f26930);box-shadow:0 4px 12px #f269304d;transform:translateY(-1px)}.overtime-page .btn-secondary{background-color:#fff;color:#666;border:1px solid #ddd}.overtime-page .btn-secondary:hover{background-color:#f5f5f5;border-color:#ccc}.overtime-page .table-container{overflow-x:auto;margin-bottom:20px;width:100%}.overtime-page .employee-table{table-layout:fixed;width:100%}.overtime-page .employee-table th:nth-child(1),.overtime-page .employee-table td:nth-child(1){width:5%}.overtime-page .employee-table th:nth-child(2),.overtime-page .employee-table td:nth-child(2){width:14%}.overtime-page .employee-table th:nth-child(3),.overtime-page .employee-table td:nth-child(3){width:10%}.overtime-page .employee-table th:nth-child(4),.overtime-page .employee-table td:nth-child(4){width:12%}.overtime-page .employee-table th:nth-child(5),.overtime-page .employee-table td:nth-child(5){width:10%}.overtime-page .employee-table th:nth-child(6),.overtime-page .employee-table td:nth-child(6){width:18%}.overtime-page .employee-table th:nth-child(7),.overtime-page .employee-table td:nth-child(7){width:9%}.overtime-page .employee-table th:nth-child(8),.overtime-page .employee-table td:nth-child(8){width:10%}.overtime-page .employee-table th:nth-child(9),.overtime-page .employee-table td:nth-child(9){width:12%}.overtime-page .employee-table td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overtime-page .employee-table td:nth-child(9){overflow:visible;white-space:nowrap}.overtime-page .employee-table .action-buttons{display:flex;gap:4px;align-items:center;justify-content:flex-start;flex-wrap:nowrap}.overtime-page .employee-table .action-btn{padding:4px;flex-shrink:0;min-width:24px;width:24px;height:24px}.overtime-page .employee-table .action-btn svg{width:16px;height:16px}.overtime-page .no-data{text-align:center;padding:40px!important;color:#999;font-size:15px}.overtime-page .status-badge{padding:4px 12px;border-radius:12px;font-size:12px;font-weight:500;text-transform:capitalize;display:inline-block;white-space:nowrap}.overtime-page .status-badge.status-approved,.overtime-page .status-badge.status-active{background-color:#e8f5e9;color:#2e7d32}.overtime-page .status-badge.status-pending{background-color:#fff3e0;color:#e65100}.overtime-page .status-badge.status-rejected{background-color:#ffebee;color:#c62828}.overtime-page .status-badge.status-cancelled,.overtime-page .status-badge.status-inactive{background-color:#f5f5f5;color:#757575}.overtime-page .action-btn.approve-btn{color:#2e7d32}.overtime-page .action-btn.approve-btn:hover{background-color:#e8f5e9;border-radius:4px}.overtime-page .action-btn.reject-btn{color:#c62828}.overtime-page .action-btn.reject-btn:hover{background-color:#ffebee;border-radius:4px}.overtime-page .loading-state,.overtime-page .no-data-state{text-align:center;padding:60px 20px;color:#666;font-size:15px;background:#f8f9fa;border-radius:8px;margin:20px 0}.overtime-page .loading-state{color:#f26930;font-weight:500}@media (max-width: 1200px){.overtime-page .filters-row{flex-direction:column;align-items:stretch}.overtime-page .filter-group{min-width:100%}.overtime-page .action-buttons{flex-wrap:wrap}.overtime-page .action-buttons.ml-auto{margin-left:0}}@media (max-width: 768px){.overtime-page .page-title{font-size:24px}.overtime-page .tabs-container{overflow-x:auto}.overtime-page .tab-btn{padding:12px 24px;font-size:14px}.overtime-page .tab-content{padding:16px}.overtime-page .overtime-table{font-size:9px}.overtime-page .btn{padding:8px 16px;font-size:13px}.form-row{grid-template-columns:1fr}.modal-body{padding:16px}}@media (max-width: 480px){.overtime-page .breadcrumb{font-size:12px}.overtime-page .tab-btn{padding:10px 16px;font-size:13px}.overtime-page .filter-group{min-width:100%}.overtime-page .action-buttons{flex-direction:column;width:100%}.overtime-page .btn{width:100%}}@media (max-width: 768px){.modal-content.modal-large{max-width:100%}.detail-grid{grid-template-columns:1fr}.detail-item.full-width{grid-column:span 1}}.undertime-page{max-width:100%;width:100%;overflow-x:hidden}.undertime-page .page-header{margin-bottom:24px}.undertime-page .page-title{font-size:28px;font-weight:600;color:#333;margin:0 0 8px}.undertime-page .breadcrumb{display:flex;align-items:center;gap:8px;font-size:14px;color:#666}.undertime-page .breadcrumb-item{color:#666}.undertime-page .breadcrumb-item.active{color:#f26930;font-weight:500}.undertime-page .breadcrumb-separator{color:#999}.undertime-card{background:#fff;border-radius:8px;box-shadow:0 2px 8px #00000014;overflow:hidden}.undertime-page .tabs-container{display:flex;gap:4px;margin-bottom:0;background-color:#fafafa;padding:4px;border-bottom:1px solid #e0e0e0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.undertime-page .tabs-container::-webkit-scrollbar{display:none}.undertime-page .tab-btn{padding:12px 28px;border:none;background-color:transparent;color:#666;font-size:15px;font-weight:500;cursor:pointer;transition:all .3s ease;border-radius:6px;position:relative;white-space:nowrap}.undertime-page .tab-btn:after{content:"";position:absolute;bottom:-6px;left:50%;transform:translate(-50%);width:0;height:3px;background:linear-gradient(135deg,#f26930,#ff8c5a);border-radius:3px 3px 0 0;transition:width .3s ease}.undertime-page .tab-btn.active{background-color:#fff;color:#f26930;font-weight:600;box-shadow:0 2px 8px #0000000f}.undertime-page .tab-btn.active:after{width:100%}.undertime-page .tab-btn:hover:not(.active){background-color:#f269300d;color:#f26930}.undertime-page .tab-content{background:#fff;padding:20px 24px}.undertime-page .filters-row{display:flex;gap:16px;margin-bottom:20px;flex-wrap:wrap;align-items:flex-end}.undertime-page .filter-group{display:flex;flex-direction:column;gap:6px;flex:0 0 auto;min-width:200px}.undertime-page .filter-group label{font-size:13px;font-weight:600;color:#333}.undertime-page .filter-group select,.undertime-page .filter-group input{padding:10px 14px;border:1px solid #ddd;border-radius:6px;font-size:14px;color:#333;background-color:#fff;transition:all .2s;min-width:180px}.undertime-page .filter-group select:focus,.undertime-page .filter-group input:focus{outline:none;border-color:#f26930;box-shadow:0 0 0 3px #f269301a}.undertime-page .filter-group input[type=date]{cursor:pointer}.undertime-page .action-buttons{display:flex;gap:12px;align-items:center}.undertime-page .action-buttons.ml-auto{margin-left:auto}.undertime-page .btn{padding:10px 20px;border-radius:6px;border:none;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;white-space:nowrap}.undertime-page .btn-primary{background:linear-gradient(135deg,#f26930,#ff8c5a);color:#fff;box-shadow:0 2px 8px #f2693033}.undertime-page .btn-primary:hover{background:linear-gradient(135deg,#d95a28,#f26930);box-shadow:0 4px 12px #f269304d;transform:translateY(-1px)}.undertime-page .btn-secondary{background-color:#fff;color:#666;border:1px solid #ddd}.undertime-page .btn-secondary:hover{background-color:#f5f5f5;border-color:#ccc}.undertime-page .table-container{overflow-x:auto;margin-bottom:20px;width:100%}.undertime-page .employee-table{table-layout:fixed;width:100%}.undertime-page .employee-table th:nth-child(1),.undertime-page .employee-table td:nth-child(1){width:4%}.undertime-page .employee-table th:nth-child(2),.undertime-page .employee-table td:nth-child(2){width:12%}.undertime-page .employee-table th:nth-child(3),.undertime-page .employee-table td:nth-child(3){width:9%}.undertime-page .employee-table th:nth-child(4),.undertime-page .employee-table td:nth-child(4){width:10%}.undertime-page .employee-table th:nth-child(5),.undertime-page .employee-table td:nth-child(5){width:10%}.undertime-page .employee-table th:nth-child(6),.undertime-page .employee-table td:nth-child(6){width:9%}.undertime-page .employee-table th:nth-child(7),.undertime-page .employee-table td:nth-child(7){width:15%}.undertime-page .employee-table th:nth-child(8),.undertime-page .employee-table td:nth-child(8){width:8%}.undertime-page .employee-table th:nth-child(9),.undertime-page .employee-table td:nth-child(9){width:10%}.undertime-page .employee-table th:nth-child(10),.undertime-page .employee-table td:nth-child(10){width:13%}.undertime-page .employee-table td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.undertime-page .employee-table td:nth-child(10){overflow:visible;white-space:nowrap}.undertime-page .employee-table .action-buttons{display:flex;gap:4px;align-items:center;justify-content:flex-start;flex-wrap:nowrap}.undertime-page .employee-table .action-btn{padding:4px;flex-shrink:0;min-width:24px;width:24px;height:24px}.undertime-page .employee-table .action-btn svg{width:16px;height:16px}.undertime-page .no-data{text-align:center;padding:40px!important;color:#999;font-size:15px}.undertime-page .status-badge{padding:4px 12px;border-radius:12px;font-size:12px;font-weight:500;text-transform:capitalize;display:inline-block;white-space:nowrap}.undertime-page .status-badge.status-approved,.undertime-page .status-badge.status-active{background-color:#e8f5e9;color:#2e7d32}.undertime-page .status-badge.status-pending{background-color:#fff3e0;color:#e65100}.undertime-page .status-badge.status-rejected{background-color:#ffebee;color:#c62828}.undertime-page .status-badge.status-cancelled,.undertime-page .status-badge.status-inactive{background-color:#f5f5f5;color:#757575}.undertime-page .action-btn.approve-btn{color:#2e7d32}.undertime-page .action-btn.approve-btn:hover{background-color:#e8f5e9;border-radius:4px}.undertime-page .action-btn.reject-btn{color:#c62828}.undertime-page .action-btn.reject-btn:hover{background-color:#ffebee;border-radius:4px}.undertime-page .loading-state,.undertime-page .no-data-state{text-align:center;padding:60px 20px;color:#666;font-size:15px;background:#f8f9fa;border-radius:8px;margin:20px 0}.undertime-page .loading-state{color:#f26930;font-weight:500}@media (max-width: 1200px){.undertime-page .filters-row{flex-direction:column;align-items:stretch}.undertime-page .filter-group{min-width:100%}.undertime-page .action-buttons{flex-wrap:wrap}.undertime-page .action-buttons.ml-auto{margin-left:0}}@media (max-width: 768px){.undertime-page .page-title{font-size:24px}.undertime-page .tabs-container{overflow-x:auto}.undertime-page .tab-btn{padding:12px 24px;font-size:14px}.undertime-page .tab-content{padding:16px}.undertime-page .undertime-table{font-size:9px}.undertime-page .btn{padding:8px 16px;font-size:13px}}@media (max-width: 480px){.undertime-page .breadcrumb{font-size:12px}.undertime-page .tab-btn{padding:10px 16px;font-size:13px}.undertime-page .filter-group{min-width:100%}.undertime-page .action-buttons{flex-direction:column;width:100%}.undertime-page .btn{width:100%}}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.modal-content{background:#fff;border-radius:8px;max-width:600px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 4px 20px #0000004d}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid #e0e0e0}.modal-header h2{margin:0;font-size:20px;font-weight:600;color:#333}.modal-close{background:none;border:none;font-size:32px;color:#666;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .2s}.modal-close:hover{background-color:#f5f5f5;color:#333}.modal-body{padding:24px}.modal-footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid #e0e0e0}.form-group{margin-bottom:16px}.form-group label{display:block;margin-bottom:6px;font-size:14px;font-weight:600;color:#333}.form-group input[type=text],.form-group input[type=date],.form-group input[type=datetime-local],.form-group select,.form-group textarea{width:100%;padding:10px 12px;border:1px solid #ddd;border-radius:6px;font-size:14px;color:#333;background-color:#fff;transition:all .2s}.form-group input[type=text]:focus,.form-group input[type=date]:focus,.form-group input[type=datetime-local]:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:#f26930;box-shadow:0 0 0 3px #f269301a}.form-group textarea{resize:vertical;font-family:inherit}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.modal-content.modal-large{max-width:700px}.detail-section{margin-bottom:24px}.detail-section:last-child{margin-bottom:0}.section-title{font-size:16px;font-weight:600;color:#333;margin:0 0 16px;padding-bottom:8px;border-bottom:2px solid #f26930}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.detail-item{display:flex;flex-direction:column;gap:4px}.detail-item.full-width{grid-column:span 2}.detail-label{font-size:12px;font-weight:600;color:#666;text-transform:uppercase;letter-spacing:.5px}.detail-value{font-size:14px;color:#333}.workflow-timeline{display:flex;flex-direction:column;gap:0}.workflow-step{display:flex;gap:16px;position:relative;padding-bottom:24px}.workflow-step:last-child{padding-bottom:0}.step-number{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:#fff;flex-shrink:0;z-index:1}.workflow-step.workflow-approved .step-number{background-color:#2e7d32}.workflow-step.workflow-rejected .step-number{background-color:#c62828}.workflow-step.workflow-pending .step-number{background-color:#e65100}.workflow-step.workflow-skipped .step-number{background-color:#9e9e9e}.step-content{flex:1;padding-top:4px}.step-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.step-title{font-size:14px;font-weight:600;color:#333}.step-status{padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600;text-transform:uppercase}.step-status.status-approved{background-color:#e8f5e9;color:#2e7d32}.step-status.status-rejected{background-color:#ffebee;color:#c62828}.step-status.status-pending{background-color:#fff3e0;color:#e65100}.step-status.status-skipped{background-color:#f5f5f5;color:#757575}.step-details{display:flex;flex-direction:column;gap:2px}.approver-name{font-size:13px;color:#666}.action-date{font-size:12px;color:#333;font-weight:500}.action-date-container{display:flex;align-items:center;gap:6px;margin-top:4px;padding:6px 10px;background-color:#f8f9fa;border-radius:4px;border-left:3px solid #2e7d32}.workflow-step.workflow-rejected .action-date-container{border-left-color:#c62828}.action-date-label{font-size:12px;font-weight:600;color:#555}.step-remarks{margin-top:8px;padding:8px 12px;background-color:#f8f9fa;border-radius:6px;font-size:13px;color:#555}.remarks-label{font-weight:600;color:#333}.step-connector{position:absolute;left:15px;top:32px;bottom:0;width:2px;background-color:#e0e0e0}.workflow-step.workflow-approved .step-connector{background-color:#2e7d32}.workflow-step.workflow-rejected .step-connector{background-color:#c62828}@media (max-width: 768px){.modal-content,.modal-content.modal-large{max-width:100%}.form-row{grid-template-columns:1fr}.modal-body{padding:16px}.detail-grid{grid-template-columns:1fr}.detail-item.full-width{grid-column:span 1}}*{margin:0;padding:0;box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,Roboto,sans-serif!important}html,body{font-family:-apple-system,BlinkMacSystemFont,Roboto,sans-serif!important;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#f5f7fa;overflow-x:hidden;width:100%;max-width:100vw}#root{min-height:100vh;width:100%;max-width:100vw;overflow-x:hidden}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}table{width:100%;border-collapse:collapse;font-size:13px}table thead{background:#f9f9f9;border-bottom:2px solid #e0e0e0}table th{padding:4px 10px;text-align:left;font-weight:600;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}table tbody tr{border-bottom:1px solid #f0f0f0;transition:background .2s}table tbody tr:hover{background:#f9f9f9}table td{padding:4px 10px;color:#666;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.table-container{overflow-x:hidden;width:100%}.action-buttons{display:flex;gap:8px;align-items:center;justify-content:flex-start}.action-btn{background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;transition:transform .2s;flex-shrink:0}.action-btn:hover{transform:scale(1.1)}.action-btn.edit-btn:hover{background:#fff5f0;border-radius:4px}.action-btn.delete-btn:hover{background:#ffebee;border-radius:4px}.action-btn.view-btn:hover{background:#f5f5f5;border-radius:4px}.table-footer{padding:16px 24px;border-top:1px solid #e0e0e0;display:flex;align-items:center;justify-content:center}.pagination{display:flex;align-items:center;gap:12px}.pagination-btn{width:32px;height:32px;border:1px solid #e0e0e0;background:#fff;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;color:#666;transition:all .2s}.pagination-btn:hover:not(:disabled){background:#f5f5f5;border-color:#f26930;color:#f26930}.pagination-btn:disabled{cursor:not-allowed;opacity:.4}.pagination-info{font-size:14px;color:#666;display:flex;align-items:center;gap:8px}.page-input{width:50px;height:32px;text-align:center;border:1px solid #e0e0e0;border-radius:4px;font-size:14px;outline:none;transition:border-color .2s}.page-input:focus{border-color:#f26930}.page-input::-webkit-outer-spin-button,.page-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.page-input[type=number]{-moz-appearance:textfield}@media (max-width: 1400px){table{font-size:12px}table th,table td{padding:3px 8px}}@media (max-width: 768px){.table-container{overflow-x:auto;-webkit-overflow-scrolling:touch}table{font-size:11px}table th,table td{padding:3px 6px}}