.teacher-substitutions { margin-block:0 20px; padding:16px; background:#20223b; border:1px solid #785ea4; border-radius:14px; color:#f5edff; }
.teacher-substitutions summary { cursor:pointer; font-weight:800; }
.teacher-substitutions ul { padding:0; margin:12px 0 0; list-style:none; display:grid; gap:8px; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); }
.teacher-substitutions li { background:#292c47; border-radius:9px; padding:10px; overflow-wrap:anywhere; }
.teacher-substitutions li span { display:block; font-size:.9em; color:#e1d6f4; }
#panel-school-evaluation .teacher-evaluation-hero { padding:clamp(14px,4vw,28px); border-radius:16px; background:linear-gradient(125deg,#392357,#203650); color:#fff; margin-block-end:14px; }
.teacher-evaluation-hero p { margin:5px 0 0; color:#e7def7; }
#panel-school-evaluation .teacher-evaluation { display:grid; gap:14px; min-width:0; }
.teacher-evaluation > :is(form,section) { padding:clamp(12px,3vw,20px); border:1px solid #3f4e68; border-radius:12px; background:#19263b; color:#f4f6ff; min-width:0; }
.teacher-evaluation form { display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.teacher-evaluation form > :is(h3,.teacher-evidence-field,button) { grid-column:1/-1; }
.teacher-evaluation form label { display:grid; gap:6px; min-width:0; }
.teacher-evaluation :is(select,input,textarea) { max-width:100%; min-width:0; border:1px solid #64728c; border-radius:8px; background:#111d30; color:#f4f6ff; padding:9px; font:inherit; }
.teacher-evaluation form :is(select,input) { width:100%; box-sizing:border-box; min-height:44px; }
.teacher-evaluation button { font:inherit; background:#e9dcff; color:#321949; border:0; border-radius:8px; padding:8px 14px; min-height:42px; cursor:pointer; }
.teacher-evaluation button[type=submit] { background:#8450b6; color:white; justify-self:start; }
.teacher-evaluation button:disabled { opacity:.65; cursor:wait; }
.teacher-evaluation ul { padding-inline-start:20px; overflow-wrap:anywhere; }
.teacher-evaluation > [role=status]:empty,.teacher-evaluation > [data-evaluation-results]:empty { display:none; }
@media (max-width:560px) { .teacher-evaluation form { grid-template-columns:minmax(0,1fr); } }

#teacherScheduleViews{display:flex;flex-wrap:wrap;gap:8px;margin-block:10px 16px}
#teacherScheduleViews button{flex:1;min-height:44px;padding:7px 12px;border-radius:8px;border:1px solid #dfd4eb;background:#f1edf6;color:#382050;font:inherit;cursor:pointer}
#teacherScheduleViews [aria-pressed=true]{background:#7540a0;color:#fff;border-color:#7540a0}
#teacherCoverHost .teacher-substitutions{background:#f7f4fa;border-color:#e1d7eb;color:#271c39}
#teacherCoverHost .teacher-substitutions li{background:#eee7f6;color:#271c39}
#teacherCoverHost .teacher-substitutions li span{color:#423253}

/* Keep the teacher controls and grid inside the content column on phones. */
#loginCard { margin-block-start:clamp(16px,6svh,64px); padding:clamp(18px,5vw,32px); }
#loginCard .field label { color:var(--card-text); font-weight:700; }
#loginCard input { min-height:46px; font-size:16px; }
#loginCard input::placeholder { opacity:1; color:var(--card-text-soft); }
#loginCard .primary { background:#f5b127; color:#172737; }
#loginCard .primary:hover { background:#ffca5b; }
#teacherScheduleBody { min-width:0; max-width:100%; }
#teacherScheduleBody .school-timetable-scroll { overscroll-behavior-inline:contain; }
@media (max-width:720px) {
  #dashboard, #dashboard .panel-content { min-width:0; width:100%; }
  #dashboard .panel-sidebar { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  #dashboard .panel-nav-btn { min-height:44px; white-space:normal; padding:8px; }
  #teacherScheduleViews button { flex:1 1 90px; }
  #teacherScheduleBody .school-timetable { min-width:720px; }
}

.teacher-home-link { display:inline-block; color:var(--card-text); text-underline-offset:3px; margin-block-end:10px; }
.teacher-grid-hint { display:none; color:#526077; font-size:.85rem; }
@media(max-width:720px) {
  #panel-schedule:has(.school-timetable-scroll) .teacher-grid-hint { display:block; }
}
