.sidebar{position:fixed;left:0;top:0;height:100vh;background:#1f2937;color:#f9fafb;transition:transform .3s ease,width .3s ease;z-index:1000;box-shadow:2px 0 10px #0000001a;display:flex;flex-direction:column;border-right:1px solid rgba(255,255,255,.05)}.sidebar.open{width:260px}.sidebar.closed{width:80px}.sidebar.mobile{width:280px;transform:translate(-100%);box-shadow:4px 0 20px #0000004d;top:60px;height:calc(100vh - 60px)}.sidebar.mobile.open{transform:translate(0)}.sidebar.mobile.closed{transform:translate(-100%)}.sidebar-header{display:flex;align-items:flex-start;justify-content:space-between;padding:20px;border-bottom:1px solid rgba(255,255,255,.08);min-height:80px;background:#0003}.sidebar-logo-section{display:flex;flex-direction:column;align-items:center;gap:12px;flex:1;padding:20px 16px;border-bottom:1px solid rgba(255,255,255,.1)}.sidebar-logo-image{width:100%;max-width:200px;height:auto;aspect-ratio:1396 / 817;object-fit:contain;border-radius:12px;background:#ffffff0d;padding:8px;box-shadow:0 2px 8px #0000001a}.sidebar-logo-text{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;width:100%}.sidebar-logo{font-size:22px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;letter-spacing:.5px;margin:0;line-height:1.3}.sidebar-subtitle{font-size:12px;color:#9ca3af;margin:0;font-weight:400;letter-spacing:.3px;text-transform:uppercase;opacity:.8}.sidebar.closed .sidebar-logo{font-size:18px}.sidebar.closed .sidebar-logo-section{padding:16px 8px;gap:8px;justify-content:center}.sidebar.closed .sidebar-logo-image{width:50px;height:auto;aspect-ratio:1396 / 817;margin-bottom:0;max-width:50px}.sidebar.closed .sidebar-logo-text,.sidebar.closed .sidebar-subtitle{display:none}.toggle-btn{background:#ffffff14;border:none;color:#d1d5db;width:32px;height:32px;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:all .2s;-webkit-tap-highlight-color:transparent}.toggle-btn svg{width:14px;height:14px}.toggle-btn:hover{background:#ffffff1f;color:#fff}.toggle-btn:active{background:#ffffff26}.close-btn{background:transparent;border:none;color:#d1d5db;width:32px;height:32px;border-radius:6px;cursor:pointer;display:none;align-items:center;justify-content:center;font-size:20px;transition:all .2s;-webkit-tap-highlight-color:transparent;flex-shrink:0}.close-btn:hover{background:#ffffff1a;color:#fff}.close-btn:active{background:#ffffff26}@media (max-width: 768px){.close-btn{display:flex}.toggle-btn{display:none}}.sidebar-nav{flex:1;padding:12px 0;overflow-y:auto;min-height:0}.nav-item{display:flex;align-items:center;padding:14px 20px;color:#d1d5db;text-decoration:none;transition:all .2s;margin:4px 12px;border-radius:8px;white-space:nowrap;-webkit-tap-highlight-color:transparent;min-height:48px}.nav-item:hover{background:#ffffff14;color:#fff}.nav-item:active{background:#ffffff1a}.nav-item.active{background:#8b5cf6;color:#fff;font-weight:600;box-shadow:0 2px 8px #8b5cf64d}@media (max-width: 768px){.nav-item{padding:16px 20px;margin:6px 12px;min-height:52px}}.nav-icon{font-size:20px;margin-right:12px;min-width:24px;display:flex;align-items:center;justify-content:center;color:#9ca3af;transition:color .2s}.nav-item:hover .nav-icon,.nav-item.active .nav-icon{color:#fff}.sidebar.closed .nav-icon{margin-right:0}.nav-label{font-size:15px}.sidebar.closed .nav-label{display:none}.sidebar-nav::-webkit-scrollbar{width:6px}.sidebar-nav::-webkit-scrollbar-track{background:#0003}.sidebar-nav::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:3px}.sidebar-nav::-webkit-scrollbar-thumb:hover{background:#ffffff40}.sidebar-footer{padding:16px;border-top:1px solid rgba(255,255,255,.08);background:#0003}.user-profile{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.08)}.user-avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#a78bfa,#8b5cf6);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:20px;flex-shrink:0}.user-info{flex:1;min-width:0}.user-name{font-size:16px;font-weight:700;color:#fff;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-email{font-size:12px;color:#9ca3af;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.logout-btn{width:100%;display:flex;align-items:center;gap:10px;padding:12px 16px;background:transparent;border:none;color:#ef4444;font-size:15px;font-weight:500;cursor:pointer;border-radius:8px;transition:all .2s;-webkit-tap-highlight-color:transparent}.logout-btn svg{width:18px;height:18px}.logout-btn:hover{background:#ef44441a}.logout-btn:active{background:#ef444426}.sidebar.closed .sidebar-footer{display:none}@media (max-width: 768px){.sidebar-header{padding:16px;min-height:80px}.sidebar-logo{font-size:18px}.sidebar-subtitle{font-size:12px}.nav-icon{font-size:22px;min-width:28px}.nav-label{font-size:16px}.sidebar-footer{padding:16px}.user-avatar{width:44px;height:44px;font-size:18px}.user-name{font-size:15px}.user-email{font-size:11px}}.app-header{position:fixed;top:0;left:0;right:0;height:64px;background:#fff;border-bottom:1px solid #e5e7eb;z-index:997;box-shadow:0 1px 3px #0000000d;display:flex;align-items:center;justify-content:center;padding-top:env(safe-area-inset-top,0);height:calc(64px + env(safe-area-inset-top,0))}.header-content{width:100%;max-width:100%;padding:0 12px;display:flex;align-items:center;justify-content:space-between;height:100%;gap:8px;position:relative;box-sizing:border-box;overflow:visible}.header-content:after{content:"";flex:1;min-width:0}.header-logo{display:flex;align-items:center;gap:12px;flex:0 0 auto;min-width:0;order:1}.logo-icon{width:40px;height:40px;background:linear-gradient(135deg,#3b82f6,#1e40af);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:18px;letter-spacing:.5px}.header-logo-image{width:auto;height:40px;max-width:80px;max-height:40px;aspect-ratio:1396 / 817;object-fit:contain;border-radius:6px;flex-shrink:0;display:block}.logo-text{font-size:18px;font-weight:700;color:#1f2937;letter-spacing:.3px}.header-actions{display:flex!important;align-items:center;gap:4px;flex-shrink:0;margin-left:auto;justify-content:flex-end;order:2;position:relative;z-index:10;min-width:0;padding-right:0;margin-right:0;visibility:visible!important;opacity:1!important}.header-action-btn{background:#fff;border:1px solid #e5e7eb;color:#1f2937;width:24px;height:24px;min-width:24px;max-width:24px;min-height:24px;max-height:24px;border-radius:5px;display:flex!important;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;-webkit-tap-highlight-color:transparent;position:relative;overflow:visible;flex-shrink:0;box-shadow:0 1px 2px #0000000f;box-sizing:border-box;padding:0;visibility:visible!important;opacity:1!important}.header-action-btn:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#8b5cf61a;transform:translate(-50%,-50%);transition:width .3s,height .3s}.header-action-btn:active:before{width:100px;height:100px}.header-action-btn svg{width:10px;height:10px;position:relative;z-index:1;transition:transform .2s;flex-shrink:0}.header-action-btn:active{background:#f3f4f6;border-color:#d1d5db;transform:scale(.95)}.header-action-btn:hover{background:#f9fafb;border-color:#d1d5db;box-shadow:0 2px 6px #0000001a;transform:translateY(-1px)}.header-action-btn:active svg{transform:scale(.9)}.header-logout-btn{background:#ef4444;border-color:#dc2626;color:#fff;min-width:auto;padding:0 12px}.header-logout-btn:hover{background:#dc2626;border-color:#b91c1c}.header-logout-btn:active{background:#b91c1c;border-color:#991b1b}.header-logout-btn svg{color:#fff}.header-refresh-btn{background:#fff;border-color:#3b82f6;color:#3b82f6;border-width:1.5px}.header-refresh-btn:hover{background:#eff6ff;border-color:#2563eb;color:#2563eb}.header-refresh-btn:active{background:#dbeafe;transform:translateY(0) scale(.95)}.header-refresh-btn.refreshing svg{animation:spin .8s linear infinite}.header-refresh-btn.refreshing{pointer-events:none;opacity:.7}.header-menu-btn{background:#fff;border-color:#8b5cf6;color:#8b5cf6;border-width:1.5px}.header-menu-btn:hover{background:#f5f3ff;border-color:#7c3aed;color:#7c3aed}.header-menu-btn:active{background:#ede9fe;transform:translateY(0) scale(.95)}@media (min-width: 769px){.app-header{display:none}}@media (max-width: 768px){.app-header{height:60px}.header-content{padding:0 8px;gap:4px;justify-content:space-between;overflow:visible;box-sizing:border-box}.header-content:after{display:none}.header-logo{gap:8px;flex:0 0 auto;max-width:calc(100% - 60px);min-width:0;overflow:hidden;display:flex;align-items:center}.header-logo-image{height:32px!important;max-width:60px!important;max-height:32px!important;width:auto!important}.logo-icon{width:36px;height:36px;font-size:16px}.header-actions{gap:4px;margin-left:auto!important;margin-right:0!important;flex-shrink:0;order:2;min-width:0;display:flex!important;align-items:center;justify-content:flex-end!important;padding-right:0}.header-action-btn{width:24px!important;height:24px!important;min-width:24px!important;max-width:24px!important;min-height:24px!important;max-height:24px!important;border-radius:5px;box-sizing:border-box;padding:0!important;display:flex!important;align-items:center;justify-content:center;flex-shrink:0;visibility:visible!important;opacity:1!important}.header-action-btn svg{width:10px!important;height:10px!important;flex-shrink:0}.header-menu-btn,.header-refresh-btn{width:24px!important;height:24px!important;min-width:24px!important;max-width:24px!important}}@media (max-width: 480px){.header-content{padding:0 8px;gap:4px;justify-content:space-between;overflow:visible}.header-logo{gap:6px;flex:0 0 auto;max-width:calc(100% - 60px);min-width:0;overflow:hidden}.header-logo-image{height:28px!important;max-width:50px!important;max-height:28px!important;width:auto!important}.header-actions{gap:4px;margin-left:auto!important;margin-right:0!important;flex-shrink:0;order:2;min-width:0;display:flex!important;align-items:center;justify-content:flex-end!important;padding-right:0}.header-action-btn{width:24px!important;height:24px!important;min-width:24px!important;max-width:24px!important;min-height:24px!important;max-height:24px!important;border-radius:5px;box-sizing:border-box;padding:0!important;display:flex!important;align-items:center;justify-content:center;visibility:visible!important;opacity:1!important}.header-action-btn svg{width:10px!important;height:10px!important}}.login-container{min-height:100vh;min-height:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea,#764ba2);padding:20px;padding-top:max(20px,env(safe-area-inset-top,20px));padding-bottom:max(20px,env(safe-area-inset-bottom,20px));padding-left:max(20px,env(safe-area-inset-left,20px));padding-right:max(20px,env(safe-area-inset-right,20px));box-sizing:border-box}.login-card{background:#fff;border-radius:16px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;width:100%;max-width:440px;padding:40px;animation:slideUp .3s ease-out;box-sizing:border-box;overflow:hidden}.login-header{text-align:center;margin-bottom:32px}.login-logo{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:8px;flex-wrap:wrap}.logo-icon{width:48px;height:48px;background:linear-gradient(135deg,#8b5cf6,#7c3aed);border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:24px;letter-spacing:.5px}.logo-image{width:auto;height:60px;max-width:120px;aspect-ratio:1396 / 817;object-fit:contain;border-radius:8px}@media (max-width: 768px){.logo-image{height:50px;max-width:100px}}@media (max-width: 375px){.logo-image{height:45px;max-width:90px}}.login-header h1{font-size:28px;font-weight:700;color:#1f2937;margin:0;word-wrap:break-word;overflow-wrap:break-word}.login-subtitle{font-size:14px;color:#6b7280;margin:0}.login-form{display:flex;flex-direction:column;gap:20px}.error-message{background:#fee2e2;color:#991b1b;padding:12px 16px;border-radius:8px;font-size:14px;border:1px solid #fecaca;word-wrap:break-word;overflow-wrap:break-word;line-height:1.5}.user-type-selector{display:flex;gap:8px;background:#f3f4f6;padding:4px;border-radius:8px;margin-bottom:8px}.user-type-btn{flex:1;padding:12px 16px;min-height:44px;border:none;background:transparent;color:#6b7280;font-size:15px;font-weight:500;border-radius:6px;cursor:pointer;transition:all .2s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.user-type-btn.active{background:#fff;color:#8b5cf6;box-shadow:0 1px 3px #0000001a}.user-type-btn:hover:not(.active){color:#374151}.form-group{display:flex;flex-direction:column;gap:8px;width:100%;box-sizing:border-box}.input-wrapper{position:relative;display:flex;align-items:center;width:100%;box-sizing:border-box}.input-icon{position:absolute;left:14px;color:#9ca3af;width:18px;height:18px;z-index:2;pointer-events:none;top:50%;transform:translateY(-50%);flex-shrink:0;transition:color .2s}.input-wrapper:focus-within .input-icon{color:#8b5cf6}.form-input{width:100%;padding:14px 16px 14px 50px;min-height:48px;border:1px solid #d1d5db;border-radius:8px;font-size:16px;transition:all .2s;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-indent:0;background-color:#fff;color:#1f2937}.form-input::placeholder{color:#9ca3af;opacity:1}.form-input:focus{outline:none;border-color:#8b5cf6;box-shadow:0 0 0 3px #8b5cf61a;background-color:#fff}.form-input:focus::placeholder{color:#d1d5db}@media (max-width: 768px){.form-input,input[type=email],input[type=password],input[type=text]{font-size:16px!important}}.password-toggle{position:absolute;right:16px;background:transparent;border:none;color:#9ca3af;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:8px;min-width:44px;min-height:44px;transition:color .2s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.password-toggle:hover{color:#6b7280}.password-toggle svg{width:18px;height:18px}.login-btn{width:100%;padding:16px 24px;min-height:52px;background:#8b5cf6;color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s;margin-top:8px;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.login-btn:hover:not(:disabled){background:#7c3aed;transform:translateY(-1px);box-shadow:0 4px 12px #8b5cf666}.login-btn:active:not(:disabled){transform:translateY(0)}.login-btn:disabled{opacity:.6;cursor:not-allowed}.login-footer{margin-top:32px;text-align:center;padding-top:24px;border-top:1px solid #e5e7eb}.login-footer p{font-size:12px;color:#9ca3af;margin:0}@media (max-width: 768px){.login-container{padding:16px;padding-top:max(16px,env(safe-area-inset-top,16px));padding-bottom:max(16px,env(safe-area-inset-bottom,16px));padding-left:max(16px,env(safe-area-inset-left,16px));padding-right:max(16px,env(safe-area-inset-right,16px));align-items:flex-start;padding-top:max(40px,env(safe-area-inset-top,40px))}.login-card{padding:28px 20px;max-width:100%;width:100%;margin:auto;border-radius:12px}.login-header{margin-bottom:28px}.login-header h1{font-size:24px;line-height:1.3}.login-subtitle{font-size:13px}.logo-icon{width:40px;height:40px;font-size:20px}.login-form{gap:18px}.form-group{gap:8px;width:100%;box-sizing:border-box}.form-label{font-size:14px}.form-input{font-size:16px!important;padding:14px 12px 14px 48px!important;min-height:48px!important;border-width:1.5px;width:100%!important;box-sizing:border-box!important}.input-icon{left:14px!important;width:18px!important;height:18px!important;top:50%!important;transform:translateY(-50%)!important}.input-wrapper{position:relative;width:100%;display:flex;align-items:center}.password-toggle{right:12px!important;padding:8px!important;min-width:44px!important;min-height:44px!important}.password-toggle svg{width:18px!important;height:18px!important}.user-type-btn{font-size:14px;padding:12px}.login-btn{font-size:16px;padding:16px 24px}.login-footer{margin-top:24px;padding-top:20px}.login-footer p{font-size:11px}}@media (max-width: 375px){.login-container{padding:12px;padding-top:max(30px,env(safe-area-inset-top,30px));padding-bottom:max(12px,env(safe-area-inset-bottom,12px));padding-left:max(12px,env(safe-area-inset-left,12px));padding-right:max(12px,env(safe-area-inset-right,12px))}.login-card{padding:24px 16px;border-radius:10px}.login-header{margin-bottom:24px}.login-header h1{font-size:22px}.login-subtitle{font-size:12px}.login-form{gap:16px}.form-input{font-size:16px!important;padding:14px 10px 14px 46px!important;min-height:48px!important;border-width:1.5px;width:100%!important;box-sizing:border-box!important}.input-icon{left:12px!important;width:18px!important;height:18px!important;top:50%!important;transform:translateY(-50%)!important}.input-wrapper{position:relative;width:100%;display:flex;align-items:center}.password-toggle{right:10px!important;padding:8px!important;min-width:44px!important;min-height:44px!important}.password-toggle svg{width:18px!important;height:18px!important}.user-type-btn{font-size:13px;padding:10px}.login-btn{font-size:15px;padding:14px 20px}}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:10000;padding:20px;overflow-y:auto}.modal-content{background:#fff;border-radius:12px;width:100%;max-width:600px;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;animation:modalSlideIn .3s ease-out}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.modal-header{display:flex;justify-content:space-between;align-items:flex-start;padding:24px;border-bottom:1px solid #e5e7eb}.modal-title-section{flex:1}.modal-title{font-size:24px;font-weight:700;color:#1f2937;margin:0 0 4px}.modal-subtitle{font-size:14px;color:#6b7280;margin:0}.modal-close-btn{background:transparent;border:none;color:#6b7280;width:32px;height:32px;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;-webkit-tap-highlight-color:transparent;flex-shrink:0}.modal-close-btn:hover{background:#f3f4f6;color:#1f2937}.modal-close-btn svg{width:18px;height:18px}.modal-body{padding:24px;overflow-y:auto;flex:1}@media (max-width: 768px){.modal-overlay{padding:0;align-items:flex-end;width:100vw;max-width:100vw}.modal-content{max-width:100vw!important;width:100vw!important;max-height:90vh;border-radius:12px 12px 0 0;margin:0}.modal-header{padding:20px;width:100%;box-sizing:border-box}.modal-title{font-size:20px;word-wrap:break-word}.modal-body{padding:20px;width:100%;box-sizing:border-box;max-width:100%;overflow-x:hidden}}@media (max-width: 480px){.modal-content{max-height:100vh;border-radius:0}.modal-header,.modal-body,.modal-footer{padding:16px}}.modal-footer{display:flex;justify-content:flex-end;gap:12px;padding:24px;border-top:1px solid #e5e7eb}.modal-close{background:transparent;border:none;color:#6b7280;width:32px;height:32px;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;-webkit-tap-highlight-color:transparent;flex-shrink:0}.modal-close:hover{background:#f3f4f6;color:#1f2937}.modal-close svg{width:18px;height:18px}@media (max-width: 768px){.modal-footer{padding:20px;flex-direction:column-reverse}.modal-footer .btn-primary,.modal-footer .btn-secondary{width:100%}}.employee-form{display:flex;flex-direction:column;gap:24px}.photo-upload-area{width:100%;min-height:200px;border:2px dashed #d1d5db;border-radius:8px;display:flex;align-items:center;justify-content:center;background:#f9fafb;position:relative;overflow:hidden}.photo-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:40px}.photo-icon{width:48px;height:48px;color:#9ca3af}.photo-text{font-size:14px;color:#6b7280;margin:0}.photo-preview{position:relative;width:100%;height:200px}.preview-image{width:100%;height:100%;object-fit:cover}.remove-photo-btn{position:absolute;top:8px;right:8px;background:#0009;color:#fff;border:none;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s}.remove-photo-btn:hover{background:#000c}.photo-actions{display:flex;gap:12px}.btn-photo{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;-webkit-tap-highlight-color:transparent}.btn-photo svg{width:18px;height:18px}.btn-photo-primary{border:2px solid #8b5cf6;color:#8b5cf6;background:transparent}.btn-photo-primary:hover{background:#8b5cf6;color:#fff}.btn-photo-secondary{border:1px solid #d1d5db;color:#6b7280;background:#fff}.btn-photo-secondary:hover{background:#f9fafb;border-color:#9ca3af}@media (max-width: 768px){.employee-form{width:100%;max-width:100%;box-sizing:border-box}.form-input{font-size:16px!important;width:100%;max-width:100%;box-sizing:border-box}.photo-actions{flex-direction:column;width:100%}.photo-upload-area{width:100%;max-width:100%;box-sizing:border-box}.modal-actions{flex-direction:column-reverse;width:100%;box-sizing:border-box}.modal-actions .btn-primary,.modal-actions .btn-secondary{width:100%;min-height:44px}}@media (max-width: 480px){.photo-upload-area{min-height:150px}.photo-preview{height:150px}}.clock-in-modal{max-width:700px;background:#fff}.clock-in-modal .form-group{margin-bottom:20px}.clock-in-modal .form-label{display:block;font-size:14px;font-weight:500;color:#374151;margin-bottom:8px}.clock-in-modal .form-input{width:100%;padding:10px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:16px;transition:all .2s;box-sizing:border-box}.clock-in-modal .form-input:focus{outline:none;border-color:#8b5cf6;box-shadow:0 0 0 3px #8b5cf61a}.clock-in-modal .form-input select{cursor:pointer}.clock-in-modal .modal-footer{display:flex;justify-content:flex-end;gap:12px;padding:24px;border-top:1px solid #e5e7eb}.clock-in-modal .btn-primary{background:#8b5cf6;color:#fff;border:none;padding:12px 24px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;justify-content:center}.clock-in-modal .btn-primary:hover{background:#7c3aed}.clock-in-modal .btn-primary:disabled{opacity:.6;cursor:not-allowed}.clock-in-modal .btn-secondary{background:#fff;color:#374151;border:1px solid #d1d5db;padding:12px 24px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;justify-content:center}.clock-in-modal .btn-secondary:hover{background:#f9fafb;border-color:#9ca3af}@media (max-width: 768px){.clock-in-modal{max-width:100vw!important;width:100vw!important}.clock-in-modal .modal-footer{padding:20px;flex-direction:column-reverse;width:100%;box-sizing:border-box}.clock-in-modal .modal-footer .btn-primary,.clock-in-modal .modal-footer .btn-secondary{width:100%;min-height:44px}}@media (max-width: 480px){.clock-in-modal{border-radius:0;max-height:100vh}.clock-in-modal .modal-body,.clock-in-modal .modal-footer{padding:16px}}.clock-in-photo-section{margin-bottom:24px}.photo-capture-area{width:100%;min-height:300px;border:2px dashed #d1d5db;border-radius:8px;display:flex;align-items:center;justify-content:center;background:#f9fafb;cursor:pointer;transition:all .2s}.photo-capture-area:hover{border-color:#8b5cf6;background:#f3f4f6}.photo-options{display:flex;flex-direction:column;align-items:center;gap:20px;padding:40px;width:100%}.photo-placeholder{text-align:center;padding:30px;width:100%;max-width:300px;border:2px dashed #d1d5db;border-radius:8px;background:#fff;cursor:pointer;transition:all .2s}.photo-placeholder:hover{border-color:#8b5cf6;background:#f9fafb;transform:translateY(-2px);box-shadow:0 4px 6px #0000001a}.camera-icon{font-size:48px;color:#9ca3af;margin-bottom:12px;transition:color .2s}.photo-placeholder:hover .camera-icon{color:#8b5cf6}.photo-placeholder p{color:#6b7280;font-size:14px;margin:0;font-weight:500;transition:color .2s}.photo-placeholder:hover p{color:#8b5cf6}.photo-divider{display:flex;align-items:center;width:100%;max-width:300px;margin:10px 0}.photo-divider:before,.photo-divider:after{content:"";flex:1;height:1px;background:#e5e7eb}.photo-divider span{padding:0 16px;color:#9ca3af;font-size:12px;font-weight:500;text-transform:uppercase}.camera-preview{position:relative;width:100%;height:100%;min-height:300px}.camera-video{width:100%;height:100%;object-fit:cover;border-radius:8px}.capture-btn{position:absolute;bottom:20px;left:50%;transform:translate(-50%);background:#8b5cf6;color:#fff;border:none;padding:12px 24px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:8px;box-shadow:0 4px 6px #0000001a;transition:all .2s}.capture-btn:hover{background:#7c3aed;transform:translate(-50%) translateY(-2px);box-shadow:0 6px 8px #00000026}.photo-preview-area{position:relative;width:100%;min-height:300px;border-radius:8px;overflow:hidden;border:2px solid #e5e7eb}.captured-photo{width:100%;height:auto;display:block;max-height:400px;object-fit:contain;background:#000}.retake-btn{position:absolute;top:12px;right:12px;background:#0009;color:#fff;border:none;padding:8px 16px;border-radius:6px;font-size:13px;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .2s}.retake-btn:hover{background:#000c}.auto-detected-location{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#ecfdf5;border:1px solid #10b981;border-radius:6px;margin-bottom:8px;font-size:13px;color:#065f46}.check-icon{color:#10b981;font-weight:700}.btn-redetect{margin-top:8px;background:#fff;border:1px solid #d1d5db;color:#374151;padding:8px 16px;border-radius:6px;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all .2s}.btn-redetect:hover{background:#f9fafb;border-color:#9ca3af}.btn-redetect:disabled{opacity:.6;cursor:not-allowed}.coordinates-info{padding:12px;background:#f9fafb;border-radius:6px;font-size:12px;color:#6b7280;font-family:Courier New,monospace;margin-top:8px}@media (max-width: 768px){.clock-in-modal{max-width:100vw!important;width:100vw!important}.photo-capture-area,.camera-preview{min-height:250px;width:100%;max-width:100%;box-sizing:border-box}.photo-options{padding:20px;gap:16px;width:100%;box-sizing:border-box}.photo-placeholder{padding:24px;max-width:100%;width:100%;box-sizing:border-box}.photo-divider{max-width:100%;width:100%;margin:8px 0}.capture-btn{bottom:12px;padding:10px 20px;font-size:13px;min-height:44px;touch-action:manipulation}.photo-preview-area{width:100%;max-width:100%;box-sizing:border-box}}@media (max-width: 480px){.photo-capture-area,.camera-preview{min-height:200px}.photo-options{padding:16px;gap:12px}.photo-placeholder{padding:20px}.camera-icon{font-size:40px}}.page-container{padding:30px;min-height:100vh;width:100%;max-width:100vw;box-sizing:border-box;overflow-x:hidden;position:relative;padding-top:max(30px,env(safe-area-inset-top));padding-bottom:max(30px,env(safe-area-inset-bottom));padding-left:max(30px,env(safe-area-inset-left));padding-right:max(30px,env(safe-area-inset-right))}.page-header{margin-bottom:20px;display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}.page-header h1{font-size:24px;margin-bottom:4px}.page-subtitle{font-size:14px}.page-header-content{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.page-header h1{font-size:32px;font-weight:700;color:#1e40af;margin-bottom:8px}.page-subtitle{color:#6b7280;font-size:16px}.page-content{display:flex;flex-direction:column;gap:16px}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-bottom:24px}.stat-card{background:#fff;border-radius:12px;padding:24px;box-shadow:0 1px 3px #0000001a;display:flex;align-items:center;gap:16px;transition:transform .2s,box-shadow .2s}.stat-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.stat-icon{font-size:40px;width:60px;height:60px;display:flex;align-items:center;justify-content:center;background:#eff6ff;border-radius:12px;color:#1e40af}.stat-icon svg{width:28px;height:28px}.stat-info h3{font-size:14px;color:#6b7280;font-weight:500;margin-bottom:4px}.stat-value{font-size:28px;font-weight:700;color:#1e40af}.content-section{background:#fff;border-radius:12px;padding:24px;box-shadow:0 1px 3px #0000001a}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-header h2{font-size:20px;font-weight:600;color:#1f2937}.btn-primary{background:#8b5cf6;color:#fff;border:none;padding:10px 20px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:background .2s;-webkit-tap-highlight-color:transparent;min-height:44px;touch-action:manipulation;white-space:nowrap}.btn-primary:hover{background:#7c3aed}.btn-primary:active{background:#7c3aed;transform:scale(.98)}.filters-container{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:24px;padding:20px;background:#f9fafb;border-radius:8px}.filter-group{display:flex;align-items:center;gap:12px}.filter-group label{font-size:14px;font-weight:500;color:#374151;white-space:nowrap}.form-input{padding:12px 16px;border:1px solid #d1d5db;border-radius:6px;font-size:16px;min-width:150px;width:100%;max-width:100%;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;touch-action:manipulation}.form-input:focus{outline:none;border-color:#1e40af;box-shadow:0 0 0 3px #1e40af1a}@media (max-width: 768px){.form-input{font-size:16px}}.table-wrapper-mobile{position:relative;width:100%}.scroll-hint{display:none;text-align:center;padding:8px;background:#f3f4f6;color:#6b7280;font-size:12px;font-weight:500;margin-bottom:8px;border-radius:6px;border:1px solid #e5e7eb}.table-container{overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;position:relative;width:100%;max-width:100%;scroll-behavior:smooth}.table-container::-webkit-scrollbar{height:8px}.table-container::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.table-container::-webkit-scrollbar-thumb{background:#8b5cf6;border-radius:4px}.table-container::-webkit-scrollbar-thumb:hover{background:#7c3aed}.data-table{width:100%;border-collapse:collapse;margin-top:16px}.data-table thead{background:#f9fafb}.data-table th{padding:12px 16px;text-align:left;font-size:14px;font-weight:600;color:#374151;border-bottom:2px solid #e5e7eb;white-space:nowrap}.data-table td{padding:12px 16px;font-size:14px;color:#6b7280;border-bottom:1px solid #e5e7eb;word-break:break-word}.data-table tbody tr:hover{background:#f9fafb}.empty-state{text-align:center;padding:40px!important;color:#9ca3af;font-style:italic}.search-bar{position:relative;margin-bottom:20px}.search-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:#9ca3af;width:18px;height:18px}.search-input{width:100%;padding:12px 16px 12px 44px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;transition:all .2s}.search-input:focus{outline:none;border-color:#8b5cf6;box-shadow:0 0 0 3px #8b5cf61a}.employee-photo{width:40px;height:40px;border-radius:50%;overflow:hidden;background:#f3f4f6;display:flex;align-items:center;justify-content:center;color:#9ca3af}.employee-photo svg{width:20px;height:20px}.status-badge{display:inline-block;padding:4px 12px;border-radius:12px;font-size:12px;font-weight:500}.status-active{background:#dbeafe;color:#1e40af}.status-on-leave{background:#fef3c7;color:#92400e}.status-inactive{background:#fee2e2;color:#991b1b}.action-buttons{display:flex;gap:8px}.action-btn{width:32px;height:32px;border-radius:6px;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;-webkit-tap-highlight-color:transparent}.action-btn svg{width:16px;height:16px}.action-edit{background:#eff6ff;color:#1e40af}.action-edit:hover{background:#dbeafe}.action-delete{background:#fef2f2;color:#dc2626}.action-delete:hover{background:#fee2e2}.text-mono{font-family:Courier New,monospace;font-size:12px;color:#6b7280}.date-range-section{margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid #e5e7eb}.date-range-text{color:#6b7280;font-size:14px;margin-bottom:16px}.date-inputs{display:flex;gap:16px;margin-bottom:16px;flex-wrap:wrap}.date-input-group{display:flex;flex-direction:column;gap:8px;flex:1;min-width:200px}.date-input-group label{font-size:14px;font-weight:500;color:#374151}.date-display{font-size:14px;color:#6b7280;font-weight:500}.date-actions{display:flex;gap:12px;margin-bottom:12px;flex-wrap:wrap}.btn-icon{display:flex;align-items:center;gap:8px;padding:10px 16px;background:#fff;border:1px solid #d1d5db;border-radius:8px;font-size:14px;font-weight:500;color:#374151;cursor:pointer;transition:all .2s;-webkit-tap-highlight-color:transparent}.btn-icon:hover{background:#f9fafb;border-color:#9ca3af}.btn-icon svg{width:16px;height:16px}.date-range-info{font-size:14px;color:#6b7280;margin:0}.table-section{margin-top:24px}.table-title{font-size:18px;font-weight:600;color:#1f2937;margin-bottom:4px}.table-subtitle{font-size:14px;color:#6b7280;margin-bottom:16px}.header-actions{display:flex;gap:12px;flex-wrap:wrap}.muster-filters{margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid #e5e7eb}.filter-row{display:flex;gap:12px;margin-top:12px;flex-wrap:wrap}.muster-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:20px}.summary-card{background:#f9fafb;padding:16px;border-radius:8px;border:1px solid #e5e7eb}.summary-card h4{font-size:14px;font-weight:500;color:#6b7280;margin:0 0 8px}.summary-value{font-size:24px;font-weight:700;color:#1f2937;margin:0}.legend{display:flex;gap:20px;margin-bottom:16px;flex-wrap:wrap}.legend-item{display:flex;align-items:center;gap:6px;font-size:14px;color:#374151}.legend-badge{display:inline-block;width:24px;height:24px;border-radius:4px;text-align:center;line-height:24px;font-size:12px;font-weight:600}.badge-p{background:#d1fae5;color:#065f46}.badge-a{background:#fee2e2;color:#991b1b}.badge-w{background:#fef3c7;color:#92400e}.badge-n{background:#f3f4f6;color:#6b7280}.muster-table{font-size:13px;min-width:100%;table-layout:auto;width:max-content}.muster-table th,.muster-table td{font-size:12px;padding:10px 8px;text-align:center;min-width:60px;white-space:nowrap}.muster-table th:first-child,.muster-table td:first-child{text-align:left}.muster-table th:nth-child(2),.muster-table td:nth-child(2),.muster-table th:nth-child(3),.muster-table td:nth-child(3),.muster-table th:nth-child(4),.muster-table td:nth-child(4){text-align:left;min-width:120px}.muster-table th:not(.sticky-col),.muster-table td:not(.sticky-col){min-width:50px;width:50px;max-width:50px}.muster-table .attendance-cell{min-width:50px;width:50px;max-width:50px;padding:6px 4px}.muster-table .sticky-col{position:sticky;background:#fff;z-index:10}.muster-table thead .sticky-col{background:#f9fafb;z-index:11}.muster-table .sticky-col:nth-child(1){left:0;min-width:50px;max-width:50px}.muster-table .sticky-col:nth-child(2){left:50px;min-width:150px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.muster-table .sticky-col:nth-child(3){left:200px;min-width:120px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.muster-table .sticky-col:nth-child(4){left:320px;min-width:100px;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.muster-table .sticky-col.total-col{position:sticky;right:0;left:auto;min-width:60px;max-width:60px;background:#fff;z-index:10}.muster-table thead .sticky-col.total-col{background:#f9fafb;z-index:11}.muster-table tbody tr:hover .sticky-col{background:#f9fafb}.muster-table .attendance-cell{padding:8px 6px;vertical-align:top}.muster-table .attendance-content{display:flex;flex-direction:column;gap:2px;align-items:center;line-height:1.3}.muster-table .attendance-status{font-weight:600;font-size:13px;color:#059669;text-align:center}.muster-table .attendance-step-in{font-size:11px;color:#059669;text-align:center;font-weight:500}.muster-table .attendance-step-out{font-size:11px;color:#dc2626;text-align:center;font-weight:500}.muster-table .attendance-empty{color:#9ca3af;font-size:14px}.btn-icon-active{background:#8b5cf6!important;color:#fff!important;border-color:#8b5cf6!important}.btn-icon-active:hover{background:#7c3aed!important}@media (max-width: 768px){.page-container{padding:16px}.page-header{margin-bottom:20px;flex-direction:column;align-items:flex-start;gap:16px}.page-header-content{flex-direction:column;align-items:flex-start}.page-header h1{font-size:24px;margin-bottom:6px}.page-subtitle{font-size:14px}.header-actions{width:100%;justify-content:flex-start;flex-wrap:wrap;gap:8px}.header-actions .btn-icon{flex:1;min-width:calc(33.333% - 6px);justify-content:center;padding:10px 12px;font-size:13px}.header-actions .btn-icon span{display:none}.header-actions .btn-icon svg{margin:0;width:18px;height:18px}.stats-grid{grid-template-columns:1fr;gap:16px;margin-bottom:20px}.stat-card{padding:14px;gap:12px;min-height:auto;flex-shrink:0;width:100%;box-sizing:border-box}.stat-icon{width:48px;height:48px;flex-shrink:0}.stat-icon svg{width:20px;height:20px}.stat-info{min-width:0;flex:1;overflow:hidden}.stat-info h3{font-size:12px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stat-value{font-size:20px;line-height:1.2;word-break:break-word}.content-section{padding:20px;border-radius:10px}.section-header{flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:16px}.section-header h2{font-size:18px}.btn-primary{width:100%;padding:12px 20px;font-size:15px}.filters-container{flex-direction:column;gap:16px;padding:16px}.filter-group{flex-direction:column;align-items:flex-start;width:100%;gap:8px}.filter-group label{font-size:13px}.form-input{width:100%;min-width:100%;padding:14px 16px}.scroll-hint{display:block}.table-wrapper-mobile{margin:0 -16px;padding:0 16px;width:calc(100% + 32px)}.table-container{-webkit-overflow-scrolling:touch;overflow-x:auto;overflow-y:visible;position:relative;max-width:100vw;scroll-padding:0;width:100%}.table-container:after{content:"";position:absolute;top:0;right:0;bottom:0;width:30px;background:linear-gradient(to right,transparent,rgba(139,92,246,.1));pointer-events:none;z-index:5}.data-table{min-width:600px;font-size:13px}.muster-table{min-width:800px;font-size:11px;table-layout:fixed;width:max-content}.muster-table th,.muster-table td{padding:8px 6px;font-size:11px}.muster-table .sticky-col{box-shadow:2px 0 4px #0000001a;position:sticky;background:#fff}.muster-table thead .sticky-col{box-shadow:2px 2px 4px #0000001a;background:#f9fafb}.muster-table tbody tr:hover .sticky-col{background:#f9fafb}.muster-table .sticky-col:nth-child(1){left:0;min-width:40px;max-width:40px;width:40px}.muster-table .sticky-col:nth-child(2){left:40px;min-width:100px;max-width:100px;width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.muster-table .sticky-col:nth-child(3){left:140px;min-width:80px;max-width:80px;width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.muster-table .sticky-col:nth-child(4){left:220px;min-width:70px;max-width:70px;width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.muster-table .sticky-col.total-col{position:sticky;right:0;left:auto;min-width:50px;max-width:50px;width:50px;background:#fff;box-shadow:-2px 0 4px #0000001a}.muster-table thead .sticky-col.total-col{background:#f9fafb;box-shadow:-2px 2px 4px #0000001a}.muster-table tbody tr:hover .sticky-col.total-col{background:#f9fafb}.muster-table .attendance-status{font-size:11px}.muster-table .attendance-step-in,.muster-table .attendance-step-out{font-size:9px}.filter-row{flex-direction:column;gap:12px}.filter-row .form-input{width:100%;min-width:100%}.muster-summary{grid-template-columns:1fr;gap:12px}.summary-card{padding:14px}.summary-value{font-size:20px}.legend{flex-direction:column;gap:12px}.legend-item{font-size:13px}.data-table th,.data-table td{padding:10px 12px;font-size:13px}.empty-state{padding:30px 20px!important;font-size:14px}}@media (max-width: 480px){.page-container{padding:20px 12px 12px}.page-header h1{font-size:20px}.page-subtitle{font-size:12px}.header-actions .btn-icon{min-width:calc(50% - 4px);padding:10px 8px}.stat-card{padding:16px;flex-direction:row}.stat-icon{width:50px;height:50px}.stat-icon svg{width:22px;height:22px}.stat-value{font-size:22px}.content-section{padding:12px}.muster-table{min-width:700px;font-size:10px;table-layout:fixed}.muster-table th,.muster-table td{padding:6px 4px;font-size:10px}.muster-table .sticky-col:nth-child(1){left:0;min-width:35px;max-width:35px;width:35px}.muster-table .sticky-col:nth-child(2){left:35px;min-width:90px;max-width:90px;width:90px}.muster-table .sticky-col:nth-child(3){left:125px;min-width:70px;max-width:70px;width:70px}.muster-table .sticky-col:nth-child(4){left:195px;min-width:60px;max-width:60px;width:60px}.muster-table .sticky-col.total-col{position:sticky;right:0;left:auto;min-width:45px;max-width:45px;width:45px;background:#fff;box-shadow:-2px 0 4px #0000001a}.muster-table thead .sticky-col.total-col{background:#f9fafb;box-shadow:-2px 2px 4px #0000001a}.muster-table .attendance-status{font-size:10px}.muster-table .attendance-step-in,.muster-table .attendance-step-out{font-size:8px}.summary-card{padding:12px}.summary-value{font-size:18px}.muster-filters{padding-bottom:16px;margin-bottom:16px}}.muster-mobile-cards{display:none;flex-direction:column;gap:16px}.muster-card-mobile{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px;box-shadow:0 1px 3px #0000001a}.muster-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #e5e7eb}.muster-card-info{flex:1;min-width:0}.muster-card-name{font-size:16px;font-weight:600;color:#1f2937;margin:0 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.muster-card-shift{font-size:13px;color:#6b7280;margin:0;text-transform:capitalize}.muster-card-summary{display:flex;flex-direction:column;gap:4px;align-items:flex-end;flex-shrink:0;margin-left:12px}.summary-item{font-size:13px;font-weight:600;padding:4px 8px;border-radius:6px;white-space:nowrap}.summary-present{background:#d1fae5;color:#065f46}.summary-absent{background:#fee2e2;color:#991b1b}.summary-weekoff{background:#fef3c7;color:#92400e}.muster-card-attendance{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.attendance-days-header{display:flex;gap:8px;margin-bottom:8px;min-width:max-content}.attendance-day-header{min-width:50px;width:50px;text-align:center;font-size:12px;font-weight:600;color:#6b7280;padding:4px}.attendance-days-content{display:flex;gap:8px;min-width:max-content}.attendance-day-cell{min-width:50px;width:50px;display:flex;flex-direction:column;align-items:center;padding:6px 4px}.attendance-day-content{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%}.attendance-day-status{width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600}.attendance-day-status.badge-p{background:#d1fae5;color:#065f46}.attendance-day-status.badge-a{background:#fee2e2;color:#991b1b}.attendance-day-status.badge-w{background:#fef3c7;color:#92400e}.attendance-day-time{font-size:10px;font-weight:500;text-align:center;line-height:1.2}.attendance-time-in{color:#059669}.attendance-time-out{color:#dc2626}.attendance-day-empty{color:#9ca3af;font-size:14px}@media (max-width: 480px){.muster-card-mobile{padding:12px}.muster-card-name{font-size:15px}.muster-card-shift{font-size:12px}.summary-item{font-size:12px;padding:3px 6px}.attendance-day-header,.attendance-day-cell{min-width:45px;width:45px}.attendance-day-status{width:24px;height:24px;font-size:11px}.attendance-day-time{font-size:9px}}.attendance-mobile-cards{display:none;flex-direction:column;gap:16px;width:100%;max-width:100%;box-sizing:border-box}@media screen and (max-width: 768px){.attendance-mobile-cards,.attendance-mobile-cards.mobile-only{display:flex!important;flex-direction:column!important;gap:16px!important;width:100%!important;max-width:100%!important;visibility:visible!important;opacity:1!important}}.attendance-card-mobile{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px;box-shadow:0 1px 3px #0000001a;transition:all .2s}.attendance-card-mobile.selected{background:#eff6ff;border-color:#1e40af}.attendance-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #e5e7eb}.attendance-card-employee{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.attendance-card-photo{width:48px;height:48px;border-radius:50%;object-fit:cover;flex-shrink:0}.attendance-card-info{flex:1;min-width:0}.attendance-card-name{font-size:16px;font-weight:600;color:#1f2937;margin:0 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.attendance-card-manager{font-size:12px;color:#6b7280;margin:0}.attendance-card-status{flex-shrink:0;margin-left:12px}.attendance-card-body{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}.attendance-card-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.attendance-card-label{font-size:13px;font-weight:500;color:#6b7280;display:flex;align-items:center;flex-shrink:0;min-width:100px}.attendance-card-value{font-size:13px;color:#1f2937;text-align:right;flex:1;word-break:break-word}.attendance-card-actions{display:flex;align-items:center;gap:8px;padding-top:12px;border-top:1px solid #e5e7eb}.attendance-card-btn{display:flex;align-items:center;gap:6px;padding:8px 12px;border:none;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s;flex:1;justify-content:center;-webkit-tap-highlight-color:transparent}.attendance-card-btn svg{width:14px;height:14px}.attendance-card-btn-edit{background:#eff6ff;color:#1e40af}.attendance-card-btn-edit:hover{background:#dbeafe}.attendance-card-btn-edit:active{transform:scale(.98)}.attendance-card-btn-delete{background:#fef2f2;color:#dc2626}.attendance-card-btn-delete:hover{background:#fee2e2}.attendance-card-btn-delete:active{transform:scale(.98)}@media screen and (max-width: 768px){.attendance-mobile-cards,.attendance-mobile-cards.mobile-only{display:flex!important;flex-direction:column!important;gap:16px!important;visibility:visible!important;opacity:1!important;width:100%!important;max-width:100%!important}.table-container.desktop-only{display:none!important;visibility:hidden!important}}@media (max-width: 480px){.attendance-card-mobile{padding:12px}.attendance-card-name{font-size:15px}.attendance-card-manager{font-size:11px}.attendance-card-label{font-size:12px;min-width:80px}.attendance-card-value{font-size:12px}.attendance-card-btn{padding:8px 10px;font-size:12px}.attendance-card-btn span{display:none}.attendance-card-btn svg{width:16px;height:16px}}.form-group{margin-bottom:20px}.form-label{display:block;font-size:14px;font-weight:500;color:#374151;margin-bottom:8px}.form-row-group{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}.input-with-icon{position:relative}.input-icon-left{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#9ca3af;width:16px;height:16px;pointer-events:none}.input-with-icon .form-input{padding-left:40px}@media (max-width: 768px){.form-row-group{grid-template-columns:1fr;gap:0}}.desktop-only{display:block}.mobile-only{display:none}@media (max-width: 768px){.desktop-only{display:none!important}.mobile-only{display:block!important}.muster-mobile-cards,.muster-mobile-cards.mobile-only,.attendance-mobile-cards,.attendance-mobile-cards.mobile-only,.mobile-cards-view,.mobile-cards-view.mobile-only{display:flex!important;visibility:visible!important;opacity:1!important}.table-container.desktop-only{display:none!important;visibility:hidden!important}.managers-grid{grid-template-columns:1fr!important;gap:16px!important}}@media (min-width: 769px) and (pointer: fine) and (hover: hover){.muster-mobile-cards,.muster-mobile-cards.mobile-only,.attendance-mobile-cards,.attendance-mobile-cards.mobile-only,.mobile-cards-view,.mobile-cards-view.mobile-only{display:none!important;visibility:hidden!important;opacity:0!important}.table-container.desktop-only{display:block!important;visibility:visible!important;opacity:1!important}.data-table{display:table!important;visibility:visible!important}}*{max-width:100%}img,video,iframe{max-width:100%;height:auto}body,html,#root,.app-container,.main-content{overflow-x:hidden!important;width:100%!important;max-width:100vw!important}.page-container,.content-section,.stats-grid,.filters-container{width:100%;max-width:100%;box-sizing:border-box}button,.btn-primary,.btn-secondary,.btn-icon,a.button,input[type=button],input[type=submit]{min-height:44px;min-width:44px;touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,0,0,.1)}.table-container{width:100%;max-width:100%;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;position:relative}.data-table,.muster-table{width:100%;table-layout:auto}form,.form-group,.form-row{width:100%;max-width:100%;box-sizing:border-box}.modal-content{max-width:95vw!important;width:95vw!important;margin:20px auto;box-sizing:border-box}@media (max-width: 768px){.modal-content{max-width:100vw!important;width:100vw!important;margin:0;border-radius:0;height:100vh;max-height:100vh;overflow-y:auto}}.search-bar,.search-input,.stat-card,.content-section,.summary-card,.stats-grid,.quick-actions-grid{width:100%;max-width:100%;box-sizing:border-box}@media (max-width: 375px){.page-container{padding:12px}.page-header h1{font-size:20px;word-wrap:break-word}.page-subtitle{font-size:12px}.btn-primary,.btn-secondary{font-size:13px;padding:10px 12px}.stat-card,.content-section{padding:12px}.form-input{font-size:16px;padding:10px 12px}}@media (max-width: 768px) and (orientation: landscape){.page-container{padding:12px}.page-header{margin-bottom:16px}.page-header h1{font-size:22px}}@media (max-width: 768px){body{font-size:14px;line-height:1.5}h1{font-size:24px}h2{font-size:20px}h3{font-size:18px}h4{font-size:16px}p,span,div{font-size:14px}}@supports (-webkit-touch-callout: none){body{-webkit-overflow-scrolling:touch}input,select,textarea{font-size:16px!important}}.main-content{-webkit-overflow-scrolling:touch;overflow-y:auto;overflow-x:hidden}@media (max-width: 768px){.sticky-col{position:sticky!important;z-index:10}.app-header{position:fixed!important;top:0;left:0;right:0;z-index:999}}.page-container,.content-section{min-height:auto}@media (max-width: 768px){.page-content{gap:16px}.content-section{margin-bottom:16px}}.site-grid,[style*=gridTemplateColumns]{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))!important;gap:16px!important;width:100%;max-width:100%;box-sizing:border-box}@media (max-width: 768px){.site-grid,[style*=gridTemplateColumns]{grid-template-columns:1fr!important;gap:12px!important}}.site-card,[style*="background: white"][style*=borderRadius]{width:100%!important;max-width:100%!important;box-sizing:border-box;padding:16px!important}@media (max-width: 480px){.site-card,[style*="background: white"][style*=borderRadius]{padding:12px!important}}.date-input-group,.date-inputs{width:100%;max-width:100%;box-sizing:border-box;display:flex;flex-wrap:wrap;gap:12px}.date-input-group input,.date-input-group select{flex:1;min-width:120px}@media (max-width: 768px){.date-input-group,.date-inputs{flex-direction:column}.date-input-group input,.date-input-group select{width:100%;min-width:100%}}.summary-cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;width:100%;max-width:100%}@media (max-width: 768px){.summary-cards-grid{grid-template-columns:1fr;gap:12px}}.tabs,.tab-list{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;display:flex;flex-wrap:nowrap;gap:8px}.tab-item,.tab-button{min-width:100px;white-space:nowrap;flex-shrink:0}.action-buttons{display:flex;flex-wrap:wrap;gap:8px;width:100%;max-width:100%}.app-header .header-actions{display:flex!important;flex-wrap:nowrap!important;width:auto!important;max-width:none!important;gap:4px!important}.app-header .header-actions button,.app-header .header-action-btn{flex:0 0 auto!important;min-width:24px!important;max-width:24px!important;width:24px!important}@media (max-width: 768px){.action-buttons button{flex:1;min-width:calc(50% - 4px)}.app-header .header-actions button,.app-header .header-action-btn{flex:0 0 auto!important;min-width:24px!important;max-width:24px!important;width:24px!important}}img,.employee-photo img,.logo-image{max-width:100%;height:auto;object-fit:contain}.pagination{width:100%;max-width:100%;display:flex;justify-content:center;flex-wrap:wrap;gap:8px}h1,h2,h3,h4,h5,h6,p,span,div{word-wrap:break-word;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}.status-badge,.badge{display:inline-block;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}select,.form-select{max-width:100%;width:100%;box-sizing:border-box}.legend,.legend-items{display:flex;flex-wrap:wrap;gap:12px;width:100%;max-width:100%}@media (max-width: 480px){.legend,.legend-items{flex-direction:column;gap:8px}}@supports (padding: max(0px)){.page-container{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));padding-top:max(16px,env(safe-area-inset-top));padding-bottom:max(16px,env(safe-area-inset-bottom))}}*{max-width:100vw}@media (max-width: 768px){.fixed,[style*="position: fixed"]{max-width:100vw;left:0;right:0}}@media (max-width: 768px),screen and (max-device-width: 768px),(pointer: coarse){.data-table,table.data-table{display:none!important;visibility:hidden!important;opacity:0!important;height:0!important;overflow:hidden!important}.mobile-cards-view,.muster-mobile-cards,.attendance-mobile-cards{display:flex!important;flex-direction:column!important;visibility:visible!important;opacity:1!important}}@media (min-width: 769px) and (pointer: fine){.mobile-cards-view,.muster-mobile-cards,.attendance-mobile-cards{display:none!important;visibility:hidden!important}.data-table{display:table!important;visibility:visible!important}}body.webview-mobile .muster-mobile-cards,body.webview-mobile .attendance-mobile-cards,body.webview-mobile .mobile-cards-view{display:flex!important;flex-direction:column!important;visibility:visible!important;opacity:1!important}body.webview-mobile .table-container.desktop-only,body.webview-mobile .desktop-only,body.webview-mobile table.data-table{display:none!important;visibility:hidden!important;opacity:0!important}.mobile-cards-view{display:flex;flex-direction:column;gap:12px;width:100%}.mobile-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px;box-shadow:0 1px 3px #0000001a;transition:all .2s}.mobile-card:active{transform:scale(.98);box-shadow:0 2px 6px #00000026}.card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid #f3f4f6}.card-title{font-size:16px;font-weight:600;color:#1f2937;margin:0 0 4px;word-wrap:break-word}.card-subtitle{font-size:13px;color:#6b7280;margin:0}.card-actions{display:flex;gap:8px;flex-shrink:0}.card-action-btn{background:transparent;border:1px solid #e5e7eb;border-radius:8px;padding:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;min-width:36px;min-height:36px;touch-action:manipulation}.card-action-btn:active{background:#f3f4f6;transform:scale(.95)}.card-action-btn.edit{color:#8b5cf6;border-color:#8b5cf6}.card-action-btn.delete{color:#dc2626;border-color:#dc2626}.card-action-btn svg{width:16px;height:16px}.card-body{display:flex;flex-direction:column;gap:12px}.card-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.card-label{font-size:12px;font-weight:500;color:#6b7280;text-transform:uppercase;letter-spacing:.5px;min-width:80px;flex-shrink:0}.card-value{font-size:14px;color:#1f2937;text-align:right;flex:1;word-wrap:break-word}.card-status{display:inline-block;padding:4px 12px;border-radius:12px;font-size:12px;font-weight:500;text-transform:capitalize}.employee-card-photo{width:60px;height:60px;border-radius:8px;object-fit:cover;margin-bottom:12px}.employee-card-header{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}.attendance-card-date{font-size:14px;font-weight:600;color:#1f2937;margin-bottom:8px}.attendance-card-times{display:flex;gap:16px;margin-top:8px}.attendance-time-item{display:flex;flex-direction:column;gap:4px}.attendance-time-label{font-size:11px;color:#6b7280;text-transform:uppercase}.attendance-time-value{font-size:13px;font-weight:500;color:#1f2937}.attendance-time-value.in{color:#059669}.attendance-time-value.out{color:#dc2626}.summary-card-mobile{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px;box-shadow:0 1px 3px #0000001a;margin-bottom:12px}.summary-card-date{font-size:16px;font-weight:600;color:#1f2937;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid #f3f4f6}.summary-card-shifts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:12px}.summary-shift-item{text-align:center;padding:12px;background:#f9fafb;border-radius:8px}.summary-shift-label{font-size:11px;color:#6b7280;text-transform:uppercase;margin-bottom:4px}.summary-shift-value{font-size:18px;font-weight:600;color:#1f2937}.summary-card-total{text-align:center;padding:12px;background:#8b5cf6;color:#fff;border-radius:8px;font-size:16px;font-weight:600}.mobile-cards-view .empty-state,.mobile-cards-view .loading-state{text-align:center;padding:40px 20px;color:#6b7280;font-size:14px}.greeting-card{background:linear-gradient(135deg,#ecfdf5,#d1fae5);border-radius:12px;padding:24px;margin-bottom:24px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 1px 3px #0000001a}.greeting-left{display:flex;align-items:center;gap:16px}.greeting-avatar{width:60px;height:60px;border-radius:50%;background:#10b981;color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;box-shadow:0 2px 8px #10b9814d}.greeting-text{display:flex;flex-direction:column;gap:4px}.greeting-title{display:flex;align-items:center;gap:8px;font-size:20px;font-weight:600;color:#065f46}.greeting-title svg{color:#fbbf24;width:20px;height:20px}.greeting-date{font-size:14px;color:#6b7280;font-weight:500}.greeting-time{text-align:right}.current-time{font-size:28px;font-weight:700;color:#065f46;font-variant-numeric:tabular-nums}.current-time-label{font-size:12px;color:#6b7280;margin-top:4px}.dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}.chart-section{min-height:300px}.section-title{font-size:18px;font-weight:600;color:#1f2937;margin-bottom:20px}.chart-container{display:flex;align-items:flex-end;gap:20px;height:220px;padding:20px;background:#f9fafb;border-radius:8px;position:relative;overflow:visible}.chart-bars{display:flex;align-items:flex-end;gap:40px;flex:1;height:100%}.chart-bar-group{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1;height:100%;justify-content:flex-end}.chart-bar{width:100%;height:100%;position:relative;display:block;min-height:20px}.chart-bar-fill{width:100%;border-radius:8px 8px 0 0;transition:height .3s ease;position:absolute;bottom:0;left:0;min-height:8px;display:block}.chart-bar-morning{background:linear-gradient(180deg,#14b8a6,#0d9488)}.chart-bar-evening{background:linear-gradient(180deg,#3b82f6,#2563eb)}.chart-bar-night{background:linear-gradient(180deg,#fbbf24,#f59e0b)}.chart-bar-value{position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:8px;font-size:14px;font-weight:600;color:#1f2937;white-space:nowrap;z-index:10}.chart-bar-label{font-size:13px;font-weight:500;color:#6b7280;text-align:center}.chart-y-axis{display:flex;flex-direction:column;justify-content:space-between;height:100%;padding-right:8px;border-right:1px solid #e5e7eb}.chart-y-label{font-size:11px;color:#9ca3af;text-align:right;font-weight:500}.quick-actions-section{min-height:300px}.quick-actions-grid{display:flex;flex-direction:column;gap:12px}.quick-action-card{background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:16px;display:flex;align-items:center;gap:16px;cursor:pointer;transition:all .2s;-webkit-tap-highlight-color:transparent}.quick-action-card:hover{border-color:#8b5cf6;box-shadow:0 2px 8px #8b5cf626;transform:translateY(-2px)}.quick-action-card:active{transform:translateY(0)}.quick-action-icon{width:48px;height:48px;border-radius:8px;background:#f3f4f6;display:flex;align-items:center;justify-content:center;color:#8b5cf6;flex-shrink:0}.quick-action-icon svg{width:24px;height:24px}.quick-action-content{flex:1}.quick-action-content h3{font-size:16px;font-weight:600;color:#1f2937;margin:0 0 4px}.quick-action-content p{font-size:13px;color:#6b7280;margin:0}@media (max-width: 768px){.page-container{padding:12px;padding-top:max(12px,env(safe-area-inset-top,12px));padding-bottom:max(12px,env(safe-area-inset-bottom,12px));padding-left:max(12px,env(safe-area-inset-left,12px));padding-right:max(12px,env(safe-area-inset-right,12px))}.greeting-card{flex-direction:column;align-items:flex-start;gap:16px;padding:16px;margin-bottom:16px}.greeting-time{text-align:left;width:100%;padding-top:16px;border-top:1px solid rgba(16,185,129,.2)}.current-time{font-size:22px;line-height:1.2}.current-time-label{font-size:11px;margin-top:2px}.greeting-avatar{width:50px;height:50px;font-size:20px}.greeting-title{font-size:18px}.dashboard-grid{grid-template-columns:1fr;gap:16px;margin-top:16px}.stats-grid{grid-template-columns:1fr;gap:12px;margin-bottom:16px}.stat-card{padding:14px;gap:12px;min-height:auto}.stat-icon{width:48px;height:48px;flex-shrink:0}.stat-icon svg{width:20px;height:20px}.stat-info{min-width:0;flex:1}.stat-info h3{font-size:12px;margin-bottom:2px}.stat-value{font-size:20px;line-height:1.2}.chart-container{height:200px;padding:16px;gap:16px}.chart-bars{gap:24px}.chart-bar-value{font-size:12px;top:-20px}.chart-bar-label{font-size:12px}.quick-action-card{padding:14px}.quick-action-icon{width:44px;height:44px}.quick-action-icon svg{width:20px;height:20px}.quick-action-content h3{font-size:15px}.quick-action-content p{font-size:12px}.section-header{flex-direction:column;align-items:flex-start;gap:12px}.section-actions{width:100%;display:flex;gap:8px}.section-actions .btn-secondary{flex:1;min-width:0;padding:10px 12px;font-size:13px;justify-content:center}.stats-grid{grid-template-columns:1fr;gap:12px}.stat-card{padding:16px}.stat-icon{width:50px;height:50px;font-size:24px}.stat-icon svg{width:24px;height:24px}.stat-value{font-size:24px}.content-section{padding:16px}.section-title{font-size:18px;margin-bottom:8px}.section-subtitle{font-size:13px}}.section-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px;flex-wrap:wrap;gap:16px}.section-subtitle{font-size:14px;color:#6b7280;margin-top:4px}.section-actions{display:flex;gap:10px;align-items:center}.btn-secondary{background:#fff;border:1px solid #e5e7eb;color:#374151;padding:8px 16px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;transition:all .2s}.btn-secondary:hover{background:#f9fafb;border-color:#d1d5db}.btn-secondary:disabled{opacity:.6;cursor:not-allowed}.spinning{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.employee-photo{width:40px;height:40px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#f3f4f6;flex-shrink:0}.employee-photo img{width:100%;height:100%;object-fit:cover}.employee-photo svg{width:20px;height:20px;color:#9ca3af}.btn-clock-out{background:#dc2626;color:#fff;border:none;padding:8px 16px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;transition:all .2s;min-height:36px}.btn-clock-out:hover{background:#b91c1c;transform:translateY(-1px);box-shadow:0 2px 4px #dc26264d}.btn-clock-out:active{transform:translateY(0)}.btn-clock-in{background:#10b981;color:#fff;border:none;padding:8px 16px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;transition:all .2s;min-height:36px}.btn-clock-in:hover{background:#059669;transform:translateY(-1px);box-shadow:0 2px 4px #10b9814d}.btn-clock-in:active{transform:translateY(0)}.table-container.desktop-only{display:block}.mobile-employee-cards.mobile-only{display:none;flex-direction:column;gap:16px}@media (max-width: 768px){.table-container.desktop-only{display:none!important}.mobile-employee-cards.mobile-only{display:flex!important}}.mobile-employee-cards{flex-direction:column;gap:16px}.employee-card-mobile{background:#f9fafb;border:1px solid #e5e7eb;border-radius:12px;padding:16px;transition:all .2s}.employee-card-mobile:active{transform:scale(.98)}.employee-card-header{display:flex;align-items:center;gap:12px;margin-bottom:12px}.employee-card-photo{width:56px;height:56px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#f3f4f6;flex-shrink:0}.employee-card-photo img{width:100%;height:100%;object-fit:cover}.employee-card-photo svg{width:28px;height:28px;color:#9ca3af}.employee-card-info{flex:1;min-width:0}.employee-card-name{font-size:16px;font-weight:600;color:#1f2937;margin:0 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.employee-card-email{font-size:13px;color:#6b7280;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.employee-card-details{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;padding-top:12px;border-top:1px solid #e5e7eb}.employee-detail-item{display:flex;justify-content:space-between;align-items:center}.detail-label{font-size:14px;color:#6b7280;font-weight:500}.detail-value{font-size:14px;color:#1f2937;font-weight:600}.btn-clock-out-mobile{width:100%;background:#dc2626;color:#fff;border:none;padding:14px 20px;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;min-height:48px;box-shadow:0 2px 4px #dc262633;-webkit-tap-highlight-color:transparent}.btn-clock-out-mobile:hover{background:#b91c1c;box-shadow:0 4px 8px #dc26264d}.btn-clock-out-mobile:active{background:#991b1b;transform:scale(.98);box-shadow:0 1px 2px #dc262633}.btn-clock-in-mobile{width:100%;background:#10b981;color:#fff;border:none;padding:14px 20px;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;min-height:48px;box-shadow:0 2px 4px #10b98133;-webkit-tap-highlight-color:transparent}.btn-clock-in-mobile:hover{background:#059669;box-shadow:0 4px 8px #10b9814d}.btn-clock-in-mobile:active{background:#047857;transform:scale(.98);box-shadow:0 1px 2px #10b98133}@media (max-width: 480px){.greeting-left{gap:12px}.chart-container{height:180px;padding:12px;gap:12px}.chart-bars{gap:16px}.chart-y-axis{display:none}.section-header{flex-direction:column}.section-actions{width:100%;flex-wrap:wrap}.btn-secondary{flex:1;min-width:120px;justify-content:center}.employee-card-mobile{padding:14px}.employee-card-photo{width:48px;height:48px}.employee-card-name{font-size:15px}.employee-card-email{font-size:12px}.btn-clock-out-mobile,.btn-clock-in-mobile{padding:12px 16px;font-size:15px;min-height:44px}.content-section,.employee-card-mobile{padding:12px}.greeting-card{padding:16px}}.pagination-container{display:flex;justify-content:space-between;align-items:center;margin-top:24px;padding-top:20px;border-top:1px solid #e5e7eb;flex-wrap:wrap;gap:16px}.pagination-info{display:flex;align-items:center;gap:16px;font-size:14px;color:#6b7280}.items-per-page{display:flex;align-items:center;gap:8px}.items-per-page label{font-size:14px;color:#6b7280}.items-select{padding:6px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;background:#fff;cursor:pointer;transition:all .2s}.items-select:focus{outline:none;border-color:#8b5cf6;box-shadow:0 0 0 3px #8b5cf61a}.pagination-controls{display:flex;gap:8px;align-items:center}.pagination-btn{min-width:40px;height:40px;padding:8px 12px;border:1px solid #d1d5db;background:#fff;color:#374151;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;-webkit-tap-highlight-color:transparent}.pagination-btn:hover:not(:disabled){background:#f9fafb;border-color:#9ca3af}.pagination-btn:active:not(:disabled){transform:scale(.95)}.pagination-btn:disabled{opacity:.5;cursor:not-allowed}.pagination-btn.active{background:#8b5cf6;color:#fff;border-color:#8b5cf6}.pagination-btn.active:hover{background:#7c3aed;border-color:#7c3aed}.pagination-btn svg{width:14px;height:14px}@media (max-width: 768px){.pagination-container{flex-direction:column;align-items:stretch}.pagination-info{justify-content:space-between;width:100%}.pagination-controls{justify-content:center;flex-wrap:wrap}.pagination-btn{min-width:36px;height:36px;font-size:13px}}.supervisor-form{display:flex;flex-direction:column;gap:24px}.form-section{display:flex;flex-direction:column;gap:16px}.form-row{display:flex;flex-direction:column;gap:8px}.form-label{font-size:14px;font-weight:500;color:#374151}.form-input{padding:12px 16px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;width:100%;box-sizing:border-box;transition:all .2s}.form-input:focus{outline:none;border-color:#8b5cf6;box-shadow:0 0 0 3px #8b5cf61a}.toggle-container{display:flex;align-items:center;gap:12px}.toggle-switch{position:relative;display:inline-block;width:48px;height:24px;flex-shrink:0}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#d1d5db;transition:.3s;border-radius:24px}.toggle-slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;transition:.3s;border-radius:50%}.toggle-switch input:checked+.toggle-slider{background-color:#8b5cf6}.toggle-switch input:checked+.toggle-slider:before{transform:translate(24px)}.toggle-label{font-size:14px;color:#374151;font-weight:500}.modal-actions{display:flex;gap:12px;justify-content:flex-end;padding-top:16px;border-top:1px solid #e5e7eb}.btn-secondary{background:#fff;color:#374151;border:1px solid #d1d5db;padding:12px 24px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;-webkit-tap-highlight-color:transparent}.btn-secondary:hover{background:#f9fafb;border-color:#9ca3af}.modal-actions .btn-primary{background:#8b5cf6;color:#fff;border:none;padding:12px 24px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;-webkit-tap-highlight-color:transparent}.modal-actions .btn-primary:hover{background:#7c3aed}@media (max-width: 768px){.supervisor-form{width:100%;max-width:100%;box-sizing:border-box}.form-input{font-size:16px!important;width:100%;max-width:100%;box-sizing:border-box}.modal-actions{flex-direction:column-reverse;width:100%;box-sizing:border-box}.modal-actions .btn-primary,.modal-actions .btn-secondary{width:100%;min-height:44px}}.alert-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:10001;padding:20px;animation:fadeIn .2s ease-out}.alert-modal-content{background:#fff;border-radius:12px;width:100%;max-width:400px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;animation:slideUp .3s ease-out;overflow:hidden}.alert-modal-body{padding:24px;display:flex;align-items:flex-start;gap:16px}.alert-icon{width:48px;height:48px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px}.alert-icon-success{background:#ecfdf5;color:#10b981}.alert-icon-error{background:#fef2f2;color:#ef4444}.alert-icon-warning{background:#fffbeb;color:#f59e0b}.alert-icon-info{background:#eff6ff;color:#3b82f6}.alert-modal-text{flex:1;min-width:0}.alert-modal-title{font-size:18px;font-weight:600;color:#1f2937;margin:0 0 8px}.alert-modal-message{font-size:14px;color:#6b7280;margin:0;line-height:1.5;word-wrap:break-word}.alert-modal-footer{padding:16px 24px;border-top:1px solid #e5e7eb;display:flex;justify-content:flex-end}.alert-modal-btn{min-width:80px;padding:10px 24px;font-weight:500}@media (max-width: 768px){.alert-modal-overlay{padding:0;align-items:flex-end;width:100vw;max-width:100vw}.alert-modal-content{max-width:100vw!important;width:100vw!important;border-radius:12px 12px 0 0;margin:0}.alert-modal-body{padding:20px;width:100%;box-sizing:border-box;max-width:100%;overflow-x:hidden}.alert-modal-footer{padding:16px 20px;width:100%;box-sizing:border-box}.alert-modal-footer .alert-modal-btn{width:100%;min-height:44px}}@media (max-width: 480px){.alert-modal-content{border-radius:0;max-height:100vh}.alert-modal-body{padding:16px}.alert-modal-footer{padding:12px 16px}.alert-icon{width:40px;height:40px;font-size:20px}.alert-modal-title{font-size:16px}.alert-modal-message{font-size:13px}}.confirm-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:10001;padding:20px;animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.confirm-modal-content{background:#fff;border-radius:12px;width:100%;max-width:400px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;animation:slideUp .3s ease-out;overflow:hidden}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.confirm-modal-body{padding:24px;display:flex;align-items:flex-start;gap:16px}.confirm-icon{width:48px;height:48px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px}.confirm-icon-warning{background:#fffbeb;color:#f59e0b}.confirm-icon-danger{background:#fef2f2;color:#ef4444}.confirm-modal-text{flex:1;min-width:0}.confirm-modal-title{font-size:18px;font-weight:600;color:#1f2937;margin:0 0 8px}.confirm-modal-message{font-size:14px;color:#6b7280;margin:0;line-height:1.5;word-wrap:break-word}.confirm-modal-footer{padding:16px 24px;border-top:1px solid #e5e7eb;display:flex;justify-content:flex-end;gap:12px}.confirm-modal-btn{min-width:100px;padding:10px 24px;font-weight:500}.confirm-btn-danger{background:#dc2626;color:#fff;border-color:#dc2626}.confirm-btn-danger:hover{background:#b91c1c;border-color:#b91c1c}@media (max-width: 768px){.confirm-modal-overlay{padding:0;align-items:flex-end;width:100vw;max-width:100vw}.confirm-modal-content{max-width:100vw!important;width:100vw!important;border-radius:12px 12px 0 0;margin:0}.confirm-modal-body{padding:20px;width:100%;box-sizing:border-box;max-width:100%;overflow-x:hidden}.confirm-modal-footer{padding:16px 20px;flex-direction:column-reverse;width:100%;box-sizing:border-box}.confirm-modal-footer .confirm-modal-btn{width:100%;min-height:44px}}@media (max-width: 480px){.confirm-modal-content{border-radius:0;max-height:100vh}.confirm-modal-body{padding:16px}.confirm-modal-footer{padding:12px 16px}.confirm-icon{width:40px;height:40px;font-size:20px}.confirm-modal-title{font-size:16px}.confirm-modal-message{font-size:13px}}.app-container{display:flex;width:100%;max-width:100vw;height:100vh;overflow:hidden;position:relative;box-sizing:border-box}.main-content{flex:1;margin-left:260px;transition:margin-left .3s ease;overflow-y:auto;overflow-x:hidden;background-color:#f5f5f5;position:relative;width:100%;max-width:100vw;box-sizing:border-box;-webkit-overflow-scrolling:touch}.main-content.sidebar-closed{margin-left:80px}.main-content.full-width{margin-left:0}.sidebar-overlay{position:fixed;top:60px;left:0;right:0;bottom:0;background:#00000080;z-index:998;display:none}@media (max-width: 768px){.app-container{width:100%;max-width:100vw;overflow-x:hidden}.main-content{margin-left:0!important;padding-top:calc(60px + env(safe-area-inset-top,0));width:100%;max-width:100vw;overflow-x:hidden;padding-bottom:env(safe-area-inset-bottom,0)}.sidebar-overlay{display:block;top:60px;width:100vw;max-width:100vw}body.sidebar-open-mobile{overflow:hidden;position:fixed;width:100%;height:100%}}@media (max-width: 375px){.app-container,.main-content{width:100vw;max-width:100vw}}*{margin:0;padding:0;box-sizing:border-box}html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f5f5f5;overflow-x:hidden;overscroll-behavior-y:contain}#root{width:100%;height:100vh;position:relative;overflow-x:hidden}@media (max-width: 768px){body{-webkit-tap-highlight-color:rgba(0,0,0,.1)}*{-webkit-overflow-scrolling:touch}button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}}html{overflow-x:hidden;width:100%;position:relative}body{overflow-x:hidden;width:100%;position:relative;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{overflow-x:hidden;width:100%;max-width:100vw;position:relative}*{touch-action:manipulation}input,select,textarea{font-size:16px!important}@media (max-width: 768px){input,select,textarea{font-size:16px!important}}@media screen and (max-width: 768px){html{width:100%!important;max-width:100vw!important;overflow-x:hidden!important}body{width:100%!important;max-width:100vw!important;overflow-x:hidden!important;position:relative!important}#root{width:100%!important;max-width:100vw!important;overflow-x:hidden!important}.app-container,.main-content,.page-container{width:100%!important;max-width:100vw!important;overflow-x:hidden!important;box-sizing:border-box!important}img{max-width:100%!important;height:auto!important}*{max-width:100vw!important;box-sizing:border-box!important}table{width:100%!important;max-width:100%!important}}html,body{width:100%!important;max-width:100vw!important;overflow-x:hidden!important;position:relative!important;-webkit-text-size-adjust:100%!important;margin:0!important;padding:0!important}#root{width:100%!important;max-width:100vw!important;overflow-x:hidden!important;position:relative!important}.muster-mobile-cards,.muster-mobile-cards.mobile-only,.attendance-mobile-cards,.attendance-mobile-cards.mobile-only,.mobile-cards-view,.mobile-cards-view.mobile-only{display:flex!important;flex-direction:column!important;visibility:visible!important;opacity:1!important;width:100%!important;max-width:100%!important;gap:16px!important}.table-container.desktop-only,.desktop-only,table.data-table{display:none!important;visibility:hidden!important;opacity:0!important;height:0!important;overflow:hidden!important}@media (min-width: 769px) and (pointer: fine) and (hover: hover){.table-container.desktop-only,.desktop-only{display:block!important;visibility:visible!important;opacity:1!important;height:auto!important;overflow:visible!important}table.data-table{display:table!important;visibility:visible!important;opacity:1!important;height:auto!important}.muster-mobile-cards,.muster-mobile-cards.mobile-only,.attendance-mobile-cards,.attendance-mobile-cards.mobile-only,.mobile-cards-view,.mobile-cards-view.mobile-only{display:none!important;visibility:hidden!important;opacity:0!important}}@media screen and (max-width: 768px){html,body{width:100%!important;max-width:100vw!important;overflow-x:hidden!important;position:relative!important}#root{width:100%!important;max-width:100vw!important;overflow-x:hidden!important}.app-container,.main-content,.page-container{width:100%!important;max-width:100vw!important;overflow-x:hidden!important;box-sizing:border-box!important}.page-container{padding:12px!important;padding-top:max(12px,env(safe-area-inset-top,12px))!important;padding-bottom:max(12px,env(safe-area-inset-bottom,12px))!important;padding-left:max(12px,env(safe-area-inset-left,12px))!important;padding-right:max(12px,env(safe-area-inset-right,12px))!important}.stat-card{width:100%!important;max-width:100%!important;padding:14px!important;box-sizing:border-box!important;flex-shrink:0!important;margin:0!important}.stats-grid{width:100%!important;max-width:100%!important;grid-template-columns:1fr!important;gap:12px!important;box-sizing:border-box!important}*{max-width:100vw!important}img{max-width:100%!important;height:auto!important}.table-container{width:100%!important;max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}.card,.mobile-card,.stat-card,.content-section,form,.form-group,input,select,textarea{width:100%!important;max-width:100%!important;box-sizing:border-box!important}button,.btn-primary,.btn-secondary{min-width:44px!important;min-height:44px!important;box-sizing:border-box!important}.header-logo-image{height:32px!important;max-width:60px!important;max-height:32px!important;width:auto!important;object-fit:contain!important}.header-actions{display:flex!important;visibility:visible!important;opacity:1!important;gap:4px!important;padding-right:0!important;margin-right:0!important;margin-left:auto!important;justify-content:flex-end!important;overflow:visible!important}.header-action-btn{display:flex!important;visibility:visible!important;opacity:1!important;width:24px!important;height:24px!important;min-width:24px!important;max-width:24px!important;min-height:24px!important;max-height:24px!important;padding:0!important}.header-action-btn svg{width:10px!important;height:10px!important}.header-content{padding-right:8px!important;overflow:visible!important}.mobile-only,.attendance-mobile-cards,.attendance-mobile-cards.mobile-only,.mobile-cards-view,.mobile-cards-view.mobile-only,.muster-mobile-cards,.muster-mobile-cards.mobile-only{display:flex!important;flex-direction:column!important;visibility:visible!important;opacity:1!important;width:100%!important;max-width:100%!important;gap:16px!important}.table-container.desktop-only,.desktop-only,.data-table{display:none!important;visibility:hidden!important;opacity:0!important}}@media screen and (max-width: 768px),screen and (max-device-width: 768px),(pointer: coarse){.muster-mobile-cards,.muster-mobile-cards.mobile-only,.attendance-mobile-cards,.attendance-mobile-cards.mobile-only,.mobile-cards-view,.mobile-cards-view.mobile-only{display:flex!important;flex-direction:column!important;visibility:visible!important;opacity:1!important;width:100%!important;max-width:100%!important;gap:16px!important}.table-container.desktop-only,.desktop-only{display:none!important;visibility:hidden!important;opacity:0!important}.attendance-card-mobile{display:block!important;visibility:visible!important;opacity:1!important}}@media screen and (max-width: 375px){.page-container{padding:10px!important;padding-top:max(10px,env(safe-area-inset-top,10px))!important;padding-bottom:max(10px,env(safe-area-inset-bottom,10px))!important}.stat-card{padding:12px!important}}