:root {
  --faculty: #176b55;
  --faculty-soft: #e7f3ef;
  --faculty-line: #b9d8cd;
}

:root[data-theme="dark"] {
  --faculty: #82c9b2;
  --faculty-soft: #1a352e;
  --faculty-line: #315e50;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --faculty: #82c9b2;
    --faculty-soft: #1a352e;
    --faculty-line: #315e50;
  }
}

.space.faculty {
  background: var(--faculty-soft);
  color: var(--faculty);
}

.teacher-login .login {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--faculty-soft) 76%, var(--bg)), transparent 58%),
    repeating-linear-gradient(135deg, transparent 0 22px, color-mix(in srgb, var(--faculty-line) 15%, transparent) 22px 23px),
    var(--side);
}

.teacher-login .login .box2 {
  border-radius: 12px;
  border-top: 3px solid var(--faculty);
}

.teacher-login .kicker.admin {
  color: var(--faculty);
  background: var(--faculty-soft);
}

.teacher-login #loginBtn {
  background: var(--faculty);
}

.teacher-dashboard {
  max-width: 1260px !important;
}

.teacher-welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 26px;
  border: 1px solid var(--faculty-line);
  border-left: 4px solid var(--faculty);
  background: linear-gradient(110deg, var(--faculty-soft), var(--bg) 78%);
  margin-bottom: 18px;
}

.teacher-eyebrow {
  color: var(--faculty);
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
}

.teacher-welcome h2 {
  font: 500 27px/1.18 var(--serif);
  margin: 5px 0 4px;
}

.teacher-welcome p {
  margin: 0;
  color: var(--ink-2);
  font-size: 14px;
}

.teacher-ai {
  flex: none;
  background: var(--faculty);
  border-color: var(--faculty);
  color: #fff;
  min-height: 40px;
}

.teacher-ai .ico {
  color: inherit;
}

.teacher-ai:hover {
  filter: brightness(.94);
}

.teacher-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 26px;
}

.teacher-stats .stat {
  border-radius: 8px;
  background: var(--bg);
  padding: 16px 18px;
}

.teacher-stats .stat b {
  color: var(--faculty);
  font-size: 25px;
}

.teacher-courses {
  border-top: 1px solid var(--line);
  padding-top: 20px;
}

.teacher-create-course {
  margin: 22px 0;
}

.teacher-create-course > h2 {
  margin: 0 0 5px;
  font-size: 17px;
}

.teacher-create-course > p {
  margin: 0 0 14px;
}

.teacher-course-form {
  display: grid;
  grid-template-columns: minmax(110px, .35fr) minmax(0, 1fr);
  align-items: center;
  gap: 8px 12px;
  max-width: 760px;
}

.teacher-course-form .f {
  margin: 0;
}

.teacher-course-form .in {
  min-width: 0;
  margin: 0;
}

.teacher-course-fields {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(110px, .35fr) minmax(0, 1fr);
  align-items: center;
  gap: 8px 12px;
}

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

.teacher-course-fields > .small {
  grid-column: 2;
  margin: 0;
}

.teacher-course-form > button {
  grid-column: 2;
  justify-self: start;
}

.teacher-create-course > #teacherCourseStatus {
  margin-top: 9px;
  color: var(--danger);
}

.teacher-section-head,
.teacher-detail-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.teacher-section-head h2,
.teacher-detail-head h2 {
  font-size: 18px;
  margin: 3px 0 0;
}

.teacher-search {
  width: min(320px, 100%);
  position: relative;
}

.teacher-search > .ico {
  position: absolute;
  left: 10px;
  top: 9px;
  width: 17px;
  height: 17px;
  color: var(--ink-3);
}

.teacher-search .in {
  margin: 0;
  border-radius: 8px;
  padding: 8px 10px 8px 34px;
}

.teacher-table {
  overflow-x: auto;
  border-top: 1px solid var(--line);
}

.teacher-table table,
.teacher-detail .table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  text-align: left;
}

.teacher-table th,
.teacher-table td,
.teacher-detail .table-wrap th,
.teacher-detail .table-wrap td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.teacher-table th,
.teacher-detail .table-wrap th {
  color: var(--ink-3);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
}

.teacher-table tbody tr:hover,
.teacher-detail .table-wrap tbody tr:hover {
  background: var(--side);
}

.teacher-table td:first-child b {
  color: var(--ink);
  font-weight: 650;
}

.teacher-empty {
  padding: 32px 20px;
  border: 1px dashed var(--line);
  text-align: center;
}

.teacher-empty-icon {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  background: var(--faculty-soft);
  border-radius: 8px;
  margin-bottom: 8px;
}

.teacher-empty h3,
.teacher-empty p {
  margin: 4px auto;
}

.teacher-empty p {
  color: var(--ink-2);
  max-width: 520px;
  font-size: 13.5px;
}

.teacher-detail {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 2px solid var(--faculty-line);
  animation: fade-up .25s ease both;
}

.teacher-detail-head {
  align-items: center;
  margin-bottom: 20px;
}

