body{font-family:Poppins,sans-serif;background-color:#f1f5fc;margin:0;color:#333}.loading-spinner{border:4px solid rgba(0,0,0,.1);border-left-color:#7c4dff;border-radius:50%;width:30px;height:30px;animation:spin 1s linear infinite;margin:20px auto}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-container{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;background-color:#f0f2f5;color:#555;font-size:1.2em}.loading-container p{margin-top:15px}.app-container{max-width:1400px;margin:0 auto;padding:20px}.app-header{display:flex;justify-content:space-between;align-items:center;padding:10px 30px;background-color:#7c4dff;color:#fff;border-radius:12px;box-shadow:0 4px 6px #0000000d}.header-left,.header-right,.main-nav,.user-profile,.notifications{display:flex;align-items:center;gap:20px}.nav-link{color:#fff;text-decoration:none;padding:10px 15px;border-radius:8px}.nav-link.active{background-color:#fff3}.new-invoice-btn{background-color:#fff;color:#7c4dff;border:none;padding:10px 20px;border-radius:20px;cursor:pointer;font-weight:500;display:flex;align-items:center;gap:8px}.notification-count{background-color:#ff4081;border-radius:50%;padding:2px 6px;font-size:12px;margin-left:-15px}.search-input{background-color:#fff3;padding:8px 15px;border-radius:20px;display:flex;align-items:center;gap:10px;color:#fff}.search-input input{border:none;background:transparent;outline:none;color:#fff;font-family:Poppins,sans-serif}.search-input input::placeholder{color:#fffc}.main-area{padding:20px 30px;background-color:#fff;border-radius:12px;box-shadow:0 4px 6px #0000000d;margin-top:20px}.leave-list-container{display:flex;flex-direction:column}.leave-item-card{display:grid;grid-template-columns:repeat(6,1fr);align-items:center;padding:10px 20px;background-color:transparent;gap:15px;border-bottom:1px solid #f0f0f0;font-size:14px}.leave-item-card:last-child{border-bottom:none}.leave-item-card.header{padding:15px 20px;background-color:#f0f2f5;font-weight:500;border-radius:12px 12px 0 0;font-size:1rem}.col-actions{display:flex;gap:10px;justify-content:flex-end}.col-center{text-align:center}.pdf-btn{background-color:#f0f2f5;border:1px solid #e0e0e0;padding:8px 12px;border-radius:20px;cursor:pointer;display:flex;align-items:center;gap:5px}.action-btn{border:none;padding:8px 15px;border-radius:20px;cursor:pointer;font-weight:500;display:flex;align-items:center;gap:8px}.action-btn.primary{background-color:#7c4dff;color:#fff}.action-btn.success{background-color:#e8f5e9;color:#4caf50}.action-btn.icon{background-color:#f0f2f5;color:#666;padding:8px}.login-container{display:flex;justify-content:center;align-items:center;min-height:100vh;background-color:#f0f2f5}.login-form{background-color:#fff;padding:40px;border-radius:12px;box-shadow:0 4px 20px #0000001a;width:100%;max-width:400px;text-align:center}.login-form h2{margin-bottom:30px;color:#333;font-size:28px}.form-group{margin-bottom:20px;text-align:left}.form-group label{display:block;margin-bottom:8px;color:#555;font-weight:500}.form-group input{width:calc(100% - 20px);padding:12px 10px;border:1px solid #ddd;border-radius:8px;font-size:16px;font-family:Poppins,sans-serif}.login-button{background-color:#7c4dff;color:#fff;border:none;padding:12px 25px;border-radius:8px;cursor:pointer;font-size:18px;font-weight:600;transition:background-color .3s ease;width:100%;margin-top:20px}.login-button:hover{background-color:#6a3cdb}.error-message{color:#d32f2f;margin-bottom:20px;font-size:14px}.logout-btn{background-color:#ff4081;color:#fff;border:none;padding:8px 15px;border-radius:20px;cursor:pointer;font-weight:500;margin-left:15px}.logout-btn:hover{background-color:#e03070}.user-profile{position:relative;cursor:pointer}.dropdown-menu{position:absolute;top:100%;right:0;background-color:#fff;border-radius:8px;box-shadow:0 4px 12px #0000001a;min-width:120px;padding:10px 0;z-index:10}.dropdown-menu .logout-btn{width:100%;background:none;color:#333;border-radius:0;padding:10px 15px;text-align:left;margin-left:0}.dropdown-menu .logout-btn:hover{background-color:#f0f2f5;color:#7c4dff}.status-approved,.status-pending,.status-rejected{padding:4px 0;border-radius:12px;font-size:12px;font-weight:500;width:60px;display:inline-block;text-align:center}.status-approved{background-color:#e8f5e9;color:#4caf50}.status-pending{background-color:#fffde7;color:#f57f17}.status-rejected{background-color:#ffebee;color:#d32f2f}@media (max-width: 768px){.app-container{padding:10px}.app-header{flex-direction:column;padding:15px;gap:15px}.header-left,.header-right{flex-direction:column;width:100%;gap:10px}.main-nav,.search-input,.new-invoice-btn{width:100%;justify-content:center}.notifications,.user-profile{width:100%;justify-content:center;margin-top:10px}.header-right{align-items:flex-start}.main-area{padding:15px}.leave-item-card{display:flex;flex-wrap:wrap;padding:10px;gap:5px;border-bottom:1px solid #f0f0f0}.leave-item-card.header{display:none}.col{width:100%;margin-bottom:5px}.col-actions{justify-content:flex-start;margin-top:10px;width:100%}.col-center{text-align:left}.status-approved,.status-pending,.status-rejected{width:auto;padding:4px 8px}}.modal-overlay{position:fixed;inset:0;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background-color:#fff;padding:30px;border-radius:10px;box-shadow:0 5px 15px #0000004d;text-align:center;width:90%;max-width:400px}.modal-content p{margin-bottom:25px;font-size:18px;color:#333}.modal-actions{display:flex;justify-content:center;gap:15px}.modal-button{padding:10px 20px;border:none;border-radius:5px;cursor:pointer;font-size:16px;font-weight:500;transition:background-color .3s ease}.modal-button.confirm{background-color:#dc3545;color:#fff}.modal-button.confirm:hover{background-color:#c82333}.modal-button.cancel{background-color:#6c757d;color:#fff}.modal-button.cancel:hover{background-color:#5a6268}.update-leave-modal{background-color:#fff;padding:30px;border-radius:10px;box-shadow:0 5px 15px #0000004d;width:90%;max-width:500px;position:relative}.update-leave-modal h2{text-align:center;margin-bottom:25px;color:#333}.update-leave-modal .form-group{margin-bottom:15px}.update-leave-modal .form-group label{display:block;margin-bottom:5px;color:#555;font-weight:500}.update-leave-modal .form-group input[type=text],.update-leave-modal .form-group input[type=date],.update-leave-modal .form-group select{width:calc(100% - 20px);padding:10px;border:1px solid #ddd;border-radius:5px;font-size:16px;font-family:Poppins,sans-serif}.update-leave-modal .modal-actions{margin-top:25px;display:flex;justify-content:flex-end;gap:10px}.update-leave-modal .modal-button{padding:10px 20px;border:none;border-radius:5px;cursor:pointer;font-size:16px;font-weight:500;transition:background-color .3s ease}.update-leave-modal .modal-button.confirm{background-color:#7c4dff;color:#fff}.update-leave-modal .modal-button.confirm:hover{background-color:#6a3cdb}.update-leave-modal .modal-button.cancel{background-color:#6c757d;color:#fff}.update-leave-modal .modal-button.cancel:hover{background-color:#5a6268}.update-leave-modal .error-message{color:#d32f2f;margin-bottom:15px;text-align:center}.add-leave-modal{background-color:#fff;padding:30px;border-radius:10px;box-shadow:0 5px 15px #0000004d;width:90%;max-width:500px;position:relative}.add-leave-modal h2{text-align:center;margin-bottom:25px;color:#333}.add-leave-modal .form-group{margin-bottom:15px}.add-leave-modal .form-group label{display:block;margin-bottom:5px;color:#555;font-weight:500}.add-leave-modal .form-group input[type=text],.add-leave-modal .form-group input[type=date],.add-leave-modal .form-group input[type=number],.add-leave-modal .form-group select{width:calc(100% - 20px);padding:10px;border:1px solid #ddd;border-radius:5px;font-size:16px;font-family:Poppins,sans-serif}.add-leave-modal .modal-actions{margin-top:25px;display:flex;justify-content:flex-end;gap:10px}.add-leave-modal .modal-button{padding:10px 20px;border:none;border-radius:5px;cursor:pointer;font-size:16px;font-weight:500;transition:background-color .3s ease}.add-leave-modal .modal-button.confirm{background-color:#7c4dff;color:#fff}.add-leave-modal .modal-button.confirm:hover{background-color:#6a3cdb}.add-leave-modal .modal-button.cancel{background-color:#6c757d;color:#fff}.add-leave-modal .modal-button.cancel:hover{background-color:#5a6268}.add-leave-modal .error-message{color:#d32f2f;margin-bottom:15px;text-align:center}.add-work-trip-modal{background-color:#fff;padding:30px;border-radius:10px;box-shadow:0 5px 15px #0000004d;width:90%;max-width:500px;position:relative}.add-work-trip-modal h2{text-align:center;margin-bottom:25px;color:#333}.add-work-trip-modal .form-group{margin-bottom:15px}.add-work-trip-modal .form-group label{display:block;margin-bottom:5px;color:#555;font-weight:500}.add-work-trip-modal .form-group input[type=text],.add-work-trip-modal .form-group input[type=date],.add-work-trip-modal .form-group input[type=number],.add-work-trip-modal .form-group select,.add-work-trip-modal .form-group textarea{width:calc(100% - 20px);padding:10px;border:1px solid #ddd;border-radius:5px;font-size:16px;font-family:Poppins,sans-serif}.add-work-trip-modal .modal-actions{margin-top:25px;display:flex;justify-content:flex-end;gap:10px}.add-work-trip-modal .modal-button{padding:10px 20px;border:none;border-radius:5px;cursor:pointer;font-size:16px;font-weight:500;transition:background-color .3s ease}.add-work-trip-modal .modal-button.confirm{background-color:#7c4dff;color:#fff}.add-work-trip-modal .modal-button.confirm:hover{background-color:#6a3cdb}.add-work-trip-modal .modal-button.cancel{background-color:#6c757d;color:#fff}.add-work-trip-modal .modal-button.cancel:hover{background-color:#5a6268}.add-work-trip-modal .error-message{color:#d32f2f;margin-bottom:15px;text-align:center}.employee-search-results{list-style:none;padding:0;margin:5px 0;border:1px solid #ddd;border-radius:5px;max-height:150px;overflow-y:auto;background-color:#fff;position:absolute;width:calc(100% - 20px);z-index:100}.employee-search-results li{padding:10px;cursor:pointer;border-bottom:1px solid #eee}.employee-search-results li:last-child{border-bottom:none}.employee-search-results li:hover{background-color:#f0f2f5}.selected-employee{margin-top:10px;font-weight:500;color:#7c4dff}.modal-overlay{position:fixed;inset:0;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background-color:#fff;padding:30px;border-radius:8px;box-shadow:0 4px 15px #0003;width:95%;max-width:900px;box-sizing:border-box;max-height:90vh;overflow-y:auto;position:relative;animation:fadeIn .3s ease-out}.modal-close-btn{position:absolute;top:15px;right:15px;background:none;border:none;cursor:pointer;font-size:24px;color:#333;padding:5px;border-radius:50%;transition:background-color .2s ease}.modal-close-btn:hover{background-color:#f0f0f0}.employee-details-modal h2{color:#333;margin-bottom:20px;border-bottom:2px solid #eee;padding-bottom:10px;text-align:left}.details-section-header{color:#555;margin-top:30px;margin-bottom:15px;border-bottom:1px solid #eee;padding-bottom:5px;font-size:18px;font-weight:700}.details-section.table-like{display:grid;grid-template-columns:1fr;gap:5px;margin-bottom:20px;border:1px solid #eee;border-radius:5px;overflow:hidden}.detail-row{display:grid;grid-template-columns:180px 1fr;padding:10px 15px;background-color:#fdfdfd;border-bottom:1px solid #eee}.detail-row:last-child{border-bottom:none}.detail-label{font-weight:700;color:#333;text-align:left;border-right:1px solid #eee;padding-right:10px}.detail-value{color:#555;text-align:left;padding-left:10px}@media (min-width: 600px){.details-section.table-like{grid-template-columns:1fr}}.leave-history-table,.work-trip-history-table{width:100%;border-collapse:collapse;margin-top:20px;font-size:15px}.table-header,.table-row{display:grid;grid-template-columns:repeat(5,1fr);gap:0;padding:0;border-bottom:1px solid #eee}.table-header{background-color:#f8f8f8;font-weight:700;color:#666;border-top:1px solid #eee}.header-item,.row-item{padding:12px 10px;text-align:left;word-break:break-word;border-right:1px solid #eee}.header-item:last-child,.row-item:last-child{border-right:none}.table-row:nth-child(2n){background-color:#fdfdfd}.table-row:hover{background-color:#f5f5f5}.loading-container{display:flex;justify-content:center;align-items:center;min-height:100px}.loading-spinner{border:4px solid rgba(0,0,0,.1);border-left-color:#7c4dff;border-radius:50%;width:30px;height:30px;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.modal-content{width:95%;padding:20px}.table-header,.table-row{grid-template-columns:repeat(auto-fit,minmax(100px,1fr));font-size:14px}.work-trip-history-table .table-header,.work-trip-history-table .table-row{grid-template-columns:repeat(auto-fit,minmax(100px,1fr))}}@media (max-width: 480px){.employee-details-modal h2{font-size:20px}.details-section-header{font-size:16px}.details-section.table-like{gap:3px}.detail-row{grid-template-columns:120px 1fr;padding:8px 10px}.detail-label,.detail-value{font-size:14px}.table-header,.table-row{grid-template-columns:1fr;text-align:left}.header-item,.row-item{padding:8px 10px;border-right:none;border-bottom:1px solid #eee}.table-row:last-child .row-item:last-child{border-bottom:none}}