:root{font-family:Arial,Helvetica,sans-serif;background:#f5f7fb;color:#111827}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}.shell{max-width:1120px;margin:auto;padding:40px 24px}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}h1{font-size:36px;margin:6px 0;letter-spacing:-.02em}h2{letter-spacing:-.01em}.eyebrow{font-size:12px;letter-spacing:.14em;font-weight:700;color:#475569}.badge{padding:7px 10px;border-radius:999px;background:#fff;border:1px solid #e2e8f0}.badge.online{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}.headerActions{display:flex;align-items:center;gap:12px}.linkButton{border:0;background:transparent;color:#475569;cursor:pointer}.tabs{display:flex;align-items:center;gap:8px;margin-bottom:22px;border-bottom:1px solid #e2e8f0;overflow-x:auto}.tabs button{border:0;background:transparent;padding:12px 4px;margin-right:18px;cursor:pointer;color:#64748b;border-bottom:2px solid transparent;white-space:nowrap}.tabs button.active{color:#111827;border-bottom-color:#111827;font-weight:700}.adminIdentity{margin-left:auto;color:#64748b;font-size:13px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.grid article,.panel{background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:22px}.grid strong{display:block;font-size:32px}.grid span{color:#64748b}.panel{margin-top:20px}.panel h2{margin:0}.panelHead{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}.panelHead span,.empty{color:#64748b}.attendanceList,.employeeList,.branchList{display:grid}.attendanceRow,.employeeRow,.branchRow{display:flex;justify-content:space-between;gap:24px;padding:16px 0;border-top:1px solid #e5e7eb}.attendanceRow>div:first-child span,.employeeRow>div:first-child span,.eventMeta span,.branchSummary span,.branchSummary small{display:block;color:#64748b;margin-top:4px}.branchSummary small{font-size:13px;line-height:1.45}.eventMeta{text-align:right}.eventMeta b{display:inline-block;font-size:12px;padding:4px 7px;border-radius:999px;background:#f1f5f9}.eventMeta .late{background:#fef2f2;color:#b91c1c}.eventMeta .on_time{background:#ecfdf5;color:#047857}.eventMeta .early{background:#eff6ff;color:#1d4ed8}.eventMeta .unscheduled{background:#fff7ed;color:#c2410c}.loginShell{min-height:100vh;display:grid;place-items:center;padding:24px}.loginCard{width:min(100%,430px);background:#fff;border:1px solid #e2e8f0;border-radius:22px;padding:30px;box-shadow:0 20px 50px #0f172a14}.loginCard h1{font-size:30px}.loginCard p{color:#64748b;line-height:1.5}.loginForm,.employeeForm,.branchForm,.shiftForm{display:grid;gap:14px}.loginForm label,.employeeForm label,.branchForm label,.shiftForm label{display:grid;gap:7px;font-weight:600;font-size:14px}.loginForm input,.employeeForm input,.branchForm input,.branchForm select,.shiftForm input,.shiftForm select,.directoryTools input,.directoryTools select{width:100%;padding:12px 13px;border:1px solid #cbd5e1;border-radius:12px;background:#fff;color:#111827}.loginForm input:focus,.employeeForm input:focus,.branchForm input:focus,.branchForm select:focus,.shiftForm input:focus,.shiftForm select:focus,.directoryTools input:focus,.directoryTools select:focus{outline:2px solid #cbd5e1;outline-offset:1px}.primary{border:0;border-radius:12px;background:#111827;color:#fff;padding:12px 16px;font-weight:700;cursor:pointer}.primary:disabled{opacity:.45;cursor:not-allowed}.errorBox,.infoBox{padding:11px 13px;border-radius:12px;font-size:14px}.errorBox{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca}.infoBox{background:#f8fafc;color:#334155;border:1px solid #e2e8f0;margin-top:14px}.employeeForm{grid-template-columns:repeat(4,1fr);align-items:end}.employeeForm .checkLabel{display:flex;align-items:center;gap:8px;padding-bottom:12px}.employeeForm .checkLabel input{width:auto}.branchForm{grid-template-columns:1fr 1fr;align-items:end}.branchForm .wideField{grid-column:1/-1}.shiftForm{grid-template-columns:repeat(2,minmax(0,1fr));align-items:end}.formHint{margin:12px 0 0;color:#64748b;font-size:13px;line-height:1.45}.directoryTools{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:12px;margin:14px 0 4px}.reportTools{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end;margin:16px 0}.reportTools label{display:grid;gap:7px;font-weight:600;font-size:14px}.reportTools input{width:100%;padding:12px 13px;border:1px solid #cbd5e1;border-radius:12px;background:#fff;color:#111827}.reportTools input:focus{outline:2px solid #cbd5e1;outline-offset:1px}.rowActions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.rowActions button{background:#fff;border:1px solid #cbd5e1;border-radius:10px;padding:8px 10px;cursor:pointer;color:#334155}.rowActions button:hover{background:#f8fafc}.rowActions .dangerAction{border-color:#fecaca;color:#b91c1c;background:snow}.rowActions .correctionAction{border-color:#fbbf24;color:#92400e;background:#fffbeb}.rowActions .overtimeToggle{font-weight:700;transition:background .15s ease,border-color .15s ease,color .15s ease}.rowActions .overtimeOn{background:#ecfdf5;border-color:#86efac;color:#166534}.rowActions .overtimeOn:hover{background:#dcfce7}.rowActions .overtimeOff{background:#f1f5f9;border-color:#cbd5e1;color:#475569}.rowActions .overtimeOff:hover{background:#e2e8f0}.approvalBox{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:14px;padding:14px 16px;border:1px solid #fde68a;border-radius:14px;background:#fffbeb}.approvalBox>div span{display:block;color:#92400e;margin-top:4px;font-size:13px;line-height:1.4}.approvalBox.approved{background:#ecfdf5;border-color:#a7f3d0}.approvalBox.approved>div span{color:#047857}.timesheetPanel{margin-bottom:24px}.timesheetList{display:grid;gap:12px}.timesheetEntry{border:1px solid #e2e8f0;border-radius:14px;padding:16px;background:#fff}.timesheetEntry.needsReview{border-color:#fbbf24;background:#fffcf2}.timesheetTop{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.timesheetTop>div{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.timesheetTop>b{font-size:12px;color:#92400e}.statusChip{display:inline-block;border-radius:999px;padding:4px 8px;font-size:11px;font-weight:700;background:#f1f5f9;color:#475569}.status-complete{background:#ecfdf5;color:#047857}.status-open{background:#fffbeb;color:#92400e}.status-missed{background:#fef2f2;color:#b91c1c}.status-upcoming{background:#eff6ff;color:#1d4ed8}.status-unscheduled{background:#fff7ed;color:#c2410c}.timesheetMetrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}.timesheetMetrics span{display:block;padding:10px;border-radius:10px;background:#f8fafc;font-weight:600}.timesheetMetrics small{display:block;color:#64748b;font-weight:400;margin-bottom:3px}.timesheetNote{margin:12px 0 0;color:#64748b;font-size:13px;line-height:1.5}@media(max-width:820px){.employeeForm,.timesheetMetrics{grid-template-columns:repeat(2,1fr)}}@media(max-width:720px){.grid{grid-template-columns:repeat(2,1fr)}h1{font-size:28px}.attendanceRow,.employeeRow,.branchRow,.panelHead{align-items:flex-start;flex-direction:column}.eventMeta{text-align:left}.rowActions{width:100%;justify-content:flex-start}.adminIdentity{display:none}.directoryTools,.reportTools{grid-template-columns:1fr}.reportTools .primary{width:100%}.approvalBox{align-items:flex-start;flex-direction:column}.approvalBox .primary{width:100%}.timesheetTop{flex-direction:column}}@media(max-width:520px){.employeeForm,.branchForm,.shiftForm{grid-template-columns:1fr}.branchForm .wideField{grid-column:auto}.shell{padding:28px 16px}.loginCard{padding:24px}.headerActions{align-items:flex-end;flex-direction:column}.tabs button{margin-right:10px}.rowActions button{flex:1 1 calc(50% - 8px)}.timesheetMetrics{grid-template-columns:1fr 1fr}}