@import url("../Best English design system/styles.css");

html,
body {
  min-height: 100%;
  margin: 0;
}

.teacher-app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  background: radial-gradient(80% 60% at 100% 0%, var(--be-secondary-tint), transparent 55%), var(--be-canvas);
}

.teacher-rail {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: var(--be-space-2);
  padding: var(--be-space-6) var(--be-space-4);
  background: color-mix(in oklch, var(--be-canvas) 84%, transparent);
  border-right: 1px solid var(--be-glass-border);
  -webkit-backdrop-filter: var(--be-blur);
  backdrop-filter: var(--be-blur);
  box-sizing: border-box;
}

.teacher-brand {
  display: flex;
  align-items: center;
  gap: var(--be-space-3);
  padding: var(--be-space-1) var(--be-space-2) var(--be-space-6);
  color: var(--be-ink);
  text-decoration: none;
  font-family: var(--be-font-display);
  font-size: var(--be-fs-h3);
  font-weight: var(--be-w-bold);
}

.teacher-brand > span:last-child span {
  color: var(--be-primary-700);
}

.teacher-brand__mark {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--be-r-sm);
  background: var(--be-primary);
  color: var(--be-ink-on-accent);
  box-shadow: var(--be-clay-accent);
}

.teacher-nav {
  display: flex;
  flex-direction: column;
  gap: var(--be-space-1);
}

.teacher-nav__item {
  min-height: var(--be-touch-min);
  display: flex;
  align-items: center;
  gap: var(--be-space-3);
  border: 0;
  border-radius: var(--be-r-md);
  padding: 0 var(--be-space-4);
  cursor: pointer;
  background: transparent;
  color: var(--be-ink-2);
  font-family: var(--be-font-sans);
  font-size: var(--be-fs-sm);
  font-weight: var(--be-w-semibold);
  text-align: left;
}

.teacher-nav__item.is-active {
  background: var(--be-surface);
  color: var(--be-ink);
  box-shadow: var(--be-clay-sm);
}

.teacher-rail__spacer { flex: 1; }

.student-link,
.teacher-profile {
  display: flex;
  align-items: center;
  gap: var(--be-space-3);
  padding: var(--be-space-3);
  border-radius: var(--be-r-md);
}

.student-link {
  color: var(--be-ink);
  text-decoration: none;
}

.student-link:hover { background: var(--be-primary-tint); }

.student-link strong,
.student-link small,
.teacher-profile strong,
.teacher-profile small {
  display: block;
}

.student-link small,
.teacher-profile small {
  margin-top: 2px;
  color: var(--be-ink-3);
  font-size: var(--be-fs-xs);
}

.teacher-profile {
  background: var(--be-surface);
  box-shadow: var(--be-clay-sm);
}

.teacher-profile__avatar {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--be-r-pill);
  background: var(--be-secondary);
  color: var(--be-ink-on-accent);
  font-family: var(--be-font-display);
  font-weight: var(--be-w-semibold);
}

.teacher-main {
  min-width: 0;
  padding: var(--be-space-7);
}

.teacher-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--be-space-6);
  margin-bottom: var(--be-space-6);
}

.teacher-header h1,
.teacher-header p {
  margin: 0;
}

.teacher-header h1 {
  margin-top: var(--be-space-1);
  font-family: var(--be-font-display);
  font-size: var(--be-fs-h1);
  line-height: var(--be-lh-h1);
  letter-spacing: var(--be-track-tight);
}

.teacher-header p {
  margin-top: var(--be-space-1);
  color: var(--be-ink-2);
}

.teacher-actions {
  display: flex;
  gap: var(--be-space-3);
}

.teacher-panel[hidden] { display: none; }

.teacher-panel.is-active {
  display: block;
  animation: be-rise var(--be-dur-3) var(--be-ease-out) both;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--be-bento-gap);
  margin-bottom: var(--be-bento-gap);
}

