*{box-sizing:border-box;margin:0;padding:0}:root{--primary:#003b70;--primary-light:#0072bc;--primary-hover:#005b98;--service:#28755c;--service-light:#eaf6f1;--background:#f4f7fb;--white:#fff;--text-main:#1e293b;--text-secondary:#64748b;--text-light:#94a3b8;--border:#e2e8f0;--border-light:#edf2f7}body{background-color:var(--background);min-height:100vh;color:var(--text-main);font-family:Arial,Helvetica,sans-serif}.header{color:#fff;background:linear-gradient(135deg,#003b70,#005596);padding:50px 7% 0;box-shadow:0 4px 15px #0000001f}.header-main{max-width:1400px;margin:0 auto 35px}.header-main h1{letter-spacing:-.5px;margin-bottom:8px;font-size:2.5rem;font-weight:700}.header-main p{color:#fffc;font-size:1rem}.select-directory-tab{gap:8px;max-width:1400px;margin:auto;display:flex}.directory-tab-option{color:#fffc;border-radius:8px 8px 0 0;padding:15px 22px;font-size:.95rem;font-weight:600;text-decoration:none;transition:background-color .2s,color .2s}.directory-tab-option:hover{color:#fff;background-color:#ffffff1f}.directory-tab-option.active{color:var(--primary);background-color:var(--background)}.main-directory{width:92%;max-width:1400px;margin:42px auto 80px}.attendance-page-heading{justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:30px;display:flex}.page-eyebrow{color:var(--primary-light);letter-spacing:1px;text-transform:uppercase;margin-bottom:7px;font-size:.78rem;font-weight:700;display:block}.attendance-page-heading h2{color:var(--text-main);margin-bottom:8px;font-size:1.8rem}.attendance-page-heading p{max-width:650px;color:var(--text-secondary);font-size:.95rem;line-height:1.5}.add-event-button{background-color:var(--primary-light);color:#fff;border-radius:9px;flex-shrink:0;justify-content:center;align-items:center;min-height:44px;padding:0 19px;font-size:.9rem;font-weight:600;text-decoration:none;transition:background-color .2s,transform .15s,box-shadow .2s;display:inline-flex;box-shadow:0 4px 12px #0072bc2e}.add-event-button:hover{background-color:var(--primary-hover);transform:translateY(-1px);box-shadow:0 7px 16px #0072bc38}.attendance-toolbar{border-bottom:1px solid var(--border);margin-bottom:30px;padding-bottom:24px}.search{align-items:center;gap:10px;width:100%;max-width:600px;display:flex}.search-bar{height:46px;color:var(--text-main);background-color:#fff;border:1px solid #d5dde7;border-radius:9px;outline:none;flex:1;padding:0 16px;font-size:.95rem;transition:border-color .2s,box-shadow .2s}.search-bar::placeholder{color:#9ca3af}.search-bar:focus{border-color:var(--primary-light);box-shadow:0 0 0 4px #0072bc17}.enter-search{color:#334155;cursor:pointer;background-color:#e8eef4;border:none;border-radius:9px;height:46px;padding:0 20px;font-size:.9rem;font-weight:600;transition:background-color .2s}.enter-search:hover{background-color:#dae3ec}.attendance-event-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:28px;display:grid}.event-section{border:1px solid var(--border);background-color:#fff;border-radius:14px;overflow:hidden;box-shadow:0 5px 20px #0f172a0d}.event-section-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:15px;min-height:105px;padding:21px 22px;display:flex}.event-heading-row{align-items:center;gap:10px;margin-bottom:5px;display:flex}.event-heading-row h3{color:var(--text-main);font-size:1.15rem}.event-section-header p{color:var(--text-secondary);margin-left:38px;font-size:.85rem;line-height:1.4}.event-heading-icon{border-radius:7px;justify-content:center;align-items:center;width:28px;height:28px;font-size:.75rem;font-weight:700;display:flex}.meeting-icon{color:#075985;background-color:#e0f2fe}.service-icon{color:#166534;background-color:var(--service-light)}.event-count{color:var(--text-secondary);background-color:#f1f5f9;border-radius:50px;flex-shrink:0;padding:6px 10px;font-size:.75rem;font-weight:600}.event-list{flex-direction:column;display:flex}.event-row{border-bottom:1px solid var(--border-light);background-color:#fff;grid-template-columns:54px minmax(0,1fr) auto;align-items:center;gap:15px;min-height:110px;padding:17px 20px;transition:background-color .2s;display:grid;position:relative}.event-row:last-child{border-bottom:none}.event-row:hover{background-color:#fbfdff}.event-date{background-color:#eef6fc;border:1px solid #d8ebf8;border-radius:9px;flex-direction:column;justify-content:center;align-items:center;width:52px;height:58px;display:flex}.service-date{background-color:#eef8f4;border-color:#d9eee5}.event-month{color:var(--primary-light);letter-spacing:.6px;margin-bottom:2px;font-size:.62rem;font-weight:800}.service-date .event-month{color:var(--service)}.event-day{color:#1e293b;font-size:1.25rem;font-weight:700}.event-main-info{min-width:0}.event-name{color:#172033;margin-bottom:6px;font-size:.96rem;font-weight:700;line-height:1.3}.event-meta{color:var(--text-secondary);flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:6px;font-size:.79rem;display:flex}.meta-divider{color:#cbd5e1}.event-attendance{color:var(--text-light);font-size:.76rem;font-weight:500}.event-actions{flex-direction:column;align-items:flex-end;gap:9px;display:flex}.event-type-badge{border-radius:50px;align-items:center;padding:4px 8px;font-size:.68rem;font-weight:700;display:inline-flex}.event-type-badge.meeting{color:#0369a1;background-color:#e8f4fc}.event-type-badge.service{color:#28755c;background-color:#e9f6f0}.view-event1-button{color:#334155;background-color:#fff;border:1px solid #d7e0e8;border-radius:7px;justify-content:center;align-items:center;min-width:88px;min-height:34px;padding:0 12px;font-size:.76rem;font-weight:600;text-decoration:none;transition:background-color .2s,border-color .2s,color .2s;display:inline-flex}.view-event1-button:hover{color:var(--primary-light);background-color:#f5faff;border-color:#b7d9ed}.modal-overlay{z-index:1000;opacity:0;visibility:hidden;pointer-events:none;justify-content:center;align-items:center;padding:25px;transition:opacity .2s,visibility .2s;display:flex;position:fixed;inset:0}.modal-overlay:target{opacity:1;visibility:visible;pointer-events:auto}.modal-background{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background-color:#0f172a9e;position:absolute;inset:0}.modal-content{z-index:2;background-color:#fff;border-radius:14px;width:92%;max-width:580px;max-height:90vh;transition:transform .2s;position:relative;overflow-y:auto;transform:translateY(10px);box-shadow:0 25px 70px #0000004d}.modal-overlay:target .modal-content{transform:translateY(0)}.modal-header{color:#fff;background:linear-gradient(135deg,#003b70,#005596);justify-content:space-between;align-items:flex-start;gap:25px;padding:22px 25px;display:flex}.service-modal-header{background:linear-gradient(135deg,#1e664f,#328066)}.modal-header h2{font-size:1.35rem;line-height:1.3}.modal-event-type{color:#ffffffb3;letter-spacing:.8px;text-transform:uppercase;margin-bottom:5px;font-size:.68rem;font-weight:700;display:block}.modal-close{color:#fff;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;font-size:1.7rem;font-weight:300;text-decoration:none;transition:background-color .2s;display:flex}.modal-close:hover{background-color:#ffffff21}.modal-body{padding:25px}.event-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:25px;display:grid}.event-detail{border:1px solid var(--border);background-color:#f8fafc;border-radius:8px;flex-direction:column;gap:4px;padding:13px 14px;display:flex}.detail-label{color:var(--text-light);letter-spacing:.5px;text-transform:uppercase;font-size:.67rem;font-weight:700}.detail-value{color:#334155;font-size:.87rem;font-weight:600}.event-description-section{margin-bottom:24px}.event-description-section h3{color:var(--text-main);margin-bottom:8px;font-size:.95rem}.event-description-section p{color:var(--text-secondary);font-size:.88rem;line-height:1.65}.event-summary-box{border:1px solid var(--border);background-color:#f8fafc;border-radius:9px;grid-template-columns:repeat(3,1fr);margin-bottom:24px;display:grid;overflow:hidden}.event-summary-box>div{border-right:1px solid var(--border);flex-direction:column;justify-content:center;align-items:center;gap:3px;padding:14px;display:flex}.event-summary-box>div:last-child{border-right:none}.summary-number{color:#172033;font-size:1.15rem;font-weight:700}.summary-label{color:var(--text-secondary);font-size:.69rem;font-weight:600}.add-event-form{flex-direction:column;gap:18px;display:flex}.form-row{grid-template-columns:repeat(2,1fr);gap:14px;display:grid}.form-group{flex-direction:column;gap:7px;display:flex}.form-group label{color:#334155;font-size:.82rem;font-weight:600}.form-group input,.form-group select,.form-group textarea{width:100%;color:var(--text-main);background-color:#fff;border:1px solid #d5dde7;border-radius:8px;outline:none;padding:11px 13px;font-family:inherit;font-size:.9rem;transition:border-color .2s,box-shadow .2s}.form-group input,.form-group select{height:43px}.form-group textarea{resize:vertical;min-height:95px}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--primary-light);box-shadow:0 0 0 3px #0072bc17}.modal-actions{border-top:1px solid var(--border-light);justify-content:flex-end;gap:10px;padding-top:18px;display:flex}.btn-close,.btn-cancel,.btn-submit{cursor:pointer;border-radius:8px;justify-content:center;align-items:center;min-height:41px;padding:0 18px;font-size:.85rem;font-weight:600;text-decoration:none;transition:background-color .2s,transform .15s;display:inline-flex}.btn-close,.btn-cancel{border:1px solid var(--border);color:#475569;background-color:#fff}.btn-close:hover,.btn-cancel:hover{background-color:#f8fafc}.btn-submit{background-color:var(--primary-light);color:#fff;border:none}.btn-submit:hover{background-color:var(--primary-hover);transform:translateY(-1px)}@media (width<=1050px){.attendance-event-grid{grid-template-columns:1fr}}@media (width<=700px){.header{padding:35px 5% 0}.header-main h1{font-size:2rem}.select-directory-tab{white-space:nowrap;overflow-x:auto}.main-directory{width:92%;margin-top:30px}.attendance-page-heading{flex-direction:column;align-items:stretch}.add-event-button{width:fit-content}.search{max-width:none}.event-detail-grid{grid-template-columns:1fr}}@media (width<=520px){.header-main h1{font-size:1.7rem}.directory-tab-option{padding:13px 15px;font-size:.82rem}.attendance-page-heading h2{font-size:1.5rem}.search{flex-direction:column;align-items:stretch}.enter-search{width:100%}.event-section-header{align-items:flex-start}.event-section-header p{margin-top:8px;margin-left:0}.event-row{grid-template-columns:50px minmax(0,1fr);align-items:start}.event-actions{flex-direction:row;grid-column:1/-1;justify-content:flex-end;align-items:center}.event-summary-box{grid-template-columns:1fr}.event-summary-box>div{border-right:none;border-bottom:1px solid var(--border)}.event-summary-box>div:last-child{border-bottom:none}.form-row{grid-template-columns:1fr}.modal-overlay{padding:12px}.modal-content{width:100%}.modal-header,.modal-body{padding:20px}}.modal-overlay.active{opacity:1;visibility:visible;pointer-events:auto}.modal-overlay.active .modal-content{transform:translateY(0)}.event-button-group{align-items:center;gap:8px;display:flex}.view-event1-button{color:#334155;cursor:pointer;background-color:#fff;border:1px solid #d7e0e8;border-radius:7px;min-height:34px;padding:0 12px;font-size:.76rem;font-weight:600;transition:background-color .2s,border-color .2s,color .2s,transform .15s}.view-event1-button:hover{color:#0072bc;background-color:#f5faff;border-color:#b7d9ed;transform:translateY(-1px)}.delete-event-button{cursor:pointer;background-color:#fff1f2;border:1px solid #fecaca;border-radius:7px;justify-content:center;align-items:center;width:34px;height:34px;padding:0;font-size:.95rem;transition:background-color .2s,border-color .2s,transform .15s;display:flex}.delete-event-button:hover{background-color:#ffe4e6;border-color:#fca5a5;transform:translateY(-1px)}.delete-event-button:active{transform:translateY(0)}.delete-event-modal-content{text-align:center;background-color:#fff;border-radius:14px;width:90%;max-width:420px;padding:32px 28px;box-shadow:0 20px 60px #0f172a40}.delete-event-icon{background-color:#fff1f2;border-radius:50%;justify-content:center;align-items:center;width:58px;height:58px;margin:0 auto 18px;font-size:1.6rem;display:flex}.delete-event-modal-content h2{color:#1e293b;margin-bottom:10px;font-size:1.35rem;font-weight:700}.delete-event-message{color:#64748b;margin-bottom:25px;font-size:.9rem;line-height:1.55}.delete-event-actions{gap:10px;display:flex}.delete-modal-cancel,.delete-modal-confirm{cursor:pointer;border-radius:8px;flex:1;min-height:42px;font-size:.88rem;font-weight:600;transition:background-color .2s,border-color .2s,transform .15s}.delete-modal-cancel{color:#475569;background-color:#fff;border:1px solid #dbe2ea}.delete-modal-cancel:hover{background-color:#f8fafc;border-color:#cbd5e1}.delete-modal-confirm{color:#fff;background-color:#dc2626;border:1px solid #dc2626}.delete-modal-confirm:hover{background-color:#b91c1c;border-color:#b91c1c;transform:translateY(-1px)}.delete-modal-confirm:active{transform:translateY(0)}.event-attendee-list{background-color:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;flex-direction:column;gap:8px;max-height:250px;padding:8px;display:flex;overflow-y:auto}.event-student-option{background-color:#fff;border:1px solid #e2e8f0;border-radius:7px;justify-content:space-between;align-items:center;gap:15px;padding:10px 12px;display:flex}.event-student-main{align-items:center;gap:10px;display:flex}.service-hours-container label{color:#64748b;font-size:.75rem}.attendee-header{justify-content:space-between;align-items:center;display:flex}#selected-attendee-count{color:#64748b;font-size:.78rem;font-weight:600}.attendee-search{border:1px solid #d6dde7;border-radius:8px;outline:none;width:100%;height:40px;padding:0 12px;font-size:.88rem}.attendee-search:focus{border-color:#0072bc;box-shadow:0 0 0 3px #0072bc14}.attendee-actions{gap:7px;display:flex}.attendee-actions button{color:#475569;cursor:pointer;background:#fff;border:1px solid #dbe2ea;border-radius:6px;padding:6px 11px;font-size:.75rem;font-weight:600}.attendee-actions button:hover{background:#f8fafc}.event-attendee-list{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;flex-direction:column;gap:7px;max-height:250px;padding:7px;display:flex;overflow-y:auto}.event-student-option{background:#fff;border:1px solid #e2e8f0;border-radius:7px;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;display:flex}.event-student-option:hover{background:#f8fbfd}.event-student-option.selected{background:#f4faff;border-color:#94c5e4}.event-student-main{cursor:pointer;flex:1;align-items:center;gap:10px;display:flex}.event-student-checkbox{cursor:pointer;width:18px;height:18px}.event-student-name{color:#1e293b;font-size:.87rem;font-weight:600}.event-student-id{color:#94a3b8;margin-top:2px;font-size:.72rem}.service-hours-container{align-items:center;gap:5px;display:none}.event-student-option.selected.service-mode .service-hours-container{display:flex}.service-hours-container span{color:#64748b;font-size:.72rem}.service-hours-input{border:1px solid #cbd5e1;border-radius:6px;width:65px;height:32px;padding:0 7px;font-size:.8rem}