.school-roster { min-width: 0; --sr-ink: var(--ink, #263747); --sr-muted: var(--muted, #657485); --sr-line: var(--line, #dce3e9); color: var(--sr-ink); }
.school-roster [hidden] { display: none !important; }
.school-roster button, .school-roster input, .school-roster select, .school-roster textarea { font: inherit; }
.school-roster .primary, .school-roster .secondary { white-space: normal; text-align: center; font-size: 13px; }
.sr-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 6px 0 23px; }
.sr-heading > div { min-width: 0; }
.sr-eyebrow { margin: 0 0 8px; color: var(--blue); font-size: 10px; font-weight: 750; letter-spacing: 1.5px; }
.sr-heading h1 { margin: 0 0 9px; font-size: clamp(28px, 3vw, 37px); line-height: 1.15; letter-spacing: -1px; }
.sr-heading p:not(.sr-eyebrow) { margin: 0; max-width: 590px; color: var(--sr-muted); font-size: 13px; line-height: 1.75; }
.sr-heading-actions { display: flex; flex-shrink: 0; flex-wrap: wrap; align-items: center; gap: 10px; }
.sr-workflow { display: flex; align-items: center; gap: 14px; padding: 17px 20px; margin: 0 0 25px; border: 1px solid #dce6d6; border-radius: 13px; background: #f0f5eb; color: #556a4e; }
.sr-workflow-icon { display: grid; place-items: center; flex: 0 0 36px; height: 36px; border-radius: 11px; background: #e2ebd9; color: #567445; font-size: 26px; }
.sr-workflow p { margin: 0; max-width: 800px; font-size: 12px; line-height: 1.7; }
.sr-workflow strong { color: #385235; margin-right: 5px; }
.sr-status { padding: 13px 16px; margin: 0 0 18px; border-radius: 10px; background: #eaf3e5; border: 1px solid #cddfc4; font-size: 13px; line-height: 1.6; }
.sr-status-error { background: #fff4ed; border-color: #efd2c3; color: #8a492e; }
.sr-roster { min-width: 0; overflow: hidden; border: 1px solid var(--sr-line); border-radius: 16px; background: #fff; }
.sr-tabs { display: flex; align-items: stretch; gap: 5px; padding: 0 21px; border-bottom: 1px solid var(--sr-line); }
.sr-tabs > button { min-height: 58px; padding: 15px 12px; border-bottom: 3px solid transparent; font-size: 13px; font-weight: 650; color: var(--sr-muted); }
.sr-tabs > button[aria-pressed="true"] { color: var(--blue); border-bottom-color: var(--blue); }
.sr-tabs > button > span { display: inline-block; margin-left: 5px; padding: 1px 6px; background: #f0f2f5; border-radius: 5px; font-size: 10px; color: var(--sr-muted); }
.sr-tabs > button > .sr-count-pending { background: #fff0d6; color: #84662c; }
.sr-tabs > .sr-refresh { margin-left: auto; flex: 0 0 38px; font-size: 23px; padding: 8px; }
.sr-filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(170px, 230px); gap: 15px; padding: 23px 25px 15px; }
.sr-filters label { font-size: 11px; color: var(--sr-muted); }
.sr-filters input, .sr-filters select { height: 43px; margin-top: 6px; padding: 10px 12px; font-size: 12px; background: #fbfcfd; }
.sr-results { margin: 0; padding: 0 25px 16px; font-size: 11px; color: var(--sr-muted); }
.sr-table { border-collapse: collapse; table-layout: fixed; width: 100%; text-align: left; }
.sr-table thead th { padding: 12px 25px; border-top: 1px solid #edf0f3; background: #f9fafc; font-size: 11px; color: var(--sr-muted); font-weight: 600; }
.sr-table thead th:first-child { width: 58%; }
.sr-table thead th:nth-child(2) { width: 27%; }
.sr-table thead th:last-child:not(:nth-child(2)) { width: 15%; }
.sr-table tbody th, .sr-table td { padding: 17px 25px; border-top: 1px solid #edf0f3; text-align: left; vertical-align: middle; overflow-wrap: anywhere; font-size: 12px; font-weight: 450; }
.sr-table th strong, .sr-preview-table th strong { display: block; font-weight: 650; line-height: 1.5; }
.sr-table th span, .sr-preview-table th span { display: block; margin-top: 3px; color: var(--sr-muted); font-size: 11px; font-weight: 450; line-height: 1.6; }
.sr-year-badge { display: inline-block; padding: 4px 8px; background: #eef3e9; color: #55704c; border-radius: 6px; font-size: 11px; }
.sr-year-unset { background: #f4f1eb; color: #8b7754; }
.sr-edit { display: inline-flex; gap: 8px; align-items: center; min-height: 40px; padding: 8px 10px; color: var(--blue); font-weight: 650 !important; border: 1px solid var(--sr-line); border-radius: 8px; }
.sr-edit:hover { background: var(--bg); }
.sr-empty { padding: 45px 25px; text-align: center; }
.sr-empty > span { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 15px; border-radius: 15px; background: #edf3e8; color: #6f8c62; font-size: 27px; }
.sr-empty h2, .sr-empty h3 { margin: 0 0 9px; font-size: 18px; letter-spacing: -.35px; }
.sr-empty p { max-width: 450px; margin: 0 auto; font-size: 12px; color: var(--sr-muted); line-height: 1.8; }
.sr-empty > button { margin-top: 15px; }
.sr-editor { margin-bottom: 26px; padding: 25px; border: 1px solid var(--sr-line); border-radius: 16px; background: #fff; box-shadow: 0 5px 22px #21303b06; }
.sr-editor-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.sr-editor h2 { margin: 0; font-size: 22px; letter-spacing: -.6px; line-height: 1.35; }
.sr-close { display: grid; place-items: center; width: 35px; height: 35px; flex: 0 0 35px; border: 1px solid var(--sr-line); border-radius: 8px; font-size: 23px !important; line-height: 1; color: var(--sr-muted); }
.sr-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; max-width: 680px; }
.sr-field-wide { grid-column: 1 / -1; }
.sr-fields label, .sr-note-field, .sr-import > label { color: var(--sr-ink); font-size: 12px; }
.sr-fields input, .sr-fields select, .sr-note-field textarea, .sr-import textarea { font-size: 13px; }
.sr-fields input[readonly] { color: var(--sr-muted); background: #f6f8fa; }
.sr-field-help { margin: -5px 0 0; color: var(--sr-muted); font-size: 11px; font-weight: 450; line-height: 1.65; }
.sr-editor-intro { margin: 0 0 18px; color: var(--sr-muted); font-size: 12px; line-height: 1.7; max-width: 680px; overflow-wrap: anywhere; }
.sr-note-field { margin-top: 18px; max-width: 680px; }
.sr-note-field > span { color: var(--sr-muted); font-weight: 450; }
.sr-form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 15px; margin-top: 22px; }
.sr-cancel { padding: 10px 8px; font-size: 12px !important; color: var(--sr-muted); }
.sr-form-status { max-width: 680px; margin: 14px 0 0; padding: 10px 12px; border: 1px solid #edcfc1; border-radius: 8px; background: #fff5ef; color: #8c4e32; font-size: 12px; line-height: 1.7; }
.sr-entry-tabs { display: inline-flex; align-items: stretch; gap: 3px; margin: 0 0 23px; padding: 4px; border: 1px solid var(--sr-line); background: var(--bg); border-radius: 9px; }
.sr-entry-tabs button { padding: 9px 15px; border-radius: 6px; font-size: 12px; color: var(--sr-muted); }
.sr-entry-tabs button[aria-pressed="true"] { color: var(--sr-ink); background: #fff; box-shadow: 0 1px 4px #21303b16; font-weight: 650; }
.sr-import > p { margin: 0 0 14px; max-width: 720px; color: var(--sr-muted); font-size: 12px; line-height: 1.8; }
.sr-import > .sr-field-help { margin: 10px 0 0; font-size: 11px; }
.sr-import-example { max-width: 680px; margin-bottom: 20px; padding: 13px 16px; border: 1px solid #e3e8ed; background: #f6f8fa; border-radius: 9px; }
.sr-import-example > span { color: var(--sr-muted); font-size: 10px; }
.sr-import-example pre { margin: 8px 0 0; font-size: 12px; line-height: 1.7; overflow-x: auto; }
.sr-import > label { max-width: 680px; margin-top: 18px; }
.sr-file-label input { padding: 8px; font-size: 12px; }
.sr-file-label input::file-selector-button { margin-right: 12px; padding: 8px 11px; border: 0; border-radius: 6px; color: var(--sr-ink); background: #edf1f5; font: inherit; cursor: pointer; }
.sr-import-preview { margin-top: 23px; padding-top: 23px; border-top: 1px solid var(--sr-line); }
.sr-import-preview h3 { margin: 0 0 7px; font-size: 17px; }
.sr-import-preview > p, .sr-import-errors { font-size: 12px; line-height: 1.7; }
.sr-import-preview > p { color: var(--sr-muted); }
.sr-import-errors { padding: 12px 15px; border-radius: 9px; color: #8a492e; background: #fff4ed; }
.sr-import-errors ul { margin: 0; padding-left: 18px; }
.sr-import-errors p { margin: 8px 0 0; }
.sr-preview-scroll { max-height: 350px; overflow: auto; margin: 15px 0; border: 1px solid var(--sr-line); border-radius: 9px; }
.sr-preview-table { border-collapse: collapse; width: 100%; text-align: left; font-size: 11px; }
.sr-preview-table th, .sr-preview-table td { padding: 10px 12px; border-bottom: 1px solid #edf0f3; overflow-wrap: anywhere; min-width: 100px; }
.sr-preview-table thead th { background: #f5f7f9; position: sticky; top: 0; color: var(--sr-muted); font-weight: 600; }
.sr-preview-table thead th:first-child { width: 48%; }
.sr-section-intro { padding: 24px 25px 10px; }
.sr-section-intro h2 { margin: 0 0 6px; font-size: 18px; letter-spacing: -.4px; }
.sr-section-intro p { max-width: 680px; margin: 0; color: var(--sr-muted); font-size: 12px; line-height: 1.75; }
.sr-requests { display: grid; gap: 14px; padding: 15px 25px 25px; }
.sr-request { min-width: 0; padding: 19px 20px; border: 1px solid var(--sr-line); border-radius: 12px; background: #fdfdfe; }
.sr-request-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.sr-request-heading > div { min-width: 0; }
.sr-request h3 { margin: 0 0 4px; font-size: 14px; overflow-wrap: anywhere; }
.sr-request-heading p { margin: 0; color: var(--sr-muted); font-size: 11px; overflow-wrap: anywhere; }
.sr-badge { flex-shrink: 0; padding: 4px 8px; border-radius: 6px; font-size: 10px; font-weight: 600; background: #f2f3f6; color: #6d7582; }
.sr-badge-pending { color: #8b6b2d; background: #fcf2df; }
.sr-badge-approved { color: #517744; background: #eaf3e3; }
.sr-badge-rejected { color: #7c6271; background: #f4edf1; }
.sr-request-meta { color: var(--sr-muted); font-size: 10px; margin: 12px 0 0; line-height: 1.7; }
.sr-request-note { color: var(--sr-ink); margin: 11px 0 0; font-size: 12px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; }
.sr-review-note { margin: 14px 0 0; padding: 11px 13px; border-left: 3px solid #cad6e0; border-radius: 0 6px 6px 0; background: #f0f4f8; color: var(--sr-muted); font-size: 12px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.sr-review-note strong { display: block; color: var(--sr-ink); font-size: 10px; }
.sr-request-actions { display: flex; justify-content: flex-end; margin-top: 16px; }
.sr-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 1100px) {
  .sr-heading { align-items: flex-start; flex-direction: column; gap: 17px; }
  .sr-table thead th, .sr-table tbody th, .sr-table td { padding-left: 18px; padding-right: 18px; }
}
@media (max-width: 640px) {
  .sr-heading { margin-top: 2px; }
  .sr-heading-actions { width: 100%; gap: 9px; }
  .sr-heading-actions > button { flex: 1 1 140px; }
  .sr-workflow { align-items: flex-start; padding: 15px; gap: 11px; }
  .sr-workflow-icon { flex-basis: 29px; height: 29px; font-size: 22px; border-radius: 9px; }
  .sr-workflow strong { display: block; margin-bottom: 3px; }
  .sr-tabs { padding: 0 9px; gap: 0; }
  .sr-tabs > button { padding: 13px 8px; font-size: 12px; }
  .sr-tabs > button > span { font-size: 9px; margin-left: 2px; }
  .sr-tabs > .sr-refresh { flex-basis: 28px; padding: 5px; }
  .sr-filters { grid-template-columns: minmax(0, 1fr); gap: 13px; padding: 18px 17px 13px; }
  .sr-results { padding: 0 17px 14px; }
  .sr-table, .sr-table tbody { display: block; }
  .sr-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .sr-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 17px; border-top: 1px solid #edf0f3; }
  .sr-table tbody th, .sr-table td { display: block; border: 0; padding: 0; }
  .sr-table tbody th { grid-column: 1 / -1; }
  .sr-table .sr-table-actions { justify-self: end; }
  .sr-year-badge { max-width: 100%; }
  .sr-editor { padding: 20px 17px; }
  .sr-editor h2 { font-size: 20px; }
  .sr-fields { gap: 13px; }
  .sr-fields input, .sr-fields select, .sr-import textarea, .sr-note-field textarea { font-size: 16px; padding: 10px 11px; }
  .sr-filters input, .sr-filters select { font-size: 16px; }
  .sr-import-example { padding: 12px; }
  .sr-import-example pre { font-size: 10px; }
  .sr-form-actions { gap: 10px; }
  .sr-section-intro { padding: 20px 17px 8px; }
  .sr-requests { padding: 13px 17px 20px; }
  .sr-request { padding: 16px; }
  .sr-request-heading { flex-direction: column; gap: 10px; }
  .sr-request-actions { justify-content: flex-start; }
  .sr-preview-table th, .sr-preview-table td { min-width: 85px; padding: 9px; }
}
@media (prefers-reduced-motion: reduce) { .school-roster * { scroll-behavior: auto !important; } }