.teacher-stat,
.teacher-card {
  border-radius: var(--be-r-lg);
  background: var(--be-surface);
  box-shadow: var(--be-clay-sm);
}

.teacher-stat {
  padding: var(--be-space-5);
}

.teacher-stat > span,
.teacher-stat > small {
  display: block;
}

.teacher-stat > span {
  color: var(--be-ink-3);
  font-family: var(--be-font-mono);
  font-size: var(--be-fs-mono);
  letter-spacing: var(--be-track-mono);
  text-transform: uppercase;
}

.teacher-stat > strong {
  display: block;
  margin: var(--be-space-2) 0 var(--be-space-1);
  font-family: var(--be-font-display);
  font-size: 34px;
  line-height: 1;
}

.teacher-stat > strong small { color: var(--be-ink-3); font-size: var(--be-fs-base); }
.teacher-stat > small { color: var(--be-ink-2); font-size: var(--be-fs-xs); }
.teacher-stat--attention { background: var(--be-danger-tint); }
.teacher-stat--attention > strong { color: var(--be-danger-600); }

.teacher-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(300px, .75fr);
  gap: var(--be-bento-gap);
  align-items: start;
}

.teacher-grid--overview { grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); }

.teacher-card { padding: var(--be-space-6); box-shadow: var(--be-clay); }

.panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--be-space-4);
  margin-bottom: var(--be-space-5);
}

.panel-heading h2,
.panel-heading p { margin: 0; }
.panel-heading h2 { font-family: var(--be-font-display); font-size: var(--be-fs-h3); }
.panel-heading p { margin-top: var(--be-space-1); color: var(--be-ink-2); font-size: var(--be-fs-sm); }

.table-scroll { overflow-x: auto; }
.heatmap { width: 100%; border-collapse: separate; border-spacing: 7px; }
.heatmap th { color: var(--be-ink-3); font-family: var(--be-font-mono); font-size: 10px; font-weight: var(--be-w-regular); text-transform: uppercase; }
.heatmap th:first-child { min-width: 90px; color: var(--be-ink); font-family: var(--be-font-sans); font-size: var(--be-fs-xs); font-weight: var(--be-w-semibold); text-align: left; text-transform: none; }
.heatmap td { height: 42px; border-radius: var(--be-r-xs); color: var(--be-ink-on-accent); box-shadow: var(--be-clay-sm); font-family: var(--be-font-mono); font-size: var(--be-fs-xs); font-weight: var(--be-w-bold); text-align: center; }
[data-band="low"] { background: var(--be-score-low); }
[data-band="mid"] { background: var(--be-score-mid); color: var(--be-ink) !important; }
[data-band="good"] { background: var(--be-score-good); }
[data-band="great"] { background: var(--be-score-great); }

.heatmap-legend { display: flex; align-items: center; flex-wrap: wrap; gap: var(--be-space-4); margin-top: var(--be-space-4); color: var(--be-ink-2); font-size: var(--be-fs-xs); }
.heatmap-legend span { display: inline-flex; align-items: center; gap: 5px; }
.heatmap-legend i { width: 14px; height: 14px; border-radius: 5px; }
.heatmap-legend strong { margin-left: auto; color: var(--be-ink-2); font-weight: var(--be-w-semibold); }

.student-list { display: flex; flex-direction: column; }
.student-list button { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: var(--be-space-3); border: 0; border-bottom: 1px solid var(--be-hairline); padding: var(--be-space-3) 0; cursor: pointer; background: transparent; color: var(--be-ink); text-align: left; }
.student-list button:last-child { border-bottom: 0; }
.student-list button > span:nth-child(2) strong,
.student-list button > span:nth-child(2) small { display: block; }
.student-list button > span:nth-child(2) small { margin-top: 2px; color: var(--be-ink-2); font-size: var(--be-fs-xs); }
.student-list .be-progress { height: 8px; margin-top: var(--be-space-2); }
.student-avatar { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--be-r-pill); color: var(--be-ink-on-accent); box-shadow: var(--be-clay-sm); font-family: var(--be-font-display); font-weight: var(--be-w-semibold); }
.student-avatar--mia { background: var(--be-primary); }
.student-avatar--tomas { background: var(--be-secondary); }
.student-avatar--anna { background: var(--be-success); }

