.attendance-page{max-width:1040px;margin:auto;padding:22px}.attendance-page>header,.attendance-month,.attendance-card header{display:flex;justify-content:space-between;align-items:center;gap:12px}.attendance-page h1{margin:3px 0;color:#102d58}.attendance-page header span{color:#2573e8;font-size:10px;font-weight:800;letter-spacing:.1em}.attendance-page header button,.attendance-month button,.attendance-modal button{border:1px solid #216bd0;background:#fff;color:#185eb5;border-radius:10px;padding:9px 13px;font-weight:700}.attendance-users{display:flex;gap:8px;overflow:auto;padding:14px 0}.attendance-users button{white-space:nowrap;border:1px solid #d9e1ee;border-radius:20px;background:#fff;padding:8px 15px;font-weight:800;color:#54657d}.attendance-users .active{border-color:#ef4646;background:#fff0f0;color:#e63737}.attendance-card{background:#fff;border:1px solid #e1e8f2;border-radius:18px;padding:18px}.attendance-month h2{min-width:160px;text-align:center}.attendance-summary{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:16px 0}.attendance-summary div{padding:12px;border-radius:13px}.attendance-summary small{display:block;font-weight:800}.attendance-summary b{display:block;font-size:27px;margin-top:3px}.present{background:#e9f8eb;color:#278040}.absent{background:#fff0f0;color:#d93c3c}.holiday{background:#eaf6ff;color:#176cbd}.leave{background:#e8f8f7;color:#007f80}.pending{background:#fff5df;color:#e88705}.attendance-week,.attendance-calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}.attendance-week{margin-bottom:7px;text-align:center;color:#8190a5}.attendance-day{aspect-ratio:1;border:1px solid #e8edf4;border-radius:11px;background:#fff;color:#8793a5;display:grid;place-content:center;gap:2px}.attendance-day b{font-size:20px}.attendance-day.PRESENT{background:#ebf8ed;color:#348749}.attendance-day.ABSENT{background:#fff1f1;color:#df3d3d}.attendance-day.HOLIDAY{background:#e9f5ff;color:#1770be}.attendance-day.LEAVE{background:#e9f9f9;color:#038488}.attendance-legend{text-align:center;color:#71809a;margin:15px 0 0}.attendance-error{color:#c82d42}.attendance-modal{width:min(470px,calc(100vw - 32px));padding:24px}.attendance-modal h2{margin:0 0 14px}.attendance-modal label{display:grid;gap:4px;margin:8px 0}.attendance-time-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}.attendance-time-fields[hidden]{display:none}.attendance-modal input,.attendance-modal select,.attendance-modal textarea{padding:8px 9px;border:1px solid #d7e0ef;border-radius:8px}.attendance-modal textarea{min-height:58px}.attendance-modal footer{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}@media(max-width:700px){.attendance-page{padding:14px}.attendance-page>header{align-items:flex-start}.attendance-page header button{font-size:0;padding:10px}.attendance-page header button:after{content:'Holiday';font-size:12px}.attendance-card{padding:13px}.attendance-summary{grid-template-columns:repeat(2,1fr)}.attendance-summary .pending{grid-column:span 2}.attendance-calendar{gap:5px}.attendance-day{border-radius:9px}.attendance-day b{font-size:17px}.attendance-modal{padding:19px}.attendance-time-fields{grid-template-columns:1fr}}