*{margin:0;padding:0;font-family:Inter,sans-serif}.container-app{width:100%;height:100vh;display:flex;font-family:Inter,sans-serif}.left-bar{width:15%;transition:transform .4s ease,opacity .4s ease;transform:translate(0)}.main-bar{flex:1;width:100%;background-color:transparent;padding:16px}.whats-happening-card{width:100%;height:100%;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:14px 22px;background-color:#fff;border-radius:12px;box-sizing:border-box;gap:16px}.whats-happening-card h2{font-size:24px;font-weight:500;color:#000}.today-event img{width:80px;height:80px;border-radius:50%;object-fit:contain}.employee-update-card{width:100%;height:100%;background-color:#fff;border-radius:12px;padding:8px 12px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:flex-start;gap:10px}.employee-update-card h2{font-size:18px;font-weight:500;color:#000;margin:0}.update-date{font-size:13px;color:#777;margin-bottom:2px}.update-list{display:flex;flex-direction:column;gap:8px;overflow-y:auto;max-height:180px;padding-right:6px}.update-item{background:#f9fafb;border-radius:10px;padding:10px 12px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:all .25s ease;border:1px solid transparent}.update-item:hover{transform:translateY(-2px);background:#fff;border:1px solid #e3e7ef;box-shadow:0 4px 10px #0000000d}.update-info{display:flex;flex-direction:column;gap:2px;color:#333}.update-info strong{font-weight:600;color:#1e1e1e}.update-reason{font-size:12px;color:#777;margin:0}.update-status{font-size:13px;font-weight:600;border-radius:8px;padding:4px 10px;transition:.25s ease}.update-item.approved .update-status{background-color:#2ecc711f;color:#27ae60}.update-item.pending .update-status{background-color:#f39c121f;color:#f39c12}.update-item.rejected .update-status{background-color:#e74c3c1f;color:#e74c3c}.container-users{width:100%;height:100%;font-family:Poppins,sans-serif;padding-top:20px}.user-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px;flex-wrap:wrap;gap:12px}.user-header h2{font-size:22px;font-weight:500;color:#1e1e1e}.actions-user-management{display:flex;align-items:center;gap:10px}.actions-user-management input,.actions-user-management select{padding:8px 12px;border-radius:6px;border:1px solid #ccc;font-size:14px}.actions-user-management button{background:#406892;color:#fff;border:none;padding:8px 16px;border-radius:6px;font-weight:600;cursor:pointer;transition:all .25s ease}.actions-user-management button:hover{background:linear-gradient(90deg,#1565c0,#1e88e5);transform:translateY(-2px)}.user-table{width:100%;border-collapse:collapse;background:#fff;box-shadow:0 2px 8px #0000000d;border-radius:8px;overflow:hidden}.user-table th,.user-table td{padding:12px 15px;border-bottom:1px solid #eee;text-align:left;font-size:14px}.user-table th{background:#f5f5f5;color:#000;font-weight:600}.user-table tr:hover{background-color:#f9f9f9}.user-table td button{border:none;border-radius:6px;padding:5px 10px;cursor:pointer;font-size:13px;transition:.2s;margin-right:6px}.user-table td button:first-child{background:#43a047;color:#fff}.user-table td button:first-child:hover{background:#2e7d32}.user-table td button:last-child{background:#e53935;color:#fff}.user-table td button:last-child:hover{background:#c62828}.modal{position:fixed;inset:0;background:#0006;display:flex;align-items:center;justify-content:center;animation:fadeIn .25s ease;z-index:100}.modal-content{background:#fff;padding:25px;border-radius:10px;width:420px;box-shadow:0 5px 20px #00000026;animation:popIn .3s ease}.modal-content h3{color:#1976d2;margin-bottom:15px;font-size:18px;font-weight:600}.modal-content label{display:block;margin-top:10px;margin-bottom:5px;font-size:14px;font-weight:500;color:#333}.modal-content input,.modal-content select,.modal-content textarea{width:100%;padding:8px 10px;border:1px solid #ccc;border-radius:6px;font-size:14px;margin-bottom:10px;outline:none;transition:all .2s ease}.modal-content input:focus,.modal-content select:focus{border-color:#1976d2;box-shadow:0 0 0 2px #1976d21a}.menu-access{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;background:#f8faff;padding:10px;border-radius:6px;border:1px solid #ddd;margin-bottom:10px}.menu-checkbox{display:flex;align-items:center;gap:6px;font-size:13px;color:#333}.modal-actions-user-management{display:flex;justify-content:space-between;margin-top:15px}.modal-actions-user-management button{flex:1;padding:8px;border-radius:6px;font-weight:600;cursor:pointer;border:none;transition:.25s;font-size:14px}.modal-actions-user-management button:first-child{background:#1976d2;color:#fff;margin-right:8px}.modal-actions-user-management button:first-child:hover{background:#0d47a1}.modal-actions-user-management button:last-child{background:#ccc}.modal-actions-user-management button:last-child:hover{background:#b0b0b0}@media (max-width: 768px){.modal-content{width:95%}.menu-access{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}}.container-roles{height:100%;width:100%;font-family:Poppins,sans-serif;padding:25px}.roles-header{margin-bottom:25px}.roles-header h2{font-size:22px;font-weight:500;color:#1e1e1e}.roles-header p{color:#555;font-size:14px;margin-top:5px}.roles-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}.role-card{background:#fff;border-radius:10px;box-shadow:0 2px 8px #0000000d;padding:18px;transition:all .25s ease}.role-card:hover{transform:translateY(-4px);box-shadow:0 6px 12px #0000001a}.role-card h3{font-size:18px;color:#000;margin-bottom:10px}.role-card p{font-size:13px;color:#444;margin:4px 0}.role-card button{margin-top:10px;background:#406892;color:#fff;border:none;padding:6px 12px;border-radius:6px;cursor:pointer;font-weight:600;transition:.3s}.role-card button:hover{background:linear-gradient(90deg,#1565c0,#1e88e5)}.modal{position:fixed;inset:0;background:#00000073;display:flex;align-items:center;justify-content:center;z-index:999;animation:fadeIn .3s ease}.modal-content{background:#fff;border-radius:10px;width:450px;padding:25px;box-shadow:0 5px 15px #00000026;animation:popIn .25s ease}.modal-content h3{color:#1976d2;margin-bottom:8px}.modal-content p{font-size:13px;margin-bottom:10px;color:#333}.menu-access{display:flex;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin-top:15px;background:#f9fafc;border:1px solid #e0e0e0;border-radius:10px;max-height:280px;overflow-y:auto;scrollbar-width:thin}.menu-access::-webkit-scrollbar{width:6px}.menu-access::-webkit-scrollbar-thumb{background:#ccc;border-radius:10px}.menu-access::-webkit-scrollbar-thumb:hover{background:#999}.menu-checkbox{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #e0e0e0;border-radius:8px;padding:6px 10px;cursor:pointer;transition:all .2s ease;box-shadow:0 1px 2px #0000000a}.menu-checkbox:hover{background:#f1f7ff;border-color:#1976d2}.menu-checkbox input{width:16px;height:16px;accent-color:#1976d2;cursor:pointer}.menu-checkbox span{font-size:14px;font-weight:500;color:#333;-webkit-user-select:none;user-select:none}.btn-add-roles{margin-top:10px;background-color:#406892;color:#fff;padding:8px 16px;border:none;border-radius:6px;cursor:pointer}.modal input[type=text]{width:100%;padding:8px;margin-top:10px;margin-bottom:15px;border:1px solid #ccc;border-radius:6px}.user-list-roles{list-style:none;padding:0;margin-top:10px}.user-list-roles li{background:#f8f8f8;padding:6px 10px;border-radius:6px;margin-bottom:6px;display:flex;flex-direction:column;justify-content:space-between;align-items:center}.btn-remove-roles{background:transparent;border:none;color:red;font-size:16px;cursor:pointer}.add-user-section{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:12px}.add-user-section input{flex:1;padding:8px 10px;border-radius:6px;border:1px solid #ccc;font-size:14px;transition:border-color .2s ease,box-shadow .2s ease}.add-user-section input:focus{outline:none;border-color:#1976d2;box-shadow:0 0 4px #1976d24d}.top-mainbar{width:100%;height:60px;display:flex;justify-content:space-between}.search-top-mainbar{width:90%;height:45px;border-radius:20px;background-color:#f3f2f2;color:#181818;border:none;outline:none;padding:0 15px;font-size:14px;box-sizing:border-box;box-shadow:inset 2px 2px 5px #a8a8a833,inset -2px -2px 5px #ffffffb3;transition:box-shadow .2s ease,background-color .2s ease}.search-top-mainbar::placeholder{color:#fff9}.profile-container{position:relative;display:flex;align-items:center}.profile-dropdown{position:absolute;top:60px;right:0;background:#fff;border-radius:10px;box-shadow:0 6px 20px #0000001a;padding:12px;width:180px;animation:fadeIn .2s ease;z-index:999}.profile-dropdown hr{border:none;height:1px;background:#eee;margin:8px 0}.profile-name{font-weight:600;font-size:15px;color:#333}.profile-role{font-size:13px;color:#666}.dropdown-item{width:100%;text-align:left;background:none;border:none;padding:8px 0;font-size:14px;cursor:pointer;color:#333;border-radius:6px;transition:background .2s}.dropdown-item:hover{background:#f5f5f5}.dropdown-item.logout{color:#e53935;font-weight:600}.dropdown-item.logout:hover{background:#fdecea}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.container-recruitment{display:flex;gap:1%;width:100%}.left-recruitment{display:flex;flex-direction:column;width:80%;height:88vh;gap:1%}.top-left-recruitment{width:100%;height:25%;display:flex;gap:1%}.bottom-left-recruitment{width:100%;height:75%;display:flex;flex-direction:row;gap:1%}.bottom-left-left-recruitment{width:100%;height:100%}.bottom-right-left-recruitment{width:100%;height:100%;display:flex;flex-direction:column;gap:2%}.right-recruitment{display:flex;flex-direction:column;width:20%;height:88vh;gap:2%}.vacancies-card{display:flex;flex-direction:column;height:100%;justify-content:space-between;width:100%;cursor:pointer}.vacancies-card:hover{background-color:#f5f5f5}.vacancies-header{display:flex;height:30%;justify-content:space-between;align-items:center;flex-direction:column}.vacancies-header h2{font-size:18px;font-weight:600;color:#000;margin:0}.vacancies-header span{font-size:12px;color:#888}.vacancies-content{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;height:70%}.vacancies-left{width:20%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.vacancies-left h3{font-size:14px;margin:0;color:#333}.vacancies-total{font-size:44px;font-weight:600;margin:0;color:#000}.vacancies-right ul{list-style:none;padding:0;margin:0}.vacancies-right li{position:relative;font-size:13px;color:#333;margin-bottom:4px;padding-left:14px}.vacancies-right li:before{content:"•";position:absolute;left:0;top:0;color:#ff6b6b;font-size:18px;line-height:1}.job-vacancy-card{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;position:relative}.job-vacancy-card h2{font-size:18px;font-weight:600;color:#000;margin-bottom:20px;text-align:center}.job-progress{display:flex;flex-direction:column;align-items:center;width:90%;margin-bottom:28px}.dots-line-wrapper{display:flex;align-items:center;justify-content:center;width:100%;margin-bottom:10px}.dot{width:14px;height:14px;border-radius:50%;background-color:#ccc;position:relative;z-index:2}.dot.active{background-color:#4caf50}.line{flex:1;height:2px;background-color:#ccc;margin:0 6px;z-index:1}.line.active{background-color:#4caf50}.labels-wrapper{display:flex;justify-content:space-between;width:100%}.labels-wrapper span{font-size:12px;color:#666;text-align:center;flex:1}.job-nav{position:absolute;display:flex;align-items:center;gap:12px;bottom:12px}.job-nav button{background:none;border:none;font-size:18px;cursor:pointer;color:#444;transition:.2s}.job-nav button:hover{color:#000}.dots-indicator{display:flex;align-items:center;gap:6px}.dots-indicator span{width:25px;height:4px;border-radius:2px;background-color:#ccc;transition:all .3s ease}.dots-indicator .dot-active{background-color:#4caf50;width:35px}.notification-card{display:flex;flex-direction:column;height:400px}.notification-card h2{font-size:18px;font-weight:600;color:#000;text-align:center;margin-bottom:10px}.notification-list{flex:1;overflow-y:auto;padding-right:6px}.notification-item{display:flex;align-items:center;gap:6px;font-size:13px;margin-bottom:6px;line-height:1.4;color:#333}.notif-time{color:#888;width:45px;text-align:right;flex-shrink:0}.notif-user{font-weight:600;color:#000}.notif-text{color:#555;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.notification-list::-webkit-scrollbar{width:6px}.notification-list::-webkit-scrollbar-thumb{background-color:#d0d0d0;border-radius:10px}.notification-list::-webkit-scrollbar-thumb:hover{background-color:#aaa}.request-vacancies-card{display:flex;flex-direction:column;height:50%}.request-vacancies-card h2{text-align:center;font-size:18px;font-weight:600;margin-bottom:18px;color:#000}.request-content{display:flex;justify-content:space-between;width:100%;font-size:13px;color:#333;line-height:1.4;gap:10px}.request-left,.request-right{flex:1}@media (max-width: 768px){.request-content{flex-direction:column}}.current-openings-card{display:flex;flex-direction:column;height:100%;padding:12px 18px}.current-openings-card h2{font-size:18px;font-weight:600;text-align:center;color:#000;margin-bottom:2px}.current-openings-card .date{font-size:12px;color:#888;text-align:center;margin-bottom:10px}.openings-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding-right:6px}.opening-item:hover{background-color:#b3b3b3}.opening-item{display:flex;justify-content:space-between;align-items:center;background-color:#f6f6f6;border-radius:8px;padding:10px 14px;box-shadow:inset 0 0 3px #0000000d}.opening-info h3{font-size:14px;font-weight:600;color:#000;margin-bottom:6px}.opening-info p{font-size:12px;color:#555;margin:0;line-height:1.3}.opening-deadline{text-align:center;min-width:60px}.opening-deadline p{margin:0;font-size:11px;color:#777}.opening-deadline span{font-size:28px;font-weight:600;color:#000;display:block;line-height:1.1}.openings-list::-webkit-scrollbar{width:6px}.openings-list::-webkit-scrollbar-thumb{background-color:#d0d0d0;border-radius:10px}.recruitment-statistics-card{display:flex;flex-direction:column;height:100%;padding:10px 20px}.recruitment-statistics-card:hover{background-color:#f5f5f5;cursor:pointer}.recruitment-statistics-card h2{text-align:center;font-size:18px;font-weight:600;color:#000;margin-bottom:4px}.recruitment-statistics-card .date{text-align:center;font-size:12px;color:#888;margin-bottom:8px}.chart-wrapper{flex:1;width:100%;height:100%}.requirement-list-card{display:flex;flex-direction:column;height:250px;padding:14px 20px;overflow-y:auto}.requirement-list-card h2{text-align:center;font-size:18px;font-weight:600;color:#000;margin-bottom:10px}.job-section{font-size:13px;color:#333}.job-section h3{font-size:14px;font-weight:600;margin-bottom:10px}.section{margin-bottom:14px}.section h4{font-size:13px;font-weight:600;color:#000;margin-bottom:4px}.section p{font-size:12px;color:#555;margin:4px 0;line-height:1.4}.section ul{list-style:disc;padding-left:20px;margin:4px 0}.section li{font-size:12px;color:#555;line-height:1.4;margin-bottom:3px}.requirement-list-card::-webkit-scrollbar{width:6px}.requirement-list-card::-webkit-scrollbar-thumb{background-color:#d0d0d0;border-radius:10px}.requirement-list-card::-webkit-scrollbar-thumb:hover{background-color:#aaa}.modal-overlay-vacancies{position:fixed;inset:0;background:#0009;display:flex;justify-content:center;align-items:center;z-index:9999}.modal-vacancies{width:900px;background:#fff;border-radius:12px;padding:15px;box-shadow:0 6px 20px #0003;overflow-y:auto}.divider{height:1px;background:#e0e0e0;margin:20px 0}.create-form-section{margin-top:30px;text-align:center}.custom-form-button{background-color:#007bff;border:none;color:#fff;padding:10px 18px;border-radius:8px;cursor:pointer;margin-top:10px;font-size:15px;transition:.3s}.custom-form-button:hover{background-color:#0056b3}.modal-overlay-candidates{position:fixed;top:0;left:0;width:100%;height:100%;background:#0a0a0a99;display:flex;align-items:center;justify-content:center;z-index:999}.modal-candidates{background:#fff;border-radius:12px;width:90%;max-width:900px;color:#333;overflow-y:auto;max-height:80vh;box-shadow:0 0 15px #0000004d;padding:30px}.modal-candidates h3{margin-bottom:10px}.search-input{width:97%;border:1px solid #ccc;border-radius:6px;margin-bottom:15px;margin-top:10px}.candidates-table{width:100%;border-collapse:collapse;margin-bottom:20px}.candidates-table th,.candidates-table td{border:1px solid #ddd;padding:8px;font-size:14px;text-align:left}.candidates-table th{background:#f4f4f4}.status-badge{padding:4px 8px;border-radius:8px;font-size:12px;color:#fff}.status-badge.accepted{background:#27ae60}.status-badge.rejected{background:#c0392b}.status-badge.pending{background:#f39c12}.modal-actions{text-align:right}.modal-actions button{background:#333;color:#fff;border:none;padding:8px 14px;border-radius:6px;cursor:pointer}.modal-actions button:hover{background:#555}.status-select{padding:4px 8px;border-radius:6px;border:1px solid #ccc;background-color:#fff}.status-select.Applied{border-color:#2980b9;background:#ecf6ff}.status-select.Interview{border-color:#8e44ad;background:#f6ecff}.status-select.Pending{border-color:#f39c12;background:#fff7e6}.status-select.Accepted{border-color:#27ae60;background:#e9f9f0}.status-select.Rejected{border-color:#c0392b;background:#fdecea}.pagination{display:flex;justify-content:center;align-items:center;gap:15px;margin-top:10px}.pagination button{background:#333;color:#fff;border:none;padding:6px 10px;border-radius:6px;cursor:pointer;transition:background .3s ease}.pagination button:disabled{background:#aaa;cursor:not-allowed}.pagination span{font-size:14px;color:#333}.candidates-table th{cursor:pointer;-webkit-user-select:none;user-select:none;background:#f5f5f5;color:#333;font-weight:600;transition:background .2s}.candidates-table th:hover{background:#e0e0e0}.candidates-table th span{font-size:12px;margin-left:5px;color:#666}.modal-overlay-openings{position:fixed;top:0;left:0;width:100%;height:100%;background:#0009;display:flex;justify-content:center;align-items:center;z-index:999}.modal-openings{background:#fff;padding:20px;border-radius:12px;width:800px;max-height:90vh;overflow-y:auto;box-shadow:0 2px 10px #0000004d}.applicants-table{width:100%;border-collapse:collapse;margin-top:15px}.applicants-table th,.applicants-table td{border:1px solid #ddd;padding:10px;text-align:left}.applicants-table th{background-color:#f7f7f7;cursor:pointer}.followup-select{padding:5px 10px;border-radius:6px;border:1px solid #ccc}.followup-select.Sudah\ Ditindak{background:#d4edda;color:#155724}.followup-select.Belum\ Ditindak{background:#f8d7da;color:#721c24}.modal-overlay-request{position:fixed;top:0;left:0;width:100%;height:100%;background:#0f0f0f8c;display:flex;justify-content:center;align-items:center;z-index:1200;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:fadeIn .25s ease-in-out}.modal-request{background:#fff;padding:28px 32px;border-radius:16px;width:700px;max-height:85vh;overflow-y:auto;box-shadow:0 8px 24px #00000040;animation:slideUp .3s ease;color:#2c3e50}.modal-request h3{font-size:20px;font-weight:700;margin-bottom:16px;color:#1a1a1a;display:flex;align-items:center;gap:6px}.modal-request h4{margin-top:20px;font-size:17px;color:#34495e}.modal-request p{margin:6px 0;font-size:15px;color:#333}.modal-request ul{margin:10px 0 15px 20px}.modal-request ul li{list-style:disc;font-size:14px;color:#444;margin-bottom:4px}.modal-actions{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:25px}.approve-btn,.reject-btn,.close-btn-req{border:none;border-radius:8px;padding:10px 18px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.approve-btn{background:#2ecc71;color:#fff}.approve-btn:hover{background:#27ae60}.reject-btn{background:#e74c3c;color:#fff}.reject-btn:hover{background:#c0392b}.close-btn{background:#7f8c8d;color:#fff}.close-btn:hover{background:#636e72}.approved-text{font-size:15px;font-weight:600;color:#27ae60}.request-list{display:flex;flex-direction:column;gap:12px;margin-top:10px}.request-item{background:#fff;border:1px solid #e1e4e8;border-radius:10px;padding:20px;transition:all .25s ease;box-shadow:0 1px 3px #0000000d;cursor:pointer}.request-item h3{font-size:14px}.request-item p{font-size:10px}.request-item:hover{background:#f9fafb;transform:translateY(-2px);box-shadow:0 3px 10px #00000014}.request-header{display:flex;justify-content:space-between;align-items:center}.request-header h3{font-size:16px;font-weight:600;color:#2c3e50;margin:0}.status-badge{padding:5px 10px;border-radius:8px;font-size:12px;font-weight:600;text-transform:capitalize;color:#fff}.status-badge.pending{background-color:#f1c40f}.status-badge.approved{background-color:#2ecc71}.status-badge.rejected{background-color:#e74c3c}.request-body{margin-top:8px}.request-body p{margin:4px 0;font-size:14px;color:#555}.request-body strong{color:#2c3e50}.apply-button{background:linear-gradient(135deg,#4e73df,#224abe);color:#fff;border:none;border-radius:8px;padding:8px 16px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 3px 8px #00000026}.apply-button:hover{background:linear-gradient(135deg,#5a5cdb,#2a55d8);transform:translateY(-2px);box-shadow:0 5px 12px #0003}.apply-button:active{transform:translateY(1px);background:linear-gradient(135deg,#3c4cb1,#1e3a8a)}.apply-button:focus{outline:none;box-shadow:0 0 0 3px #4e73df66}.custom-form-inputs{display:flex;flex-direction:column;gap:10px;margin-top:12px}.custom-form-inputs input{padding:8px 12px;border-radius:6px;border:1px solid #ccc;font-size:14px;transition:border .3s ease}.custom-form-inputs input:focus{outline:none;border-color:#4e73df}.custom-form-button{background:linear-gradient(135deg,#1cc88a,#13855c);color:#fff;border:none;border-radius:6px;padding:8px 14px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s ease}.custom-form-button:hover{background:linear-gradient(135deg,#17a673,#0e6655);transform:translateY(-2px)}.custom-link-preview{margin-top:10px;font-size:14px;word-break:break-all}.custom-link-preview a{color:#4e73df;text-decoration:none}.custom-link-preview a:hover{text-decoration:underline}.container-onBoarding{width:100%;height:90vh}.top-container-onBoarding{width:100%;height:23%;display:flex;justify-content:space-between;gap:20px}.middle-container-onBoarding{width:100%;height:45%;display:flex;justify-content:center;align-items:center}.bottom-container-onBoarding{width:100%;height:30%;display:flex;gap:20px}.onboarding-card{display:flex;flex-direction:column;width:100%;height:100%}.onboarding-title{font-size:1.3rem;font-weight:500;margin-bottom:10px}.onboarding-banner{position:relative;border-radius:10px;overflow:hidden;box-shadow:0 4px 10px #0000001a}.onboarding-image{width:100%;height:180px;object-fit:cover;filter:brightness(.75);transition:transform .3s ease}.onboarding-card:hover .onboarding-image{transform:scale(1.05)}.onboarding-text{position:absolute;bottom:10px;right:20px;left:20px;color:#fff;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}.onboarding-text h3{margin:0;font-size:1.1rem;font-weight:600}.onboarding-text p{margin:0;font-size:.9rem}.onboarding-modal{position:fixed;inset:0;background:#0000008c;display:flex;justify-content:center;align-items:center;z-index:99;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .25s ease}.onboarding-modal-content{background:linear-gradient(145deg,#fff,#f8faff);border-radius:16px;padding:28px 36px;width:700px;max-height:85vh;overflow-y:auto;position:relative;box-shadow:0 8px 40px #00000026;font-family:Poppins,sans-serif;animation:scaleIn .3s ease}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.close-btn{position:absolute;top:14px;right:14px;background:#f1f3f6;border:none;border-radius:50%;width:36px;height:36px;font-size:18px;cursor:pointer;transition:.3s}.close-btn:hover{background:#e1e4e8}.modal-image{width:100%;height:180px;border-radius:12px;object-fit:cover;margin-bottom:20px}.modal-header h2{margin:0;color:#1e293b;font-size:1.4rem}.modal-category,.modal-date{color:#64748b;font-size:.9rem;margin:2px 0}.modal-desc{margin:15px 0 20px;color:#475569;line-height:1.6;font-size:.95rem}.modal-divider{border:none;border-top:1px solid #e2e8f0;margin:20px 0}.modal-participants h3{font-size:1.1rem;color:#1e293b;margin-bottom:10px}.participants-table{border:1px solid #e2e8f0;border-radius:10px;background:#fff;overflow:hidden}.participants-header,.participants-row{display:grid;grid-template-columns:1fr .6fr;padding:10px 15px;font-size:.9rem;align-items:center}.participants-header{background:#f1f5f9;font-weight:600;color:#334155;border-bottom:1px solid #e2e8f0}.participants-row{border-bottom:1px solid #f1f5f9;transition:background .25s ease}.participants-row:hover{background:#f9fafb}.status{padding:5px 10px;border-radius:8px;font-weight:600;font-size:.85rem;text-align:center;width:fit-content;justify-self:end}.no-result{text-align:center;color:#94a3b8;padding:10px}.modal-summary{display:flex;justify-content:space-between;margin:25px 0 20px;gap:10px}.summary-box{flex:1;text-align:center;border-radius:10px;padding:12px 10px;background:#f8fafc;border:1px solid #e2e8f0;transition:.3s}.summary-box:hover{background:#f1f5f9}.summary-box h4{font-size:1.5rem;color:#1e293b;margin:0}.summary-box p{color:#64748b;margin:4px 0 0;font-size:.85rem}.summary-box.completed{border-left:4px solid #22c55e}.summary-box.inprogress{border-left:4px solid #fbbf24}.modal-progress{margin-top:20px}.progress-label{display:flex;justify-content:space-between;color:#334155;font-size:.9rem;margin-bottom:6px}.progress-bar{width:100%;height:12px;border-radius:10px;background:#e2e8f0;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,#007bff,#00b4d8);border-radius:10px;transition:width .4s ease}.slide-navigation{position:relative;z-index:10;display:flex;align-items:center;justify-content:center;gap:15px;background:#0000004d;border-radius:8px;padding:4px 10px}.nav-arrow{background:none;border:none;font-size:1.3rem;color:#fff;cursor:pointer;transition:opacity .2s ease;z-index:11}.nav-arrow:hover{opacity:.7}.slide-indicators{display:flex;align-items:center;gap:8px;z-index:11}.indicator{width:30px;height:5px;background-color:#bbb;border-radius:3px;transition:background-color .3s ease,width .3s ease;cursor:pointer}.indicator.active{background-color:#2ecc71;width:40px}.candidate-table{display:flex;flex-direction:column;gap:4px;max-height:100px;overflow-y:auto}.candidate-container h2{margin-bottom:15px;font-size:1.3rem;font-weight:600}.candidate-table{display:flex;flex-direction:column;gap:8px}.candidate-header{display:grid;grid-template-columns:1.8fr 1.2fr 1fr;font-weight:600;border-bottom:2px solid #ddd;padding-bottom:8px}.candidate-row{display:grid;grid-template-columns:1.8fr 1.2fr 1fr;padding:8px 0;border-bottom:1px solid #eee;cursor:pointer;transition:all .2s ease}.candidate-row:hover{background-color:#f8f9ff}.status{font-weight:500}.status.progress{color:#ff9800}.status.finish{color:#4caf50}.candidate-modal{position:absolute;inset:0;background:#00000040;display:flex;align-items:center;justify-content:center;z-index:10;border-radius:12px}.candidate-modal-content{background:#fff;border-radius:16px;padding:28px;width:600px;max-height:85vh;overflow-y:auto;position:relative;box-shadow:0 8px 40px #00000026;animation:fadeIn .3s ease;font-family:Poppins,sans-serif}@keyframes fadeIn{0%{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}.close-btn{position:absolute;top:15px;right:15px;background:#f5f5f5;border:none;border-radius:50%;width:34px;height:34px;font-size:18px;cursor:pointer;transition:.3s}.close-btn:hover{background:#e0e0e0}.candidate-profile{display:flex;align-items:center;gap:20px;margin-bottom:20px}.candidate-avatar{width:100px;height:100px;border-radius:50%;object-fit:cover;border:3px solid #007bff;box-shadow:0 0 10px #007bff33}.candidate-info h3{margin:0;font-size:1.3rem;color:#1a1a1a}.candidate-info p{margin:3px 0;color:#555;font-size:.9rem}.status{padding:3px 10px;border-radius:8px;font-weight:600;font-size:.85rem}.status.finish{background:#e6f4ea;color:#1b5e20}.status.progress{background:#fff8e1;color:#f57f17}.candidate-docs{margin-top:25px;background:#f9fafc;border-radius:12px;padding:15px 20px}.candidate-docs h4{margin-bottom:10px;font-size:1.1rem;color:#2e2e2e}.docs-list{display:flex;flex-direction:column;gap:8px}.doc-item{display:flex;justify-content:space-between;align-items:center;background:#fff;border-radius:8px;padding:10px 14px;border:1px solid #e6e6e6;transition:all .3s ease}.doc-item:hover{border-color:#007bff;background:#f5f9ff}.doc-item span:first-child{font-weight:500;color:#333}.doc-status{display:flex;align-items:center;font-weight:600;font-size:.9rem}.doc-status.complete{color:#2e7d32}.doc-status.incomplete{color:#c62828}.candidate-modal-content p strong{color:#1a1a1a}.candidate-modal-content p{color:#555;line-height:1.5}.candidate-modal-content::-webkit-scrollbar{width:8px}.candidate-modal-content::-webkit-scrollbar-thumb{background-color:#0003;border-radius:10px}.close-btn{position:absolute;right:15px;top:10px;border:none;background:transparent;font-size:1.2rem;cursor:pointer}.course-container-onboarding{padding:20px;display:flex;flex-direction:column;border-radius:16px}.course-header-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.course-header-top h2{font-size:1.3rem;color:#1e293b}.add-course-btn{background:#406892;color:#fff;border:none;border-radius:8px;padding:8px 16px;font-size:.9rem;cursor:pointer;transition:background .3s}.add-course-btn:hover{background:#005fcc}.course-search{padding:10px 12px;border-radius:8px;border:1px solid #d1d5db;margin-bottom:12px;width:100%;font-size:.9rem}.course-search:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 3px #007bff33}.course-header,.course-row{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr 1fr;padding:10px 12px;align-items:center;border-bottom:1px solid #f1f5f9}.course-header{background:#f1f5f9;font-weight:600;color:#334155}.course-row{color:#475569;font-size:.9rem;transition:background .2s ease}.course-row:hover{background:#f9fafb}.no-result{text-align:center;color:#94a3b8;padding:15px}.addcourse-modal{position:fixed;inset:0;background:#0000008c;display:flex;justify-content:center;align-items:center;z-index:99;animation:fadeIn .25s ease}.addcourse-content{background:#fff;border-radius:14px;padding:28px 32px;width:420px;position:relative;box-shadow:0 8px 40px #0003;animation:scaleIn .3s ease;display:flex;flex-direction:column;gap:12px}.addcourse-content h3{text-align:center;color:#1e293b;margin-bottom:10px;font-size:1.1rem}.close-btn{position:absolute;top:12px;right:12px;background:#f3f4f6;border:none;border-radius:50%;width:34px;height:34px;font-size:16px;cursor:pointer;transition:.2s}.close-btn:hover{background:#e5e7eb}.addcourse-form input{padding:10px;border-radius:8px;border:1px solid #d1d5db;font-size:.9rem}.addcourse-form input:focus{border-color:#007bff;outline:none;box-shadow:0 0 0 2px #007bff26}.addcourse-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:10px}.save-btn{background:#22c55e;color:#fff;border:none;border-radius:8px;padding:8px 14px;font-size:.9rem;cursor:pointer;transition:.2s}.cancel-btn{background:#e5e7eb;color:#374151;border:none;border-radius:8px;padding:8px 14px;font-size:.9rem;cursor:pointer;transition:.2s}@keyframes scaleIn{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}.feedback-container{width:100%;height:100%;border-radius:12px;display:flex;flex-direction:column}.feedback-list{display:flex;flex-direction:column;gap:15px;overflow-y:auto}.feedback-card{background:#fafafa;border:1px solid #e0e0e0;border-radius:10px;padding:12px 14px;transition:all .2s ease;cursor:pointer}.feedback-card:hover{transform:translateY(-2px);box-shadow:0 2px 8px #00000014}.feedback-header{display:flex;align-items:center;gap:10px}.feedback-avatar{width:40px;height:40px;border-radius:50%}.feedback-header h4{margin:0;font-size:.95rem;font-weight:600}.feedback-date{margin:0;font-size:.8rem;color:#777}.feedback-rating{margin-top:4px;color:#fbc02d;font-size:1rem}.star{opacity:.4}.star.filled{opacity:1}.feedback-comment{margin:8px 0;font-size:.9rem;color:#444}.feedback-course span{font-size:.85rem;color:#1565c0;font-weight:500}.feedback-modal{position:fixed;inset:0;background:#00000073;display:flex;align-items:center;justify-content:center;z-index:999;animation:fadeIn .3s ease}.feedback-modal-content{background:#fff;border-radius:12px;padding:25px;width:380px;box-shadow:0 4px 20px #00000026;position:relative;animation:popUp .3s ease}.modal-header{display:flex;align-items:center;gap:12px}.modal-avatar{width:50px;height:50px;border-radius:50%}.modal-course-onboard{margin-top:10px;font-size:1rem;color:#1565c0;font-weight:600}.modal-rating{margin:6px 0;color:#fbc02d;font-size:1.2rem}.modal-comment{margin-top:8px;font-size:.95rem;color:#444;font-style:italic}.close-btn{position:absolute;right:15px;top:10px;border:none;background:transparent;font-size:1.3rem;cursor:pointer;color:#444}@keyframes popUp{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}.feedback-list::-webkit-scrollbar{width:6px}.feedback-list::-webkit-scrollbar-thumb{background:#0003;border-radius:3px}.stats-container{width:100%;height:100%;background:#fff;border-radius:12px;display:flex;flex-direction:column}.stats-container h2{font-size:1.2rem;font-weight:600;margin-bottom:15px}.stats-summary{display:flex;justify-content:space-between;margin-bottom:15px}.stats-item h4{font-size:16px;color:#666}.stats-item p{font-size:1.3rem;font-weight:700;color:#1565c0}.stats-progress{margin:5px 0}.progress-label{display:flex;justify-content:space-between;font-size:.9rem;color:#444;margin-bottom:6px}.progress-bar{width:100%;height:8px;background:#e0e0e0;border-radius:5px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,#4caf50,#81c784);border-radius:5px;transition:width .5s ease}.stats-detail{display:flex;justify-content:space-between;margin-top:20px}.detail-box{width:45%;background:#f9fafc;border-radius:10px;text-align:center;padding:10px;box-shadow:0 2px 5px #0000000d}.detail-box h5{font-size:1.2rem;font-weight:700;margin:5px 0}.detail-box p{font-size:.85rem;color:#666}.detail-box.completed h5{color:#4caf50}.detail-box.inprogress h5{color:#ff9800}.mentor-container{width:100%;height:100%;background:#fff;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center}.mentor-container h2{font-size:14px;font-weight:600;margin-bottom:15px}.mentor-card{text-align:center;width:90%;max-width:280px;display:flex;flex-direction:column;align-items:center;gap:6px}.mentor-photo{width:60px;height:60px;border-radius:50%;margin-bottom:5px;object-fit:cover;border:3px solid #1565c0}.mentor-card h3{margin:0;font-size:16px;font-weight:600}.mentor-card p{margin:0;font-size:12px;font-weight:400}.mentor-role{margin:0;font-size:.9rem;color:#777}.mentor-desc{font-size:10px;color:#444}.mentor-navigation{display:flex;align-items:center;justify-content:center;gap:4px}.nav-arrow{background:none;border:none;font-size:1.3rem;color:#1565c0;cursor:pointer;transition:opacity .2s ease}.nav-arrow:hover{opacity:.6}.mentor-indicators{display:flex;gap:6px}.indicator{width:22px;height:5px;background-color:#ccc;border-radius:3px;cursor:pointer;transition:background .3s ease,width .3s ease}.indicator.active{background-color:#1565c0;width:30px}.fade-in{animation:fadeInSlide .6s ease-in-out}@keyframes fadeInSlide{0%{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}.container-employee{width:100%;height:90vh}.employee-container{width:100%;height:100%;background:#fff;border-radius:12px;padding:20px;box-sizing:border-box;display:flex;flex-direction:column;gap:16px}.employee-header{display:flex;align-items:center;gap:10px}.employee-header input{flex:1;height:38px;border-radius:8px;border:1px solid #ccc;padding:0 12px;outline:none}.employee-header button{height:38px;padding:0 16px;background:#406892;color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:500}.employee-header select,.add-employee-form select,.modal-content select{height:38px;padding:0 12px;background:#fff;color:#333;border:1px solid #d0d7de;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;outline:none;transition:all .2s ease;appearance:none;-webkit-appearance:none;-moz-appearance:none}.employee-header select:hover,.add-employee-form select:hover,.modal-content select:hover{border-color:#60a5fa;box-shadow:0 0 0 2px #60a5fa33}.employee-header select:focus,.add-employee-form select:focus,.modal-content select:focus{border-color:#406892;box-shadow:0 0 0 2px #2563eb4d}.employee-header select option,.add-employee-form select option,.modal-content select option{background:#fff;color:#333;padding:10px;font-size:14px}.employee-header select,.add-employee-form select{background-image:url("data:image/svg+xml,%3Csvg fill='none' stroke='%23666' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6'%3E%3C/path%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px}.employee-table{width:100%;border-collapse:collapse;font-size:14px}.employee-table th{text-align:center;background:#f5f5f5;padding:8px 10px;border-bottom:1px solid #ddd}.employee-table td{padding:8px 10px;border-bottom:1px solid #eee;cursor:pointer}.employee-table tr:hover{background:#f1faff}.status-active{color:#2ecc71;font-weight:600}.pagination{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:10px}.pagination button{padding:6px 12px;border-radius:6px;border:1px solid #ccc;background:#f5f5f5;cursor:pointer}.pagination button:disabled{opacity:.5;cursor:not-allowed}.modal-overlay{position:fixed;inset:0;background:#0006;display:flex;justify-content:center;align-items:center;z-index:9999999}.modal-content-karyawan{background:#fff;border-radius:14px;padding:28px 32px;width:750px;max-width:92%;box-shadow:0 8px 24px #00000026;animation:slideUp .3s ease-out;position:relative;overflow-y:auto;max-height:90vh}.modal-content-karyawan h3{font-size:1.4rem;font-weight:600;color:#1e293b;margin-bottom:20px;border-bottom:2px solid #e2e8f0;padding-bottom:8px}.modal-content-karyawan p{margin:10px 0;color:#334155;font-size:.95rem;line-height:1.5}.modal-content-karyawan p strong{color:#0f172a;font-weight:600;display:inline-block;width:150px}.modal-content-karyawan button{margin-top:10px;padding:6px 12px;background:#406892;color:#fff;border:none;border-radius:6px;cursor:pointer}.modal-content-karyawan hr{border:none;border-top:1px solid #e5e7eb;margin:20px 0}.modal-content-karyawan .modal-actions{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap}.kpi-section{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:10px;padding:16px 20px;margin-top:10px;box-shadow:inset 0 0 4px #00000008}.kpi-item{display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:10px 14px;transition:.2s ease}.kpi-item:hover{border-color:#60a5fa;box-shadow:0 1px 4px #2563eb1a}.kpi-item label{color:#374151;font-weight:500;font-size:.95rem}.kpi-item span{font-weight:600;color:#2563eb;font-size:.95rem}.kpi-item input{width:70px;padding:5px 6px;font-size:.9rem;text-align:center;border:1px solid #cbd5e1;border-radius:6px;outline:none;transition:.2s}.kpi-item input:focus{border-color:#2563eb;box-shadow:0 0 0 2px #2563eb33}.kpi-total{margin-top:14px;background:#eef2ff;border:1px solid #c7d2fe;padding:12px 16px;border-radius:8px;font-weight:600;color:#1e3a8a;display:flex;justify-content:space-between;align-items:center}.kpi-total strong{font-size:1rem}.edit-btn,.save-btn,.cancel-btn{border:none;padding:8px 14px;border-radius:8px;cursor:pointer;font-weight:500;transition:all .2s ease}.edit-btn{background:#2563eb;color:#fff}.edit-btn:hover{background:#1d4ed8}.save-btn{background:#22c55e;color:#fff}.save-btn:hover{background:#16a34a}.cancel-btn{background:#e5e7eb;color:#374151}.cancel-btn:hover{background:#d1d5db}@media (max-width: 768px){.kpi-section{grid-template-columns:1fr}.kpi-item,.kpi-total{flex-direction:column;align-items:flex-start;gap:6px}}.calendar-day.present{background-color:#e6f8e7;color:#2ecc71;font-weight:600}.calendar-day.leave{background-color:#fff6e0;color:#f39c12;font-weight:600}.calendar-day.absent{background-color:#fdecea;color:#e74c3c;font-weight:600}.calendar-day:hover{transform:scale(1.05)}.calendar-legend{display:flex;justify-content:space-around;margin-top:8px;font-size:13px}.calendar-day small{display:block;font-size:9px;color:#555;margin-top:2px}.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px}.dot.present{background-color:#2ecc71}.dot.leave{background-color:#f39c12}.dot.absent{background-color:#e74c3c}.modal-large{width:800px;max-height:80vh;font-size:16px;overflow-y:auto}.attendance-calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin:14px 0;justify-items:center;padding:5px}.calendar-day{width:45px;height:45px;border-radius:10px;background-color:#f8f8f8;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:10px;font-weight:500;color:#333;cursor:default;transition:.2s;box-shadow:0 1px 2px #0000000d}.calendar-day small{font-size:8px;color:#555;margin-top:2px}.calendar-day.present{background-color:#eafbea;color:#2ecc71}.calendar-day.leave{background-color:#fff5e5;color:#f39c12}.calendar-day.absent{background-color:#fdecea;color:#e74c3c}.calendar-legend{display:flex;justify-content:space-evenly;font-size:9px;margin-top:12px}.modal-actions{margin-top:20px;display:flex;flex-direction:column;align-items:center;gap:8px}.modal-actions button{width:80%;padding:8px;font-size:14px}.add-employee-form{display:flex;flex-direction:column;gap:10px}.add-employee-form input,.add-employee-form select{padding:8px 10px;border:1px solid #ccc;border-radius:6px;font-size:14px}.add-employee-form button{margin-top:5px}.employee-details{display:flex;flex-direction:column;gap:1rem}.employee-section{background:#f8f9fb;border-radius:10px;box-shadow:0 2px 6px #0000000d;margin-bottom:20px}.employee-section h4{color:#ae3131;margin-bottom:.6rem}.btn-danger{background-color:#ff4d4f;border:none;color:#fff;padding:.6rem 1.2rem;border-radius:8px;cursor:pointer;font-weight:700;transition:background .2s}.btn-danger:hover{background-color:#e04646}.employee-section .sp-table{width:100%;font-size:14px}.sp-table th{background-color:#2196f3;color:#fff;padding:4px;text-align:left;border-radius:4px 4px 0 0}.sp-table td{padding:8px;border-bottom:1px solid #e2e2e2;vertical-align:top}.sp-table tr:nth-child(2n){background-color:#f8f9fb}.sp-table tr:hover{background-color:#eef2ff}.total-info-reimburse-hrd{margin-top:4px;font-size:14px;color:#555;background:#eef5ff;padding:5px 10px;border-radius:6px;font-weight:500}.actions-reimburse-hrd{display:flex;gap:10px}.actions-reimburse-hrd select,.actions-reimburse-hrd button{padding:6px 10px;border-radius:6px;border:1px solid #ccc;font-size:13px}.actions-reimburse-hrd button{background:#406892;color:#fff;border:none;cursor:pointer}.actions-reimburse-hrd button:hover{background:linear-gradient(90deg,#1565c0,#1976d2)}.modal-actions-reimburse-hrd button{border:none;border-radius:6px;padding:8px 14px;cursor:pointer}.modal-actions-reimburse-hrd button:first-child{background:#1976d2;color:#fff}.modal-actions-reimburse-hrd button:last-child{background:#ccc}.modal-actions-reimburse-hrd{display:flex;justify-content:space-between;margin-top:10px}.modal-actions-reimburse-hrd button:first-child{background:linear-gradient(90deg,#2196f3,#42a5f5);color:#fff;border:none;border-radius:6px;padding:8px 14px;cursor:pointer}.modal-actions-reimburse-hrd button:first-child:hover{background:linear-gradient(90deg,#1976d2,#2196f3)}.reimburse-table-hrd thead th{background-color:#f5f5f5!important;color:#333!important;font-weight:600;border-bottom:1px solid #ddd}.actions-payroll-hrd{display:flex;align-items:center;gap:10px}.actions-payroll-hrd button{background-color:#406892;color:#fff;border:none;padding:8px 14px;border-radius:6px;cursor:pointer;font-size:12px;transition:.3s}.actions-payroll-hrd button:hover{background-color:#0d47a1}.actions-payroll-hrd select{padding:6px 10px;border-radius:5px;border:1px solid #ccc}.payroll-table-hrd{width:100%;border-collapse:collapse;background-color:#fff;box-shadow:0 2px 5px #0000001a;border-radius:8px;overflow:hidden}.payroll-table-hrd tr:hover{background-color:#f9f9f9}.modal-payroll-hrd{position:fixed;inset:0;display:flex;justify-content:center;align-items:center}.modal-content-payroll{background:#fff;padding:25px;border-radius:8px;width:450px;animation:fadeIn .3s ease}.actions-payroll-hrd input{padding:6px 10px;border:1px solid #ccc;border-radius:6px}.payroll-table-hrd th{background-color:#f5f5f5;color:#0f0f0f}.payroll-table-hrd td b{color:#1976d2}.modal-actions-payroll{display:flex;justify-content:space-between;margin-top:10px}.modal-actions-payroll button:first-child{background-color:#1976d2;color:#fff}.modal-actions-payroll button:last-child{background-color:#ccc}.title-section{display:flex;flex-direction:column;align-items:flex-start}.total-info-hrd{margin-top:5px;font-size:14px;color:#000;padding:6px 10px;border-radius:6px;font-weight:500;box-shadow:0 1px 3px #00000014}.total-info-hrd strong{color:#1976d2}.table-wrapper-payroll-hrd{width:100%;overflow-x:auto;overflow-y:auto;max-height:450px;border-radius:8px;box-shadow:0 1px 3px #0000001a}.table-wrapper-payroll-hrd::-webkit-scrollbar{height:8px;width:8px}.table-wrapper-payroll-hrd::-webkit-scrollbar-thumb{background:#b0bec5;border-radius:4px}.table-wrapper-payroll-hrd::-webkit-scrollbar-thumb:hover{background:#90a4ae}.table-wrapper-payroll-hrd::-webkit-scrollbar-track{background:#f5f5f5;border-radius:4px}.add-btn-payroll-hrd{background:#48f321;color:#fff;border:none;border-radius:6px;padding:8px 14px;cursor:pointer;font-weight:600;transition:.2s}.add-btn-payroll-hrd:hover{background:#1976d2}.slip-modal{position:relative;max-width:400px;text-align:left}.close-btn{position:absolute;top:8px;right:8px;background:transparent;border:none;font-size:18px;cursor:pointer}.modal-actions-payroll{margin-top:15px;display:flex;justify-content:space-between}.modal-actions-payroll button{padding:6px 12px;border:none;border-radius:6px;cursor:pointer}.modal-actions-payroll button:first-child{background:#007bff;color:#fff}.modal-actions-payroll button:last-child{background:#dc3545;color:#fff}.action-buttons{display:flex;justify-content:space-between;gap:15px;margin:20px 0}.action-buttons button{flex:1;padding:12px;background:#005eff;color:#fff;border:none;border-radius:8px;cursor:pointer}.action-buttons button:hover{background:#0041b8}.payroll-modal-wrapper{position:fixed;top:0;left:0;width:100vw;height:100vh;background:transparent;display:flex;justify-content:center;align-items:center;z-index:9999}.payroll-modal-content{background:#fff;padding:20px 25px;width:360px;border-radius:12px;animation:payrollFadeIn .25s ease;box-shadow:0 0 5px #cfcfcf2e;text-align:center}.payroll-modal-content h3{margin-bottom:18px;font-size:18px;font-weight:600;color:#1e1e1e}.payroll-modal-content .action-buttons{display:flex;flex-direction:column;gap:12px}.payroll-modal-content .action-buttons button{padding:10px;border:none;border-radius:8px;background:#1a73e8;color:#fff;cursor:pointer;transition:.2s ease;font-size:14px}.payroll-modal-content .action-buttons button:hover{background:#0d47a1}.payroll-modal-content .modal-actions-payroll{margin-top:18px;display:flex;justify-content:center}.payroll-modal-content .modal-actions-payroll button{padding:8px 16px;background:#ccc;border-radius:8px;border:none;cursor:pointer}@keyframes payrollFadeIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.payroll-edit-modal-wrapper{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#131c2659;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;justify-content:center;align-items:center;z-index:9999;animation:fadeIn .25s ease}.payroll-edit-modal-content{width:430px;background:#fff;padding:25px 28px 30px;border-radius:14px;position:relative;box-shadow:0 10px 28px #0000002e;animation:slideUp .25s ease;max-height:82vh;overflow-y:auto}.payroll-edit-modal-content h3{font-size:20px;font-weight:600;color:#1d1d1d;margin:0 0 20px;text-align:left}.payroll-edit-modal-close{position:absolute;top:12px;right:14px;background:#e3e3e3;border:none;width:30px;height:30px;border-radius:50%;font-size:16px;cursor:pointer;font-weight:600;display:flex;align-items:center;justify-content:center;transition:.2s}.payroll-edit-modal-close:hover{background:#d0d0d0}.payroll-edit-modal-content label{font-size:13px;font-weight:600;color:#333;margin-bottom:4px;display:block}.payroll-edit-modal-content input,.payroll-edit-modal-content select{width:100%;padding:10px 12px;border-radius:8px;border:1px solid #cfcfcf;font-size:14px;margin-bottom:15px;transition:border-color .25s,box-shadow .25s;background:#fafafa}.payroll-edit-modal-content input:focus,.payroll-edit-modal-content select:focus{border-color:#1976d2;box-shadow:0 0 0 3px #1976d233;outline:none}.payroll-edit-modal-content .modal-actions{display:flex;justify-content:space-between;margin-top:10px}.payroll-edit-modal-content .modal-actions button{width:48%;padding:10px 0;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:.25s}.payroll-edit-modal-content .modal-actions button:first-child{background:#1976d2;color:#fff}.payroll-edit-modal-content .modal-actions button:first-child:hover{background:#0d47a1}.payroll-edit-modal-content .modal-actions button:last-child{background:#e0e0e0;color:#333}.payroll-edit-modal-content .modal-actions button:last-child:hover{background:#c7c7c7}@keyframes slideUp{0%{transform:translateY(25px);opacity:0}to{transform:translateY(0);opacity:1}}.payroll-edit-modal-content::-webkit-scrollbar{width:7px}.payroll-edit-modal-content::-webkit-scrollbar-thumb{background:#b8b8b8;border-radius:10px}.payroll-edit-modal-content::-webkit-scrollbar-thumb:hover{background:#9e9e9e}.container-report{font-family:Poppins,sans-serif;height:100%;color:#333}.report-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-bottom:25px;gap:10px}.title-section h2{font-size:22px;font-weight:500;color:#000;margin:0}.subtitle{font-size:14px;color:#555;margin-top:3px}.actions-report{display:flex;align-items:center;gap:10px}.actions-report select,.actions-report button{padding:8px 14px;border-radius:6px;font-size:14px;border:1px solid #d0d0d0;outline:none;transition:all .25s ease}.actions-report select:hover{border-color:#1976d2}.actions-report button{color:#fff;border:none;cursor:pointer;background-color:#406892;font-weight:500;box-shadow:0 2px 5px #1976d24d}.actions-report button:hover{transform:translateY(-2px);box-shadow:0 4px 8px #1976d266}.summary-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-bottom:30px}.card{background:#fff;border-radius:10px;padding:20px;box-shadow:0 2px 6px #00000014;text-align:center;transition:all .25s ease}.card:hover{transform:translateY(-4px);box-shadow:0 4px 12px #0000001f}.card h4{font-size:15px;font-weight:600;color:#1976d2;margin-bottom:5px}.card p{font-size:16px;font-weight:700;color:#333;margin:0}.card.total{background:linear-gradient(90deg,#1976d2,#42a5f5);color:#fff;box-shadow:0 3px 8px #1976d266}.card.total h4,.card.total p{color:#fff}.charts-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:25px;margin-bottom:30px}.chart-box{background:#fff;border-radius:12px;padding:18px;box-shadow:0 3px 8px #00000014;transition:all .3s ease}.chart-box:hover{transform:translateY(-3px);box-shadow:0 5px 12px #0000001f}.chart-box h3{font-size:16px;font-weight:600;margin-bottom:12px;color:#333}.table-wrapper{overflow-x:auto;border-radius:10px;background:#fff;box-shadow:0 2px 6px #00000014}.report-table{width:100%;border-collapse:collapse;min-width:700px}.report-table th,.report-table td{padding:12px 16px;border-bottom:1px solid #eee;text-align:left}.report-table th{background:linear-gradient(90deg,#1976d2,#42a5f5);color:#fff;font-weight:600;font-size:14px;text-transform:uppercase}.report-table td{font-size:14px}.report-table tr:hover{background-color:#f9f9f9}@media (max-width: 768px){.charts-container{grid-template-columns:1fr}.summary-cards{grid-template-columns:1fr 1fr}.title-section h2{font-size:18px}.actions-report button,.actions-report select{font-size:13px;padding:7px 10px}}.table-wrapper::-webkit-scrollbar{height:8px}.hrd-report-header .title-section h2{color:#000!important}.hrd-report-header .subtitle{color:#5a8ab0!important}.btn-report{padding:8px 14px;border:none;border-radius:6px;cursor:pointer;color:#fff;background-color:#406892;transition:.25s ease;font-weight:500;box-shadow:0 2px 5px #4068924d}.btn-report:hover{background-color:#345675;transform:translateY(-2px)}.card-hrd{border-top:4px solid #406892;background:#fff;transition:.3s ease}.card-hrd h4{color:#406892!important}.card-hrd:hover{transform:translateY(-4px);box-shadow:0 4px 10px #40689233}.card-hrd-total{background:#406892!important;color:#fff!important;box-shadow:0 4px 10px #40689266}.card-hrd-total h4,.card-hrd-total p{color:#fff!important}.chart-box-hrd{border-left:4px solid #406892}.chart-box-hrd h3{color:#406892!important}.report-table-hrd thead th{background-color:#406892!important;color:#fff!important;font-weight:600;font-size:14px}.report-table-hrd tbody tr:hover{background:#eef3f8!important}.report-table-hrd td{font-size:14px;padding:12px 16px;border-bottom:1px solid #eee}.hrd-report-header select{border:1px solid #b9c7d9;padding:8px 12px;border-radius:6px;transition:.3s}.hrd-report-header select:focus{border-color:#406892}.gradient-removed{background:none!important}.container-profile{display:flex;justify-content:center;align-items:center;height:85vh;font-family:Poppins,sans-serif}.profile-card{background:#fff;padding:30px;border-radius:14px;box-shadow:0 4px 15px #0000001a;text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center;width:350px;position:relative;transition:.3s}.profile-card:hover{transform:translateY(-4px);box-shadow:0 8px 20px #00000026}.profile-info h2{color:#1976d2;margin:10px 0 5px}.profile-info p{color:#555;margin:0 0 10px;font-size:14px}.role-badge{background:#1976d2;color:#fff;padding:5px 12px;border-radius:8px;font-size:13px;font-weight:500}.profile-actions{margin-top:20px;display:flex;flex-direction:column;gap:8px}.profile-actions button{border:none;border-radius:6px;padding:8px 14px;cursor:pointer;font-size:13px;font-weight:600;transition:.2s}.edit-btn{background:#1976d2;color:#fff}.password-btn{background:#fbc02d;color:#333}.save-btn{background:#43a047;color:#fff}.cancel-btn{background:#e53935;color:#fff}.profile-actions button:hover{opacity:.9}.name-input{font-size:18px;font-weight:600;color:#1976d2;border:1px solid #ccc;border-radius:6px;padding:6px 10px;text-align:center;outline:none}.modal{position:fixed;inset:0;background:#00000073;display:flex;justify-content:center;align-items:center;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:fadeIn .3s ease;z-index:1000}.modal-content{background:#fffffff7;border-radius:14px;width:360px;padding:25px 58px;box-shadow:0 8px 25px #00000026;text-align:left;animation:popIn .3s ease;transition:all .25s ease;font-family:Poppins,sans-serif}.modal-content h3{color:#1565c0;font-size:18px;font-weight:700;margin-bottom:18px;text-align:center;border-bottom:2px solid #e3f2fd;padding-bottom:10px}.modal-content label{display:block;font-size:13px;margin-bottom:5px;color:#444;font-weight:500}.modal-content input{width:100%;padding:9px 12px;margin-bottom:14px;border:1px solid #ccc;border-radius:8px;font-size:13px;outline:none;transition:all .2s ease}.modal-content input:focus{border-color:#1976d2;box-shadow:0 0 0 2px #1976d226}.modal-actions{display:flex;justify-content:space-between;margin-top:10px;gap:10px}.modal-actions button{flex:1;border:none;border-radius:8px;padding:10px 14px;cursor:pointer;font-size:13px;font-weight:600;transition:all .25s ease}.modal-actions button:first-child{background:linear-gradient(90deg,#1976d2,#42a5f5);color:#fff;box-shadow:0 3px 6px #1976d24d}.modal-actions button:first-child:hover{background:linear-gradient(90deg,#1565c0,#2196f3);transform:translateY(-2px)}.modal-actions button:last-child{background:#e0e0e0;color:#333}.modal-actions button:last-child:hover{background:#d5d5d5}@keyframes popIn{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}.performance-container{height:100%;font-family:Poppins,sans-serif;color:#222;padding-top:10px}.performance-header{display:flex;justify-content:space-between;align-items:center}.performance-header h2{font-weight:500;color:#333}.performance-header select{padding:8px 12px;border-radius:6px;border:1px solid #ccc;font-size:14px;cursor:pointer}.weight-settings{background:#fff;border-radius:12px;padding:25px;margin:25px 0;box-shadow:0 2px 10px #00000014}.weight-settings h4{margin-bottom:15px;color:#333;font-size:18px;font-weight:600;display:flex;align-items:center;gap:8px}.weight-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}.weight-item{background:#fafafa;border:1px solid #e5e7eb;border-radius:10px;padding:15px 18px;transition:all .2s ease-in-out;position:relative}.weight-item:hover{border-color:#a3c4f3;box-shadow:0 2px 8px #2196f31a}.weight-header{display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer}.weight-header label{font-weight:600;color:#222;flex:1}.weight-header input[type=number]{width:60px;border:1px solid #ccc;border-radius:6px;padding:5px;text-align:center;font-size:14px;transition:border-color .2s}.weight-header input[type=number]:focus{outline:none;border-color:#2196f3;box-shadow:0 0 3px #2196f34d}.weight-header span{font-weight:500;color:#666}.expand-btn{background:transparent;border:none;font-size:16px;cursor:pointer;color:#555;transition:transform .2s}.expand-btn:hover{color:#2196f3;transform:scale(1.1)}.weight-detail{margin-top:12px;border-top:1px solid #e5e7eb;padding-top:10px;animation:slideDown .3s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.division-section{background:#f9fafb;border-radius:8px;padding:10px 12px;margin-bottom:12px;border:1px solid #e0e0e0}.division-section h5{font-size:14px;font-weight:600;color:#333;margin-bottom:6px}.division-section ul{padding-left:20px;margin-bottom:6px;color:#555;font-size:14px}.division-section li{list-style:disc;margin-bottom:4px}.division-section input[type=text]{width:100%;border:1px solid #d0d0d0;border-radius:6px;padding:6px 8px;font-size:13px;margin-top:4px}.division-section input[type=text]:focus{outline:none;border-color:#2196f3;box-shadow:0 0 3px #2196f333}.total-weight{margin-top:15px;font-weight:500;color:#444;text-align:right}.total-weight strong{color:#2196f3}.quick-search{position:relative;width:98%;margin-bottom:25px}.search-input{width:97%;padding:10px 14px;border-radius:8px;border:1px solid #ccc;font-size:14px;background:#fff}.search-input:focus{outline:none;border-color:#007bff}.search-dropdown{position:absolute;top:42px;left:0;width:100%;background:#fff;border:1px solid #ddd;border-radius:8px;max-height:200px;overflow-y:auto;box-shadow:0 4px 10px #0000001a;z-index:100}.search-item{display:flex;align-items:center;gap:10px;padding:8px 12px;cursor:pointer;transition:background .2s ease}.search-item:hover{background:#f2f6ff}.search-item img{width:30px;height:30px;border-radius:50%}.ranking-section{margin-top:30px}.ranking-section h3{margin-bottom:15px;font-weight:600}.ranking-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}.ranking-card{background:#fff;border-radius:12px;padding:15px;display:flex;align-items:center;gap:14px;box-shadow:0 3px 6px #00000014;transition:transform .2s ease,box-shadow .2s ease;cursor:pointer}.ranking-card:hover{transform:translateY(-2px);box-shadow:0 5px 10px #00000026}.rank-number{font-size:18px;font-weight:700;color:#007bff}.rank-number.low{color:#e74c3c}.ranking-photo{width:50px;height:50px;border-radius:50%;object-fit:cover}.ranking-card h4{margin:0;font-size:15px;font-weight:600}.ranking-card p{margin:2px 0;font-size:13px;color:#555}.modal-overlay-performance{position:fixed;inset:0;background:#00000073;display:flex;justify-content:center;align-items:center;z-index:99999;animation:fadeIn .2s ease}.modal-performance{background:#fff;border-radius:14px;width:820px;max-width:95%;padding:25px 28px 35px;position:relative;box-shadow:0 8px 24px #00000026;animation:scaleIn .25s ease;height:700px;overflow:scroll}.close-btn{position:absolute;top:12px;right:14px;border:none;background:transparent;font-size:22px;color:#666;cursor:pointer;transition:color .2s ease}.close-btn:hover{color:#000}.modal-header{display:flex;align-items:center;gap:16px}.modal-photo{width:90px;height:90px;border-radius:50%;object-fit:cover;border:3px solid #007bff20}.modal-info h2{margin:0;font-size:20px;font-weight:600}.modal-info p{margin:3px 0;font-size:14px;color:#555}.modal-info .department{color:#007bff;font-weight:500}.status-active{color:#4caf50;font-weight:600}.status-inactive{color:#e74c3c;font-weight:600}.modal-section{margin-top:20px}.kpi-grid{margin-top:8px}.kpi-item{margin-bottom:12px}.kpi-header{display:flex;justify-content:space-between;font-size:14px;margin-bottom:5px}.kpi-bar{background:#eee;height:10px;border-radius:8px;overflow:hidden}.kpi-fill{height:10px;border-radius:8px;transition:width .3s ease-in-out}.kpi-total{text-align:right;font-weight:600;margin-top:12px}.kpi-total-value{color:#007bff}.course-list{list-style:none;margin-top:10px;padding:0}.course-list li{background:#f6f8fc;padding:8px 10px;margin-bottom:6px;border-radius:6px;font-size:14px;display:flex;align-items:center;gap:6px}.course-list .check{color:#4caf50}.no-course{color:#888;font-style:italic}.divider-performance{margin:18px 0;border:none;border-top:1px solid #ddd}@keyframes scaleIn{0%{transform:scale(.97);opacity:0}to{transform:scale(1);opacity:1}}.task-list{list-style:none;padding:0;margin-top:10px}.task-item{display:flex;justify-content:space-between;align-items:center;background:#f7f9fc;padding:8px 12px;border-radius:6px;margin-bottom:6px;font-size:14px}.task-status{font-weight:600;text-transform:capitalize}.task-item.selesai .task-status{color:#4caf50}.task-item.proses .task-status{color:#ff9800}.task-item.tertunda .task-status{color:#e74c3c}.analysis-section{background:#f8faff;border-left:4px solid #007bff;padding:12px 16px;border-radius:8px;margin-top:10px}.analysis-section p{margin:6px 0;font-size:14px}.scrollable-kpi{max-height:250px;overflow-y:auto;padding-right:8px;margin-top:10px}.scrollable-kpi::-webkit-scrollbar{width:6px}.scrollable-kpi::-webkit-scrollbar-thumb{background:#ccc;border-radius:4px}.kpi-item-detailed{margin-bottom:16px;background:#f9f9f9;border-radius:8px;padding:10px 12px}.kpi-notes{font-size:13px;color:#555;margin-top:6px;background:#fff;padding:6px 10px;border-radius:6px;border-left:3px solid #007bff20}.location-overlay{position:absolute;bottom:12px;left:12px;background:#0000008c;color:#fff;padding:6px 12px;border-radius:6px;font-size:14px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:10}.camera-box{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px}.container-login{width:100%;height:100vh;background-color:#fff;display:flex;justify-content:center;align-items:center;font-family:Inter,sans-serif;min-width:400px}.wrapper-login{width:100%;height:50%;display:flex;justify-content:center;align-items:center;gap:2%}.wrapper-login hr{width:1px;height:60%;background-color:#004a73;border:none;margin:0 20px}.left-login{width:20%;height:50%;display:flex;flex-direction:column;gap:16px}.left-login img{width:100%;object-fit:cover}.left-login h4{font-size:22px;color:#004a73;font-weight:500;line-height:1.3}.right-login{width:20%;height:50%;gap:14px;display:flex;flex-direction:column}.right-login .title-login h1{font-size:26px;color:#004a73;font-weight:600;line-height:1.3}.input-login{display:flex;flex-direction:column;gap:16px}.input-login input{width:300px!important;height:45px;border:1px solid #004a73;border-radius:6px;padding:10px 14px;font-size:15px;font-weight:400}.button-login button{width:300px;height:45px;font-size:16px;font-weight:600;background-color:#004a73;color:#fff;border-radius:6px}.forgot-password{margin-top:6px}.forgot-password a{margin-top:6px;font-size:14px}@media (max-width: 1024px){.container-login{width:100%;height:100vh;background-color:#fff;display:flex;justify-content:center;align-items:center;font-family:Inter,sans-serif}.wrapper-login{width:100%;height:50%;display:flex;justify-content:center;align-items:center;gap:2%}.wrapper-login hr{width:1px;height:60%;background-color:#004a73;border:none;margin:0 20px}.left-login{width:30%;height:50%;display:flex;flex-direction:column;gap:16px}.left-login img{width:100%;object-fit:cover}.left-login h4{font-size:18px;color:#004a73;font-weight:400;line-height:1.3}.right-login{width:20%;height:50%;gap:8px;display:flex;flex-direction:column}.right-login .title-login h1{font-size:20px;color:#004a73;font-weight:500;line-height:1.3}.input-login{display:flex;flex-direction:column;gap:16px}.input-login input{width:250px!important;height:40px;border:1px solid #004a73;border-radius:6px;padding:10px 14px;font-size:12px;font-weight:400}.button-login button{width:300px;height:40px;font-size:12px;font-weight:500;background-color:#004a73;color:#fff;border-radius:6px}.forgot-password{margin-top:6px}.forgot-password a{margin-top:6px;font-size:12px}}@media (max-width: 728px){.container-login{width:100%;height:100vh;background-color:#fff;display:flex;justify-content:center;align-items:center;font-family:Inter,sans-serif}.wrapper-login{width:90%;height:90%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2%}.wrapper-login hr{width:80%;height:1px;background-color:#004a73;border:none;margin:0 20px}.left-login{width:100%;height:50%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:16px}.left-login img{width:50%;object-fit:cover}.left-login h4{font-size:18px;color:#004a73;font-weight:400;line-height:1.3}.right-login{width:100%;height:100%;gap:8px;display:flex;flex-direction:column;justify-content:flex-start;align-items:center}.right-login .title-login h1{font-size:20px;color:#004a73;font-weight:500;line-height:1.3}.input-login{display:flex;flex-direction:column;gap:16px}.input-login input{width:100%!important;height:40px;border:1px solid #004a73;border-radius:6px;padding:10px 14px;font-size:12px;font-weight:400}.button-login button{width:300px;height:40px;font-size:12px;font-weight:500;background-color:#004a73;color:#fff;border-radius:6px}.forgot-password{margin-top:6px}.forgot-password a{margin-top:6px;font-size:12px}}@media (max-width: 425px){.wrapper-login{gap:22px;padding:0 16px}.left-login,.right-login{width:100%}.left-login img{width:70%}.left-login h4{font-size:17px}.right-login .title-login h1{font-size:20px}.input-login input{width:100%!important;max-width:300px;height:46px;font-size:14px}.button-login button{width:100%;max-width:300px;height:46px;font-size:15px}.forgot-password a{font-size:13px}}.input-container{display:flex;flex-direction:column;gap:6px}.input-label{font-size:14px;font-weight:500;color:#333}.required{color:red}.input-field{border:1px solid #ccc;border-radius:6px;padding:8px 12px;font-size:14px;outline:none;transition:all .2s ease;width:100%;box-sizing:border-box}.input-field:focus{border-color:#007bff;box-shadow:0 0 0 2px #007bff33}.input-field:disabled{background-color:#f5f5f5;cursor:not-allowed}.input-error{border-color:red}.input-error-text{font-size:12px;color:red;margin-top:2px}.container-forgot{display:flex;align-items:center;justify-content:center;height:100vh;background:#f7f8fa}.wrapper-forgot{display:flex;align-items:center;justify-content:center;background:#fff;border-radius:20px;box-shadow:0 4px 10px #0000001a;padding:40px 60px}.left-forgot{display:flex;flex-direction:column;align-items:center;justify-content:center}.left-forgot img{width:120px;object-fit:contain}.left-forgot h4{color:#004a73;margin-top:10px}.divider{width:1px;height:300px;background-color:#ddd;margin:0 40px}.right-forgot{position:relative;display:flex;flex-direction:column;align-items:center}.back-btn{position:absolute;top:0;right:0;background:none;border:none;color:#004a73;font-weight:600;cursor:pointer;font-size:14px;transition:.3s}.back-btn:hover{color:#f6b500}.card-forgot{background-color:#fff;border-radius:16px;padding:40px 50px;text-align:center;min-width:350px}.title-forgot h1{color:#1a2b5f;margin-bottom:10px}.title-forgot p{color:#666;margin-bottom:25px;font-size:14px}.form-forgot{display:flex;flex-direction:column;align-items:center;gap:15px}.button-forgot button{width:300px;height:45px;background-color:#004a73;color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:600}.button-forgot button:hover{background-color:#f6b500;color:#004a73;transition:.3s}.success-forgot{text-align:center;color:#004a73}.form-container{max-width:600px;margin:50px auto;background:#fff;padding:30px 40px;border-radius:12px;box-shadow:0 5px 20px #0000001a;font-family:Poppins,sans-serif}.form-container h2{text-align:center;margin-bottom:10px;color:#007bff}.form-container p{text-align:center;font-size:14px;margin-bottom:25px;color:#555}.job-form{display:flex;flex-direction:column;gap:15px}.job-form label{font-weight:600;font-size:14px;color:#333}.job-form input[type=text],.job-form input[type=email],.job-form input[type=file]{padding:10px;border-radius:8px;border:1px solid #ccc;font-size:14px;outline:none;transition:.2s}.job-form input:focus{border-color:#007bff}.job-form button{background-color:#007bff;border:none;color:#fff;padding:10px;border-radius:8px;font-size:15px;cursor:pointer;transition:.3s}.job-form button:hover{background-color:#0056b3}.container-leftbar{width:100%;height:100%;box-shadow:0 4px 10px #0003;background-color:#f8f8f8}.actions-reimburse-user{display:flex;gap:10px}.actions-reimburse-user select,.actions-reimburse-user button{padding:6px 10px;border-radius:6px;border:1px solid #ccc;font-size:13px}.actions-reimburse-user button{background:#406892;color:#fff;border:none;cursor:pointer}.actions-reimburse-user button:hover{background:linear-gradient(90deg,#1565c0,#1976d2)}.reimburse-table-staff thead th{background-color:#f5f5f5!important;color:#333!important;font-weight:600;border-bottom:1px solid #ddd}.payroll-table-staff{width:100%;border-collapse:collapse;background-color:#ffffffc5;box-shadow:0 2px 5px #0000001a;border-radius:8px;overflow:hidden}.payroll-table-staff th,.payroll-table-staff td{padding:10px;border-bottom:1px solid #eee;text-align:left}.payroll-table-staff th{background-color:#f1f1f1;font-weight:600}.payroll-table-staff tr:hover{background-color:#f9f9f9}.payroll-table-staff th{background:linear-gradient(90deg,#d21919,#f54242);color:#fff}.payroll-table-staff td b{color:#1976d2}.payroll-table-staff thead th{background-color:#f5f5f5!important;color:#333!important;font-weight:600}.payroll-table-staff{width:100%;border-collapse:collapse;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 1px 4px #00000014}.payroll-table-staff thead th{background:#f5f5f5!important;color:#333!important;font-weight:600;padding:12px 10px;font-size:13px;border-bottom:1px solid #e0e0e0}.payroll-table-staff tbody td{padding:10px 12px;font-size:12px;color:#333;border-bottom:1px solid #f1f1f1}.payroll-table-staff tbody tr:hover{background:#fafafa}.payroll-table-staff tbody td b{color:#1976d2;font-weight:600}.modal-content{background:#fff;padding:22px 26px;border-radius:12px;width:430px;animation:fadeIn .25s ease;box-shadow:0 6px 18px #00000026;border:1px solid #e8e8e8}.modal-content h3{background:#f5f5f5!important;padding:12px 14px;border-radius:8px;font-size:16px;margin:0 0 15px;color:#333;border:1px solid #e0e0e0}.modal-content p{font-size:13px;margin:3px 0}.modal-actions{display:flex;justify-content:space-between;margin-top:12px}.modal-actions button{flex:1;margin:0 4px;padding:9px;border-radius:8px;font-weight:600;border:none;cursor:pointer;transition:.2s ease}.modal-actions button:first-child{background:#e0e0e0;color:#333}.modal-actions button:first-child:hover{background:#d5d5d5}.modal-actions .btn-export{background:#2ecc71;color:#fff}.modal-actions .btn-export:hover{background:#27ae60}.PerformanceUser-user-container{font-family:Poppins,sans-serif;color:#222;display:flex;flex-direction:column}.PerformanceUser-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}.PerformanceUser-header h2{font-size:1rem;font-weight:500;color:#000}.PerformanceUser-header p{font-size:1rem;color:#555}.kpi-section-user{border-radius:16px;transition:all .3s ease;display:flex;flex-direction:column}.kpi-section-user:hover{transform:translateY(-3px)}.kpi-section-user h3{color:#2b2b6b;margin-bottom:20px;font-weight:600}.kpi-grid-user{display:flex;flex-direction:column;margin-left:10px}.kpi-item-user{background:linear-gradient(180deg,#f9fafc,#fff);border-radius:12px;border:1px solid #ececec;transition:.3s ease;margin-left:10px}.kpi-item-user:hover{box-shadow:0 4px 12px #2b2b6b1a;transform:translateY(-2px)}.kpi-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-weight:500;color:#333;gap:15px}.kpi-value{font-weight:600;color:#1e88e5;font-size:.95rem}.kpi-bar{width:100%;height:10px;background:#e3e3e3;border-radius:6px;overflow:hidden;margin-left:10px}.kpi-fill{height:100%;border-radius:6px;transition:width .5s ease-in-out}.kpi-total{text-align:right;margin-top:25px;margin-bottom:25px;font-weight:600;color:#333}.total-score{color:#4caf50;font-size:1.15rem}.task-section{background:#fff;border-radius:16px;padding:25px 30px;box-shadow:0 6px 16px #0000000d;transition:all .3s ease}.task-section:hover{transform:translateY(-3px)}.task-section h3{color:#2b2b6b;font-weight:600;margin-bottom:15px}.add-task-form{display:flex;gap:10px;margin-bottom:25px}.add-task-form input{flex:1;padding:12px 15px;border:1px solid #ccc;border-radius:10px;font-size:.95rem;transition:.3s}.add-task-form input:focus{border-color:#2b2b6b;outline:none;box-shadow:0 0 0 3px #2b2b6b1a}.add-task-form button{background-color:#2b2b6b;color:#fff;border:none;padding:12px 18px;border-radius:10px;cursor:pointer;font-weight:500;transition:.3s}.add-task-form button:hover{background-color:#3d3fae}.kanban-board{display:flex;gap:25px;justify-content:space-between;flex-wrap:wrap}.kanban-column{flex:1;min-width:300px;background:#f9fafc;border-radius:14px;padding:15px;border:1px solid #e3e6ef;box-shadow:0 3px 8px #0000000a;transition:all .3s ease}.kanban-column:hover{transform:translateY(-2px)}.kanban-column:nth-child(1) h4{background-color:#fce6d1;color:#b05a00}.kanban-column:nth-child(2) h4{background-color:#e6f0ff;color:#0c56b3}.kanban-column:nth-child(3) h4{background-color:#dff7e3;color:#1e7b2b}.kanban-column h4{text-align:center;padding:10px;margin-bottom:15px;border-radius:8px;font-size:1rem;font-weight:600}.kanban-card{background:#fff;border-radius:12px;padding:14px;margin-bottom:12px;border:1px solid #e6e9f0;box-shadow:0 2px 8px #0000000d;transition:.3s}.kanban-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000014}.kanban-card p{margin-bottom:10px;font-weight:500;font-size:.95rem;color:#333}.kanban-card select{width:100%;padding:8px 10px;border:1px solid #ccc;border-radius:8px;font-size:.9rem;background:#f9fafc;transition:.3s}.kanban-card select:focus{border-color:#2b2b6b;outline:none;box-shadow:0 0 0 3px #2b2b6b1a}@media (max-width: 768px){.kanban-board{flex-direction:column}.PerformanceUser-header{flex-direction:column;align-items:flex-start}.PerformanceUser-header h2{font-size:1.5rem}.kpi-grid{grid-template-columns:1fr}}.container-leftbar{width:100%;height:100%;box-shadow:0 4px 10px #0003}.top-leftbar{width:100%;height:8%;display:flex;justify-content:center;align-items:center;gap:5%}.top-leftbar h1{font-size:20px;font-weight:500;color:#000}.menu-leftbar{display:flex;flex-direction:column;justify-content:center;gap:5px;padding:10px}.menu-leftbar span{font-size:14px;color:#000;background-color:none;padding:10px;border-radius:5px;cursor:pointer}.menu-leftbar span:hover,.menu-leftbar span.active-menu{font-size:14px;color:#000;background-color:#eee;padding:10px;border-radius:5px}.title-leftbar h1{font-size:20px;margin-bottom:20px}.menu-leftbar span{display:block;padding:10px 12px;cursor:pointer;border-radius:6px;color:#333}.menu-leftbar span:hover{background-color:#e0e0e0}.submenu span{font-size:14px;padding:8px 10px}.submenu{margin-left:15px;display:flex;flex-direction:column}.submenu span{font-size:14px;padding:6px 10px;cursor:pointer;border-radius:4px;color:#333}.submenu span:hover{background-color:#eaeaea}.active-menu{background-color:#1976d2;color:#fff}.container-dashboard{width:100%;height:90vh;display:flex;flex-direction:column;gap:20px;box-sizing:border-box}.top-container-dashboard{display:flex;justify-content:space-between;align-items:stretch;width:100%;height:25%;gap:2%}.left-top-container-dashboard,.right-top-container-dashboard{flex:1;display:flex}.bottom-container-dashboard{width:100%;height:70%;display:flex;justify-content:center;align-items:center}.left-top-container-dashboard{background-color:#fef9f3}.right-top-container-dashboard{background-color:#f3f9ff}.whats-happening-card{width:100%;height:100%;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:16px 24px;background-color:#fff;border-radius:12px;box-sizing:border-box;gap:16px}.whats-happening-card:hover{background-color:#f7f7f7}.whats-happening-card h2{font-size:18px;font-weight:500;color:#000}.happening-content{display:flex;align-items:center;justify-content:space-between;width:90%;gap:30px}.today-event{display:flex;align-items:center;gap:12px}.today-event img{width:80px;height:80px;object-fit:contain}.event-info h3{font-size:14px;font-weight:600;margin:0;color:#000}.event-info p{font-size:12px;color:#555;margin-top:2px}.divider-dashboard{width:2px;height:60px;background-color:#e0e0e0}.next-event{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:6px}.next-label{font-size:13px;color:#666;font-weight:500}.next-info{display:flex;align-items:center;gap:10px}.next-info img{width:60px;height:60px;border-radius:50%;object-fit:cover}.next-info h3{font-size:14px;font-weight:600;color:#000;margin:0}.next-info p{font-size:12px;color:#555;margin:0}@media (max-width: 768px){.happening-content{flex-direction:column;align-items:center;gap:20px}.divider{display:none}}.leave-form{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}.leave-form label{display:flex;flex-direction:column;font-weight:500}.leave-form select,.leave-form textarea{margin-top:5px;padding:8px;border:1px solid #ccc;border-radius:8px}.btn-primary{background-color:#3134ae;color:#fff;border:none;padding:10px 16px;border-radius:8px;cursor:pointer;font-weight:600;transition:.3s}.btn-primary:hover{background-color:#24258a}.requests-modal{position:fixed;inset:0;background:#0000008c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:center;z-index:9999;animation:fadeIn .3s ease}.requests-content{background:#fff;border-radius:16px;padding:24px 28px;width:500px;max-height:80vh;overflow-y:auto;box-shadow:0 12px 25px #00000026;animation:slideUp .3s ease}.requests-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1.5px solid #eee;padding-bottom:8px;margin-bottom:14px}.requests-header h3{font-size:18px;font-weight:600;color:#1a1a1a;display:flex;align-items:center;gap:6px}.requests-header h3:before{content:"🧾"}.requests-header button{background:#f3f3f3;border:none;border-radius:50%;width:28px;height:28px;font-size:16px;cursor:pointer;transition:all .2s ease}.requests-header button:hover{background:#ff6b6b;color:#fff}.requests-list{display:flex;flex-direction:column;gap:10px}.request-item{background:#f9fafb;border-radius:10px;padding:10px 14px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:all .25s ease;border:1px solid transparent}.request-item:hover{transform:translateY(-2px);background:#fff;border:1px solid #e3e7ef;box-shadow:0 4px 10px #0000000d}.request-info{display:flex;flex-direction:column;gap:2px}.request-info strong{font-weight:600;color:#1e1e1e}.request-reason{font-size:12px;color:#777;margin:0}.request-status{font-size:13px;font-weight:600;border-radius:8px;padding:4px 10px;transition:.25s ease;text-transform:uppercase;letter-spacing:.4px}.request-item.approved .request-status{background-color:#2ecc711f;color:#27ae60;border:1px solid rgba(46,204,113,.2)}.request-item.pending .request-status{background-color:#f39c121f;color:#f39c12;border:1px solid rgba(243,156,18,.2)}.request-item.rejected .request-status{background-color:#e74c3c1f;color:#e74c3c;border:1px solid rgba(231,76,60,.2)}#POST .feed-section{width:100%;height:100%;background-color:#fff;border-radius:12px;padding:16px 20px;box-sizing:border-box;display:flex;flex-direction:column;gap:14px}.feed-input{display:flex;gap:10px;align-items:flex-start}.feed-input textarea{flex:1;min-height:90px;resize:none;border-radius:10px;border:1px solid #ddd;padding:10px 12px;font-size:14px;outline:none}.feed-input button{height:38px;padding:0 18px;background-color:#406892;color:#fff;font-weight:500;border:none;border-radius:8px;cursor:pointer;transition:.2s}.feed-input button:hover{background-color:#0056b3}.feed-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding-right:6px;margin-top:20px;height:320px}.feed-list::-webkit-scrollbar{width:6px}.feed-list::-webkit-scrollbar-thumb{background-color:#ccc;border-radius:4px}.feed-item{display:flex;align-items:flex-start;gap:10px;padding-bottom:10px;border-bottom:1px solid #eee}.feed-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover}.feed-content{flex:1}.feed-name{font-weight:600;margin:0;color:#000}.feed-message{font-size:13px;color:#444;margin:4px 0;white-space:pre-line}.feed-meta{display:flex;gap:12px;font-size:12px;color:#777}.calendar-modal{position:fixed;inset:0;background:#0000008c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:center;z-index:9999;animation:fadeIn .3s ease}.calendar-content{background:#ffffffe6;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border-radius:16px;padding:28px;width:520px;max-height:85vh;overflow-y:auto;box-shadow:0 12px 30px #00000040;animation:slideUp .35s ease}.calendar-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1.5px solid #eee;padding-bottom:10px;margin-bottom:14px}.calendar-header h3{font-size:20px;font-weight:600;color:#1a1a1a;letter-spacing:.3px;display:flex;align-items:center;gap:6px}.calendar-header button{background:#f2f2f2;border:none;border-radius:50%;width:28px;height:28px;font-size:16px;color:#333;cursor:pointer;transition:all .2s ease}.calendar-header button:hover{background:#ff6b6b;color:#fff}.calendar-legend{display:flex;justify-content:space-around;margin-top:16px;font-size:14px;color:#333;background:#f9fafc;border-radius:10px;padding:10px 0}.calendar-dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:6px}.calendar-info{margin-top:24px;background:#fdfdfd;border:1px solid #e7e7e7;border-radius:12px;padding:14px 18px}.calendar-info h4{font-size:15px;font-weight:600;color:#1e1e1e;margin-bottom:12px;display:flex;align-items:center;gap:5px}.calendar-info h4:before{content:"🎉"}.calendar-info ul{list-style:none;padding:0;margin:0}.calendar-info li{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px dashed #e5e5e5}.calendar-info li:last-child{border-bottom:none}.calendar-info li img{width:34px;height:34px;border-radius:50%;border:2px solid #f1c40f;object-fit:cover}.calendar-info li span{font-size:14px;color:#333}@keyframes slideUp{0%{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}.react-calendar{width:100%;border:none;border-radius:12px;background:linear-gradient(145deg,#fff,#f8f9fb);box-shadow:inset 0 1px #fff9,0 4px 14px #00000014;padding:12px 10px 16px;font-family:Inter,sans-serif;color:#333}.react-calendar__navigation{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font-weight:600;font-size:15px}.react-calendar__navigation button{background:#f3f4f6;border:none;border-radius:8px;color:#333;padding:6px 10px;cursor:pointer;font-size:16px;transition:all .25s ease}.react-calendar__navigation button:hover{background:#406892;color:#fff;transform:scale(1.05)}.react-calendar__month-view__weekdays{text-transform:uppercase;font-size:11px;color:#888;letter-spacing:.5px}.react-calendar__month-view__weekdays__weekday{padding:4px 0}.react-calendar__tile{max-width:100%;height:45px;text-align:center;padding:5px 0;background:none;border:none;border-radius:10px;cursor:pointer;transition:all .25s ease;position:relative;font-size:14px}.react-calendar__tile:hover{background:#40689214;transform:translateY(-2px)}.react-calendar__tile--now{background:#4068921f;border:1px solid #406892;border-radius:10px;font-weight:600;color:#406892}.react-calendar__tile--active{background:#406892!important;color:#fff!important;border-radius:10px;font-weight:600}.calendar-dot{width:8px;height:8px;border-radius:50%;margin:2px auto 0}.holiday-dot{background-color:#ff5c5c;box-shadow:0 0 6px #ff5c5cb3}.birthday-dot{background-color:#f1c40f;box-shadow:0 0 6px #f1c40fb3}.calendar-legend{margin-top:16px;display:flex;justify-content:space-evenly;align-items:center;gap:10px;background:#f5f7fa;border-radius:10px;padding:8px 10px;font-size:13px;color:#444}.calendar-content::-webkit-scrollbar{width:6px}.calendar-content::-webkit-scrollbar-thumb{background-color:#9696964d;border-radius:10px}.react-calendar__tile{transition:all .25s ease}.react-calendar__tile:hover{background-color:#0000000d;transform:scale(1.02)}.react-calendar__viewContainer{animation:fadeSlide .3s ease}@keyframes fadeSlide{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.modal-leave-form{position:fixed;inset:0;background-color:#00000073;display:flex;justify-content:center;align-items:center;z-index:999;animation:fadeIn .3s ease}.modal-leave{background:#fff;border-radius:14px;width:420px;max-width:90%;padding:25px 30px;box-shadow:0 6px 25px #00000026;animation:slideUp .3s ease}@keyframes slideUp{0%{transform:translateY(15px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-leave h3{text-align:center;margin-bottom:5px;font-size:10px;color:#141648;font-weight:500}.modal-leave form{display:flex;flex-direction:column;gap:12px}.modal-leave label{font-size:14px;color:#333;font-weight:500;display:flex;flex-direction:column}.modal-leave select,.modal-leave input[type=date],.modal-leave textarea{margin-top:6px;padding:8px 10px;font-size:14px;border:1px solid #ccc;border-radius:8px;outline:none;transition:border .2s}.modal-leave select:focus,.modal-leave input[type=date]:focus,.modal-leave textarea:focus{border-color:#3134ae}.modal-leave textarea{resize:vertical;min-height:70px}.modal-buttons{display:flex;justify-content:space-between;margin-top:10px;gap:10px}.btn-primary-leave{height:38px;padding:0 18px;background-color:#406892;color:#fff;font-weight:500;border:none;border-radius:8px;cursor:pointer;transition:.2s}.btn-primary:hover{background-color:#0056b3}.btn-secondary{flex:1;background-color:#e5e5e5;color:#333;border:none;border-radius:8px;padding:8px 14px;cursor:pointer;font-weight:500;transition:.2s ease}.btn-secondary:hover{background-color:#d1d1d1}.head-employee-card{width:100%;display:flex;gap:20px;justify-content:space-between}.container-reimburse{font-family:Poppins,sans-serif}.reimburse-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:20px}.title-section h2{font-size:22px;font-weight:500;color:#1e1e1e}.total-info{margin-top:4px;font-size:14px;color:#555;background:#eef5ff;padding:5px 10px;border-radius:6px;font-weight:500}.actions-reimburse-head{display:flex;gap:10px}.actions-reimburse-head select,.actions-reimburse-head button{padding:6px 10px;border-radius:6px;border:1px solid #ccc;font-size:13px}.actions-reimburse-head button{background:#406892;color:#fff;border:none;cursor:pointer}.actions-reimburse-head button:hover{background:linear-gradient(90deg,#1565c0,#1976d2)}.table-wrapper{width:100%;overflow-x:auto;overflow-y:auto;max-height:450px;border-radius:8px}.reimburse-table{width:100%;border-collapse:collapse;background:#fff}.reimburse-table th,.reimburse-table td{padding:10px;border-bottom:1px solid #eee;font-size:13px;text-align:left}.reimburse-table th{background:linear-gradient(90deg,#1976d2,#42a5f5);color:#fff;position:sticky;top:0}.status-badge{padding:5px 10px;border-radius:5px;font-size:11px;font-weight:600;text-transform:uppercase}.status-badge.pending{background:#fff3cd;color:#856404}.status-badge.approved{background:#c8e6c9;color:#256029}.status-badge.rejected{background:#ffcdd2;color:#b71c1c}.status-badge.paid{background:#bbdefb;color:#0d47a1}.view-detail,.approve-btn,.reject-btn,.paid-btn{padding:4px 8px;border:none;border-radius:5px;margin-right:4px;cursor:pointer;font-size:11px;transition:all .3s ease}.view-detail{background:#0288d1;color:#fff}.view-detail:hover{background:#0277bd}.approve-btn{background:#43a047;color:#fff}.approve-btn:hover{background:#2e7d32}.reject-btn{background:#e53935;color:#fff}.reject-btn:hover{background:#b71c1c}.paid-btn{background:#ffb300;color:#000}.paid-btn:hover{background:#f9a825}.modal{position:fixed;inset:0;background:#00000080;display:flex;justify-content:center;align-items:center}.modal-content{background:#fff;padding:20px;border-radius:8px;width:350px;animation:fadeIn .25s ease;height:600px;overflow:scroll}.modal-content h3{color:#1976d2;margin-bottom:10px}.modal-content input,.modal-content select,.modal-content textarea{width:100%;margin-bottom:8px;padding:6px 8px;border-radius:5px;border:1px solid #ccc;font-size:13px}.modal-actions button{border:none;border-radius:6px;padding:8px 14px;cursor:pointer}.modal-actions button:first-child{background:#1976d2;color:#fff}.modal-actions button:last-child{background:#ccc}.proof-image{max-width:100%;height:auto;border-radius:6px;margin-top:8px;box-shadow:0 2px 8px #00000026}.preview-section{background:#f8f9fc;padding:8px;border-radius:6px;margin-bottom:10px;text-align:center;border:1px solid #ddd}#reimburse-detail{background:#fff;color:#333;padding:20px;border-radius:10px;width:420px;line-height:1.6;box-shadow:0 2px 8px #0000001a}#reimburse-detail h3{text-align:center;color:#1976d2;margin-bottom:15px;text-transform:uppercase}.modal-actions button:first-child{background:linear-gradient(90deg,#2196f3,#42a5f5);color:#fff;border:none;border-radius:6px;padding:8px 14px;cursor:pointer}.modal-actions button:first-child:hover{background:linear-gradient(90deg,#1976d2,#2196f3)}.proof-thumbnail{width:120px;height:auto;border-radius:6px;cursor:pointer;box-shadow:0 2px 5px #0003;transition:transform .2s ease,box-shadow .2s ease}.proof-thumbnail:hover{transform:scale(1.05);box-shadow:0 4px 10px #0000004d}.image-zoom-modal{position:fixed;inset:0;background:#000000d9;display:flex;justify-content:center;align-items:center;z-index:9999}.image-zoom-modal img{max-width:90%;max-height:85vh;border-radius:8px;box-shadow:0 2px 15px #fff3;object-fit:contain}.close-zoom{position:absolute;top:20px;right:30px;color:#fff;font-size:28px;cursor:pointer;transition:.2s}.close-zoom:hover{color:#ffb300}.reimburse-table-head thead th{background-color:#f5f5f5!important;color:#333!important;font-weight:600;border-bottom:1px solid #ddd}.container-payroll{height:700px;font-family:Poppins,sans-serif}.payroll-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.payroll-header h2{font-size:16px;font-weight:600;color:#333}.actions{display:flex;align-items:center;gap:10px}.title-section button{background-color:#1976d2;color:#fff;border:none;padding:8px 14px;border-radius:6px;cursor:pointer;font-size:12px;transition:.3s}.title-section button:hover{background-color:#0d47a1}.actions select{padding:6px 10px;border-radius:5px;border:1px solid #ccc}.payroll-table{width:100%;border-collapse:collapse;background-color:#fff;box-shadow:0 2px 5px #0000001a;border-radius:8px;overflow:hidden}.payroll-table th,.payroll-table td{padding:10px;border-bottom:1px solid #eee;text-align:left}.payroll-table th{background-color:#f31b1b;font-weight:600}.payroll-table tr:hover{background-color:#f9f9f9}.status-badge{padding:5px 10px;border-radius:5px;font-size:10px;font-weight:600;text-transform:uppercase}.status-badge.paid{background-color:#c8e6c9;color:#256029}.status-badge.unpaid{background-color:#ffcdd2;color:#b71c1c}.view-slip{background-color:#43a047;color:#fff;border:none;padding:5px 10px;border-radius:4px;cursor:pointer}.view-slip:hover{background-color:#2e7d32}.modal{position:fixed;inset:0;background-color:#00000080;display:flex;justify-content:center;align-items:center}.modal-content-payroll{background:#fff;padding:25px;border-radius:8px;width:450px;box-shadow:0 5px 15px #0003;animation:fadeIn .3s ease}.modal-content-payroll h3{margin-bottom:10px;color:#1976d2}.modal-content-payroll p{font-size:12px}.modal-content hr{margin:10px 0;border:.5px solid #ddd}.modal-content-payroll button{margin-top:15px;background-color:#1976d2;color:#fff;border:none;padding:8px 14px;border-radius:6px;cursor:pointer;width:100%}.modal-content-payroll button:hover{background-color:#0d47a1}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.actions input{padding:6px 10px;border:1px solid #ccc;border-radius:6px}.payroll-table th{background:linear-gradient(90deg,#1976d2,#42a5f5);color:#fff}.payroll-table td b{color:#1976d2}@keyframes popIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.clickable{color:#1976d2;cursor:pointer;text-decoration:underline}.send-bank{background-color:#00897b}.send-email{background-color:#ffb300;color:#000}.send-bank:hover{background-color:#00695c}.send-email:hover{background-color:#ff9800}.modal-content-payroll input,.modal-content-payroll select{width:100%;margin-bottom:8px;padding:6px 8px;border:1px solid #ccc;border-radius:6px}.modal-actions{display:flex;justify-content:space-between;margin-top:10px}.modal-actions button:first-child{background-color:#1976d2;color:#fff}.modal-actions button:last-child{background-color:#ccc}.send-bank,.send-email{border:none;border-radius:8px;padding:6px 14px;font-size:13px;font-weight:600;cursor:pointer;transition:all .25s ease;box-shadow:0 2px 5px #0000001a;display:inline-flex;align-items:center;gap:6px;letter-spacing:.3px}.send-bank{background:linear-gradient(90deg,#009688,#26a69a);color:#fff}.send-bank:hover{background:linear-gradient(90deg,#00796b,#00897b);transform:translateY(-2px);box-shadow:0 4px 8px #0096884d}.send-email{background:linear-gradient(90deg,#f9a825,#ffb300);color:#212121}.send-email:hover{background:linear-gradient(90deg,#f57f17,#f9a825);transform:translateY(-2px);box-shadow:0 4px 8px #ffb3004d}td button{margin-right:5px}.send-bank:active,.send-email:active{transform:scale(.97);box-shadow:none}.title-section{display:flex;flex-direction:row;align-items:flex-start;gap:10px}.title-section h2{font-size:22px;font-weight:500;color:#1e1e1e;margin:0}.total-info{margin-top:5px;font-size:14px;color:#555;background:#eef5ff;padding:6px 10px;border-radius:6px;font-weight:500;box-shadow:0 1px 3px #00000014}.total-info strong{color:#1976d2}.payroll-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:10px}.table-wrapper{width:100%;overflow-x:auto;overflow-y:auto;max-height:450px;border-radius:8px;box-shadow:0 1px 3px #0000001a}.table-wrapper::-webkit-scrollbar{height:8px;width:8px}.table-wrapper::-webkit-scrollbar-thumb{background:#b0bec5;border-radius:4px}.table-wrapper::-webkit-scrollbar-thumb:hover{background:#90a4ae}.table-wrapper::-webkit-scrollbar-track{background:#f5f5f5;border-radius:4px}.add-btn{background:#2196f3;color:#fff;border:none;border-radius:6px;padding:8px 14px;cursor:pointer;font-weight:600;transition:.2s}.add-btn:hover{background:#1976d2}.modal-content{background:#fff;color:#333;border-radius:10px;padding:20px;max-width:400px;margin:auto;box-shadow:0 4px 10px #0003}.modal-actions{display:flex;justify-content:space-between;margin-top:20px}.btn-export{background-color:#2ecc71;color:#fff;border:none;padding:8px 12px;border-radius:6px;cursor:pointer;font-weight:500}.btn-export:hover{background-color:#27ae60}.payroll-table-head thead th{background-color:#f5f5f5!important;color:#333!important;font-weight:600}.performance-head-container{font-family:Poppins,sans-serif;color:#222;display:flex;flex-direction:column;gap:10px}.performance-head-container h2{color:#2b2b6b;font-size:1.8rem;font-weight:600}.assign-task-section{background:#fff;padding:20px;border-radius:12px;margin-bottom:25px;box-shadow:0 4px 15px #0000000d}.assign-form{display:flex;gap:10px;flex-wrap:wrap}.assign-form input,.assign-form select{padding:10px 12px;border:1px solid #ccc;border-radius:8px;font-size:.95rem}.assign-form button{background:#2b2b6b;color:#fff;border:none;border-radius:8px;padding:10px 14px;cursor:pointer;transition:.3s}.assign-form button:hover{background:#4043b8}.employee-section{display:flex;flex-direction:column;gap:15px}.employee-card{background:#fff;border-radius:12px;padding:20px;box-shadow:0 2px 10px #0000000d;transition:.3s;cursor:pointer}.employee-card.active{border-left:5px solid #2b2b6b;background:#f8f9ff}.employee-header{display:flex;justify-content:space-between;align-items:center}.employee-header h4{color:#2b2b6b;font-weight:600}.total-kpi{background:#2b2b6b;color:#fff;padding:5px 10px;border-radius:8px}.kpi-section{margin-top:15px}.kpi-row{display:flex;align-items:center;gap:10px;margin:5px 0}.kpi-row label{flex:1}.kpi-row input{width:70px;padding:5px;text-align:center}.kanban-board{margin-top:25px}.kanban-columns{display:flex;gap:15px;overflow-x:auto}.kanban-column{background:#f9fafc;padding:10px;border-radius:8px;min-width:250px}.kanban-card{background:#fff;padding:10px;border-radius:8px;margin-bottom:10px;border:1px solid #eee}.division-tree{background:#fff;padding:20px;border-radius:12px;margin-bottom:25px;box-shadow:0 4px 10px #0000000d}.tree-node{display:flex;flex-direction:column;align-items:center}.person-card{background:#f5f7fb;padding:10px 20px;border-radius:10px;box-shadow:0 3px 10px #0000000d;margin-bottom:15px;text-align:center;cursor:pointer;transition:.3s}.person-card.head{background:#2b2b6b;color:#fff}.child-branches:before{content:"";position:absolute;top:-20px;width:60%;height:2px;background:#ccc}.person-card.staff{background:#fff;border:1px solid #ddd}.tree-node{display:flex;flex-direction:column;align-items:center;position:relative}.tree-line{width:2px;height:30px;background:#ccc;margin:10px 0}.child-branches{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;position:relative}.person-card{background:#fff;border-radius:10px;padding:10px 20px;box-shadow:0 4px 10px #0000000d;text-align:center;cursor:pointer;transition:.3s;border:1px solid #eee}.person-card:hover{transform:translateY(-3px)}.person-card.head{background:#2b2b6b;color:#fff;border:none}.feedback-section{margin-top:15px;display:flex;flex-direction:column;gap:8px}.save-feedback-btn{align-self:flex-end;background:#2b2b6b;color:#fff;border:none;padding:8px 14px;border-radius:8px;cursor:pointer;transition:.3s}.head-feedback-section{margin-bottom:20px;background:#f4f5ff;padding:15px;border-radius:10px}.head-feedback-input{display:flex;align-items:center;gap:8px;margin-bottom:12px}.head-feedback-input input{width:80px;padding:6px;border-radius:6px;border:1px solid #ccc;text-align:center;font-weight:600}.head-feedback-input label{font-weight:500;color:#2b2b6b}.feedback-section textarea{width:100%;padding:10px;border-radius:8px;border:1px solid #ccc;resize:vertical;font-family:Poppins,sans-serif;font-size:.95rem}.save-feedback-btn{margin-top:8px;background:#2b2b6b;color:#fff;border:none;padding:8px 14px;border-radius:8px;cursor:pointer;transition:.3s}.save-feedback-btn:hover{background:#4043b8}.course-container{font-family:Poppins,sans-serif;color:#222;min-height:100vh}.course-header-user{display:flex;flex-direction:column;gap:8px;margin-bottom:40px}.course-header-user h2{color:#202265;font-size:2rem;font-weight:700;letter-spacing:.5px}.course-header-user p{color:#666;font-size:1rem;font-weight:400}.promotion-progress{background:#fff;border-radius:14px;padding:25px 30px;box-shadow:0 6px 20px #0000000d;margin-bottom:40px;border-left:5px solid #2b2b6b}.promotion-progress p{margin:6px 0;color:#333;font-size:.95rem}.progress-bar{width:100%;height:12px;background:#e8ebf7;border-radius:8px;overflow:hidden;margin-top:10px;margin-bottom:10px}.progress-fill{height:100%;border-radius:8px;background:linear-gradient(90deg,#2b2b6b,#4043b8);transition:width 1s ease}.progress-info{font-size:.9rem;color:#666;font-style:italic}.recommended-section-user{margin-top:20px}.completed-section h3,.recommended-section-user h3{margin-bottom:20px;font-size:1.4rem;color:#202265;font-weight:600;position:relative}.completed-section h3:after,.recommended-section-user h3:after{content:"";display:block;width:50px;height:3px;background:#2b2b6b;margin-top:6px;border-radius:10px}.course-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:25px}.course-card{background:#fff;border-radius:16px;padding:24px;box-shadow:0 8px 25px #0000000d;transition:all .3s ease;position:relative;overflow:hidden}.course-card:before{content:"";position:absolute;top:0;left:0;height:5px;width:0%;background:linear-gradient(90deg,#2b2b6b,#4043b8);transition:width .4s ease}.course-card:hover:before{width:100%}.course-card:hover{transform:translateY(-5px);box-shadow:0 10px 30px #2b2b6b1a}.course-card.completed{border-left:5px solid #4caf50;background:#f8fff8}.course-card h4{font-size:1.1rem;font-weight:600;color:#2b2b6b;margin-bottom:6px}.course-card .category{color:#777;font-size:.9rem;margin-bottom:6px}.course-card .date{color:#444;font-size:.9rem;margin-bottom:10px}.course-card p{margin:2px 0}.enroll-btn,.certificate-btn{border:none;border-radius:10px;padding:9px 14px;cursor:pointer;font-size:.92rem;font-weight:500;transition:.3s}.enroll-btn{background:linear-gradient(90deg,#2b2b6b,#4043b8);color:#fff}.enroll-btn:hover{background:linear-gradient(90deg,#3134ae,#5658e5)}.certificate-btn{background:linear-gradient(90deg,#4caf50,#66bb6a);color:#fff}.certificate-btn:hover{background:linear-gradient(90deg,#3fa243,#5fc060)}.no-data{color:#777;font-style:italic;text-align:center;margin-top:15px}.modal-overlay{position:fixed;inset:0;background:#00000073;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .4s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-course{background:#fff;border-radius:14px;padding:35px;max-width:640px;width:90%;box-shadow:0 8px 25px #00000026;position:relative;animation:slideUp .4s ease}@keyframes slideUp{0%{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-course h2{color:#2b2b6b;font-weight:600}.modal-course h4{margin-top:15px;color:#4043b8;font-weight:600}.modal-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:25px}.modal-actions button{border:none;padding:10px 16px;border-radius:8px;cursor:pointer;font-weight:500}.modal-actions .complete-btn{background:#4caf50;color:#fff}.modal-actions .complete-btn:hover{background:#3d9441}.modal-actions button:first-child{background:#eee}.modal-actions button:first-child:hover{background:#ddd}@media (max-width: 768px){.course-container{padding:20px}.course-header-user h2{font-size:1.5rem}.course-card{padding:18px}}.join-btn{background:linear-gradient(90deg,#2b2b6b,#4043b8);color:#fff;border:none;border-radius:8px;padding:10px 18px;cursor:pointer;font-size:.95rem;font-weight:500;transition:.3s}.join-btn:hover{background:linear-gradient(90deg,#3538a0,#5658e5);transform:translateY(-1px)}.attendance-container{font-family:Poppins,sans-serif;color:#222;gap:10px}.attendance-header{text-align:center;margin-bottom:20px}.attendance-header h2{margin:0;font-size:22px;font-weight:500}.attendance-header .today-date{margin-top:4px;font-size:14px;color:#555}.attendance-buttons{display:flex;gap:20px;justify-content:center;margin-bottom:30px}.checkin-btn,.checkout-btn{border:none;border-radius:10px;padding:12px 25px;font-size:1rem;cursor:pointer;color:#fff;transition:.3s}.checkin-btn{background:#4caf50}.checkout-btn{background:#e74c3c}.checkin-btn:hover{background:#3c9a44}.checkout-btn:hover{background:#d13b2d}.camera-modal{position:fixed;inset:0;background:#00000073;display:flex;justify-content:center;align-items:center;z-index:200}.camera-box{background:#fff;border-radius:12px;padding:20px;max-width:400px;width:90%;text-align:center;box-shadow:0 4px 12px #0003}.camera-box textarea{width:100%;padding:10px;border:1px solid #ccc;border-radius:8px;resize:none;outline:none;margin-top:10px;font-size:14px}.camera-box textarea:focus{border-color:#888}.modal-actions{display:flex;justify-content:space-between;margin-top:15px}.submit-btn{background:#2d6cdf;color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;font-size:14px}.submit-btn:hover{background:#1f56b3}.cancel-btn{background:#e0e0e0;color:#333;border:1px solid #ccc;padding:8px 16px;border-radius:6px;cursor:pointer;font-size:14px}.cancel-btn:hover{background:#d5d5d5}video{width:100%;border-radius:10px;background:#000}.capture-btn{margin-top:15px;background:#2b2b6b;color:#fff;border:none;padding:10px 16px;border-radius:8px;cursor:pointer;transition:.3s}.capture-btn:hover{background:#4043b8}.location-info{margin-top:8px;color:#444}.attendance-history{background:#fff;border-radius:12px;padding:20px;box-shadow:0 3px 10px #0000001a}table{width:100%;border-collapse:collapse;margin-top:10px}th,td{padding:10px;border-bottom:1px solid #eee;text-align:center;font-size:.9rem}.small-photo{width:50px;border-radius:6px}.empty-text{text-align:center;color:#777}.reason-btn{background:#406892;color:#fff;border:1px solid #ccc;border-radius:6px;padding:6px 12px;font-size:14px;cursor:pointer;transition:background .2s ease,border-color .2s ease}.reason-btn:hover{background:#d5d5d5;border-color:#b0b0b0}.reason-btn:active{background:#c8c8c8}.reason-btn:focus{outline:none;border-color:#888}