*{box-sizing:border-box;margin:0;padding:0}html,body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:#f5f5f5;color:#333;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html{height:-webkit-fill-available}body{min-height:100vh;min-height:-webkit-fill-available}#root{min-height:100vh}*{-webkit-tap-highlight-color:transparent}html{scroll-behavior:smooth}body{-webkit-overflow-scrolling:touch}.login-container{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1a237e,#0d47a1,#01579b);padding:20px}.login-card{background:#fff;border-radius:16px;padding:32px;width:100%;max-width:400px;box-shadow:0 10px 40px #0000004d}.login-header{text-align:center;margin-bottom:32px}.brand-logo{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:16px}.brand-icon{font-size:32px;background:linear-gradient(135deg,#1a237e,#0d47a1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.brand-name{font-size:32px;font-weight:800;background:linear-gradient(135deg,#1a237e,#0d47a1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:2px}.login-header h1{color:#333;font-size:22px;margin:0 0 8px;font-weight:600}.login-header p{color:#666;margin:0;font-size:14px}.login-form{display:flex;flex-direction:column;gap:20px}.form-group{display:flex;flex-direction:column;gap:6px}.form-group label{font-size:14px;font-weight:500;color:#333}.form-group input[type=text],.form-group input[type=password]{padding:14px 16px;border:1px solid #ddd;border-radius:10px;font-size:16px;transition:border-color .2s,box-shadow .2s}.form-group input:focus{outline:none;border-color:#1a237e;box-shadow:0 0 0 3px #1a237e1a}.password-input-wrapper{position:relative;display:flex;align-items:center}.password-input-wrapper input{width:100%;padding-right:48px}.password-toggle{position:absolute;right:12px;background:none;border:none;cursor:pointer;font-size:18px;padding:4px;display:flex;align-items:center;justify-content:center;opacity:.7;transition:opacity .2s}.password-toggle:hover{opacity:1}.input-hint{font-size:12px;color:#888;margin-top:2px}.form-group-checkbox{display:flex;align-items:center}.checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:14px;color:#555;-webkit-user-select:none;user-select:none}.checkbox-label input[type=checkbox]{width:18px;height:18px;accent-color:#1a237e;cursor:pointer}.login-button{background:linear-gradient(135deg,#1a237e,#0d47a1);color:#fff;border:none;padding:16px;border-radius:10px;font-size:16px;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s;margin-top:8px}.login-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #1a237e66}.login-button:disabled{opacity:.7;cursor:not-allowed}.error-message{background:#fee2e2;color:#dc2626;padding:12px 16px;border-radius:8px;font-size:14px;text-align:center}.login-footer{text-align:center;margin-top:24px;padding-top:20px;border-top:1px solid #eee}.login-footer p{margin:0;font-size:12px;color:#888}.login-footer strong{color:#1a237e;font-weight:700;letter-spacing:1px}.dashboard-container{min-height:100vh;background:#f5f5f5;position:relative;overflow-x:hidden}.pull-refresh-indicator{position:fixed;top:0;left:0;right:0;height:80px;background:#fff;border-bottom:1px solid #e0e0e0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;z-index:999;transition:transform .1s ease-out;box-shadow:0 2px 4px #0000001a}.refresh-icon{font-size:28px;transition:transform .3s ease}.refresh-icon.spinning{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.refresh-text{font-size:13px;color:#666;font-weight:500}.dashboard-header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:20px;padding-top:max(20px,env(safe-area-inset-top))}.header-content{display:flex;justify-content:space-between;align-items:center;gap:16px}.header-content h1{margin:0;font-size:24px;flex:1}.notification-panel-header{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;border-bottom:1px solid #f0f0f0;background:#fff}.notification-item{padding:12px 20px;border-bottom:1px solid #f9f9f9;display:flex;align-items:center;gap:12px;cursor:pointer;transition:background .2s ease}.notification-empty{padding:30px 20px;text-align:center;color:#999;font-size:14px}.logout-btn{background:#fff3;border:none;color:#fff;padding:8px 16px;border-radius:20px;font-size:14px;cursor:pointer;flex-shrink:0;transition:all .3s ease}.logout-btn:hover{background:#ffffff4d}.logout-btn:active{transform:scale(.95)}.welcome-text{margin:8px 0 0;opacity:.9;font-size:14px}.dashboard-main{padding:20px 20px 80px}.total-card{background:#fff;border-radius:16px;padding:24px;text-align:center;box-shadow:0 2px 8px #0000001a;cursor:pointer;transition:transform .2s}.total-card:active{transform:scale(.98)}.total-count{font-size:48px;font-weight:700;color:#667eea}.total-label{font-size:16px;color:#666;margin-top:4px}.view-all{font-size:14px;color:#667eea;margin-top:12px}.section-title{font-size:18px;color:#333;margin:24px 0 16px}.type-grid{display:flex;flex-direction:column;gap:12px}.type-card{background:#fff;border-radius:12px;padding:16px;display:flex;align-items:center;gap:12px;box-shadow:0 2px 4px #0000000d;border-left:4px solid;cursor:pointer;transition:transform .2s}.type-card:active{transform:scale(.98)}.type-icon{font-size:24px}.type-info{flex:1}.type-label{font-size:16px;font-weight:500;color:#333}.type-count{font-size:14px;font-weight:600;margin-top:2px}.type-arrow{color:#999;font-size:18px}.refresh-fab{position:fixed;bottom:24px;right:24px;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);border:none;font-size:24px;cursor:pointer;box-shadow:0 4px 12px #667eea66;display:flex;align-items:center;justify-content:center}.list-container{min-height:100vh;background:#f5f5f5}.list-header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:16px 20px;padding-top:max(16px,env(safe-area-inset-top));display:flex;align-items:center;gap:12px}.list-header h1{flex:1;margin:0;font-size:20px;font-weight:600}.header-actions{display:flex;align-items:center;gap:12px}.notification-btn{background:#fff3;border:none;color:#fff;width:40px;height:40px;border-radius:50%;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative;transition:all .3s ease;flex-shrink:0}.notification-btn:hover{background:#ffffff4d;transform:scale(1.05)}.bell-icon{display:block;font-size:24px}.notification-badge{position:absolute;top:-6px;right:-6px;background:#ff3b30;color:#fff;border:2px solid white;border-radius:50%;min-width:26px;height:26px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;box-shadow:0 2px 6px #0003;animation:badgeBounce .5s ease}.notification-btn:hover{background:#ffffff59;border-color:#fff9;transform:scale(1.05)}.notification-btn:active{transform:scale(.95)}.bell-icon{display:block}.notification-btn.has-notification{animation:pulse 2s infinite}.notification-btn.has-notification .bell-icon{animation:bellRing .6s ease-in-out infinite}@keyframes bellRing{0%,to{transform:rotate(0)}15%{transform:rotate(-15deg)}30%{transform:rotate(15deg)}45%{transform:rotate(-15deg)}60%{transform:rotate(15deg)}75%{transform:rotate(-5deg)}}@keyframes pulse{0%{box-shadow:0 0 #ffffffb3}70%{box-shadow:0 0 0 15px #fff0}to{box-shadow:0 0 #fff0}}.notification-badge{position:absolute;top:-12px;right:-12px;background:#ff4081;color:#fff;border:3px solid white;border-radius:50%;min-width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;box-shadow:0 2px 8px #0000004d;animation:badgeBounce .5s ease}@keyframes badgeBounce{0%{transform:scale(0) translateY(-15px);opacity:0}50%{transform:scale(1.3)}to{transform:scale(1) translateY(0);opacity:1}}.notification-panel{background:#fff;border-bottom:1px solid #f0f0f0;max-height:400px;overflow-y:auto;animation:slideDown .3s ease}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.notification-panel-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid #f0f0f0}.notification-panel-header h3{margin:0;font-size:16px;font-weight:600;color:#333}.close-btn{background:none;border:none;font-size:20px;color:#999;cursor:pointer;padding:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center}.close-btn:hover{color:#333}.notification-list{padding:0}.notification-item{padding:12px 16px;border-bottom:1px solid #f9f9f9;display:flex;align-items:center;gap:12px;cursor:pointer;transition:background .2s ease}.notification-item:hover{background:#f9f9f9}.notif-content{flex:1}.notif-message{font-size:14px;font-weight:500;color:#333;margin-bottom:4px}.notif-time{font-size:12px;color:#999}.notification-empty{padding:30px 16px;text-align:center;color:#999;font-size:14px}.header-spacer{width:36px}.filter-tabs{display:flex;gap:8px;padding:12px 16px;background:#fff;overflow-x:auto;border-bottom:1px solid #f0f0f0}.filter-tabs::-webkit-scrollbar{height:4px}.filter-tabs::-webkit-scrollbar-track{background:transparent}.filter-tabs::-webkit-scrollbar-thumb{background:#ddd;border-radius:2px}.filter-tab{padding:8px 16px;border:none;background:none;color:#666;font-size:14px;font-weight:500;cursor:pointer;white-space:nowrap;position:relative;border-bottom:3px solid transparent;transition:all .2s ease;display:flex;flex-direction:column;align-items:center;gap:4px}.filter-tab:first-child{color:#333}.tab-count{font-size:12px;font-weight:700;color:#667eea}.filter-tab:first-child .tab-count{color:#667eea}.tab-label{font-size:13px}.filter-tab.active{color:#333;font-weight:600}.filter-tab.active:first-child{border-bottom-color:#667eea}.filter-tab.active .tab-count{font-weight:700}.list-main{padding:16px}.loading{text-align:center;padding:40px;color:#666}.error-container{text-align:center;padding:40px}.error-container p{color:#dc2626;margin-bottom:16px}.empty-state{text-align:center;padding:60px 20px}.empty-icon{width:80px;height:80px;background:#e8f5e9;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:40px;margin:0 auto 16px;color:#4caf50}.empty-state p{color:#666;font-size:16px}.list-count{color:#666;font-size:14px;margin-bottom:12px}.approval-list{display:flex;flex-direction:column;gap:12px}.approval-item{background:#fff;border-radius:12px;padding:14px 16px;box-shadow:0 2px 8px #0000000f;cursor:pointer;transition:transform .2s,box-shadow .2s;border-left:4px solid transparent}.approval-item:active{transform:scale(.98)}.approval-item:hover{box-shadow:0 4px 12px #0000001a}.item-top-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}.item-type-badge{font-size:11px;font-weight:700;color:#fff;padding:4px 10px;border-radius:4px;text-transform:uppercase;letter-spacing:.5px}.item-stage{font-size:12px;color:#667eea;background:#f0f4ff;padding:4px 10px;border-radius:4px;font-weight:500}.item-main{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}.item-reference{font-size:15px;font-weight:600;color:#1a1a1a;flex:1;line-height:1.3}.item-id{font-size:13px;font-weight:600;color:#667eea;background:#f0f4ff;padding:2px 8px;border-radius:4px;margin-left:10px;white-space:nowrap}.item-info-section{padding-top:12px;border-top:1px solid #eee;display:flex;flex-direction:column;gap:10px}.info-site{font-size:13px;color:#333;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.info-transfer{display:flex;flex-direction:column;gap:6px}.transfer-row{display:flex;align-items:center;gap:8px}.transfer-label{font-size:11px;color:#999;min-width:50px;text-transform:uppercase;font-weight:500}.transfer-value{font-size:13px;color:#333;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.info-bottom{display:flex;justify-content:space-between;align-items:flex-end}.info-raised{display:flex;flex-direction:column;gap:2px}.info-label{font-size:11px;color:#999;text-transform:uppercase;letter-spacing:.5px;font-weight:500}.info-value{font-size:13px;color:#555;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}.info-date{font-size:12px;color:#888;white-space:nowrap}.pagination{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:20px;padding:16px}.pagination button{background:#667eea;color:#fff;border:none;padding:10px 20px;border-radius:8px;cursor:pointer}.pagination button:disabled{background:#ccc;cursor:not-allowed}.pagination span{color:#666;font-size:14px}.item-actions{display:flex;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid #eee}.action-btn{flex:1;padding:6px 10px;border:none;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s}.approve-btn{background:#e8f5e9;color:#2e7d32}.approve-btn:active{background:#c8e6c9}.reject-btn{background:#ffebee;color:#c62828}.reject-btn:active{background:#ffcdd2}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.modal-content{background:#fff;border-radius:16px;padding:24px;width:100%;max-width:400px;box-shadow:0 10px 40px #0003}.modal-title{margin:0 0 16px;font-size:20px;font-weight:600;color:#333;text-align:center}.modal-item-info{display:flex;justify-content:space-between;align-items:center;background:#f5f5f5;padding:12px;border-radius:8px;margin-bottom:16px}.modal-item-details{display:flex;flex-direction:column;gap:4px;flex:1;overflow:hidden}.modal-ref{font-size:13px;color:#333;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.modal-id{font-size:12px;color:#667eea;font-weight:600}.modal-type{font-size:11px;font-weight:700;color:#fff;background:#667eea;padding:4px 8px;border-radius:4px;margin-left:8px}.modal-remarks{margin-bottom:20px}.modal-remarks label{display:block;font-size:13px;color:#666;margin-bottom:8px;font-weight:500}.modal-remarks label .required{color:#f44336;font-weight:600}.modal-remarks textarea{width:100%;padding:12px;border:1px solid #ddd;border-radius:8px;font-size:14px;resize:none;font-family:inherit}.modal-remarks textarea:focus{outline:none;border-color:#667eea}.modal-actions{display:flex;gap:12px}.modal-btn{flex:1;padding:12px;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s}.modal-btn:disabled{opacity:.6;cursor:not-allowed}.cancel-btn{background:#f0f0f0;color:#666}.confirm-btn.verify,.confirm-btn.approve{background:#4caf50;color:#fff}.confirm-btn.reject{background:#f44336;color:#fff}.confirm-btn.verify:active,.confirm-btn.approve:active{background:#388e3c}.confirm-btn.reject:active{background:#d32f2f}.detail-container{min-height:100vh;background:#f5f5f5}.success-message{position:fixed;top:60px;left:50%;transform:translate(-50%);background:#4caf50;color:#fff;padding:12px 24px;border-radius:8px;font-size:15px;font-weight:600;z-index:1000;animation:slideDown .3s ease-out,slideUp .3s ease-in 1.7s;box-shadow:0 2px 8px #0003}.success-message.reject{background:#f44336}.success-message.verify,.success-message.approve{background:#4caf50}@keyframes slideDown{0%{opacity:0;transform:translate(-50%) translateY(-20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes slideUp{0%{opacity:1;transform:translate(-50%) translateY(0)}to{opacity:0;transform:translate(-50%) translateY(-20px)}}.detail-header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:16px 20px;padding-top:max(16px,env(safe-area-inset-top));display:flex;align-items:center;gap:12px}.back-btn{background:#fff3;border:none;color:#fff;width:36px;height:36px;border-radius:50%;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center}.back-btn .detail-header-right{display:flex;align-items:center;gap:10px}.detail-header h1{flex:1;margin:0;font-size:20px;font-weight:600}.detail-main{padding:16px}.loading{text-align:center;margin-bottom:16px}.loading .detail-id-pill{font-size:12px;font-weight:700;color:#667eea;background:#f0f4ff;padding:4px 8px;border-radius:4px}.error-container button{background:#667eea;color:#fff;border:none;padding:10px 24px;border-radius:8px;cursor:pointer}.detail-card{background:#fff;border-radius:16px;padding:20px;box-shadow:0 2px 8px #0000001a}.detail-type-badge{display:inline-block;font-size:14px;font-weight:600;color:#fff;padding:6px 14px;border-radius:20px;margin-bottom:16px}.detail-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid #f0f0f0}.detail-row:last-child{border-bottom:none}.detail-label{color:#666;font-size:14px}.detail-value{font-weight:500;text-align:right;max-width:60%;word-break:break-word}.detail-value.id-value{color:#667eea;font-weight:600}.detail-value.stage,.stage-badge{color:#667eea;background:#f0f4ff;padding:4px 10px;border-radius:12px}.items-section{margin-top:20px;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 2px 8px #0000001a}.items-header{width:100%;background:#f8f9fa;border:none;padding:16px 20px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:background .2s}.items-header:active{background:#f0f0f0}.items-title{margin:0;font-size:16px;color:#333;font-weight:600;text-align:left}.items-toggle{font-size:24px;color:#667eea;font-weight:600;width:28px;height:28px;display:flex;align-items:center;justify-content:center}.items-list{display:flex;flex-direction:column;gap:8px;padding:12px 16px 16px}.item-card{background:#f8f9fa;border-radius:8px;padding:10px 12px;border-left:3px solid #667eea}.item-name{font-size:13px;font-weight:600;color:#333;margin-bottom:8px;line-height:1.3}.item-details-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px 8px}.item-detail{display:flex;flex-direction:column;gap:1px}.item-detail-label{font-size:10px;color:#888;text-transform:uppercase;font-weight:500}.item-detail-value{font-size:12px;color:#333;font-weight:500}.item-detail-value.qty{color:#667eea;font-weight:700}.item-remarks{margin-top:8px;padding-top:8px;border-top:1px solid #e0e0e0;font-size:11px;color:#666;line-height:1.3}.action-section{margin-top:20px;background:#fff;border-radius:16px;padding:20px;box-shadow:0 2px 8px #0000001a}.action-section h3{margin:0 0 16px;font-size:18px;color:#333}.error-message{background:#fee2e2;color:#dc2626;padding:12px;border-radius:8px;font-size:14px;margin-bottom:16px}.remarks-group{margin-bottom:16px}.remarks-group label{display:block;font-size:14px;color:#666;margin-bottom:8px}.remarks-group textarea{width:100%;padding:12px;border:1px solid #ddd;border-radius:10px;font-size:14px;resize:vertical;font-family:inherit;box-sizing:border-box}.remarks-group textarea:focus{outline:none;border-color:#667eea}.action-info{margin-bottom:16px}.info-text{font-size:13px;color:#666;margin:0;padding:10px;background:#f5f5f5;border-radius:8px}.action-buttons{display:flex;gap:12px}.action-btn{flex:1;padding:14px;border:none;border-radius:10px;font-size:16px;font-weight:600;cursor:pointer;transition:transform .2s}.action-btn:active:not(:disabled){transform:scale(.98)}.action-btn:disabled{opacity:.6;cursor:not-allowed}.action-btn.verify{background:#4caf50;color:#fff}.action-btn.approve{background:#2196f3;color:#fff}.action-btn.reject{background:#f44336;color:#fff}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;padding:20px;z-index:1000}.modal-content{background:#fff;border-radius:16px;padding:24px;width:100%;max-width:360px}.modal-content h3{margin:0 0 12px;font-size:20px}.modal-content p{color:#666;margin:0 0 16px}.modal-remarks{background:#f5f5f5;padding:10px;border-radius:8px;font-style:italic;font-size:14px}.modal-buttons{display:flex;gap:12px;margin-top:20px}.modal-btn{flex:1;padding:12px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer}.modal-btn.cancel{background:#e0e0e0;color:#333}.modal-btn.confirm.verify{background:#4caf50;color:#fff}.modal-btn.confirm.approve{background:#2196f3;color:#fff}.modal-btn.confirm.reject{background:#f44336;color:#fff}.loading-overlay{position:fixed;inset:0;background:#ffffffe6;display:flex;align-items:center;justify-content:center;z-index:2000}.loading-spinner{font-size:18px;color:#667eea;font-weight:600}.detail-footer{margin-top:24px;padding:16px 20px;background:#fff;border-top:1px solid #e0e0e0}.back-btn-footer{width:100%;padding:12px 16px;background:#f5f5f5;border:1px solid #e0e0e0;border-radius:8px;font-size:15px;font-weight:600;color:#333;cursor:pointer;transition:all .2s}.back-btn-footer:active{background:#eee;transform:scale(.98)}