.practice-balance { display: flex; flex-direction: column; gap: var(--be-space-4); }
.practice-balance > div { display: grid; grid-template-columns: 130px 1fr 42px; align-items: center; gap: var(--be-space-3); font-size: var(--be-fs-sm); }
.practice-balance strong { text-align: right; }
.attention-list { display: flex; flex-direction: column; gap: var(--be-space-3); }
.attention-list button { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: var(--be-space-3); border: 0; border-radius: var(--be-r-md); padding: var(--be-space-3); cursor: pointer; background: var(--be-canvas); color: var(--be-ink); box-shadow: var(--be-neu-raised-sm); text-align: left; }
.attention-list strong,
.attention-list small { display: block; }
.attention-list small { margin-top: 2px; color: var(--be-ink-2); }
.attention-icon { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: var(--be-r-sm); background: var(--be-sky-tint); color: var(--be-secondary-600); }
.attention-icon--danger { background: var(--be-danger-tint); color: var(--be-danger-600); }

.lesson-builder-grid { display: grid; grid-template-columns: minmax(300px, .85fr) minmax(440px, 1.15fr); gap: var(--be-bento-gap); align-items: start; }
.lesson-cover { height: 210px; }
.lesson-info { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--be-space-3); margin-top: var(--be-space-4); }
.lesson-info span { padding: var(--be-space-3); border-radius: var(--be-r-sm); background: var(--be-canvas); box-shadow: var(--be-neu-inset-sm); }
.lesson-info small,
.lesson-info strong { display: block; }
.lesson-info small { color: var(--be-ink-3); }
.lesson-info strong { margin-top: var(--be-space-1); }
.content-plan__list { display: flex; flex-direction: column; gap: var(--be-space-3); }
.content-plan__list button { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: var(--be-space-3); width: 100%; border: 0; border-radius: var(--be-r-md); padding: var(--be-space-3); cursor: pointer; background: var(--be-canvas); color: var(--be-ink); box-shadow: var(--be-neu-raised-sm); text-align: left; }
.content-plan__list strong,
.content-plan__list small { display: block; }
.content-plan__list small { margin-top: 2px; color: var(--be-ink-2); }
.content-icon { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: var(--be-r-sm); }
.content-icon--words { background: var(--be-primary-tint); color: var(--be-primary-700); }
.content-icon--listen { background: var(--be-secondary-tint); color: var(--be-secondary-600); }
.content-icon--read { background: var(--be-success-tint); color: var(--be-success-600); }
.content-icon--grammar { background: var(--be-sky-tint); color: var(--be-secondary-600); }

.review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--be-space-6); }
.recording-preview { padding: var(--be-space-5); border-radius: var(--be-r-md); background: var(--be-canvas); box-shadow: var(--be-neu-inset-sm); }
.recording-player { display: flex; align-items: center; gap: var(--be-space-3); }
.teacher-wave { height: 42px; display: flex; align-items: center; gap: 3px; flex: 1; }
.teacher-wave i { flex: 1; border-radius: var(--be-r-pill); background: var(--be-secondary); opacity: .76; }
.teacher-wave.is-playing i { animation: teacher-wave 650ms var(--be-ease-in-out) infinite alternate; }
@keyframes teacher-wave { to { transform: scaleY(.45); } }
.recording-preview p { margin: var(--be-space-5) 0 0; font-size: var(--be-fs-lg); line-height: var(--be-lh-lg); }
.recording-preview mark { border-radius: 6px; padding: 2px 5px; }
.recording-preview mark[data-level="low"] { background: var(--be-danger-tint); color: var(--be-danger-600); }
.recording-preview mark[data-level="mid"] { background: var(--be-warning-tint); color: var(--be-warning-600); }
.review-scores { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--be-space-2); margin-bottom: var(--be-space-4); }
.review-scores span { padding: var(--be-space-3); border-radius: var(--be-r-sm); background: var(--be-surface); box-shadow: var(--be-clay-sm); }
.review-scores small,
.review-scores strong { display: block; }
.review-scores small { color: var(--be-ink-3); font-size: var(--be-fs-xs); }
.review-scores strong { margin-top: var(--be-space-1); font-family: var(--be-font-display); font-size: var(--be-fs-h2); }
.feedback-editor .be-textarea { min-height: 90px; margin-top: var(--be-space-2); }
.review-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--be-space-3); margin-top: var(--be-space-3); }

