body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.monthly-attendance{padding:20px;background:#f5f5f5;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}.filters{display:flex;gap:12px;margin-bottom:15px;flex-wrap:wrap;align-items:center;background:#fff;padding:15px;border-radius:10px;box-shadow:0 2px 5px #0000000d}.filters select,.filters input{padding:8px 12px;border-radius:6px;border:1px solid #ddd;min-width:140px;background-color:#fff;color:#333;font-size:14px}.fetch-btn{padding:8px 24px;background:#ad3a3c;color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:600;margin-left:auto;transition:background .2s}.legend-container.top-legend{margin-top:0;margin-bottom:15px;background-color:#fff;padding:12px 20px;border-radius:8px;box-shadow:0 1px 3px #0000000d;display:flex;align-items:center;flex-wrap:wrap;gap:25px;font-size:13px;color:#444}.legend-group{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.legend-title{font-weight:700;color:#222;margin-right:5px;text-transform:uppercase;font-size:11px;letter-spacing:.5px}.legend-item{display:flex;align-items:center;gap:6px}.legend-divider{width:1px;height:18px;background-color:#ddd;display:none}.pct-box{width:14px;height:14px;border-radius:50%;display:inline-block;box-sizing:border-box}.pct-box.danger{background-color:#f8d7da;border:1px solid #f5c6cb}.pct-box.warning{background-color:#fff3cd;border:1px solid #ffeeba}.pct-box.success{background-color:#d4edda;border:1px solid #c3e6cb}.attendance-row{display:grid;grid-template-columns:180px 1fr 100px 100px 100px;align-items:center;gap:10px;background:#fff;padding:10px 15px;margin-bottom:8px;border-radius:8px;box-shadow:0 1px 3px #00000014;min-height:50px}.attendance-row.header{background:#e9ecef;font-weight:700;color:#495057;box-shadow:none;border:1px solid #dee2e6;position:sticky;top:0;z-index:10}.student-name{font-size:14px;color:#212529;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}.attendance-days{display:flex;flex-wrap:nowrap;gap:4px;overflow-x:auto;padding:5px 0;scrollbar-width:thin}.attendance-days::-webkit-scrollbar{height:6px}.attendance-days::-webkit-scrollbar-thumb{background-color:#ccc;border-radius:4px}.box-wrapper{display:flex;justify-content:center;width:26px;flex-shrink:0}.day-box{width:22px;height:22px;border-radius:4px;display:block;cursor:help;transition:transform .1s;box-sizing:border-box}.day-box:hover{transform:scale(1.1)}.day-box.present{background-color:#28a745}.day-box.absent{background-color:#dc3545}.day-box.late{background-color:#ffc107}.day-box.unmarked{background-color:#f1f3f5;border:1px dashed #adb5bd}.date-header-cell{width:26px;flex-shrink:0;text-align:center;display:flex;flex-direction:column;justify-content:center;font-size:12px;color:#555}.date-num{font-weight:700}.attendance-summary{text-align:center;font-size:13px;line-height:1.2;color:#333}.attendance-summary small{display:block;font-size:11px;color:#666;margin-top:2px}.attendance-summary.total-col{font-weight:600;padding:5px;border-radius:4px}.attendance-row:not(.header):hover{background-color:#f8f9fa;box-shadow:0 2px 8px #0000001a}@media(max-width:900px){.attendance-row{grid-template-columns:140px 1fr 80px 70px 70px;font-size:12px}.filters{flex-direction:column;align-items:stretch}.fetch-btn{margin-left:0}}@media(min-width:768px){.legend-divider{display:block}}.fetch-btn{padding:8px 24px;background:#ad3a3c;color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:600;transition:background .2s}.fetch-btn:hover{background:#8d2e30}.csv-btn{padding:8px 20px;background:#27ae60;color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:600;transition:background .2s}.csv-btn:hover{background:#219150}.csv-btn:disabled{background:#ccc;cursor:not-allowed}.search-container{margin-bottom:15px}.search-input{width:100%;padding:12px 15px;border:1px solid #ddd;border-radius:8px;font-size:15px;box-shadow:0 2px 4px #00000008;outline:none;transition:border .2s}.search-input:focus{border-color:#ad3a3c;box-shadow:0 0 0 3px #ad3a3c1a}.attendance-row{display:grid;grid-template-columns:180px 1fr 100px 100px 100px;align-items:center;gap:10px;background:#fff;padding:10px 15px;margin-bottom:8px;border-radius:8px;box-shadow:0 1px 3px #00000014;min-height:50px;position:relative}.student-name{font-size:14px;color:#212529;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;position:sticky;left:0;background-color:inherit}.attendance-days{display:flex;flex-wrap:nowrap;gap:4px;overflow-x:auto;padding:5px 0;max-width:100%}.attendance-days::-webkit-scrollbar{height:8px}.attendance-days::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.attendance-days::-webkit-scrollbar-thumb{background-color:#bbb;border-radius:4px;border:1px solid #f1f1f1}.attendance-days::-webkit-scrollbar-thumb:hover{background-color:#888}.attendance-row.header{background:#e9ecef;font-weight:700;color:#495057;z-index:5}.attendance-row.header .student-name{background-color:#e9ecef}*{margin:0;padding:0;box-sizing:border-box}body{width:100%}.container{padding-bottom:50px}.operator{display:flex;background-color:#f0f0f0;min-height:10vh;justify-content:center;align-items:center;margin:20px;padding:10px}.operator label{font-weight:700;margin-right:10px}.student-btn,.class-btn{font-weight:600}.student-btn{margin-left:100px}.class-btn{margin-left:40px}.main{display:flex;width:99%;margin-left:2vw;margin-top:5vh;gap:2vw}.report{width:95%;background-color:#f0f0f0;padding:20px;border-radius:8px;min-height:50vh}.report-table{width:100%;border-spacing:0 10px}.report-table th{text-align:left;padding:10px 20px;font-size:1.2rem}.container .details{width:30%;margin-right:3vw;min-height:50vh;background-color:#f0f0f0;padding:20px;border-radius:8px}.details h3{margin-bottom:15px;border-bottom:1px solid #000;padding-bottom:5px}@media(max-width:900px){.main{flex-direction:column;margin-left:5vw;width:90vw;gap:20px}.report,.container .details{width:100%;min-height:auto;margin-left:0}.operator{width:90vw;flex-direction:column;gap:10px}.student-btn,.class-btn{margin-left:0;width:100%}}.attendance-page{font-family:Arial,Helvetica,sans-serif;padding:0;margin:40px;position:relative}.topbar{background:#a33232;color:#fff;padding:22px 40px;font-weight:700;border-radius:4px;width:100%;box-sizing:border-box}.attendance-wrapper{display:flex;gap:20px;margin-top:18px}.left-panel{flex:1 1 70%;background:#e6e6e6;padding:12px;height:max-content;border-radius:6px}.title{display:flex;justify-content:center;align-items:center;background:#aeaeae;color:#232323;width:98%;height:40vh;margin:auto;font-weight:600}.table-wrapper{padding:6px}.stu-table{width:100%;border-collapse:collapse}.stu-table th{text-align:left;padding:8px;font-size:.95rem}.stu-table td{padding:10px}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(94px,max-content));justify-content:center;justify-items:start}.row{cursor:pointer;display:flex;flex-direction:column;width:10%;font-size:medium;border:1px solid black}.roll-class{font-size:smaller}.row.present td{background:#5bd46a;color:#04320a}.row.absent td{background:#e25959;color:#fff}.icon{display:flex;gap:10px;margin-bottom:10px}.icon div{border:1px solid black;padding:5px 20px;margin-bottom:10px}.icon .present{background-color:#5bd46a;color:#04320a}.icon .absent{background-color:#e25959;color:#fff}.icon .late{background:#e4952c}.add-form{margin-top:10px;display:flex;gap:8px}.add-form input{flex:1;padding:8px}.add-form button{padding:8px 12px}.right-panel{width:300px;background:#f0f0f0;padding:12px;border-radius:6px;box-sizing:border-box}.right-panel label,.right-panel h4{display:block;margin-bottom:8px}.right-panel select{width:100%;padding:8px}.absentees{margin-top:12px;display:flex;flex-wrap:wrap}.absentees h4{width:100%}.absent-name{width:40%}.absentees .none{color:#666;font-size:.95rem}.submit-btn{width:100%;padding:8px;margin:20px 0;background:#0b4daf;color:#fff;border:none;border-radius:18px;font-weight:600;cursor:pointer}.submit-btn:disabled{background:#6b8bb8;cursor:not-allowed;opacity:.6}.row.present{background:#ecfeff}.row.late{background:#e4952c}.row.absent{background:#fee2e2}.late-box{background:#fff;border:1px solid #ccc;border-radius:8px;padding:12px;margin-top:12px;max-height:202px;overflow-y:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:10px 14px;justify-content:center}.late-box h4{grid-column:1 / -1}.late-name{display:flex;justify-content:center;align-items:center;padding:4px 10px;border:1px solid #ccc;border-radius:6px;font-size:16px;font-weight:700}.error-message{background:#fee2e2;border:1px solid #e25959;color:#991b1b;padding:12px;border-radius:6px;margin-bottom:12px;font-size:14px}.loading-overlay{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#000000b3;color:#fff;padding:20px 40px;border-radius:8px;font-size:18px;font-weight:600;z-index:1000}.right-panel .input{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;font-size:14px;box-sizing:border-box}.right-panel .input:focus{outline:none;border-color:#0b4daf}.right-panel .label{display:block;margin-bottom:15px;font-weight:600;color:#333}.popup{padding:24px;display:flex;flex-direction:column;gap:16px}.popup .input{margin:10px;width:100%;padding:15px;border:1px solid #ccc;border-radius:4px;font-size:14px;box-sizing:border-box}.popup .input:focus{outline:none;border-color:#0b4daf}.popup .label{display:block;margin-bottom:5px;font-weight:600;color:#333}@media(max-width:1024px){.attendance-page{margin:20px}.row{width:12%}}@media(max-width:768px){.attendance-page{margin:10px}.topbar{padding:16px 20px;font-size:16px}.attendance-wrapper{flex-direction:column-reverse;margin:auto;gap:15px}.left-panel{flex:1;width:100%}.right-panel{width:100%;order:-1}.row{width:18%;min-width:60px}.icon{flex-wrap:wrap;gap:5px}.icon div{padding:4px 12px;font-size:12px}.absentees,.late-box{gap:8px}}@media(max-width:480px){.attendance-page{margin:5px}.topbar{padding:12px 15px;font-size:14px}.attendance-wrapper{gap:10px;margin-top:10px}.left-panel,.right-panel{padding:10px;border-radius:4px}.row{width:23%;min-width:55px;font-size:small}.row td{padding:6px}.roll-class{font-size:10px}.row td span:last-child{font-size:x-large!important}.icon{gap:4px;margin-bottom:8px}.icon div{padding:3px 8px;font-size:11px;flex:1;text-align:center}.right-panel .label{font-size:14px;margin-bottom:12px}.right-panel select,.right-panel .input{padding:10px;font-size:14px}.submit-btn{padding:12px;font-size:16px;margin:15px 0}.absentees,.late-box{padding:10px}.absentees h4,.late-box h4{font-size:14px;margin-bottom:8px}.absent-name,.late-name{font-size:13px;padding:4px;margin:0}.error-message{padding:10px;font-size:12px}.loading-overlay{padding:15px 30px;font-size:16px}}@media(max-width:360px){.attendance-page{margin:3px}.row{width:30%;min-width:50px}.row td span:last-child{font-size:large!important}.icon div{padding:2px 6px;font-size:10px}}@media(max-width:768px)and (orientation:landscape){.attendance-wrapper{flex-direction:row}.left-panel{flex:1 1 60%}.right-panel{flex:1 1 40%;order:0}.row{width:14%}}@media screen and (max-width:550px){header{display:flex;flex-direction:column;align-items:center}nav{display:flex;flex-direction:column;align-items:center}}label{font-weight:100;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}input{padding:1vh;border-radius:5vh}.login-container{width:60vw}.login-container form{width:90%}@media screen and (max-width:600px){.login-container{width:90vw}.login-container form{width:100%}}.popup-overlay{position:fixed;inset:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:9999}.popup-box{background:#fff;width:400px;overflow:hidden}.popup-header{background:#ad3a3c;color:#fff;padding:12px 16px;display:flex;justify-content:space-between;font-weight:700}.boxy{height:45px;border-radius:30px}.popup-header button{background:none;border:none;color:#fff;font-size:20px;cursor:pointer}.popup-body{padding:20px;text-align:center}.popup-btn{margin-top:15px;padding:10px 30px;background:#ad3a3c;color:#fff;border:none;border-radius:px;cursor:pointer}.success-overlay{position:fixed;inset:0;background:#00000073;display:flex;align-items:center;justify-content:center;z-index:9999}.success-box{background:#fff;padding:40px 60px;border-radius:16px;text-align:center}.success-box p{margin-top:15px;font-size:18px;font-weight:700;color:#2e7d32}.checkmark{width:80px;height:80px;stroke:#113e13;stroke-width:4;stroke-miterlimit:10;animation:scale .1s ease-in-out .2s both}.checkmark-circle{stroke-dasharray:166;stroke-dashoffset:166;animation:stroke .5s cubic-bezier(.65,0,.45,1) forwards}.checkmark-check{stroke-dasharray:48;stroke-dashoffset:48;animation:stroke .25s cubic-bezier(.65,0,.45,1) .6s forwards}@keyframes stroke{to{stroke-dashoffset:0}}@keyframes scale{0%,to{transform:none}50%{transform:scale(1.1)}}