.school-module {
  min-width: 0;
  max-width: 100%;
  padding: var(--ss-space-4);
}

.school-module .module-back {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  border: 1px solid var(--ss-border-default);
  border-radius: var(--ss-radius);
  background: var(--ss-bg-secondary);
  color: var(--ss-text-secondary);
  cursor: pointer;
}

.school-module .module-back:focus-visible {
  outline: 3px solid var(--ss-blue-300);
  outline-offset: 2px;
}

@media (min-width: 769px) {
  .school-module {
    width: calc(100vw - 260px - (var(--ss-space-6) * 2));
  }
}

.school-tabs {
  display: flex;
  gap: var(--ss-space-1);
  border-bottom: 1px solid var(--ss-border-default);
  margin-bottom: var(--ss-space-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.school-tabs button {
  min-height: 44px;
  padding: var(--ss-space-2) var(--ss-space-4);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--ss-text-secondary);
  font-size: var(--ss-text-sm);
  font-weight: var(--ss-font-bold);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--ss-transition-fast);
}

.school-tabs button.active {
  color: var(--ss-text-brand);
  border-bottom-color: var(--ss-text-brand);
}

.school-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ss-space-4);
}

.school-form .form-section {
  border: 1px solid var(--ss-border-default);
  border-radius: var(--ss-radius);
  padding: var(--ss-space-4);
  background: var(--ss-bg-primary);
}

.school-form label {
  display: block;
  margin: var(--ss-space-1) 0;
  color: var(--ss-text-secondary);
  font-size: var(--ss-text-xs);
  font-weight: var(--ss-font-extrabold);
}

.school-form input,
.school-form textarea,
.school-form select {
  width: 100%;
  min-height: 44px;
  padding: var(--ss-space-2);
  border: 1px solid var(--ss-border-strong);
  border-radius: var(--ss-radius-sm);
  background: var(--ss-bg-primary);
  color: var(--ss-text-primary);
  font: inherit;
  font-size: var(--ss-text-sm);
}

.school-table {
  width: 100%;
  border-collapse: collapse;
}

.school-table th,
.school-table td {
  padding: var(--ss-space-3);
  border-bottom: 1px solid var(--ss-border-subtle);
  text-align: left;
  font-size: var(--ss-text-sm);
}

.school-table th {
  color: var(--ss-text-secondary);
  font-size: var(--ss-text-xs);
  font-weight: var(--ss-font-extrabold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.school-role-badge {
  display: inline-flex;
  align-items: center;
  background: var(--ss-bg-secondary);
  padding: var(--ss-space-1) var(--ss-space-2);
  border-radius: var(--ss-radius-full);
  color: var(--ss-text-secondary);
  font-size: var(--ss-text-xs);
  font-weight: var(--ss-font-extrabold);
  margin-right: var(--ss-space-1);
}

.school-status.active { color: var(--ss-emerald-700); }
.school-status.inactive { color: var(--ss-coral-700); }

.school-staff-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ss-space-3);
  margin-bottom: var(--ss-space-4);
}

.school-actions {
  display: flex;
  gap: var(--ss-space-2);
}

.student-workspace {
  min-width: 0;
  max-width: 1180px;
  margin: 0 auto;
}

.student-workspace__header,
.student-toolbar,
.student-record,
.student-record__identity,
.student-record__facts,
.student-record__status,
.student-invite-status {
  display: flex;
  align-items: center;
}

.student-workspace__header {
  justify-content: space-between;
  gap: var(--ss-space-4);
  margin-bottom: var(--ss-space-5);
}

.student-workspace__header h3,
.student-record h3 {
  margin: 0 0 var(--ss-space-1);
  color: var(--ss-text-primary);
}

.student-workspace__header p,
.student-record p,
.student-draft-warning p,
.student-parent-results p {
  margin: 0;
  color: var(--ss-text-secondary);
}

.student-toolbar {
  justify-content: space-between;
  gap: var(--ss-space-3);
  margin-bottom: var(--ss-space-4);
}

.student-status-filter {
  display: inline-flex;
  gap: var(--ss-space-1);
  padding: var(--ss-space-1);
  border-radius: var(--ss-radius-full);
  background: var(--ss-bg-secondary);
}

.student-status-filter button {
  min-height: 40px;
  padding: 0 var(--ss-space-3);
  border: 0;
  border-radius: var(--ss-radius-full);
  background: transparent;
  color: var(--ss-text-secondary);
  font: inherit;
  font-size: var(--ss-text-sm);
  font-weight: var(--ss-font-bold);
  cursor: pointer;
}

.student-status-filter button.active {
  background: var(--ss-bg-primary);
  color: var(--ss-text-brand);
  box-shadow: 0 3px 10px rgba(7, 26, 61, 0.12);
}

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

.student-search svg {
  position: absolute;
  top: 50%;
  left: var(--ss-space-3);
  width: 18px;
  transform: translateY(-50%);
  color: var(--ss-text-secondary);
  pointer-events: none;
}

.student-search input {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--ss-space-3) 0 42px;
  border: 1px solid var(--ss-border-strong);
  border-radius: var(--ss-radius-full);
  background: var(--ss-bg-primary);
  color: var(--ss-text-primary);
  font: inherit;
}

.student-search input:focus,
.student-status-filter button:focus-visible,
.student-parent-results button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ss-text-brand) 30%, transparent);
  outline-offset: 2px;
}

