/* Course Attendance Modal — shared styles (faithfully copied from the Overview
   attendance modal so the popup looks identical wherever it is reused). */
#kAttendanceModal{
  display:none;position:fixed;inset:0;z-index:10001;background:rgba(15,23,42,.45);align-items:center;justify-content:center;
}
#kAttendanceModal.open{display:flex}
.att-box{
  background:#fff;border-radius:22px;padding:0;
  max-width:680px;width:96%;max-height:88vh;
  display:flex;flex-direction:column;
  box-shadow:0 24px 60px rgba(15,23,42,.22);overflow:hidden;
}
.att-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 22px;border-bottom:1px solid #e7e9f2;
}
.att-head h2{margin:0;font-size:18px;color:#1f2430}
.att-close{
  border:none;background:#f1f5f9;color:#475569;
  width:32px;height:32px;border-radius:10px;font-size:18px;cursor:pointer;line-height:1;
}
.att-close:hover{background:#e2e8f0}
.att-form{
  display:grid;grid-template-columns:170px 1fr;gap:12px;
  padding:14px 22px 8px;
}
.att-field{display:flex;flex-direction:column;gap:4px}
.att-field>span{font-size:11px;font-weight:700;color:#69707d;letter-spacing:.04em;text-transform:uppercase}
.att-field input,
.att-field select{
  appearance:none;-webkit-appearance:none;
  padding:9px 12px;border:1px solid #e7e9f2;border-radius:10px;
  font-size:13.5px;background:#fff;color:#1f2430;
}
.att-field input:focus,
.att-field select:focus{outline:none;border-color:#4b2aad;box-shadow:0 0 0 3px rgba(75,42,173,.12)}
.att-roster{
  padding:4px 22px 14px;flex:1;min-height:0;overflow-y:auto;
}
.att-row{
  display:grid;
  grid-template-columns:32px 1fr auto;
  gap:10px;align-items:center;
  padding:8px 4px;border-bottom:1px solid #f1f5f9;
}
.att-row:last-child{border-bottom:none}
.att-avatar{
  width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg,#ede9fe,#dbeafe);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;color:#4b2aad;font-size:11.5px;
  flex-shrink:0;position:relative;overflow:hidden;
}
.att-avatar-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.att-name{font-size:13.5px;color:#1f2430;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.att-status-sel{
  appearance:none;-webkit-appearance:none;
  padding:6px 10px;border:1px solid #e7e9f2;border-radius:9px;
  font-size:12.5px;background:#fff;color:#1f2430;width:100%;cursor:pointer;
}
.att-status-sel:focus{outline:none;border-color:#4b2aad}
.att-status-choice-group{
  display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end;
}
.att-status-choice{
  appearance:none;-webkit-appearance:none;
  border:1px solid #e7e9f2;background:#fff;color:#475569;
  padding:5px 10px;border-radius:999px;font-size:12px;font-weight:700;
  cursor:pointer;transition:.14s ease;white-space:nowrap;line-height:1.2;
  display:inline-flex;align-items:center;gap:4px;
}
.att-status-choice:hover{border-color:#cbd5e1;background:#f8fafc;color:#1f2430;}
.att-status-choice:focus-visible{outline:none;border-color:#4b2aad;box-shadow:0 0 0 3px rgba(75,42,173,.18)}
.att-status-choice.active{font-weight:800;box-shadow:0 1px 2px rgba(15,23,42,.06)}
.att-status-choice.active.present{background:#dcfce7;color:#15803d;border-color:#86efac}
.att-status-choice.active.late   {background:#fff4d6;color:#9a6700;border-color:#fcd97a}
.att-status-choice.active.excused{background:#fef9c3;color:#854d0e;border-color:#fde047}
.att-status-choice.active.absent {background:#fee2e2;color:#b91c1c;border-color:#fca5a5}
.att-footer{
  padding:12px 22px;border-top:1px solid #e7e9f2;
  display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
}
.att-status{font-size:12.5px;color:#69707d;font-weight:600;min-height:18px;}
.att-status.success{color:#15803d}
.att-status.error{color:#b42318}
.att-actions{display:flex;gap:8px}
.att-actions .btn[disabled]{opacity:.6;cursor:not-allowed;}
.att-empty{
  padding:24px 8px;text-align:center;color:#69707d;font-size:13.5px;line-height:1.5;
}
.att-empty strong{display:block;color:#1f2430;font-size:14px;margin-bottom:4px}
.att-skeleton{
  height:42px;border-radius:10px;background:linear-gradient(90deg,#f8fafc,#eef2ff,#f8fafc);
  background-size:200% 100%;animation:att-shimmer 1.4s linear infinite;margin:6px 0;
}
@keyframes att-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (max-width:640px){
  .att-form{grid-template-columns:1fr}
  .att-row{grid-template-columns:32px 1fr;}
  .att-row .att-status-sel{grid-column:1 / -1}
  .att-row .att-status-choice-group{grid-column:1 / -1;justify-content:flex-start;width:100%}
}

/* Light theme: the shared Kairos skin (tetra-kairos-skin.css) darkens .att-box,
   its inputs and roster surfaces to obsidian glass. When the portal is in light
   theme (e.g. opened inline from Home), restore the light modal these base rules
   already define so it matches the light shell. Attribute selector + !important
   out-specifies the skin's plain selectors. */
:root[data-tetra-theme="light"] .att-box{background:#fff!important;border-color:#e7e9f2!important;color:#1f2430!important}
:root[data-tetra-theme="light"] .att-head h2{color:#1f2430!important}
:root[data-tetra-theme="light"] .att-head,:root[data-tetra-theme="light"] .att-footer{border-color:#e7e9f2!important}
:root[data-tetra-theme="light"] .att-close{background:#f1f5f9!important;color:#475569!important}
:root[data-tetra-theme="light"] .att-field>span{color:#69707d!important}
:root[data-tetra-theme="light"] .att-field input,:root[data-tetra-theme="light"] .att-field select,:root[data-tetra-theme="light"] .att-status-sel{background:#fff!important;border-color:#e7e9f2!important;color:#1f2430!important}
:root[data-tetra-theme="light"] .att-roster .att-row{background:transparent!important;border:0!important;border-bottom:1px solid #eef0f6!important}
:root[data-tetra-theme="light"] .att-name{color:#1f2430!important}
:root[data-tetra-theme="light"] .att-empty{color:#69707d!important}
:root[data-tetra-theme="light"] .att-empty strong{color:#1f2430!important}
:root[data-tetra-theme="light"] .att-status-choice{background:#fff!important;border-color:#e7e9f2!important;color:#475569!important}