.dashboard{color:#0b1a2b;min-height:100vh;font-family:var(--font-geist-sans,Inter,system-ui,-apple-system,"Segoe UI",Roboto);background:#f5f7fb;display:flex}.sidebar{color:#fff;background:linear-gradient(#996ecb 0%,#081022 100%);flex-direction:column;width:240px;padding:28px 20px;display:flex;box-shadow:2px 0 8px #0b1a2b0f}.brand{margin-bottom:18px;margin-left:-30px;font-size:18px;font-weight:700}.nav{flex-direction:column;flex:1;gap:10px;margin-top:8px;display:flex}.nav-item{color:#ffffffd9;cursor:pointer;border-radius:6px;padding:8px 10px;text-decoration:none;transition:all .2s;display:inline-block}.nav-item:hover{color:#fff;background:#ffffff1a}.nav-item.active{color:#fff;background:#ffffff0f;font-weight:600}.logout-btn{color:#fff;cursor:pointer;background:#ff4757;border:none;border-radius:8px;width:100%;margin-top:auto;padding:10px 16px;font-size:14px;font-weight:600;transition:all .2s}.logout-btn:hover{background:#e84152;box-shadow:0 4px 12px #ff47574d}.main{flex:1;padding:28px 32px}.header{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.header h1{color:#0b1a2b;margin:0;font-size:22px;font-weight:700}.subtitle{color:#5b6b7a;margin-top:4px;font-size:14px}.profile{align-items:center;gap:12px;display:flex}.avatar{color:#fff;text-transform:uppercase;background:linear-gradient(135deg,#996ecb 0%,#7e59a8 100%);border-radius:50%;justify-content:center;align-items:center;width:42px;height:42px;font-size:14px;font-weight:700;display:flex}.profile-info{flex-direction:column;display:flex}.profile-info .name{color:#0b1a2b;font-size:14px;font-weight:600}.profile-info .role{color:#5b6b7a;font-size:12px}.panel{background:#fff;border-radius:10px;padding:18px;overflow-x:auto;box-shadow:0 6px 18px #996ecb4d}.panel-header-controls{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:15px;margin-bottom:20px;display:flex}.search-container{flex:1;max-width:320px}.search-input{background:#f9fbfe;border:1px solid #eef2f6;border-radius:8px;outline:none;width:100%;padding:10px 14px;font-size:14px;transition:all .2s}.search-input:focus{background:#fff;border-color:#996ecb;box-shadow:0 0 0 3px #996ecb1a}.panel-controls{gap:8px;display:flex}.btn{cursor:pointer;border:0;border-radius:8px;padding:8px 12px;font-size:13px;font-weight:600;transition:filter .2s}.btn-add{color:#fff;background:#2ecc71}.btn-edit{color:#fff;background:#3498db}.btn-delete{color:#fff;background:#ff4757}.btn:hover{filter:brightness(.9)}.recent-table{border-collapse:collapse;width:100%}.recent-table th{text-align:left;color:#4b5b6b;text-transform:uppercase;letter-spacing:.5px;border-bottom:2px solid #eef2f6;padding:12px;font-size:12px;font-weight:700}.recent-table td{color:#0b1a2b;border-bottom:1px solid #eef2f6;padding:14px 12px;font-size:14px}.recent-table tbody tr{transition:background .2s}.recent-table tbody tr:hover{background:#f9fbfe}.name-cell{font-weight:600}.employee-info{align-items:center;gap:12px;display:flex}.employee-avatar{object-fit:cover;border:2px solid #996ecb;border-radius:50%;flex-shrink:0;width:40px;height:40px}.employee-avatar-fallback{color:#fff;text-transform:uppercase;background:linear-gradient(135deg,#996ecb 0%,#7e59a8 100%);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;font-size:14px;font-weight:700;display:flex}.employee-details{flex-direction:column;gap:2px;display:flex}.total-salary{color:#996ecb;font-weight:700}.actions-column{text-align:center;width:80px}.action-cell{text-align:center}.btn-row-delete{color:#ff4757;cursor:pointer;background:#fff;border:2px solid #ff4757;border-radius:6px;justify-content:center;align-items:center;padding:6px 10px;font-size:16px;transition:all .2s;display:inline-flex}.btn-row-delete:hover{color:#fff;background:#ff4757;transform:scale(1.1)}.btn-row-delete:active{transform:scale(.95)}.pagination-container{justify-content:center;align-items:center;gap:12px;margin-top:25px;display:flex}.page-btn{cursor:pointer;color:#0b1a2b;background:#eef2f6;border:none;border-radius:6px;padding:8px 16px;font-size:13px;font-weight:600;transition:all .2s}.page-btn:hover:not(:disabled){color:#fff;background:#996ecb}.page-btn:disabled{opacity:.5;cursor:not-allowed}.page-info{color:#5b6b7a;font-size:13px;font-weight:500}.sort-header{cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .2s}.sort-header:hover{color:#996ecb}.modal-overlay{z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0b1a2bb3;justify-content:center;align-items:center;padding:20px;animation:.2s fadeIn;display:flex;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background:#fff;border-radius:12px;flex-direction:column;width:100%;max-width:500px;max-height:80vh;animation:.3s slideUp;display:flex;overflow:hidden;box-shadow:0 10px 40px #0000004d}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-large{max-width:900px;max-height:90vh;overflow-y:auto}.modal-header{background:#f9fbfe;border-bottom:1px solid #eef2f6;justify-content:space-between;align-items:center;padding:20px 24px;display:flex}.modal-header h2{color:#0b1a2b;margin:0;font-size:18px;font-weight:700}.modal-close{color:#5b6b7a;cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;width:32px;height:32px;font-size:28px;line-height:1;transition:all .2s;display:flex}.modal-close:hover{color:#0b1a2b;background:#eef2f6}.modal-body{flex:1;padding:24px;overflow-y:auto}.modal-footer{background:#f9fbfe;border-top:1px solid #eef2f6;justify-content:flex-end;gap:12px;padding:20px 24px;display:flex}.employee-select-list{flex-direction:column;gap:8px;display:flex}.employee-select-item{cursor:pointer;background:#fff;border:1px solid #eef2f6;border-radius:8px;padding:16px;transition:all .2s}.employee-select-item:hover{background:#f9f5ff;border-color:#996ecb;transform:translate(4px);box-shadow:0 2px 8px #996ecb1a}.employee-select-name{color:#0b1a2b;margin-bottom:4px;font-size:15px;font-weight:600}.employee-select-position{color:#66788a;font-size:13px}.form-section{border-bottom:1px solid #eef2f6;margin-bottom:24px;padding-bottom:20px}.form-section:last-of-type{border-bottom:none;margin-bottom:0}.form-section h3{color:#0b1a2b;align-items:center;gap:8px;margin:0 0 16px;font-size:16px;font-weight:600;display:flex}.form-row{grid-template-columns:1fr;gap:12px;margin-bottom:12px;display:grid}@media (min-width:900px){.form-row{grid-template-columns:1fr 1fr;gap:16px}}.form-row:last-child{margin-bottom:0}.form-group{flex-direction:column;display:flex}.form-group-spacer{visibility:hidden}.form-group label{color:#000;align-items:center;gap:4px;margin-bottom:6px;font-size:13px;font-weight:600;display:flex}.optional{color:#66788a;font-size:11px;font-style:italic;font-weight:400}.form-group input,.form-group select{background:#f9fbfe;border:1px solid #eef2f6;border-radius:8px;padding:10px 12px;font-family:inherit;font-size:14px;transition:all .2s}.form-group input::placeholder{color:#a8b5c3}.form-group input:focus,.form-group select:focus{background:#fff;border-color:#996ecb;outline:none;box-shadow:0 0 0 3px #996ecb1a}.form-group select{cursor:pointer}.input-with-currency{align-items:center;display:flex;position:relative}.input-with-currency input{letter-spacing:.5px;width:100%;padding-left:32px;padding-right:12px;font-family:Courier New,monospace}.currency-symbol{color:#996ecb;pointer-events:none;z-index:1;font-size:16px;font-weight:700;position:absolute;left:10px}.deductions-summary{background:linear-gradient(135deg,#f9f5ff 0%,#fff 100%);border:2px solid #e8dbf5;border-radius:10px;margin-top:20px;padding:16px}.summary-row{color:#4b5b6b;border-bottom:1px solid #eef2f6;justify-content:space-between;padding:8px 0;font-size:14px;display:flex}.summary-row:last-child{border-bottom:none}.summary-row.total{color:#996ecb;border-top:2px solid #996ecb;margin-top:8px;padding-top:12px;font-size:15px}.summary-row.total strong{font-size:16px}.btn-cancel,.btn-save{cursor:pointer;border:none;border-radius:8px;padding:10px 20px;font-size:14px;font-weight:600;transition:all .2s}.btn-cancel{cursor:pointer;color:#0b1a2b;background:#fff;border:1px solid #ddd;border-radius:8px;padding:10px 20px;font-size:14px;font-weight:600;transition:all .2s}.btn-cancel:hover{background:#f5f5f5;border-color:#999}.btn-save{color:#fff;cursor:pointer;background:linear-gradient(135deg,#996ecb 0%,#7e59a8 100%);border:none;border-radius:8px;padding:10px 20px;font-size:14px;font-weight:600;transition:all .2s}.btn-save:hover:not(:disabled){background:linear-gradient(135deg,#7e59a8 0%,#6b4d8f 100%);transform:translateY(-1px);box-shadow:0 4px 12px #996ecb66}.btn-save:disabled{opacity:.6;cursor:not-allowed;transform:none}.modal-large::-webkit-scrollbar{width:10px}.modal-large::-webkit-scrollbar-track{background:#f9fbfe;border-radius:10px}.modal-large::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#996ecb 0%,#7e59a8 100%);border-radius:10px}.modal-large::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#7e59a8 0%,#6b4d8f 100%)}@media (max-width:900px){.dashboard{flex-direction:column}.sidebar{flex-direction:row;align-items:center;width:100%;padding:16px 20px}.nav{flex-direction:row;margin:0}.brand{margin:0}.logout-btn{width:auto;margin:0}.form-row{grid-template-columns:1fr}.modal-content{max-width:95%}.main{padding:16px}}@media (max-width:768px){.panel-header-controls{flex-direction:column;align-items:stretch}.search-container{max-width:100%}}@media (max-width:480px){.header h1{font-size:18px}.subtitle{font-size:12px}.recent-table th,.recent-table td{padding:10px 8px;font-size:12px}.modal-header h2{font-size:16px}.form-group label{font-size:12px}.form-group input,.form-group select{padding:8px 10px;font-size:13px}}