.admin-table-wrap {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}

.admin-table-toggle-wrap {
  margin-top: 12px;
}

.admin-table-toggle-btn {
  background: #eef3f8;
  color: #16395d;
  border-radius: 10px;
  font-weight: 700;
  padding: 10px 16px;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 680px;
}

.admin-table th,
.admin-table td {
  border-bottom: 1px solid #e2eaf3;
  text-align: left;
  padding: 10px;
  color: #22425f;
  font-size: 0.95rem;
}

.admin-requests-done-cell {
  text-align: right;
}

.admin-requests-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.admin-requests-done-btn {
  border-radius: 999px;
  padding: 6px 14px;
  font-weight: 700;
  background: #e2edf8;
  border: 1px solid #c0d1e4;
  color: #123454;
  white-space: nowrap;
}

.admin-requests-delete-btn {
  border-radius: 999px;
  padding: 6px 14px;
  font-weight: 700;
  background: #fdeaea;
  border: 1px solid #e4bcbc;
  color: #9b1e1e;
  white-space: nowrap;
}

.admin-requests-done-btn.is-done {
  background: #2e7d55;
  border-color: #2e7d55;
  color: #ffffff;
}

.admin-requests-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 6px 14px;
  font-weight: 700;
  background: #e8f4ea;
  border: 1px solid #c8e3d2;
  color: #2e7d55;
  white-space: nowrap;
}

.admin-requests-row.is-done {
  opacity: 0.7;
}

.admin-device-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-device-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 5px 10px;
  font-weight: 700;
  font-size: 0.85rem;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  background: transparent;
  appearance: none;
}

.admin-device-chip--pc {
  background: #e6eef7;
  border-color: #c7d7e8;
  color: #1f4f7a;
}

.admin-device-chip--phone {
  background: #e8f4ea;
  border-color: #c8e3d2;
  color: #2e7d55;
}

.admin-device-chip--tablet {
  background: #fff1e0;
  border-color: #f3d3a8;
  color: #b8611d;
}

.admin-device-chip--unknown {
  background: #eef2f6;
  border-color: #d1d9e2;
  color: #5c6f86;
}

.admin-device-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
}

/* Telegram-sidebar-style thin monoline icons (js/modules/admin-icons.js) -
   stroke is currentColor, so it automatically matches whatever text color
   the surrounding button/label/heading already has (white on a filled .btn,
   dark on a heading), including in dark theme - no extra override needed. */
.tg-icon {
  width: 15px;
  height: 15px;
  display: inline-block;
  vertical-align: -3px;
  flex-shrink: 0;
}

.admin-device-detail-modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 25, 45, 0.44);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 1200;
}

.admin-device-detail-modal.is-open {
  display: flex;
}

.admin-device-detail-card {
  width: min(680px, 100%);
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #cfdae6;
  padding: 18px;
  box-shadow: 0 18px 40px rgba(13, 32, 54, 0.2);
}

.admin-device-detail-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.admin-device-detail-topbar h3 {
  margin: 0;
  color: #143456;
  font-size: 1.35rem;
}

.admin-device-detail-close-btn {
  background: #eef3f8;
  color: #16395d;
}

.admin-device-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
}

.admin-device-detail-item {
  margin: 0;
}

.admin-device-detail-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #7c8fa3;
  margin-bottom: 4px;
  font-weight: 700;
}

/* Tinted with the section's own accent color (--aui-edge, set on
   .admin-user-info-section below) when this grid lives inside a "More
   Info" panel section - falls back to a neutral grey for the one other
   place this class is reused (admin-devices.js's plain device-detail
   modal, which never sets --aui-edge). */
.admin-device-detail-label .tg-icon {
  width: 12px;
  height: 12px;
  color: var(--aui-edge, #6c7f94);
  opacity: 0.9;
}

.admin-device-detail-item p {
  margin: 0;
  color: #12233b;
  font-weight: 800;
  font-size: 0.98rem;
  word-break: break-word;
}

.admin-device-detail-ua {
  margin-top: 12px;
}

.admin-table th {
  color: #4f657b;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-empty-note {
  margin: 0;
  color: #4c6075;
}

/* Level tables — compact redesign */
.lt-table {
  min-width: 520px;
}

.lt-date {
  white-space: nowrap;
  font-size: 0.88rem;
  color: #4f657b;
}

.lt-prog-cell {
  min-width: 130px;
}

.lt-prog-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lt-prog-bar {
  flex: 1;
  height: 7px;
  background: #dde7f0;
  border-radius: 4px;
  overflow: hidden;
}

.lt-prog-fill {
  height: 100%;
  background: #2e9e6b;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.lt-prog-label {
  font-size: 0.8rem;
  color: #4f657b;
  white-space: nowrap;
  min-width: 32px;
  text-align: right;
}

.lt-row-hidden {
  display: none;
}

.lt-lessons-cell {
  min-width: 180px;
}

.lt-dots-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lt-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.lt-pct {
  font-size: 0.82rem;
  font-weight: 600;
  color: #2e9e6b;
  white-space: nowrap;
  min-width: 36px;
}

.lt-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: #dde7f0;
  cursor: default;
}

.lt-dot--done {
  background: #2e9e6b;
}

[data-theme="dark"] .lt-prog-bar {
  background: #1e3250;
}

[data-theme="dark"] .lt-dot:not(.lt-dot--done) {
  background: #1e3250;
}

[data-theme="light"] .lt-dot:not(.lt-dot--done) {
  background: #dde7f0;
}

[data-theme="dark"] .lt-date,
[data-theme="dark"] .lt-prog-label {
  color: #7fa3c0;
}