.student-draft-warning {
  display: flex;
  align-items: flex-start;
  gap: var(--ss-space-3);
  margin-bottom: var(--ss-space-4);
  padding: var(--ss-space-3) var(--ss-space-4);
  border: 1px solid var(--ss-amber-300, #f5c56a);
  border-radius: var(--ss-radius);
  background: var(--ss-amber-50, #fff8e7);
  color: var(--ss-amber-900, #593600);
}

.student-draft-warning svg {
  flex: 0 0 auto;
  width: 20px;
  margin-top: 2px;
}

.student-draft-warning p {
  max-width: 72ch;
  margin-top: var(--ss-space-1);
  color: inherit;
}

.student-record-list {
  border-top: 1px solid var(--ss-border-default);
}

.student-record {
  min-height: 92px;
  gap: var(--ss-space-4);
  padding: var(--ss-space-3) 0;
  border-bottom: 1px solid var(--ss-border-default);
}

.student-record__identity {
  flex: 1 1 30%;
  min-width: 210px;
  gap: var(--ss-space-3);
}

.student-record__initials {
  display: grid;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 14px;
  background: var(--ss-bg-brand-subtle, #eaf2ff);
  color: var(--ss-text-brand);
  font-weight: var(--ss-font-extrabold);
}

.student-record__facts {
  flex: 2 1 45%;
  gap: var(--ss-space-5);
}

.student-record__facts span {
  display: grid;
  gap: 2px;
  min-width: 145px;
  color: var(--ss-text-primary);
  font-size: var(--ss-text-sm);
}

.student-record__facts b {
  color: var(--ss-text-secondary);
  font-size: var(--ss-text-xs);
}

.student-record__facts small {
  color: var(--ss-amber-800, #704500);
  font-weight: var(--ss-font-bold);
}

.student-record__status {
  justify-content: flex-end;
  gap: var(--ss-space-3);
  margin-left: auto;
}

.student-detail-readonly dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ss-space-3);
  margin: var(--ss-space-4) 0;
}

.student-detail-readonly dl div {
  padding: var(--ss-space-3);
  border-radius: var(--ss-radius-sm);
  background: var(--ss-bg-secondary);
}

.student-detail-readonly dt {
  color: var(--ss-text-secondary);
  font-size: var(--ss-text-xs);
  font-weight: var(--ss-font-bold);
}

.student-detail-readonly dd {
  margin: var(--ss-space-1) 0 0;
  color: var(--ss-text-primary);
  font-weight: var(--ss-font-bold);
}

.student-detail-readonly__notice,
.student-password-notice {
  color: var(--ss-text-secondary);
  font-size: var(--ss-text-sm);
}

.student-parent-choice {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ss-space-3);
  padding: var(--ss-space-3);
  border: 1px solid var(--ss-border-default);
  border-radius: var(--ss-radius);
}

.student-parent-choice legend {
  padding: 0 var(--ss-space-1);
  color: var(--ss-text-primary);
  font-weight: var(--ss-font-bold);
}

.student-parent-choice label {
  display: inline-flex;
  align-items: center;
  gap: var(--ss-space-2);
  min-height: 44px;
  cursor: pointer;
}

.student-parent-fields {
  padding: var(--ss-space-3);
  border-radius: var(--ss-radius);
  background: var(--ss-bg-secondary);
}

.student-parent-fields > input[type="search"] {
  width: 100%;
  min-height: 44px;
  margin-top: var(--ss-space-1);
  padding: 0 var(--ss-space-3);
  border: 1px solid var(--ss-border-strong);
  border-radius: var(--ss-radius-sm);
  background: var(--ss-bg-primary);
  color: var(--ss-text-primary);
  font: inherit;
}

.student-parent-results {
  display: grid;
  gap: var(--ss-space-2);
  margin-top: var(--ss-space-2);
}

.student-parent-results button {
  display: flex;
  justify-content: space-between;
  gap: var(--ss-space-3);
  min-height: 44px;
  padding: var(--ss-space-2) var(--ss-space-3);
  border: 1px solid var(--ss-border-default);
  border-radius: var(--ss-radius-sm);
  background: var(--ss-bg-primary);
  color: var(--ss-text-primary);
  text-align: left;
  cursor: pointer;
}

.student-parent-results button.selected {
  border-color: var(--ss-text-brand);
  box-shadow: 0 3px 10px rgba(7, 26, 61, 0.12);
}

.student-parent-results span {
  color: var(--ss-text-secondary);
}

.student-invite-status {
  gap: var(--ss-space-3);
  margin-bottom: var(--ss-space-3);
  color: var(--ss-text-secondary);
}

.student-invite-status b {
  padding: var(--ss-space-1) var(--ss-space-2);
  border-radius: var(--ss-radius-full);
  background: var(--ss-amber-100, #ffedbf);
  color: var(--ss-amber-900, #593600);
  font-size: var(--ss-text-xs);
}

@media (max-width: 1024px) {
  .student-workspace__header,
  .student-toolbar,
  .student-record {
    align-items: stretch;
    flex-direction: column;
  }

  .student-search,
  .student-workspace__header .ss-button {
    width: 100%;
  }

  .student-record__identity {
    min-width: 0;
  }

  .student-record__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ss-space-3);
  }

  .student-record__facts span {
    min-width: 0;
  }

  .student-record__status {
    justify-content: space-between;
    margin-left: 0;
  }
}

@media (max-width: 768px) {
  .school-staff-header {
    flex-direction: column;
    align-items: stretch;
  }

  .school-actions {
    flex-wrap: wrap;
  }

  .school-table th,
  .school-table td {
    padding: var(--ss-space-2);
  }

}

@media (max-width: 480px) {
  .school-module { padding: var(--ss-space-3); }
  .student-status-filter { width: 100%; }
  .student-status-filter button { flex: 1; }
  .student-record__facts,
  .student-detail-readonly dl { grid-template-columns: 1fr; }
  .student-parent-results button { flex-direction: column; }
}