@keyframes react-loading-skeleton{to{transform:translate(100%)}}.react-loading-skeleton{--base-color: #ebebeb;--highlight-color: #f5f5f5;--animation-duration: 1.5s;--animation-direction: normal;--pseudo-element-display: block;background-color:var(--base-color);width:100%;border-radius:.25rem;display:inline-flex;line-height:1;position:relative;-webkit-user-select:none;user-select:none;overflow:hidden}.react-loading-skeleton:after{content:" ";display:var(--pseudo-element-display);position:absolute;top:0;left:0;right:0;height:100%;background-repeat:no-repeat;background-image:var( --custom-highlight-background, linear-gradient( 90deg, var(--base-color) 0%, var(--highlight-color) 50%, var(--base-color) 100% ) );transform:translate(-100%);animation-name:react-loading-skeleton;animation-direction:var(--animation-direction);animation-duration:var(--animation-duration);animation-timing-function:ease-in-out;animation-iteration-count:infinite}@media (prefers-reduced-motion){.react-loading-skeleton{--pseudo-element-display: none}}body,html{margin:0;padding:0;font-family:system-ui,sans-serif;background:#f9fafb;color:#1f2937;height:100%;width:100%}nav a{padding:10px 16px;text-decoration:none;color:#878585;font-weight:500}nav a.active{border-bottom:3px solid #2c6bed;color:#2c6bed}.app{display:flex;flex-direction:column;min-height:100vh}header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:12px 16px;background:linear-gradient(90deg,#017d93,#015d6e,#014a57);color:#fff;gap:10px}header img{height:36px}header h1{font-size:18px;margin:0;flex:1;text-align:center}header .user-info{display:flex;align-items:center;gap:8px;font-size:14px;flex-shrink:0}@media (max-width: 700px){header{flex-direction:column;align-items:flex-start;text-align:left}header h1{text-align:left;font-size:16px}header .user-info{width:100%;justify-content:space-between}}nav{display:flex;gap:8px;padding:8px 24px;border-bottom:1px solid #e5e7eb;background:#fff}nav button{background:#e5e7eb;border:none;border-radius:6px;padding:6px 12px;cursor:pointer;font-weight:500;transition:background .2s}nav button.active{background:#004c59;color:#fff}.login-screen{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;text-align:center;background:#f9fafb;padding:24px}.login-screen img{max-width:200px;margin-bottom:24px}.login-screen h1{font-size:26px;margin-bottom:8px;color:#004c59}.login-screen p{font-size:16px;margin-bottom:24px;color:#374151}.login-btn{background:#004c59;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:700;cursor:pointer;transition:background .2s}.login-btn:hover{background:#003540}.logout-btn{background:#ee984f;border:none;border-radius:6px;padding:6px 12px;font-weight:700;cursor:pointer;color:#fff;transition:background .2s}.logout-btn:hover{background:#d3752c}.main-container-teacher{height:calc(100vh - 120px);flex:1;display:grid;gap:20px;padding:20px;background:#f9fafb}.main-container-teacher.two-columns{grid-template-columns:minmax(220px,260px) 1fr}.main-container-teacher.four-columns{grid-template-columns:minmax(220px,260px) 1fr minmax(220px,260px) minmax(220px,260px)}.main-container-admin{flex:1;display:grid;grid-template-columns:minmax(220px,260px) 1fr minmax(220px,260px);gap:20px;padding:20px;background:#f9fafb;height:calc(100vh - 120px)}.card{background:#fff;border-radius:12px;padding:16px;box-shadow:0 2px 6px #00000014;border:1px solid #e5e7eb;overflow-y:auto}.card h2{margin-top:0;font-size:18px;color:#004c59;border-bottom:1px solid #e5e7eb;padding-bottom:8px;margin-bottom:12px}.card button{display:block;text-align:left;padding:10px 12px;margin-bottom:6px;border:none;border-radius:8px;background:#f3f4f6;cursor:pointer;font-weight:500;font-size:14px;transition:background .2s}.course-list button{display:block;width:100%;text-align:left;padding:10px 12px;margin-bottom:6px;border:none;border-radius:8px;background:#f3f4f6;cursor:pointer;font-weight:500;font-size:14px;transition:background .2s}.course-list button:hover{background:#e5e7eb}.course-list button.active,.button.active,.course-list li.active{background:#004c59;color:#fff}.present-list.two-columns{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.column{display:flex;flex-direction:column;gap:.5rem}.present-list,.absent-list{display:flex;flex-direction:column;gap:8px}.student-chip{background:#e5e7eb;border-radius:20px;padding:6px 12px;font-size:14px;font-weight:500;display:inline-block}.student-chip.present{background:#d1fae5;color:#065f46}.student-chip.absent{background:#fee2e2;color:#991b1b}.modal{background:#fff;border-radius:12px;padding:24px;width:420px;max-width:90%;box-shadow:0 6px 18px #00000026;animation:fadeIn .2s ease}.modal h2{margin:0 0 12px;font-size:22px;color:#004c59}.modal p{margin-bottom:16px;color:#374151}.choice-group{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}.choice-group label{display:flex;align-items:center;gap:10px;font-size:16px;cursor:pointer}.choice-group input[type=radio]{accent-color:#004c59}.modal textarea{width:100%;min-height:70px;padding:8px;border:1px solid #d1d5db;border-radius:8px;resize:vertical;font-size:14px;margin-bottom:16px}.modal-actions{display:flex;justify-content:flex-end;gap:10px}.btn.confirm{background:#004c59;color:#fff;border:none;padding:10px 18px;border-radius:8px;font-weight:600;cursor:pointer;transition:background .2s}.btn.confirm:hover{background:#003540}.btn.cancel{background:#f3f4f6;color:#374151;border:none;padding:10px 18px;border-radius:8px;font-weight:500;cursor:pointer;transition:background .2s}.btn.cancel:hover{background:#e5e7eb}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}th,td{border-bottom:1px solid #ddd;padding:6px 8px;text-align:left}@media (max-width: 1200px){.main-container-teacher{grid-template-columns:1fr 1fr;grid-template-rows:auto auto}}@media (max-width: 700px){.main-container-teacher{grid-template-columns:1fr;grid-auto-rows:auto;padding:12px}.main-container-teacher>.card{width:100%;height:auto;margin-bottom:12px}}.present-list,.absent-list,.noresponse-list{display:flex;flex-wrap:wrap;gap:8px}.student-chip{display:inline-flex;flex-shrink:0}@media (max-width: 1200px){.main-container-admin{grid-template-columns:1fr 1fr;grid-template-rows:auto auto}}@media (max-width: 700px){.main-container-admin{grid-template-columns:1fr;grid-auto-rows:auto;padding:12px}.main-container-admin>.card{width:100%;margin-bottom:12px}}.main-container-admin table{display:block;overflow-x:auto;white-space:nowrap;width:100%}.main-container-admin th,.main-container-admin td{min-width:120px}@media (max-width: 768px){.main-container-teacher{grid-template-columns:1fr!important;gap:16px}.main-container-teacher>.card{width:100%!important;min-width:0!important}}@media (max-width: 768px){.main-container-admin{grid-template-columns:1fr!important;gap:16px}.main-container-admin>.card{width:100%!important;min-width:0!important}}@media (min-width: 769px) and (max-width: 1024px){.main-container-teacher,.main-container-admin{grid-template-columns:1fr 1fr!important;gap:16px}}*,*:before,*:after{box-sizing:border-box}body,html{overflow-x:hidden}.card{max-width:100%}@media (max-width: 700px){.main-container-teacher,.main-container-admin{padding:12px;gap:12px}.main-container-teacher>.card,.main-container-admin>.card{width:100%;margin:0 auto}}.main-container-admin table{width:100%;border-collapse:collapse}@media (max-width: 700px){.main-container-admin table{display:block;overflow-x:auto;white-space:nowrap}.main-container-admin thead,.main-container-admin tbody{display:table;width:100%}}.vakken-container{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:20px;height:calc(100vh - 110px);box-sizing:border-box;background:#f9fafb}.vakken-container .card.scrollable{display:flex;flex-direction:column;overflow-y:auto;padding:16px;max-height:100%}.vakken-container .card.scrollable::-webkit-scrollbar{width:6px}.vakken-container .card.scrollable::-webkit-scrollbar-thumb{background-color:#ccc;border-radius:3px}@media (max-width: 1200px){.vakken-container{grid-template-columns:repeat(2,1fr)}}@media (max-width: 700px){.vakken-container{grid-template-columns:1fr;height:auto}.vakken-container .card.scrollable{max-height:400px}}.student-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.student-row{display:flex;justify-content:space-between;align-items:center;background:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;padding:8px 12px;transition:background .2s ease,transform .1s ease}.student-row:hover{background:#f3f4f6;transform:translateY(-1px)}.student-info{display:flex;flex-direction:column;gap:2px}.student-name{font-weight:600;color:#111827}.student-score{font-size:14px;color:#374151}.student-log-btn{background:#fff;color:#004c59;border:1px solid #004c59;border-radius:6px;padding:4px 10px;font-size:13px;cursor:pointer;transition:all .2s ease}.student-log-btn:hover{background:#004c59;color:#fff}.vakken-container button.active,.vakken-container .student-row.active{background:#004c59;color:#fff;font-weight:600;border-color:#004c59}.vakken-container button.active:hover,.vakken-container .student-row.active:hover{background:#005e6f}.vakken-container .student-row.active .student-log-btn{background:#fff;color:#004c59;border:1px solid #004c59}.vakken-container .student-row.active .student-name,.vakken-container .student-row.active .student-score{color:#fff}.vakken-container .student-row.active .student-score{opacity:.9}.event-list li.event-blurred{background:#fee2e2;color:#991b1b;border-radius:6px;padding:4px 8px}.card.scrollable button.course-btn{background:#f3f4f6;color:#111827;font-weight:600}.card.scrollable button.course-btn.active{background:#004c59;color:#fff;font-weight:600}.card.scrollable button.module-btn{background:#f3f4f6;color:#111827}.card.scrollable button.module-btn.active{background:#004c59;color:#fff}.select-wrapper{position:relative;width:320px}.select-wrapper select{width:100%;padding:10px 40px 10px 12px;font-size:14px;border-radius:6px;border:1px solid #d1d5db;background-color:#fff;color:#111827;appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer}.select-wrapper:after{content:"▾";position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;color:#6b7280;font-size:12px}.select-wrapper select:focus{outline:none;border-color:#2c6bed;box-shadow:0 0 0 2px #2c6bed33}.input-wrapper{width:100%;margin-bottom:8px}.input-wrapper input{width:100%;padding:10px 12px;font-size:14px;border-radius:6px;border:1px solid #d1d5db;background-color:#fff;color:#111827}.input-wrapper input::placeholder{color:#9ca3af}.input-wrapper input:focus{outline:none;border-color:#2c6bed;box-shadow:0 0 0 2px #2c6bed33}.modal-overlay{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:1000}.modal{background:#fff;border-radius:12px;padding:24px;width:420px;max-width:90%;box-shadow:0 10px 30px #00000040}.modal h3{margin:0 0 20px;color:#004c59}.form-field{display:block;margin-bottom:16px}.form-field span{display:block;margin-bottom:6px;font-size:14px;color:#374151}.form-field input,.form-field select{width:100%;padding:10px 12px;font-size:14px;border-radius:6px;border:1px solid #d1d5db}.form-field input:focus,.form-field select:focus{outline:none;border-color:#2c6bed;box-shadow:0 0 0 2px #2c6bed33}.modal-actions{display:flex;justify-content:flex-end;gap:8px}button.primary{background:#2c6bed;color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer}button.secondary{background:#e5e7eb;border:none;padding:8px 16px;border-radius:6px;cursor:pointer}