:root{font-family:Arial,Helvetica,sans-serif;color:#202822;background:#f3f5f4;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer}.app{max-width:1250px;margin:auto;padding:20px}.header{background:#17362c;color:#fff;border-radius:12px;padding:22px;display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.header h1{margin:5px 0;font-size:25px}.header p{margin:0;opacity:.75;font-size:13px}.eyebrow{font-size:10px;letter-spacing:2px;opacity:.75}.demo-badge{border:1px solid #7d9b90;border-radius:5px;padding:7px 10px;font-size:11px;white-space:nowrap}.toolbar,.section-heading{display:flex;justify-content:space-between;align-items:center;gap:10px}.toolbar{margin:18px 0}button{background:#fff;border:1px solid #d1d8d4;border-radius:6px;padding:9px 12px;color:#25362e}button:hover{border-color:#a51c20}.navigation{display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid #ccd3cf}.navigation button{background:transparent;border:0;border-bottom:3px solid transparent;border-radius:0;white-space:nowrap}.navigation button.active{border-bottom-color:#a8171d;font-weight:700;color:#a8171d}.section{background:#fff;padding:20px;margin-top:15px;border:1px solid #dce2de;border-radius:10px}.section h2{font-size:19px;margin:0 0 12px}.hint{font-size:12px;color:#718078;line-height:1.6}.table-scroll,.slip-scroll{overflow-x:auto}table{width:100%;border-collapse:collapse}.section table{min-width:790px}.section th,.section td{padding:10px;border:1px solid #dce2de;text-align:left}.section th{background:#f0f3f1}.section table input{min-width:115px;width:100%}.attendance-table th{background:#921719;color:#fff;text-align:center}.attendance-table td{text-align:center}.staff-name{text-align:left!important;font-weight:700;white-space:nowrap}.staff-name small,.attendance-table th small{display:block;margin-top:5px;font-size:10px;font-weight:400}.shift-buttons{display:flex;gap:3px;justify-content:center}.shift{min-width:25px;height:28px;padding:0;font-size:11px}.shift.full{background:#d8efdd;color:#17652b;border-color:#5ca76b;font-weight:700}.shift.half{background:#f9dddd;color:#aa1b20;border-color:#d79090;font-weight:700}.note-button{border:0;background:transparent;padding:5px;font-size:12px}.note-button.has-note{color:#d77d00;font-weight:700}.sunday{background:#f3f3f3;color:#aaa}.center{text-align:center!important}.strong{font-weight:700}.panel{background:#fff;border:1px solid #d4ddd7;padding:17px;border-radius:9px;margin-top:14px}.day-navigation{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin:12px 0}.day-navigation button{padding:8px 4px;font-size:11px}.day-navigation button.selected{border:2px solid #a8171d;font-weight:700}.event-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px;border-bottom:1px solid #e2e6e3}.event-row small{display:block;color:#718078;margin-top:4px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:15px 0}label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700}input,select{border:1px solid #cfd8d2;padding:9px;border-radius:6px;background:#fff;color:#222}.wide{grid-column:1 / -1}.primary{background:#a8171d;border-color:#a8171d;color:#fff;font-weight:700}.employee-picker{max-width:330px}.summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:16px 0}.metric{background:#f4f6f4;border:1px solid #e0e6e1;padding:13px;border-radius:8px}.metric span,.metric strong{display:block}.metric span{font-size:11px;color:#627069}.metric strong{margin-top:8px;font-size:18px}.total-panel{padding:18px;margin-top:15px;background:#17362c;color:#fff;border-radius:9px;display:flex;justify-content:space-between;align-items:center;gap:12px}.total-panel strong{font-size:23px}.payslip{min-width:740px;background:#fff;color:#000;font-family:Times New Roman,Times,serif;font-size:14px}.slip-title,.slip-date{text-align:center;font-weight:700;border:1px solid #333;border-bottom:none;padding:9px}.slip-title{font-size:28px}.slip-date{font-size:23px}.payslip table{table-layout:fixed;min-width:740px}.payslip td,.payslip th{border:1px solid #333!important;padding:8px 6px;vertical-align:middle;background:#fff!important;color:#000;overflow-wrap:anywhere}.payslip th{text-align:center}.payslip .small{font-size:12px;line-height:1.55}.payslip .tall{height:65px}.payslip .no-wrap{white-space:nowrap}.payslip .note-line{margin-bottom:6px}.ot-total{border-top:1px solid #333;margin-top:7px;padding-top:7px}.slip-footer{border:1px solid #333;border-top:none;padding:20px 8px;min-height:80px;font-weight:700;line-height:1.4}footer{text-align:center;color:#748078;font-size:11px;margin:23px 0}@media(max-width:700px){.app{padding:10px}.header{padding:15px}.header h1{font-size:19px}.section{padding:12px}.toolbar{flex-wrap:wrap;justify-content:center}.form-grid{grid-template-columns:1fr}.summary-grid{grid-template-columns:repeat(2,1fr)}.day-navigation{grid-template-columns:repeat(3,1fr)}}