Download Attendance Management System -

.employee-name font-weight: 600; color: #0b2b3f;

.btn-warning background: #d97706; .btn-warning:hover background: #b45309;

.input-group label font-weight: 600; font-size: 0.75rem; color: #1f4e6e; letter-spacing: 0.5px; download attendance management system

.input-group display: flex; flex-direction: column; gap: 6px; min-width: 180px; flex: 2;

const row = document.createElement('tr'); row.innerHTML = ` <td style="font-family: monospace;">$escapeHtml(emp.id)</td> <td class="employee-name">$escapeHtml(emp.name)</td> <td><span class="status-badge $badgeClass">$statusDisplay</span></td> <td style="font-size:0.75rem; color:#4b6f8c;">$timeStr</td> <td class="action-btns"> <button class="small-btn mark-present" data-id="$emp.id" data-status="present">✅ Present</button> <button class="small-btn mark-late" data-id="$emp.id" data-status="late">⏰ Late</button> <button class="small-btn mark-absent" data-id="$emp.id" data-status="absent">❌ Absent</button> <button class="small-btn delete-emp" data-id="$emp.id" style="background:#fbe9e7; color:#b91c1c;">🗑️ Del</button> </td> `; tbody.appendChild(row); ); .employee-name font-weight: 600

.status-absent background: #ffe6e5; color: #b91c1c;

.action-btns display: flex; gap: 8px; flex-wrap: wrap; .btn-warning background: #d97706

.input-group input:focus outline: none; border-color: #2c7da0; box-shadow: 0 0 0 3px rgba(44,125,160,0.2);

/* table container */ .table-wrapper overflow-x: auto; border-radius: 1.5rem; background: white; box-shadow: 0 6px 14px rgba(0,0,0,0.05); margin-top: 15px;