/* Shared Admin and Coordinator Students presentation. The Staff shell owns the gutter. */
#students .students-presentation {
  box-sizing: border-box;
  container-type: inline-size;
  width: 100%;
  max-width: 1440px;
  min-width: 0;
  margin-inline: auto;
  padding: 0 0 var(--staff-foundation-space-6, 24px);
  color: var(--staff-foundation-text);
}
#students .students-presentation-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--staff-foundation-space-4, 16px);
  min-width: 0;
  margin: 0 0 var(--staff-foundation-space-6, 24px);
}
#students .students-presentation-header h1 {
  margin: 0;
  color: var(--staff-foundation-text);
  font-size: var(--staff-foundation-type-page, 2rem);
  font-weight: 750;
  letter-spacing: -.035em;
  line-height: 1.15;
}
#students .students-presentation-header :is(.subtitle, p) {
  max-width: 76ch;
  margin: var(--staff-foundation-space-2, 8px) 0 0;
  color: var(--staff-foundation-text-muted);
  line-height: 1.55;
}
#students .students-presentation-surface {
  box-sizing: border-box;
  min-width: 0;
  padding: var(--staff-foundation-space-5, 20px);
  border: 1px solid var(--staff-foundation-border);
  border-radius: var(--staff-foundation-radius-surface, 16px);
  background: var(--staff-foundation-surface);
  box-shadow: var(--staff-foundation-elevation-surface, 0 7px 22px rgba(30,26,64,.05));
}
#students .students-presentation-controls {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: var(--staff-foundation-space-3, 12px);
  min-width: 0;
  margin: 0 0 var(--staff-foundation-space-3, 12px);
  padding-bottom: var(--staff-foundation-space-4, 16px);
  border-bottom: 1px solid var(--staff-foundation-border);
}
#students .students-presentation-controls label {
  display: block;
  width: 100%;
  margin-bottom: 4px;
  color: var(--staff-foundation-text-muted);
  font-size: .8rem;
  font-weight: 700;
}
#students .students-presentation-controls :is(.staff-students-search, .coord-student-search) { flex: 1 1 280px; min-width: 0; }
#students .students-presentation-controls .staff-students-filter { flex: 0 1 190px; min-width: 0; }
#students .students-presentation-controls :is(input, select, button) {
  box-sizing: border-box;
  min-height: var(--staff-foundation-interaction-height, 44px);
}
#students .students-presentation-controls input { width: 100%; }
#students .students-presentation-controls .coord-student-search input { border: 1px solid var(--staff-foundation-border); border-radius: var(--staff-foundation-radius-control, 8px); background: var(--staff-foundation-surface); color: var(--staff-foundation-text); padding: 10px 12px; font: inherit; }
#students .students-presentation-controls #coord-student-count { align-self: center; color: var(--staff-foundation-text-muted); }
#students .students-presentation-state { color: var(--staff-foundation-text-muted); font-size: .88rem; line-height: 1.5; }
#students .students-presentation-state[data-state="ready"] { margin: 0 0 var(--staff-foundation-space-3, 12px); }
#students .students-presentation-state:is([data-state="loading"],[data-state="empty"],[data-state="error"],[data-state="denied"]) {
  margin: 0 0 var(--staff-foundation-space-3, 12px);
  padding: var(--staff-foundation-space-4, 16px);
  border: 1px solid var(--staff-foundation-border);
  border-radius: var(--staff-foundation-radius-control, 8px);
  background: var(--staff-foundation-surface-soft);
}
#students .students-presentation-state:is([data-state="error"],[data-state="denied"]) { border-inline-start: 4px solid var(--staff-foundation-status-warning); }
#students .students-presentation-state[data-state="error"] { border-inline-start-color: var(--staff-foundation-status-error); }
#students .students-presentation-state p { margin: 0; }
#students .students-presentation-state button { margin-top: var(--staff-foundation-space-3, 12px); }
#students .students-presentation-table-wrap { max-width: 100%; min-width: 0; overflow-x: auto; }
#students .students-presentation-table-wrap table { width: 100%; border-collapse: collapse; }
#students .students-presentation-admin .students-presentation-table-wrap table { min-width: 900px; }
#students #coordinator-students-root .students-presentation-table-wrap table { min-width: 840px; }
#students .students-presentation-table-wrap :is(th,td) {
  padding: 12px 10px;
  border-bottom: 1px solid var(--staff-foundation-border);
  text-align: left;
  vertical-align: top;
}
#students .students-presentation-table-wrap th { color: var(--staff-foundation-text-muted); font-size: .76rem; font-weight: 700; }
#students .students-presentation-table-wrap td { color: var(--staff-foundation-text); line-height: 1.4; overflow-wrap: anywhere; }
#students #coordinator-students-root .students-presentation-table-wrap th:nth-child(1) { width: 27%; }
#students #coordinator-students-root .students-presentation-table-wrap th:nth-child(2) { width: 25%; }
#students #coordinator-students-root .students-presentation-table-wrap th:nth-child(3) { width: 22%; }
#students #coordinator-students-root .students-presentation-table-wrap th:nth-child(4) { width: 14%; }
#students #coordinator-students-root .students-presentation-table-wrap th:nth-child(5) { width: 12%; }
#students #coordinator-students-root [data-coord-student] { min-width: 84px; white-space: nowrap; }
#students .students-presentation-pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: var(--staff-foundation-space-4, 16px); }
#students .students-presentation-pagination button { min-height: var(--staff-foundation-interaction-height, 44px); }
#students .students-presentation :is(button,a,input,select,summary,.students-presentation-table-wrap):focus-visible,
.staff-app .students-detail-frame :is(button,a,input,summary):focus-visible { outline: 3px solid var(--staff-foundation-focus); outline-offset: 2px; }
.staff-app .students-detail-frame { box-sizing: border-box; width: min(94vw, 640px); max-width: 640px; max-height: min(90vh, calc(100dvh - 32px)); border: 1px solid var(--staff-foundation-border); border-radius: var(--staff-foundation-radius-surface, 16px); background: var(--staff-foundation-surface); color: var(--staff-foundation-text); box-shadow: var(--staff-shadow-md); }
.staff-app dialog.students-detail-frame { position: fixed; inset: 0; margin: auto; padding: 0; overflow: hidden; }
.staff-app dialog.students-detail-frame::backdrop { background: rgba(15,23,42,.56); }
.staff-app .students-detail-frame :is(.modal-header,.coord-detail-head) { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: var(--staff-foundation-space-5, 20px); border-bottom: 1px solid var(--staff-foundation-border); }
.staff-app .students-detail-frame .coord-detail-body { max-height: min(90vh, calc(100dvh - 32px)); overflow-y: auto; padding: 0 var(--staff-foundation-space-5, 20px) var(--staff-foundation-space-5, 20px); }
.staff-app .students-detail-frame .coord-detail-head { margin-inline: calc(-1 * var(--staff-foundation-space-5, 20px)); margin-bottom: var(--staff-foundation-space-4, 16px); }
.staff-app .students-detail-frame .coord-detail-head h2 { margin: 0; }
.staff-app .students-detail-frame .coord-detail-head button { flex: 0 0 auto; }
.staff-app .students-detail-frame .students-detail-close { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0; border: 1px solid var(--staff-foundation-border); border-radius: var(--staff-foundation-radius-control, 8px); background: var(--staff-foundation-surface); color: var(--staff-foundation-text); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.staff-app .students-detail-frame .students-detail-content { max-height: min(78vh, calc(100dvh - 160px)); overflow-y: auto; background: var(--staff-foundation-surface-soft); }
.staff-app .students-detail-frame h2 { color: var(--staff-foundation-text); font-size: 1.3rem; }
.staff-app .students-detail-frame h3 { color: var(--staff-foundation-text); font-size: 1rem; }
.staff-app .students-detail-frame dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 18px 0; }
.staff-app .students-detail-frame dl > div { padding: 12px; border-radius: var(--staff-foundation-radius-control, 8px); background: var(--staff-foundation-surface-soft); }
.staff-app .students-detail-frame dt { color: var(--staff-foundation-text-muted); font-size: .76rem; }
.staff-app .students-detail-frame dd { margin: 4px 0 0; font-weight: 700; overflow-wrap: anywhere; }
.staff-app .students-detail-frame nav { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 18px; }
.staff-app .students-detail-frame nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--staff-accent-strong); font-weight: 700; }
@container (max-width: 599.98px) {
  #students .students-presentation-surface { padding: var(--staff-foundation-space-4, 16px); }
  #students .students-presentation-controls > * { flex: 1 1 100%; }
  #students .students-presentation-table-wrap { overflow: visible; }
  #students .students-presentation-table-wrap table,
  #students .students-presentation-table-wrap tbody { display: block; min-width: 0 !important; width: 100%; }
  #students .students-presentation-table-wrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  #students .students-presentation-table-wrap tr { display: block; min-width: 0; margin-bottom: var(--staff-foundation-space-3, 12px); padding: var(--staff-foundation-space-3, 12px); border: 1px solid var(--staff-foundation-border); border-radius: var(--staff-foundation-radius-surface, 16px); background: var(--staff-foundation-surface); }
  #students .students-presentation-table-wrap td { display: block; box-sizing: border-box; width: 100%; max-width: none !important; min-width: 0 !important; padding: 6px 0; border: 0; overflow-wrap: anywhere; }
  #students .students-presentation-table-wrap td::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--staff-foundation-text-muted); font-size: .76rem; font-weight: 700; }
  #students .students-presentation-table-wrap td[colspan]::before { content: none; }
  #students .students-presentation-pagination { display: grid; grid-template-columns: 1fr auto 1fr; }
  #students .students-presentation-pagination button { min-width: 0; padding-inline: 8px; }
  #students .students-presentation-pagination span { white-space: nowrap; text-align: center; }
}
@media (max-width: 768px) {
  .staff-app .students-detail-frame { width: 100%; max-width: none !important; max-height: min(92vh, calc(100dvh - 24px)); margin: 0; border-radius: 20px 20px 0 0; }
  .staff-app dialog.students-detail-frame { inset: auto 0 0; }
  .staff-app .students-detail-frame .coord-detail-body { max-height: min(92vh, calc(100dvh - 24px)); }
  .staff-app .students-detail-frame .coord-detail-body dl { grid-template-columns: 1fr; }
}