body{background:#f4f6fa;color:#182230;font-family:system-ui,-apple-system,"Segoe UI",sans-serif}.app-navbar{background:linear-gradient(100deg,#17365d,#245b8f);box-shadow:0 2px 12px #162c4b20}.app-card{border:1px solid #e2e7ef;border-radius:14px;box-shadow:0 4px 18px #18223008;overflow:hidden}.form-control,.form-select{border-color:#d6dce6;min-height:42px}.btn{border-radius:9px;font-weight:600}.metric-card{background:#fff;border:1px solid #e2e7ef;border-radius:13px;padding:16px 18px}.metric-label{color:#68758a;font-size:.82rem}.metric-value{font-size:1.7rem;font-weight:750;margin-top:5px}.empty-state{min-height:420px;border:1px dashed #cbd4e2;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#fff;padding:24px}.empty-icon{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:#e8f1ff;color:#215aa6;font-size:30px;margin-bottom:16px}.attendance-scroll{max-height:calc(100vh - 300px);overflow:auto}.attendance-table{font-size:12px;min-width:1100px;border-color:#dce2eb}.attendance-table thead th{position:sticky;top:0;z-index:2;background:#edf2f8;color:#28364a;text-align:center;vertical-align:middle;padding:5px 2px}.attendance-table .employee-col{position:sticky;left:0;z-index:4;min-width:180px;width:180px;text-align:left}.attendance-table tbody td{padding:4px 2px;vertical-align:middle}.employee-cell{position:sticky;left:0;z-index:1;background:#fff;min-width:180px;width:180px}.employee-cell strong,.employee-cell small{display:block;overflow-wrap:anywhere}.employee-cell small{color:#66758a;font-size:10px;margin-top:2px}.day-col,.day-cell{min-width:48px;width:48px;text-align:center}.day-col span,.day-col small{display:block;line-height:1.2}.day-col span{font-weight:750;font-size:12px}.day-col small{font-size:10px;color:#68758a}.in-time,.out-time{display:block;font-size:10px;line-height:1.35}.in-time{color:#166534}.out-time{color:#1d4ed8}.no-punch{color:#a0a8b5}.search-box{max-width:250px}@media(max-width:768px){.attendance-scroll{max-height:65vh}.attendance-table .employee-col,.employee-cell{min-width:150px;width:150px}}