*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;padding:20px}.attendance-container{max-width:1400px;margin:0 auto;background:#fff;border-radius:12px;box-shadow:0 20px 60px #0000004d;padding:30px}.header{text-align:center;margin-bottom:30px;border-bottom:3px solid #667eea;padding-bottom:20px}.header h1{color:#2d3748;font-size:2.5rem;margin-bottom:10px}.week-info h2{color:#667eea;font-size:1.8rem;margin-bottom:5px}.week-range{color:#718096;font-size:1.1rem}.navigation{display:flex;justify-content:center;gap:15px;margin-bottom:30px}.nav-button{padding:12px 24px;font-size:1rem;font-weight:600;border:2px solid #667eea;background:#fff;color:#667eea;border-radius:8px;cursor:pointer;transition:all .3s ease}.nav-button:hover:not(:disabled){background:#667eea;color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.nav-button:disabled{opacity:.5;cursor:not-allowed}.current-week-button:disabled{background:#e2e8f0;border-color:#cbd5e0;color:#a0aec0}.grid-container{overflow-x:auto;margin-bottom:30px}.attendance-table{width:100%;border-collapse:collapse;background:#fff;font-size:.95rem}.attendance-table thead{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;position:sticky;top:0;z-index:10}.attendance-table th{padding:15px 10px;text-align:center;font-weight:600;border:1px solid #cbd5e0}.employee-header{text-align:left!important;min-width:180px}.date-header{min-width:150px}.attendance-table td{padding:10px;border:1px solid #e2e8f0}.employee-cell{font-weight:600;color:#2d3748;background:#f7fafc}.attendance-cell{text-align:center;position:relative}.status-dropdown{width:100%;padding:8px;border:2px solid #cbd5e0;border-radius:6px;font-size:.9rem;cursor:pointer;transition:all .2s ease;background:#fff}.status-dropdown:hover{border-color:#667eea}.status-dropdown:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.status-dropdown.status-present{background-color:#c6f6d5;border-color:#48bb78;color:#22543d;font-weight:600}.status-dropdown.status-vacation-leave{background-color:#fed7d7;border-color:#f56565;color:#742a2a;font-weight:600}.status-dropdown.status-sick-leave{background-color:#feebc8;border-color:#ed8936;color:#7c2d12;font-weight:600}.status-dropdown.status-personal---casual-leave{background-color:#e9d8fd;border-color:#9f7aea;color:#44337a;font-weight:600}.status-dropdown.status-work-from-home{background-color:#bee3f8;border-color:#4299e1;color:#2c5282;font-weight:600}.status-dropdown.status-work-from-office{background-color:#b2f5ea;border-color:#38b2ac;color:#234e52;font-weight:600}.status-dropdown.status-holiday{background-color:#fef5e7;border-color:#f9ca24;color:#7d6608;font-weight:600}.weekend-cell{background-color:#fffaf0!important}.weekend-dropdown{cursor:not-allowed!important;opacity:.8}.status-dropdown.saving{opacity:.6;cursor:wait}.saving-indicator{position:absolute;top:5px;right:5px;font-size:.8rem;animation:pulse 1s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.legend{padding:20px;background:#f7fafc;border-radius:8px;border:1px solid #e2e8f0}.legend h3{color:#2d3748;margin-bottom:15px;font-size:1.1rem}.legend-items{display:flex;flex-wrap:wrap;gap:15px}.legend-item{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#fff;border-radius:6px;font-size:.9rem;border:1px solid #e2e8f0}.legend-color{width:20px;height:20px;border-radius:4px;border:1px solid #cbd5e0}.legend-color.status-present{background-color:#c6f6d5;border-color:#48bb78}.legend-color.status-vacation-leave{background-color:#fed7d7;border-color:#f56565}.legend-color.status-sick-leave{background-color:#feebc8;border-color:#ed8936}.legend-color.status-personal---casual-leave{background-color:#e9d8fd;border-color:#9f7aea}.legend-color.status-work-from-home{background-color:#bee3f8;border-color:#4299e1}.legend-color.status-work-from-office{background-color:#b2f5ea;border-color:#38b2ac}.legend-color.status-holiday{background-color:#fef5e7;border-color:#f9ca24}.loading,.error{text-align:center;padding:50px;font-size:1.2rem;color:#2d3748}.error{color:#e53e3e;background:#fff5f5;border:2px solid #fc8181;border-radius:8px;margin:20px}@media (max-width: 768px){.attendance-container{padding:15px}.header h1{font-size:1.8rem}.week-info h2{font-size:1.3rem}.navigation{flex-direction:column}.nav-button{width:100%}.attendance-table{font-size:.85rem}.date-header{min-width:120px}.status-dropdown{font-size:.8rem;padding:6px}.legend-items{flex-direction:column}}.dashboard-container{max-width:1400px;margin:20px auto;background:#fff;border-radius:12px;box-shadow:0 20px 60px #0000004d;padding:30px}.dashboard-container .header{text-align:center;margin-bottom:30px;border-bottom:3px solid #667eea;padding-bottom:20px}.dashboard-container .header h1{color:#2d3748;font-size:2.5rem;margin-bottom:10px}.dashboard-container .week-info h2{color:#667eea;font-size:1.8rem;margin-bottom:5px}.dashboard-container .week-range{color:#718096;font-size:1.1rem}.dashboard-container .navigation{display:flex;justify-content:center;gap:15px;margin-bottom:30px}.dashboard-container .nav-button{padding:12px 24px;font-size:1rem;font-weight:600;border:2px solid #667eea;background:#fff;color:#667eea;border-radius:8px;cursor:pointer;transition:all .3s ease}.dashboard-container .nav-button:hover:not(:disabled){background:#667eea;color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.dashboard-container .nav-button:disabled{opacity:.5;cursor:not-allowed}.dashboard-container .current-week-button:disabled{background:#e2e8f0;border-color:#cbd5e0;color:#a0aec0}.summary-container{display:flex;justify-content:center;gap:20px;margin-bottom:40px}.summary-card{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:25px 40px;border-radius:12px;text-align:center;box-shadow:0 4px 12px #667eea4d}.summary-label{font-size:.9rem;opacity:.9;margin-bottom:8px;text-transform:uppercase;letter-spacing:1px}.summary-value{font-size:2.5rem;font-weight:700}.daily-breakdown{margin-top:30px}.daily-breakdown h3{color:#2d3748;font-size:1.5rem;margin-bottom:20px;text-align:center}.breakdown-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-top:20px}.day-card{background:#f7fafc;border:2px solid #e2e8f0;border-radius:12px;padding:20px;transition:all .3s ease}.day-card:hover{transform:translateY(-5px);box-shadow:0 8px 24px #0000001a;border-color:#667eea}.day-header{margin-bottom:15px;padding-bottom:10px;border-bottom:2px solid #e2e8f0}.day-header h4{color:#2d3748;font-size:1.1rem;font-weight:600;margin:0}.day-stats{display:flex;flex-direction:column;gap:10px;margin-bottom:15px}.stat-row{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:8px;font-size:.95rem}.stat-label{font-weight:500;display:flex;align-items:center;gap:8px}.stat-count{font-weight:700;font-size:1.1rem;min-width:30px;text-align:right}.stat-row.present{background-color:#c6f6d5;color:#22543d}.stat-row.vacation{background-color:#fed7d7;color:#742a2a}.stat-row.sick{background-color:#feebc8;color:#7c2d12}.stat-row.personal{background-color:#e9d8fd;color:#44337a}.stat-row.wfh{background-color:#bee3f8;color:#2c5282}.stat-row.wfo{background-color:#b2f5ea;color:#234e52}.stat-row.holiday{background-color:#fef5e7;color:#7d6608;border:2px solid #f9ca24}.stat-row.not-marked{background-color:#edf2f7;color:#4a5568}.day-total{margin-top:10px;padding-top:10px;border-top:2px solid #e2e8f0;text-align:center;font-weight:700;color:#667eea;font-size:1rem}.dashboard-container .loading,.dashboard-container .error{text-align:center;padding:50px;font-size:1.2rem;color:#2d3748}.dashboard-container .error{color:#e53e3e;background:#fff5f5;border:2px solid #fc8181;border-radius:8px;margin:20px}@media (max-width: 768px){.dashboard-container{padding:15px}.dashboard-container .header h1{font-size:1.8rem}.dashboard-container .week-info h2{font-size:1.3rem}.dashboard-container .navigation{flex-direction:column}.dashboard-container .nav-button{width:100%}.breakdown-grid{grid-template-columns:1fr}.summary-value{font-size:2rem}}.weekly-summary-container{max-width:1400px;margin:20px auto;background:#fff;border-radius:12px;box-shadow:0 20px 60px #0000004d;padding:30px}.weekly-summary-container .header{text-align:center;margin-bottom:30px;border-bottom:3px solid #667eea;padding-bottom:20px}.weekly-summary-container .header h1{color:#2d3748;font-size:2.5rem;margin-bottom:10px}.weekly-summary-container .week-info h2{color:#667eea;font-size:1.8rem;margin-bottom:5px}.weekly-summary-container .week-range{color:#718096;font-size:1.1rem}.weekly-summary-container .navigation{display:flex;justify-content:center;gap:15px;margin-bottom:30px}.weekly-summary-container .nav-button{padding:12px 24px;font-size:1rem;font-weight:600;border:2px solid #667eea;background:#fff;color:#667eea;border-radius:8px;cursor:pointer;transition:all .3s ease}.weekly-summary-container .nav-button:hover:not(:disabled){background:#667eea;color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.weekly-summary-container .nav-button:disabled{opacity:.5;cursor:not-allowed}.weekly-summary-container .current-week-button:disabled{background:#e2e8f0;border-color:#cbd5e0;color:#a0aec0}.employee-summary-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:25px;margin-top:30px}.employee-card{background:#f7fafc;border:2px solid #e2e8f0;border-radius:12px;overflow:hidden;transition:all .3s ease}.employee-card:hover{transform:translateY(-5px);box-shadow:0 12px 28px #00000026;border-color:#667eea}.employee-header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:20px;display:flex;justify-content:space-between;align-items:center}.employee-header h3{margin:0;font-size:1.3rem;font-weight:600}.employee-id{font-size:.85rem;opacity:.9;background:#fff3;padding:4px 12px;border-radius:12px}.employee-stats{padding:20px;display:flex;flex-direction:column;gap:12px}.summary-stat{position:relative;border-radius:8px;overflow:hidden;background:#fff;border:2px solid #e2e8f0}.stat-bar{position:absolute;top:0;left:0;height:100%;opacity:.2;transition:width .5s ease}.stat-info{position:relative;display:flex;align-items:center;gap:12px;padding:12px 15px;z-index:1}.stat-icon{font-size:1.2rem}.stat-name{flex:1;font-weight:500;font-size:.95rem}.stat-value{font-weight:700;font-size:1rem;white-space:nowrap}.summary-stat.present .stat-bar{background-color:#48bb78}.summary-stat.present{border-color:#48bb78;color:#22543d}.summary-stat.vacation .stat-bar{background-color:#f56565}.summary-stat.vacation{border-color:#f56565;color:#742a2a}.summary-stat.sick .stat-bar{background-color:#ed8936}.summary-stat.sick{border-color:#ed8936;color:#7c2d12}.summary-stat.personal .stat-bar{background-color:#9f7aea}.summary-stat.personal{border-color:#9f7aea;color:#44337a}.summary-stat.wfh .stat-bar{background-color:#4299e1}.summary-stat.wfh{border-color:#4299e1;color:#2c5282}.summary-stat.wfo .stat-bar{background-color:#38b2ac}.summary-stat.wfo{border-color:#38b2ac;color:#234e52}.summary-stat.holiday .stat-bar{background-color:#f9ca24}.summary-stat.holiday{border-color:#f9ca24;color:#7d6608}.summary-stat.not-marked .stat-bar{background-color:#a0aec0}.summary-stat.not-marked{border-color:#cbd5e0;color:#4a5568}.employee-footer{padding:15px 20px;border-top:2px solid #e2e8f0;text-align:center;font-weight:700;color:#667eea;font-size:1rem}.weekly-summary-container .loading,.weekly-summary-container .error{text-align:center;padding:50px;font-size:1.2rem;color:#2d3748}.weekly-summary-container .error{color:#e53e3e;background:#fff5f5;border:2px solid #fc8181;border-radius:8px;margin:20px}@media (max-width: 768px){.weekly-summary-container{padding:15px}.weekly-summary-container .header h1{font-size:1.8rem}.weekly-summary-container .week-info h2{font-size:1.3rem}.weekly-summary-container .navigation{flex-direction:column}.weekly-summary-container .nav-button{width:100%}.employee-summary-grid{grid-template-columns:1fr}.employee-header{flex-direction:column;gap:10px;align-items:flex-start}.stat-name{font-size:.85rem}.stat-value{font-size:.9rem}}.app{min-height:100vh}.view-tabs{background:#fff;padding:0;display:flex;justify-content:center;gap:0;box-shadow:0 2px 8px #0000001a;position:sticky;top:0;z-index:100}.tab-button{flex:1;max-width:300px;padding:20px 30px;font-size:1.1rem;font-weight:600;border:none;background:#fff;color:#718096;cursor:pointer;transition:all .3s ease;border-bottom:4px solid transparent;position:relative}.tab-button:hover:not(.active){background:#f7fafc;color:#667eea}.tab-button.active{color:#667eea;background:#f7fafc;border-bottom-color:#667eea}.tab-button.active:after{content:"";position:absolute;bottom:-4px;left:0;right:0;height:4px;background:linear-gradient(135deg,#667eea,#764ba2)}@media (max-width: 768px){.tab-button{font-size:.9rem;padding:15px 20px}}