.teacher-detail-head p {
  margin: 4px 0 0;
}

.teacher-detail-grid {
  display: grid;
  grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
  gap: 28px;
}

.teacher-detail-block h3,
.teacher-material-list h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 7px;
  font-size: 15px;
}

.teacher-detail-block > .small {
  margin: 0 0 15px;
  color: var(--ink-2);
}

.teacher-upload-options {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.teacher-upload-options .f {
  grid-column: 1 / -1;
  margin-bottom: -6px;
}

.teacher-upload-options .in {
  margin: 0;
}

.teacher-upload-options .btn {
  min-height: 40px;
  background: var(--faculty);
  border-color: var(--faculty);
  color: #fff;
  white-space: nowrap;
}

.teacher-upload-options .btn .ico {
  color: inherit;
}

.teacher-material-list {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.teacher-material-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto minmax(150px, 210px) 34px;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.teacher-material-row .in {
  margin: 0;
  padding: 6px 8px;
  font-size: 12.5px;
}

.count-chip {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--faculty-soft);
  color: var(--faculty);
  font-size: 12px;
}

.teacher-event-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 14px;
  max-width: 860px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 18px 0 24px;
}

.teacher-event-form h3,
.teacher-event-form label[for="eventCourse"],
.teacher-event-form #eventCourse,
.teacher-event-form label[for="eventTitle"],
.teacher-event-form #eventTitle,
.teacher-event-form label[for="eventDescription"],
.teacher-event-form #eventDescription,
.teacher-event-form .row {
  grid-column: 1 / -1;
}

.teacher-event-form h3 {
  margin: 0 0 12px;
  font-size: 16px;
}

.teacher-event-form .in {
  margin-bottom: 12px;
}

.teacher-shared-month {
  margin: 20px 0 26px;
  padding: 18px 0 22px;
  border-bottom: 1px solid var(--line);
}

.teacher-shared-month > h3 {
  margin: 0 0 14px;
  font-size: 16px;
}

.teacher-shared-month .calendar-wrap {
  grid-template-columns: minmax(280px, 1.3fr) minmax(250px, .7fr);
  align-items: start;
}

.teacher-shared-month .calendar-toolbar {
  grid-column: 1 / -1;
}

.teacher-push {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.teacher-push h3,
.teacher-push p {
  margin: 0;
}

.teacher-push h3 {
  font-size: 15px;
}

.teacher-push .small {
  margin-top: 4px;
  color: var(--ink-2);
}

.teacher-notification {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 10px;
  border-bottom: 1px solid var(--line);
}

.teacher-notification.unread {
  border-left: 3px solid var(--faculty);
  background: var(--faculty-soft);
}

.teacher-notification-title,
.teacher-notification-body,
.teacher-notification time {
  display: block;
}

.teacher-notification-body,
.teacher-notification time {
  margin: 3px 0 0;
}

.calendar-shared {
  padding-top: 15px;
  border-top: 1px solid var(--line);
}

.calendar-shared h3 {
  margin: 0 0 9px;
  font-size: 14px;
}

.calendar-shared-event {
  padding: 10px 12px;
  margin-bottom: 8px;
  border-left: 3px solid var(--faculty);
  background: var(--faculty-soft);
}

.calendar-shared-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  color: var(--ink-3);
  font-size: 12px;
}

.calendar-shared-title {
  display: block;
  margin-top: 5px;
  font-size: 13.5px;
}

.calendar-shared-description {
  margin: 3px 0 0;
  color: var(--ink-2);
  font-size: 12.5px;
  white-space: pre-wrap;
}

@media (max-width: 760px) {
  .teacher-welcome {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
  }

  .teacher-welcome h2 {
    font-size: 24px;
  }

  .teacher-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .teacher-stats .stat {
    padding: 11px 9px;
  }

  .teacher-stats .stat b {
    font-size: 21px;
  }

  .teacher-stats .stat span {
    font-size: 11px;
  }

  .teacher-section-head {
    align-items: stretch;
    flex-direction: column;
  }

  .teacher-search {
    width: 100%;
  }

  .teacher-detail-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .teacher-course-form,
  .teacher-course-fields {
    grid-template-columns: 1fr;
  }

  .teacher-course-fields > .small,
  .teacher-course-form > button {
    grid-column: 1;
  }

  .teacher-event-form {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .teacher-event-form > * {
    grid-column: 1 !important;
  }

  .teacher-push,
  .teacher-notification {
    align-items: flex-start;
    flex-direction: column;
  }

  .teacher-material-row {
    grid-template-columns: minmax(0, 1fr) auto 34px;
  }

  .teacher-material-row select {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (max-width: 420px) {
  .teacher-stats {
    grid-template-columns: 1fr;
  }

  .teacher-upload-options {
    grid-template-columns: 1fr;
  }

  .teacher-upload-options .f {
    grid-column: auto;
  }

  .teacher-detail-head {
    align-items: flex-start;
    flex-direction: column;
  }
}