.new-lesson-dialog { width: min(520px, calc(100vw - 32px)); border: 0; border-radius: var(--be-r-xl); padding: var(--be-space-6); background: var(--be-surface); color: var(--be-ink); box-shadow: var(--be-float-lg); }
.new-lesson-dialog::backdrop { background: color-mix(in oklch, var(--be-ink) 30%, transparent); backdrop-filter: blur(4px); }
.new-lesson-dialog form { display: flex; flex-direction: column; gap: var(--be-space-3); }
.new-lesson-dialog h2 { margin: 0 0 var(--be-space-3); font-family: var(--be-font-display); }
.dialog-close { position: absolute; top: var(--be-space-4); right: var(--be-space-4); width: 40px; height: 40px; }
.dialog-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--be-space-3); }
.dialog-fields label { display: flex; flex-direction: column; gap: var(--be-space-2); }

.teacher-toast { position: fixed; right: var(--be-space-6); bottom: var(--be-space-6); z-index: 80; padding: var(--be-space-3) var(--be-space-5); border-radius: var(--be-r-md); background: var(--be-ink); color: var(--be-ink-on-accent); box-shadow: var(--be-float); opacity: 0; transform: translateY(var(--be-space-3)); transition: all var(--be-dur-2) var(--be-ease-spring); }
.teacher-toast.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1080px) {
  .teacher-app { grid-template-columns: 86px minmax(0, 1fr); }
  .teacher-brand > span:last-child,
  .teacher-nav__item:not(.is-active)::after,
  .teacher-nav__item { font-size: 0; }
  .teacher-nav__item { justify-content: center; padding: 0; }
  .teacher-nav__item .be-ico { font-size: 23px; }
  .student-link span:nth-child(2),
  .teacher-profile span:nth-child(2) { display: none; }
  .student-link,
  .teacher-profile { justify-content: center; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .teacher-grid,
  .teacher-grid--overview,
  .lesson-builder-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .teacher-app { display: block; }
  .teacher-rail { position: fixed; z-index: 50; right: var(--be-space-3); bottom: var(--be-space-3); left: var(--be-space-3); top: auto; width: auto; height: 70px; flex-direction: row; align-items: center; padding: var(--be-space-2); border: 1px solid var(--be-glass-border); border-radius: var(--be-r-lg); box-shadow: var(--be-float); }
  .teacher-brand,
  .teacher-rail__spacer,
  .student-link,
  .teacher-profile { display: none; }
  .teacher-nav { width: 100%; flex-direction: row; justify-content: space-around; }
  .teacher-nav__item { flex: 1; }
  .teacher-main { padding: var(--be-space-5) var(--be-space-4) 100px; }
  .teacher-header { align-items: flex-start; flex-direction: column; }
  .teacher-actions { width: 100%; }
  .teacher-actions .be-btn { flex: 1; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .review-grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .stat-grid { grid-template-columns: 1fr; }
  .teacher-actions { flex-direction: column; }
  .review-actions,
  .dialog-fields { grid-template-columns: 1fr; }
  .practice-balance > div { grid-template-columns: 100px 1fr 38px; }
}