@charset "UTF-8";*{box-sizing:border-box;padding:0}*,body{margin:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f5f5f5;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}#root{min-height:100vh}.login-container{align-items:center;background:linear-gradient(135deg,#1e3c72,#2a5298);display:flex;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;justify-content:center;min-height:100vh}.login-box{background:#fff;border-radius:16px;box-shadow:0 20px 60px #0000004d;max-width:420px;padding:40px;width:100%}.login-header{margin-bottom:32px;text-align:center}.logo{margin-bottom:16px}.shield-icon{animation:pulse 2s ease-in-out infinite;font-size:56px}.login-header h1{color:#1e3c72;font-size:28px;font-weight:700;margin:0 0 8px}.login-header p{color:#666;font-size:14px;margin:0}.login-form{margin-bottom:24px}.form-group input{box-sizing:border-box;padding:12px 16px;transition:all .3s;width:100%}.form-group input:focus{box-shadow:0 0 0 3px #2a52981a}.error-message{background-color:#fee;border-left:4px solid #c33;border-radius:8px;color:#c33;font-size:14px;margin-bottom:20px;padding:12px}.login-button{background:linear-gradient(135deg,#1e3c72,#2a5298);border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:16px;font-weight:600;padding:14px;transition:transform .2s,box-shadow .2s;width:100%}.login-button:hover:not(:disabled){box-shadow:0 8px 20px #1e3c724d;transform:translateY(-2px)}.login-button:active:not(:disabled){transform:translateY(0)}.login-button:disabled{cursor:not-allowed;opacity:.6}.login-footer{border-top:1px solid #e0e0e0;padding-top:20px;text-align:center}.login-footer p{color:#999;font-size:12px;letter-spacing:1px;margin:0;text-transform:uppercase}.dashboard-page{background:#f5f7fa;margin:0 auto;max-width:1600px;min-height:100vh;padding:24px}.dashboard-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:32px}.dashboard-header h1{color:#1e3c72;font-size:32px;margin:0}.btn-refresh{background:linear-gradient(135deg,#2196f3,#1976d2);transition:all .2s}.btn-refresh:hover{box-shadow:0 6px 16px #2196f34d}.stats-grid{margin-bottom:32px}.stat-card{border-left:4px solid;border-radius:16px;box-shadow:0 4px 12px #00000014;transition:all .3s}.stat-card:hover{box-shadow:0 8px 20px #0000001f}.stat-card.blue{border-left-color:#2196f3}.stat-card.green{border-left-color:#4caf50}.stat-card.purple{border-left-color:#9c27b0}.stat-card.orange{border-left-color:#ff9800}.stat-icon{font-size:48px;opacity:.9}.stat-content h3{color:#666;font-size:14px;font-weight:600;letter-spacing:.5px;margin:0 0 8px;text-transform:uppercase}.stat-number{color:#1e3c72;font-size:36px;margin:0 0 4px}.stat-detail{color:#999;font-size:13px}.charts-row{grid-gap:24px;display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));margin-bottom:24px}.chart-card{background:#fff;border-radius:16px;box-shadow:0 4px 12px #00000014;padding:24px}.chart-card.wide{grid-column:1/-1}.chart-card h3{color:#1e3c72;font-size:18px;font-weight:600;margin:0 0 20px}.chart-container{height:300px}.bottom-section{grid-gap:24px;display:grid;gap:24px;grid-template-columns:1fr 1fr}.activities-card,.performers-card{background:#fff;border-radius:16px;box-shadow:0 4px 12px #00000014;padding:24px}.activities-card h3,.performers-card h3{color:#1e3c72;font-size:18px;font-weight:600;margin:0 0 20px}.performers-list{display:flex;flex-direction:column;gap:12px}.performer-item{align-items:center;background:#f9f9f9;border-radius:12px;display:flex;gap:16px;padding:16px;transition:all .2s}.performer-item:hover{background:#f0f0f0;transform:translateX(4px)}.performer-rank{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;color:#fff;display:flex;font-size:16px;font-weight:700;height:40px;justify-content:center;width:40px}.performer-info{display:flex;flex:1 1;flex-direction:column}.performer-info strong{color:#1e3c72;font-size:15px}.performer-position{color:#666;font-size:13px}.performer-stats{display:flex;gap:8px}.stat-badge{border-radius:20px;font-size:12px;font-weight:600;padding:6px 12px;white-space:nowrap}.stat-badge.green{background:#e8f5e9;color:#4caf50}.stat-badge.blue{background:#e3f2fd;color:#2196f3}.activities-list{display:flex;flex-direction:column;gap:12px;max-height:400px;overflow-y:auto}.activity-item{gap:12px;padding:12px}.activity-item:hover{background:#f9f9f9;border-left-color:#2196f3}.activity-icon{opacity:.8}.activity-description{color:#333;font-size:14px;margin:0 0 4px}.activity-description strong{color:#1e3c72}.activity-time{color:#999;font-size:12px}.loading-container{align-items:center;display:flex;flex-direction:column;gap:16px;justify-content:center;min-height:60vh}.spinner{animation:spin 1s linear infinite;border:4px solid #f3f3f3;border-radius:50%;border-top-color:#2196f3;height:50px;width:50px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@media (max-width:1024px){.bottom-section{grid-template-columns:1fr}}@media (max-width:768px){.charts-row,.stats-grid{grid-template-columns:1fr}.dashboard-header{align-items:flex-start;flex-direction:column;gap:16px}}.employees-page{background:#f5f7fa;min-height:100vh;padding:16px 40px}.page-header{margin-bottom:12px}.view-toggle{background:#fff;border-radius:8px;box-shadow:0 2px 8px #00000014;gap:4px;padding:4px}.toggle-btn{border-radius:6px;color:#666;font-size:18px;padding:8px 12px;transition:all .2s}.toggle-btn:hover{background:#f0f0f0}.toggle-btn.active{box-shadow:0 2px 8px #667eea4d}.btn-primary{letter-spacing:.5px;text-transform:uppercase}.btn-primary:hover{box-shadow:0 8px 20px #667eea66}.btn-create{letter-spacing:.5px;text-transform:uppercase}.btn-create:hover{box-shadow:0 8px 20px #667eea66}.filters-bar{border-radius:16px;margin-bottom:12px}.search-box{flex:2 1;min-width:300px}.search-box input{border:2px solid #e0e0e0;border-radius:8px;font-size:15px;padding:12px 16px;transition:all .2s;width:100%}.search-box input:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a;outline:none}.filters-bar select{border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;flex:1 1;font-size:15px;min-width:180px;padding:12px 16px;transition:all .2s}.filters-bar select:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a;outline:none}.employees-content{background:#0000;border-radius:0;box-shadow:none;padding:40px 20px 80px}.employees-grid{grid-gap:32px;gap:32px;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));padding:0 24px}.employee-card{border-left:4px solid #667eea;box-shadow:0 2px 8px #00000014;padding:24px;transition:all .3s}.employee-card:hover{box-shadow:0 8px 20px #0000001f}.employee-card.inactive{background:#f8f9fa;border-left-color:#999;opacity:.8}.employee-avatar-container{height:80px;margin:0 auto 16px;position:relative;width:80px}.employee-avatar,.employee-avatar-placeholder{border-radius:50%;box-shadow:0 4px 12px #00000026;height:80px;object-fit:cover;width:80px}.employee-avatar-placeholder{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;display:flex;font-size:28px;font-weight:700;justify-content:center}.status-dot{border:3px solid #fff;bottom:4px;box-shadow:0 2px 4px #0003;height:18px;position:absolute;right:4px;width:18px}.status-dot.active{background:#4caf50}.status-dot.inactive{background:#9e9e9e}.status-dot.on_leave{background:#ff9800}.status-dot.terminated{background:#e74c3c}.employee-info{text-align:center}.employee-info h3{font-size:20px;font-weight:700}.employee-info .position{color:#666;margin:0 0 6px}.employee-info .department{letter-spacing:.5px;margin:0 0 6px;text-transform:uppercase}.employee-info .email{color:#667eea;font-size:13px;margin:0 0 4px}.employee-info .phone{color:#666;font-size:13px;margin:0}.employee-actions{border-top:1px solid #f0f0f0;display:flex;gap:8px;margin-top:16px;padding-top:16px}.btn-action{background:#fff}.btn-action.edit{border:2px solid #2196f3;color:#2196f3}.btn-action.edit:hover{background:#2196f3;color:#fff;transform:scale(1.05)}.btn-action.delete{border:2px solid #e74c3c;color:#e74c3c}.btn-action.delete:hover{background:#e74c3c;color:#fff;transform:scale(1.05)}.employees-table{background:#fff;border-collapse:collapse;position:relative;width:100%}.employees-table thead{background:#f8f9fa;box-shadow:0 2px 4px #0000000d;position:-webkit-sticky;position:sticky;top:0;z-index:10}.employees-table th{background:#f8f9fa;border-bottom:2px solid #e0e0e0;color:#1e3c72;font-size:13px;font-weight:600;letter-spacing:.5px;padding:14px 12px;text-align:left;text-transform:uppercase;white-space:nowrap}.employees-table td{border-bottom:1px solid #f0f0f0;color:#333;cursor:pointer;font-size:14px;padding:14px 12px}.employees-table tr:hover{background:#f9f9f9}.employees-table tbody tr:last-child td{border-bottom:none}.table-avatar,.table-avatar-placeholder{border-radius:50%;height:40px;object-fit:cover;width:40px}.table-avatar-placeholder{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;display:flex;font-size:14px;font-weight:700;justify-content:center}.status-badge.on_leave{background:#ff9800;box-shadow:0 2px 8px #ff98004d}.status-badge.terminated{background:#e74c3c;box-shadow:0 2px 8px #e74c3c4d}.employee-contract-info{display:flex;flex-direction:column;gap:4px}.contract-type{color:#667eea;font-size:12px;font-weight:600}.contract-expiry{color:#666;font-size:11px}.contract-warning{align-items:center;display:flex;font-size:11px;font-weight:600;gap:4px}.no-contract{color:#94a3b8;font-size:12px;font-style:italic}.modal-content{max-width:700px;overflow-y:visible}.modal-content.xlarge{max-width:1000px}.modal-content.employee-modal{max-height:90vh;max-width:900px}.modal-header h2{font-size:26px;font-weight:700}.form-section{border-bottom:2px solid #f0f0f0}.form-section h3{border-bottom:3px solid #667eea;display:inline-block;min-width:280px}.form-group input,.form-group select,.form-group textarea{transition:all .2s}.form-group textarea{min-height:100px}.form-group input[type=email],.form-group input[type=tel]{font-family:inherit}.btn-submit{letter-spacing:.5px;text-transform:uppercase}.btn-submit:hover:not(:disabled){box-shadow:0 8px 20px #667eea66}.employee-detail{padding:0}.profile-section{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:12px;color:#fff;margin-bottom:24px;padding:32px;text-align:center}.profile-photo-container{height:150px;margin:0 auto 20px;position:relative;width:150px}.profile-photo-large,.profile-photo-placeholder-large{border:5px solid #fff;border-radius:50%;box-shadow:0 8px 24px #0003;height:150px;object-fit:cover;width:150px}.profile-photo-placeholder-large{align-items:center;background:#fff3;color:#fff;display:flex;font-size:48px;font-weight:700;justify-content:center}.status-dot-large{border:4px solid #fff;border-radius:50%;bottom:10px;box-shadow:0 2px 4px #0000004d;height:24px;position:absolute;right:10px;width:24px}.status-dot-large.active{background:#4caf50}.status-dot-large.inactive{background:#9e9e9e}.status-dot-large.on_leave{background:#ff9800}.status-dot-large.terminated{background:#e74c3c}.profile-header-info h2{color:#fff;font-size:28px;font-weight:700;margin:0 0 8px}.position-large{font-size:18px;margin:0 0 8px;opacity:.9}.department-large{font-size:16px;margin:0 0 16px;opacity:.8}.photo-upload-section{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border-radius:8px;margin-top:24px;padding:20px}.photo-upload-section h3{color:#fff;font-size:16px;margin:0 0 12px}.upload-controls{align-items:center;display:flex;flex-wrap:wrap;gap:12px;margin-bottom:8px}.btn-upload{background:#fff;border:none;border-radius:8px;color:#667eea;cursor:pointer;font-size:14px;font-weight:600;padding:10px 20px;transition:all .2s}.btn-upload:hover{box-shadow:0 4px 12px #0003;transform:translateY(-2px)}.file-selected{align-items:center;display:flex;flex:1 1;gap:12px}.file-selected span{color:#fff;font-size:14px}.btn-upload-confirm{background:#4caf50;border:none;border-radius:6px;color:#fff;cursor:pointer;font-weight:600;padding:8px 16px;transition:all .2s}.btn-upload-confirm:hover{background:#45a049;transform:translateY(-2px)}.photo-upload-section small{color:#fffc;font-size:12px}.detail-section{background:#f9f9f9;border-left:4px solid #667eea;padding:24px}.detail-section h3{font-weight:600}.detail-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.detail-item{background:#fff;border-radius:8px;gap:6px;padding:12px}.detail-item.full-width{grid-column:1/-1}.detail-label{font-size:12px;font-weight:600;letter-spacing:.5px;text-transform:uppercase}.detail-value{font-size:15px}.quick-links{grid-gap:12px;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.quick-link-btn{background:#fff;border:2px solid #e0e0e0;border-radius:8px;color:#333;cursor:pointer;font-size:14px;font-weight:600;padding:14px 16px;text-align:left;transition:all .2s}.quick-link-btn:hover{background:#f5f7ff;border-color:#667eea;box-shadow:0 4px 12px #667eea33;transform:translateY(-2px)}.loading:before{animation:pulse 1.5s ease-in-out infinite}.loading p{font-size:16px;margin:0}.empty-state:before{content:"👥";font-size:64px;opacity:.5}.empty-state p{font-size:18px;margin:0 0 24px}@media (max-width:1400px){.employees-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}}@media (max-width:768px){.employees-page{padding:16px}.page-header{align-items:flex-start;flex-direction:column;gap:16px}.page-header h1{font-size:24px}.header-actions{justify-content:space-between;width:100%}.btn-create,.btn-primary{flex:1 1}.filters-bar{flex-direction:column}.filters-bar select,.search-box{min-width:100%}.employees-grid{grid-gap:40px;display:grid;gap:40px;grid-template-columns:repeat(auto-fill,minmax(480px,1fr));padding:0}.employees-content{padding:20px}.modal-content,.modal-content.employee-modal{border-radius:16px;margin:0;max-height:95vh;max-width:100%}.modal-header{padding:20px}.modal-header h2{font-size:20px}.modal-body{padding:20px}.form-row{grid-template-columns:1fr}.form-section h3{font-size:16px;min-width:auto}.form-actions{flex-direction:column-reverse}.btn-cancel,.btn-submit{width:100%}.profile-photo-container{height:120px;width:120px}.profile-photo-large,.profile-photo-placeholder-large{font-size:36px;height:120px;width:120px}.profile-header-info h2{font-size:24px}.position-large{font-size:16px}.department-large{font-size:14px}.detail-grid,.quick-links{grid-template-columns:1fr}.detail-section{padding:16px}.upload-controls{align-items:stretch;flex-direction:column}.file-selected{align-items:flex-start;flex-direction:column}}@media (max-width:480px){.page-header h1{font-size:20px}.employee-avatar-container{height:60px;width:60px}.employee-avatar,.employee-avatar-placeholder{font-size:20px;height:60px;width:60px}.employee-info h3,.modal-header h2{font-size:18px}.form-section h3{font-size:14px}.table-container{overflow-x:scroll}}.modal-body::-webkit-scrollbar{height:12px;width:12px}.modal-body::-webkit-scrollbar-track{border-radius:10px}.modal-body::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#667eea,#764ba2);border:2px solid #f1f1f1;border-radius:10px}.modal-body::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#5568d3,#653a8b)}.table-container::-webkit-scrollbar{height:14px;width:14px}.table-container::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px;margin:4px}.table-container::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#667eea,#764ba2);border:3px solid #f1f1f1;border-radius:10px}.table-container::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#5568d3,#653a8b)}.table-container{scrollbar-color:#667eea #f1f1f1;scrollbar-width:auto}.section-header-with-button{align-items:center;display:flex;justify-content:space-between;margin-bottom:15px}.section-header-with-button h3{margin:0}.btn-add-small{background:#10b981;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:13px;font-weight:500;padding:8px 16px;transition:all .2s}.btn-add-small:hover{background:#059669;transform:translateY(-1px)}.deductions-list{display:flex;flex-direction:column;gap:12px}.deduction-item{align-items:center;background:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;display:flex;justify-content:space-between;padding:16px;transition:all .2s}.deduction-item.active{background:#ecfdf5;border-left:4px solid #10b981}.deduction-item.inactive{background:#f3f4f6;border-left:4px solid #9ca3af;opacity:.7}.deduction-item:hover{box-shadow:0 2px 8px #00000014}.deduction-info{flex:1 1}.deduction-name{align-items:center;color:#111827;display:flex;font-size:15px;font-weight:600;gap:10px;margin-bottom:6px}.deduction-status{border-radius:12px;display:inline-block;font-size:11px;font-weight:500;padding:2px 8px;text-transform:uppercase}.deduction-status.active{background:#d1fae5;color:#065f46}.deduction-status.inactive{background:#e5e7eb;color:#6b7280}.deduction-details{align-items:center;display:flex;gap:12px;margin-bottom:4px}.deduction-amount{color:#dc2626;font-size:16px;font-weight:600}.deduction-type{color:#6b7280;font-size:12px;text-transform:capitalize}.deduction-dates{color:#6b7280;display:flex;font-size:12px;gap:16px;margin-top:4px}.deduction-dates span{align-items:center;display:flex;gap:4px}.deduction-actions{display:flex;gap:6px}.btn-icon-small{background:#fff;border:1px solid #d1d5db;border-radius:6px;cursor:pointer;font-size:14px;padding:6px 10px;transition:all .2s}.btn-icon-small:hover{background:#f3f4f6;transform:scale(1.05)}.btn-icon-small.danger:hover{background:#fee2e2;border-color:#ef4444}.no-data{background:#f9fafb;border:2px dashed #e5e7eb;border-radius:8px;color:#9ca3af;font-size:14px;padding:40px 20px;text-align:center}.form-group small{color:#6b7280}@media (max-width:768px){.deduction-item{align-items:flex-start;flex-direction:column;gap:12px}.deduction-actions{justify-content:flex-end;width:100%}.section-header-with-button{align-items:flex-start;flex-direction:column;gap:10px}.btn-add-small{width:100%}}.employee-badge{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:20px;box-shadow:0 2px 10px #667eea66;color:#fff;font-size:11px;font-weight:700;letter-spacing:.8px;padding:6px 14px;position:absolute;right:12px;text-transform:uppercase;top:12px;z-index:5}.attendance-container{margin:0 auto;max-width:1400px;padding:20px}.attendance-header{align-items:center;display:flex;flex-wrap:wrap;gap:15px;justify-content:space-between;margin-bottom:20px}.attendance-header h1{color:#2c3e50;font-size:1.8em;margin:0}.attendance-date{color:#7f8c8d;font-size:1em;margin:5px 0 0}.header-stats{display:flex;gap:10px}.stat-mini{border-radius:8px;box-shadow:0 2px 6px #0000001a;min-width:70px;padding:8px 15px;text-align:center}.stat-mini.present{background:linear-gradient(135deg,#11998e,#38ef7d);color:#fff}.stat-mini.late{background:linear-gradient(135deg,#f093fb,#f5576c);color:#fff}.stat-mini.absent{background:linear-gradient(135deg,#fa709a,#fee140);color:#fff}.stat-mini.sick{background:linear-gradient(135deg,#4facfe,#00f2fe);color:#fff}.stat-value{font-size:1.5em}.stat-label{font-size:.75em;opacity:.9}.view-toggle{background:#f8f9fa;border-radius:10px;display:flex;gap:10px;margin-bottom:20px;padding:5px;width:-webkit-fit-content;width:fit-content}.toggle-btn{background:#0000;border:none;border-radius:8px;color:#7f8c8d;cursor:pointer;font-size:1em;font-weight:600;padding:10px 20px;transition:all .3s}.toggle-btn:hover{background:#e9ecef;color:#2c3e50}.toggle-btn.active{background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 4px 10px #667eea4d;color:#fff}.search-bar{margin-bottom:15px}.search-bar input{border:2px solid #ecf0f1;border-radius:8px;font-size:1em;padding:12px 15px;transition:all .3s;width:100%}.search-bar input:focus{border-color:#3498db;box-shadow:0 0 0 3px #3498db1a;outline:none}.attendance-list{display:flex;flex-direction:column;gap:10px}.attendance-row{align-items:center;background:#fff;border:2px solid #ecf0f1;border-radius:10px;display:flex;gap:15px;justify-content:space-between;padding:12px 15px;transition:all .3s}.attendance-row:hover{border-color:#3498db;box-shadow:0 3px 10px #3498db33}.attendance-row.marked{background:linear-gradient(90deg,#fff 0,#f0fff4);border-color:#27ae60}.emp-info-section{align-items:center;display:flex;flex:1 1;gap:12px;min-width:250px}.emp-photo{border:2px solid #ecf0f1;border-radius:50%;flex-shrink:0;height:50px;overflow:hidden;position:relative;width:50px}.emp-photo img{height:100%;object-fit:cover;width:100%}.photo-placeholder{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;display:flex;font-size:1.2em;font-weight:700;height:100%;justify-content:center;width:100%}.emp-details h3{color:#2c3e50;font-size:1em;font-weight:600;margin:0 0 4px}.emp-meta{align-items:center;display:flex;font-size:.85em;gap:6px}.emp-meta .position{color:#3498db;font-weight:500}.emp-meta .department{color:#7f8c8d}.emp-meta .separator{color:#bdc3c7}.emp-meta .emp-id{background:#ecf0f1;border-radius:10px;color:#7f8c8d;font-size:.9em;padding:2px 8px}.status-section{align-items:center;display:flex;flex-wrap:wrap;gap:10px}.status-display{border-radius:15px;font-size:.85em;font-weight:700;padding:6px 15px;white-space:nowrap}.status-display.present{background:linear-gradient(135deg,#11998e,#38ef7d);color:#fff}.status-display.late{background:linear-gradient(135deg,#f093fb,#f5576c);color:#fff}.status-display.absent{background:linear-gradient(135deg,#fa709a,#fee140);color:#fff}.status-display.sick{background:linear-gradient(135deg,#4facfe,#00f2fe);color:#fff}.ot-badge{background:#d1ecf1;border-radius:10px;color:#0c5460;font-size:.8em;font-weight:600;padding:4px 10px}.status-select-compact{border:2px solid #ecf0f1;border-radius:6px;cursor:pointer;font-size:.9em;font-weight:500;min-width:120px;padding:6px 10px}.status-select-compact:focus{border-color:#3498db;outline:none}.late-input-compact,.ot-input-compact{align-items:center;background:#fff3cd;border-radius:6px;display:flex;gap:5px;padding:4px 8px}.ot-input-compact{background:#d1ecf1}.late-input-compact input,.ot-input-compact input{border:1px solid #ddd;border-radius:4px;font-size:.9em;font-weight:600;padding:4px 6px;text-align:center;width:50px}.late-input-compact span,.ot-input-compact span{color:#34495e;font-size:.85em;font-weight:600}.checkbox-compact{align-items:center;color:#34495e;cursor:pointer;display:flex;font-size:.9em;font-weight:600;gap:4px}.checkbox-compact input[type=checkbox]{cursor:pointer;height:16px;width:16px}.btn-cancel-compact,.btn-edit,.btn-mark-compact{border:none;border-radius:6px;cursor:pointer;font-size:.9em;font-weight:700;padding:6px 12px;transition:all .2s}.btn-mark-compact{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.btn-mark-compact:hover:not(:disabled){box-shadow:0 4px 12px #667eea66;transform:translateY(-2px)}.btn-mark-compact:disabled{cursor:not-allowed;opacity:.6}.btn-edit{background:#3498db}.btn-edit:hover{background:#2980b9}.btn-cancel-compact{background:#e74c3c;color:#fff}.btn-cancel-compact:hover{background:#c0392b}.calendar-view-container{background:#fff;border-radius:12px;box-shadow:0 2px 10px #0000001a;padding:20px}.calendar-controls{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:20px}.employee-selector,.month-selector{display:flex;flex:1 1;flex-direction:column;gap:8px;min-width:250px}.employee-selector label,.month-selector label{color:#2c3e50;font-size:.95em;font-weight:600}.employee-select,.month-input{background:#fff;border:2px solid #ecf0f1;border-radius:8px;font-size:1em;padding:10px 12px;transition:all .3s}.employee-select:focus,.month-input:focus{border-color:#3498db;box-shadow:0 0 0 3px #3498db1a;outline:none}.empty-state{color:#7f8c8d;font-size:1.2em}.calendar-grid-wrapper{margin-top:20px}.calendar-header-info{margin-bottom:20px;text-align:center}.calendar-header-info h3{color:#2c3e50;font-size:1.5em;margin:0 0 8px}.selected-employee-info{color:#7f8c8d;font-size:1em;margin:0}.calendar-grid{margin-bottom:20px}.calendar-day-header{background:#f8f9fa;color:#2c3e50;font-size:.9em}.calendar-day{border:2px solid #ecf0f1;border-radius:10px;gap:8px;min-height:100px;padding:10px;transition:all .3s}.calendar-day:hover{border-color:#3498db;box-shadow:0 3px 10px #3498db33;transform:translateY(-2px)}.calendar-day.empty{background:#f8f9fa}.calendar-day.empty:hover{box-shadow:none;transform:none}.calendar-day.today{border-color:#667eea;border-width:3px;font-weight:700}.calendar-day.has-attendance{border-width:3px}.day-number{color:#2c3e50;font-size:1.1em;font-weight:600}.day-info{flex-direction:column;gap:4px;margin-top:auto}.status-badge{padding:4px 8px}.hours-badge,.status-badge{font-size:.75em;text-align:center}.hours-badge{background:#e9ecef;border-radius:8px;color:#495057;padding:3px 8px}.calendar-legend{background:#f8f9fa;border-radius:10px;margin-top:20px;padding:15px}.calendar-legend h4{color:#2c3e50;font-size:1em;margin:0 0 12px}.legend-items{display:flex;flex-wrap:wrap;gap:20px}.legend-item{color:#495057;font-size:.9em}.legend-color{border-radius:4px;display:inline-block;height:20px;width:20px}.modal-overlay{animation:fadeIn .2s}.modal-content{animation:slideUp .3s}.modal-header{border-bottom:2px solid #ecf0f1}.modal-header h2{font-size:1.4em}.close-btn{background:#e74c3c;font-size:1.2em}.close-btn:hover{background:#c0392b}.form-group input,.form-group select,.form-group textarea{border:2px solid #ecf0f1;font-size:1em;transition:all .3s}.form-row{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.form-row .form-group{margin-bottom:0}.modal-actions{border-top:2px solid #ecf0f1;gap:10px;padding:20px}.btn-close,.btn-save{border:none;border-radius:8px;cursor:pointer;font-size:1em;font-weight:600;padding:10px 20px;transition:all .2s}.btn-save{background:linear-gradient(135deg,#667eea,#764ba2)}.btn-save:hover:not(:disabled){box-shadow:0 4px 12px #667eea66}.btn-save:disabled{opacity:.6}.btn-close{background:#ecf0f1;color:#2c3e50}.btn-close:hover{background:#bdc3c7}@media (max-width:1024px){.attendance-row{align-items:flex-start;flex-direction:column}.status-section{width:100%}.calendar-grid{gap:4px}.calendar-day{min-height:80px;padding:6px}}@media (max-width:768px){.header-stats{justify-content:space-between;width:100%}.stat-mini{flex:1 1;min-width:0;min-width:auto}.calendar-controls{flex-direction:column}.employee-selector,.month-selector{min-width:100%}.calendar-grid{gap:2px}.calendar-day{font-size:.85em;min-height:60px;padding:4px}.legend-items{flex-direction:column;gap:10px}.modal-content{width:95%}}@media (max-width:480px){.attendance-header h1{font-size:1.4em}.view-toggle{width:100%}.toggle-btn{flex:1 1;font-size:.9em;padding:8px 12px}}.view-tabs{border-bottom:2px solid #e0e0e0;display:flex;gap:12px;margin-bottom:24px}.bulk-operations{background:#fff;border-radius:16px;box-shadow:0 4px 12px #00000014;padding:32px}.bulk-header{margin-bottom:32px}.bulk-header h2{color:#1e3c72;font-size:24px;margin:0 0 8px}.bulk-header p{color:#666;font-size:14px;margin:0}.bulk-controls{grid-gap:32px;display:grid;gap:32px;grid-template-columns:1fr;margin-bottom:32px}.control-section{background:#f8f9fa;border:2px solid #e9ecef;border-radius:12px;padding:24px}.control-section h3{color:#1e3c72;font-weight:700;margin:0 0 20px}.select-all{background:#fff;border:2px solid #2a5298;border-radius:8px;margin-bottom:20px;padding:16px}.select-all label{align-items:center;color:#1e3c72;cursor:pointer;display:flex;font-weight:600;gap:12px}.select-all input[type=checkbox]{cursor:pointer;height:20px;width:20px}.employees-grid{grid-gap:12px;background:#fff;gap:12px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));padding:16px}.employee-checkbox{border-radius:6px;gap:8px;transition:background .2s}.employee-checkbox:hover{background:#f0f2f5}.employee-checkbox span{color:#333;font-size:14px}.date-controls{gap:12px;margin-bottom:20px}.month-input,.number-input{border:2px solid #e0e0e0;border-radius:8px;font-size:14px;padding:10px 16px}.month-input:focus,.number-input:focus{border-color:#2a5298;outline:none}.btn-secondary{background:#fff;border:2px solid #2a5298;border-radius:8px;color:#2a5298;cursor:pointer;font-size:14px;font-weight:600;padding:10px 20px;transition:all .2s}.btn-secondary:hover{background:#2a5298;color:#fff}.bulk-calendar{background:#fff;border-radius:8px;margin-bottom:16px;padding:16px}.calendar-mini{transform:scale(.9);transform-origin:top left}.selected-count{color:#2a5298;font-size:16px;font-weight:600;margin:0;text-align:center}.status-controls{grid-gap:20px;display:grid;gap:20px;grid-template-columns:1fr 1fr}.select-input{background:#fff;border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;font-size:14px;padding:10px 16px}.select-input:focus{border-color:#2a5298;outline:none}.bulk-summary{align-items:flex-start;background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-radius:12px;display:flex;gap:24px;padding:24px}.summary-card{flex:1 1}.summary-card h4{color:#1e3c72;font-size:18px;margin:0 0 16px}.summary-row span{color:#666}.summary-row strong{color:#1e3c72;font-weight:700}.summary-row.total{border-top:2px solid #2a5298;font-size:18px}.summary-row.total strong{color:#2a5298}.btn-apply-bulk{background:linear-gradient(135deg,#4caf50,#45a049);box-shadow:0 4px 12px #4caf504d;font-size:16px;padding:16px 48px;white-space:nowrap}.btn-apply-bulk:hover:not(:disabled){box-shadow:0 8px 20px #4caf5066;transform:translateY(-4px)}.btn-apply-bulk:disabled{transform:none}.calendar-container{background:#fff;border-radius:16px;box-shadow:0 4px 12px #00000014;padding:24px}.month-year{color:#1e3c72;font-size:24px;font-weight:700}.weekday-headers{grid-gap:8px;display:grid;gap:8px;grid-template-columns:repeat(7,1fr);margin-bottom:8px}.weekday{color:#666;font-size:14px;font-weight:700;padding:12px;text-align:center}.calendar-week{grid-gap:8px;display:grid;gap:8px;grid-template-columns:repeat(7,1fr);margin-bottom:8px}.calendar-day{border:2px solid #e9ecef;padding:12px}.calendar-day.empty{border:none}.calendar-day:not(.empty):hover{transform:scale(1.05);z-index:10}.calendar-day.weekend{background:#f8f9fa}.calendar-day.selected{background:#e3f2fd;border-color:#2196f3;box-shadow:0 0 0 3px #2196f333}.calendar-day.present{background:#e8f5e9;border-color:#4caf50}.calendar-day.absent{background:#ffebee;border-color:#f44336}.calendar-day.sick{background:#fff3e0;border-color:#ff9800}.calendar-day.vacation{background:#e1f5fe;border-color:#03a9f4}.calendar-day.late{background:#fff9c4;border-color:#ffc107}.day-number{display:block;margin-bottom:8px}.day-info{align-items:center;display:flex;font-size:12px;gap:6px}.status-dot{display:inline-block;height:10px;width:10px}.status-dot.present{background:#4caf50}.status-dot.sick{background:#ff9800}.status-dot.vacation{background:#03a9f4}.status-dot.late{background:#ffc107}.hours{color:#666;font-weight:600}.legend{background:#f8f9fa;border-radius:8px;display:flex;flex-wrap:wrap;gap:24px;justify-content:center;padding:20px}.legend-item{font-weight:600}.modal-header{border-bottom:2px solid #e9ecef;padding:24px 28px}.modal-close{color:#999;font-size:32px;line-height:1}.modal-body{padding:28px}.confirm-list li{border-bottom:1px solid #e9ecef;padding:12px 0}.confirm-list li:last-child{border-bottom:none}.status-badge.present{background:#e8f5e9;color:#2e7d32}.status-badge.absent{background:#ffebee;color:#c62828}.status-badge.sick{background:#fff3e0;color:#e65100}.status-badge.vacation{background:#e1f5fe;color:#0277bd}.status-badge.late{background:#fff9c4;color:#f57f17}.warning-box{color:#856404;font-weight:500}.modal-footer{background:#f8f9fa;border-radius:0 0 16px 16px;border-top:2px solid #e9ecef;gap:12px;padding:24px 28px}.btn-cancel,.btn-confirm{border:none;border-radius:8px;cursor:pointer;flex:1 1;font-size:15px;font-weight:600;padding:14px 24px;transition:all .2s}.btn-cancel:hover{background:#f5f5f5}.btn-confirm{background:linear-gradient(135deg,#4caf50,#45a049);color:#fff}.btn-confirm:hover{box-shadow:0 4px 16px #4caf5066;transform:translateY(-2px)}@media (max-width:1024px){.status-controls{grid-template-columns:1fr}.bulk-summary{flex-direction:column}.btn-apply-bulk{width:100%}}@media (max-width:768px){.employees-grid{grid-template-columns:1fr}.calendar-week{gap:4px}.calendar-day{font-size:12px;padding:8px}.view-tabs{flex-direction:column}.tab-btn{text-align:left;width:100%}.date-controls{flex-direction:column}.date-controls .btn-secondary{width:100%}}.calendar-day.clickable:hover{box-shadow:0 4px 12px #00000026}.modal-subtitle{background:#f8f9fa;padding:12px}.number-input,.select-input,.textarea-input{padding:10px}.textarea-input{font-family:inherit}.summary-stats{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:20px 0}.stat-card{gap:12px;padding:15px}.stat-card:hover{box-shadow:0 4px 12px #0000001f;transform:translateY(-2px)}.stat-card .stat-icon{font-size:32px}.stat-card .stat-content{flex:1 1}.stat-card .stat-value{color:#2c3e50;font-size:24px;font-weight:700}.stat-card .stat-label{color:#7f8c8d;font-size:12px;letter-spacing:.5px;text-transform:uppercase}.stat-card.present{border-left:4px solid #27ae60}.stat-card.absent{border-left:4px solid #e74c3c}.stat-card.sick{border-left:4px solid #f39c12}.stat-card.vacation{border-left:4px solid #3498db}.stat-card.late{border-left:4px solid #e67e22}.stat-card.total-hours{border-left:4px solid #9b59b6}.empty-state{border-radius:12px;margin:20px 0}.empty-icon{font-size:64px;opacity:.5}.empty-state h3{color:#2c3e50;font-size:24px;margin-bottom:10px}.calendar-day.unmarked{background:#f8f9fa;border:2px dashed #dee2e6}.calendar-day.clickable{cursor:pointer;transition:all .2s}.calendar-day.clickable:hover{border-color:#3498db;box-shadow:0 4px 12px #3498db4d;transform:scale(1.05)}.calendar-day .unmarked-hint{align-items:center;display:flex;justify-content:center;opacity:.3;transition:opacity .2s}.calendar-day:hover .unmarked-hint{opacity:.7}.calendar-day .add-icon{color:#3498db;font-size:20px;font-weight:700}.calendar-header{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:12px 12px 0 0;color:#fff;display:flex;justify-content:space-between;margin-bottom:0;padding:15px 20px}.calendar-header .month-year{font-size:20px;font-weight:700}.calendar-header .employee-name{font-size:16px;opacity:.9}.calendar-hint{background:#e8f4f8;border-radius:8px;color:#2c3e50;font-size:14px;margin-top:15px;padding:12px;text-align:center}.calendar-hint strong{color:#3498db}.bulk-header{margin-bottom:30px;text-align:center}.bulk-header h2{color:#2c3e50;font-size:28px;margin-bottom:8px}.bulk-header p{color:#7f8c8d;font-size:16px}.control-section h3{color:#2c3e50;font-size:18px;gap:10px}.control-section h3,.select-all-row{align-items:center;display:flex;margin-bottom:15px}.select-all-row{background:#f8f9fa;border-radius:8px;justify-content:space-between;padding:12px}.btn-clear{background:#e74c3c;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:14px;padding:6px 16px;transition:all .2s}.btn-clear:hover:not(:disabled){background:#c0392b;transform:translateY(-1px)}.btn-clear:disabled{cursor:not-allowed;opacity:.5}.employees-grid{grid-gap:10px;background:#f8f9fa;border-radius:8px;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));max-height:300px;overflow-y:auto;padding:10px}.employee-checkbox{align-items:center;background:#fff;border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;display:flex;gap:10px;padding:10px;transition:all .2s}.employee-checkbox:hover{background:#f0f8ff;border-color:#3498db}.employee-checkbox input[type=checkbox]{cursor:pointer;height:18px;width:18px}.employee-checkbox input[type=checkbox]:checked+.emp-name{color:#3498db;font-weight:700}.emp-name{flex:1 1;font-size:14px;font-weight:500}.emp-position{color:#7f8c8d;font-size:12px;font-style:italic}.date-controls{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:15px}.date-controls button{white-space:nowrap}.summary-card-big{background:#fff;border-radius:12px;box-shadow:0 2px 12px #0000001a;margin-bottom:20px;padding:20px}.summary-card-big h4{color:#2c3e50;font-size:18px;margin-bottom:15px}.summary-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}.summary-item{align-items:center;background:#f8f9fa;gap:12px;padding:15px;transition:all .2s}.summary-item:hover{background:#e9ecef;transform:translateY(-2px)}.summary-item.total{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.summary-item.total .summary-label,.summary-item.total .summary-value{color:#fff}.summary-icon{font-size:32px}.summary-content{flex:1 1}.summary-label{color:#7f8c8d;font-size:11px;letter-spacing:.5px;margin-bottom:4px;text-transform:uppercase}.summary-value{color:#2c3e50;font-size:24px}.btn-apply-bulk{background:linear-gradient(135deg,#11998e,#38ef7d);border:none;border-radius:12px;box-shadow:0 4px 12px #11998e4d;color:#fff;cursor:pointer;font-size:18px;font-weight:700;padding:18px;transition:all .3s;width:100%}.btn-apply-bulk:hover:not(:disabled){box-shadow:0 6px 20px #11998e66;transform:translateY(-2px)}.btn-apply-bulk:disabled{cursor:not-allowed;opacity:.5}.modal-subtitle{background:#f0f8ff;border-left:4px solid #3498db;border-radius:8px;line-height:1.6;margin:0 0 20px;padding:15px}.modal-subtitle strong{color:#2c3e50}.number-input,.select-input,.textarea-input{border:2px solid #e0e0e0;border-radius:8px;font-family:inherit;font-size:14px;padding:12px;transition:border-color .2s;width:100%}.number-input:focus,.select-input:focus,.textarea-input:focus{border-color:#3498db;box-shadow:0 0 0 3px #3498db1a;outline:none}.textarea-input{min-height:80px;resize:vertical}.btn-delete{background:#e74c3c;border:none;border-radius:8px;cursor:pointer;font-size:14px;font-weight:600;margin-right:auto;padding:12px 20px;transition:all .2s}.btn-delete:hover:not(:disabled){background:#c0392b;transform:translateY(-1px)}.btn-delete:disabled{cursor:not-allowed;opacity:.5}.status-badge{font-size:13px}.status-badge.present{background:#d4edda;color:#155724}.status-badge.absent{background:#f8d7da;color:#721c24}.status-badge.sick{background:#fff3cd;color:#856404}.status-badge.vacation{background:#d1ecf1;color:#0c5460}.status-badge.late{background:#f8e9d7;color:#85560c}@media (max-width:768px){.summary-stats{grid-template-columns:repeat(2,1fr)}.employees-grid{grid-template-columns:1fr}.date-controls{flex-direction:column}.date-controls button{width:100%}.calendar-header{flex-direction:column;gap:10px;text-align:center}}.calendar-container{max-height:none!important;min-height:auto!important;overflow:visible!important}.calendar-day{min-height:80px!important}.checkbox-label span{-webkit-user-select:none;user-select:none}.form-group.half-width label{color:#2c3e50;display:block;font-size:13px;font-weight:600;margin-bottom:8px}@media (max-width:768px){.form-row{grid-template-columns:1fr}.overtime-section{padding:15px}}.number-input{font-family:Courier New,monospace;font-weight:600}.number-input:focus{border-color:#ff9800;box-shadow:0 0 0 3px #ff98001a}.checkbox-label:hover{color:#ff9800}.checkbox-label:hover input[type=checkbox]{transform:scale(1.1)}.overtime-section{background:#f8f9fa;border-left:4px solid #ff9800;border-radius:12px;margin:20px 0;padding:20px}.checkbox-group{margin-bottom:0!important}.checkbox-label{color:#2c3e50;font-size:15px;font-weight:600}.checkbox-label input[type=checkbox]{accent-color:#ff9800}.overtime-fields{animation:slideDown .3s ease;border-top:2px dashed #dee2e6;margin-top:15px;padding-top:15px}.form-group.half-width{margin-bottom:15px}.form-group.half-width small{color:#7f8c8d;display:block;font-size:11px;font-style:italic;margin-top:5px}.overtime-preview{background:#fff3e0;border-left:4px solid #ff9800;border-radius:8px;color:#e65100;font-size:14px;font-weight:600;margin-top:15px;padding:12px}.btn-refresh{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;gap:8px;padding:10px 20px}.btn-refresh:hover:not(:disabled){box-shadow:0 4px 12px #667eea66;transform:translateY(-2px)}.btn-refresh:disabled{cursor:not-allowed;opacity:.6}.btn-refresh.refreshing{animation:pulse 1s infinite}.update-indicator{background:#f8f9fa;border-left:4px solid #667eea;border-radius:8px;justify-content:space-between;margin:15px 0;padding:12px 20px}.update-indicator,.update-text{align-items:center;display:flex}.update-text{color:#2c3e50;font-size:14px;font-weight:500;gap:10px}.auto-refresh-info{color:#7f8c8d;font-size:12px;font-style:italic}.new-badge{animation:bounceIn .5s;background:linear-gradient(135deg,#11998e,#38ef7d);border-radius:20px;color:#fff;display:inline-block;font-size:12px;font-weight:700;padding:4px 12px}@keyframes bounceIn{0%{opacity:0;transform:scale(0)}50%{transform:scale(1.1)}to{opacity:1;transform:scale(1)}}.calendar-grid{display:block!important;max-height:none!important;overflow:visible!important}.calendar-week{grid-gap:8px!important;display:grid!important;gap:8px!important;grid-template-columns:repeat(7,1fr)!important;margin-bottom:8px!important}.calendar-day{display:flex!important;flex-direction:column!important;min-height:100px!important;visibility:visible!important}@media (max-width:768px){.form-row{grid-template-columns:1fr}.update-indicator{flex-direction:column;gap:8px;text-align:center}.controls{gap:10px}.btn-refresh{justify-content:center;width:100%}}.late-minutes-group{background:#fff3cd;border-left:4px solid #ffc107;border-radius:8px;margin-top:12px;padding:16px}.late-minutes-group label{color:#856404;font-weight:600}.late-minutes-group small{color:#856404;display:block;font-size:12px;margin-top:6px}.attendance-info{align-items:center;display:flex;flex-direction:column;font-size:11px;gap:4px}.status-emoji{font-size:18px}.status-text{font-size:10px;font-weight:600;text-transform:uppercase}.extra-info{background:#fff3cd;border-radius:4px;color:#ff9800;font-size:9px;font-weight:600;padding:2px 6px}.future-date-warning{align-items:center;background:#f8d7da;border-left:4px solid #f5c6cb;border-radius:8px;color:#721c24;display:flex;gap:10px;margin-bottom:16px;padding:12px}.future-date-warning:before{content:"⚠️";font-size:24px}.calendar-day.has-late{border-left:4px solid #ff9800}.calendar-day.has-late:hover{background:#fff3cd}.bulk-late-minutes{animation:slideIn .3s ease;background:#fff3cd;border-left:4px solid #ffc107;border-radius:8px;margin-top:12px;padding:16px}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.bulk-late-minutes label{align-items:center;color:#856404;display:flex;font-weight:600;gap:8px}.bulk-late-minutes .helper-text{color:#856404;display:block;font-size:12px;font-style:italic;margin-top:6px}.summary-item.late-info{background:#fff3cd;border-left:4px solid #ffc107}.summary-item.late-info .summary-label{color:#856404}.summary-item.late-info .summary-value{color:#ff9800;font-weight:700}.late-highlight{background:#fff3cd;border-left:4px solid #ffc107;border-radius:6px;color:#856404;font-weight:600;margin:8px 0;padding:8px 12px}.confirm-list{list-style:none;margin:20px 0;padding:0}.confirm-list li{background:#f8f9fa;border-radius:6px;font-size:15px;margin-bottom:8px;padding:12px}.confirm-list li strong{color:#667eea}.total-records-warning{background:#e3f2fd;border:2px solid #2196f3;border-radius:8px;margin:16px 0;padding:16px;text-align:center}.total-records-warning strong{color:#1976d2;font-size:18px}.warning-text{color:#d32f2f;font-size:15px;text-align:center}.modal-actions{border-top:2px solid #e0e0e0;display:flex;gap:12px;justify-content:flex-end;margin-top:24px;padding-top:20px}.btn-cancel-modal{background:#f5f5f5;border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;font-size:15px;font-weight:600;padding:12px 32px;transition:all .2s}.btn-cancel-modal:hover{background:#e0e0e0;border-color:#ccc}.btn-confirm-modal{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:15px;font-weight:600;padding:12px 36px;transition:all .2s}.btn-confirm-modal:hover:not(:disabled){box-shadow:0 8px 20px #667eea66;transform:translateY(-2px)}.btn-confirm-modal:disabled{cursor:not-allowed;opacity:.6}.confirmation-details{background:#fff;border-radius:12px;padding:20px}.confirmation-details>p{color:#666;font-size:16px;margin-bottom:16px}.roster-view{padding:24px}.roster-header{background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000001a;margin-bottom:24px;padding:24px}.roster-controls{align-items:center;display:flex;flex-wrap:wrap;gap:24px}.roster-controls .form-group{flex:1 1;margin:0;min-width:250px}.roster-controls label{color:#374151;display:block;font-weight:600;margin-bottom:8px}.week-navigation{align-items:center;display:flex;gap:16px}.current-week{color:#1e3c72;font-size:16px;font-weight:600;min-width:200px;text-align:center}.roster-table-container{background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000001a;overflow:hidden}.roster-table{border-collapse:collapse;width:100%}.roster-table thead{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.roster-table th{font-size:14px;font-weight:600;letter-spacing:.5px;padding:16px 12px;text-align:left;text-transform:uppercase}.roster-table tbody tr{border-bottom:1px solid #e5e7eb;transition:background-color .2s}.roster-table tbody tr:hover{background-color:#f9fafb}.roster-table tbody tr.sunday-row{background-color:#fef3c7}.roster-table tbody tr.sunday-row:hover{background-color:#fde68a}.roster-table td{color:#374151;font-size:14px;padding:14px 12px}.roster-table .hours-cell{color:#059669;font-weight:600}.roster-table .amount-cell{color:#1e3c72;font-size:15px;font-weight:600}.roster-table tfoot{background-color:#f3f4f6;font-weight:700}.roster-table tfoot td{font-size:15px;padding:16px 12px}.roster-table .totals-row{border-top:3px solid #667eea}.btn-edit-roster{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:13px;font-weight:600;padding:8px 16px;transition:all .2s}.btn-edit-roster:hover{box-shadow:0 4px 12px #667eea66;transform:translateY(-2px)}.roster-summary{grid-gap:16px;background:#f9fafb;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));padding:24px}.roster-summary .summary-card{background:#fff;border-radius:12px;box-shadow:0 2px 8px #00000014;padding:20px;text-align:center}.roster-summary .summary-label{color:#6b7280;font-size:13px;font-weight:600;letter-spacing:.5px;margin-bottom:8px;text-transform:uppercase}.roster-summary .summary-value{color:#1e3c72;font-size:28px;font-weight:700}.modal-content .form-grid{grid-gap:16px;display:grid;gap:16px;grid-template-columns:repeat(2,1fr);margin-top:20px}.modal-content .form-grid .form-group.full-width{grid-column:1/-1}.modal-content .checkbox-label{align-items:center;cursor:pointer;display:flex;font-weight:500;gap:8px}.modal-content .checkbox-label input[type=checkbox]{cursor:pointer;height:18px;width:18px}.calculation-preview{background:linear-gradient(135deg,#f0f9ff,#e0f2fe);border-left:4px solid #0ea5e9;border-radius:12px;margin-top:24px;padding:20px}.calculation-preview h4{color:#0c4a6e;font-size:15px;font-weight:600;margin:0 0 16px}.preview-grid{grid-gap:16px;display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}.preview-item{align-items:center;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000000d;display:flex;flex-direction:column;padding:12px}.preview-label{color:#64748b;font-size:12px;font-weight:600;letter-spacing:.5px;margin-bottom:6px;text-transform:uppercase}.preview-value{color:#0ea5e9;font-size:20px;font-weight:700}.preview-value.strong{color:#1e3c72;font-size:24px}.roster-view .empty-state{background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000001a;padding:80px 24px;text-align:center}.roster-view .empty-icon{font-size:64px;margin-bottom:16px}.roster-view .empty-state h3{color:#1e3c72;font-size:24px;margin:0 0 8px}.roster-view .empty-state p{color:#6b7280;font-size:16px;margin:0}@media (max-width:768px){.roster-controls{align-items:stretch}.roster-controls,.week-navigation{flex-direction:column}.roster-table-container{overflow-x:auto}.roster-table{min-width:900px}.preview-grid,.roster-summary{grid-template-columns:1fr}}.holiday-config,.sunday-config{background:#f8f9fa;border:1px solid #dee2e6;border-radius:8px;margin-top:10px;padding:15px}.radio-group{display:flex;flex-direction:column;gap:10px;margin-bottom:15px}.radio-label{align-items:center;border-radius:4px;cursor:pointer;display:flex;gap:10px;padding:8px;transition:background .2s}.radio-label:hover{background:#0000000d}.radio-label input[type=radio]{cursor:pointer}.radio-label span{font-weight:500}.checkbox-label small{color:#6c757d;display:block;font-size:.85em;margin-top:4px}.form-group.full-width .checkbox-label span{font-weight:600}.badge{border-radius:4px;font-size:.85em;padding:4px 8px}.badge-warning{background-color:#fff3cd;border:1px solid #ffc107}.badge-success{background-color:#d4edda;border:1px solid #28a745}.badge-default{background-color:#e9ecef;border:1px solid #ced4da;color:#6c757d}.roster-table td:nth-child(4){font-weight:500;text-align:center}.absent-badge{align-items:center;background:#fee2e2;border:1px solid #fca5a5;border-radius:4px;color:#dc2626;display:inline-flex;font-size:13px;font-weight:600;gap:4px;padding:4px 8px}.absent-badge.total-deduction{background:#fef3c7;border-color:#fbbf24;color:#d97706}.form-group .checkbox-label input[type=checkbox]+span{margin-left:8px}.absent-config{background:#fef3c7;border:2px solid #fbbf24;border-radius:8px;margin-top:8px;padding:16px}.absent-config .form-group{margin-bottom:12px}.absent-config label{color:#92400e;display:block;font-weight:600;margin-bottom:4px}.absent-config input,.absent-config select,.absent-config textarea{background:#fff;border:1px solid #d97706;border-radius:6px;font-size:14px;padding:8px 12px;width:100%}.absent-config input:focus,.absent-config select:focus,.absent-config textarea:focus{border-color:#f59e0b;box-shadow:0 0 0 3px #fbbf241a;outline:none}.absent-config small{color:#92400e;display:block;font-size:12px;font-style:italic;margin-top:4px}.deduction-type-selector{display:flex;gap:12px;margin-top:8px}.deduction-type-option{border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;flex:1 1;padding:12px;text-align:center;transition:all .2s}.deduction-type-option:hover{background:#fffbeb;border-color:#fbbf24}.deduction-type-option.selected{background:#fef3c7;border-color:#f59e0b}.deduction-type-option .type-icon{font-size:24px;margin-bottom:4px}.deduction-type-option .type-label{color:#1f2937;font-size:13px;font-weight:600}.deduction-type-option .type-desc{color:#6b7280;font-size:11px;margin-top:4px}.deduction-indicator{align-items:center;background:#fef2f2;border:1px solid #fca5a5;border-radius:6px;display:flex;gap:8px;margin-top:12px;padding:12px}.deduction-indicator .icon{font-size:20px}.deduction-indicator .text{color:#991b1b;flex:1 1;font-size:13px}.deduction-indicator .amount{color:#dc2626;font-size:15px;font-weight:700}.absent-reason-input{border:2px solid #fed7aa;border-radius:6px;font-family:inherit;font-size:14px;min-height:80px;padding:10px;resize:vertical;transition:border-color .2s;width:100%}.absent-reason-input:focus{border-color:#fb923c;box-shadow:0 0 0 3px #fb923c1a;outline:none}.absent-reason-input::placeholder{color:#9ca3af;font-style:italic}.absent-warning{align-items:start;background:#fef2f2;border-left:4px solid #ef4444;border-radius:4px;display:flex;gap:10px;margin:12px 0;padding:12px}.absent-warning .warning-icon{flex-shrink:0;font-size:20px}.absent-warning .warning-text{color:#7f1d1d;font-size:13px;line-height:1.5}.deduction-info-box{background:#eff6ff;border:1px solid #bfdbfe;border-radius:6px;margin-top:8px;padding:10px}.deduction-info-box .info-title{color:#1e40af;font-size:12px;font-weight:600;margin-bottom:4px}.deduction-info-box .info-text{color:#1e3a8a;font-size:11px;line-height:1.4}@media (max-width:768px){.deduction-type-selector{flex-direction:column}.absent-config{padding:12px}.roster-table td:nth-child(4){font-size:12px}}@keyframes highlightAbsent{0%{background:#fef3c7}to{background:#0000}}.form-group.absent-marked{animation:highlightAbsent .5s ease-in-out}.roster-table tbody tr:hover td:nth-child(4){background:#fef3c74d}.absent-status-badge{border-radius:12px;display:inline-block;font-size:12px;font-weight:600;letter-spacing:.5px;padding:4px 10px;text-transform:uppercase}.absent-status-badge.absent-full{background:#fecaca;color:#991b1b}.absent-status-badge.absent-partial{background:#fed7aa;color:#9a3412}.absent-status-badge.present{background:#d1fae5;color:#065f46}.absent-tooltip{cursor:help;position:relative}.absent-tooltip:hover:after{background:#1f2937;border-radius:4px;color:#fff;content:attr(data-tooltip);font-size:11px;margin-bottom:5px;padding:6px 10px;white-space:nowrap}.absent-tooltip:hover:after,.absent-tooltip:hover:before{bottom:100%;left:50%;position:absolute;transform:translateX(-50%);z-index:1000}.absent-tooltip:hover:before{border:5px solid #0000;border-top-color:#1f2937;content:""}.form-group input[type=number]::-webkit-inner-spin-button,.form-group input[type=number]::-webkit-outer-spin-button{height:30px;opacity:1}.form-group input:disabled,.form-group select:disabled,.form-group textarea:disabled{background:#f3f4f6;cursor:not-allowed;opacity:.6}.form-group label.required:after{color:#ef4444;content:" *";font-weight:700}.calendar-day.late{background-color:#fff3cd;border:1px solid #f39c12}.status-dot.late{background-color:#f39c12}.late-indicator{color:#d97706;font-size:10px;font-weight:700;margin-left:4px}.form-group input[type=checkbox]+label{align-items:center;cursor:pointer;display:flex;-webkit-user-select:none;user-select:none}.sick-leave-section{background:#fef2f2;border:1px solid #fecaca;border-radius:8px;margin-top:8px;padding:16px}.sick-leave-section .form-group{margin-bottom:12px}.sick-leave-section .form-group:last-child{margin-bottom:0}.sick-pay-input-wrapper{align-items:center;display:flex;gap:8px}.sick-pay-input-wrapper input{flex:1 1}.sick-pay-input-wrapper .percentage-symbol{color:#dc2626;font-size:1.1rem;font-weight:700}.sick-reason-textarea{border:1px solid #d1d5db;border-radius:6px;font-family:inherit;font-size:14px;min-height:60px;padding:8px 12px;resize:vertical;transition:border-color .2s,box-shadow .2s;width:100%}.sick-reason-textarea:focus{border-color:#f59e0b;box-shadow:0 0 0 3px #f59e0b1a;outline:none}.sick-reason-textarea::placeholder{color:#9ca3af}.sick-helper-text{align-items:center;color:#dc2626;display:flex;font-size:12px;gap:4px;margin-top:4px}.sick-helper-text:before{content:"💊"}.sick-badge{align-items:center;background:#fef2f2;border:1px solid #fecaca;border-radius:12px;color:#dc2626;display:inline-flex;font-size:12px;font-weight:500;gap:4px;padding:4px 12px}.checkbox-label.sick-checkbox{background:#fef2f2;border:2px solid #fecaca;border-radius:8px;padding:12px;transition:all .2s}.checkbox-label.sick-checkbox:hover{background:#fee2e2;border-color:#fca5a5}.checkbox-label.sick-checkbox input:checked~span{color:#dc2626;font-weight:600}.sick-info-box{background:#fffbeb;border-left:4px solid #f59e0b;border-radius:4px;margin-top:12px;padding:12px}.sick-info-box p{align-items:flex-start;color:#92400e;display:flex;font-size:13px;gap:8px;margin:0}.sick-info-box p:before{content:"ℹ️";flex-shrink:0}.leave-type-selector{display:flex;gap:12px;margin-bottom:16px}.leave-type-option{align-items:center;background:#fff;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;display:flex;flex:1 1;justify-content:center;padding:12px;transition:all .2s}.leave-type-option:hover{background:#f9fafb;border-color:#d1d5db}.leave-type-option.selected{background:#fef2f2;border-color:#dc2626;font-weight:600}.leave-type-option.sick.selected{background:#fffbeb;border-color:#f59e0b}.leave-type-option input[type=radio]{margin-right:8px}@media (max-width:768px){.sick-leave-section{padding:12px}.leave-type-selector{flex-direction:column}.sick-pay-input-wrapper{align-items:flex-start;flex-direction:column}}.sick-leave-section{animation:slideDown .3s ease-out}.sick-checkbox-label{color:#374151;font-size:15px}.sick-checkbox-label .emoji{font-size:18px;margin-right:4px}.sick-pay-preview{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:6px;margin-top:12px;padding:12px}.sick-pay-preview .preview-label{color:#166534;font-size:12px;font-weight:500;margin-bottom:4px}.sick-pay-preview .preview-amount{color:#15803d;font-size:18px;font-weight:700}.sick-pay-preview .preview-detail{color:#16a34a;font-size:11px;margin-top:4px}.reports-page{background:#f5f6fa;margin:0 auto;max-width:1800px;min-height:100vh;padding:24px}.report-tabs{background:#fff;border-radius:12px;box-shadow:0 2px 8px #00000014;display:flex;gap:12px;margin-bottom:24px;overflow-x:auto;padding:16px}.tab-btn{background:#fff;border:2px solid #e0e0e0;transition:all .3s;white-space:nowrap}.tab-btn:hover{border-color:#3498db;color:#3498db;transform:translateY(-2px)}.tab-btn.active{border-color:#1e3c72}.report-filters{align-items:flex-end;background:#fff;border-radius:12px;box-shadow:0 2px 8px #00000014;display:flex;flex-wrap:wrap;gap:16px;margin-bottom:24px;padding:20px}.filter-group label{color:#495057}.filter-select{background:#fff;border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;font-size:15px;min-width:150px;padding:10px 16px;transition:all .3s}.filter-select:focus{border-color:#3498db;box-shadow:0 0 0 3px #3498db1a;outline:none}.btn-refresh{background:linear-gradient(135deg,#27ae60,#229954);border:none;border-radius:8px;box-shadow:0 2px 4px #27ae6033;color:#fff;cursor:pointer;font-size:15px;font-weight:600;padding:12px 24px;transition:all .3s}.btn-refresh:hover{box-shadow:0 4px 12px #27ae6059;transform:translateY(-2px)}.summary-cards{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-bottom:32px}.summary-card{padding:28px;transition:transform .3s,box-shadow .3s}.summary-card:before{background:linear-gradient(90deg,var(--card-color) 0,var(--card-color-light) 100%);height:4px;left:0}.summary-card:hover{box-shadow:0 8px 24px #0000001f}.summary-card.blue{--card-color:#2196f3;--card-color-light:#64b5f6}.summary-card.green{--card-color:#4caf50;--card-color-light:#81c784}.summary-card.orange{--card-color:#ff9800;--card-color-light:#ffb74d}.summary-card.red{--card-color:#f44336;--card-color-light:#e57373}.summary-card.purple{--card-color:#9c27b0;--card-color-light:#ba68c8}.summary-card h3{font-size:13px;letter-spacing:.8px}.big-number{color:#2c3e50;font-size:36px;font-weight:700;line-height:1;margin:0 0 8px}.summary-card span{color:#000;font-size:13px}.report-container{background:#fff;border-radius:12px;box-shadow:0 2px 8px #00000014;margin-bottom:24px;padding:28px}.report-container h2{border-bottom:2px solid #e9ecef;color:#1e3c72;font-size:1.5em;font-weight:700;margin:0 0 24px;padding-bottom:12px}.report-container h3{color:#495057;font-size:1.2em;font-weight:600;margin:24px 0 16px}.table-container{border:1px solid #e9ecef}.report-table{border-collapse:collapse;font-size:14px;width:100%}.report-table thead{background:linear-gradient(135deg,#f8f9fa,#e9ecef)}.report-table th{border-bottom:2px solid #dee2e6;color:#495057;font-size:13px;font-weight:600;letter-spacing:.5px;padding:16px;text-align:left;text-transform:uppercase;white-space:nowrap}.report-table td{border-bottom:1px solid #f0f0f0;color:#212529;padding:16px}.report-table tbody tr{transition:background .2s}.report-table tbody tr:hover{background:#f8f9fa}.report-table tbody tr:last-child td{border-bottom:none}.notes-cell{max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-danger{color:#dc3545!important}.text-success{color:#28a745!important}.status-badge{text-transform:capitalize}.status-badge.status-active,.status-badge.status-approved,.status-badge.status-present{background:#d4edda;color:#155724}.status-badge.status-late{background:#fff3cd;color:#856404}.status-badge.status-absent,.status-badge.status-rejected{background:#f8d7da;color:#721c24}.status-badge.status-sick{background:#d1ecf1;color:#0c5460}.status-badge.status-pending{background:#ffeaa7;color:#856404}.type-badge{border-radius:8px;letter-spacing:.5px}.type-badge.type-tiered{background:#e3f2fd;color:#1565c0}.type-badge.type-percentage{background:#f3e5f5;color:#6a1b9a}.type-badge.type-fixed{background:#e8f5e9;color:#2e7d32}.payroll-summary-breakdown{background:#f8f9fa;border:1px solid #e9ecef;border-radius:8px;margin:24px 0;padding:24px}.summary-row{border-bottom:1px solid #e9ecef;display:flex;font-size:15px;justify-content:space-between;padding:12px 0}.summary-row:last-child{border-bottom:none}.summary-row span{color:#495057}.summary-row strong{color:#212529;font-weight:600}.summary-row.deduction span{color:#6c757d;padding-left:20px}.summary-row.deduction strong{color:#dc3545}.summary-row.total{border-top:2px solid #dee2e6;font-size:1.1em;font-weight:700;margin-top:12px;padding-top:16px}.summary-row.total span,.summary-row.total strong{color:#1e3c72}.summary-row .highlight{color:#27ae60!important;font-size:1.2em}.loading{background:#fff;border-radius:12px;box-shadow:0 2px 8px #00000014}.report-table tbody tr td[colspan]{color:#999;font-style:italic}@media (max-width:1200px){.summary-cards{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}}@media (max-width:768px){.reports-page{padding:16px}.report-tabs{gap:8px;padding:12px}.tab-btn{font-size:14px;padding:10px 16px}.report-filters{align-items:stretch;flex-direction:column}.btn-refresh,.filter-group{width:100%}.summary-cards{grid-template-columns:1fr}.report-container{padding:20px}.report-table{font-size:13px}.report-table td,.report-table th{padding:12px 8px}.big-number{font-size:28px}.page-header h1{font-size:1.5em}.payroll-summary-breakdown{padding:16px}.summary-row{font-size:14px}}@media (max-width:480px){.report-table{font-size:12px}.report-table td,.report-table th{padding:10px 6px}.notes-cell{max-width:150px}}@media print{.reports-page{background:#fff;padding:0}.btn-refresh,.report-filters,.report-tabs{display:none!important}.report-container,.summary-card{border:1px solid #ddd;box-shadow:none;page-break-inside:avoid}.report-table{page-break-inside:auto}.report-table tr{page-break-after:auto;page-break-inside:avoid}.report-table thead{display:table-header-group}.report-table tbody tr:hover,.summary-card:hover{background:inherit;transform:none}}.report-container{animation:fadeIn .4s ease-out}.summary-card{animation:fadeIn .3s ease-out}.summary-card:nth-child(2){animation-delay:.1s}.summary-card:nth-child(3){animation-delay:.2s}.summary-card:nth-child(4){animation-delay:.3s}.btn-refresh:focus-visible,.filter-select:focus-visible,.tab-btn:focus-visible{outline:2px solid #3498db;outline-offset:2px}@media (prefers-contrast:high){.status-badge,.tab-btn,.type-badge{border:2px solid}}.profile-page{margin:0 auto;max-width:1200px;padding:24px}.profile-header{margin-bottom:32px}.profile-header h1{color:#1e3c72;font-size:32px;margin:0 0 8px}.profile-content{display:flex;gap:24px}.profile-card{border-radius:16px;box-shadow:0 4px 12px #00000014;flex:1 1;padding:32px}.profile-picture-section{border-bottom:2px solid #f0f0f0;margin-bottom:32px;padding-bottom:32px;text-align:center}.profile-picture-large{align-items:center;border:5px solid #ffffff4d;border-radius:50%;box-shadow:0 8px 24px #00000026;color:#fff;display:flex;font-size:48px;font-weight:700;height:150px;justify-content:center;margin:0 auto 20px;overflow:hidden;width:150px}.profile-picture-large img{height:100%;object-fit:cover;width:100%}.upload-section{margin-top:20px}.upload-button{background:linear-gradient(135deg,#1e3c72,#2a5298);border-radius:8px;color:#fff;cursor:pointer;display:inline-block;font-size:14px;font-weight:600;padding:10px 20px;transition:transform .2s}.upload-button:hover{transform:translateY(-2px)}.upload-hint{color:#999;font-size:12px;margin-top:8px}.profile-info-section{flex:1 1}.form-grid{grid-template-columns:repeat(2,1fr);margin-bottom:24px}.form-group input{border:2px solid #e0e0e0;border-radius:8px;font-size:15px;padding:12px;transition:border-color .2s}.form-group input:focus{border-color:#2a5298;outline:none}.form-group input:disabled{background:#f5f5f5;color:#999;cursor:not-allowed}.disabled-input{background:#f5f5f5!important}.role-display{border-radius:8px;color:#fff;font-weight:600;padding:12px;text-align:center;text-transform:capitalize}.form-actions{border-top:2px solid #f0f0f0}.btn-primary{background:linear-gradient(135deg,#1e3c72,#2a5298);font-size:15px;padding:12px 32px}.btn-primary,.btn-submit{transition:transform .2s}@media (max-width:768px){.form-grid{grid-template-columns:1fr}}.security-page{padding:20px}.security-container{grid-gap:20px;display:grid;gap:20px;grid-template-columns:300px 1fr;margin:0 auto;max-width:1400px}.users-sidebar{background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000001a;height:-webkit-fit-content;height:fit-content;padding:20px}.users-sidebar h3{color:#1e3c72;margin:0 0 15px}.users-list{display:flex;flex-direction:column;gap:10px}.user-item{border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;padding:15px;transition:all .2s}.user-item:hover{background:#f5f7fa;border-color:#1e3c72}.user-item.active{background:#e3f2fd;border-color:#1e3c72}.user-info strong{display:block;margin-bottom:5px}.user-info p{color:#666;font-size:14px;margin:0 0 8px}.role-badge{border-radius:4px;padding:4px 8px}.role-badge.large{font-size:13px;padding:6px 12px}.permissions-panel{background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000001a;padding:30px}.panel-header{align-items:center;border-bottom:2px solid #e0e0e0;display:flex;justify-content:space-between;margin-bottom:30px;padding-bottom:15px}.panel-header h2{color:#1e3c72;margin:0}.permissions-grid{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));margin-bottom:30px}.permission-module{border:1px solid #e0e0e0;border-radius:8px;padding:20px}.permission-module h3{color:#1e3c72;font-size:16px;margin:0 0 15px;text-transform:capitalize}.permission-list{display:flex;flex-direction:column;gap:12px}.permission-item{align-items:center;border-radius:4px;cursor:pointer;display:flex;gap:10px;padding:8px;transition:background .2s}.permission-item:hover{background:#f5f7fa}.permission-item input[type=checkbox]{cursor:pointer;height:18px;width:18px}.permission-item span{font-size:14px;text-transform:capitalize}.panel-actions{border-top:2px solid #e0e0e0;display:flex;justify-content:flex-end;padding-top:20px}.empty-state{padding:100px 20px}.activity-log-page{margin:0 auto;max-width:1200px;padding:24px}.filters-bar{gap:12px}.filter-btn{background:#fff;border:2px solid #e0e0e0;border-radius:8px;color:#666;cursor:pointer;font-size:14px;font-weight:600;padding:10px 20px;transition:all .2s}.filter-btn:hover{border-color:#2a5298;color:#2a5298}.filter-btn.active{background:linear-gradient(135deg,#1e3c72,#2a5298);border-color:#0000;color:#fff}.activity-timeline{background:#fff;border-radius:16px;box-shadow:0 4px 12px #00000014;padding:32px}.activity-item{border-left:3px solid #e0e0e0;display:flex;gap:20px;margin-bottom:16px;padding:20px;transition:all .2s}.activity-item:hover{background:#f8f9fa;border-left-color:#2a5298}.activity-icon{align-items:center;border-radius:12px;color:#fff;display:flex;font-size:24px;height:50px;justify-content:center;min-width:50px;width:50px}.activity-content{flex:1 1}.activity-content h3{color:#333;font-size:16px;margin:0 0 8px}.activity-details{color:#666;font-size:14px;line-height:1.5;margin:0 0 12px}.activity-meta{color:#999;display:flex;font-size:12px;gap:8px}.activity-meta span{align-items:center;display:inline-flex;gap:4px}.settings-page{background:#f5f6fa;min-height:100vh;padding:20px}.page-header h1{font-size:2em}.page-header .subtitle{color:#6c757d;font-size:1em;margin:0}.settings-container{margin:0 auto;max-width:1200px}.settings-section{background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000001a;margin-bottom:20px;padding:30px}.settings-section h2{border-bottom:2px solid #e0e0e0;color:#1e3c72;font-size:1.5em;margin:0 0 20px;padding-bottom:10px}.form-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.form-group{margin-bottom:15px}.form-group input[type=email],.form-group input[type=number],.form-group input[type=tel],.form-group input[type=text],.form-group select,.form-group textarea{border:1px solid #dfe6e9;border-radius:6px;font-size:1em;padding:10px 12px;transition:border-color .3s,box-shadow .3s;width:100%}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.form-group small{color:#7f8c8d;font-size:.85em}.form-group.full-width{grid-column:1/-1}.form-group.checkbox{margin-bottom:10px}.form-group.checkbox label{align-items:center;cursor:pointer;display:flex;font-weight:400;gap:10px}.form-group.checkbox input[type=checkbox]{cursor:pointer;height:18px;margin:0;width:18px}.loonbelasting-section{background:linear-gradient(135deg,#f8f9fa,#fff)}.section-description{color:#6c757d;font-size:.95em;font-style:italic;margin:-10px 0 20px}.loonbelasting-config{margin-top:20px}.config-group{background:#fff;border:1px solid #e9ecef;border-radius:8px;box-shadow:0 1px 3px #0000000d;margin-bottom:20px;padding:24px}.config-group h3{align-items:center;border-bottom:2px solid #e9ecef;color:#495057;display:flex;font-size:1.15em;gap:8px;margin:0 0 18px;padding-bottom:12px}.config-group .form-group label{color:#212529;display:block;font-weight:600;margin-bottom:8px}.config-group .form-group input,.config-group .form-group textarea{border:2px solid #ced4da;border-radius:6px;font-size:1em;padding:12px 14px;transition:all .3s;width:100%}.config-group .form-group input:focus,.config-group .form-group textarea:focus{border-color:#3498db;box-shadow:0 0 0 3px #3498db1a;outline:none}.config-group .form-group small{color:#6c757d;display:block;font-size:.85em;margin-top:6px}.formula-box{background:#e7f3ff;border-left:4px solid #3498db;border-radius:4px;color:#2c3e50;font-family:Courier New,Consolas,monospace;font-size:.9em;margin-top:15px;padding:14px 18px}.formula-box strong{color:#1e3c72;font-weight:700;margin-right:8px}.loonbelasting-actions{border-top:1px solid #e9ecef;display:flex;gap:12px;justify-content:flex-end;margin-top:24px;padding-top:20px}.btn-primary{background:linear-gradient(135deg,#3498db,#2980b9);border-radius:6px;box-shadow:0 2px 4px #3498db33;font-size:1em;padding:12px 28px;transition:all .3s}.btn-primary:hover:not(:disabled){background:linear-gradient(135deg,#2980b9,#21618c);box-shadow:0 4px 12px #3498db59}.btn-primary:active:not(:disabled){transform:translateY(0)}.btn-primary:disabled{background:#95a5a6;opacity:.7}.btn-test{background:linear-gradient(135deg,#27ae60,#229954);border:none;border-radius:6px;box-shadow:0 2px 4px #27ae6033;color:#fff;cursor:pointer;font-size:1em;font-weight:600;height:48px;padding:12px 24px;transition:all .3s;white-space:nowrap}.btn-test:hover:not(:disabled){background:linear-gradient(135deg,#229954,#1e8449);box-shadow:0 4px 12px #27ae6059;transform:translateY(-2px)}.btn-test:active:not(:disabled){transform:translateY(0)}.btn-test:disabled{background:#95a5a6;cursor:not-allowed;opacity:.6;transform:none}.btn-submit{background:linear-gradient(135deg,#1e3c72,#152d5a);box-shadow:0 2px 8px #1e3c7233;font-size:1.05em;padding:14px 40px;transition:all .3s}.btn-submit:hover:not(:disabled){background:linear-gradient(135deg,#152d5a,#0d1b3a);box-shadow:0 4px 16px #1e3c7259}.btn-submit:active:not(:disabled){transform:translateY(0)}.btn-submit:disabled{background:#95a5a6;opacity:.7;transform:none}.info-box{background:#fff3cd;border-left:4px solid #ffc107;box-shadow:0 1px 3px #0000000d;margin:20px 0;padding:20px}.info-box h4{color:#856404;font-size:1.1em;font-weight:600;margin:0 0 12px}.info-box p{color:#856404;line-height:1.5;margin:0 0 15px}.info-box ul{color:#856404;margin:10px 0 0 20px}.info-box li{margin-bottom:6px}.brackets-table{border-radius:6px;margin-top:15px;overflow:hidden}.brackets-table table{background:#fff;border-collapse:collapse;width:100%}.brackets-table td,.brackets-table th{border-bottom:1px solid #dee2e6;padding:12px 16px;text-align:left}.brackets-table th{background:#f8f9fa;color:#495057;font-size:.95em;font-weight:600;letter-spacing:.5px;text-transform:uppercase}.brackets-table tbody tr:hover{background:#f8f9fa;transition:background .2s}.brackets-table tr:last-child td{border-bottom:none}.rate-badge{background:linear-gradient(135deg,#3498db,#2980b9);border-radius:12px;box-shadow:0 2px 4px #3498db33;color:#fff;display:inline-block;font-size:.9em;font-weight:600;padding:4px 12px}.test-calculator{background:#fff;border:2px solid #e9ecef;border-radius:8px;box-shadow:0 2px 8px #0000000d;margin-top:20px;padding:28px}.test-calculator h3{color:#495057;font-size:1.25em;font-weight:600;margin:0 0 8px}.test-calculator>p{color:#6c757d;font-size:.95em;margin:0 0 24px}.test-input-group{grid-gap:15px;align-items:end;display:grid;gap:15px;grid-template-columns:1fr auto;margin-bottom:28px}.test-input-group .form-group{margin-bottom:0}.test-result{background:linear-gradient(135deg,#f8f9fa,#fff);border:2px solid #dee2e6;border-radius:8px;box-shadow:0 2px 4px #0000000d;padding:24px}.test-result h4{border-bottom:2px solid #dee2e6;color:#212529;font-size:1.15em;font-weight:600;margin:0 0 20px;padding-bottom:12px}.result-table{display:flex;flex-direction:column;gap:8px}.result-row{background:#fff;border-radius:6px;display:flex;justify-content:space-between;padding:12px 16px;transition:all .2s}.result-row:hover{box-shadow:0 2px 4px #0000000d}.result-row .label{color:#495057;font-size:.95em;font-weight:500}.result-row .value{color:#212529;font-family:Courier New,monospace;font-weight:600;text-align:right}.result-row.deduction{background:#f8f9fa}.result-row.deduction .label{color:#6c757d;padding-left:20px}.result-row.deduction .value{color:#6c757d;font-weight:500}.result-row.subtotal{background:#e7f3ff;border-left:4px solid #3498db;box-shadow:0 1px 3px #3498db1a;font-weight:600}.result-row.subtotal .label,.result-row.subtotal .value{color:#1e3c72;font-weight:700}.result-row.tax .label,.result-row.tax .value{color:#e74c3c}.result-row.total-deductions{background:#ffebee;border-left:4px solid #e74c3c;box-shadow:0 1px 3px #e74c3c1a;font-weight:700}.result-row.total-deductions .label,.result-row.total-deductions .value{color:#c0392b}.result-row.net-pay{background:linear-gradient(135deg,#e8f5e9,#c8e6c9);border-left:4px solid #27ae60;box-shadow:0 2px 6px #27ae6026;font-size:1.2em;font-weight:700;padding:16px 18px}.result-row.net-pay .label,.result-row.net-pay .value{color:#1e7e34}.result-row.info{background:#f8f9fa;font-style:italic}.result-row.info .label,.result-row.info .value{color:#6c757d;font-size:.9em}.result-row .value.bold{font-weight:700}.result-row .value.highlight{color:#e74c3c;font-weight:700}.result-row .value.success{color:#27ae60;font-weight:700}.result-divider{background:linear-gradient(90deg,#0000,#dee2e6 20%,#dee2e6 80%,#0000);height:2px;margin:12px 0}.form-actions{border-top:2px solid #e9ecef;justify-content:center;padding:24px 0 8px}@media (max-width:1024px){.form-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}}@media (max-width:768px){.settings-page{padding:15px}.settings-section{padding:20px}.settings-section h2{font-size:1.3em}.form-grid{gap:15px}.form-grid,.test-input-group{grid-template-columns:1fr}.btn-test{height:auto;width:100%}.result-row{flex-direction:column;gap:8px;padding:14px}.result-row .value{font-size:1.1em;padding-left:12px;text-align:left}.result-row.deduction .label{padding-left:12px}.loonbelasting-actions{flex-direction:column}.btn-primary,.btn-submit{width:100%}.config-group{padding:18px}.test-calculator{padding:20px}}@media (max-width:480px){.settings-page{padding:10px}.page-header h1{font-size:1.5em}.config-group,.settings-section{padding:15px}.brackets-table td,.brackets-table th{font-size:.9em;padding:8px 10px}}@media print{.settings-page{background:#fff}.btn-primary,.btn-submit,.btn-test{display:none}.settings-section{border:1px solid #ddd;box-shadow:none}.settings-section,.test-calculator{page-break-inside:avoid}}.test-result{animation:fadeIn .3s ease-out}.settings-section{animation:fadeIn .4s ease-out}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #3498db;outline-offset:2px}@media (prefers-contrast:high){.btn-primary,.btn-submit,.btn-test,.formula-box,.info-box{border:2px solid}}@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.admin-panel{margin:0 auto;max-width:1800px;padding:24px}.access-denied{background:#fff;border-radius:16px;box-shadow:0 4px 12px #00000014;padding:80px 40px;text-align:center}.access-denied h1{color:#e74c3c;font-size:48px;margin:0 0 16px}.access-denied p{color:#666;font-size:18px;margin:0}.admin-tabs{border-bottom:2px solid #e0e0e0;display:flex;flex-wrap:wrap;gap:12px;margin-bottom:24px}.admin-content{background:#fff;border-radius:16px;box-shadow:0 4px 12px #00000014;min-height:400px;padding:32px}.changes-banner{align-items:center;background:linear-gradient(135deg,#ff9800,#f57c00);border-radius:12px;box-shadow:0 4px 12px #ff98004d;color:#fff;display:flex;justify-content:space-between;margin-bottom:24px;padding:16px 24px}.changes-banner span{font-size:15px;font-weight:600}.btn-save-banner{background:#fff;border:none;border-radius:8px;color:#f57c00;cursor:pointer;font-weight:600;padding:10px 24px;transition:all .2s}.btn-save-banner:hover{box-shadow:0 4px 12px #0003;transform:translateY(-2px)}.settings-section{border-bottom:2px solid #e0e0e0;margin-bottom:40px;padding-bottom:32px}.settings-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}.section-title{border-bottom:3px solid #2a5298;color:#1e3c72;font-size:20px;font-weight:700;letter-spacing:1px;margin:0 0 24px;padding-bottom:12px}.settings-grid{grid-gap:20px;display:grid;gap:20px;grid-template-columns:1fr}.setting-item{align-items:center;background:#f8f9fa;border-left:4px solid #2a5298;border-radius:12px;display:flex;justify-content:space-between;padding:20px;transition:all .2s}.setting-item:hover{background:#f0f2f5;box-shadow:0 4px 12px #00000014}.setting-info{flex:1 1;margin-right:20px}.setting-label{color:#1e3c72;display:block;font-size:14px;font-weight:600;margin-bottom:4px;text-transform:capitalize}.setting-description{color:#666;font-size:13px;margin:0}.setting-control{flex-shrink:0}.setting-input{border:2px solid #e0e0e0;border-radius:8px;font-size:14px;padding:10px 16px;transition:border-color .2s;width:250px}.setting-input:focus{border-color:#2a5298;outline:none}.setting-input:disabled{background:#f5f5f5;color:#999;cursor:not-allowed}.switch{display:inline-block;height:34px;position:relative;width:60px}.switch input{height:0;opacity:0;width:0}.slider{background-color:#ccc;border-radius:34px;bottom:0;cursor:pointer;left:0;right:0;top:0}.slider,.slider:before{position:absolute;transition:.4s}.slider:before{background-color:#fff;border-radius:50%;bottom:4px;content:"";height:26px;left:4px;width:26px}input:checked+.slider{background-color:#4caf50}input:checked+.slider:before{transform:translateX(26px)}input:disabled+.slider{cursor:not-allowed;opacity:.5}.settings-footer{border-top:2px solid #e0e0e0;display:flex;gap:16px;justify-content:flex-end;margin-top:32px;padding-top:32px}.btn-cancel,.btn-save{border:none;border-radius:8px;cursor:pointer;font-size:15px;font-weight:600;padding:14px 32px;transition:all .2s}.btn-save{background:linear-gradient(135deg,#1e3c72,#2a5298);color:#fff}.btn-save:hover:not(:disabled){box-shadow:0 8px 20px #1e3c724d;transform:translateY(-2px)}.btn-save:disabled{cursor:not-allowed;opacity:.5}.users-table-container{overflow-x:auto}.users-table{border-collapse:collapse;width:100%}.users-table thead{background:#f8f9fa}.users-table th{border-bottom:2px solid #e0e0e0;color:#666;font-size:13px;font-weight:600;letter-spacing:.5px;padding:16px;text-align:left;text-transform:uppercase}.users-table td{border-bottom:1px solid #f0f0f0;font-size:14px;padding:16px}.users-table tbody tr:hover{background:#f8f9fa}.role-select{border:2px solid #e0e0e0;border-radius:6px;cursor:pointer;font-size:13px;font-weight:600;padding:8px 12px;transition:all .2s}.role-select:focus{box-shadow:0 0 0 3px #2a52981a;outline:none}.status-badge{border-radius:20px;padding:6px 14px}.status-badge.active{color:#fff}.status-badge.inactive{background:#999;color:#fff}.btn-action{padding:8px 16px}.btn-action:hover{box-shadow:0 4px 12px #0003}.logs-filters{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:24px}.logs-filters input,.logs-filters select{border:2px solid #e0e0e0;border-radius:8px;flex:1 1;font-size:14px;min-width:180px;padding:12px 16px}.logs-filters input:focus,.logs-filters select:focus{border-color:#2a5298;outline:none}.btn-filter{background:linear-gradient(135deg,#2196f3,#1976d2);border:none;border-radius:8px;color:#fff;cursor:pointer;font-weight:600;padding:12px 24px;transition:all .2s}.btn-filter:hover{box-shadow:0 6px 16px #2196f34d;transform:translateY(-2px)}.logs-stats{background:#f8f9fa;border-radius:12px;display:flex;gap:20px;margin-bottom:24px;padding:20px}.stat-item{flex:1 1;text-align:center}.stat-label,.stat-value{display:block}.logs-table-container{overflow-x:auto}.logs-table{border-collapse:collapse;width:100%}.logs-table thead{background:#f8f9fa}.logs-table th{border-bottom:2px solid #e0e0e0;color:#666;font-size:13px;font-weight:600;padding:16px;text-align:left;text-transform:uppercase}.logs-table td{border-bottom:1px solid #f0f0f0;font-size:14px;padding:16px}.logs-table tbody tr:hover{background:#f8f9fa}.action-badge{background:#e3f2fd;border-radius:6px;color:#1976d2;display:inline-block;font-size:12px;font-weight:600;padding:6px 12px}.details-cell{max-width:400px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stats-section{margin-bottom:32px}.stat-card{background:linear-gradient(135deg,#1e3c72,#2a5298);box-shadow:0 4px 12px #00000026;color:#fff;transition:transform .2s}.stat-card:hover{box-shadow:0 8px 20px #0003}.stat-card.blue{background:linear-gradient(135deg,#2196f3,#1976d2)}.stat-card.green{background:linear-gradient(135deg,#4caf50,#45a049)}.stat-card.orange{background:linear-gradient(135deg,#ff9800,#f57c00)}.stat-card.purple{background:linear-gradient(135deg,#9c27b0,#7b1fa2)}.stat-card h3{color:#fff;font-size:14px;letter-spacing:.5px;margin:0 0 12px;opacity:.9;text-transform:uppercase}.stat-number{color:#fff;font-size:42px;font-weight:700;margin:0;text-shadow:0 2px 4px #0003}.loading{padding:60px 20px}@media (max-width:1200px){.stats-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}@media (max-width:768px){.admin-panel{padding:16px}.admin-tabs{flex-direction:column}.tab-btn{text-align:left;width:100%}.admin-content{padding:20px}.setting-item{align-items:flex-start;flex-direction:column;gap:12px}.setting-control,.setting-input{width:100%}.settings-footer{flex-direction:column-reverse}.btn-cancel,.btn-save{width:100%}.logs-filters{flex-direction:column}.logs-filters input,.logs-filters select{min-width:100%;width:100%}.btn-filter{width:100%}.logs-stats{flex-direction:column}.stats-grid{grid-template-columns:1fr}}.section-header{border-bottom:2px solid #e0e0e0;margin-bottom:24px;padding-bottom:16px}.section-header h2{color:#1e3c72;font-size:24px;margin:0}.btn-create-user{background:linear-gradient(135deg,#1e3c72,#2a5298);border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:14px;font-weight:600;padding:12px 24px;transition:all .2s}.btn-create-user:hover{box-shadow:0 6px 16px #1e3c724d;transform:translateY(-2px)}.role-selector{align-items:center;background:#f8f9fa;border:2px solid #e0e0e0;border-radius:12px;display:flex;gap:16px;margin-bottom:24px;padding:20px}.role-dropdown,.role-selector label{color:#1e3c72;font-size:15px;font-weight:600}.role-dropdown{background:#fff;border:2px solid #2a5298;border-radius:8px;cursor:pointer;min-width:200px;padding:10px 16px}.permissions-section{margin-bottom:32px}.permissions-table-container{background:#fff;border-radius:12px;box-shadow:0 4px 12px #00000014;overflow-x:auto}.permissions-table{border-collapse:collapse;width:100%}.permissions-table thead{background:linear-gradient(135deg,#1e3c72,#2a5298);color:#fff}.permissions-table th{font-size:14px;font-weight:600;letter-spacing:.5px;padding:16px;text-align:center;text-transform:uppercase}.permissions-table td{border-bottom:1px solid #e0e0e0;padding:16px;text-align:center}.permissions-table tbody tr:hover{background:#f8f9fa}.resource-name{color:#1e3c72;font-size:14px;font-weight:600;text-align:left!important}.permission-switch{display:inline-block;height:24px;position:relative;width:48px}.permission-switch input{height:0;opacity:0;width:0}.permission-switch .slider{background-color:#ccc;border-radius:24px;bottom:0;cursor:pointer;left:0;position:absolute;right:0;top:0;transition:.3s}.permission-switch .slider:before{background-color:#fff;border-radius:50%;bottom:3px;content:"";height:18px;left:3px;position:absolute;transition:.3s;width:18px}.permission-switch input:checked+.slider{background-color:#4caf50}.permission-switch input:disabled+.slider{background-color:#e0e0e0;cursor:not-allowed}.permission-switch input:checked+.slider:before{transform:translateX(24px)}.actions-cell{white-space:nowrap}.action-buttons{justify-content:center}.btn-action{background:#f5f5f5}.btn-action:hover{box-shadow:0 4px 8px #00000026;transform:translateY(-2px)}.btn-action.deactivate{background:#ff9800;color:#fff}.btn-action.deactivate:hover{background:#f57c00}.btn-action.password{background:#2196f3;color:#fff}.btn-action.password:hover{background:#1976d2}.modal-subtitle{color:#666;font-size:14px;margin:0 0 24px}.modal-subtitle strong{color:#1e3c72}.modal-warning{color:#333;font-size:16px;margin:0 0 16px}.modal-content.modal-danger{border-top:4px solid #f44336}.warning-box{background:#fff3cd;border-left:4px solid #ff9800;border-radius:8px;margin-top:20px;padding:16px}.warning-box p{color:#856404;font-size:14px;font-weight:500;margin:0 0 8px}.warning-box p:last-child{margin-bottom:0}.btn-danger{background:linear-gradient(135deg,#f44336,#d32f2f);border:none;border-radius:8px;box-shadow:0 2px 8px #f443364d;color:#fff;cursor:pointer;flex:1 1;font-size:15px;font-weight:600;padding:14px 24px;transition:all .2s}.btn-danger:hover{box-shadow:0 4px 16px #f4433666;transform:translateY(-2px)}@media (max-width:768px){.action-buttons{flex-wrap:wrap;gap:6px}.btn-action{font-size:14px;padding:6px 10px}}.stats-loading{background:#fff;border-radius:12px;box-shadow:0 2px 8px #00000014;padding:80px 20px;text-align:center}.stats-loading p{color:#666;font-size:18px;margin:0}.payroll-calculator-modal{align-items:center;animation:fadeIn .2s ease-out;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#000000b3;bottom:0;display:flex;justify-content:center;left:0;padding:20px;position:fixed;right:0;top:0;z-index:10000}.calculator-content{animation:slideUp .3s ease-out;background:#fff;border-radius:16px;box-shadow:0 20px 60px #0000004d;display:flex;flex-direction:column;max-height:90vh;max-width:900px;width:100%}.calculator-content.large{max-width:1400px}.calculator-header{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border-bottom:2px solid #e8e8e8;border-radius:16px 16px 0 0;color:#fff;display:flex;justify-content:space-between;padding:25px 30px}.calculator-header h2{font-size:1.8em;font-weight:700;margin:0}.calculator-header .subtitle{font-size:.95em;margin:5px 0 0;opacity:.9}.close-btn{background:#fff3;color:#fff;font-size:1.8em;height:40px;line-height:1;width:40px}.close-btn:hover{background:#ffffff4d}.calculator-body{flex:1 1;overflow-y:auto;padding:30px}.calculator-body::-webkit-scrollbar{width:8px}.calculator-body::-webkit-scrollbar-track{background:#f1f1f1}.calculator-body::-webkit-scrollbar-thumb{background:#888;border-radius:4px}.calculator-body::-webkit-scrollbar-thumb:hover{background:#555}.step-indicator{border-bottom:2px solid #e8e8e8;display:flex;gap:30px;margin-bottom:30px;padding-bottom:20px}.step{color:#999;font-weight:600;gap:10px}.step,.step-number{align-items:center;display:flex}.step-number{background:#e8e8e8;border-radius:50%;font-size:.9em;height:32px;justify-content:center;width:32px}.step.active{color:#667eea}.step.active .step-number{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.step.completed{color:#27ae60}.step.completed .step-number{background:#27ae60;color:#fff}.form-section{background:#f8f9fa;border-radius:12px;margin-bottom:25px;padding:25px}.form-section h3{align-items:center;color:#2c3e50;display:flex;font-size:1.3em;gap:10px}.filters-section{display:flex;gap:15px}.filter-search{flex:2 1}.filter-department{flex:1 1}.filter-department select,.filter-search input{border:2px solid #e0e0e0;border-radius:8px;font-size:1em;padding:12px 15px;transition:all .2s;width:100%}.filter-department select:focus,.filter-search input:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a;outline:none}.filter-department select{cursor:pointer}.results-info{color:#7f8c8d;font-size:.95em;margin-bottom:15px}.btn-select-all{background:#3498db;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:.9em;font-weight:600;padding:8px 16px;transition:all .2s}.btn-select-all:hover{background:#2980b9;transform:translateY(-1px)}.employee-grid{grid-gap:15px;gap:15px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));margin-bottom:20px;max-height:600px;overflow-y:auto;padding:5px}.employee-grid::-webkit-scrollbar{width:8px}.employee-grid::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.employee-grid::-webkit-scrollbar-thumb{background:#888;border-radius:4px}.employee-grid::-webkit-scrollbar-thumb:hover{background:#555}.employee-card{align-items:flex-start;background:#fff;border-radius:10px;gap:12px;padding:15px;position:relative}.employee-card:hover{border-color:#667eea;box-shadow:0 4px 12px #667eea33;transform:translateY(-2px)}.employee-card.selected{background:linear-gradient(135deg,#667eea0d,#764ba20d);border-color:#667eea}.employee-card input[type=checkbox]{cursor:pointer;flex-shrink:0;height:20px;margin-top:2px;width:20px}.employee-card-content{flex:1 1}.employee-name{color:#2c3e50;font-size:1.05em;font-weight:700;margin-bottom:5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.employee-card:hover .employee-name{overflow:visible;white-space:normal}.employee-meta{align-items:center;color:#7f8c8d;display:flex;flex-wrap:wrap;font-size:.85em;gap:6px;margin-bottom:8px}.employee-meta .separator{color:#bdc3c7}.employee-salary{background:#ecf0f1;border-radius:6px;color:#34495e;display:inline-block;font-size:.9em;font-weight:600;padding:4px 10px}.check-icon{align-items:center;background:#27ae60;border-radius:50%;color:#fff;display:none;font-size:.8em;font-weight:700;height:24px;justify-content:center;position:absolute;right:10px;top:10px;width:24px}.employee-card.selected .check-icon,.pagination{display:flex}.pagination{align-items:center;border-top:2px solid #e8e8e8;gap:15px;justify-content:center;margin-top:20px;padding-top:15px}.btn-pagination{background:#fff;border:2px solid #e0e0e0;border-radius:6px;cursor:pointer;font-weight:600;padding:8px 16px;transition:all .2s}.btn-pagination:hover:not(:disabled){background:#f8f9fa;border-color:#667eea}.btn-pagination:disabled{background:#f5f5f5;cursor:not-allowed;opacity:.5}.page-info{color:#7f8c8d;font-size:.95em;font-weight:600}.selection-summary{background:#fff;border-radius:8px;font-size:1.1em;margin-top:15px;padding:15px;text-align:center}.selection-summary strong{color:#667eea;font-size:1.3em}.form-grid{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.form-group label{color:#34495e;font-size:.95em}.form-group input,.form-group select{border:2px solid #e0e0e0;border-radius:8px;font-size:1em;padding:12px;transition:all .2s}.form-group input:focus,.form-group select:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a;outline:none}.summary-banner{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:12px;box-shadow:0 4px 15px #667eea4d;color:#fff;display:flex;flex-wrap:wrap;gap:20px;margin-bottom:25px;padding:20px}.summary-item{flex:1 1;flex-direction:column;gap:5px;min-width:150px;text-align:center}.summary-item.highlight{background:#fff3;border-radius:8px;padding:10px}.summary-label{font-size:.85em;opacity:.9}.summary-value{font-size:1.5em;font-weight:700}.summary-value.success{color:#d4edda}.summary-value.danger{color:#f8d7da}.payroll-cards{display:flex;flex-direction:column;gap:20px;padding-right:10px}.payroll-cards::-webkit-scrollbar{width:8px}.payroll-cards::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.payroll-cards::-webkit-scrollbar-thumb{background:#667eea;border-radius:4px}.payroll-cards::-webkit-scrollbar-thumb:hover{background:#764ba2}.payroll-card{background:#fff;border:2px solid #e0e0e0;border-radius:12px;overflow:hidden;transition:all .3s}.payroll-card:hover{box-shadow:0 4px 12px #0000001a}.payroll-card-header{align-items:center;background:linear-gradient(90deg,#f8f9fa 0,#fff);border-bottom:2px solid #e0e0e0;cursor:pointer;display:flex;gap:20px;justify-content:space-between;padding:20px;transition:background .2s}.payroll-card-header:hover{background:linear-gradient(90deg,#f0f0f0 0,#f8f9fa)}.employee-info h3{align-items:center;color:#2c3e50;display:flex;flex-wrap:wrap;font-size:1.3em;gap:8px}.employee-number{align-items:center;background:#667eea;border-radius:50%;color:#fff;display:inline-flex;flex-shrink:0;font-size:.8em;height:28px;justify-content:center;width:28px}.attendance-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.attendance-alert{background:#d1ecf1;border-radius:6px;color:#0c5460;font-size:.9em;margin-top:8px;padding:8px 12px}.badge{font-size:.8em}.badge-danger{background:#ffebee;color:#c62828}.badge-warning{background:#fff3cd;color:#856404}.badge-info{background:#d1ecf1;color:#0c5460}.badge-success{background:#d4edda;color:#155724}.badge-secondary{background:#e0e0e0;color:#555}.summary-amounts{align-items:center;display:flex;gap:20px}.amount-item{align-items:flex-end;display:flex;flex-direction:column;gap:4px}.amount-item.net{background:linear-gradient(135deg,#27ae60,#2ecc71);border-radius:10px;color:#fff;padding:12px 18px}.amount-label{font-size:.85em;opacity:.8}.amount-item.net .amount-label{opacity:1}.amount-value{font-size:1.3em;font-weight:700}.expand-btn{align-items:center;background:#667eea;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;flex-shrink:0;font-size:.8em;height:32px;justify-content:center;transition:all .2s;width:32px}.expand-btn:hover{background:#764ba2;transform:scale(1.1)}.payroll-card-body{animation:expandDown .3s ease-out;padding:25px}@keyframes expandDown{0%{max-height:0;opacity:0}to{max-height:5000px;opacity:1}}.section{background:#f8f9fa;border-radius:10px;margin-bottom:20px;padding:20px}.section h4{align-items:center;color:#2c3e50;display:flex;font-size:1.15em;gap:8px;margin:0 0 15px}.attendance-section{background:linear-gradient(135deg,#e8f5e9,#c8e6c9)}.info-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.info-item{background:#fff;border-radius:8px;padding:12px}.info-label{color:#7f8c8d;font-size:.85em}.info-value{color:#2c3e50;font-size:1.3em;font-weight:700}.data-table{background:#fff;border-collapse:collapse;border-radius:8px;overflow:hidden;width:100%}.data-table thead tr{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.data-table th{font-size:.9em;font-weight:600;padding:12px;text-align:left}.data-table th.text-right{text-align:right}.data-table th.text-center{text-align:center}.data-table tbody tr{border-bottom:1px solid #e0e0e0;transition:background .2s}.data-table tbody tr:hover{background:#f8f9fa}.data-table tbody tr.highlight-row{background:#fff3cd}.data-table tbody tr.highlight-row:hover{background:#ffe69c}.data-table td{color:#2c3e50;padding:12px}.data-table td.text-right{text-align:right}.data-table td.text-center{text-align:center}.data-table td.text-muted{color:#7f8c8d}.data-table td.small{font-size:.85em}.data-table tfoot tr{background:#f8f9fa;font-weight:600}.data-table tfoot tr.total-row{background:linear-gradient(90deg,#667eea 0,#764ba2);color:#fff}.data-table tfoot td{padding:12px}.input-small{padding:6px 8px;text-align:center;width:70px}.input-amount,.input-small{border:2px solid #e0e0e0;border-radius:6px;font-size:.95em;font-weight:600;transition:all .2s}.input-amount{padding:6px 10px;text-align:right;width:120px}.input-amount:focus,.input-small:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a;outline:none}.select-full{border:2px solid #e0e0e0;border-radius:6px;cursor:pointer;font-size:.95em;padding:10px;width:100%}.select-full:focus{border-color:#667eea;outline:none}.btn-icon{align-items:center;border-radius:50%;display:flex;font-size:.9em;height:28px;justify-content:center;transition:all .2s;width:28px}.btn-icon.btn-danger{background:#e74c3c;color:#fff}.btn-icon.btn-danger:hover{background:#c0392b;transform:scale(1.1)}.btn-add{background:#27ae60;border-radius:6px;padding:10px;width:100%}.btn-add:hover{background:#229954;transform:translateY(-1px)}.net-pay-box{background:linear-gradient(135deg,#27ae60,#2ecc71);border-radius:12px;box-shadow:0 6px 20px #27ae604d;color:#fff;padding:30px;text-align:center}.net-pay-label{font-size:1.1em;font-weight:600;margin-bottom:10px;opacity:.9}.net-pay-amount{font-size:2.5em;font-weight:700;margin-bottom:10px}.net-pay-details{font-size:.95em;opacity:.9}.form-actions{border-top:2px solid #e8e8e8;gap:15px}.form-actions.sticky{background:#fff;border-radius:0 0 16px 16px;bottom:0;box-shadow:0 -4px 12px #0000001a;margin:0;padding:20px;position:-webkit-sticky;position:sticky;z-index:10}.btn-primary,.btn-secondary{align-items:center;border:none;border-radius:8px;cursor:pointer;display:flex;font-size:1em;font-weight:600;gap:8px;padding:12px 24px;transition:all .2s}.btn-primary:hover:not(:disabled){box-shadow:0 6px 20px #667eea66;transform:translateY(-2px)}.btn-primary:disabled{opacity:.6}.btn-secondary{background:#95a5a6;color:#fff}.btn-secondary:hover{background:#7f8c8d;transform:translateY(-2px)}@media (max-width:1200px){.calculator-content.large{max-width:95%}.summary-banner{flex-wrap:wrap}.summary-item{min-width:150px}}@media (max-width:768px){.payroll-calculator-modal{padding:10px}.calculator-content{max-height:95vh}.calculator-header{padding:20px}.calculator-header h2{font-size:1.4em}.calculator-body{padding:20px}.step-indicator{gap:10px}.filters-section,.step-indicator{flex-direction:column}.employee-grid{max-height:300px}.employee-grid,.form-grid{grid-template-columns:1fr}.summary-banner{flex-direction:column;gap:15px}.payroll-card-header{align-items:flex-start;flex-direction:column}.summary-amounts{justify-content:space-between;width:100%}.info-grid{grid-template-columns:repeat(2,1fr)}.data-table{font-size:.9em}.data-table td,.data-table th{padding:8px}.form-actions{flex-direction:column}.btn-primary,.btn-secondary{justify-content:center;width:100%}}@media (max-width:480px){.calculator-header h2{font-size:1.2em}.net-pay-amount{font-size:2em}.info-grid{grid-template-columns:1fr}}.earnings-detail-table{background:#fff;border-collapse:collapse;border-radius:8px;box-shadow:0 2px 8px #0000001a;margin-top:12px;overflow:hidden;width:100%}.earnings-detail-table thead{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.earnings-detail-table th{border-bottom:2px solid #5a67d8;font-size:13px;font-weight:600;letter-spacing:.5px;padding:14px 12px;text-align:left;text-transform:uppercase}.earnings-detail-table th.text-right{text-align:right}.earnings-detail-table tbody tr{border-bottom:1px solid #e2e8f0;transition:all .2s ease}.earnings-detail-table tbody tr:hover{background-color:#f7fafc;transform:scale(1.01)}.earnings-detail-table tbody tr:last-child{border-bottom:2px solid #cbd5e0}.earnings-detail-table td{font-size:14px;padding:14px 12px;vertical-align:top}.earning-name{color:#2d3748;font-weight:600;min-width:180px}.earning-name strong{display:block;font-size:15px;margin-bottom:6px}.badge{font-size:11px;letter-spacing:.3px;margin-left:8px;padding:3px 10px;vertical-align:middle}.premium-badge{background:linear-gradient(135deg,#f093fb,#f5576c);box-shadow:0 2px 4px #f093fb4d;color:#fff}.overtime-badge{background:linear-gradient(135deg,#4facfe,#00f2fe);box-shadow:0 2px 4px #4facfe4d;color:#fff}.earning-details{color:#4a5568;font-size:13px;line-height:1.6}.hours-info{background:#edf2f7;border-left:3px solid #4299e1;border-radius:6px;color:#718096;display:inline-block;font-family:Courier New,Consolas,Monaco,monospace;font-size:12px;font-weight:500;margin-top:6px;padding:6px 10px}.earning-amount{color:#2d3748;font-size:15px;font-weight:600;text-align:right;white-space:nowrap}.earnings-detail-table tfoot{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.earnings-detail-table tfoot td{border-top:3px solid #5a67d8;font-size:16px;font-weight:700;padding:16px 12px}.earnings-detail-table .total-row td{background:linear-gradient(135deg,#667eea,#764ba2)}.text-right{text-align:right}@media (max-width:768px){.earnings-detail-table{font-size:12px}.earnings-detail-table td,.earnings-detail-table th{padding:10px 8px}.earning-name{font-size:13px;min-width:120px}.earning-name strong{font-size:14px}.hours-info{font-size:11px;padding:4px 8px}.badge{font-size:10px;padding:2px 6px}}.earnings-detail-table tbody tr{animation:fadeIn .3s ease-in-out}@media (prefers-color-scheme:dark){.earnings-detail-table{background:#2d3748}.earnings-detail-table tbody tr{border-bottom-color:#4a5568}.earnings-detail-table tbody tr:hover{background-color:#374151}.earning-name{color:#e2e8f0}.earning-details{color:#cbd5e0}.earning-amount{color:#e2e8f0}.hours-info{background:#374151;border-left-color:#60a5fa;color:#cbd5e0}}.react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view--down-arrow,.react-datepicker__navigation-icon:before,.react-datepicker__year-read-view--down-arrow{border-color:#ccc;border-style:solid;border-width:3px 3px 0 0;content:"";display:block;height:9px;position:absolute;top:6px;width:9px}.react-datepicker__sr-only{border:0;-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.react-datepicker-wrapper{border:0;display:inline-block;padding:0}.react-datepicker{background-color:#fff;border:1px solid #aeaeae;border-radius:.3rem;color:#000;display:inline-block;font-family:Helvetica Neue,helvetica,arial,sans-serif;font-size:.8rem;line-height:normal;position:relative}.react-datepicker--time-only .react-datepicker__time-container{border-left:0}.react-datepicker--time-only .react-datepicker__time,.react-datepicker--time-only .react-datepicker__time-box{border-bottom-left-radius:.375em;border-bottom-right-radius:.375em}.react-datepicker-popper{line-height:0;z-index:1}.react-datepicker-popper .react-datepicker__triangle{stroke:#aeaeae}.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle{fill:#f0f0f0;color:#f0f0f0}.react-datepicker-popper--header-bottom[data-placement^=bottom] .react-datepicker__triangle,.react-datepicker-popper--header-middle[data-placement^=bottom] .react-datepicker__triangle,.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle{fill:#fff;color:#fff}.react-datepicker-popper--header-bottom[data-placement^=top] .react-datepicker__triangle{fill:#f0f0f0;color:#f0f0f0}.react-datepicker__header{background-color:#f0f0f0;border-bottom:1px solid #aeaeae;border-top-left-radius:.3rem;padding:8px 0;position:relative;text-align:center}.react-datepicker__header--time{padding-bottom:8px;padding-left:5px;padding-right:5px}.react-datepicker__header--time:not(.react-datepicker__header--time--only){border-top-left-radius:0}.react-datepicker__header:not(.react-datepicker__header--has-time-select,.react-datepicker__header--middle,.react-datepicker__header--bottom){border-top-right-radius:.3rem}.react-datepicker__header--middle{border-radius:0;border-top:1px solid #aeaeae;margin-top:4px}.react-datepicker__header--bottom{border-bottom:none;border-radius:0 0 .3rem .3rem;border-top:1px solid #aeaeae}.react-datepicker__header-wrapper{position:relative}.react-datepicker__header-wrapper .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button){right:2px}.react-datepicker__month-dropdown-container--scroll,.react-datepicker__month-dropdown-container--select,.react-datepicker__month-year-dropdown-container--scroll,.react-datepicker__month-year-dropdown-container--select,.react-datepicker__year-dropdown-container--scroll,.react-datepicker__year-dropdown-container--select{display:inline-block;margin:0 15px}.react-datepicker__month-select,.react-datepicker__month-year-select,.react-datepicker__year-select{background-color:initial;border:1px solid #aeaeae;border-radius:.3rem;color:inherit;cursor:pointer;font-family:inherit;font-size:inherit;margin-top:5px;padding:2px 5px}.react-datepicker__month-select:focus-visible,.react-datepicker__month-year-select:focus-visible,.react-datepicker__year-select:focus-visible{outline:1px auto}.react-datepicker-time__header,.react-datepicker-year-header,.react-datepicker__current-month{color:#000;font-size:.944rem;font-weight:700;margin-top:0}h2.react-datepicker__current-month{margin:0;padding:0}.react-datepicker-time__header{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.react-datepicker__navigation{align-items:center;background:none;border:none;cursor:pointer;display:flex;height:32px;justify-content:center;overflow:hidden;padding:0;position:absolute;text-align:center;text-indent:-999em;top:2px;width:32px;z-index:1}.react-datepicker__navigation--previous{left:2px}.react-datepicker__navigation--next{right:2px}.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button){right:85px}.react-datepicker__navigation--years{display:block;margin-left:auto;margin-right:auto;position:relative;top:0}.react-datepicker__navigation--years-previous{top:4px}.react-datepicker__navigation--years-upcoming{top:-4px}.react-datepicker__navigation:hover :before{border-color:#a6a6a6}.react-datepicker__navigation-icon{font-size:20px;position:relative;top:-1px;width:0}.react-datepicker__navigation-icon--next{left:-2px}.react-datepicker__navigation-icon--next:before{left:-7px;transform:rotate(45deg)}.react-datepicker__navigation-icon--previous{right:-2px}.react-datepicker__navigation-icon--previous:before{right:-7px;transform:rotate(225deg)}.react-datepicker__month-container{float:left}.react-datepicker__year{margin:.5em;text-align:center}.react-datepicker__year-wrapper{display:flex;flex-wrap:wrap;max-width:180px}.react-datepicker__year .react-datepicker__year-text{display:inline-block;margin:2px;width:5em}.react-datepicker__month{margin:.5em;text-align:center}.react-datepicker__month .react-datepicker__month-text,.react-datepicker__month .react-datepicker__quarter-text{display:inline-block;margin:2px;width:5em}.react-datepicker__input-time-container{clear:both;float:left;margin:5px 0 10px 15px;text-align:left;width:100%}.react-datepicker__input-time-container .react-datepicker-time__caption,.react-datepicker__input-time-container .react-datepicker-time__input-container{display:inline-block}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input{display:inline-block;margin-left:10px}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input{width:auto}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]{-moz-appearance:textfield}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter{display:inline-block;margin-left:5px}.react-datepicker__time-container{border-left:1px solid #aeaeae;float:right;width:85px}.react-datepicker__time-container--with-today-button{border:1px solid #aeaeae;border-radius:.375em;display:inline;position:absolute;right:-87px;top:0}.react-datepicker__time-container .react-datepicker__time{background:#fff;border-bottom-right-radius:.375em;position:relative}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box{border-bottom-right-radius:.375em;margin:0 auto;overflow-x:hidden;text-align:center;width:85px}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list{box-sizing:initial;height:calc(195px + 1.0625em);list-style:none;margin:0;overflow-y:scroll;padding-left:0;padding-right:0;width:100%}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item{height:30px;padding:5px 10px;white-space:nowrap}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover{background-color:#f0f0f0;cursor:pointer}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected{background-color:#216ba5;color:#fff;font-weight:700}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover{background-color:#216ba5}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled{color:#ccc}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover{background-color:initial;cursor:default}.react-datepicker__week-number{color:#ccc;display:inline-block;line-height:2.125em;margin:.208em;text-align:center;width:2.125em}.react-datepicker__week-number.react-datepicker__week-number--clickable{cursor:pointer}.react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected):hover{background-color:#f0f0f0;border-radius:.3rem}.react-datepicker__week-number--selected{background-color:#216ba5;border-radius:.3rem;color:#fff}.react-datepicker__week-number--selected:hover{background-color:#1d5d90}.react-datepicker__day-names{margin-bottom:-8px;text-align:center;white-space:nowrap}.react-datepicker__week{white-space:nowrap}.react-datepicker__day,.react-datepicker__day-name,.react-datepicker__time-name{color:#000;display:inline-block;line-height:2.125em;margin:.208em;text-align:center;width:2.125em}.react-datepicker__day--disabled,.react-datepicker__day-name--disabled,.react-datepicker__time-name--disabled{color:#ccc;cursor:default}.react-datepicker__day,.react-datepicker__month-text,.react-datepicker__quarter-text,.react-datepicker__year-text{cursor:pointer}.react-datepicker__day:not([aria-disabled=true]):hover,.react-datepicker__month-text:not([aria-disabled=true]):hover,.react-datepicker__quarter-text:not([aria-disabled=true]):hover,.react-datepicker__year-text:not([aria-disabled=true]):hover{background-color:#f0f0f0;border-radius:.3rem}.react-datepicker__day--today,.react-datepicker__month-text--today,.react-datepicker__quarter-text--today,.react-datepicker__year-text--today{font-weight:700}.react-datepicker__day--highlighted,.react-datepicker__month-text--highlighted,.react-datepicker__quarter-text--highlighted,.react-datepicker__year-text--highlighted{background-color:#3dcc4a;border-radius:.3rem;color:#fff}.react-datepicker__day--highlighted:not([aria-disabled=true]):hover,.react-datepicker__month-text--highlighted:not([aria-disabled=true]):hover,.react-datepicker__quarter-text--highlighted:not([aria-disabled=true]):hover,.react-datepicker__year-text--highlighted:not([aria-disabled=true]):hover{background-color:#32be3f}.react-datepicker__day--highlighted-custom-1,.react-datepicker__month-text--highlighted-custom-1,.react-datepicker__quarter-text--highlighted-custom-1,.react-datepicker__year-text--highlighted-custom-1{color:#f0f}.react-datepicker__day--highlighted-custom-2,.react-datepicker__month-text--highlighted-custom-2,.react-datepicker__quarter-text--highlighted-custom-2,.react-datepicker__year-text--highlighted-custom-2{color:green}.react-datepicker__day--holidays,.react-datepicker__month-text--holidays,.react-datepicker__quarter-text--holidays,.react-datepicker__year-text--holidays{background-color:#ff6803;border-radius:.3rem;color:#fff;position:relative}.react-datepicker__day--holidays .overlay,.react-datepicker__month-text--holidays .overlay,.react-datepicker__quarter-text--holidays .overlay,.react-datepicker__year-text--holidays .overlay{background-color:#333;border-radius:4px;bottom:100%;color:#fff;left:50%;opacity:0;padding:4px;position:absolute;transform:translateX(-50%);transition:visibility 0s,opacity .3s ease-in-out;visibility:hidden;white-space:nowrap}.react-datepicker__day--holidays:not([aria-disabled=true]):hover,.react-datepicker__month-text--holidays:not([aria-disabled=true]):hover,.react-datepicker__quarter-text--holidays:not([aria-disabled=true]):hover,.react-datepicker__year-text--holidays:not([aria-disabled=true]):hover{background-color:#cf5300}.react-datepicker__day--holidays:hover .overlay,.react-datepicker__month-text--holidays:hover .overlay,.react-datepicker__quarter-text--holidays:hover .overlay,.react-datepicker__year-text--holidays:hover .overlay{opacity:1;visibility:visible}.react-datepicker__day--in-range,.react-datepicker__day--in-selecting-range,.react-datepicker__day--selected,.react-datepicker__month-text--in-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__month-text--selected,.react-datepicker__quarter-text--in-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__quarter-text--selected,.react-datepicker__year-text--in-range,.react-datepicker__year-text--in-selecting-range,.react-datepicker__year-text--selected{background-color:#216ba5;border-radius:.3rem;color:#fff}.react-datepicker__day--in-range:not([aria-disabled=true]):hover,.react-datepicker__day--in-selecting-range:not([aria-disabled=true]):hover,.react-datepicker__day--selected:not([aria-disabled=true]):hover,.react-datepicker__month-text--in-range:not([aria-disabled=true]):hover,.react-datepicker__month-text--in-selecting-range:not([aria-disabled=true]):hover,.react-datepicker__month-text--selected:not([aria-disabled=true]):hover,.react-datepicker__quarter-text--in-range:not([aria-disabled=true]):hover,.react-datepicker__quarter-text--in-selecting-range:not([aria-disabled=true]):hover,.react-datepicker__quarter-text--selected:not([aria-disabled=true]):hover,.react-datepicker__year-text--in-range:not([aria-disabled=true]):hover,.react-datepicker__year-text--in-selecting-range:not([aria-disabled=true]):hover,.react-datepicker__year-text--selected:not([aria-disabled=true]):hover{background-color:#1d5d90}.react-datepicker__day--keyboard-selected,.react-datepicker__month-text--keyboard-selected,.react-datepicker__quarter-text--keyboard-selected,.react-datepicker__year-text--keyboard-selected{background-color:#bad9f1;border-radius:.3rem;color:#000}.react-datepicker__day--keyboard-selected:not([aria-disabled=true]):hover,.react-datepicker__month-text--keyboard-selected:not([aria-disabled=true]):hover,.react-datepicker__quarter-text--keyboard-selected:not([aria-disabled=true]):hover,.react-datepicker__year-text--keyboard-selected:not([aria-disabled=true]):hover{background-color:#1d5d90;color:#fff}.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range),.react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range),.react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range),.react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range){background-color:#216ba580}.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range){background-color:#f0f0f0;color:#000}.react-datepicker__day--disabled,.react-datepicker__month-text--disabled,.react-datepicker__quarter-text--disabled,.react-datepicker__year-text--disabled{color:#ccc;cursor:default}.react-datepicker__day--disabled .overlay,.react-datepicker__month-text--disabled .overlay,.react-datepicker__quarter-text--disabled .overlay,.react-datepicker__year-text--disabled .overlay{background-color:#333;border-radius:4px;bottom:70%;color:#fff;left:50%;opacity:0;padding:4px;position:absolute;transform:translateX(-50%);transition:visibility 0s,opacity .3s ease-in-out;visibility:hidden;white-space:nowrap}.react-datepicker__input-container{display:inline-block;position:relative;width:100%}.react-datepicker__input-container .react-datepicker__calendar-icon{box-sizing:initial;padding:.625em;position:absolute}.react-datepicker__view-calendar-icon input{padding:6px 10px 5px 25px}.react-datepicker__month-read-view,.react-datepicker__month-year-read-view,.react-datepicker__year-read-view{border:1px solid #0000;border-radius:.3rem;position:relative}.react-datepicker__month-read-view:hover,.react-datepicker__month-year-read-view:hover,.react-datepicker__year-read-view:hover{cursor:pointer}.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow{border-top-color:#b3b3b3}.react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view--down-arrow,.react-datepicker__year-read-view--down-arrow{right:-16px;top:0;transform:rotate(135deg)}.react-datepicker__month-dropdown,.react-datepicker__month-year-dropdown,.react-datepicker__year-dropdown{background-color:#f0f0f0;border:1px solid #aeaeae;border-radius:.3rem;left:25%;position:absolute;text-align:center;top:30px;width:50%;z-index:1}.react-datepicker__month-dropdown:hover,.react-datepicker__month-year-dropdown:hover,.react-datepicker__year-dropdown:hover{cursor:pointer}.react-datepicker__month-dropdown--scrollable,.react-datepicker__month-year-dropdown--scrollable,.react-datepicker__year-dropdown--scrollable{height:150px;overflow-y:scroll}.react-datepicker__month-option,.react-datepicker__month-year-option,.react-datepicker__year-option{display:block;line-height:20px;margin-left:auto;margin-right:auto;width:100%}.react-datepicker__month-option:first-of-type,.react-datepicker__month-year-option:first-of-type,.react-datepicker__year-option:first-of-type{border-top-left-radius:.3rem;border-top-right-radius:.3rem}.react-datepicker__month-option:last-of-type,.react-datepicker__month-year-option:last-of-type,.react-datepicker__year-option:last-of-type{border-bottom-left-radius:.3rem;border-bottom-right-radius:.3rem;-webkit-user-select:none;user-select:none}.react-datepicker__month-option:hover,.react-datepicker__month-year-option:hover,.react-datepicker__year-option:hover{background-color:#ccc}.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming,.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming{border-bottom-color:#b3b3b3}.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous,.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous{border-top-color:#b3b3b3}.react-datepicker__month-option--selected,.react-datepicker__month-year-option--selected,.react-datepicker__year-option--selected{left:15px;position:absolute}.react-datepicker__close-icon{background-color:initial;border:0;cursor:pointer;display:table-cell;height:100%;outline:0;padding:0 6px 0 0;position:absolute;right:0;top:0;vertical-align:middle}.react-datepicker__close-icon:after{background-color:#216ba5;border-radius:50%;color:#fff;content:"×";cursor:pointer;display:table-cell;font-size:12px;height:16px;line-height:1;padding:2px;text-align:center;vertical-align:middle;width:16px}.react-datepicker__close-icon--disabled{cursor:default}.react-datepicker__close-icon--disabled:after{background-color:#ccc;cursor:default}.react-datepicker__today-button{background:#f0f0f0;border-top:1px solid #aeaeae;clear:left;cursor:pointer;font-weight:700;padding:5px 0;text-align:center}.react-datepicker__portal{align-items:center;background-color:#000c;display:flex;height:100vh;justify-content:center;left:0;position:fixed;top:0;width:100vw;z-index:2147483647}.react-datepicker__children-container{height:auto;margin:.5em;padding-left:.25em;padding-right:.25em;width:17.25em}.react-datepicker__aria-live{border:0;-webkit-clip-path:circle(0);clip-path:circle(0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.react-datepicker__calendar-icon{height:1em;vertical-align:-.125em;width:1em}.react-datepicker-popper-offset{margin-top:-.7em}.payroll-page{margin:0 auto;max-width:1600px;padding:24px}.summary-grid{grid-gap:20px;gap:20px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-bottom:32px}.summary-card.blue{border-color:#2196f3}.summary-card.green{border-color:#4caf50}.summary-card.purple{border-color:#9c27b0}.summary-card.orange{border-color:#ff9800}.payroll-tabs{background:#fff;border-radius:12px;box-shadow:0 2px 8px #00000014;display:flex;gap:8px;margin-bottom:24px;padding:8px}.payroll-content{background:#fff;border-radius:16px;box-shadow:0 4px 12px #00000014;padding:32px}.calculate-card h2{color:#1e3c72;font-size:24px;margin:0 0 8px}.calculate-card>p{color:#666;line-height:1.6;margin:0 0 24px}.calculate-form{max-width:600px}.form-row{margin-bottom:20px}.form-group input,.form-group select,.form-group textarea{padding:12px}.form-group small{margin-top:4px}.btn-calculate{background:linear-gradient(135deg,#1e3c72,#2a5298);border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:16px;font-weight:600;padding:14px 32px;transition:transform .2s;width:100%}.btn-calculate:hover:not(:disabled){box-shadow:0 8px 20px #1e3c724d;transform:translateY(-2px)}.btn-calculate:disabled{cursor:not-allowed;opacity:.6}.payroll-table-container{background:#fff;border-radius:12px;box-shadow:0 4px 12px #00000014;height:auto;margin-top:20px;max-height:none;overflow-x:auto;overflow-y:auto;width:100%}.payroll-table thead{box-shadow:0 2px 4px #0000001a}.payroll-table thead,.payroll-table thead th{position:-webkit-sticky;position:sticky;top:0;z-index:10}.payroll-table thead th{background:#f8f9fa;box-shadow:0 2px 4px #0000000d}.payroll-table tbody tr:hover{background:#f0f8ff}@media (max-width:1024px){.payroll-table-container{padding:0}.payroll-table thead{display:none}.payroll-table tbody tr{background:#fff;border-radius:8px;box-shadow:0 2px 8px #00000014;display:block;margin-bottom:16px;padding:16px}.payroll-table tbody td{border:none;display:block;padding:8px 0;text-align:right}.payroll-table tbody td:before{color:#1e3c72;content:attr(data-label);float:left;font-weight:700}}.payroll-table{border-collapse:collapse;width:100%}.payroll-table thead{background:#f8f9fa}.payroll-table th{border-bottom:2px solid #e0e0e0;color:#666;font-size:14px;font-weight:600;letter-spacing:.5px;padding:16px;text-align:left;text-transform:uppercase}.payroll-table td{border-bottom:1px solid #f0f0f0;font-size:14px;padding:16px}.payroll-table tbody tr:hover{background:#f8f9fa}.type-badge{background:#e3f2fd;color:#1976d2;display:inline-block;font-size:12px;font-weight:600;padding:4px 12px}.type-badge.hourly{background:#fff3e0;color:#f57c00}.net-pay{color:#2ecc71;font-size:16px}.btn-action{background:none;font-size:18px}.btn-action.approve{color:#4caf50}.btn-action.approve:hover{background:#e8f5e9}.btn-action.reject{color:#e74c3c}.btn-action.reject:hover{background:#ffebee}.btn-action.delete{color:#f44336}.btn-action.delete:hover{background:#ffebee}.modal-content.small{max-width:450px}.payroll-details{background:#f8f9fa;border-radius:8px;margin-bottom:20px;padding:16px}.payroll-details h3{color:#333;font-size:16px;margin:0 0 12px}.payroll-details p{color:#666;font-size:14px;margin:8px 0}.approve-form,.reject-form{display:flex;flex-direction:column;gap:20px}.btn-submit{background:linear-gradient(135deg,#4caf50,#45a049);padding:12px 32px}.btn-submit:hover{box-shadow:0 8px 20px #4caf504d}.btn-reject{border:none;border-radius:8px;cursor:pointer;font-size:15px;font-weight:600;padding:12px 32px}.btn-reject:hover{box-shadow:0 8px 20px #e74c3c4d}@media (max-width:768px){.form-row{grid-template-columns:1fr}.payroll-table{font-size:12px}.payroll-table td,.payroll-table th{padding:10px}}.employee-selector{background:#fff;border-radius:16px;box-shadow:0 4px 12px #00000014;padding:32px}.employee-selector h2{color:#1e3c72;font-size:24px;margin:0 0 8px}.employee-selector p{color:#666;margin:0 0 32px}.employee-grid{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}.employee-card{background:#f8f9fa;border:2px solid #e0e0e0;border-radius:12px;cursor:pointer;display:flex;flex-direction:column;gap:16px;padding:20px;transition:all .2s}.employee-card:hover{border-color:#2a5298;box-shadow:0 6px 16px #1e3c7233;transform:translateY(-4px)}.employee-info h3{color:#1e3c72;font-size:18px;margin:0 0 8px}.employee-info .position{color:#2a5298;font-size:14px;font-weight:600;margin:0 0 4px}.employee-info .department{color:#999;font-size:13px;margin:0}.employee-details{align-items:center;border-top:1px solid #e0e0e0;display:flex;justify-content:space-between;padding-top:16px}.employee-details .salary{color:#4caf50;font-size:16px;font-weight:700}.btn-select{background:linear-gradient(135deg,#1e3c72,#2a5298);border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:13px;font-weight:600;padding:8px 16px;transition:all .2s}.btn-select:hover{box-shadow:0 4px 12px #1e3c724d;transform:scale(1.05)}.btn-create{background:linear-gradient(135deg,#4caf50,#45a049);padding:12px 24px}.btn-create:hover{box-shadow:0 6px 16px #4caf504d}.btn-open-calculator{background:linear-gradient(135deg,#1e3c72,#2a5298);border:none;border-radius:12px;box-shadow:0 6px 16px #1e3c724d;color:#fff;cursor:pointer;font-size:18px;font-weight:700;margin-top:24px;padding:20px 40px;transition:all .2s}.btn-open-calculator:hover:not(:disabled){box-shadow:0 12px 24px #1e3c7266;transform:translateY(-4px)}.btn-open-calculator:disabled{cursor:not-allowed;opacity:.5}.warning-text{background:#fff3e0;border-radius:6px;color:#ff9800;font-weight:600;margin-top:16px;padding:12px}.payroll-detail{max-height:70vh;overflow-y:auto}.detail-section{background:#f8f9fa;border-left:4px solid #2a5298;border-radius:12px;margin-bottom:24px;padding:20px}.detail-section h3{color:#1e3c72;font-size:18px;font-weight:700;margin:0 0 16px}.detail-grid{grid-gap:16px;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.detail-item{flex-direction:column;gap:4px}.detail-item .label{font-size:12px;font-weight:600;text-transform:uppercase}.detail-item .value{font-size:15px}.breakdown-table{background:#fff;border-radius:8px;padding:16px}.breakdown-row{border-bottom:1px solid #e0e0e0;display:flex;justify-content:space-between;padding:12px 0}.breakdown-row:last-child{border-bottom:none}.breakdown-row.total{border-top:2px solid #2a5298;margin-top:8px;padding-top:16px}.breakdown-row .amount{color:#4caf50;font-weight:600}.breakdown-row .amount.deduction{color:#e74c3c}.net-pay-display{align-items:center;background:linear-gradient(135deg,#4caf50,#45a049);border-radius:12px;color:#fff;display:flex;justify-content:space-between;padding:24px}.net-pay-display .label{font-size:20px;font-weight:700;letter-spacing:2px}.net-pay-display .amount{font-size:32px;font-weight:700}.detail-actions{border-top:2px solid #e0e0e0;display:flex;gap:16px;justify-content:flex-end;margin-top:24px;padding-top:24px}.btn-download-pdf{background:#e74c3c;border:none;border-radius:8px;color:#fff;cursor:pointer;font-weight:600;padding:14px 32px;transition:all .2s}.btn-download-pdf:hover{background:#c0392b;box-shadow:0 6px 16px #e74c3c4d;transform:translateY(-2px)}.btn-action.view{border:2px solid #2196f3;color:#2196f3}.btn-action.view:hover{background:#2196f3;color:#fff;transform:scale(1.1)}.earnings-section{border-left-color:#4caf50}.taxes-section{border-left-color:#ff9800}.deductions-section{border-left-color:#e74c3c}.net-pay-section{border-left-color:#4caf50}.btn-export,.header-actions{align-items:center}.btn-export{background:linear-gradient(135deg,#10b981,#059669);border:none;border-radius:8px;color:#fff;cursor:pointer;display:flex;font-weight:600;gap:8px;transition:all .2s}.btn-export:hover{background:linear-gradient(135deg,#059669,#047857);box-shadow:0 6px 16px #10b9814d;transform:translateY(-2px)}.btn-export:active{transform:translateY(0)}.btn-create{align-items:center;background:linear-gradient(135deg,#3b82f6,#2563eb);display:flex;gap:8px}.btn-create:hover{box-shadow:0 6px 16px #3b82f64d}.payroll-contract-badge{background:#f0f9ff;border:1px solid #bae6fd;border-radius:6px;color:#0369a1;display:inline-block;font-size:11px;margin-top:6px;padding:4px 8px}.contract-expiry{color:#64748b;display:block;font-size:10px;margin-top:2px}.modal-body{max-height:calc(90vh - 140px)}.modal-body.payroll-detail{max-height:calc(90vh - 80px)}.modal-body::-webkit-scrollbar{width:8px}.modal-body::-webkit-scrollbar-track{background:#f1f1f1}.modal-body::-webkit-scrollbar-thumb{background:#888;border-radius:4px}.payroll-table-container::-webkit-scrollbar{width:12px}.payroll-table-container::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}.payroll-table-container::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#1e3c72,#2a5298);border:2px solid #f1f1f1;border-radius:10px}.date-picker-wrapper,.react-datepicker-wrapper{width:100%}.react-datepicker__input-container input{border:2px solid #e0e0e0;border-radius:8px;box-sizing:border-box;font-size:15px;padding:12px;width:100%}.react-datepicker__input-container input:focus{border-color:#2a5298;outline:none}.react-datepicker{border:1px solid #e0e0e0;box-shadow:0 4px 12px #0000001a;font-family:inherit}.react-datepicker__header{background:#1e3c72;color:#fff}.react-datepicker__day--selected{background:#2a5298}.approvals-page{margin:0 auto;max-width:1400px;padding:24px}.approvals-tabs{background:#fff;border-radius:12px;box-shadow:0 2px 8px #00000014;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px;padding:8px}.tab-btn{min-width:150px;padding:14px 24px}.tab-btn.active{box-shadow:0 4px 12px #1e3c724d}.approvals-content{background:#fff;border-radius:16px;box-shadow:0 4px 12px #00000014;min-height:400px;padding:32px}.requests-list{display:flex;flex-direction:column;gap:20px}.request-card{background:#f8f9fa;border-left:4px solid #2a5298;border-radius:12px;padding:24px;transition:all .2s}.request-card:hover{box-shadow:0 4px 12px #0000001a;transform:translateY(-2px)}.request-header{align-items:center;border-bottom:1px solid #e0e0e0;display:flex;justify-content:space-between;margin-bottom:16px;padding-bottom:16px}.request-header>div{align-items:center;display:flex;gap:12px}.request-type-badge{border-radius:12px;color:#fff;font-size:13px;gap:6px;padding:6px 14px}.request-type-badge,.status-badge{align-items:center;display:inline-flex;font-weight:600}.status-badge{gap:4px}.request-date{color:#999;font-size:13px}.request-body{display:flex;gap:20px;justify-content:space-between}.request-info{flex:1 1}.requester{color:#333;font-size:14px;margin:0 0 16px}.requester strong{color:#1e3c72}.requester small{color:#999;font-size:12px}.request-reason{margin-bottom:16px}.request-reason strong{color:#333;display:block;font-size:14px;margin-bottom:8px}.request-reason p{background:#fff;border-radius:8px;color:#666;line-height:1.6;margin:0;padding:12px}.request-data{margin-bottom:16px}.request-data strong{color:#333;display:block;font-size:14px;margin-bottom:8px}.request-data pre{background:#fff;border:1px solid #e0e0e0;border-radius:8px;color:#666;font-size:12px;margin:0;overflow-x:auto;padding:12px}.approval-info{border-top:1px solid #e0e0e0;color:#666;font-size:14px;margin-top:16px;padding-top:16px}.approval-info strong{color:#333}.request-actions{display:flex;flex-direction:column;gap:12px;min-width:120px}.btn-approve,.btn-reject{font-size:14px;padding:12px 24px;white-space:nowrap}.btn-approve{background:linear-gradient(135deg,#4caf50,#45a049)}.btn-approve:hover{box-shadow:0 6px 16px #4caf504d;transform:translateY(-2px)}.btn-reject{background:linear-gradient(135deg,#e74c3c,#c0392b)}.btn-reject:hover{box-shadow:0 6px 16px #e74c3c4d;transform:translateY(-2px)}.modal-content{border-radius:16px}.modal-content.small{max-width:500px}.modal-header{padding:24px}.close-btn{border-radius:4px}.modal-body>p{color:#666;font-size:14px;margin:0 0 12px}.modal-body>p strong{color:#333}.form-group textarea{border:2px solid #e0e0e0;border-radius:8px;box-sizing:border-box;font-family:inherit;font-size:14px;padding:12px;transition:border-color .2s;width:100%}.form-group textarea:focus{border-color:#2a5298;outline:none}.form-actions{padding-top:16px}.btn-cancel{padding:12px 24px}.btn-submit-approve{background:linear-gradient(135deg,#4caf50,#45a049);border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:15px;font-weight:600;padding:12px 32px}.btn-submit-approve:hover{box-shadow:0 8px 20px #4caf504d;transform:translateY(-2px)}.btn-submit-reject{background:linear-gradient(135deg,#e74c3c,#c0392b);border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:15px;font-weight:600;padding:12px 32px}.btn-submit-reject:hover{box-shadow:0 8px 20px #e74c3c4d;transform:translateY(-2px)}.empty-state,.loading{color:#666;font-size:16px;padding:60px 20px;text-align:center}@media (max-width:768px){.request-body{flex-direction:column}.request-actions{flex-direction:row;width:100%}.btn-approve,.btn-reject{flex:1 1}}.layout{background:#f5f5f5;display:flex;flex-direction:column;min-height:100vh}.top-navbar{background:linear-gradient(135deg,#1e3c72,#2a5298);box-shadow:0 4px 12px #00000026;color:#fff;height:70px;justify-content:space-between;left:0;padding:0 24px;position:fixed;right:0;top:0;z-index:1000}.navbar-left,.top-navbar{align-items:center;display:flex}.navbar-left{gap:20px}.company-logo{align-items:center;display:flex;gap:12px}.logo-shield{animation:pulse 3s ease-in-out infinite;font-size:32px}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.company-name h1{font-size:20px;font-weight:700;line-height:1;margin:0}.company-name p{font-size:11px;letter-spacing:1px;margin:4px 0 0;opacity:.8;text-transform:uppercase}.navbar-right{gap:16px}.icon-button,.navbar-right{align-items:center;display:flex}.icon-button{background:#ffffff1a;border:none;border-radius:50%;color:#fff;cursor:pointer;font-size:20px;height:40px;justify-content:center;position:relative;transition:background .2s;width:40px}.icon-button:hover{background:#fff3}.notification-badge{background:#e74c3c;border:2px solid #1e3c72;border-radius:10px;color:#fff;font-size:10px;font-weight:700;padding:2px 6px;position:absolute;right:-4px;top:-4px}.user-menu-container{position:relative}.user-menu-button{align-items:center;background:#ffffff1a;border:none;border-radius:25px;color:#fff;cursor:pointer;display:flex;gap:12px;padding:6px 12px 6px 6px;transition:background .2s}.user-menu-button:hover{background:#fff3}.user-avatar{border:2px solid #ffffff4d;border-radius:50%;height:40px;min-height:40px;min-width:40px;overflow:hidden;width:40px}.user-avatar,.user-avatar span{align-items:center;color:#fff;display:flex;font-size:14px;font-weight:700;justify-content:center}.user-avatar img,.user-avatar span{height:100%;width:100%}.user-avatar img{object-fit:cover}.user-info-header{align-items:flex-start;display:flex;flex-direction:column;text-align:left}.user-name-header{font-size:14px;font-weight:600;line-height:1}.user-role-header{font-size:11px;margin-top:4px;opacity:.8;text-transform:capitalize}.dropdown-arrow{opacity:.7}.user-dropdown{animation:slideDown .2s ease;background:#fff;border-radius:12px;box-shadow:0 8px 32px #00000026;overflow:hidden;position:absolute;right:0;top:calc(100% + 8px);width:280px;z-index:1001}.dropdown-header{background:linear-gradient(135deg,#1e3c72,#2a5298);color:#fff;padding:24px;text-align:center}.user-avatar-large{border:3px solid #ffffff4d;border-radius:50%;height:70px;margin:0 auto 12px;overflow:hidden;width:70px}.user-avatar-large,.user-avatar-large span{align-items:center;color:#fff;display:flex;font-size:28px;font-weight:700;justify-content:center}.user-avatar-large span{height:100%;width:100%}.user-avatar-large img{height:100%;object-fit:cover;width:100%}.dropdown-header h3{font-size:18px;margin:0 0 4px}.dropdown-header p{font-size:13px;margin:0 0 12px;opacity:.9}.role-badge{font-size:11px;font-weight:600;letter-spacing:.5px}.dropdown-menu{padding:8px 0}.dropdown-item{align-items:center;background:none;border:none;color:#333;cursor:pointer;display:flex;font-size:14px;gap:12px;padding:12px 24px;text-align:left;transition:background .2s;width:100%}.dropdown-item:hover{background:#f5f5f5}.dropdown-item span{font-size:18px}.logout-item{color:#e74c3c;font-weight:600}.logout-item:hover{background:#fee}.dropdown-divider{background:#e0e0e0;height:1px;margin:8px 0}.overlay{right:0;top:0;z-index:999}.overlay,.sidebar{bottom:0;left:0;position:fixed}.sidebar{background:#fff;box-shadow:4px 0 12px #0000000d;overflow-y:auto;padding:20px 0;top:70px;width:220px}.sidebar-nav{display:flex;flex-direction:column;gap:4px;padding:0 12px}.nav-item{align-items:center;background:none;border:none;border-radius:8px;color:#666;cursor:pointer;display:flex;font-size:15px;font-weight:500;gap:12px;padding:14px 16px;text-align:left;transition:all .2s;width:100%}.nav-item:hover{background:#f5f5f5;color:#1e3c72}.nav-item.active{background:linear-gradient(135deg,#1e3c72,#2a5298);box-shadow:0 4px 12px #1e3c724d;color:#fff}.nav-icon{font-size:20px;text-align:center;width:24px}.nav-label{font-weight:500}.main-content{flex:1 1;margin-left:220px;margin-top:70px;min-height:auto;padding:24px}@media (max-width:768px){.sidebar{width:60px}.nav-label{display:none}.main-content{margin-left:60px}.user-info-header{display:none}}.nav-dropdown{margin-bottom:4px}.nav-item.dropdown-toggle{justify-content:space-between;position:relative}.dropdown-arrow{font-size:10px;margin-left:auto;transition:transform .3s ease}.dropdown-arrow.expanded{transform:rotate(180deg)}.nav-submenu{animation:slideDown .3s ease;background:#0000001a;border-left:3px solid #667eea;border-radius:8px;margin-bottom:8px;margin-left:12px;margin-top:4px;overflow:hidden}@keyframes slideDown{0%{max-height:0;opacity:0}to{max-height:500px;opacity:1}}.nav-subitem{align-items:center;background:#0000;border:none;color:#000;cursor:pointer;display:flex;font-size:14px;gap:12px;padding:12px 16px 12px 40px;text-align:left;transition:all .2s;width:100%}.nav-subitem:hover{background:#ffffff0d;color:#000;padding-left:44px}.nav-subitem.active{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:8px;box-shadow:0 2px 8px #667eea4d;color:#fff;font-weight:600;margin:2px 4px;padding-left:36px}.nav-subicon{font-size:16px;text-align:center;width:20px}.nav-sublabel{flex:1 1}@media (max-width:768px){.nav-submenu{margin-left:8px}.nav-subitem{font-size:13px;padding:10px 12px 10px 32px}.nav-subitem:hover{padding-left:36px}.nav-subitem.active{padding-left:32px}}.finance-page{background:#f5f7fa;margin:0 auto;max-width:1600px;min-height:100vh;padding:24px}.page-header h1{font-weight:700}.subtitle{font-weight:400}.tab-btn{transition:all .2s ease}.tab-btn:hover{color:#333}.tab-btn.active{background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 4px 12px #667eea4d}.currency-selector{align-items:center;background:#fff;border-radius:12px;box-shadow:0 2px 8px #00000014;display:flex;gap:12px;margin-bottom:24px;padding:16px 20px}.currency-selector label{color:#1e3c72;font-size:14px;font-weight:600}.currency-selector select{background:#fff;border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;font-size:14px;font-weight:600;padding:8px 12px;transition:all .2s ease}.currency-selector select:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a;outline:none}.finance-summary{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-bottom:24px}.summary-card{overflow:hidden;padding:24px;position:relative;transition:all .3s ease}.summary-card:before{border-radius:50%;content:"";height:100px;opacity:.1;position:absolute;right:0;top:0;transform:translate(30%,-30%);width:100px}.summary-card:hover{box-shadow:0 8px 16px #0000001f;transform:translateY(-4px)}.summary-card.red{border-left-color:#e74c3c}.summary-card.red:before{background:#e74c3c}.summary-card.green{border-left-color:#2ecc71}.summary-card.green:before{background:#2ecc71}.summary-card.blue{border-left-color:#3498db}.summary-card.blue:before{background:#3498db}.summary-card.purple{border-left-color:#9b59b6}.summary-card.purple:before{background:#9b59b6}.summary-card h3{letter-spacing:.5px;margin:0 0 12px}.summary-number{line-height:1.2}.summary-detail{color:#999;display:block;font-size:13px;margin-top:8px}.filters-bar{align-items:flex-end}.filter-group{min-width:150px}.filter-group label{font-size:13px}.filter-group input,.filter-group select{background:#fff;transition:all .2s ease}.filter-group input:focus,.filter-group select:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.btn-create{background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 2px 8px #667eea4d;transition:all .2s ease;white-space:nowrap}.btn-create:hover{box-shadow:0 6px 16px #667eea66}.btn-create:active{transform:translateY(0)}.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 2px 8px #667eea4d;font-size:14px;transition:all .2s ease}.btn-primary:hover{box-shadow:0 6px 16px #667eea66}.finance-content{background:#fff;border-radius:12px;box-shadow:0 2px 8px #00000014;padding:24px}.finance-content h3{color:#1e3c72;font-size:18px;font-weight:600;margin:0 0 20px}.finance-table{background:#fff;border-collapse:collapse;width:100%}.finance-table th{background:#f8f9fa;border-bottom:2px solid #e0e0e0;color:#1e3c72;font-size:13px;font-weight:600;letter-spacing:.5px;padding:14px 12px;text-align:left;text-transform:uppercase;white-space:nowrap}.finance-table td{border-bottom:1px solid #f0f0f0;color:#333;font-size:14px;padding:14px 12px}.finance-table tbody tr{transition:all .2s ease}.finance-table tbody tr:hover{background:#f8f9fa}.finance-table tbody tr:last-child td{border-bottom:none}.text-red{color:#e74c3c;font-weight:600}.text-green{color:#2ecc71;font-weight:600}.status-badge{color:#fff;letter-spacing:.5px}.status-badge.active{background:#4caf50;box-shadow:0 2px 8px #4caf504d}.status-badge.inactive{background:#9e9e9e;box-shadow:0 2px 8px #9e9e9e4d}.action-buttons{flex-wrap:wrap}.btn-action-small{font-size:12px;font-weight:600;transition:all .2s ease;white-space:nowrap}.btn-action-small.edit{background:#ff9800}.btn-action-small.edit:hover{background:#f57c00;transform:translateY(-2px)}.btn-action-small.approve{background:#4caf50;color:#fff}.btn-action-small.approve:hover{background:#45a049;transform:translateY(-2px)}.btn-action-small.reject{background:#e74c3c;color:#fff}.btn-action-small.reject:hover{background:#d32f2f;transform:translateY(-2px)}.btn-action-small.delete{background:#9e9e9e}.btn-action-small.delete:hover{background:#757575;transform:translateY(-2px)}.btn-upload-small{background:#2196f3;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:11px;font-weight:600;padding:4px 8px;transition:all .2s ease}.btn-upload-small:hover{background:#1976d2;transform:translateY(-2px)}.receipt-link{color:#2196f3;font-size:13px;font-weight:600;text-decoration:none;transition:all .2s ease}.receipt-link:hover{color:#1976d2;text-decoration:underline}.chart-container{background:#fff;border-radius:12px;box-shadow:0 2px 8px #00000014;margin-bottom:24px;min-height:700px;overflow:visible;padding:24px;position:relative}.chart-container h3{color:#1e3c72;font-size:18px;font-weight:600;margin:0 0 20px}.recharts-wrapper{margin:0 auto}.recharts-surface,.recharts-wrapper{overflow:visible!important}.recharts-legend-wrapper{padding-top:10px}.recharts-responsive-container{min-height:2000px!important}.recharts-tooltip-wrapper{z-index:100}.recharts-default-tooltip{background:#fff!important;border:1px solid #e0e0e0!important;border-radius:8px!important;box-shadow:0 4px 12px #00000026!important;padding:12px!important}.recharts-tooltip-label{color:#1e3c72;font-weight:600;margin-bottom:8px}.recharts-tooltip-item{color:#333!important;font-size:13px}.recharts-cartesian-axis-tick-value{fill:#666;font-size:12px}.recharts-bar{cursor:pointer}.recharts-bar:hover{opacity:.8}.budget-cards{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));margin-bottom:24px}.budget-card{background:#fff;border-radius:12px;border-top:3px solid #667eea;box-shadow:0 2px 8px #00000014;overflow:hidden;padding:20px;transition:all .3s ease}.budget-card:hover{box-shadow:0 8px 16px #0000001f;transform:translateY(-4px)}.budget-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:12px}.budget-header h4{color:#1e3c72;font-size:16px;font-weight:600;margin:0}.budget-percentage{font-size:18px;font-weight:700}.budget-progress{background:#f0f0f0;border-radius:4px;height:8px;margin-bottom:16px;overflow:hidden}.budget-progress-bar{border-radius:4px;height:100%;transition:width .5s ease}.budget-details{display:flex;flex-direction:column;gap:10px}.budget-details>div{border-bottom:1px solid #f0f0f0;display:flex;font-size:14px;justify-content:space-between;padding:8px 0}.budget-details>div:last-child{border-bottom:none}.budget-details .label{color:#666;font-weight:500}.budget-details .value{color:#333;font-weight:600}.section-header{margin-bottom:16px;padding:0 4px}.section-header h3{color:#1e3c72;font-size:20px;font-weight:600}.modal-overlay{animation:fadeIn .2s ease;background:#0009}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{animation:slideUp .3s ease;box-shadow:0 10px 40px #0000004d;display:flex;flex-direction:column;max-width:400px;overflow:hidden}@keyframes slideUp{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}.modal-content.small{max-width:400px}.modal-header{background:#f8f9fa;border-bottom:1px solid #e0e0e0;border-radius:12px 12px 0 0;flex-shrink:0;padding:20px 24px}.modal-header h2{font-weight:600}.close-btn{border-radius:50%;height:32px;transition:all .2s ease;width:32px}.close-btn:hover{background:#e0e0e0}.modal-body{flex:1 1;overflow-y:auto;padding:24px}.form-group,.form-row{margin-bottom:16px}.form-group{gap:8px}.form-group label{color:#1e3c72}.form-group input,.form-group select,.form-group textarea{font-size:14px;padding:10px 12px;transition:all .2s ease}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.form-group textarea{min-height:80px}.checkbox-label{gap:8px;padding:8px 0}.checkbox-label input[type=checkbox]{height:18px;width:18px}.checkbox-label span{font-weight:600}.form-actions{border-top:1px solid #e0e0e0;gap:12px;padding-top:20px}.btn-cancel{border:none;font-size:14px;transition:all .2s ease}.btn-cancel:hover{color:#333}.btn-submit{background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 2px 8px #667eea4d;font-size:14px;transition:all .2s ease}.btn-submit:hover{box-shadow:0 6px 16px #667eea66;transform:translateY(-2px)}.btn-submit:active{transform:translateY(0)}.info-box{background:#f8f9fa;border-left:3px solid #667eea;padding:16px}.info-box p{color:#555;margin:6px 0}.info-box p strong{color:#1e3c72}.expense-info{background:#f8f9fa;border-left:3px solid #667eea;border-radius:8px;margin-bottom:16px;padding:16px}.expense-info p{color:#555;font-size:14px;margin:8px 0}.expense-info p strong{color:#1e3c72}.file-preview{border:1px solid #e0e0e0;font-size:13px;margin-top:12px}.loading{padding:80px 20px}.loading:before{content:"⏳";display:block;font-size:48px;margin-bottom:16px}.empty-state{padding:80px 20px}.empty-state:before{content:"📊";display:block;font-size:48px;margin-bottom:16px}.empty-state p{color:#666}.expense-history-container{display:flex;flex-direction:column;gap:0;position:relative}.expense-history-item{display:flex;gap:20px;padding-bottom:24px;position:relative}.expense-timeline-marker{align-items:center;display:flex;flex-direction:column;min-width:20px;position:relative}.timeline-dot{background:linear-gradient(135deg,#667eea,#764ba2);border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 3px #667eea33;flex-shrink:0;height:14px;width:14px;z-index:2}.timeline-line{background:linear-gradient(180deg,#667eea4d 0,#667eea1a);flex-grow:1;margin-top:4px;width:2px}.expense-card{background:#fff;border-left:4px solid #667eea;border-radius:12px;box-shadow:0 2px 8px #00000014;flex:1 1;padding:20px;transition:all .3s ease}.expense-card:hover{box-shadow:0 6px 16px #0000001f;transform:translateY(-2px)}.expense-card-header{align-items:flex-start;border-bottom:1px solid #f0f0f0;display:flex;justify-content:space-between;margin-bottom:16px;padding-bottom:12px}.expense-date-section{display:flex;flex-direction:column;gap:6px}.expense-date{color:#1e3c72;font-size:16px;font-weight:700}.expense-category{color:#667eea;font-size:13px;font-weight:600;letter-spacing:.5px;text-transform:uppercase}.expense-amount-status{align-items:flex-end;display:flex;flex-direction:column;gap:8px}.expense-amount{color:#e74c3c;font-size:20px;font-weight:700}.expense-description{background:#f8f9fa;border-radius:8px;color:#555;font-size:14px;line-height:1.5;margin-bottom:14px;padding:12px}.expense-description strong{color:#1e3c72;margin-right:6px}.expense-card-details{grid-gap:12px;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:16px}.expense-detail-row{background:#f8f9fa;border-radius:6px;display:flex;font-size:13px;justify-content:space-between;padding:8px 12px}.detail-label{color:#666;font-weight:500}.detail-value{color:#333;font-weight:600}.expense-receipt{margin-bottom:16px}.expense-card-actions{border-top:1px solid #f0f0f0;display:flex;flex-wrap:wrap;gap:8px;padding-top:12px}@media (max-width:1024px){.budget-cards,.finance-summary{grid-template-columns:repeat(2,1fr)}}@media (max-width:768px){.finance-page{padding:16px}.page-header h1{font-size:24px}.finance-summary{grid-template-columns:1fr}.filters-bar{flex-direction:column;gap:12px}.filter-group{min-width:100%}.budget-cards,.form-row{grid-template-columns:1fr}.tabs{flex-direction:column}.tab-btn{width:100%}.chart-container{height:auto;min-height:100px;padding:20px}.summary-number{font-size:24px}.modal-content{max-height:95vh;width:95%}.form-actions{flex-direction:column}.btn-cancel,.btn-submit{width:100%}.expense-card-header{flex-direction:column;gap:12px}.expense-amount-status{align-items:flex-start}.expense-card-details{grid-template-columns:1fr}.expense-card-actions{flex-direction:column}.btn-action-small{justify-content:center;width:100%}}@media (max-width:480px){.page-header h1,.summary-number{font-size:20px}.chart-container h3{font-size:16px}.finance-table td,.finance-table th{font-size:12px;padding:8px 6px}.action-buttons{flex-direction:column}.expense-history-item{gap:12px}.expense-card{padding:16px}.expense-amount{font-size:18px}.expense-date{font-size:14px}}.modal-body::-webkit-scrollbar,.table-container::-webkit-scrollbar{height:8px;width:8px}.modal-body::-webkit-scrollbar-track,.table-container::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.modal-body::-webkit-scrollbar-thumb,.table-container::-webkit-scrollbar-thumb{background:#667eea;border-radius:4px}.modal-body::-webkit-scrollbar-thumb:hover,.table-container::-webkit-scrollbar-thumb:hover{background:#764ba2}.stat-card{align-items:flex-start;box-shadow:0 2px 8px #00000014;gap:16px;padding:24px;transition:transform .2s,box-shadow .2s}.stat-card:hover{box-shadow:0 6px 20px #0000001f;transform:translateY(-4px)}.stat-card.red{border-left:4px solid #e74c3c}.stat-card.blue{border-left:4px solid #3498db}.stat-card.orange{border-left:4px solid #ff9800}.stat-card.purple{border-left:4px solid #9c27b0}.stat-icon{font-size:36px;line-height:1}.stat-label{color:#666;font-weight:600;letter-spacing:.5px;margin-bottom:8px;text-transform:uppercase}.stat-value{color:#1e3c72;font-size:28px;line-height:1.2;margin-bottom:4px}.stat-change{color:#666;font-size:13px;font-weight:500}.stat-change.up{color:#e74c3c}.stat-change.down{color:#27ae60}.expense-subcategory-tag{background:#f0f4f8;border-radius:6px;color:#2c3e50;display:inline-block;font-size:13px;font-weight:500;margin-bottom:12px;padding:6px 12px}.currency-switcher{align-items:center;background:#fff;border-radius:12px;box-shadow:0 2px 8px #00000014;display:flex;gap:12px;margin-bottom:24px;padding:16px 20px}.currency-switcher-label{color:#2c3e50;font-size:14px;font-weight:600;margin-right:8px}.currency-buttons{background:#f5f7fa;border-radius:10px;display:flex;gap:8px;padding:4px}.currency-btn{align-items:center;background:#0000;border:none;border-radius:8px;color:#7f8c8d;cursor:pointer;display:flex;font-size:14px;font-weight:600;gap:6px;padding:10px 24px;transition:all .3s ease}.currency-btn:hover{color:#2c3e50;transform:translateY(-1px)}.currency-btn.active{background:#fff;box-shadow:0 2px 8px #0000001a;color:#1e3c72}.currency-btn .flag{font-size:18px}.quick-stats-grid{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-bottom:24px}@media (max-width:768px){.currency-buttons{flex:1 1}.currency-btn{flex:1 1;justify-content:center}}.summary-card.green{background:linear-gradient(135deg,#27ae60,#2ecc71)}.summary-card.green .summary-detail,.summary-card.green .summary-number,.summary-card.green h3{color:#fff}.time-management-page{margin:0 auto;max-width:1400px;padding:24px}.subtitle{margin:4px 0 0}.btn-clock-in{background:linear-gradient(135deg,#2196f3,#1976d2);border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:16px;font-weight:600;padding:12px 24px;transition:all .2s}.btn-clock-in:hover:not(:disabled){box-shadow:0 6px 16px #2196f34d;transform:translateY(-2px)}.btn-clock-in:disabled{cursor:not-allowed;opacity:.5}.filters-card{align-items:flex-end;background:#fff;border-radius:12px;box-shadow:0 2px 8px #00000014;display:flex;gap:16px;margin-bottom:24px;padding:20px}.filter-group input,.filter-group select{border:2px solid #e0e0e0;border-radius:8px;font-size:14px;padding:10px 12px;transition:all .2s}.filter-group input:focus,.filter-group select:focus{border-color:#2a5298;outline:none}.btn-add{background:#4caf50;border:none;border-radius:8px;color:#fff;cursor:pointer;font-weight:600;padding:10px 20px;transition:all .2s;white-space:nowrap}.btn-add:hover:not(:disabled){background:#45a049;transform:translateY(-2px)}.btn-add:disabled{cursor:not-allowed;opacity:.5}.summary-grid{grid-gap:16px;gap:16px;margin-bottom:24px}.summary-card{background:#fff;border-left:4px solid;border-radius:12px;box-shadow:0 2px 8px #00000014;padding:20px}.summary-card.blue{border-left-color:#2196f3}.summary-card.green{border-left-color:#4caf50}.summary-card.purple{border-left-color:#9c27b0}.summary-card.orange{border-left-color:#ff9800}.summary-card h3{color:#666;font-size:14px;font-weight:600;margin:0 0 8px;text-transform:uppercase}.summary-number{color:#1e3c72;font-size:32px;font-weight:700;margin:0}.time-content{background:#fff;border-radius:12px;box-shadow:0 2px 8px #00000014;min-height:400px;padding:24px}.calendar-view{margin:0 auto;max-width:1000px}.calendar-header{margin-bottom:24px;text-align:center}.calendar-header h3{color:#1e3c72;font-size:24px;margin:0}.calendar-grid{grid-gap:8px;display:grid;gap:8px;grid-template-columns:repeat(7,1fr);margin-bottom:24px}.calendar-day-header{background:#f5f5f5;border-radius:8px;color:#1e3c72;font-size:14px;font-weight:700;padding:12px;text-align:center}.calendar-day{aspect-ratio:1;background:#fff;border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;display:flex;flex-direction:column;padding:8px;position:relative;transition:all .2s}.calendar-day.empty{background:#fafafa;border-color:#0000;cursor:default}.calendar-day.weekend{background:#f9f9f9}.calendar-day.today{background:#e3f2fd;border-color:#2196f3}.calendar-day.has-attendance{background:#f1f8f4;border-color:#4caf50}.calendar-day:not(.empty):hover{border-color:#2a5298;box-shadow:0 4px 12px #00000026;transform:translateY(-4px)}.day-number{color:#1e3c72;font-size:16px;font-weight:700;margin-bottom:4px}.day-content{align-items:center;display:flex;flex:1 1;flex-direction:column;gap:4px;justify-content:center}.hours-badge{background:#4caf50;border-radius:12px;color:#fff;font-size:12px;font-weight:600;padding:4px 8px}.leave-indicator{color:#ff9800;font-size:11px;font-weight:600}.status-dot{border-radius:50%;height:8px;margin-top:4px;width:8px}.status-dot.approved{background:#4caf50}.status-dot.pending{background:#ff9800}.status-dot.late{background:#ff5722}.status-dot.absent{background:#f44336}.calendar-legend{display:flex;flex-wrap:wrap;gap:24px;justify-content:center}.legend-item{align-items:center;color:#666;display:flex;font-size:14px;gap:8px}.legend-dot{background:#4caf50;border-radius:50%;height:12px;width:12px}.legend-dot.weekend{background:#f9f9f9;border:2px solid #e0e0e0}.time-table{border-collapse:collapse;width:100%}.time-table thead{background:#f5f5f5}.time-table th{border-bottom:2px solid #e0e0e0;color:#1e3c72;font-size:14px;font-weight:600;padding:12px;text-align:left}.time-table td{border-bottom:1px solid #f0f0f0;font-size:14px;padding:12px}.time-table tbody tr:hover{background:#f9f9f9}.status-badge-small{display:inline-block}.status-badge-small,.work-badge{border-radius:12px;color:#fff;font-size:12px;font-weight:600;padding:4px 8px}.work-badge{background:#2196f3}.leave-badge{background:#ff9800;border-radius:12px;color:#fff;font-size:12px;font-weight:600;padding:4px 8px}.leaves-header{align-items:flex-start;display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;margin-bottom:24px}.leave-balance-cards{display:flex;flex:1 1;flex-wrap:wrap;gap:16px}.leave-balance-card{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:12px;color:#fff;min-width:150px;padding:20px;text-align:center}.leave-balance-card h4{font-size:14px;margin:0 0 12px;opacity:.9}.balance-info{align-items:baseline;display:flex;gap:4px;justify-content:center;margin-bottom:8px}.balance-info .used{font-size:32px;font-weight:700}.balance-info .separator{font-size:20px;opacity:.7}.balance-info .total{font-size:20px;opacity:.9}.balance-label{font-size:12px;margin:0;opacity:.8}.btn-request-leave{background:#4caf50;border:none;border-radius:8px;color:#fff;cursor:pointer;font-weight:600;padding:12px 24px;transition:all .2s;white-space:nowrap}.btn-request-leave:hover:not(:disabled){background:#45a049;transform:translateY(-2px)}.leave-requests-list{grid-gap:16px;display:grid;gap:16px}.leave-request-card{border:2px solid #e0e0e0;border-radius:12px;padding:20px;transition:all .2s}.leave-request-card:hover{border-color:#2a5298;box-shadow:0 4px 12px #0000001a}.leave-request-header{align-items:start;display:flex;justify-content:space-between;margin-bottom:12px}.leave-request-header h4{color:#1e3c72;font-size:18px;margin:0 0 4px}.leave-dates{color:#666;font-size:14px;margin:0}.status-badge{border-radius:16px;padding:6px 12px}.status-badge.pending{background:#fff3e0;color:#ff9800}.status-badge.approved{background:#e8f5e9;color:#4caf50}.status-badge.rejected{background:#ffebee;color:#f44336}.leave-request-body p{color:#666;font-size:14px;margin:8px 0}.leave-request-actions{border-top:1px solid #e0e0e0;display:flex;gap:12px;margin-top:16px;padding-top:16px}.btn-approve,.btn-reject{border:none;border-radius:8px;cursor:pointer;flex:1 1;font-weight:600;padding:10px;transition:all .2s}.btn-approve{background:#4caf50;color:#fff}.btn-approve:hover{background:#45a049}.btn-reject{background:#f44336;color:#fff}.btn-reject:hover{background:#d32f2f}.clock-display{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:12px;color:#fff;margin-bottom:24px;padding:32px;text-align:center}.current-time{font-size:48px;font-weight:700;margin-bottom:8px}.current-date{font-size:16px;opacity:.9}.btn-clock-in-submit{background:linear-gradient(135deg,#2196f3,#1976d2);border:none;border-radius:8px;color:#fff;cursor:pointer;flex:1 1;font-size:16px;font-weight:700;padding:14px;transition:all .2s}.btn-clock-in-submit:hover{box-shadow:0 6px 16px #2196f366;transform:translateY(-2px)}.alert{border-radius:8px;margin-bottom:16px;padding:12px 16px}.alert-info{background:#e3f2fd;border-left:4px solid #2196f3;color:#1976d2}.action-buttons{gap:8px}.btn-action-small{border:none;border-radius:6px;cursor:pointer;font-size:14px;padding:6px 10px;transition:all .2s}.btn-action-small.edit{background:#2196f3;color:#fff}.btn-action-small.delete{background:#f44336;color:#fff}.btn-action-small:hover{box-shadow:0 2px 8px #0003;transform:scale(1.1)}@media (max-width:768px){.calendar-grid{gap:4px}.calendar-day{padding:4px}.day-number{font-size:12px}.hours-badge{font-size:10px;padding:2px 6px}.filters-card,.leaves-header{flex-direction:column}}.calculated-days{background:linear-gradient(135deg,#e3f2fd,#bbdefb);border-left:4px solid #2196f3;border-radius:8px;color:#1565c0;font-size:14px;margin-bottom:16px;padding:12px 16px}.calculated-days strong{color:#0d47a1}@media (max-width:768px){.form-row{grid-template-columns:1fr}}.form-group input[type=number]{-moz-appearance:textfield}.form-group input[type=number]::-webkit-inner-spin-button,.form-group input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.days-suggestion{align-items:center;background:#fff3e0;border-left:4px solid #ff9800;border-radius:8px;color:#e65100;display:flex;flex-wrap:wrap;font-size:13px;gap:12px;justify-content:space-between;margin-bottom:16px;padding:12px 16px}.btn-use-suggestion{background:#ff9800;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:12px;font-weight:600;padding:6px 14px;transition:all .2s;white-space:nowrap}.btn-use-suggestion:hover{background:#f57c00;transform:translateY(-1px)}.form-hint{color:#666;display:block;font-size:12px;font-style:italic;margin-top:6px}.tax-config-page{margin:0 auto;max-width:2000px;padding:24px}.page-header{margin-bottom:32px}.page-header h1{margin:0 0 8px}.subtitle{margin:0}.btn-create{background:linear-gradient(135deg,#1e3c72,#2a5298);border-radius:8px;font-size:15px;font-weight:600;padding:12px 32px;transition:all .2s}.btn-create:hover{box-shadow:0 8px 20px #1e3c724d;transform:translateY(-2px)}.config-tabs{border-bottom:2px solid #e0e0e0;display:flex;gap:12px;margin-bottom:24px}.tab-btn{background:none;border-bottom:3px solid #0000;font-size:15px;padding:12px 24px}.tab-btn.active,.tab-btn:hover{background:#f8f9fa;color:#1e3c72}.tab-btn.active{border-bottom-color:#2a5298}.config-content{background:#fff;border-radius:16px;box-shadow:0 4px 12px #00000014;min-height:400px;padding:32px}.currency-section,.deduction-section{margin-bottom:40px}.currency-section:last-child,.deduction-section:last-child{margin-bottom:0}.currency-title,.section-title{border-bottom:3px solid #2a5298;color:#1e3c72;font-size:20px;font-weight:700;margin:0 0 24px;padding-bottom:12px}.deduction-cards,.tax-cards{grid-gap:24px;display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}.deduction-card,.tax-card{background:#fff;border:2px solid #0000;border-radius:12px;box-shadow:0 2px 8px #0000001a;padding:1.5rem;transition:all .3s ease}.deduction-card:hover,.tax-card:hover{border-color:#2196f3;box-shadow:0 8px 24px #00000026;transform:translateY(-4px)}.deduction-card.inactive,.tax-card.inactive{background:#f5f5f5;opacity:.6}.deduction-card-header,.tax-card-header{align-items:flex-start;border-bottom:2px solid #f0f0f0;display:flex;justify-content:space-between;margin-bottom:1rem;padding-bottom:1rem}.deduction-card-header h3,.tax-card-header h3{color:#333;font-size:1.2rem;margin:0}.deduction-code,.tax-code{background:#e3f2fd;border-radius:4px;color:#1976d2;display:inline-block;font-size:.75rem;font-weight:600;margin-top:.25rem;padding:.25rem .5rem}.deduction-actions,.tax-actions{display:flex;gap:.5rem}.btn-icon{background:none;border:none;border-radius:4px;cursor:pointer;font-size:1.2rem;padding:.25rem;transition:all .2s ease}.btn-icon:hover{background:#f0f0f0;transform:scale(1.1)}.btn-icon.delete:hover{background:#ffebee}.deduction-card-body,.tax-card-body{margin-top:1rem}.tax-description{color:#666;font-size:.9rem;line-height:1.5;margin-bottom:1rem}.deduction-details,.tax-details{display:flex;flex-direction:column;gap:.75rem}.detail-item{align-items:center;background:#f8f9fa;border-radius:6px;padding:.5rem}.detail-item .label{font-size:.85rem;font-weight:500}.detail-item .value{color:#333}.detail-item .value.highlight{color:#2196f3;font-size:1.1rem}.badge{display:inline-block;font-size:.75rem;font-weight:600;padding:.25rem .75rem;text-transform:uppercase}.badge.mandatory{background:#ff9800;color:#fff}.badge.taxable{background:#f44336;color:#fff}.brackets-section{background:#f8f9fa;border:2px dashed #dee2e6;border-radius:8px;margin-top:1.5rem;padding:1.5rem}.brackets-header{align-items:center;border-bottom:2px solid #dee2e6;display:flex;justify-content:space-between;margin-bottom:1.5rem;padding-bottom:1rem}.brackets-header h4{color:#333;font-size:1.1rem;margin:0}.btn-add-bracket{align-items:center;background:#28a745;border:none;border-radius:6px;color:#fff;cursor:pointer;display:flex;font-weight:600;gap:.5rem;padding:.5rem 1rem;transition:all .3s ease}.btn-add-bracket:hover{background:#218838;box-shadow:0 4px 8px #28a7454d;transform:translateY(-2px)}.brackets-list{display:flex;flex-direction:column;gap:1rem}.bracket-item{background:#fff;border:2px solid #dee2e6;border-radius:8px;padding:1rem;transition:all .3s ease}.bracket-item:hover{border-color:#2196f3;box-shadow:0 4px 12px #2196f326}.bracket-number{align-items:center;color:#2196f3;display:flex;font-size:.95rem;font-weight:700;gap:.5rem;margin-bottom:.75rem}.bracket-number:before{background:#2196f3;border-radius:2px;content:"";height:20px;width:4px}.bracket-fields{grid-gap:1rem;align-items:end;display:grid;gap:1rem;grid-template-columns:1fr 1fr 1fr 2fr auto}.bracket-fields .form-group{margin-bottom:0}.bracket-fields .form-group label{color:#666;font-size:.85rem}.bracket-fields .form-group input{font-size:.9rem}.flex-grow{flex-grow:1}.btn-remove-bracket{background:#dc3545;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:1.2rem;height:-webkit-fit-content;height:fit-content;padding:.5rem .75rem;transition:all .3s ease}.btn-remove-bracket:hover:not(:disabled){background:#c82333;transform:scale(1.1)}.btn-remove-bracket:disabled{background:#ccc;cursor:not-allowed;opacity:.5}.bracket-preview{background:#e3f2fd;border-left:4px solid #2196f3;border-radius:4px;color:#1976d2;font-size:.9rem;font-weight:600;margin-top:.75rem;padding:.75rem}.bracket-preview span{font-family:Courier New,monospace}.brackets-help{background:#fff3cd;border:1px solid #ffc107;border-radius:6px;margin-top:1.5rem;padding:1rem}.brackets-help p{color:#856404;font-weight:600;margin:0 0 .5rem}.brackets-help ul{color:#856404;margin:0;padding-left:1.5rem}.brackets-help li{font-size:.9rem;margin:.25rem 0}.modal-overlay{z-index:2000}.modal-content{border-radius:25px;box-shadow:0 20px 60px #0000004d;max-width:1200px}.modal-content.large{max-width:900px}.modal-header{background:linear-gradient(135deg,#f8f9fa,#fff);background:#fff;border-bottom:2px solid #e0e0e0;border-radius:16px 16px 0 0;padding:24px 32px;position:-webkit-sticky;position:sticky;top:0;z-index:10}.modal-header h2{color:#1e3c72;font-size:24px}.close-btn{align-items:center;border-radius:8px;color:#999;display:flex;font-size:28px;height:36px;justify-content:center;transition:all .2s;width:36px}.close-btn:hover{background:#f0f0f0;color:#333;transform:rotate(90deg)}.modal-body{padding:32px}.form-section{border-bottom:1px solid #e0e0e0;margin-bottom:32px;padding-bottom:24px}.form-section:last-of-type{border-bottom:none;margin-bottom:0;padding-bottom:0}.form-section h3{border-bottom:2px solid #2a5298;color:#1e3c72;font-size:18px;font-weight:600;margin:0 0 20px;padding-bottom:12px}.form-group label{color:#333;font-weight:600}.form-group input,.form-group select,.form-group textarea{border:2px solid #e0e0e0;border-radius:8px;box-sizing:border-box;font-family:inherit;font-size:15px;padding:12px 16px;transition:border-color .2s;width:100%}.form-group textarea{resize:vertical}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:#2a5298;box-shadow:0 0 0 3px #2a52981a;outline:none}.form-group small{color:#999;display:block;font-size:12px;margin-top:6px}.form-row{grid-gap:1rem;gap:1rem;margin-bottom:0}.checkbox-label{font-weight:500}.checkbox-label input[type=checkbox]{width:auto}.form-actions{border-top:2px solid #e0e0e0;gap:16px;margin-top:24px;padding-top:24px}.btn-cancel{background:#f5f5f5;border:2px solid #e0e0e0;border-radius:8px;color:#666;font-size:15px;font-weight:600;padding:14px 32px;transition:all .2s}.btn-cancel:hover{background:#e0e0e0;border-color:#ccc}.btn-submit{background:linear-gradient(135deg,#1e3c72,#2a5298);border-radius:8px;font-size:15px;font-weight:600;padding:14px 36px;transition:all .2s}.btn-submit:hover:not(:disabled){box-shadow:0 8px 20px #1e3c724d;transform:translateY(-2px)}.btn-submit:disabled{cursor:not-allowed;opacity:.6}.empty-state,.loading-state{color:#666;font-size:1.1rem;padding:3rem;text-align:center}.empty-state p{margin-bottom:1.5rem}@media (max-width:1200px){.deduction-cards,.tax-cards{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}}@media (max-width:768px){.tax-config-page{padding:16px}.page-header{align-items:flex-start;flex-direction:column;gap:16px}.btn-create{width:100%}.config-tabs{overflow-x:auto}.config-content{padding:20px}.bracket-fields,.deduction-cards,.tax-cards{grid-template-columns:1fr}.modal-content{border-radius:0;margin:0;max-height:100vh;max-width:100%}.modal-body,.modal-header{padding:20px}.form-row{grid-template-columns:1fr}.form-actions{flex-direction:column-reverse}.btn-cancel,.btn-submit{width:100%}}.bracket-fields input[type=number],.bracket-fields input[type=text]{border-width:2px!important;font-size:1.1em!important;font-weight:600!important;min-height:52px!important;padding:14px 16px!important}.bracket-fields label{font-size:.95em!important;font-weight:600!important;margin-bottom:8px!important}.bracket-preview{font-size:1.05em!important;font-weight:600!important;padding:14px 18px!important}.btn-remove-bracket{font-size:1.3em!important;min-height:52px!important;padding:14px 18px!important}.bracket-fields input:focus{border-width:3px!important;box-shadow:0 0 0 3px #3498db1a!important}.documents-page{margin:0 auto;max-width:1600px;padding:24px}.filters-bar{padding:20px}.documents-content,.filters-bar{background:#fff;border-radius:12px;box-shadow:0 2px 8px #00000014}.documents-content{min-height:400px;padding:24px}.documents-grid{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}.document-card{background:#f9f9f9;border-left:4px solid #2196f3;border-radius:12px;display:flex;flex-direction:column;gap:12px;padding:20px;transition:all .3s}.document-card:hover{box-shadow:0 8px 16px #0000001a;transform:translateY(-4px)}.document-icon{font-size:48px;opacity:.8;text-align:center}.document-header{align-items:start;display:flex;gap:12px;justify-content:space-between}.document-header h3{color:#1e3c72;flex:1 1;font-size:16px;margin:0}.status-badge{white-space:nowrap}.status-badge.archived{background:#f5f5f5;color:#999}.document-info{border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0;display:flex;flex-direction:column;gap:8px;padding:12px 0}.employee-name{color:#333;font-size:14px;font-weight:600;margin:0}.category,.description{color:#666;font-size:13px;margin:0}.description{line-height:1.4}.document-meta{color:#999;display:flex;font-size:12px;justify-content:space-between}.expires-warning{background:#fff3cd;border-radius:6px;color:#856404;font-size:12px;padding:8px;text-align:center}.document-actions{border-top:1px solid #e0e0e0;display:flex;gap:8px;padding-top:12px}.btn-action{font-size:13px}.btn-action.download{background:#2196f3;color:#fff}.btn-action.download:hover{background:#1976d2}.btn-action.delete:hover{background:#d32f2f}.file-preview{background:#f0f0f0;border-radius:6px;color:#333;font-size:14px;margin-top:8px;padding:12px}.modal-content.large{max-height:90vh;max-width:600px;overflow-y:auto}.btn-primary{background:linear-gradient(135deg,#2196f3,#1976d2)}.btn-primary:hover{box-shadow:0 6px 16px #2196f34d}@media (max-width:768px){.documents-grid{grid-template-columns:1fr}.filters-bar,.page-header{flex-direction:column}.page-header{align-items:flex-start;gap:16px}}.contracts-page{margin:0 auto;max-width:1600px;padding:24px}.contracts-content,.templates-content{background:#fff;border-radius:12px;box-shadow:0 2px 8px #00000014;min-height:400px;padding:24px}.contracts-grid{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(350px,1fr))}.contract-card{background:#f9f9f9;border-left:4px solid #673ab7;border-radius:12px;padding:20px;transition:all .3s}.contract-card:hover{box-shadow:0 8px 16px #0000001a;transform:translateY(-4px)}.contract-header{align-items:start;display:flex;gap:12px;justify-content:space-between;margin-bottom:16px}.contract-header h3{color:#1e3c72;font-size:16px;margin:0 0 4px}.contract-number{color:#666;font-family:Courier New,monospace;font-size:12px;margin:0}.contract-info{border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0;display:flex;flex-direction:column;gap:8px;margin-bottom:12px;padding:12px 0}.info-row{display:flex;font-size:13px;justify-content:space-between}.info-row .label{color:#666;font-weight:500}.info-row .value{color:#333;font-weight:600;text-align:right}.contract-actions{display:flex;flex-wrap:wrap;gap:8px}.btn-action{flex:1 1;font-size:12px;font-weight:600;min-width:80px;padding:8px 12px;white-space:nowrap}.btn-action.view{background:#2196f3;color:#fff}.btn-action.view:hover{background:#1976d2}.btn-action.edit{background:#ff9800}.btn-action.edit:hover{background:#f57c00}.btn-action.activate{background:#4caf50;color:#fff}.btn-action.activate:hover{background:#45a049}.btn-action.terminate{background:#f44336;color:#fff}.btn-action.terminate:hover{background:#d32f2f}.btn-action.delete{background:#9e9e9e}.btn-action.delete:hover{background:#757575}.templates-grid{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}.template-card{background:#f9f9f9;border-left:4px solid #00bcd4;border-radius:12px;padding:20px;transition:all .3s}.template-card:hover{box-shadow:0 8px 16px #0000001a;transform:translateY(-4px)}.template-card h3{color:#1e3c72;font-size:16px;margin:0 0 8px}.template-code{background:#fff;border-radius:4px;color:#666;display:inline-block;font-family:Courier New,monospace;font-size:12px;margin:0 0 8px;padding:4px 8px}.template-description{color:#666;font-size:14px;line-height:1.5;margin:0 0 12px}.contract-view{max-height:70vh;overflow-y:auto}.contract-header-info{background:#f9f9f9;border-radius:8px;margin-bottom:24px;padding:16px}.info-grid{grid-gap:16px;gap:16px}.info-grid div{display:flex;flex-direction:column;gap:4px}.info-grid strong{color:#666;font-size:12px;text-transform:uppercase}.info-grid p{color:#333;font-size:14px;font-weight:600;margin:0}.contract-content{background:#fff;border:1px solid #e0e0e0;border-radius:8px;margin-bottom:24px;padding:24px}.contract-content pre{color:#333;font-family:Courier New,monospace;font-size:13px;line-height:1.6;margin:0;white-space:pre-wrap}.modal-content.xlarge{max-height:90vh;max-width:900px}@media (max-width:768px){.contracts-grid,.info-grid,.templates-grid{grid-template-columns:1fr}.contract-actions{flex-direction:column}.btn-action{width:100%}}@media print{.form-actions,.modal-header{display:none}.contract-view{max-height:none}}.my-profile-page{padding:20px}.profile-container{display:flex;flex-direction:column;gap:20px;margin:0 auto;max-width:900px}.profile-card{background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000001a;padding:30px}.profile-header{display:flex;gap:20px;margin-bottom:30px}.profile-avatar{border:4px solid #1e3c72;border-radius:50%;height:120px;overflow:hidden;width:120px}.profile-avatar img{height:100%;object-fit:cover;width:100%}.avatar-placeholder{align-items:center;background:linear-gradient(135deg,#1e3c72,#2a5298);color:#fff;display:flex;font-size:48px;font-weight:700;height:100%;justify-content:center;width:100%}.profile-info h2{color:#1e3c72;margin:0 0 10px}.role-badge{background:#1e3c72;border-radius:12px;color:#fff;display:inline-block;font-size:12px;margin-bottom:10px;padding:4px 12px;text-transform:uppercase}.email{color:#666}.profile-actions{display:flex;gap:10px}.account-info-card,.edit-form-card{background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000001a;padding:30px}.info-grid{grid-gap:20px;gap:20px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:20px}.info-item .label{color:#666;font-size:14px;font-weight:600}.info-item .value{color:#333;font-size:16px}.App{min-height:100vh}.loading{align-items:center;color:#666;display:flex;font-size:18px;height:100vh;justify-content:center}.benefits-page{margin:0 auto;max-width:1600px;padding:24px}.page-header{margin-bottom:24px}.page-header h1{color:#1e3c72;font-size:32px;margin:0}.subtitle{color:#666;font-size:16px;margin:8px 0 0}.header-actions{gap:12px}.tabs{background:#fff;border-radius:12px;box-shadow:0 2px 8px #00000014;gap:8px;margin-bottom:24px;padding:8px}.tab-btn{background:#0000;border:none;border-radius:8px;color:#666;cursor:pointer;flex:1 1;font-size:14px;font-weight:600;padding:12px 20px;transition:all .2s}.tab-btn:hover{background:#f5f5f5}.tab-btn.active{background:linear-gradient(135deg,#1e3c72,#2a5298);color:#fff}.benefits-content{background:#fff;border-radius:12px;box-shadow:0 2px 8px #00000014;min-height:400px;padding:24px}.benefit-types-grid{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}.benefit-type-card{background:#f9f9f9;border-left:4px solid #2196f3;border-radius:12px;padding:20px;transition:all .3s}.benefit-type-card:hover{box-shadow:0 8px 16px #0000001a;transform:translateY(-4px)}.benefit-type-header{align-items:start;display:flex;justify-content:space-between;margin-bottom:12px}.benefit-type-header h3{color:#1e3c72;font-size:18px;margin:0}.type-badge{border-radius:12px;font-size:11px;font-weight:700;padding:4px 10px;text-transform:uppercase}.type-badge.fixed{background:#e3f2fd;color:#2196f3}.type-badge.percentage{background:#f3e5f5;color:#9c27b0}.benefit-code{background:#fff;border-radius:4px;color:#666;display:inline-block;font-family:Courier New,monospace;font-size:12px;margin:0 0 8px;padding:4px 8px}.benefit-description{color:#666;font-size:14px;line-height:1.5;margin:0 0 16px}.benefit-details{border-top:1px solid #e0e0e0;display:flex;flex-direction:column;gap:8px;margin-bottom:16px;padding-top:12px}.detail-item{display:flex;font-size:14px;justify-content:space-between}.detail-item .label{color:#666}.detail-item .value{color:#1e3c72;font-weight:600}.status-badge{font-size:11px;font-weight:700;padding:4px 10px;text-transform:uppercase}.status-badge.active{background:#e8f5e9;color:#4caf50}.status-badge.inactive{background:#ffebee;color:#f44336}.status-badge.expired{background:#fff3e0;color:#ff9800}.status-badge.cancelled{background:#f5f5f5;color:#999}.benefit-actions{border-top:1px solid #e0e0e0;display:flex;gap:8px;padding-top:12px}.btn-delete,.btn-edit{border:none;border-radius:6px;cursor:pointer;flex:1 1;font-size:13px;font-weight:600;padding:8px;transition:all .2s}.btn-edit{background:#2196f3;color:#fff}.btn-edit:hover{background:#1976d2}.btn-delete{background:#f44336;color:#fff}.btn-delete:hover{background:#d32f2f}.filters-bar{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:24px}.filter-group{display:flex;flex:1 1;flex-direction:column;gap:8px;min-width:200px}.filter-group label{color:#1e3c72;font-size:14px;font-weight:600}.filter-group select{border:2px solid #e0e0e0;border-radius:8px;font-size:14px;padding:10px 12px;transition:all .2s}.filter-group select:focus{border-color:#2a5298;outline:none}.benefits-table{border-collapse:collapse;width:100%}.benefits-table thead{background:#f5f5f5}.benefits-table th{border-bottom:2px solid #e0e0e0;color:#1e3c72;font-size:14px;font-weight:600;padding:12px;text-align:left}.benefits-table td{border-bottom:1px solid #f0f0f0;font-size:14px;padding:12px}.benefits-table tbody tr:hover{background:#f9f9f9}.percentage{color:#9c27b0;font-size:12px}.action-buttons{gap:6px}.btn-action{font-size:14px}.btn-action.edit{background:#2196f3;color:#fff}.btn-action.cancel{background:#ff9800;color:#fff}.btn-action.delete{background:#f44336;color:#fff}.btn-action:hover{box-shadow:0 2px 8px #0003}.empty-state{color:#999}.empty-state p{font-size:16px;margin-bottom:16px}.loading{color:#999;font-size:16px;padding:60px}.btn-primary{background:linear-gradient(135deg,#4caf50,#45a049);border:none;border-radius:8px;color:#fff;cursor:pointer;font-weight:600;padding:12px 24px;transition:all .2s}.btn-primary:hover{box-shadow:0 6px 16px #4caf504d;transform:translateY(-2px)}.form-row{grid-gap:16px;gap:16px}.checkbox-group{padding:12px 0}.checkbox-label{align-items:center;cursor:pointer;display:flex;gap:10px}.checkbox-label input[type=checkbox]{cursor:pointer;height:20px;width:20px}.checkbox-label span{color:#333;font-size:14px}.info-box{background:#f5f5f5;border-radius:8px;margin-bottom:16px;padding:12px 16px}.info-box p{color:#666;font-size:14px;margin:4px 0}@media (max-width:768px){.benefit-types-grid,.form-row{grid-template-columns:1fr}.filters-bar,.page-header{flex-direction:column}.page-header{align-items:flex-start;gap:16px}}.public-holidays-page{margin:0 auto;max-width:1400px;padding:20px}.page-header{align-items:center;display:flex;justify-content:space-between}.page-header h1{color:#2c3e50}.subtitle{color:#7f8c8d;font-size:14px}.year-filter{border:1px solid #ddd;border-radius:6px;padding:10px 15px}.btn-create,.year-filter{cursor:pointer;font-size:14px}.btn-create{background:#3498db;border:none;border-radius:6px;color:#fff;font-weight:500;padding:10px 20px}.btn-create:hover{background:#2980b9}.holidays-grid{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(350px,1fr))}.holiday-card{background:#fff;border:1px solid #e1e8ed;border-radius:8px;display:flex;gap:15px;padding:20px;transition:all .2s}.holiday-card:hover{border-color:#3498db;box-shadow:0 4px 12px #0000001a}.holiday-date{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:8px;color:#fff;min-width:80px;padding:15px;text-align:center}.holiday-date .month{font-size:12px;font-weight:600;opacity:.9;text-transform:uppercase}.holiday-date .day{font-size:32px;font-weight:700;margin:5px 0}.holiday-date .weekday{font-size:12px;opacity:.8}.holiday-info{flex:1 1}.holiday-info h3{color:#2c3e50;font-size:18px;margin:0 0 8px}.holiday-info .description{color:#7f8c8d;font-size:14px;margin:5px 0}.holiday-meta{display:flex;gap:8px;margin-top:10px}.badge{border-radius:12px;font-size:12px;font-weight:500;padding:4px 10px}.badge.recurring{background:#e8f5e9;color:#2e7d32}.badge.country{background:#e3f2fd;color:#1565c0}.holiday-actions{display:flex;flex-direction:column;gap:8px}.btn-action{background:#f8f9fa;border:none;cursor:pointer;padding:8px;transition:all .2s}.btn-action:hover{background:#e9ecef;transform:scale(1.1)}.btn-action.edit:hover{background:#fff3cd}.btn-action.delete:hover{background:#f8d7da}.btn-action.active{background:#d4edda}.btn-action.inactive{background:#f8d7da}.empty-state{background:#fff;border:2px dashed #ddd;border-radius:8px}.empty-state p{color:#7f8c8d;margin-bottom:20px}.modal-content{max-width:500px;width:90%}.modal-header{border-bottom:1px solid #e1e8ed}.modal-header h2{color:#2c3e50}.close-btn{background:none;border:none;color:#7f8c8d;cursor:pointer;font-size:24px;height:30px;padding:0;width:30px}.close-btn:hover{color:#2c3e50}.holiday-form{padding:20px}.form-group{margin-bottom:20px}.form-group label{color:#2c3e50;display:block;font-size:14px;margin-bottom:8px}.form-group input[type=date],.form-group input[type=text],.form-group select,.form-group textarea{border:1px solid #ddd;border-radius:6px;font-size:14px;padding:10px;width:100%}.form-group input[type=checkbox]{margin-right:8px}.form-row{grid-gap:15px;display:grid;gap:15px;grid-template-columns:1fr 1fr}.form-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}.btn-cancel{background:#fff;border:1px solid #ddd;border-radius:6px}.btn-cancel,.btn-submit{cursor:pointer;padding:10px 20px}.btn-submit{background:#3498db;border:none;border-radius:6px;color:#fff;font-weight:500}.btn-submit:hover{background:#2980b9}.loading{color:#7f8c8d;padding:40px;text-align:center}.btn-back{background:#f8f9fa;border:1px solid #ddd;border-radius:6px;cursor:pointer;font-size:14px;margin-bottom:10px;padding:8px 16px;transition:all .2s}.btn-back:hover{background:#e9ecef;border-color:#adb5bd}.payroll-consolidation-page{margin:0 auto;max-width:1400px;padding:20px}.page-header{margin-bottom:30px}.page-header h1{color:#1e293b;font-size:28px;margin-bottom:5px}.page-header .subtitle{color:#64748b;font-size:14px}.stats-grid{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-bottom:30px}.stat-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 3px #0000001a;gap:15px;padding:20px}.stat-card,.stat-icon{align-items:center;display:flex}.stat-icon{border-radius:12px;font-size:40px;height:60px;justify-content:center;width:60px}.stat-icon.pending{background:#fef3c7}.stat-icon.paid{background:#d1fae5}.stat-icon.total{background:#dbeafe}.stat-content{flex:1 1}.stat-value{color:#1e293b;font-size:32px;font-weight:700;line-height:1;margin-bottom:5px}.stat-label{color:#64748b;font-size:13px;margin-bottom:5px}.stat-amount{color:#10b981;font-size:16px;font-weight:600}.tabs{border-bottom:2px solid #e2e8f0;display:flex;gap:10px;margin-bottom:20px}.tab{background:none;border:none;border-bottom:3px solid #0000;color:#64748b;cursor:pointer;font-size:15px;font-weight:500;padding:12px 24px;transition:all .2s}.tab:hover{background:#f8fafc;color:#1e293b}.tab.active{border-bottom-color:#2563eb;color:#2563eb}.filters-section{background:#fff;border:1px solid #e2e8f0;border-radius:12px;margin-bottom:20px;padding:20px}.filters-section h3{color:#1e293b;font-size:16px;margin-bottom:15px}.filters-grid{grid-gap:15px;align-items:end;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.form-group{display:flex;flex-direction:column}.form-group label{color:#475569;font-size:13px;font-weight:500;margin-bottom:5px}.form-group input,.form-group textarea{border:1px solid #cbd5e1;border-radius:8px;font-size:14px;padding:10px 12px;transition:border-color .2s}.form-group input:focus,.form-group textarea:focus{border-color:#2563eb;box-shadow:0 0 0 3px #2563eb1a;outline:none}.btn-action,.btn-filter,.btn-primary,.btn-secondary{border:none;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;padding:10px 20px;transition:all .2s}.btn-filter,.btn-primary{background:#2563eb;color:#fff}.btn-filter:hover,.btn-primary:hover{background:#1d4ed8;box-shadow:0 4px 6px #2563eb4d;transform:translateY(-1px)}.btn-primary:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.btn-secondary{background:#f1f5f9;border:1px solid #cbd5e1;color:#1e293b}.btn-secondary:hover{background:#e2e8f0}.payrolls-section{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:20px}.section-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:20px}.section-header h3{color:#1e293b;font-size:18px;margin:0}.table-container{border:1px solid #e2e8f0;border-radius:8px;overflow-x:auto}.consolidations-table,.items-table,.payrolls-table{background:#fff;border-collapse:collapse;width:100%}.consolidations-table thead,.items-table thead,.payrolls-table thead{background:#f8fafc}.consolidations-table th,.items-table th,.payrolls-table th{border-bottom:2px solid #e2e8f0;color:#475569;font-size:13px;font-weight:600;padding:12px;text-align:left}.consolidations-table td,.items-table td,.payrolls-table td{border-bottom:1px solid #e2e8f0;color:#1e293b;font-size:14px;padding:12px}.consolidations-table tbody tr,.items-table tbody tr,.payrolls-table tbody tr{transition:background .2s}.payrolls-table tbody tr:hover{background:#f8fafc;cursor:pointer}.payrolls-table tbody tr.selected{background:#dbeafe}.amount{font-weight:500;text-align:right}.amount.deduction{color:#dc2626}.amount.net{color:#10b981;font-weight:600}.position{color:#64748b;font-size:12px;margin-top:2px}.status-badge{border-radius:12px;display:inline-block;font-size:12px;font-weight:500;padding:4px 12px}.status-badge.pending_payment{background:#fef3c7;color:#92400e}.status-badge.paid{background:#d1fae5;color:#065f46}.status-badge.cancelled{background:#fee2e2;color:#991b1b}.action-buttons{display:flex;gap:5px}.btn-action{background:#f1f5f9;border:1px solid #cbd5e1;border-radius:6px;font-size:16px;padding:6px 10px}.btn-action.view:hover{background:#dbeafe;border-color:#2563eb}.btn-action.pay:hover{background:#d1fae5;border-color:#10b981}.btn-action.cancel:hover{background:#fee2e2;border-color:#dc2626}.selection-summary{background:#f0f9ff;border:2px solid #2563eb;border-radius:12px;margin-top:20px;padding:20px}.selection-summary h4{color:#1e293b;margin-bottom:15px}.summary-grid{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.summary-item{background:#fff;border-radius:8px;display:flex;justify-content:space-between;padding:10px}.summary-item.highlight{background:#2563eb;color:#fff}.summary-item.highlight .label,.summary-item.highlight .value{color:#fff}.summary-item .label{color:#64748b;font-size:13px}.summary-item .value{color:#1e293b;font-size:16px;font-weight:600}.summary-item .value.deduction{color:#dc2626}.empty-state{color:#64748b;padding:60px 20px;text-align:center}.empty-icon{font-size:60px;margin-bottom:20px}.empty-state h4{color:#1e293b;font-size:18px;margin-bottom:10px}.empty-state p{font-size:14px}.modal-overlay{align-items:center;background:#00000080;bottom:0;display:flex;justify-content:center;left:0;padding:20px;position:fixed;right:0;top:0;z-index:1000}.modal-content{background:#fff;border-radius:12px;box-shadow:0 20px 25px -5px #0000001a;max-height:90vh;max-width:600px;overflow-y:auto;width:100%}.modal-content.large{max-width:1000px}.modal-header{align-items:center;border-bottom:1px solid #e2e8f0;display:flex;justify-content:space-between;padding:20px}.modal-header h2{color:#1e293b;font-size:20px;margin:0}.modal-close{align-items:center;background:none;border:none;border-radius:6px;color:#64748b;cursor:pointer;display:flex;font-size:24px;height:32px;justify-content:center;padding:0;transition:background .2s;width:32px}.modal-close:hover{background:#f1f5f9}.modal-body{padding:20px}.modal-footer{border-top:1px solid #e2e8f0;display:flex;gap:10px;justify-content:flex-end;padding:20px}.info-grid{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:30px}.info-item{display:flex;flex-direction:column;gap:5px}.info-item label{color:#64748b;font-size:12px;font-weight:500}.info-item span,.info-item strong{color:#1e293b;font-size:14px}.info-item.highlight{background:#f0f9ff;border:1px solid #2563eb;border-radius:8px;padding:10px}@media (max-width:768px){.filters-grid,.stats-grid,.summary-grid{grid-template-columns:1fr}.section-header{align-items:flex-start;flex-direction:column;gap:15px}.header-actions{flex-direction:column;width:100%}.header-actions button{width:100%}}.btn-export,.btn-export-sm{align-items:center;background:#10b981;border:none;border-radius:8px;color:#fff;cursor:pointer;display:inline-flex;font-weight:600;gap:8px;transition:all .2s}.btn-export{font-size:14px;padding:10px 20px}.btn-export-sm{font-size:13px;padding:8px 12px}.btn-export-sm:hover,.btn-export:hover{background:#059669;box-shadow:0 4px 6px #10b9814d;transform:translateY(-1px)}.btn-export-sm:disabled,.btn-export:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.modal-header-actions{align-items:center;display:flex;gap:10px}.header-actions{display:flex;flex-wrap:wrap;gap:10px}@media (max-width:768px){.header-actions{width:100%}.btn-export,.btn-primary,.btn-secondary{flex:1 1;min-width:120px}}
/*# sourceMappingURL=main.e700cb13.css.map*/