@media (prefers-color-scheme: dark) {
  .lt-prog-bar { background: #1e3250; }
  .lt-dot:not(.lt-dot--done) { background: #1e3250; }
  .lt-date, .lt-prog-label { color: #7fa3c0; }
}

.admin-create-modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 25, 45, 0.44);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 1100;
}

.admin-create-modal.is-open {
  display: flex;
}

.admin-create-modal-card {
  width: min(600px, 100%);
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #cfdae6;
  padding: 20px;
}

.admin-user-info-card {
  width: min(920px, 100%);
  max-height: 92vh;
  overflow: auto;
}

.admin-user-info-body {
  display: block;
  margin-top: 8px;
}

.admin-user-info-sections {
  display: grid;
  gap: 14px;
}

/* "More Info" panel card - an accent color cycles per section via
   --aui-edge (5-color repeat, all already used elsewhere on the site:
   brand navy, teal, gold, violet, green) instead of every section looking
   identical. nth-of-type works because every sibling in
   .admin-user-info-sections is the same <section> tag. */
.admin-user-info-section {
  --aui-edge: #1f4f7a;
  border: none;
  border-left: 3px solid var(--aui-edge);
  border-radius: 14px;
  padding: 16px 16px 18px;
  background: #ffffff;
  box-shadow: 0 10px 24px -18px rgba(18, 52, 84, 0.55);
}

.admin-user-info-section:nth-of-type(5n + 2) { --aui-edge: #14b8c4; }
.admin-user-info-section:nth-of-type(5n + 3) { --aui-edge: #e0a52c; }
.admin-user-info-section:nth-of-type(5n + 4) { --aui-edge: #6d5bd0; }
.admin-user-info-section:nth-of-type(5n) { --aui-edge: #2fae60; }

/* A destructive-action section (e.g. "Delete school") always reads as red,
   regardless of where it falls in the color cycle above - .is-danger wins
   because it's a plain class selector after the :nth-of-type rules. */
.admin-user-info-section.is-danger { --aui-edge: #cf2f2f; }

.admin-user-info-section h4 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 12px;
  color: #143456;
  font-size: 1.04rem;
  font-weight: 800;
}

.admin-user-info-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  background: color-mix(in srgb, var(--aui-edge) 16%, #ffffff);
  color: var(--aui-edge);
}

.admin-user-info-icon .tg-icon {
  width: 14px;
  height: 14px;
}

.admin-user-info-parents-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
}

.admin-user-info-parents-phone {
  color: #1f3d5a;
  font-weight: 700;
  opacity: 0.9;
}

.admin-user-info-empty {
  margin: 0;
  color: #4c6075;
  font-weight: 700;
}

.parent-edit-forms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 10px;
}

.parent-edit-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.parent-edit-label {
  margin: 0;
  font-weight: 700;
  font-size: 0.85rem;
  color: #1f3d5a;
}

.parent-edit-form input {
  font-family: inherit;
  font-size: 0.85rem;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #cddcea;
}

[data-theme="dark"] .parent-edit-form input {
  background: #0e1e30;
  border-color: #1a2f48;
  color: #d0e4f7;
}

.parent-edit-save {
  align-self: flex-start;
  border: none;
  background: #2563eb;
  color: #fff;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.parent-edit-message {
  font-size: 0.78rem;
  color: #d93025;
  min-height: 1em;
}

.parent-edit-message.is-success {
  color: #0f9d58;
}

.admin-user-password-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-user-password-row p {
  flex: 1;
}

.admin-user-password-reveal-btn {
  border: 1px solid rgba(16, 37, 58, 0.18);
  background: #eef3f8;
  color: #16395d;
  border-radius: 10px;
  padding: 6px 10px;
  cursor: pointer;
  font-weight: 800;
}

.admin-user-password-reveal-btn:hover {
  filter: brightness(0.98);
}

.admin-mentors-modal-card {
  width: min(980px, 100%);
  /* These are all list-style modals (Mentors, Mentor's Students, Organization
     Classes, Class Students, bulk-import previews) whose content grows with
     the data - unlike .admin-create-modal-card's plain forms, they have no
     natural cap. Without this, once the list is taller than the viewport
     the modal has no way to scroll (body scroll is locked while a modal is
     open, and .admin-create-modal centers with no overflow of its own), so
     anything below the fold - including these modals' own action buttons -
     becomes unreachable. Same max-height/overflow pattern already used by
     .admin-user-info-card just above and .profile-modal-card (school.html's
     equivalent modal base, which already has this and never hit the bug).
  */
  max-height: 92vh;
  overflow-y: auto;
}

.admin-create-modal-card h3 {
  margin: 0 0 12px;
  color: #123456;
}

.admin-create-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-create-form .is-hidden {
  display: none;
}

.admin-create-form input,
.admin-create-form select,
.admin-create-form textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #c8d5e4;
  border-radius: 10px;
  font-size: 0.98rem;
  background: #ffffff;
  color: #16395d;
  outline: none;
}

.admin-create-form input[readonly],
.admin-create-form select:disabled {
  background: #f3f6fb;
  color: #4f657b;
}

.admin-create-form select {
  border-color: rgba(240, 180, 41, 0.5);
}

.admin-create-schedule-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---------- Schedule panel: weekly bell-schedule grid (school-schedule.js) ----------
   Replaced the old single "Add lesson slot" form (class+teacher+day+time all
   at once) with a day-by-day grid: pick a day, then a shared lesson time on
   that day, then assign class+teacher to it. */
.school-schedule-day-strip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin: 16px 0;
}

.school-schedule-day-chip {
  background: #eef3f8;
  border: 1px solid #d5e0eb;
  border-radius: 12px;
  padding: 10px 4px 8px;
  text-align: center;
  cursor: pointer;
  color: #5a6f86;
  font: inherit;
}

.school-schedule-day-chip .ssdc-name {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.school-schedule-day-chip .ssdc-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(90, 111, 134, 0.12);
  font-size: 0.72rem;
  font-weight: 800;
}

.school-schedule-day-chip.has-lessons .ssdc-count {
  background: linear-gradient(135deg, #2fa7ff, #1682cf);
  color: #ffffff;
}

.school-schedule-day-chip.is-active {
  border-color: transparent;
  background: linear-gradient(160deg, rgba(47, 167, 255, 0.22), #dce9fb);
  color: #143456;
}

.school-schedule-day-chip.is-active .ssdc-name { color: #0b2a4a; }

[data-theme="dark"] .school-schedule-day-chip {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: #9bb8d8;
}

[data-theme="dark"] .school-schedule-day-chip.has-lessons .ssdc-count {
  color: #ffffff;
}

[data-theme="dark"] .school-schedule-day-chip.is-active {
  background: linear-gradient(160deg, rgba(47, 167, 255, 0.28), rgba(15, 26, 48, 0.8));
  color: #e8f0ff;
}

[data-theme="dark"] .school-schedule-day-chip.is-active .ssdc-name { color: #ffffff; }

.school-schedule-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 0 6px;
}

.school-schedule-panel-head h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: #143456;
}

[data-theme="dark"] .school-schedule-panel-head h4 { color: #e8f0ff; }

.school-schedule-add-period-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px dashed rgba(90, 111, 134, 0.4);
  color: #5a6f86;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.school-schedule-add-period-btn:hover { border-color: #1682cf; color: #1682cf; }

[data-theme="dark"] .school-schedule-add-period-btn {
  border-color: rgba(255, 255, 255, 0.24);
  color: #9bb8d8;
}

[data-theme="dark"] .school-schedule-add-period-btn:hover {
  border-color: #2fa7ff;
  color: #d8e8ff;
}

.school-schedule-period-list { margin-top: 6px; }

.school-schedule-substitutions-wrap {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #e3e8ef;
}

.school-schedule-substitutions-title {
  margin: 0 0 8px;
  font-size: 0.9rem;
  color: #33455c;
}

.school-schedule-substitutions-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.school-schedule-substitution-row {
  font-size: 0.84rem;
  color: #5a6f86;
}

[data-theme="dark"] .school-schedule-substitutions-wrap {
  border-color: #2c3a52;
}

[data-theme="dark"] .school-schedule-substitutions-title {
  color: #d7e2f0;
}

[data-theme="dark"] .school-schedule-substitution-row {
  color: #9bb8d8;
}

.school-schedule-period-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 2px;
  border-top: 1px solid #e2e8f0;
  flex-wrap: wrap;
}

.school-schedule-period-row:first-child { border-top: none; }

[data-theme="dark"] .school-schedule-period-row { border-top-color: rgba(255, 255, 255, 0.08); }

.school-schedule-period-time {
  flex: none;
  width: 130px;
}

.school-schedule-period-time .sspt-ord {
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8896a6;
  margin-bottom: 1px;
}

.school-schedule-period-time-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 2px 4px 2px 0;
  margin: -2px 0 -2px -4px;
  border-radius: 8px;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

.school-schedule-period-time-btn:hover { background: rgba(90, 111, 134, 0.1); }

.school-schedule-period-time-btn .sspt-rng {
  font-family: ui-monospace, monospace;
  font-size: 0.82rem;
  color: #5a6f86;
}

.school-schedule-period-time-btn .sspt-edit {
  font-size: 0.7rem;
  opacity: 0;
}

.school-schedule-period-time-btn:hover .sspt-edit { opacity: 1; }

[data-theme="dark"] .school-schedule-period-time-btn:hover { background: rgba(255, 255, 255, 0.08); }
[data-theme="dark"] .school-schedule-period-time .sspt-ord { color: #6f83a0; }
[data-theme="dark"] .school-schedule-period-time-btn .sspt-rng { color: #9bb8d8; }

.school-schedule-cell-empty {
  flex: 1;
  min-width: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1.5px dashed #d5e0eb;
  color: #8896a6;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.school-schedule-cell-empty:hover { border-color: #1682cf; color: #1682cf; background: rgba(47, 167, 255, 0.05); }

[data-theme="dark"] .school-schedule-cell-empty {
  border-color: rgba(255, 255, 255, 0.16);
  color: #6f83a0;
}

[data-theme="dark"] .school-schedule-cell-empty:hover {
  border-color: #2fa7ff;
  color: #d8e8ff;
  background: rgba(47, 167, 255, 0.08);
}

/* Wraps however many .school-schedule-cell-filled blocks one period has -
   usually one, but a class's second group getting its own teacher for the
   same period stacks a second block here instead of hiding it (see
   slotsFor in school-schedule.js). */
.school-schedule-period-cell {
  flex: 1;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.school-schedule-cell-filled {
  flex: 1;
  min-width: 160px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 6px 7px 12px;
  border-radius: 10px;
  background: #f4f7fb;
  border: 1px solid #e2e8f0;
}

.school-schedule-period-cell .school-schedule-cell-filled {
  flex: none;
  width: 100%;
  min-width: 0;
}

.school-schedule-cell-filled .sscf-cls { font-weight: 800; font-size: 0.86rem; color: #143456; }
.school-schedule-cell-filled .sscf-tch { font-size: 0.76rem; color: #5a6f86; }

[data-theme="dark"] .school-schedule-cell-filled {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .school-schedule-cell-filled .sscf-cls { color: #e8f0ff; }
[data-theme="dark"] .school-schedule-cell-filled .sscf-tch { color: #9bb8d8; }

.school-schedule-cell-filled-edit-btn {
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: rgba(90, 111, 134, 0.12);
  color: #5a6f86;
  cursor: pointer;
  font-size: 0.8rem;
}

.school-schedule-cell-filled-edit-btn:hover { background: rgba(22, 130, 207, 0.18); color: #1682cf; }

[data-theme="dark"] .school-schedule-cell-filled-edit-btn {
  background: rgba(255, 255, 255, 0.08);
  color: #9bb8d8;
}

[data-theme="dark"] .school-schedule-cell-filled-edit-btn:hover {
  background: rgba(47, 167, 255, 0.22);
  color: #d8e8ff;
}

/* Inline "+ Add lesson time" / edit-time row - same slot as a
   .school-schedule-period-row, swapped in while adding/editing. */
.school-schedule-edit-time-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 2px;
  border-top: 1px solid #e2e8f0;
  flex-wrap: wrap;
}

.school-schedule-edit-time-row:first-child { border-top: none; }

[data-theme="dark"] .school-schedule-edit-time-row { border-top-color: rgba(255, 255, 255, 0.08); }

.school-schedule-edit-time-row .ssetr-label {
  width: 130px;
  flex: none;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1682cf;
}

[data-theme="dark"] .school-schedule-edit-time-row .ssetr-label { color: #2fa7ff; }

.school-schedule-edit-time-row .ssetr-spacer { flex: 1; }

.school-schedule-edit-time-row .ssetr-actions {
  display: flex;
  gap: 8px;
}

.school-schedule-time-btn {
  border: none;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  font: inherit;
}

.school-schedule-time-btn.save { background: linear-gradient(135deg, #2fa7ff, #1682cf); color: #ffffff; }
.school-schedule-time-btn.cancel { background: rgba(90, 111, 134, 0.12); color: #5a6f86; }

[data-theme="dark"] .school-schedule-time-btn.cancel {
  background: rgba(255, 255, 255, 0.08);
  color: #9bb8d8;
}

/* ---------- iOS-alarm-style hour/minute wheel picker (assign modal + the
   inline row above) ---------- */
.school-schedule-time-range {
  display: flex;
  align-items: center;
  gap: 10px;
}

.school-schedule-time-range .dash { color: #8896a6; }
[data-theme="dark"] .school-schedule-time-range .dash { color: #6f83a0; }

.wheel-pair {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.wheel-pair .wheel-band {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 34px;
  border-top: 1px solid rgba(90, 111, 134, 0.3);
  border-bottom: 1px solid rgba(90, 111, 134, 0.3);
  background: rgba(22, 130, 207, 0.08);
  border-radius: 8px;
  z-index: 0;
  pointer-events: none;
}

[data-theme="dark"] .wheel-pair .wheel-band {
  border-top-color: rgba(255, 255, 255, 0.18);
  border-bottom-color: rgba(255, 255, 255, 0.18);
  background: rgba(47, 167, 255, 0.1);
}

.wheel {
  position: relative;
  z-index: 1;
  width: 52px;
  height: 170px;
  /* buildWheel() (school-schedule.js) sets padding-top/bottom inline (2
     rows each) so the first/last value can scroll to the center band.
     Without border-box, that inline padding ADDS to the declared height
     (content-box default) instead of living inside it, inflating the
     actual visible viewport well past 170px/5 rows - which desyncs the
     centered .wheel-band overlay (still sized off the intended 170px)
     from the item .active JS picks by scrollTop/rowHeight math. */
  box-sizing: border-box;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  mask-image: linear-gradient(to bottom, transparent 0, black 26%, black 74%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 26%, black 74%, transparent 100%);
}

.wheel::-webkit-scrollbar { display: none; }

.wheel-item {
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, monospace;
  font-size: 1rem;
  color: #8896a6;
  cursor: pointer;
  user-select: none;
  transition: color 0.15s ease, transform 0.15s ease, font-weight 0.15s ease;
}

.wheel-item.active {
  color: #143456;
  font-weight: 800;
  transform: scale(1.08);
}

[data-theme="dark"] .wheel-item { color: #5d738f; }
[data-theme="dark"] .wheel-item.active { color: #e8f0ff; }

.wheel-colon {
  position: relative;
  z-index: 1;
  color: #143456;
  font-weight: 800;
  font-size: 1.05rem;
}

[data-theme="dark"] .wheel-colon { color: #e8f0ff; }

.school-schedule-slot-meta {
  margin: 0 0 20px;
  font-size: 0.82rem;
  color: #5a6f86;
}

[data-theme="dark"] .school-schedule-slot-meta { color: #9bb8d8; }

/* Labeled form field (Time/Class/Teacher on the assign modal) - the rest
   of admin-create-form's selects/inputs get their "label" from a
   placeholder option instead, but the wheel time picker isn't a <select>
   to put a placeholder option on, so this modal spells its labels out. */
.field { margin-bottom: 14px; }

.field label {
  display: block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8896a6;
  margin-bottom: 6px;
}

.field label .field-hint {
  text-transform: none;
  font-weight: 500;
  letter-spacing: normal;
  opacity: 0.85;
}

[data-theme="dark"] .field label { color: #6f83a0; }

.admin-create-schedule-group.is-hidden {
  display: none;
}

.admin-create-homework-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid #c8d5e4;
  border-radius: 10px;
  background: #f3f6fb;
}

.admin-create-homework-group.is-hidden {
  display: none;
}

.admin-toggle-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  width: fit-content;
}

.admin-toggle-switch input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.admin-toggle-slider {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  background: #c8d5e4;
  border-radius: 999px;
  transition: background-color 0.2s ease;
}

.admin-toggle-slider::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(15, 40, 70, 0.25);
  transition: transform 0.2s ease;
}

.admin-toggle-switch input[type="checkbox"]:checked + .admin-toggle-slider {
  background: linear-gradient(135deg, #14b8c4, #0c7a89);
}

.admin-toggle-switch input[type="checkbox"]:checked + .admin-toggle-slider::before {
  transform: translateX(20px);
}

.admin-toggle-switch input[type="checkbox"]:focus-visible + .admin-toggle-slider {
  box-shadow: 0 0 0 3px rgba(20, 184, 196, 0.28);
}

.admin-toggle-label {
  font-size: 0.98rem;
  color: #16395d;
  font-weight: 600;
}

.admin-create-form input:focus,
.admin-create-form select:focus,
.admin-create-form textarea:focus {
  border-color: #2fa7ff;
  box-shadow: 0 0 0 3px rgba(47, 167, 255, 0.18);
}

.admin-create-form textarea {
  min-height: 90px;
  resize: vertical;
}

.mentor-students-card {
  width: min(1100px, 100%);
  padding: 0;
  border: none;
  box-shadow: 0 24px 64px rgba(8,21,70,0.22), 0 4px 16px rgba(8,21,70,0.08);
  border-radius: 24px;
}

.mentor-students-header {
  background: linear-gradient(135deg, #1a3560 0%, #2563EB 100%);
  border-radius: 24px 24px 0 0;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mentor-students-header h3 {
  margin: 0;
  color: #ffffff;
  font-size: 1.25rem;
}

.mentor-students-close-btn {
  border: none;
  background: rgba(255,255,255,0.2);
  color: #ffffff;
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s ease;
}

.mentor-students-close-btn:hover {
  background: rgba(255,255,255,0.35);
}

.mentor-students-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.mentor-add-student-btn {
  border: none;
  background: rgba(255,255,255,0.2);
  color: #ffffff;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.mentor-add-student-btn:hover {
  background: rgba(255,255,255,0.35);
}

.mentor-add-student-card {
  width: min(420px, 100%);
  border: none;
  border-radius: 24px;
  box-shadow: 0 24px 64px rgba(8,21,70,0.22), 0 4px 16px rgba(8,21,70,0.08);
  padding: 0;
}

.mentor-add-student-card .admin-create-form {
  padding: 20px 24px 24px;
}

.mentor-add-student-credentials {
  font-family: "Courier New", monospace;
  font-size: 0.95rem;
  font-weight: 700;
  background: #eef2ff;
  color: #1e293b;
  padding: 8px 12px;
  border-radius: 10px;
  word-break: break-all;
}

[data-theme="dark"] .mentor-add-student-credentials { background: #1a2f48; color: #d0e4f7; }

.mentor-students-body {
  padding: 16px 24px 24px;
}

.mentor-students-count {
  margin: 0 0 14px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #6b7f95;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.mentor-students-btn {
  position: relative;
  /* Anchors don't get box-sizing:border-box from the browser's UA
     stylesheet the way <button> elements do, so this <a>'s height ends up
     40px content + its own padding on top (~60px total) instead of the
     same 40px every other header .btn (all <button>s) renders at -
     visibly taller and mis-aligned with its neighbors on mobile. */
  box-sizing: border-box;
}

#mentor-students-btn {
  position: relative !important;
}

#mentor-homework-btn {
  position: relative !important;
}

.mentor-homework-btn {
  position: relative;
  background: linear-gradient(135deg, #2e7d55, #1f5f41);
  color: #ffffff;
  border: 1px solid transparent;
  padding: 12px 22px;
  border-radius: 11px;
  font-weight: 800;
  font-size: 1.05rem;
  width: fit-content;
}

.mentor-homework-modal {
  /* Must appear above .profile-modal (z-index:1200) */
  z-index: 1350;
}

.mentor-homework-alert {
  margin-top: 10px;
  border-radius: 16px;
  border: 1px solid rgba(200, 213, 228, 0.9);
  background: linear-gradient(180deg, rgba(246, 255, 250, 0.98) 0%, rgba(236, 249, 242, 0.98) 100%);
  padding: 12px 14px;
  color: #184c34;
  font-weight: 800;
  box-shadow: 0 14px 34px rgba(10, 40, 70, 0.08);
}

.mentor-homework-alert-title {
  margin: 0 0 8px;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #1f5f41;
}

.mentor-homework-alert-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  color: #184c34;
}

.mentor-homework-alert-list li {
  font-weight: 800;
}

.mentor-students-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 0;
}

/* Class-group divider inside the grid (only rendered when at least one
   student actually has a class - see openMentorStudentsModal) - spans every
   column so it reads as a section label, same idea as
   .admin-progress-group-header's level dividers but for this card's grid
   layout instead of a single-column list. */
.mentor-students-group-header {
  grid-column: 1 / -1;
  padding: 4px 2px 2px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7f95;
}

.mentor-students-group-header:not(:first-child) {
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid #e8eef6;
}

/* Shown instead of .mentor-students-group-header when a class tile has
   been clicked (see renderMentorStudentsGrouped) - spans the same full
   width so the roster below it doesn't look like it's missing a heading. */
.mentor-students-back-btn {
  grid-column: 1 / -1;
  justify-self: start;
  width: auto;
  margin-bottom: 2px;
}

.mentor-student-card {
  width: min(980px, 100%);
}

.mentor-student-summary {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mentor-student-card .admin-user-info-sections {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mentor-students-student {
  background: #ffffff;
  border: 1px solid #e8eef6;
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 4px 16px rgba(10,40,70,0.07);
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.mentor-students-student:hover {
  box-shadow: 0 8px 28px rgba(37,99,235,0.12);
  transform: translateY(-2px);
}

.mssc-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mssc-avatar {
  width: 46px;
  height: 46px;
  min-width: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.mssc-info {
  flex: 1;
  min-width: 0;
}

.mssc-info h4 {
  margin: 0 0 4px;
  font-size: 1rem;
  color: #0f2a45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mssc-level {
  font-size: 0.72rem;
  font-weight: 800;
  color: #2563EB;
  background: rgba(37,99,235,0.1);
  border-radius: 99px;
  padding: 2px 9px;
  display: inline-block;
  letter-spacing: 0.04em;
}

.mssc-hw-pill {
  flex-shrink: 0;
  background: #DC2626;
  color: #ffffff;
  border-radius: 99px;
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.mssc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mssc-actions .btn {
  flex: 1;
  min-width: 110px;
}

.mssc-progress {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.mssc-progress-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  color: #6b7f95;
}

.mssc-progress-value {
  font-weight: 800;
  font-size: 0.85rem;
}

.mssc-progress-track {
  height: 8px;
  background: #f0f3f8;
  border-radius: 99px;
  overflow: hidden;
}

.mssc-progress-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.4s ease;
}

/* Green/amber/red tone, same 70%/40% thresholds as the dashboard's own
   canvas bar charts (school-admin-modals.js: _percentBarColor) - shared
   here as classes so the class card's inline progress bar and the
   standalone "Average progress" list read the same colors the same way. */
.mssc-progress-fill.is-progress-good  { background: #16a34a; }
.mssc-progress-fill.is-progress-mid   { background: #d97706; }
.mssc-progress-fill.is-progress-low   { background: #dc2626; }
.mssc-progress-value.is-progress-good { color: #16a34a; }
.mssc-progress-value.is-progress-mid  { color: #d97706; }
.mssc-progress-value.is-progress-low  { color: #dc2626; }

[data-theme="dark"] .mssc-progress-fill.is-progress-good  { background: #34d399; }
[data-theme="dark"] .mssc-progress-fill.is-progress-mid   { background: #fbbf24; }
[data-theme="dark"] .mssc-progress-fill.is-progress-low   { background: #f87171; }
[data-theme="dark"] .mssc-progress-value.is-progress-good { color: #34d399; }
[data-theme="dark"] .mssc-progress-value.is-progress-mid  { color: #fbbf24; }
[data-theme="dark"] .mssc-progress-value.is-progress-low  { color: #f87171; }

/* School class card (school-admin-modals.js: renderClasses/renderProgressList)
   - the progress bar is the headline stat, not a line buried in a hint
   paragraph, so it gets its own row instead of sharing .mssc-progress's
   stacked labels-then-track layout (that one's built for a labeled
   "Progress" row above the bar; this is just bar + percent, side by side). */
.school-class-progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 6px;
}

.school-class-progress-row .mssc-progress-track {
  flex: 1;
  height: 10px;
}

.school-class-progress-row .mssc-progress-value {
  font-size: 1rem;
  min-width: 40px;
  text-align: right;
}

.school-class-progress-row--large .mssc-progress-track {
  height: 12px;
}

.school-class-progress-row--large .mssc-progress-value {
  font-size: 1.3rem;
  min-width: 56px;
}

.school-progress-card {
  justify-content: center;
}

.school-class-teachers {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
}

.school-class-teacher-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #35536f;
  background: #eef3f8;
  border-radius: 999px;
  padding: 4px 10px 4px 8px;
}

[data-theme="dark"] .school-class-teacher-chip {
  background: rgba(255, 255, 255, 0.06);
  color: #b8d4f0;
}

.school-class-student-count {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #5a7fa0;
}

/* Groups strip at the top of "Students of {class}" (school-students.js) -
   lets a school_admin split a class into sub-groups (e.g. "Strong"/"Weak"),
   each with its own single teacher. Chips reuse .school-class-teacher-chip's
   pill look but are clickable (data-group-id) to open the same modal for
   editing; the empty-state hint sits inline where the chips would go, so a
   class with zero groups shows one unobtrusive line instead of an empty box. */
.school-class-groups-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e3ebf3;
}

[data-theme="dark"] .school-class-groups-bar {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.school-class-groups-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.school-class-groups-empty-hint {
  font-size: 0.82rem;
  font-weight: 600;
  color: #7891a8;
}

[data-theme="dark"] .school-class-groups-empty-hint {
  color: #6f83a0;
}

.school-group-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  border: 1px solid transparent;
  border-radius: 16px;
  padding: 14px 20px 13px;
  background: #eef3f8;
  cursor: pointer;
  text-align: left;
}

.school-group-chip:hover {
  background: #e0eaf4;
}

[data-theme="dark"] .school-group-chip {
  background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .school-group-chip:hover {
  background: rgba(255, 255, 255, 0.1);
}

.school-group-chip-name {
  font-size: 1.05rem;
  font-weight: 800;
  color: #1a3653;
}

[data-theme="dark"] .school-group-chip-name {
  color: #e8f0ff;
}

.school-group-chip-meta {
  font-size: 0.85rem;
  font-weight: 600;
  color: #5a7fa0;
}

[data-theme="dark"] .school-group-chip-meta {
  color: #9bb8d8;
}

/* No size overrides here on purpose - this used to shrink the button well
   below the standard .btn pill (8px/14px padding, 0.82rem text), making it
   the smallest tappable target in the whole modal. Letting it inherit the
   normal .btn size matches every other action button in this modal. */
.school-group-add-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

/* One extra row inside each student card (school-students.js), only
   rendered once the class actually has at least one group - a class with
   none shows nothing extra here at all. */
.school-student-group-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.school-student-group-label {
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: #7891a8;
}

[data-theme="dark"] .school-student-group-label {
  color: #6f83a0;
}

.school-student-group-select {
  flex: 1;
  min-width: 0;
  font-size: 0.82rem;
  padding: 6px 8px;
}

/* Teachers panel filter chips (school-admin-modals.js: renderTeachersGrid) -
   "By class"/"By role" rows above the teacher grid, one .leaderboard-scope-tab
   pill per option (base-landing.css - already used for the leaderboard's own
   "In Class"/"In Parallel" tabs, same wrap-friendly toggle look asked for
   here, "как в артиклях" (articles.html: .articles-filter-btn) minus that
   page's sliding-pill JS, which assumes a small fixed set and breaks once a
   school has more classes than fit on one line). */
.school-teacher-filter-label {
  margin: 14px 0 6px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6c7f94;
}

.mentor-students-body > .school-teacher-filter-label:first-child {
  margin-top: 0;
}

.school-teacher-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}

.school-teacher-card-roles {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 8px;
}

/* "Add Teacher" form's own role toggle (school-teacher-create-modal) -
   reuses .school-teacher-filter-row's wrap-friendly layout, just for two
   fixed options instead of a dynamic list. */
#school-teacher-create-role-row {
  margin: 0 0 4px;
}

/* Credentials shown once after a teacher is created - labeled rows with a
   copy button each, instead of one dense "username / password" string
   that was hard to read and awkward to actually copy from
   (school-teacher-create-modal, replaces the plain .mentor-add-student-
   credentials box other create forms in this panel still use). */
.school-teacher-credentials-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.school-teacher-credential-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #eef2ff;
  border-radius: 10px;
  padding: 8px 8px 8px 12px;
}

[data-theme="dark"] .school-teacher-credential-row {
  background: #1a2f48;
}

.school-teacher-credential-label {
  flex-shrink: 0;
  min-width: 66px;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #6c7f94;
}

.school-teacher-credential-value {
  flex: 1;
  font-family: "Courier New", monospace;
  font-size: 0.95rem;
  font-weight: 700;
  color: #1e293b;
  word-break: break-all;
}

[data-theme="dark"] .school-teacher-credential-value {
  color: #d0e4f7;
}

.school-teacher-copy-btn {
  flex-shrink: 0;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  background: #dbe4ff;
  color: #1e3a8a;
  transition: background 0.15s, color 0.15s;
}

.school-teacher-copy-btn:hover {
  background: #c7d5ff;
}

.school-teacher-copy-btn.is-copied {
  background: #16a34a;
  color: #ffffff;
}

[data-theme="dark"] .school-teacher-copy-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #cbd8ff;
}

[data-theme="dark"] .school-teacher-copy-btn:hover {
  background: rgba(255, 255, 255, 0.18);
}

[data-theme="dark"] .school-teacher-copy-btn.is-copied {
  background: #22c55e;
  color: #0b1a10;
}

/* "+ New" teacher shortcut next to the English/Homeroom teacher selects in
   #school-class-edit-modal (school-admin-modals.js: openTeacherCreateModal)
   - select keeps flex:1/min-width:0 so a long teacher name in the dropdown
   can't push the button out of the card (same overflow fix as
   .admin-org-actions-row elsewhere in this file). */
.school-mentor-select-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.school-mentor-select-row select {
  flex: 1;
  min-width: 0;
}

.school-mentor-new-btn {
  flex-shrink: 0;
  padding: 10px 14px;
  font-size: 0.85rem;
  white-space: nowrap;
}

.mentor-students-student .btn {
  width: 100%;
  margin-top: 2px;
}

.mentor-students-card-badge {
  top: 12px;
  right: 12px;
}

.mentor-students-homework-pill {
  position: absolute;
  top: 14px;
  right: 14px;
  border-radius: 999px;
  padding: 6px 10px;
  background: #2e7d55;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  box-shadow: 0 10px 20px rgba(46, 125, 85, 0.22);
}

.mentor-students-homework-pill.is-muted {
  background: #9bb7a8;
  box-shadow: none;
}

.mentor-students-homework-note {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  border-radius: 14px;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(255, 244, 244, 0.98) 0%, rgba(255, 235, 235, 0.98) 100%);
  border: 1px solid rgba(224, 74, 74, 0.24);
  color: #7a1d1d;
  font-weight: 900;
}

.mentor-students-student h4 {
  margin: 0;
  font-size: 1.06rem;
  color: #123456;
}

.mentor-students-student p {
  margin: 0;
  color: #4c6075;
  font-weight: 700;
}

.mentor-students-student .mentor-students-progress {
  color: #17633a;
}

.mentor-students-student .btn {
  width: 100%;
}

/* Both width:100% rules above (this one and its near-duplicate earlier in
   this file) assume a .btn sits BELOW .mssc-top as its own full-width row
   - the school_admin's delete-student button instead lives INSIDE
   .mssc-top, next to the avatar/name (same row, not stacked below), which
   doesn't fit that assumption and was stretching to fill the row and
   pushing the name out. Reset back to a small icon button, matching the
   identically-styled delete button already used elsewhere
   (admin-organizations.js's .admin-org-admin-delete-btn). Placed after
   both width:100% rules so normal cascade order (same specificity) picks
   this one, not !important. */
.mssc-top .school-student-delete-btn {
  width: auto;
  flex-shrink: 0;
  padding: 6px 10px;
  font-size: 0.85rem;
  margin-top: 0;
}

.mentor-student-homework-notice {
  margin: 0 0 12px;
  border-radius: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(224, 74, 74, 0.28);
  background: linear-gradient(180deg, rgba(255, 244, 244, 0.98) 0%, rgba(255, 235, 235, 0.98) 100%);
  color: #7a1d1d;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mentor-student-homework-notice .admin-requests-badge {
  position: static;
  transform: none;
}

.mentor-homework-card {
  width: min(1220px, 100%);
}

.mentor-homework-lessons {
  margin-top: 0;
}

.mentor-homework-lesson-card {
  height: 100%;
}

/* Mentor homework cards reuse the View Progress lesson card layout. */
.mentor-homework-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.mentor-homework-checked-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  margin: 10px 0 0;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(126, 209, 154, 0.95);
  background: linear-gradient(180deg, rgba(215, 249, 225, 0.98) 0%, rgba(186, 244, 201, 0.98) 100%);
  color: #0f5b2f;
  font-weight: 900;
  font-size: 0.92rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 6px 14px rgba(24, 122, 66, 0.12);
}

.mentor-homework-download-btn {
  flex: 1 1 220px;
  width: auto;
  background: linear-gradient(135deg, #1f4f7a, #123454);
  color: #ffffff;
  border-radius: 11px;
  font-weight: 900;
  padding: 10px 16px;
  border: 1px solid transparent;
  text-align: center;
  text-decoration: none;
}

.mentor-homework-download-btn.is-disabled,
.mentor-homework-checked-btn.is-disabled {
  background: #c9d2dc;
  color: #6b7c8f;
  cursor: not-allowed;
  box-shadow: none;
}

.mentor-homework-checked-btn {
  flex: 1 1 160px;
  width: auto;
  background: linear-gradient(135deg, #2e7d55, #1f5f41);
  color: #ffffff;
  border-radius: 11px;
  font-weight: 900;
  padding: 10px 16px;
  border: 1px solid transparent;
}

.mentor-homework-review-card {
  text-align: left;
}

.mentor-homework-review-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  text-align: center;
}

.mentor-homework-review-download-btn {
  background: linear-gradient(135deg, #1f4f7a, #123454);
  color: #ffffff;
  border: 1px solid transparent;
  text-decoration: none;
  font-weight: 900;
  padding: 10px 16px;
  border-radius: 12px;
}

.mentor-homework-review-download-btn.is-disabled,
.mentor-homework-review-download-btn[aria-disabled="true"] {
  background: #c9d2dc;
  color: #6b7c8f;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  border-color: transparent;
}

.mentor-homework-review-meta {
  display: none;
}

.mentor-homework-review-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.mentor-homework-review-label {
  font-size: 0.9rem;
  font-weight: 900;
  color: #16395d;
}

.mentor-homework-review-score,
.mentor-homework-review-comment {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid #d5e0eb;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 0.96rem;
  font-weight: 700;
}

.mentor-homework-review-comment {
  min-height: 90px;
  resize: vertical;
}

.mentor-homework-review-reject-btn {
  background: linear-gradient(180deg, #e07b1a 0%, #b55c0a 100%);
  color: #ffffff;
  border-radius: 12px;
}

.mentor-homework-review-message {
  margin: 0;
  min-height: 18px;
  font-size: 0.92rem;
  font-weight: 800;
  color: #b02a1f;
}

.mentor-homework-review-message.is-success {
  color: #17633a;
}

/* "Ask me later" on the lesson-trigger Yes/No modal (mentor.html) -
   deliberately NOT a third grid button next to Yes/No (that modal's shared
   .admin-delete-confirm-actions grid is a fixed 2-column layout meant for
   exactly one pair of actions) - a plain understated text link keeps it
   visually secondary to the real Yes/No decision, matching the muted-text
   weight already used by .admin-create-hint nearby. */
.mentor-lesson-trigger-later-link {
  display: block;
  margin: 10px auto 0;
  padding: 4px 8px;
  background: none;
  border: none;
  color: #5a6f86;
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

[data-theme="dark"] .mentor-lesson-trigger-later-link {
  color: #9bb8d8;
}

.admin-create-hint {
  margin: 0;
  font-size: 0.84rem;
  color: #5a6f86;
}

/* Substitute-teacher panel (mentor.html) - a separate, opt-in list next to
   the forced Yes/No lesson-trigger modal, not part of it: standing in for
   an absent colleague is something a mentor chooses to do per sibling
   group, never a blocking prompt like their own class's confirmation. */
.mentor-lesson-trigger-substitute-panel {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  max-width: 320px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(20, 30, 50, 0.16);
  border: 1px solid #e3e8ef;
}

.mentor-lesson-trigger-substitute-label {
  margin: 0 0 10px;
  font-size: 0.84rem;
  font-weight: 700;
  color: #33455c;
}

.mentor-lesson-trigger-substitute-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mentor-lesson-trigger-substitute-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e3e8ef;
}

.mentor-lesson-trigger-substitute-row:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.mentor-lesson-trigger-substitute-text {
  margin: 0;
  font-size: 0.86rem;
  color: #33455c;
}

.mentor-lesson-trigger-substitute-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.mentor-lesson-trigger-substitute-no-btn,
.mentor-lesson-trigger-substitute-yes-btn {
  flex-shrink: 0;
  padding: 6px 14px;
  font-size: 0.8rem;
}

[data-theme="dark"] .mentor-lesson-trigger-substitute-panel {
  background: #1b2536;
  border-color: #2c3a52;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .mentor-lesson-trigger-substitute-row {
  border-color: #2c3a52;
}

[data-theme="dark"] .mentor-lesson-trigger-substitute-label,
[data-theme="dark"] .mentor-lesson-trigger-substitute-text {
  color: #d7e2f0;
}

@media (max-width: 480px) {
  .mentor-lesson-trigger-substitute-panel {
    left: 16px;
    right: 16px;
    max-width: none;
  }
}

.admin-create-message {
  margin: 0;
  min-height: 18px;
  font-size: 0.92rem;
  font-weight: 700;
  color: #b02a1f;
}

.admin-create-message.is-success {
  color: #17633a;
}

.admin-mentor-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #c8d5e4;
  background: #eef3f8;
}

.admin-create-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.admin-create-cancel-btn {
  background: #eef3f8;
  color: #16395d;
  border: 1px solid rgba(224, 49, 49, 0.28);
}

.admin-create-submit-btn {
  background: linear-gradient(135deg, #2fa7ff, #1682cf);
}
.admin-create-submit-btn.is-disabled {
  background: #c9d2dc;
  color: #6b7c8f;
  cursor: not-allowed;
  box-shadow: none;
}

.admin-progress-modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 25, 45, 0.44);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 1100;
}

.admin-requests-modal,
.admin-devices-modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 25, 45, 0.44);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 1100;
}

.admin-requests-modal.is-open,
.admin-devices-modal.is-open {
  display: flex;
}

.admin-requests-modal-card,
.admin-devices-modal-card {
  width: min(1220px, 100%);
  max-height: 92vh;
  overflow: auto;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #cfdae6;
  padding: 18px;
}

.admin-requests-topbar,
.admin-devices-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.admin-requests-topbar h3,
.admin-devices-topbar h3 {
  margin: 0;
  color: #143456;
  font-size: 1.45rem;
}

.admin-requests-close-btn,
.admin-devices-close-btn {
  background: #eef3f8;
  color: #16395d;
}

.admin-requests-note,
.admin-devices-note {
  margin: 0 0 12px;
  color: #35536f;
  font-weight: 700;
}

.admin-manage-modal,
.admin-renewals-modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 25, 45, 0.44);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 1200;
}

.admin-manage-modal.is-open,
.admin-renewals-modal.is-open {
  display: flex;
}

.admin-create-queue-modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 25, 45, 0.44);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 1200;
}

.admin-create-queue-modal.is-open {
  display: flex;
}

.admin-create-queue-modal-card {
  width: min(980px, 100%);
  max-height: 92vh;
  overflow: auto;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #cfdae6;
  padding: 18px;
}

.admin-create-queue-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.admin-create-queue-top-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.admin-create-queue-manual-btn {
  background: #143456;
  color: #ffffff;
}

.admin-create-queue-manual-btn:hover {
  filter: brightness(1.05);
}

.admin-create-queue-topbar h3 {
  margin: 0;
  color: #143456;
  font-size: 1.45rem;
}

.admin-create-queue-close-btn {
  background: #eef3f8;
  color: #16395d;
}

.admin-create-queue-note {
  margin: 0 0 12px;
  color: #35536f;
  font-weight: 700;
}

.admin-create-queue-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.admin-create-queue-card {
  border-radius: 16px;
  border: 1px solid #d7e2ef;
  background: #f7fafc;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 10px 22px rgba(15, 32, 52, 0.08);
}

.admin-create-queue-card.is-created {
  opacity: 0.7;
}

.admin-create-queue-card h4 {
  margin: 0;
  font-size: 1.1rem;
  color: #123456;
}

.admin-create-queue-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.admin-create-queue-meta {
  margin: 0;
  color: #40566d;
  font-weight: 600;
}

.admin-create-queue-actions {
  margin-top: auto;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.admin-create-queue-create-btn {
  background: linear-gradient(135deg, #2fa7ff, #1682cf);
}

.admin-create-queue-delete-btn {
  background: #f2d7d7;
  color: #7a1d1d;
}

.admin-manage-modal-card,
.admin-renewals-modal-card {
  width: min(820px, 100%);
  max-height: 92vh;
  overflow: auto;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #cfdae6;
  padding: 24px;
}

.admin-manage-topbar,
.admin-renewals-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.admin-manage-topbar h3,
.admin-renewals-topbar h3 {
  margin: 0;
  color: #143456;
  font-size: 1.45rem;
}

.admin-manage-close-btn,
.admin-renewals-close-btn {
  background: #eef3f8;
  color: #16395d;
  border-radius: 999px;
  border: none;
  padding: 6px 14px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  line-height: 1.4;
  transition: background 0.15s;
}
.admin-manage-close-btn:hover,
.admin-renewals-close-btn:hover {
  background: #dde8f4;
}
[data-theme="dark"] .admin-manage-close-btn,
[data-theme="dark"] .admin-renewals-close-btn {
  background: #1a3050;
  color: #b8d4f0;
}
[data-theme="dark"] .admin-manage-close-btn:hover,
[data-theme="dark"] .admin-renewals-close-btn:hover {
  background: #243e60;
}

.admin-renewals-top-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.admin-mentors-top-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.admin-payment-approval-btn {
  background: linear-gradient(135deg, #34d399, #16a34a);
  color: #ffffff;
  border-radius: 999px;
}

.admin-homework-toggle-btn {
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.02em;
  transition: background 0.15s ease, color 0.15s ease;
}

.admin-homework-toggle-btn[data-enabled="true"] {
  background: linear-gradient(135deg, #34d399, #16a34a);
  color: #ffffff;
}

.admin-homework-toggle-btn[data-enabled="false"] {
  background: #e2e8f0;
  color: #51647a;
  box-shadow: inset 0 0 0 1px rgba(81, 100, 122, 0.25);
}

.admin-manage-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 20px 20px;
}

.admin-manage-action-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  background: #f7faff;
  color: #0a1f33;
  border: 1px solid #dde8f4;
  border-left: 4px solid #64748b;
  border-radius: 999px;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
  position: relative;
  box-shadow: none;
}

.admin-manage-action-btn:hover {
  background: #eef5ff;
  box-shadow: 0 2px 10px rgba(20,50,90,.1);
  transform: translateX(2px);
}

.amab-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  width: 32px;
  text-align: center;
}

.amab-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.amab-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0a1f33;
  display: flex;
  align-items: center;
  gap: 6px;
}

.amab-desc {
  font-size: 0.78rem;
  color: #6a8aaa;
  font-weight: 400;
}

.amab-arrow {
  font-size: 1.4rem;
  color: #b0cce8;
  flex-shrink: 0;
  line-height: 1;
}

.admin-manage-action-btn.is-create   { border-left-color: #10b981; }
.admin-manage-action-btn.is-renewals { border-left-color: #3b82f6; }
.admin-manage-action-btn.is-requests { border-left-color: #0ea5e9; }
.admin-manage-action-btn.is-mentor   { border-left-color: #8b5cf6; }
.admin-manage-action-btn.is-schools  { border-left-color: #f59e0b; }
.admin-manage-action-btn.is-devices  { border-left-color: #64748b; }
.admin-manage-action-btn.is-danger   { border-left-color: #ef4444; }

.admin-manage-action-btn.is-danger .amab-title { color: #dc2626; }
.admin-manage-action-btn.is-danger:hover { background: #fff5f5; }

[data-theme="dark"] .admin-manage-action-btn { background: #0e1c32; border-color: rgba(255,255,255,.08); color: #dde8f8; }
[data-theme="dark"] .admin-manage-action-btn:hover { background: #162840; }
[data-theme="dark"] .amab-title { color: #dde8f8; }
[data-theme="dark"] .amab-desc { color: #6a9abf; }
[data-theme="dark"] .amab-arrow { color: #3a6a9a; }
[data-theme="dark"] .admin-manage-action-btn.is-danger .amab-title { color: #f87171; }
[data-theme="dark"] .admin-manage-action-btn.is-danger:hover { background: #2a1010; }

.admin-renewals-note {
  margin: 0 0 12px;
  color: #35536f;
  font-weight: 700;
}

.admin-renewals-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-renewals-action-btn {
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 700;
  border: 1px solid #d5e0eb;
  background: #eef3f8;
  color: #16395d;
}

.admin-renewals-action-btn.is-primary {
  background: linear-gradient(135deg, #1f4f7a, #123454);
  color: #ffffff;
  border: none;
}

.admin-renewals-school-note {
  font-size: 0.78rem;
  font-weight: 600;
  color: #6a7f94;
  align-self: center;
  cursor: help;
}

[data-theme="dark"] .admin-renewals-school-note {
  color: #8ba3ba;
}

.admin-renewals-delete-btn {
  background: #fff0f0 !important;
  border-color: rgba(220, 60, 60, 0.25) !important;
  color: #c0392b !important;
  padding: 8px 10px !important;
  font-size: 0.95rem;
}

.admin-renewals-delete-btn:hover {
  background: #fde0e0 !important;
  border-color: rgba(220, 60, 60, 0.5) !important;
}

[data-theme="dark"] .admin-renewals-delete-btn {
  background: rgba(220, 60, 60, 0.12) !important;
  border-color: rgba(220, 60, 60, 0.3) !important;
  color: #f08080 !important;
}

[data-theme="dark"] .admin-renewals-delete-btn:hover {
  background: rgba(220, 60, 60, 0.22) !important;
}

.admin-payments-modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 25, 45, 0.44);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 1200;
  overflow: hidden;
}

.admin-payments-modal.is-open {
  display: flex;
}

.admin-payments-modal-card {
  width: min(840px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  touch-action: pan-y;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #cfdae6;
  padding: 18px;
}

.admin-payments-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.admin-payments-topbar h3 {
  margin: 0;
  color: #143456;
  font-size: 1.45rem;
}

.admin-payments-close-btn {
  background: #eef3f8;
  color: #16395d;
  border-radius: 12px;
}

.admin-payment-form {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 1.2fr auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

.admin-payment-form input[type="text"],
.admin-payment-form input[type="date"],
.admin-payment-form input[type="file"] {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #d5e0eb;
  font-size: 0.95rem;
}

.admin-payment-submit-btn {
  background: linear-gradient(180deg, #214e78 0%, #0f375c 100%);
  color: #ffffff;
  border-radius: 12px;
  padding: 10px 16px;
  font-weight: 800;
}

.admin-payment-message {
  grid-column: 1 / -1;
  margin: 0;
  color: #35536f;
  font-weight: 700;
}

.admin-delete-modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 25, 45, 0.44);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 1200;
}

.admin-delete-modal.is-open {
  display: flex;
}

.admin-delete-modal-card {
  width: min(840px, 100%);
  max-height: 92vh;
  overflow: auto;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #cfdae6;
  padding: 18px;
}

.admin-delete-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.admin-delete-topbar h3 {
  margin: 0;
  color: #143456;
  font-size: 1.45rem;
}

.admin-delete-close-btn {
  background: #eef3f8;
  color: #16395d;
  border-radius: 12px;
}

.admin-delete-note {
  margin: 0 0 12px;
  color: #35536f;
  font-weight: 700;
}

/* Delete Users — card list */
.del-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.del-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #e8f0f8;
  background: #f7fafd;
  max-height: 200px;
  overflow: hidden;
  transition: background 0.15s, opacity 0.28s ease, max-height 0.28s ease, padding 0.28s ease, border-width 0.28s ease;
}

.del-item:hover {
  background: #eef4fb;
}

.del-item.is-removing {
  opacity: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
  pointer-events: none;
}

.del-item-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  color: #fff;
  flex-shrink: 0;
}

.del-item-info {
  flex: 1;
  min-width: 0;
}

.del-item-name {
  margin: 0;
  font-weight: 600;
  color: #143456;
  font-size: 0.92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.del-item-user {
  margin: 0;
  font-size: 0.8rem;
  color: #6b8aaa;
}

.del-item-level {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
  background: #eef2ff;
  color: #4338ca;
}

[data-theme="dark"] .del-item-level { background: #241a4a; color: #a5b4fc; }

.admin-class-bulk-add {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #dbe6f2;
}

[data-theme="dark"] .admin-class-bulk-add { border-top-color: #1a2f48; }

.admin-class-bulk-add h4 {
  margin: 0 0 6px;
  font-size: 0.95rem;
  color: #143456;
}

[data-theme="dark"] .admin-class-bulk-add h4 { color: #d0e4f7; }

.admin-class-bulk-add textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 0.85rem;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #cddcea;
  resize: vertical;
}

[data-theme="dark"] .admin-class-bulk-add textarea {
  background: #0e1e30;
  border-color: #1a2f48;
  color: #d0e4f7;
}

.admin-class-bulk-results {
  margin-top: 8px;
  max-height: 160px;
  overflow-y: auto;
}

.admin-class-bulk-result-row {
  margin: 0;
  padding: 4px 0;
  font-size: 0.82rem;
}

.admin-class-bulk-result-row.is-ok { color: #0f9d58; }
.admin-class-bulk-result-row.is-error { color: #d93025; }
/* Teacher import: account created but not every class assignment
   succeeded - distinct from a full failure (nothing created) or a full
   success, so it gets its own amber tone rather than being lumped into
   either. */
.admin-class-bulk-result-row.is-partial { color: #b06a00; }

[data-theme="dark"] .admin-class-bulk-result-row.is-ok { color: #4ade80; }
[data-theme="dark"] .admin-class-bulk-result-row.is-error { color: #f87171; }
[data-theme="dark"] .admin-class-bulk-result-row.is-partial { color: #fbbf24; }

.admin-class-bulk-file {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed #dbe6f2;
}

[data-theme="dark"] .admin-class-bulk-file { border-top-color: #1a2f48; }

/* Role picker next to the teacher-import "Choose file" button - lives
   outside .admin-create-form, so it needs its own (small, matching) select
   styling rather than relying on the form-scoped `.admin-create-form
   select` rule above. */
.bulk-import-role-select {
  padding: 9px 10px;
  border: 1px solid rgba(240, 180, 41, 0.5);
  border-radius: 10px;
  font-size: 0.95rem;
  background: #ffffff;
  color: #16395d;
  outline: none;
}

[data-theme="dark"] .bulk-import-role-select {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(240, 180, 41, 0.35);
  color: #d8e8ff;
}

/* ── File-based bulk import preview table (shared: admin.html + school.html) ── */

.bulk-import-preview-table-wrap {
  max-height: 340px;
  overflow: auto;
  border: 1px solid #dbe6f2;
  border-radius: 10px;
  margin: 8px 0;
}

[data-theme="dark"] .bulk-import-preview-table-wrap { border-color: #1a2f48; }

.bulk-import-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.bulk-import-preview-table th,
.bulk-import-preview-table td {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid #eef3f9;
  white-space: nowrap;
}

.bulk-import-preview-table th {
  position: sticky;
  top: 0;
  background: #f4f8fc;
  color: #143456;
  font-weight: 600;
}

[data-theme="dark"] .bulk-import-preview-table th {
  background: #0e1e30;
  color: #d0e4f7;
}

[data-theme="dark"] .bulk-import-preview-table td { border-bottom-color: #1a2f48; }

.bulk-import-row.is-ok td:last-child { color: #0f9d58; }
.bulk-import-row.is-error { background: rgba(217, 48, 37, 0.06); }
.bulk-import-row.is-error td:last-child { color: #d93025; }

[data-theme="dark"] .bulk-import-row.is-ok td:last-child { color: #4ade80; }
[data-theme="dark"] .bulk-import-row.is-error { background: rgba(248, 113, 113, 0.1); }
[data-theme="dark"] .bulk-import-row.is-error td:last-child { color: #f87171; }

/* Inline "fill in the missing field right here" input/select on an
   error row - a visibly red outline is the point (same red the row itself
   already gets), not just a plain form field, so it reads as "this still
   needs filling in" at a glance. */
.bulk-import-edit-input {
  width: 100%;
  min-width: 110px;
  padding: 3px 6px;
  font-size: 0.82rem;
  font-family: inherit;
  border: 1px solid #d93025;
  border-radius: 6px;
  background: #fff;
  color: #143456;
}

.bulk-import-edit-input:focus {
  outline: none;
  border-color: #1763c9;
  box-shadow: 0 0 0 2px rgba(23, 99, 201, 0.2);
}

[data-theme="dark"] .bulk-import-edit-input {
  background: #0e1e30;
  color: #d0e4f7;
  border-color: #f87171;
}

[data-theme="dark"] .bulk-import-edit-input:focus { border-color: #4ade80; }

[data-theme="dark"] .del-item {
  background: #0e1e30;
  border-color: #1a2f48;
}
[data-theme="dark"] .del-item:hover { background: #132540; }
[data-theme="dark"] .del-item-name { color: #d0e4f7; }
[data-theme="dark"] .del-item-user { color: #5a7fa0; }

/* Mentors — card grid */
.mentors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 4px;
}

.mentor-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid #dde8f4;
  background: #f7fafd;
  transition: box-shadow 0.15s;
}

.mentor-card:hover {
  box-shadow: 0 4px 16px rgba(20, 52, 86, 0.1);
}

.mentor-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mentor-card-avatar {
  flex-shrink: 0;
}

.mentor-card-avatar-img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.mentor-card-avatar-initials {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
}