:root {
    --bg: #f4f7fb;
    --surface: #ffffff;
    --surface-muted: #eef4ff;
    --ink: #172033;
    --muted: #5f6f86;
    --line: #d8e2f0;
    --primary-blue: #1554a8;
    --primary-blue-dark: #0e3774;
    --primary-blue-soft: #e8f1ff;
    --school-yellow: #f5c542;
    --school-yellow-dark: #b77900;
    --soft-yellow: #fff7dc;
    --info-blue: #2f80d1;
    --coral: #b94a3e;
    --danger: #b42318;
    --shadow: 0 18px 45px rgba(21, 84, 168, 0.13);
    --radius: 8px;
    --sidebar-width: 280px;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--ink);
    letter-spacing: 0;
}


* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    background: var(--bg);
    color: var(--ink);
}

body {
    font-size: 15px;
    line-height: 1.5;
}

a {
    color: inherit;
}

button,
input,
select,
textarea {
    font: inherit;
}

.auth-page {
    min-height: 100vh;
    background:
        linear-gradient(120deg, rgba(21, 84, 168, 0.12), rgba(245, 197, 66, 0.18)),
        var(--bg);
}

/* Login page school-photo background. */
.auth-page.login-background-page {
    background:
        linear-gradient(rgba(8, 30, 64, 0.52), rgba(8, 30, 64, 0.52)),
        url("../images/school-login-background.png") center center / cover no-repeat fixed;
}

.auth-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 28px;
}

.login-panel {
    width: min(1040px, 100%);
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 28px;
    align-items: stretch;
}

.login-copy,
.login-card,
.panel,
.summary-card,
.status-banner {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.login-copy {
    padding: 42px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 560px;
}

.login-copy h1 {
    font-size: 34px;
    line-height: 1.1;
    margin: 38px 0 14px;
}

.login-copy p {
    color: var(--muted);
    max-width: 540px;
    margin: 0;
}

.login-card {
    padding: 34px;
    align-self: center;
}

.brand-block {
    display: flex;
    gap: 12px;
    align-items: center;
}

.brand-block strong {
    display: block;
    font-size: 18px;
}

.brand-block span {
    display: block;
    color: var(--muted);
    font-size: 13px;
}

.brand-block.large .brand-mark {
    width: 58px;
    height: 58px;
    font-size: 18px;
}

.brand-mark {
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--primary-blue), var(--primary-blue-dark));
    color: #fff;
    font-weight: 700;
    box-shadow: none;
}

.foundation-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 34px;
}

.foundation-list span {
    border: 1px solid var(--line);
    background: linear-gradient(180deg, #ffffff, var(--primary-blue-soft));
    border-radius: var(--radius);
    padding: 10px 12px;
    color: var(--ink);
}

.form-heading {
    margin-bottom: 22px;
}

.form-heading span,
.topbar-title span,
.panel-header span,
.status-banner span,
.summary-card span {
    display: block;
    color: var(--primary-blue);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
}

.form-heading h2,
.panel-header h2,
.status-banner h2 {
    margin: 4px 0 0;
    font-size: 24px;
    line-height: 1.2;
}

.field {
    display: grid;
    gap: 7px;
    margin-bottom: 16px;
}

.field span {
    font-weight: 700;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    padding: 12px 13px;
    color: var(--ink);
    outline: none;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(21, 84, 168, 0.14);
}

.password-field {
    position: static;
}

.password-input-wrap {
    position: relative;
    display: block;
    width: 100%;
    font-weight: 400 !important;
}

.password-input-wrap input {
    width: 100%;
    padding-right: 72px;
}

.password-input-wrap .field-action {
    position: absolute;
    top: 50%;
    right: 8px;
    bottom: auto;
    transform: translateY(-50%);
}

.field-action {
    position: absolute;
    right: 8px;
    bottom: 8px;
    border: 0;
    background: var(--soft-yellow);
    color: var(--primary-blue-dark);
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
}

.checkbox-control {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: var(--muted);
}

.checkbox-control input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--primary-blue);
}

.captcha-challenge {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin: 18px 0;
    background: linear-gradient(180deg, #ffffff, var(--soft-yellow));
}

.captcha-prompt {
    display: block;
    margin-bottom: 8px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
}

.captcha-image-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.captcha-image {
    width: 100%;
    min-width: 0;
    height: 72px;
    object-fit: cover;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
}

.captcha-refresh-button {
    min-width: 108px;
    min-height: 72px;
    padding: 8px 10px;
    font-size: 12px;
}

.captcha-answer-field {
    margin: 10px 0 0;
}

.captcha-answer-field input {
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
}

@media (max-width: 460px) {
    .captcha-image-row {
        align-items: initial;
    }

    .captcha-refresh-button {
        min-width: 92px;
    }
}

@media (max-width: 380px) {
    .staff-registration-panel .captcha-image-row {
        flex-direction: column;
    }

    .staff-registration-panel .captcha-image {
        width: 100%;
        height: auto;
        aspect-ratio: 230 / 72;
        object-fit: contain;
    }

    .staff-registration-panel .captcha-refresh-button {
        width: 100%;
        min-height: 44px;
    }
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border-radius: var(--radius);
    border: 1px solid transparent;
    padding: 9px 15px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.button:active {
    transform: translateY(1px);
}

.button.primary {
    background: var(--primary-blue);
    color: #fff;
}

.button.primary:hover {
    background: var(--primary-blue-dark);
}

.button.ghost {
    background: #fff;
    color: var(--ink);
    border-color: var(--line);
}

.button.danger {
    background: var(--danger);
    color: #fff;
}

.button.full {
    width: 100%;
}

.button-row {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

.form-note {
    color: var(--muted);
    font-size: 13px;
    margin: 16px 0 0;
}

.alert {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 12px 14px;
    margin-bottom: 16px;
    background: var(--surface-muted);
}

.alert p {
    margin: 4px 0 0;
}

.alert.error {
    border-color: rgba(180, 35, 24, 0.28);
    background: #fff3f1;
    color: #7f1d1d;
}

.app-page {
    min-height: 100vh;
}

.app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
}

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    background: linear-gradient(180deg, var(--primary-blue-dark), #102f63);
    color: #f8fbff;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    overflow-y: auto;
}

.sidebar .brand-block span,
.sidebar-footer span {
    color: #c7d7ef;
}

.side-nav {
    display: grid;
    gap: 5px;
}

.side-section-label {
    margin: 8px 10px 4px;
    color: #f5d56c;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.side-group {
    min-width: 0;
}

.side-group-toggle {
    min-height: 40px;
    padding: 9px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-radius: var(--radius);
    color: #f5d56c;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    list-style: none;
    text-transform: uppercase;
    user-select: none;
}

.side-group-toggle::-webkit-details-marker {
    display: none;
}

.side-group-toggle:hover,
.side-group.has-active>.side-group-toggle {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.side-group-chevron {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.16s ease;
}

.side-group[open] .side-group-chevron {
    transform: rotate(225deg);
}

.side-group-links {
    padding-top: 4px;
    display: grid;
    gap: 4px;
}

.side-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 9px 10px;
    border-radius: 0;
    color: #f8fbff;
    text-decoration: none;
}

.side-link:hover {
    background: rgba(255, 255, 255, 0.09);
}

.side-link.active {
    background: rgba(255, 255, 255, 0.13);
    box-shadow: none;
    font-weight: 700;
}

.side-link:focus-visible,
.side-group-toggle:focus-visible {
    outline: 2px solid var(--school-yellow);
    outline-offset: 2px;
}

.side-link.disabled {
    color: #a9bbd7;
    cursor: not-allowed;
}

.side-icon {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: rgba(245, 197, 66, 0.18);
    color: #fff8dc;
    font-size: 12px;
    font-weight: 700;
}

.side-link.active .side-icon {
    background: var(--school-yellow);
    color: var(--primary-blue-dark);
}

.sidebar-footer {
    margin-top: auto;
}

.mini-profile,
.user-chip {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mini-profile strong,
.user-chip strong {
    display: block;
}

.mini-profile span,
.user-chip span {
    display: block;
    font-size: 12px;
    color: var(--muted);
}

.user-chip-link {
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    color: var(--ink);
    text-decoration: none;
}

.user-chip-link:hover,
.user-chip-link:focus-visible {
    border-color: var(--line-strong);
    background: var(--primary-blue-soft);
    outline: none;
}

.avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--school-yellow);
    color: var(--primary-blue-dark);
    font-size: 13px;
    font-weight: 700;
    flex: 0 0 auto;
}

.avatar.small {
    width: 34px;
    height: 34px;
}

.app-main {
    min-width: 0;
}

.topbar {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 26px;
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: blur(10px);
}

.topbar-title h1 {
    margin: 2px 0 0;
    font-size: 22px;
}

.school-header-title {
    flex: 1;
    margin-left: 56px;
    color: var(--primary-blue-dark);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.icon-button {
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
}

.sidebar-toggle {
    display: none;
    gap: 4px;
}

.sidebar-toggle span {
    width: 18px;
    height: 2px;
    background: var(--ink);
}

.page-content {
    padding: 26px;
}

.page-section {
    display: grid;
    gap: 22px;
}

.status-banner {
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.status-banner p {
    margin: 8px 0 0;
    color: var(--muted);
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.summary-grid.dense {
    grid-template-columns: repeat(4, minmax(160px, 1fr));
}

.summary-card {
    padding: 20px;
    box-shadow: none;
    border-top: 1px solid var(--line);
    text-decoration: none;
    color: inherit;
}

.summary-card strong {
    display: block;
    font-size: 34px;
    margin: 6px 0;
}

.summary-card p {
    margin: 0;
    color: var(--muted);
}

.accent-primary {
    border-top-color: var(--line);
}

.accent-blue {
    border-top-color: var(--line);
}

.accent-yellow {
    border-top-color: var(--line);
}

.accent-coral {
    border-top-color: var(--line);
}

.dashboard-page {
    gap: 28px;
}

.dashboard-overview {
    padding: 2px 0 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-bottom: 1px solid var(--line);
}

.dashboard-eyebrow,
.dashboard-section-heading span,
.workflow-action>span:first-child {
    display: block;
    color: var(--primary-blue);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.dashboard-year-line {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 3px;
}

.dashboard-year-line h2 {
    margin: 0;
    font-size: 28px;
    line-height: 1.2;
}

.dashboard-active-badge {
    background: var(--soft-yellow);
    color: var(--school-yellow-dark);
}

.dashboard-overview p {
    margin: 7px 0 0;
    color: var(--muted);
}

.dashboard-overview .button {
    flex: 0 0 auto;
}

.dashboard-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.dashboard-section-heading h2 {
    margin: 3px 0 0;
    font-size: 20px;
}

.dashboard-stat-card {
    min-height: 144px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.dashboard-stat-card:hover {
    border-color: #b8c9df;
    box-shadow: 0 8px 22px rgba(21, 84, 168, 0.1);
    transform: translateY(-1px);
}

.dashboard-stat-card strong {
    font-size: 32px;
}

.workflow-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.workflow-action {
    min-width: 0;
    min-height: 82px;
    padding: 14px 42px 14px 15px;
    position: relative;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    text-decoration: none;
}

.workflow-action:hover {
    border-color: var(--primary-blue);
    background: var(--primary-blue-soft);
}

.workflow-action strong {
    display: block;
    margin-top: 5px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.workflow-action-arrow {
    position: absolute;
    top: 50%;
    right: 15px;
    color: var(--primary-blue);
    font-size: 20px;
    transform: translateY(-50%);
}

.workflow-action:focus-visible,
.dashboard-stat-card:focus-visible,
.dashboard-metric-row:focus-visible,
.text-link:focus-visible {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
}

/* Staff dashboard: keep permission-driven sections balanced without changing dashboard data. */
.staff-dashboard-page .dashboard-summary-grid {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.staff-dashboard-page .dashboard-stat-card {
    min-height: 138px;
    display: flex;
    flex-direction: column;
}

.staff-dashboard-page .dashboard-stat-card p {
    margin-top: auto;
}

.staff-dashboard-page .dashboard-work-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    align-items: stretch;
}

.staff-dashboard-page .dashboard-work-grid>.panel {
    height: 100%;
}

.staff-dashboard-page .dashboard-overview>div:first-child {
    min-width: 0;
    flex: 1 1 auto;
}

.staff-dashboard-page .dashboard-overview .button {
    min-width: 148px;
    justify-content: center;
}


.dashboard-work-grid,
.dashboard-activity-grid {
    display: grid;
    gap: 18px;
}

.dashboard-work-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-activity-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-page .panel-header {
    align-items: center;
}

.dashboard-metric-list {
    border-top: 1px solid var(--line);
}

.dashboard-metric-row {
    min-height: 46px;
    padding: 10px 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--line);
    color: inherit;
    text-decoration: none;
}

.dashboard-metric-row:hover {
    color: var(--primary-blue);
    background: var(--primary-blue-soft);
}

.dashboard-metric-row strong {
    min-width: 36px;
    text-align: right;
    font-size: 18px;
}

.text-link {
    color: var(--primary-blue);
    font-weight: 700;
    text-decoration: none;
}

.text-link:hover {
    text-decoration: underline;
}

.dashboard-activity-grid .panel:first-child .dashboard-table {
    min-width: 590px;
}

.dashboard-activity-grid .panel:last-child .dashboard-table {
    min-width: 440px;
}

.student-filter-panel,
.student-form {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.student-filter-panel {
    padding: 16px;
    display: grid;
    gap: 14px;
}

.student-search-row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.student-search-row .field,
.student-filter-grid .field {
    margin-bottom: 0;
}

.student-filter-options {
    border-top: 1px solid var(--line);
    padding-top: 12px;
}

.student-filter-options>summary,
.profile-disclosure>summary {
    list-style: none;
    cursor: pointer;
}

.student-filter-options>summary::-webkit-details-marker,
.profile-disclosure>summary::-webkit-details-marker {
    display: none;
}

.student-filter-options>summary {
    width: fit-content;
    color: var(--primary-blue);
    font-weight: 700;
}

.student-filter-options>summary::before,
.profile-disclosure>summary::after {
    content: '+';
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 1px solid var(--line);
    border-radius: 50%;
    font-weight: 700;
}

.student-filter-options>summary::before {
    margin-right: 8px;
}

.student-filter-options[open]>summary::before,
.profile-disclosure[open]>summary::after {
    content: '-';
}

.student-filter-grid {
    padding-top: 14px;
    display: grid;
    grid-template-columns: repeat(5, minmax(120px, 1fr));
    gap: 12px;
}

.student-filter-actions {
    padding-top: 12px;
    display: flex;
    justify-content: flex-end;
}

.student-records-table {
    min-width: 820px;
}

.pagination {
    padding-top: 16px;
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-top: 1px solid var(--line);
}

.pagination-summary {
    color: var(--muted);
    font-size: 13px;
}

.pagination-links {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pagination-page {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
    color: var(--ink);
    font-weight: 700;
    text-decoration: none;
}

.pagination-page:hover,
.pagination-page.active {
    border-color: var(--primary-blue);
    background: var(--primary-blue);
    color: #ffffff;
}

.button.disabled {
    pointer-events: none;
    cursor: default;
    opacity: 0.48;
}

.student-back-link {
    width: fit-content;
}

.student-profile-header {
    align-items: center;
}

.student-profile-identity {
    min-width: 0;
}

.student-profile-identity-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 0;
}

.student-profile-identity-meta span {
    color: var(--muted);
    font-size: 14px;
    font-weight: 500;
    text-transform: none;
}

.student-profile-identity-meta span+span::before {
    content: '\2022';
    margin-right: 18px;
    color: var(--line-strong, var(--line));
}

.student-profile-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(130px, 1fr));
    align-items: stretch;
}

.student-profile-actions .button {
    width: 100%;
    min-height: 42px;
}

.student-status-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.student-status-grid>div {
    min-width: 0;
    padding: 14px 18px;
    border-left: 1px solid var(--line);
}

.student-status-grid>div:first-child {
    border-left: 0;
}

.student-status-grid span,
.profile-count-grid span,
.student-danger-zone span {
    display: block;
    color: var(--primary-blue);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.student-status-grid strong {
    display: block;
    margin-top: 4px;
    overflow-wrap: anywhere;
}

.student-detail-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.student-detail-grid .student-detail-wide {
    grid-column: span 2;
}

.student-detail-grid dd {
    overflow-wrap: anywhere;
}

.profile-count-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.profile-count-grid>div {
    min-width: 0;
    padding: 14px 18px;
    border-left: 1px solid var(--line);
}

.profile-count-grid>div:first-child {
    border-left: 0;
}

.profile-count-grid strong {
    display: block;
    margin-top: 2px;
    font-size: 26px;
}

.profile-count-grid small {
    display: block;
    color: var(--muted);
    line-height: 1.35;
}

.profile-record-table {
    min-width: 620px;
}

.profile-record-table.wide {
    min-width: 760px;
}

.profile-record-table th,
.profile-record-table td {
    vertical-align: top;
}

.profile-record-table th:first-child,
.profile-record-table td:first-child {
    white-space: nowrap;
}

.profile-record-group {
    display: grid;
    gap: 18px;
}

.profile-subsection-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
}

.profile-subsection-heading h3 {
    margin: 0;
    font-size: 17px;
}

.profile-subsection-heading span {
    min-width: 28px;
    text-align: right;
    color: var(--muted);
    font-weight: 700;
}

.profile-disclosure {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.profile-disclosure>summary {
    min-height: 62px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.profile-disclosure>summary span {
    flex: 1 1 auto;
    font-size: 18px;
    font-weight: 700;
}

.profile-disclosure>summary strong {
    color: var(--muted);
    font-size: 13px;
}

.profile-disclosure-body {
    padding: 0 18px 18px;
    border-top: 1px solid var(--line);
}

.profile-disclosure-body.profile-record-group {
    padding-top: 18px;
}

.student-danger-zone {
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border: 1px solid rgba(180, 35, 24, 0.35);
    border-radius: var(--radius);
    background: #fff8f7;
}

.student-danger-zone h2 {
    margin: 3px 0;
    font-size: 18px;
}

.student-danger-zone p {
    margin: 0;
    color: var(--muted);
}

.student-form {
    padding: 22px;
    display: grid;
    gap: 22px;
}

.student-form-section {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.student-form-section+.student-form-section {
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.student-form-section legend {
    width: 100%;
    margin-bottom: 14px;
    color: var(--ink);
    font-size: 18px;
    font-weight: 700;
}

.student-form-actions {
    padding-top: 18px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid var(--line);
}

.two-column {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
    gap: 18px;
}

.page-header {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px;
}

.page-header span {
    display: block;
    color: var(--primary-blue);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.page-header h2 {
    margin: 4px 0;
    font-size: 26px;
}

.page-header p,
.muted {
    color: var(--muted);
}

.block {
    display: block;
}

.filter-panel,
.inline-form,
.mini-form {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.filter-panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px;
}

.inline-form .field,
.filter-panel .field,
.mini-form .field {
    margin-bottom: 0;
}

.grow {
    flex: 1 1 260px;
}

.stacked-form {
    display: grid;
    gap: 16px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.form-grid .span-2 {
    grid-column: span 2;
}

.alert.warning {
    background: #fff8dc;
    border: 1px solid #f0d36b;
    color: #5f4a00;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.rules-grid,
.checklist-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.rule-box,
.check-card,
.student-pick-list a,
.permission-list div,
.help-grid article {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
}

.rule-box {
    padding: 16px;
}

.rule-box h3 {
    margin: 0 0 12px;
    font-size: 16px;
}

.check-card {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 13px;
    cursor: pointer;
}

.check-card input {
    margin-top: 4px;
    accent-color: var(--primary-blue);
}

.check-card strong,
.check-card small {
    display: block;
}

.check-card small {
    color: var(--muted);
}

.student-pick-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.student-pick-list a {
    padding: 12px;
    text-decoration: none;
}

.student-pick-list strong,
.student-pick-list span {
    display: block;
}

.student-pick-list span {
    color: var(--muted);
    font-size: 13px;
}

.row-actions,
.button-row.compact {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.button.small {
    min-height: 32px;
    padding: 5px 10px;
    font-size: 13px;
}

.compact-select {
    min-height: 34px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    padding: 5px 8px;
}

.mini-form input,
.mini-form select {
    min-height: 34px;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 5px 8px;
}

.form-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.academic-row-form {
    align-items: flex-end;
    margin-bottom: 8px;
}

.mini-field {
    min-width: 130px;
}

.inline-delete-form {
    display: inline-flex;
    margin-top: 4px;
}

.empty-row {
    text-align: center;
    color: var(--muted);
    padding: 24px !important;
}

.badge.danger-badge,
.danger-badge {
    color: #8a1f17;
    background: #fff0ed;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
}

.detail-grid div {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 12px;
    background: var(--surface-muted);
}

.detail-grid dt {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.detail-grid dd {
    margin: 4px 0 0;
}

.fit-text {
    font-size: 18px !important;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.chart-list {
    display: grid;
    gap: 14px;
}

.chart-row {
    display: grid;
    gap: 8px;
}

.chart-row>div:first-child {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.chart-row span {
    color: var(--muted);
}

.bar-track {
    height: 12px;
    background: var(--primary-blue-soft);
    border-radius: 999px;
    overflow: hidden;
}

.bar-track span {
    display: block;
    height: 100%;
    min-width: 4px;
    background: var(--primary-blue);
    border-radius: 999px;
}

.bar-track.yellow span {
    background: var(--school-yellow);
}

.mini-line {
    margin-bottom: 6px;
}

.padded-check {
    padding-top: 30px;
}

.permission-list,
.help-grid {
    display: grid;
    gap: 10px;
}

.permission-list div,
.help-grid article {
    padding: 12px;
}

.details-summary {
    cursor: pointer;
    color: var(--primary-blue);
    font-weight: 700;
}

.sheet-header-form {
    margin-top: 16px;
}

.add-row-form {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.discipline-sheet-shell {
    width: 100%;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    max-height: 70vh;
}

.discipline-sheet {
    width: max-content;
    min-width: 1500px;
    border-collapse: collapse;
    transform: scale(var(--sheet-zoom));
    transform-origin: top left;
}

.discipline-sheet th,
.discipline-sheet td {
    border: 1px solid #9da9ba;
    padding: 6px;
    vertical-align: middle;
    background: #fff;
    min-width: 110px;
}

.discipline-sheet th {
    text-align: center;
    font-size: 12px;
    font-weight: 700;
}

.discipline-sheet .sheet-title {
    background: #ffffff;
    color: #000;
    font-size: 13px;
}

.discipline-sheet .sheet-group {
    min-height: 80px;
    white-space: normal;
    line-height: 1.35;
}

.discipline-sheet .sheet-group.minor,
.discipline-sheet .minor-cell {
    background: #fbe3d5;
}

.discipline-sheet .sheet-group.major,
.discipline-sheet .major-cell {
    background: #e4f0da;
}

.discipline-sheet .sheet-group.grave,
.discipline-sheet .grave-cell {
    background: #f7b9bd;
}

.discipline-sheet .sheet-group.remarks,
.discipline-sheet .sheet-group.victim {
    background: #d8d8d8;
}

.discipline-sheet input,
.discipline-sheet textarea {
    width: 100%;
    min-width: 110px;
    border: 0;
    background: transparent;
    resize: vertical;
    outline: 1px solid transparent;
    padding: 5px;
}

.discipline-sheet textarea {
    min-height: 46px;
}

.discipline-sheet input:focus,
.discipline-sheet textarea:focus {
    background: #fff;
    outline-color: var(--primary-blue);
}

.compact-check {
    gap: 6px;
    font-size: 12px;
}

.sticky-save {
    position: sticky;
    bottom: 0;
    z-index: 12;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 0 0 var(--radius) var(--radius);
}

.permission-list strong,
.permission-list span,
.permission-list small {
    display: block;
}

.permission-list small {
    color: var(--muted);
}

.certificate-paper {
    width: min(850px, 100%);
    margin: 0 auto;
    min-height: 620px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 58px;
    box-shadow: var(--shadow);
}

.editor-toolbar {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 8px;
    background: var(--surface-muted);
}

.template-editor {
    min-height: 220px;
    border: 1px solid var(--line);
    border-radius: 0 0 var(--radius) var(--radius);
    background: #fff;
    padding: 16px;
    outline: none;
    line-height: 1.7;
}

.template-editor:focus {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(21, 84, 168, 0.14);
}

.certificate-head {
    text-align: center;
    display: grid;
    gap: 4px;
    margin-bottom: 42px;
}

.certificate-head strong {
    font-size: 20px;
    color: var(--primary-blue-dark);
}

.certificate-paper h1 {
    text-align: center;
    font-size: 30px;
    margin: 0 0 34px;
    color: var(--primary-blue);
}

.certificate-paper p,
.certificate-body {
    font-size: 18px;
    line-height: 1.8;
    text-align: justify;
}

.certificate-meta {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    border-top: 1px solid var(--line);
    margin-top: 46px;
    padding-top: 16px;
    color: var(--muted);
}

.batch-certificate-preview {
    display: grid;
    gap: 24px;
}

.batch-certificate-page {
    break-after: page;
    page-break-after: always;
}

.batch-certificate-page:last-child {
    break-after: auto;
    page-break-after: auto;
}

.panel {
    box-shadow: none;
    padding: 20px;
    min-width: 0;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.table-wrap {
    width: 100%;
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 620px;
}

.data-table th,
.data-table td {
    text-align: left;
    padding: 12px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

.data-table th {
    color: var(--muted);
    font-size: 13px;
}

.badge {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 700;
    background: var(--surface-muted);
}

.badge.success {
    color: var(--primary-blue-dark);
    background: var(--primary-blue-soft);
}

.check-list {
    display: grid;
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.check-list li {
    position: relative;
    padding-left: 26px;
}

.check-list li::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--school-yellow);
    border: 2px solid var(--primary-blue);
    position: absolute;
    left: 4px;
    top: 7px;
}

.empty-state {
    width: min(680px, 100%);
    margin: 70px auto;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 42px;
}

.empty-state span {
    color: var(--primary-blue);
    font-weight: 700;
}

.empty-state h1 {
    margin: 8px 0;
}

.empty-state p {
    color: var(--muted);
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(31, 39, 36, 0.42);
    display: grid;
    place-items: center;
    z-index: 50;
    padding: 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.modal-panel {
    width: min(680px, 100%);
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.modal-panel.compact {
    width: min(460px, 100%);
}

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

.modal-header h2 {
    margin: 0;
    font-size: 18px;
}

.modal-body {
    min-height: 0;
    flex: 1 1 auto;
    padding: 18px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.toast-stack {
    position: fixed;
    right: 18px;
    bottom: 18px;
    display: grid;
    gap: 10px;
    z-index: 60;
}

.toast {
    width: min(360px, calc(100vw - 36px));
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 12px 42px 12px 14px;
    position: relative;
}

.toast.success {
    border-left-color: var(--line);
}

.toast.warning {
    border-left-color: var(--line);
}

.toast.error {
    border-left-color: var(--line);
}

.toast button {
    position: absolute;
    right: 8px;
    top: 8px;
    border: 0;
    background: transparent;
    cursor: pointer;
}

[hidden] {
    display: none !important;
}

.sanctions-history-grid.hide-sanctions-history>details:first-child,
.sanctions-history-grid.hide-suspensions-history>details:last-child {
    display: none;
}

.page-header-actions,
.repository-year-actions {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.school-year-flow,
.import-flow {
    display: grid;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.school-year-flow {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.import-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.school-year-flow-step,
.import-flow-step {
    min-width: 0;
    min-height: 70px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--ink);
    text-decoration: none;
    border-right: 1px solid var(--line);
}

.school-year-flow-step:last-child,
.import-flow-step:last-child {
    border-right: 0;
}

.school-year-flow-step>span,
.import-flow-step>span {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--primary-blue);
    background: var(--surface-muted);
    font-size: 13px;
    font-weight: 800;
}

.school-year-flow-step div,
.import-flow-step div,
.school-year-flow-step strong,
.school-year-flow-step small,
.import-flow-step strong,
.import-flow-step small {
    min-width: 0;
    display: block;
}

.school-year-flow-step small,
.import-flow-step small {
    margin-top: 2px;
    color: var(--muted);
}

.school-year-flow-step.current,
.import-flow-step.current {
    box-shadow: none;
}

.school-year-flow-step.current>span,
.import-flow-step.current>span,
.import-flow-step.complete>span {
    color: #fff;
    background: var(--primary-blue);
    border-color: var(--primary-blue);
}

.workflow-disclosure,
.repository-refresh-control {
    position: relative;
}

.workflow-disclosure>summary,
.repository-refresh-control>summary,
.academic-record>summary,
.repository-returners-panel>summary,
.import-history-panel>summary,
.import-column-guide>summary {
    list-style: none;
    cursor: pointer;
}

.workflow-disclosure>summary::-webkit-details-marker,
.repository-refresh-control>summary::-webkit-details-marker,
.academic-record>summary::-webkit-details-marker,
.repository-returners-panel>summary::-webkit-details-marker,
.import-history-panel>summary::-webkit-details-marker,
.import-column-guide>summary::-webkit-details-marker {
    display: none;
}

.workflow-disclosure-right>.workflow-disclosure-body {
    position: absolute;
    z-index: 18;
    top: calc(100% + 10px);
    right: 0;
    width: min(720px, calc(100vw - 72px));
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.workflow-disclosure-right.compact-disclosure>.workflow-disclosure-body {
    width: min(460px, calc(100vw - 72px));
}

.workflow-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.school-year-table .is-active-year td:first-child {
    box-shadow: none;
}

.school-year-row-actions {
    min-width: 300px;
}

.school-year-source-row {
    display: grid;
    grid-template-columns: minmax(170px, 0.7fr) minmax(170px, 0.7fr) minmax(240px, 1.2fr) auto auto;
}

.school-year-source-row .grow {
    min-width: 0;
}

.school-year-target-controls {
    margin-top: 18px;
    padding: 16px 0;
    display: grid;
    grid-template-columns: minmax(170px, 0.7fr) minmax(160px, 0.6fr) minmax(260px, 1.2fr) auto;
    align-items: end;
    gap: 12px;
    border-top: 1px solid var(--line);
}

.school-year-list-meta {
    padding: 10px 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.school-year-candidate-table {
    min-width: 720px;
}

.school-year-candidate-table th:first-child,
.school-year-candidate-table td:first-child {
    width: 92px;
}

.academic-status-strip,
.import-preview-summary {
    display: grid;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.academic-status-strip,
.import-preview-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.academic-status-strip>div,
.import-preview-summary>div {
    min-width: 0;
    padding: 15px 18px;
    border-right: 1px solid var(--line);
}

.academic-status-strip>div:last-child,
.import-preview-summary>div:last-child {
    border-right: 0;
}

.academic-status-strip span,
.academic-status-strip strong,
.import-preview-summary span,
.import-preview-summary strong {
    display: block;
}

.academic-status-strip span,
.import-preview-summary span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.academic-status-strip strong,
.import-preview-summary strong {
    margin-top: 4px;
    font-size: 18px;
}

.academic-year-warning {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.academic-record-list {
    display: grid;
    gap: 10px;
}

.academic-record {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.academic-record>summary {
    min-height: 68px;
    padding: 13px 15px;
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(150px, 0.7fr) auto auto;
    align-items: center;
    gap: 14px;
}

.academic-record-title,
.academic-record-title strong,
.academic-record-title span {
    min-width: 0;
    display: block;
}

.academic-record-title span,
.academic-record-meta {
    margin-top: 2px;
    color: var(--muted);
    font-size: 13px;
    overflow-wrap: anywhere;
}

.academic-record-editor {
    padding: 18px;
    border-top: 1px solid var(--line);
    background: var(--surface-muted);
}

.academic-delete-form {
    margin-top: 16px;
    padding-top: 14px;
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid var(--line);
}

.academic-catalog-grid,
.repository-breakdown-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.academic-catalog-grid .academic-record>summary {
    grid-template-columns: minmax(160px, 1fr) auto auto;
}

.academic-empty-state {
    padding: 24px;
    color: var(--muted);
    text-align: center;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
}

.repository-header {
    align-items: center;
}

.repository-year-picker {
    flex-wrap: nowrap;
}

.repository-source-band {
    position: relative;
    min-height: 70px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    background: #f8fbff;
    border: 1px solid var(--line);
    border-left: 1px solid var(--line);
    border-radius: var(--radius);
}

.repository-source-band p {
    margin: 7px 0 0;
    color: var(--muted);
}

.repository-refresh-form {
    position: absolute;
    z-index: 18;
    top: calc(100% + 10px);
    right: 0;
    width: min(620px, calc(100vw - 72px));
    padding: 16px;
    display: flex;
    align-items: flex-end;
    gap: 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.repository-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.repository-filter-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.repository-student-table {
    min-width: 1080px;
}

.repository-count-line {
    min-width: 118px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: 13px;
}

.repository-count-line+.repository-count-line {
    margin-top: 3px;
}

.repository-count-line span {
    color: var(--muted);
}

.repository-analytics-grid {
    align-items: start;
}

.repository-returners-panel>summary,
.import-history-panel>summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.repository-returners-panel>summary span,
.import-history-panel>summary span {
    display: block;
    color: var(--primary-blue);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.repository-returners-panel>summary h2,
.import-history-panel>summary h2 {
    margin: 4px 0 0;
    font-size: 20px;
}

.repository-returners-panel>summary>strong,
.import-history-panel>summary>strong {
    color: var(--muted);
    font-size: 13px;
}

.repository-returners-body,
.import-history-body {
    margin-top: 18px;
    border-top: 1px solid var(--line);
}

.import-upload-form {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.import-column-guide {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.import-column-guide>summary {
    color: var(--primary-blue);
    font-weight: 700;
}

.import-column-guide>div {
    padding-top: 10px;
    color: var(--muted);
}

.import-column-guide p {
    margin: 4px 0;
}

.import-preview-summary {
    margin-bottom: 18px;
}

.import-preview-table {
    min-width: 880px;
}

.discipline-workflow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.discipline-workflow-step {
    min-width: 0;
    min-height: 60px;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--ink);
    text-decoration: none;
    border-right: 1px solid var(--line);
}

.discipline-workflow-step:last-child {
    border-right: 0;
}

.discipline-workflow-step>span {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: grid;
    place-items: center;
    color: var(--primary-blue);
    background: var(--surface-muted);
    border: 1px solid var(--line);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 800;
}

.discipline-workflow-step.current {
    box-shadow: none;
    color: var(--primary-blue-dark);
}

.discipline-workflow-step.current>span {
    color: #fff;
    background: var(--primary-blue);
    border-color: var(--primary-blue);
}

/* Discipline module navigation: primary destinations only. */
.discipline-module-nav {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.discipline-module-nav .discipline-workflow-step {
    min-height: 48px;
    justify-content: center;
    text-align: center;
}

.discipline-module-nav .discipline-workflow-step strong {
    font-size: 14px;
}

.discipline-sheet-controls .student-filter-panel {
    padding: 0;
    border: 0;
}

.discipline-sheet-filter-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sheet-add-disclosure {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.sheet-add-disclosure>summary {
    width: fit-content;
    list-style: none;
    color: var(--primary-blue);
    font-weight: 700;
    cursor: pointer;
}

.sheet-add-disclosure>summary::-webkit-details-marker,
.sheet-settings-panel>summary::-webkit-details-marker,
.discipline-history-panel>summary::-webkit-details-marker,
.policy-create-panel>summary::-webkit-details-marker,
.policy-record>summary::-webkit-details-marker,
.counseling-case>summary::-webkit-details-marker {
    display: none;
}

.sheet-add-disclosure>summary::before {
    content: '+';
    width: 22px;
    height: 22px;
    margin-right: 7px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
}

.sheet-add-disclosure[open]>summary::before {
    content: '-';
}

.discipline-add-row-form {
    margin-top: 14px;
    display: grid;
    grid-template-columns: minmax(260px, 1.2fr) minmax(150px, 0.5fr) minmax(220px, 1fr) auto;
    align-items: end;
    gap: 12px;
}

.discipline-add-row-empty {
    margin: 10px 0 0;
}

.sheet-settings-panel>summary,
.discipline-history-panel>summary,
.policy-create-panel>summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    list-style: none;
    cursor: pointer;
}

.sheet-settings-panel>summary span,
.discipline-history-panel>summary span,
.policy-create-panel>summary span {
    display: block;
    color: var(--primary-blue);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.sheet-settings-panel>summary h2,
.discipline-history-panel>summary h2,
.policy-create-panel>summary h2 {
    margin: 4px 0 0;
    font-size: 20px;
}

.sheet-settings-panel>summary>strong,
.discipline-history-panel>summary>strong,
.policy-create-panel>summary>strong {
    color: var(--muted);
    font-size: 13px;
}

.sheet-settings-panel .sheet-header-form,
.policy-create-form {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.discipline-sheet-toolbar {
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: var(--radius) var(--radius) 0 0;
}

.discipline-sheet-toolbar strong,
.discipline-sheet-toolbar span {
    display: block;
}

.discipline-sheet-toolbar span {
    margin-top: 2px;
    color: var(--muted);
    font-size: 13px;
}

.sheet-zoom-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sheet-zoom-controls .icon-button {
    width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    font-size: 20px;
}

.zoom-reset-button {
    min-width: 64px;
    min-height: 38px;
    padding: 6px 10px;
}

.discipline-sheet-page .discipline-sheet-shell {
    border-radius: 0;
}

.discipline-sheet-page .discipline-sheet {
    min-width: 1680px;
}

.discipline-history-body {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.discipline-history-panel[open]>summary {
    padding-bottom: 16px;
}

.discipline-student-results {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.discipline-student-results a {
    min-width: 0;
    min-height: 58px;
    padding: 11px 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    color: inherit;
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.discipline-student-results a:hover {
    border-color: var(--primary-blue);
    background: #f8fbff;
}

.discipline-student-results a>div,
.discipline-student-results strong,
.discipline-student-results span {
    min-width: 0;
}

.discipline-student-results strong,
.discipline-student-results span {
    display: block;
}

.discipline-student-results span {
    color: var(--muted);
    font-size: 13px;
    overflow-wrap: anywhere;
}

.discipline-student-context {
    min-width: 0;
    padding: 18px 20px;
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(320px, 1fr) auto;
    align-items: center;
    gap: 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 1px solid var(--line);
    border-radius: var(--radius);
}

.discipline-student-context>div,
.discipline-student-context h2,
.discipline-student-context p {
    min-width: 0;
}

.discipline-student-context>div>span,
.discipline-student-facts span,
.category-student-context span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.discipline-student-context h2 {
    margin: 4px 0;
    font-size: 21px;
    overflow-wrap: anywhere;
}

.discipline-student-context p,
.category-student-context p {
    margin: 0;
    color: var(--muted);
}

.discipline-student-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.discipline-student-facts>div {
    min-width: 0;
    padding-left: 14px;
    border-left: 1px solid var(--line);
}

.discipline-student-facts strong {
    display: block;
    margin-top: 4px;
    overflow-wrap: anywhere;
}

.discipline-policy-groups {
    display: grid;
    gap: 18px;
}

.discipline-policy-group,
.policy-rule-editor {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.discipline-policy-group+.discipline-policy-group {
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.discipline-policy-group legend,
.policy-rule-editor legend {
    width: 100%;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 800;
}

.discipline-policy-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.discipline-policy-option {
    min-height: 64px;
}

.badge.classification-minor,
.classification-minor {
    color: #695400;
    background: #fff5bd;
}

.badge.classification-major,
.classification-major {
    color: var(--primary-blue-dark);
    background: var(--primary-blue-soft);
}

.badge.classification-grave,
.classification-grave {
    color: #8a1f17;
    background: #fff0ed;
}

.pending-violation-table {
    min-width: 980px;
}

.discipline-confirm-form {
    min-width: 190px;
    display: grid;
    gap: 9px;
}

.policy-filter-row {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(160px, 0.45fr) minmax(150px, 0.4fr) auto auto;
}

.policy-filter-panel .student-filter-panel {
    padding: 0;
    border: 0;
}

.policy-create-panel,
.policy-record {
    scroll-margin-top: 92px;
}

.policy-rule-editor-grid,
.policy-rule-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.policy-rule-editor {
    padding: 15px;
    background: var(--surface-muted);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.policy-record-list {
    display: grid;
    gap: 10px;
}

.policy-record {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.policy-record>summary {
    min-height: 70px;
    padding: 13px 15px;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto auto minmax(70px, auto) auto;
    align-items: center;
    gap: 13px;
    list-style: none;
    cursor: pointer;
}

.policy-record-title,
.policy-record-title strong,
.policy-record-title span {
    min-width: 0;
    display: block;
}

.policy-record-title span {
    margin-top: 3px;
    color: var(--muted);
    font-size: 13px;
    overflow-wrap: anywhere;
}

.policy-usage-count {
    color: var(--muted);
    font-size: 13px;
    text-align: center;
}

.policy-record-body {
    padding: 18px;
    border-top: 1px solid var(--line);
    background: var(--surface-muted);
}

.policy-rule-summary-grid>div {
    min-width: 0;
    padding: 13px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.policy-rule-summary-grid span,
.policy-rule-summary-grid strong,
.policy-rule-summary-grid small {
    display: block;
}

.policy-rule-summary-grid span {
    color: var(--primary-blue);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.policy-rule-summary-grid strong {
    margin-top: 5px;
}

.policy-rule-summary-grid small {
    margin-top: 6px;
    color: var(--muted);
    line-height: 1.45;
}

.policy-edit-form {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.policy-admin-actions {
    margin-top: 18px;
    padding-top: 16px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    border-top: 1px solid var(--line);
}

.discipline-status-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.discipline-status-strip>div {
    min-width: 0;
    padding: 15px 18px;
    border-right: 1px solid var(--line);
}

.discipline-status-strip>div:last-child {
    border-right: 0;
}

.discipline-status-strip span,
.discipline-status-strip strong {
    display: block;
}

.discipline-status-strip span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.discipline-status-strip strong {
    margin-top: 4px;
    font-size: 22px;
}

.follow-up-filter-panel .student-search-row {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(180px, 0.45fr) auto auto;
}

.follow-up-record-list,
.counseling-case-list {
    display: grid;
    gap: 10px;
}

.follow-up-record {
    padding: 14px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    scroll-margin-top: 92px;
}

.follow-up-record-main {
    min-width: 0;
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: minmax(180px, 0.8fr) minmax(240px, 1.2fr) auto;
    align-items: center;
    gap: 16px;
}

.follow-up-record-main>div,
.follow-up-record-main strong,
.follow-up-record-main span {
    min-width: 0;
    display: block;
}

.follow-up-record-main>div>span {
    margin-top: 3px;
    color: var(--muted);
    font-size: 13px;
    overflow-wrap: anywhere;
}

.follow-up-record-actions {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 9px;
    flex-wrap: wrap;
}

.follow-up-record-actions .field {
    margin-bottom: 0;
}

.history-stack {
    display: grid;
    gap: 22px;
}

.counseling-case {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    scroll-margin-top: 92px;
}

.counseling-case>summary {
    min-height: 74px;
    padding: 13px 15px;
    display: grid;
    grid-template-columns: minmax(170px, 0.7fr) minmax(220px, 1fr) minmax(170px, 0.7fr) auto auto;
    align-items: center;
    gap: 14px;
    list-style: none;
    cursor: pointer;
}

.counseling-case-student,
.counseling-case-title,
.counseling-case-schedule,
.counseling-case-student strong,
.counseling-case-student span,
.counseling-case-title strong,
.counseling-case-title span,
.counseling-case-schedule strong,
.counseling-case-schedule span {
    min-width: 0;
    display: block;
}

.counseling-case-student span,
.counseling-case-title span,
.counseling-case-schedule span {
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
    overflow-wrap: anywhere;
}

.counseling-case-schedule strong {
    margin-top: 3px;
    font-size: 13px;
}

.counseling-case-body {
    padding: 18px;
    background: var(--surface-muted);
    border-top: 1px solid var(--line);
}

.behavior-category-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.behavior-category-card {
    min-width: 0;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 1px solid var(--line);
    border-radius: var(--radius);
}

.behavior-category-card.category-a {
    border-top-color: var(--line);
}

.behavior-category-card.category-b {
    border-top-color: var(--line);
}

.behavior-category-card.category-c {
    border-top-color: var(--line);
}

.behavior-category-card.category-d {
    border-top-color: var(--line);
}

.behavior-category-card>div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.behavior-category-card>div span {
    color: var(--primary-blue);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.behavior-category-card>div strong {
    font-size: 24px;
}

.behavior-category-card h2 {
    margin: 12px 0 5px;
    font-size: 17px;
}

.behavior-category-card p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.category-student-context {
    margin-top: 16px;
    padding: 15px 16px;
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(150px, 0.4fr) auto;
    align-items: center;
    gap: 18px;
    background: #f8fbff;
    border: 1px solid var(--line);
    border-left: 1px solid var(--line);
    border-radius: var(--radius);
}

.category-student-context h3 {
    margin: 4px 0;
    font-size: 19px;
}

.category-student-context>div>strong {
    display: block;
    margin-top: 4px;
}

.category-confirm-form {
    margin-top: 16px;
    padding-top: 16px;
    display: grid;
    grid-template-columns: minmax(180px, 0.45fr) minmax(280px, 1fr) auto;
    align-items: end;
    gap: 12px;
    border-top: 1px solid var(--line);
}

.category-history-filter {
    margin-bottom: 16px;
}

.category-search-empty {
    margin-top: 14px;
}

.gmc-workflow-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 12px;
}

.gmc-workflow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.gmc-workflow-step {
    min-width: 0;
    min-height: 60px;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--ink);
    text-decoration: none;
    border-right: 1px solid var(--line);
}

.gmc-workflow-step:last-child {
    border-right: 0;
}

.gmc-workflow-step>span {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: grid;
    place-items: center;
    color: var(--primary-blue);
    background: var(--surface-muted);
    border: 1px solid var(--line);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 800;
}

.gmc-workflow-step.current {
    color: var(--primary-blue-dark);
    box-shadow: none;
}

.gmc-workflow-step.current>span {
    color: #fff;
    background: var(--primary-blue);
    border-color: var(--primary-blue);
}

.gmc-template-shortcut {
    min-height: 60px;
    align-self: stretch;
}

.gmc-template-shortcut.current {
    color: var(--primary-blue-dark);
    border-color: var(--school-yellow);
    box-shadow: none;
}

.gmc-status-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.gmc-release-status {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.gmc-status-strip>div {
    min-width: 0;
    padding: 15px 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-right: 1px solid var(--line);
}

.gmc-status-strip>div:last-child {
    border-right: 0;
}

.gmc-status-strip span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.gmc-status-strip strong {
    color: var(--primary-blue-dark);
    font-size: 24px;
}

.gmc-student-search,
.gmc-new-request-form,
.gmc-filter-row,
.gmc-request-review-form,
.gmc-release-form,
.gmc-void-form {
    display: grid;
    align-items: end;
    gap: 12px;
}

.gmc-student-search {
    grid-template-columns: minmax(260px, 1fr) auto;
}

.gmc-student-results {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.gmc-student-result {
    min-width: 0;
    padding: 12px 14px;
    color: var(--ink);
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.gmc-student-result:hover,
.gmc-student-result.selected {
    border-color: var(--primary-blue);
    box-shadow: none;
}

.gmc-student-result strong,
.gmc-student-result span {
    min-width: 0;
    display: block;
    overflow-wrap: anywhere;
}

.gmc-student-result span {
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
}

.gmc-selected-student {
    margin-top: 16px;
    padding: 15px 16px;
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(260px, auto);
    align-items: center;
    gap: 18px;
    background: #f8fbff;
    border: 1px solid var(--line);
    border-left: 1px solid var(--line);
    border-radius: var(--radius);
}

.gmc-selected-student span,
.gmc-selected-student small,
.gmc-selected-student strong {
    display: block;
}

.gmc-selected-student>div:first-child>span,
.gmc-selected-student small {
    color: var(--muted);
    font-size: 12px;
}

.gmc-selected-student>div:first-child>strong {
    margin: 4px 0;
    font-size: 18px;
}

.gmc-selected-facts {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.gmc-selected-facts span {
    padding: 5px 8px;
    color: var(--primary-blue-dark);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
}

.gmc-new-request-form {
    margin-top: 14px;
    padding-top: 14px;
    grid-template-columns: minmax(280px, 1fr) auto;
    border-top: 1px solid var(--line);
}

.gmc-filter-row {
    margin-bottom: 16px;
    grid-template-columns: minmax(240px, 1fr) minmax(170px, 0.45fr) minmax(90px, 0.2fr) auto auto;
}

.gmc-request-list {
    display: grid;
    gap: 10px;
}

.gmc-request-record {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    scroll-margin-top: 92px;
}

.gmc-request-record>summary,
.gmc-template-upload>summary,
.gmc-void-panel>summary {
    list-style: none;
    cursor: pointer;
}

.gmc-request-record>summary::-webkit-details-marker,
.gmc-template-upload>summary::-webkit-details-marker,
.gmc-void-panel>summary::-webkit-details-marker {
    display: none;
}

.gmc-request-record>summary {
    min-height: 70px;
    padding: 13px 15px;
    display: grid;
    grid-template-columns: minmax(170px, 0.75fr) minmax(220px, 1fr) auto minmax(145px, auto) auto;
    align-items: center;
    gap: 14px;
}

.gmc-request-student strong,
.gmc-request-student span,
.gmc-request-purpose strong,
.gmc-request-purpose span {
    min-width: 0;
    display: block;
    overflow-wrap: anywhere;
}

.gmc-request-student span,
.gmc-request-purpose span,
.gmc-request-stage {
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
}

.gmc-request-body {
    padding: 17px;
    background: var(--surface-muted);
    border-top: 1px solid var(--line);
}

.gmc-eligibility-facts,
.gmc-data-review,
.gmc-template-facts,
.gmc-release-record {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.gmc-eligibility-facts>div,
.gmc-data-review>div,
.gmc-template-facts>div,
.gmc-release-record>div {
    min-width: 0;
    padding: 12px 13px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.gmc-eligibility-facts span,
.gmc-data-review span,
.gmc-template-facts span,
.gmc-release-record span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.gmc-eligibility-facts strong,
.gmc-data-review strong,
.gmc-template-facts strong,
.gmc-release-record strong {
    min-width: 0;
    margin-top: 5px;
    display: block;
    overflow-wrap: anywhere;
}

.gmc-request-actions {
    margin-top: 14px;
    padding-top: 14px;
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    border-top: 1px solid var(--line);
}

.gmc-request-review-form {
    min-width: min(100%, 620px);
    flex: 1;
    grid-template-columns: minmax(170px, 0.4fr) minmax(220px, 1fr) auto;
}

.gmc-release-filter-grid,
.gmc-batch-filter-grid,
.gmc-preview-form-grid,
.gmc-template-upload-grid {
    display: grid;
    gap: 12px;
}

.gmc-release-filter-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.gmc-release-filter-grid+.button-row {
    margin-top: 14px;
}

.gmc-release-table {
    min-width: 1120px;
}

.gmc-release-table td:last-child {
    width: 150px;
}

.badge.warning-badge,
.warning-badge {
    color: #6b4d00;
    background: #fff6cf;
    border-color: #ead16b;
}

.badge.muted-badge,
.muted-badge {
    color: var(--muted);
    background: var(--surface-muted);
    border-color: var(--line);
}

.gmc-batch-filter-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gmc-batch-actions {
    padding-top: 16px;
    display: flex;
    gap: 10px;
    border-top: 1px solid var(--line);
}

.gmc-batch-review-table,
.gmc-template-table {
    min-width: 940px;
}

.gmc-stage-progress {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.gmc-stage-progress li {
    min-height: 58px;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    border-right: 1px solid var(--line);
}

.gmc-stage-progress li:last-child {
    border-right: 0;
}

.gmc-stage-progress li span {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 800;
}

.gmc-stage-progress li.done {
    color: var(--primary-blue-dark);
    background: #f4f8fd;
}

.gmc-stage-progress li.done span {
    color: #fff;
    background: var(--primary-blue);
    border-color: var(--primary-blue);
}

.gmc-stage-progress li.current {
    color: var(--primary-blue-dark);
    box-shadow: none;
}

.gmc-stage-progress li.current span {
    color: var(--primary-blue-dark);
    background: var(--school-yellow);
    border-color: var(--school-yellow);
}

.gmc-official-preview .panel-header {
    align-items: center;
}

.gmc-pdf-frame {
    width: 100%;
    height: min(78vh, 920px);
    min-height: 620px;
    display: block;
    background: #e9edf2;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.gmc-print-modal[hidden] {
    display: none;
}

.gmc-print-modal {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: grid;
    place-items: center;
    padding: 24px;
}

.gmc-print-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.68);
    backdrop-filter: blur(3px);
}

.gmc-print-modal-panel {
    position: relative;
    width: min(1180px, 96vw);
    height: min(820px, 92vh);
    overflow: hidden;
    border: 1px solid #dbe3ee;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.3);
}

.gmc-print-modal-header {
    min-height: 76px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid #e5eaf0;
}

.gmc-print-modal-header span,
.gmc-print-column-heading span {
    color: #64748b;
    font-size: 0.78rem;
}

.gmc-print-modal-header h2,
.gmc-print-settings-column h3 {
    margin: 3px 0 0;
}

.gmc-print-modal-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    height: calc(100% - 76px);
}

.gmc-print-document-column {
    min-width: 0;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #eef2f7;
}

.gmc-print-column-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.gmc-print-preview-frame {
    width: 100%;
    min-height: 0;
    flex: 1;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #fff;
}

.gmc-print-settings-column {
    overflow-y: auto;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 17px;
    border-left: 1px solid #e5eaf0;
}

.gmc-print-settings-column p,
.gmc-print-settings-column small {
    color: #64748b;
    line-height: 1.45;
}

.gmc-print-next-step {
    padding: 16px;
    border: 1px solid #dbe3ee;
    border-radius: 10px;
    background: #f8fafc;
}

.gmc-print-next-step p {
    margin: 10px 0 0;
}

.gmc-print-settings-column small {
    margin-top: 4px;
    font-size: 0.75rem;
}

.gmc-print-summary {
    padding: 11px 12px;
    border: 1px solid #dbe3ee;
    border-radius: 9px;
    background: #f8fafc;
    color: #334155;
    font-size: 0.84rem;
}

.gmc-print-actions {
    margin-top: auto;
    padding-top: 4px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

body.modal-open {
    overflow: hidden;
}

@media (max-width: 820px) {
    .gmc-print-modal {
        padding: 10px;
    }

    .gmc-print-modal-panel {
        width: 100%;
        height: 96vh;
    }

    .gmc-print-modal-content {
        grid-template-columns: 1fr;
        overflow-y: auto;
    }

    .gmc-print-document-column {
        min-height: 54vh;
    }

    .gmc-print-settings-column {
        overflow: visible;
        border-top: 1px solid #e5eaf0;
        border-left: 0;
    }
}

.gmc-data-review {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gmc-preview-form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gmc-preview-form-grid+.button-row {
    margin-top: 14px;
}

.gmc-ready-actions {
    display: grid;
    grid-template-columns: auto minmax(320px, 1fr);
    align-items: end;
    gap: 14px;
}

.gmc-release-form {
    grid-template-columns: minmax(260px, 1fr) auto;
}

.gmc-release-record {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gmc-template-upload>summary,
.gmc-void-panel>summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.gmc-template-upload>summary span,
.gmc-void-panel>summary span {
    display: block;
    color: var(--primary-blue);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.gmc-template-upload>summary h2,
.gmc-void-panel>summary h2 {
    margin: 4px 0 0;
    font-size: 20px;
}

.gmc-template-upload>summary>strong,
.gmc-void-panel>summary>strong {
    color: var(--muted);
    font-size: 13px;
}

.gmc-template-upload[open]>summary,
.gmc-void-panel[open]>summary {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

.gmc-template-upload>form,
.gmc-void-panel>form {
    padding-top: 16px;
}

.gmc-template-facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gmc-template-upload-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gmc-void-panel {
    border-color: #e7b9b9;
}

.gmc-void-form {
    grid-template-columns: minmax(280px, 1fr) auto;
}

.button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

@media (max-width: 1040px) {
    .gmc-workflow-row {
        grid-template-columns: 1fr;
    }

    .gmc-template-shortcut {
        width: fit-content;
        min-height: 44px;
    }

    .gmc-release-status {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .gmc-release-status>div:nth-child(3) {
        border-right: 0;
    }

    .gmc-release-status>div:nth-child(n + 4) {
        border-top: 1px solid var(--line);
    }

    .gmc-release-filter-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .gmc-batch-filter-grid,
    .gmc-preview-form-grid,
    .gmc-template-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gmc-request-record>summary {
        grid-template-columns: minmax(170px, 0.8fr) minmax(220px, 1fr) auto auto;
    }

    .gmc-request-record>summary .gmc-request-stage {
        grid-column: 2;
        grid-row: 2;
    }

    .gmc-request-record>summary .text-link {
        grid-column: 4;
        grid-row: 1 / 3;
    }

    .gmc-ready-actions {
        grid-template-columns: 1fr;
    }

    .summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .form-grid,
    .rules-grid,
    .checklist-grid,
    .detail-grid,
    .student-pick-list,
    .settings-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .form-grid .span-2 {
        grid-column: span 2;
    }

    .two-column,
    .login-panel,
    .dashboard-work-grid,
    .dashboard-activity-grid {
        grid-template-columns: 1fr;
    }

    .workflow-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .student-filter-grid,
    .student-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .school-year-flow,
    .repository-summary-grid,
    .academic-status-strip,
    .import-preview-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .school-year-flow-step:nth-child(2),
    .academic-status-strip>div:nth-child(2),
    .import-preview-summary>div:nth-child(2) {
        border-right: 0;
    }

    .school-year-flow-step:nth-child(n + 3),
    .academic-status-strip>div:nth-child(n + 3),
    .import-preview-summary>div:nth-child(n + 3) {
        border-top: 1px solid var(--line);
    }

    .school-year-source-row,
    .school-year-target-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .academic-catalog-grid,
    .repository-breakdown-grid {
        grid-template-columns: 1fr;
    }

    .repository-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .discipline-workflow,
    .discipline-status-strip,
    .behavior-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .discipline-workflow-step:nth-child(2),
    .discipline-status-strip>div:nth-child(2) {
        border-right: 0;
    }

    .discipline-workflow-step:nth-child(n + 3),
    .discipline-status-strip>div:nth-child(n + 3) {
        border-top: 1px solid var(--line);
    }

    .discipline-add-row-form,
    .policy-filter-row,
    .follow-up-filter-panel .student-search-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .discipline-student-context {
        grid-template-columns: minmax(220px, 1fr) minmax(280px, 1fr);
    }

    .discipline-student-context>.button {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .discipline-policy-grid,
    .policy-rule-editor-grid,
    .policy-rule-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .follow-up-record {
        align-items: stretch;
        flex-direction: column;
    }

    .follow-up-record-actions {
        justify-content: space-between;
    }

    .counseling-case>summary {
        grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    }

    .counseling-case-schedule {
        grid-column: 1 / 3;
    }

    .login-copy {
        min-height: auto;
    }
}

@media (max-width: 820px) {
    .student-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gmc-status-strip,
    .gmc-release-status {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gmc-status-strip>div:nth-child(2n),
    .gmc-release-status>div:nth-child(2n) {
        border-right: 0;
    }

    .gmc-status-strip>div:nth-child(n + 3),
    .gmc-release-status>div:nth-child(n + 3) {
        border-top: 1px solid var(--line);
    }

    .gmc-release-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gmc-request-record>summary {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .gmc-request-record>summary .gmc-request-purpose,
    .gmc-request-record>summary .gmc-request-stage {
        grid-column: 1;
        grid-row: auto;
    }

    .gmc-request-record>summary .badge {
        grid-column: 2;
        grid-row: 1;
    }

    .gmc-request-record>summary .text-link {
        grid-column: 2;
        grid-row: 2 / 4;
    }

    .gmc-request-review-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gmc-request-review-form .button {
        justify-self: start;
    }

    .app-shell {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: fixed;
        z-index: 30;
        inset: 0 auto 0 0;
        width: min(var(--sidebar-width), 86vw);
        transform: translateX(-105%);
        transition: transform 0.2s ease;
    }

    .app-shell.sidebar-open .sidebar {
        transform: translateX(0);
    }

    .sidebar-toggle {
        display: inline-grid;
    }

    .topbar {
        align-items: flex-start;
    }

    .topbar-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .student-status-grid,
    .profile-count-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .student-status-grid>div:nth-child(3),
    .profile-count-grid>div:nth-child(3) {
        border-left: 0;
    }

    .student-status-grid>div:nth-child(n + 3),
    .profile-count-grid>div:nth-child(n + 3) {
        border-top: 1px solid var(--line);
    }
}

@media (max-width: 620px) {
    .student-profile-identity-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    .student-profile-identity-meta span+span::before {
        content: none;
    }

    .student-detail-grid .student-detail-wide {
        grid-column: auto;
    }

    .gmc-workflow-row,
    .gmc-workflow,
    .gmc-status-strip,
    .gmc-release-status,
    .gmc-student-results,
    .gmc-selected-student,
    .gmc-eligibility-facts,
    .gmc-data-review,
    .gmc-template-facts,
    .gmc-release-record,
    .gmc-release-filter-grid,
    .gmc-batch-filter-grid,
    .gmc-preview-form-grid,
    .gmc-template-upload-grid,
    .gmc-stage-progress,
    .gmc-ready-actions {
        grid-template-columns: 1fr;
    }

    .gmc-workflow-step,
    .gmc-workflow-step:last-child,
    .gmc-status-strip>div,
    .gmc-release-status>div,
    .gmc-release-status>div:nth-child(3) {
        border-right: 0;
    }

    .gmc-workflow-step+.gmc-workflow-step,
    .gmc-status-strip>div+div,
    .gmc-release-status>div+div,
    .gmc-stage-progress li+li {
        border-top: 1px solid var(--line);
    }

    .gmc-template-shortcut,
    .gmc-student-search .button,
    .gmc-new-request-form .button,
    .gmc-filter-row .button,
    .gmc-request-review-form .button,
    .gmc-release-form .button,
    .gmc-void-form .button,
    .gmc-batch-actions .button {
        width: 100%;
    }

    .gmc-student-search,
    .gmc-new-request-form,
    .gmc-filter-row,
    .gmc-request-review-form,
    .gmc-release-form,
    .gmc-void-form {
        grid-template-columns: 1fr;
    }

    .gmc-selected-facts {
        justify-content: flex-start;
    }

    .gmc-request-record>summary {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .gmc-request-record>summary .gmc-request-purpose,
    .gmc-request-record>summary .gmc-request-stage {
        grid-column: 1;
    }

    .gmc-request-actions,
    .gmc-batch-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .gmc-request-actions>.button,
    .gmc-request-actions>form {
        width: 100%;
    }

    .gmc-request-review-form .button {
        justify-self: stretch;
    }

    .gmc-stage-progress li {
        border-right: 0;
    }

    .gmc-pdf-frame {
        height: 65vh;
        min-height: 420px;
    }

    .gmc-official-preview .panel-header,
    .gmc-template-upload>summary,
    .gmc-void-panel>summary {
        align-items: flex-start;
    }

    .gmc-template-upload>summary h2,
    .gmc-void-panel>summary h2 {
        font-size: 18px;
    }

    .gmc-preview-form-grid .span-2,
    .gmc-template-upload-grid .span-2,
    .gmc-data-review .span-2 {
        grid-column: auto;
    }

    .auth-shell,
    .page-content {
        padding: 16px;
    }

    .login-copy,
    .login-card,
    .status-banner,
    .panel,
    .summary-card {
        padding: 18px;
    }

    .login-copy h1 {
        font-size: 28px;
    }

    .foundation-list,
    .summary-grid {
        grid-template-columns: 1fr;
    }

    .workflow-actions {
        grid-template-columns: 1fr;
    }

    .staff-dashboard-page .dashboard-overview {
        align-items: stretch;
    }

    .staff-dashboard-page .dashboard-overview .button {
        width: 100%;
    }

    .staff-dashboard-page .dashboard-work-grid {
        grid-template-columns: 1fr;
    }


    .student-search-row,
    .pagination,
    .student-danger-zone,
    .student-profile-actions,
    .student-form-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .student-filter-grid,
    .student-detail-grid {
        grid-template-columns: 1fr;
    }

    .student-search-row .button,
    .student-profile-actions .button,
    .student-form-actions .button,
    .student-danger-zone .button {
        width: 100%;
    }

    .pagination-links {
        flex-wrap: wrap;
    }

    .student-status-grid,
    .profile-count-grid {
        grid-template-columns: 1fr;
    }

    .student-status-grid>div,
    .profile-count-grid>div,
    .student-status-grid>div:nth-child(3),
    .profile-count-grid>div:nth-child(3) {
        border-left: 0;
    }

    .student-status-grid>div+div,
    .profile-count-grid>div+div {
        border-top: 1px solid var(--line);
    }

    .profile-disclosure>summary {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .profile-disclosure>summary strong {
        order: 3;
        width: 100%;
    }

    .student-form {
        padding: 18px;
    }

    .form-grid,
    .rules-grid,
    .checklist-grid,
    .detail-grid,
    .student-pick-list,
    .settings-grid {
        grid-template-columns: 1fr;
    }

    .form-grid .span-2 {
        grid-column: span 1;
    }

    .status-banner,
    .topbar,
    .dashboard-overview {
        display: grid;
    }

    .topbar {
        grid-template-columns: minmax(0, 1fr);
        min-width: 0;
        width: 100%;
    }

    .school-header-title {
        margin-left: 0;
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .dashboard-year-line {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .dashboard-overview .button {
        width: 100%;
    }

    .topbar-actions {
        justify-content: flex-start;
    }

    .user-chip-link {
        padding: 4px;
    }

    .user-chip-copy {
        display: none;
    }

    .page-header,
    .certificate-meta {
        display: grid;
    }

    .page-header-actions,
    .repository-year-actions,
    .repository-source-band,
    .academic-year-warning,
    .import-upload-form,
    .repository-refresh-form {
        display: grid;
        grid-template-columns: 1fr;
    }

    .page-header-actions .button,
    .repository-year-actions .button,
    .repository-source-band .button,
    .import-upload-form .button,
    .repository-refresh-form .button {
        width: 100%;
    }

    .repository-year-picker {
        display: grid;
        grid-template-columns: 1fr;
    }

    .school-year-flow,
    .import-flow,
    .academic-status-strip,
    .import-preview-summary,
    .repository-summary-grid {
        grid-template-columns: 1fr;
    }

    .school-year-flow-step,
    .import-flow-step,
    .academic-status-strip>div,
    .import-preview-summary>div,
    .school-year-flow-step:nth-child(2),
    .academic-status-strip>div:nth-child(2),
    .import-preview-summary>div:nth-child(2) {
        border-right: 0;
    }

    .school-year-flow-step+.school-year-flow-step,
    .import-flow-step+.import-flow-step,
    .academic-status-strip>div+div,
    .import-preview-summary>div+div {
        border-top: 1px solid var(--line);
    }

    .school-year-source-row,
    .school-year-target-controls,
    .repository-filter-grid {
        grid-template-columns: 1fr;
    }

    .workflow-disclosure-right>.workflow-disclosure-body,
    .workflow-disclosure-right.compact-disclosure>.workflow-disclosure-body,
    .repository-refresh-form {
        position: static;
        width: 100%;
        margin-top: 10px;
        box-shadow: none;
    }

    .panel-header:has(.workflow-disclosure-right) {
        display: grid;
    }

    .academic-record>summary,
    .academic-catalog-grid .academic-record>summary {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .academic-record-meta {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .academic-record>summary .text-link {
        grid-column: 2;
    }

    .discipline-workflow,
    .discipline-status-strip,
    .behavior-category-grid,
    .discipline-student-results,
    .discipline-student-facts,
    .discipline-policy-grid,
    .policy-rule-editor-grid,
    .policy-rule-summary-grid {
        grid-template-columns: 1fr;
    }

    .discipline-workflow-step,
    .discipline-workflow-step:nth-child(2),
    .discipline-status-strip>div,
    .discipline-status-strip>div:nth-child(2) {
        border-right: 0;
    }

    .discipline-workflow-step+.discipline-workflow-step,
    .discipline-status-strip>div+div {
        border-top: 1px solid var(--line);
    }

    .discipline-add-row-form,
    .policy-filter-row,
    .follow-up-filter-panel .student-search-row,
    .discipline-student-context,
    .category-student-context,
    .category-confirm-form {
        grid-template-columns: 1fr;
    }

    .discipline-add-row-form .button,
    .policy-filter-row .button,
    .follow-up-filter-panel .button,
    .discipline-student-context .button,
    .category-student-context .button,
    .category-confirm-form .button {
        width: 100%;
    }

    .discipline-student-context>.button {
        grid-column: auto;
    }

    .discipline-student-facts>div {
        padding: 10px 0 0;
        border-left: 0;
        border-top: 1px solid var(--line);
    }

    .discipline-sheet-toolbar,
    .policy-admin-actions,
    .follow-up-record-main,
    .follow-up-record-actions,
    .sheet-settings-panel>summary,
    .discipline-history-panel>summary,
    .policy-create-panel>summary {
        display: grid;
        grid-template-columns: 1fr;
    }

    .sheet-zoom-controls {
        justify-content: flex-start;
    }

    .policy-record>summary {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .policy-record-title {
        grid-column: 1 / -1;
    }

    .policy-usage-count {
        text-align: left;
    }

    .counseling-case>summary {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .counseling-case-title,
    .counseling-case-schedule {
        grid-column: 1 / -1;
    }

    .counseling-case>summary .text-link {
        grid-column: 2;
        grid-row: 1;
    }

    .certificate-paper {
        padding: 28px;
    }
}

@media print {

    .sidebar,
    .topbar,
    .no-print,
    .toast-stack {
        display: none !important;
    }

    .app-shell {
        display: block;
    }

    .page-content {
        padding: 0;
    }

    .certificate-paper {
        box-shadow: none;
        border: 0;
        width: 100%;
        min-height: auto;
    }

    .batch-certificate-preview {
        display: block;
    }

    .batch-certificate-page {
        min-height: 100vh;
    }
}

/* Account registration and credential provisioning */
.registration-name-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.staff-registration-panel .login-copy,
.staff-registration-panel .login-card {
    min-height: 600px;
}

.otp-verification-card {
    display: grid;
    gap: 18px;
}

.otp-destination,
.otp-expiry-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.otp-destination {
    padding: 14px 16px;
    background: var(--surface-muted);
    border: 1px solid var(--line);
    border-left: 1px solid var(--line);
}

.otp-destination span,
.otp-expiry-row span {
    color: var(--muted);
}

.otp-code-input {
    min-height: 58px;
    text-align: center;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 0;
}

.otp-expiry-row {
    min-height: 44px;
    margin-bottom: 12px;
}

.otp-expiry-row strong {
    color: var(--primary-blue-dark);
    font-variant-numeric: tabular-nums;
}

.otp-secondary-actions {
    display: grid;
    gap: 10px;
}

.generated-credentials-panel {
    border-left: 1px solid var(--line);
}

.credential-result-table code {
    display: inline-block;
    padding: 4px 7px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface-muted);
    color: var(--primary-blue-dark);
    font-family: Consolas, "Courier New", monospace;
    font-weight: 700;
    white-space: nowrap;
}

.staff-request-actions,
.access-profile-actions,
.student-account-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.staff-request-actions form,
.access-profile-actions form {
    margin: 0;
}

.inline-decision-details {
    position: relative;
}

.inline-decision-details>summary {
    list-style: none;
    cursor: pointer;
}

.inline-decision-details>summary::-webkit-details-marker {
    display: none;
}

.inline-decision-details[open] form {
    width: min(320px, 75vw);
    display: grid;
    gap: 10px;
    margin-top: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.credential-skipped-list {
    margin-top: 14px;
}

.credential-skipped-list p {
    margin: 6px 0;
}

.student-account-actions {
    padding: 16px;
    border-top: 1px solid var(--line);
}

.selection-column {
    width: 46px;
    text-align: center;
}

.selection-column input {
    width: 18px;
    height: 18px;
}

.account-status-band {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.account-status-band>div {
    min-width: 0;
    padding: 16px;
    border-right: 1px solid var(--line);
}

.account-status-band>div:last-child {
    border-right: 0;
}

.account-status-band span,
.account-status-band strong {
    display: block;
    overflow-wrap: anywhere;
}

.account-status-band span {
    color: var(--muted);
    font-size: 12px;
}

.account-status-band strong {
    margin-top: 4px;
}

.password-change-panel {
    width: min(620px, 100%);
}

.guidance-profile-security-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.guidance-profile-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
}

.guidance-profile-identity-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.account-mobile-actions {
    display: flex;
    justify-content: flex-end;
}

.account-home-page>.account-mobile-actions {
    margin-top: -10px;
}

.account-verification-modal {
    width: min(520px, 100%);
}

.account-verification-modal .modal-header p {
    margin: 5px 0 0;
    color: var(--muted);
}

.account-verification-modal>.stacked-form,
.account-verification-modal>.otp-secondary-actions {
    padding: 18px;
}

.account-verification-modal>.otp-secondary-actions {
    padding-top: 0;
}

.account-verification-modal .workflow-form-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

.current-username-block {
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-muted);
}

.current-username-block span,
.current-username-block strong {
    display: block;
    overflow-wrap: anywhere;
}

.current-username-block span {
    color: var(--muted);
    font-size: 12px;
}

.current-username-block strong {
    margin-top: 4px;
}

@media (max-width: 860px) {
    .account-status-band {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .account-status-band>div:nth-child(2) {
        border-right: 0;
    }

    .account-status-band>div:nth-child(-n + 2) {
        border-bottom: 1px solid var(--line);
    }
}

@media (max-width: 640px) {

    .registration-name-grid,
    .guidance-profile-security-grid,
    .account-status-band {
        grid-template-columns: 1fr;
    }

    .staff-registration-panel .login-copy,
    .staff-registration-panel .login-card {
        min-height: 0;
    }

    .account-status-band>div,
    .account-status-band>div:nth-child(2) {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .account-status-band>div:last-child {
        border-bottom: 0;
    }

    .staff-request-actions,
    .access-profile-actions,
    .student-account-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .staff-request-actions .button,
    .access-profile-actions .button,
    .student-account-actions .button,
    .guidance-profile-identity-actions .button,
    .guidance-profile-actions .button {
        width: 100%;
    }
}

/* Reports and communication workflow */
.communication-workflow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.communication-workflow-step {
    min-width: 0;
    min-height: 60px;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--ink);
    text-decoration: none;
    border-right: 1px solid var(--line);
}

.communication-workflow-step:last-child {
    border-right: 0;
}

.communication-workflow-step>span,
.report-flow li>span {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: grid;
    place-items: center;
    color: var(--primary-blue);
    background: var(--surface-muted);
    border: 1px solid var(--line);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 800;
}

.communication-workflow-step:hover {
    background: var(--primary-blue-soft);
}

.communication-workflow-step.current {
    color: var(--primary-blue-dark);
    box-shadow: none;
}

.communication-workflow-step.current>span,
.report-flow li.current>span {
    color: #ffffff;
    background: var(--primary-blue);
    border-color: var(--primary-blue);
}

.report-flow {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.report-flow li {
    min-width: 0;
    min-height: 54px;
    padding: 10px 13px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-right: 1px solid var(--line);
}

.report-flow li:last-child {
    border-right: 0;
}

.report-flow li.current {
    box-shadow: none;
}

.communication-filter-panel form {
    display: grid;
    gap: 16px;
}

.communication-filter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    align-items: end;
}

.communication-filter-grid .field {
    min-width: 0;
    margin-bottom: 0;
}

.communication-filter-grid .span-2 {
    grid-column: span 2;
}

.communication-status-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.sms-page .communication-status-strip {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.communication-status-strip>div {
    min-width: 0;
    padding: 15px 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-right: 1px solid var(--line);
}

.communication-status-strip>div:last-child {
    border-right: 0;
}

.communication-status-strip span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.communication-status-strip strong {
    color: var(--primary-blue-dark);
    font-size: 22px;
}

.report-result-header {
    align-items: center;
}

.report-result-header .button-row {
    margin: 0;
}

.report-result-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) minmax(420px, 1.1fr);
    gap: 28px;
    align-items: start;
}

.report-result-layout .report-bars {
    padding: 4px 0;
}

.report-result-table {
    min-width: 420px;
}

.report-result-table th:nth-child(2),
.report-result-table th:nth-child(3),
.report-result-table td:nth-child(2),
.report-result-table td:nth-child(3) {
    width: 100px;
    text-align: right;
}

.communication-table {
    min-width: 920px;
}

.notification-table th:nth-child(1) {
    width: 190px;
}

.notification-table th:nth-child(3),
.notification-table th:nth-child(4) {
    width: 130px;
}

.notification-table th:nth-child(5) {
    width: 170px;
}

.notification-message,
.sms-message {
    max-width: 520px;
    overflow-wrap: anywhere;
}

.sms-log-table th:nth-child(1) {
    width: 190px;
}

.sms-log-table th:nth-child(2) {
    width: 130px;
}

.sms-log-table th:nth-child(4),
.sms-log-table th:nth-child(5) {
    width: 160px;
}

.sms-log-table th:nth-child(6) {
    width: 100px;
}

.sms-log-table .row-actions form {
    margin: 0;
}

@media (max-width: 1050px) {
    .communication-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .report-result-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {

    .communication-workflow,
    .report-flow {
        grid-template-columns: 1fr;
    }

    .communication-workflow-step,
    .report-flow li {
        min-height: 48px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .communication-workflow-step:last-child,
    .report-flow li:last-child {
        border-bottom: 0;
    }

    .communication-filter-grid,
    .communication-filter-grid .span-2 {
        grid-template-columns: 1fr;
        grid-column: auto;
    }

    .communication-status-strip,
    .sms-page .communication-status-strip {
        grid-template-columns: 1fr;
    }

    .communication-status-strip>div,
    .communication-status-strip>div:nth-child(2n) {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .communication-status-strip>div:last-child {
        border-bottom: 0;
    }

    .report-result-header {
        align-items: stretch;
        flex-direction: column;
    }

    .report-result-header .button-row,
    .report-result-header .button {
        width: 100%;
    }
}

/* GUIDE spacing and color harmony refinement */
:root {
    --bg: #f1f4f7;
    --surface-muted: #f5f7fa;
    --primary-blue: #1d5f96;
    --primary-blue-dark: #123f6d;
    --primary-blue-soft: #edf4fa;
    --line: #d8e0e9;
    --shadow: 0 8px 22px rgba(18, 63, 109, 0.07);
    --sidebar-width: 252px;
}

h1,
h2,
h3,
h4,
.topbar-title,
.sidebar .brand-block strong,
.system-login-identity strong,
.dashboard-stat-card strong {
    font-family: "Aptos Display", "Segoe UI Variable Display", "Segoe UI", Arial, sans-serif;
    font-weight: 650;
}

/* Compact authentication composition */
.login-panel,
.system-login-panel,
.staff-registration-panel,
.otp-verification-panel {
    width: min(470px, 100%);
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
}

.staff-registration-panel {
    width: min(610px, 100%);
}

.login-copy,
.system-login-copy,
.system-login-panel .system-login-copy,
.staff-registration-panel .login-copy {
    min-height: 0;
    padding: 24px 28px;
    background: rgba(18, 63, 109, 0.96);
}

.system-login-brand {
    align-items: center;
    gap: 18px;
}

.system-login-logo,
.system-login-panel .system-login-logo {
    width: 76px;
    height: 76px;
    flex: 0 0 76px;
    border-width: 3px;
    box-shadow: 0 7px 18px rgba(3, 25, 48, 0.2);
}

.system-login-identity {
    gap: 3px;
}

.system-login-school {
    font-size: 12px;
    line-height: 1.35;
}

.system-login-identity strong,
.system-login-panel .system-login-identity strong {
    color: var(--school-yellow);
    font-size: 32px;
    line-height: 1.05;
}

.system-login-identity p,
.system-login-panel .system-login-identity p {
    margin: 2px 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 12px;
    line-height: 1.4;
}

.login-card,
.system-login-card,
.system-login-panel .system-login-card,
.staff-registration-panel .login-card {
    padding: 28px 30px 30px;
}

.system-login-heading {
    margin-bottom: 22px;
    padding-bottom: 14px;
}

.system-login-heading h1 {
    font-size: 26px;
}

.login-card .field {
    margin-bottom: 15px;
}

.staff-registration-panel .registration-name-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Tonal school-blue navigation */
.sidebar {
    padding-right: 14px;
    padding-left: 14px;
    background: #174c7e;
    box-shadow: 5px 0 18px rgba(13, 55, 101, 0.07);
}

.sidebar .brand-block {
    min-height: 132px;
    margin-right: -14px;
    margin-left: -14px;
    padding: 18px 16px 16px;
    background: #174c7e;
}

.sidebar .brand-block img {
    width: 68px !important;
    height: 68px !important;
    border-width: 2px;
    box-shadow: none;
}

.sidebar .brand-block strong {
    font-size: 18px;
}

.side-nav {
    gap: 3px;
}

.side-group {
    margin-top: 4px;
}

.side-group-toggle {
    min-height: 38px;
    padding: 8px 11px;
    color: #ffe47b;
}

.side-group-toggle:hover,
.side-group.has-active>.side-group-toggle {
    background: rgba(8, 42, 75, 0.22);
    color: #fff0ac;
}

.side-group-links {
    padding-left: 5px;
}

.side-link {
    min-height: 40px;
    padding: 9px 12px;
    color: rgba(255, 255, 255, 0.88);
}

.side-link:hover {
    background: rgba(255, 255, 255, 0.08);
}

.side-link.active {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(8, 42, 75, 0.34);
    color: #fff;
    box-shadow: none;
}

.side-link.active::before {
    top: 7px;
    bottom: 7px;
    left: -3px;
    width: 3px;
    background: var(--school-yellow);
    content: none;
}

.side-link-standalone {
    border-top-color: rgba(255, 255, 255, 0.14);
}

/* Consistent page and profile spacing */
.page-header {
    padding: 22px 24px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
    box-shadow: 0 5px 14px rgba(18, 63, 109, 0.035);
}

.page-header::after {
    bottom: -1px;
    left: 24px;
    width: 58px;
    height: 3px;
    content: none;
}

.page-header>div:first-child {
    min-width: 0;
}

.page-header h2 {
    margin: 2px 0 4px;
    font-size: clamp(23px, 2.4vw, 29px);
}

.page-header p {
    margin-top: 5px;
    margin-bottom: 0;
}

.student-profile-header {
    align-items: center;
    gap: 24px;
}

.student-profile-identity {
    flex: 1 1 420px;
    padding: 4px 0;
}

.student-profile-actions,
.button-row.compact.student-profile-actions {
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

.student-profile-actions .button {
    width: auto;
    min-width: 124px;
    min-height: 40px;
}

.student-status-grid,
.profile-count-grid,
.account-status-band,
.administration-status-strip,
.discipline-status-strip {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
}

.panel {
    box-shadow: 0 5px 16px rgba(18, 63, 109, 0.04);
}

.panel-header {
    margin-bottom: 20px;
}

.panel>.button-row:last-child,
.panel>form>.button-row:last-child,
.panel>.workflow-form-actions:last-child,
.panel>form>.workflow-form-actions:last-child {
    margin-bottom: 0;
}

.page-header-actions,
.row-actions,
.button-row.compact {
    align-items: center;
}

@media (max-width: 760px) {
    .staff-registration-panel {
        width: min(500px, 100%);
    }

    .staff-registration-panel .registration-name-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .system-login-identity p,
    .system-login-panel .system-login-identity p {
        display: block;
    }

    .student-profile-header {
        align-items: stretch;
        flex-direction: column;
    }

    .student-profile-identity {
        flex-basis: auto;
    }

    .student-profile-actions,
    .button-row.compact.student-profile-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .student-profile-actions .button {
        width: 100%;
    }
}

@media (max-width: 480px) {

    .login-copy,
    .system-login-copy,
    .system-login-panel .system-login-copy,
    .staff-registration-panel .login-copy {
        padding: 20px;
    }

    .system-login-logo,
    .system-login-panel .system-login-logo {
        width: 64px;
        height: 64px;
        flex-basis: 64px;
    }

    .system-login-identity strong,
    .system-login-panel .system-login-identity strong {
        font-size: 28px;
    }

    .system-login-identity p,
    .system-login-panel .system-login-identity p {
        display: none;
    }

    .login-card,
    .system-login-card,
    .system-login-panel .system-login-card,
    .staff-registration-panel .login-card {
        padding: 24px 20px;
    }

    .page-header {
        padding: 19px 18px;
    }

    .page-header::after {
        left: 18px;
        content: none;
    }
}

@media print {
    .communication-page .panel {
        border: 0;
        padding: 0;
    }

    .communication-page .page-header {
        margin-bottom: 20px;
    }

    .report-result-layout {
        grid-template-columns: 1fr;
    }

    .report-result-panel .table-wrap {
        overflow: visible;
    }

    .report-result-table {
        min-width: 0;
    }
}

/* System administration workflow */
.administration-workflow-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: stretch;
}

.administration-workflow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.administration-workflow-step {
    min-width: 0;
    min-height: 60px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    text-decoration: none;
    border-right: 1px solid var(--line);
}

.administration-workflow-step:last-child {
    border-right: 0;
}

.administration-workflow-step>span {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: grid;
    place-items: center;
    color: var(--primary-blue);
    background: var(--surface-muted);
    border: 1px solid var(--line);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 800;
}

.administration-workflow-step:hover {
    background: var(--primary-blue-soft);
}

.administration-workflow-step.current {
    color: var(--primary-blue-dark);
    box-shadow: none;
}

.administration-workflow-step.current>span {
    color: #ffffff;
    background: var(--primary-blue);
    border-color: var(--primary-blue);
}

.administration-help-shortcut {
    min-height: 60px;
}

.administration-help-shortcut.current {
    color: var(--primary-blue-dark);
    border-color: var(--school-yellow);
    box-shadow: none;
}

.administration-status-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.audit-status-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.administration-status-strip>div {
    min-width: 0;
    min-height: 62px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-right: 1px solid var(--line);
}

.administration-status-strip>div:last-child {
    border-right: 0;
}

.administration-status-strip span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.administration-status-strip strong {
    color: var(--primary-blue-dark);
    font-size: 20px;
    overflow-wrap: anywhere;
    text-align: right;
}

.administration-filter-panel form {
    display: grid;
    gap: 16px;
}

.administration-filter-grid,
.administration-form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    align-items: end;
}

.administration-filter-grid .field,
.administration-form-grid .field {
    min-width: 0;
    margin-bottom: 0;
}

.administration-filter-grid .span-2 {
    grid-column: span 2;
}

.staff-create-panel {
    padding: 0;
}

.staff-create-panel .workflow-disclosure>summary {
    padding: 16px 20px;
}

.staff-create-panel .workflow-disclosure-body {
    padding: 0 20px 20px;
    border-top: 1px solid var(--line);
}

.staff-role-field {
    min-height: 43px;
    padding: 10px 12px;
    background: var(--surface-muted);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.staff-role-field>span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.staff-role-field strong {
    display: block;
    margin-top: 4px;
}

.user-access-table,
.permission-matrix-table,
.audit-log-table,
.backup-history-table {
    min-width: 1040px;
}

.user-access-table .selected-row {
    background: var(--soft-yellow);
}

.user-access-table .badge+.badge {
    margin-top: 5px;
}

.access-profile-header {
    align-items: center;
}

.access-profile-header .inline-form {
    flex-wrap: nowrap;
}

.access-summary-grid,
.runtime-settings-list {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.access-summary-grid>div,
.runtime-settings-list>div {
    min-width: 0;
    padding: 14px 16px;
    border-right: 1px solid var(--line);
}

.access-summary-grid>div:last-child,
.runtime-settings-list>div:last-child {
    border-right: 0;
}

.access-summary-grid dt,
.runtime-settings-list dt {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.access-summary-grid dd,
.runtime-settings-list dd {
    margin: 5px 0 0;
    color: var(--primary-blue-dark);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.runtime-settings-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.runtime-settings-list .badge,
.runtime-settings-list .text-link {
    margin-top: 9px;
}

.permission-matrix-table th:nth-child(1) {
    width: 150px;
}

.permission-matrix-table th:nth-child(3),
.permission-matrix-table th:nth-child(4) {
    width: 130px;
}

.permission-matrix-table th:nth-child(5) {
    width: 170px;
}

.permission-slug {
    font-family: Consolas, "Courier New", monospace;
    font-size: 11px;
}

.compact-field {
    margin: 0;
}

.permission-save-row {
    margin-top: 18px;
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.permission-save-row .field {
    margin: 0;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.settings-section {
    padding: 18px 0;
    border-top: 1px solid var(--line);
}

.settings-section:first-of-type {
    padding-top: 0;
    border-top: 0;
}

.settings-section h3 {
    margin: 0 0 14px;
    font-size: 15px;
}

.administration-settings-form .button-row {
    margin-top: 4px;
}

.audit-log-table th:nth-child(1) {
    width: 170px;
}

.audit-log-table {
    table-layout: fixed;
}

.audit-log-table th:nth-child(2) {
    width: 180px;
}

.audit-log-table th:nth-child(3) {
    width: 280px;
}

.audit-log-table th:nth-child(4),
.audit-log-table th:nth-child(5) {
    width: 100px;
}

.audit-log-table th:nth-child(6) {
    width: 210px;
}

.audit-change-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    border: 0;
    color: var(--primary-blue);
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    text-align: left;
}

.audit-change-toggle::before {
    content: "";
    width: 0;
    height: 0;
    flex: 0 0 auto;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid currentColor;
    transition: transform 150ms ease;
}

.audit-change-toggle[aria-expanded="true"]::before {
    transform: rotate(90deg);
}

.audit-change-toggle:focus-visible {
    outline: 2px solid var(--primary-blue);
    outline-offset: 4px;
    border-radius: 2px;
}

.audit-log-summary-row.is-expanded>td {
    border-bottom-color: transparent;
    background: var(--primary-blue-soft);
}

.audit-log-detail-row>td {
    padding: 0 12px 14px;
    background: var(--primary-blue-soft);
}

.audit-change-panel {
    padding-left: 12px;
    border-left: 1px solid var(--line);
}

.audit-change-table-wrap {
    width: 100%;
    max-height: 320px;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.audit-change-table {
    width: 100%;
    min-width: 480px;
    border-collapse: collapse;
    table-layout: fixed;
}

.audit-change-table th,
.audit-change-table td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
    white-space: normal;
}

.audit-change-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    color: var(--primary-blue-dark);
    background: var(--primary-blue-soft);
    font-size: 11px;
    text-transform: uppercase;
}

.audit-change-table tbody th {
    width: 30%;
    color: var(--ink);
    background: var(--surface-muted);
    font-size: 12px;
}

.audit-change-table td {
    color: var(--ink);
    font-size: 12px;
}

.audit-change-table tr:last-child th,
.audit-change-table tr:last-child td {
    border-bottom: 0;
}

.audit-change-empty {
    width: min(420px, 100%);
    margin: 0;
    padding: 10px 12px;
    color: var(--muted);
    background: var(--surface-muted);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.backup-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.backup-action-grid .panel {
    height: 100%;
}

.backup-download-panel .button-row {
    margin: 0;
}

.danger-zone {
    border-color: #e5b9b4;
    box-shadow: none;
}

.danger-zone .panel-header span {
    color: var(--danger);
}

.backup-restore-form {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(180px, 260px) auto;
    gap: 14px;
    align-items: end;
}

.backup-restore-form .field {
    margin: 0;
}

.backup-history-table th:nth-child(1) {
    min-width: 250px;
}

.backup-history-table th:nth-child(5) {
    min-width: 280px;
}

.help-page,
.student-help-page {
    display: grid;
    gap: 18px;
}

.help-page>.panel,
.student-help-page>.panel {
    margin: 0;
}


.help-accordion {
    border-top: 1px solid var(--line);
}

.help-accordion>details {
    border-bottom: 1px solid var(--line);
}

.help-accordion>details>summary {
    padding: 15px 4px;
    color: var(--primary-blue-dark);
    cursor: pointer;
    font-weight: 800;
}

.help-accordion dl {
    margin: 0;
    padding: 0 4px 14px;
}

.help-accordion dl>div {
    display: grid;
    grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
    gap: 18px;
    padding: 12px 0;
    border-top: 1px solid var(--line);
}

.help-accordion dt {
    font-weight: 700;
    line-height: 1.4;
}

.help-accordion dd {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.help-guide-summary {
    margin: 0 0 8px;
    color: var(--ink);
}

.help-step-list {
    margin: 0;
    padding-left: 22px;
}

.help-step-list li {
    padding-left: 4px;
}

.help-step-list li+li {
    margin-top: 6px;
}

.help-step-list li::marker {
    color: var(--primary-blue);
    font-weight: 700;
}

.help-guide-note {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-left: 1px solid var(--line);
    background: var(--soft-yellow);
    color: var(--ink);
}

.student-help-page {
    width: min(100%, 1080px);
    margin: 0 auto;
}

.student-help-page>.page-header {
    align-items: center;
}

.student-help-faq-panel {
    padding: 22px 24px;
}

.student-help-faq-panel .panel-header {
    margin-bottom: 10px;
}

.student-help-contact-panel {
    display: grid;
    grid-template-columns: minmax(220px, 0.42fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    padding: 18px 22px;
}

.student-help-contact-panel .panel-header {
    margin: 0;
}

.student-help-contact-panel .panel-header h2,
.student-help-contact-panel p {
    margin: 0;
}

@media (max-width: 1120px) {
    .administration-workflow-row {
        grid-template-columns: 1fr;
    }

    .administration-help-shortcut {
        min-height: 44px;
    }

    .administration-filter-grid,
    .administration-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .backup-restore-form {
        grid-template-columns: 1fr 1fr;
    }

    .backup-restore-form .button {
        grid-column: span 2;
    }
}

@media (max-width: 760px) {
    .administration-workflow {
        grid-template-columns: 1fr;
    }

    .administration-workflow-step {
        min-height: 48px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .administration-workflow-step:last-child {
        border-bottom: 0;
    }

    .administration-status-strip,
    .audit-status-strip {
        grid-template-columns: 1fr;
    }

    .administration-status-strip>div {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .administration-status-strip>div:last-child {
        border-bottom: 0;
    }

    .administration-filter-grid,
    .administration-form-grid,
    .administration-filter-grid .span-2,
    .settings-grid,
    .backup-action-grid,
    .backup-restore-form,
    .access-summary-grid,
    .runtime-settings-list {
        grid-template-columns: 1fr;
        grid-column: auto;
    }

    .access-summary-grid>div,
    .runtime-settings-list>div {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .access-summary-grid>div:last-child,
    .runtime-settings-list>div:last-child {
        border-bottom: 0;
    }

    .access-profile-header,
    .access-profile-header .inline-form,
    .permission-save-row {
        align-items: stretch;
        flex-direction: column;
    }

    .access-profile-header .inline-form,
    .access-profile-header .button,
    .permission-save-row .button,
    .backup-restore-form .button {
        width: 100%;
    }

    .backup-restore-form .button {
        grid-column: auto;
    }

    .help-accordion dl>div {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .student-help-contact-panel {
        grid-template-columns: 1fr;
        gap: 8px;
    }

}

/* TextBee configuration within System Settings */
.settings-page .settings-status-card>.button {
    align-self: flex-start;
    margin-top: 4px;
}

.textbee-settings-panel {
    width: min(720px, 100%);
}

.textbee-settings-panel .modal-header small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
}

.textbee-settings-form {
    min-height: 0;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}

.textbee-settings-form .modal-body {
    display: grid;
    gap: 16px;
}

.textbee-requirements-notice {
    margin: 0;
}

.textbee-requirements-notice p {
    margin: 5px 0 0;
    line-height: 1.55;
}

.textbee-current-status {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.textbee-current-status>div {
    min-width: 0;
    padding: 12px 14px;
    border-right: 1px solid var(--line);
}

.textbee-current-status>div:last-child {
    border-right: 0;
}

.textbee-current-status span,
.textbee-current-status strong {
    display: block;
    overflow-wrap: anywhere;
}

.textbee-current-status span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.textbee-current-status strong {
    margin-top: 4px;
    font-size: 14px;
}

.textbee-enable-control {
    min-height: 58px;
    padding: 11px 13px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
}

.textbee-enable-control input {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    accent-color: var(--primary-blue);
}

.textbee-enable-control span,
.textbee-enable-control strong,
.textbee-enable-control small {
    display: block;
}

.textbee-enable-control small {
    margin-top: 2px;
    color: var(--muted);
}

.textbee-test-result:not(:empty) {
    padding: 11px 13px;
    border-left: 1px solid var(--line);
    background: var(--primary-blue-soft);
    line-height: 1.45;
}

.textbee-test-result.is-warning {
    border-left-color: var(--line);
    background: var(--soft-yellow);
}

.textbee-test-result.is-error {
    border-left-color: var(--line);
    background: #fff2f2;
    color: var(--danger);
}

.textbee-settings-actions {
    flex: 0 0 auto;
    padding: 14px 18px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid var(--line);
    background: var(--surface);
}

@media (max-width: 680px) {
    .textbee-current-status {
        grid-template-columns: 1fr;
    }

    .textbee-current-status>div {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .textbee-current-status>div:last-child {
        border-bottom: 0;
    }

    .textbee-settings-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .textbee-settings-actions .button {
        width: 100%;
    }
}

@media print {

    .administration-page .administration-filter-panel,
    .administration-page .staff-create-panel,
    .administration-page .permission-save-row,
    .administration-page .backup-action-grid,
    .administration-page .backup-restore-panel {
        display: none !important;
    }

    .administration-page .panel {
        box-shadow: none;
    }
}

/* Excel Import UI refinement - scoped to the Student Records import page. */
.excel-import-page {
    display: grid;
    gap: 18px;
}

.excel-import-page .import-page-header {
    align-items: center;
}

.excel-import-page .import-page-header h2 {
    margin-bottom: 5px;
}

.excel-import-page .import-page-header p {
    margin: 0;
}

.excel-import-page .import-flow {
    border-radius: 10px;
    box-shadow: none;
}

.excel-import-page .import-flow-step {
    min-height: 58px;
    padding: 11px 15px;
    gap: 10px;
    background: #fff;
}

.excel-import-page .import-flow-step>span {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    font-size: 12px;
}

.excel-import-page .import-flow-step strong {
    font-size: 14px;
}

.excel-import-page .import-flow-step small {
    font-size: 12px;
}

.excel-import-page .import-flow-step.current {
    background: var(--primary-blue-soft);
    box-shadow: none;
}

.excel-import-page .import-flow-step.complete {
    background: #fbfdff;
}

.excel-import-page .import-upload-panel,
.excel-import-page .import-preview-panel,
.excel-import-page .import-history-panel {
    border-radius: 12px;
}

.excel-import-page .import-panel-header {
    align-items: flex-start;
    margin-bottom: 20px;
}

.excel-import-page .import-panel-header h2 {
    margin: 0;
    font-size: 21px;
}

.excel-import-page .import-panel-header p {
    max-width: 720px;
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
}

.excel-import-page .import-template-button {
    flex: 0 0 auto;
}

.excel-import-page .import-upload-form {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(260px, 0.75fr);
    gap: 18px;
    align-items: stretch;
}

.excel-import-page .import-upload-form .field {
    margin-bottom: 0;
}

.excel-import-page .import-file-field {
    min-width: 0;
}

.excel-import-page .import-file-control {
    min-height: 138px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    border: 1px dashed #aebdd0;
    border-radius: 10px;
    background: #f8fbff;
}

.excel-import-page .import-file-copy {
    display: grid;
    gap: 4px;
}

.excel-import-page .import-file-copy strong {
    color: var(--ink);
    font-size: 15px;
}

.excel-import-page .import-file-copy small {
    color: var(--muted);
    font-size: 12px;
}

.excel-import-page .import-file-control input[type="file"] {
    padding: 9px;
    background: #fff;
}

.excel-import-page .import-upload-actions {
    min-width: 0;
    padding: 18px;
    display: grid;
    align-content: center;
    gap: 4px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
}

.excel-import-page .import-upload-actions .field {
    margin-bottom: 10px;
}

.excel-import-page .import-validate-button {
    width: 100%;
}

.excel-import-page .import-format-help {
    margin-top: 18px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface-muted);
}

.excel-import-page .import-format-help div,
.excel-import-page .import-format-help strong,
.excel-import-page .import-format-help span {
    min-width: 0;
    display: block;
}

.excel-import-page .import-format-help strong {
    font-size: 13px;
}

.excel-import-page .import-format-help span {
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
}

.excel-import-page .import-format-help .text-link {
    flex: 0 0 auto;
    font-size: 13px;
}

.excel-import-page .import-column-guide {
    margin-top: 14px;
    padding-top: 14px;
}

.excel-import-page .import-column-guide>summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.excel-import-page .import-column-guide>summary span,
.excel-import-page .import-column-guide>summary small {
    display: block;
}

.excel-import-page .import-column-guide>summary small {
    color: var(--muted);
    font-weight: 500;
}

.excel-import-page .import-column-groups {
    padding-top: 12px;
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 12px;
}

.excel-import-page .import-column-groups>div {
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
}

.excel-import-page .import-column-groups strong {
    color: var(--ink);
    font-size: 13px;
}

.excel-import-page .import-column-groups p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.excel-import-page .import-preview-header {
    align-items: center;
}

.excel-import-page .import-preview-header>div>span {
    display: block;
    margin-bottom: 4px;
    color: var(--primary-blue);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.excel-import-page .import-preview-summary {
    margin-bottom: 18px;
    border-radius: 10px;
    background: #fbfcfe;
}

.excel-import-page .import-preview-summary>div {
    padding: 14px 16px;
}

.excel-import-page .import-preview-summary strong {
    font-size: 20px;
}

.excel-import-page .import-summary-valid strong {
    color: var(--primary-blue-dark);
}

.excel-import-page .import-summary-invalid strong {
    color: var(--danger);
}

.excel-import-page .import-table-heading {
    margin-bottom: 10px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.excel-import-page .import-table-heading div,
.excel-import-page .import-table-heading strong,
.excel-import-page .import-table-heading span {
    display: block;
}

.excel-import-page .import-table-heading>div>strong {
    font-size: 15px;
}

.excel-import-page .import-table-heading>div>span,
.excel-import-page .import-table-heading>span {
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
}

.excel-import-page .import-preview-table-wrap {
    border: 1px solid var(--line);
    border-radius: 10px;
}

.excel-import-page .import-preview-table th {
    background: var(--surface-muted);
    white-space: nowrap;
}

.excel-import-page .import-preview-table tbody tr:last-child td {
    border-bottom: 0;
}

.excel-import-page .import-row-invalid td {
    background: #fffafa;
}

.excel-import-page .import-validation-message {
    min-width: 220px;
    max-width: 360px;
    line-height: 1.45;
}

.excel-import-page .import-row-invalid .import-validation-message {
    color: var(--danger);
    font-weight: 600;
}

.excel-import-page .import-history-panel {
    padding: 0;
    overflow: hidden;
}

.excel-import-page .import-history-panel>summary {
    min-height: 72px;
    padding: 18px 20px;
}

.excel-import-page .import-history-panel>summary h2 {
    font-size: 18px;
}

.excel-import-page .import-history-body {
    margin-top: 0;
}

.excel-import-page .import-history-body .data-table th:first-child,
.excel-import-page .import-history-body .data-table td:first-child {
    padding-left: 20px;
}

.excel-import-page .import-history-body .data-table th:last-child,
.excel-import-page .import-history-body .data-table td:last-child {
    padding-right: 20px;
}

@media (max-width: 900px) {
    .excel-import-page .import-upload-form {
        grid-template-columns: 1fr;
    }

    .excel-import-page .import-upload-actions {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
    }

    .excel-import-page .import-upload-actions .field {
        margin-bottom: 0;
    }

    .excel-import-page .import-validate-button {
        width: auto;
        min-width: 150px;
    }
}

@media (max-width: 620px) {

    .excel-import-page .import-page-header,
    .excel-import-page .import-panel-header,
    .excel-import-page .import-format-help,
    .excel-import-page .import-table-heading,
    .excel-import-page .import-column-guide>summary {
        align-items: stretch;
    }

    .excel-import-page .import-panel-header,
    .excel-import-page .import-format-help,
    .excel-import-page .import-table-heading,
    .excel-import-page .import-column-guide>summary {
        display: grid;
        grid-template-columns: 1fr;
    }

    .excel-import-page .import-template-button,
    .excel-import-page .import-format-help .text-link,
    .excel-import-page .import-preview-header form,
    .excel-import-page .import-preview-header .button {
        width: 100%;
    }

    .excel-import-page .import-upload-actions,
    .excel-import-page .import-column-groups {
        grid-template-columns: 1fr;
    }

    .excel-import-page .import-upload-actions .field {
        margin-bottom: 10px;
    }

    .excel-import-page .import-validate-button {
        width: 100%;
        min-width: 0;
    }

    .excel-import-page .import-file-control {
        min-height: 124px;
        padding: 14px;
    }
}

/* Excel Import labeling and click-affordance refinement. */
.excel-import-page .alert .button.small {
    margin-left: 10px;
    vertical-align: middle;
}

.excel-import-page .import-format-button {
    flex: 0 0 auto;
    text-decoration: none;
}

.excel-import-page .import-column-guide>summary.import-toggle-button {
    width: fit-content;
    min-height: 38px;
    padding: 8px 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--primary-blue-dark);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.18s ease, border-color 0.18s ease;
}

.excel-import-page .import-column-guide>summary.import-toggle-button::-webkit-details-marker {
    display: none;
}

.excel-import-page .import-column-guide>summary.import-toggle-button::after {
    content: "+";
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
}

.excel-import-page .import-column-guide[open]>summary.import-toggle-button::after {
    content: "−";
}

.excel-import-page .import-column-guide>summary.import-toggle-button:hover,
.excel-import-page .import-column-guide>summary.import-toggle-button:focus-visible {
    background: var(--primary-blue-soft);
    border-color: var(--primary-blue);
    outline: none;
}

.excel-import-page .import-preview-header>div>h2 {
    margin-top: 0;
}

.excel-import-page .import-history-panel>summary {
    cursor: pointer;
    background: #fff;
    transition: background-color 0.18s ease;
}

.excel-import-page .import-history-panel>summary::-webkit-details-marker {
    display: none;
}

.excel-import-page .import-history-panel>summary::after {
    content: "+";
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--primary-blue-dark);
    background: var(--surface-muted);
    font-size: 17px;
    font-weight: 700;
}

.excel-import-page .import-history-panel[open]>summary::after {
    content: "−";
}

.excel-import-page .import-history-panel>summary:hover,
.excel-import-page .import-history-panel>summary:focus-visible {
    background: var(--primary-blue-soft);
    outline: none;
}

@media (max-width: 620px) {
    .excel-import-page .alert .button.small {
        margin: 8px 0 0;
    }

    .excel-import-page .import-column-guide>summary.import-toggle-button,
    .excel-import-page .import-format-button {
        width: 100%;
    }
}

/* School Years: focused lifecycle overview and preparation layout */
.school-year-redesign {
    display: grid;
    gap: 22px;
}

.school-year-redesign .school-year-page-header {
    margin-bottom: 0;
}

.school-year-redesign .school-year-header-actions {
    align-items: center;
}

.school-year-overview {
    display: grid;
    gap: 18px;
}

.school-year-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 620px);
    justify-content: center;
    gap: 18px;
}

.school-year-state-card,
.school-year-history-card,
.school-year-readiness-card,
.school-year-grade-summary {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.school-year-state-card {
    min-width: 0;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.school-year-state-active {
    box-shadow: 0 10px 28px rgba(21, 84, 168, 0.08);
}

.school-year-state-upcoming {
    box-shadow: 0 10px 28px rgba(21, 84, 168, 0.06);
}

.school-year-state-heading,
.school-year-history-heading,
.school-year-readiness-title,
.school-year-card-actions,
.school-year-upcoming-item,
.school-year-history-row,
.school-year-history-meta,
.school-year-history-actions,
.school-year-upcoming-actions,
.school-year-activation-actions {
    display: flex;
    align-items: center;
}

.school-year-state-heading,
.school-year-history-heading,
.school-year-activation-actions {
    justify-content: space-between;
    gap: 16px;
}

.school-year-state-heading h3,
.school-year-history-heading h3,
.school-year-readiness-title h3 {
    margin: 4px 0 0;
    font-size: 22px;
    line-height: 1.2;
}

.school-year-state-label {
    display: block;
    color: var(--primary-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.school-year-date-range {
    margin: -6px 0 0;
    color: var(--muted);
    font-size: 14px;
}

.school-year-date-range>span {
    margin: 0 6px;
}

.school-year-card-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-muted);
}

.school-year-card-metrics>div {
    min-width: 0;
    padding: 16px 18px;
}

.school-year-card-metrics>div+div {
    border-left: 1px solid var(--line);
}

.school-year-card-metrics strong,
.school-year-card-metrics span {
    display: block;
}

.school-year-card-metrics strong {
    color: var(--primary-blue-dark);
    font-size: 24px;
    line-height: 1.1;
}

.school-year-card-metrics span {
    margin-top: 5px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.school-year-card-status-line {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 13px;
}

.school-year-live-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 50%;
    background: var(--primary-blue);
}

.school-year-card-actions {
    margin-top: auto;
    justify-content: flex-start;
    gap: 9px;
    flex-wrap: wrap;
    padding-top: 4px;
}

.school-year-danger-button {
    color: var(--danger);
    border-color: rgba(180, 35, 24, 0.28);
}

.school-year-danger-button:hover,
.school-year-danger-button:focus-visible {
    border-color: var(--danger);
    background: rgba(180, 35, 24, 0.06);
}

.school-year-upcoming-list {
    display: grid;
    gap: 10px;
}

.school-year-upcoming-item {
    min-width: 0;
    justify-content: space-between;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
}

.school-year-upcoming-item.selected {
    border-color: rgba(21, 84, 168, 0.4);
    background: var(--primary-blue-soft);
}

.school-year-upcoming-copy {
    min-width: 0;
}

.school-year-upcoming-copy strong,
.school-year-upcoming-copy span,
.school-year-history-row>div:first-child strong,
.school-year-history-row>div:first-child span {
    display: block;
}

.school-year-upcoming-copy strong {
    font-size: 16px;
}

.school-year-upcoming-copy span,
.school-year-history-row>div:first-child span {
    margin-top: 3px;
    color: var(--muted);
    font-size: 13px;
}

.school-year-upcoming-actions,
.school-year-history-actions,
.school-year-history-meta {
    gap: 8px;
    flex-wrap: wrap;
}

.school-year-card-empty {
    min-height: 132px;
    display: grid;
    place-items: center;
    padding: 22px;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    background: var(--surface-muted);
    text-align: center;
    color: var(--muted);
}

.school-year-card-empty.compact {
    min-height: 86px;
}

.school-year-card-empty p {
    margin: 0;
}

.school-year-history-card {
    padding: 20px 22px;
}

.school-year-history-heading {
    padding-bottom: 16px;
}

.school-year-history-list {
    display: grid;
    border-top: 1px solid var(--line);
}

.school-year-history-row {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(220px, auto) auto;
    gap: 18px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}

.school-year-history-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.school-year-history-meta {
    justify-content: flex-end;
    color: var(--muted);
    font-size: 13px;
}

.school-year-history-actions {
    justify-content: flex-end;
}

.school-year-registration {
    overflow: visible;
}

.school-year-registration>.panel-header {
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}

.school-year-registration .school-year-candidate-filter {
    margin-top: 18px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-muted);
}

.school-year-registration .student-filter-options {
    margin-top: 4px;
}

.school-year-registration .school-year-target-controls {
    margin-top: 18px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
}

.school-year-registration .school-year-target-controls+.muted {
    margin: 10px 2px 16px;
    font-size: 13px;
}

.school-year-registration .table-wrap {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow-x: auto;
}

.school-year-review-panel {
    overflow: hidden;
}

.school-year-review-header {
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}

.school-year-readiness-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(220px, 0.7fr);
    gap: 16px;
    margin: 18px 0;
}

.school-year-readiness-card {
    padding: 18px;
}

.school-year-readiness-title {
    justify-content: space-between;
    margin-bottom: 12px;
}

.school-year-readiness-list {
    display: grid;
    border-top: 1px solid var(--line);
}

.school-year-readiness-item {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}

.school-year-readiness-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.school-year-readiness-item strong,
.school-year-readiness-item span:not(.badge) {
    display: block;
}

.school-year-readiness-item span:not(.badge) {
    margin-top: 3px;
    color: var(--muted);
    font-size: 13px;
}

.school-year-grade-summary {
    display: grid;
    overflow: hidden;
}

.school-year-grade-summary>div {
    display: grid;
    align-content: center;
    min-height: 118px;
    padding: 18px;
}

.school-year-grade-summary>div+div {
    border-top: 1px solid var(--line);
}

.school-year-grade-summary span,
.school-year-grade-summary strong,
.school-year-grade-summary small {
    display: block;
}

.school-year-grade-summary span {
    color: var(--primary-blue);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.school-year-grade-summary strong {
    margin-top: 5px;
    font-size: 28px;
    line-height: 1;
}

.school-year-grade-summary small {
    margin-top: 7px;
    color: var(--muted);
}

.school-year-activation-actions {
    margin-top: 16px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.school-year-activation-actions>.muted {
    max-width: 620px;
    font-size: 13px;
}

@media (max-width: 1040px) {

    .school-year-overview-grid,
    .school-year-readiness-layout {
        grid-template-columns: 1fr;
    }

    .school-year-history-row {
        grid-template-columns: minmax(180px, 1fr) auto;
    }

    .school-year-history-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .school-year-grade-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .school-year-grade-summary>div+div {
        border-top: 0;
        border-left: 1px solid var(--line);
    }
}

@media (max-width: 760px) {

    .school-year-redesign .school-year-header-actions,
    .school-year-state-heading,
    .school-year-history-heading,
    .school-year-upcoming-item,
    .school-year-activation-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .school-year-redesign .school-year-header-actions .button,
    .school-year-redesign .school-year-header-actions details,
    .school-year-redesign .school-year-header-actions summary,
    .school-year-upcoming-actions .button,
    .school-year-history-heading .button,
    .school-year-activation-actions .button {
        width: 100%;
    }

    .school-year-state-card,
    .school-year-history-card {
        padding: 18px;
    }

    .school-year-state-heading .badge {
        align-self: flex-start;
    }

    .school-year-card-metrics,
    .school-year-grade-summary {
        grid-template-columns: 1fr;
    }

    .school-year-card-metrics>div+div,
    .school-year-grade-summary>div+div {
        border-left: 0;
        border-top: 1px solid var(--line);
    }

    .school-year-upcoming-actions,
    .school-year-history-actions,
    .school-year-card-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .school-year-upcoming-actions form,
    .school-year-history-actions form,
    .school-year-card-actions form,
    .school-year-card-actions .button,
    .school-year-history-actions .button {
        width: 100%;
    }

    .school-year-history-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .school-year-history-meta,
    .school-year-history-actions {
        justify-content: flex-start;
    }

    .school-year-readiness-item {
        align-items: flex-start;
    }
}

/* Academic Setup layout refresh */
.academic-setup-page {
    display: grid;
    gap: 18px;
}

.academic-page-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.academic-page-heading h2,
.academic-shared-heading h2 {
    margin: 0;
}

.academic-page-heading p,
.academic-shared-heading p {
    margin: 6px 0 0;
    color: var(--muted);
}

.academic-year-selector {
    padding: 16px 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.academic-year-selector form {
    max-width: 360px;
}

.academic-year-selector .field {
    margin: 0;
}

.academic-setup-page .academic-status-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.academic-setup-page .academic-status-strip>div {
    padding: 17px 20px;
}

.academic-section-panel>.panel-header,
.academic-catalog-grid>.panel>.panel-header {
    align-items: center;
}

.academic-section-panel>.panel-header h2,
.academic-catalog-grid>.panel>.panel-header h2 {
    margin: 0;
}

.academic-shared-heading {
    padding-top: 2px;
}

.academic-catalog-grid {
    align-items: start;
}

.academic-record>summary {
    cursor: default;
}

.academic-edit-trigger {
    min-width: 58px;
    justify-content: center;
    pointer-events: auto;
}

.academic-record[open] .academic-edit-trigger {
    background: var(--surface-muted);
}

.academic-record-editor {
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
}

.academic-year-warning .button {
    flex: 0 0 auto;
}

@media (max-width: 1040px) {
    .academic-setup-page .academic-status-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .academic-setup-page .academic-status-strip>div:nth-child(2) {
        border-right: 1px solid var(--line);
    }

    .academic-setup-page .academic-status-strip>div:nth-child(n + 3) {
        border-top: 0;
    }
}

@media (max-width: 760px) {

    .academic-page-heading,
    .academic-year-warning {
        align-items: stretch;
        flex-direction: column;
    }

    .academic-page-heading .button,
    .academic-year-warning .button {
        width: 100%;
    }

    .academic-year-selector form {
        max-width: none;
    }

    .academic-setup-page .academic-status-strip {
        grid-template-columns: 1fr;
    }

    .academic-setup-page .academic-status-strip>div,
    .academic-setup-page .academic-status-strip>div:nth-child(2) {
        border-right: 0;
    }

    .academic-setup-page .academic-status-strip>div+div,
    .academic-setup-page .academic-status-strip>div:nth-child(n + 3) {
        border-top: 1px solid var(--line);
    }
}


/* Academic Setup - Add Track modal proportions */
.academic-track-add {
    display: grid;
    gap: 16px;
}

.academic-track-add-intro {
    margin: 0;
}

.academic-track-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.academic-track-choice {
    min-height: 142px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-muted);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
}

.academic-track-choice-copy {
    min-height: 24px;
    display: flex;
    align-items: center;
}

.academic-track-choice form {
    width: 100%;
}

.academic-track-choice-action,
.academic-track-choice-status {
    width: 100%;
    min-height: 40px;
}

.academic-track-choice-action {
    justify-content: center;
}

.academic-track-choice-status {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 620px) {
    .academic-track-choice-grid {
        grid-template-columns: 1fr;
    }

    .academic-track-choice {
        min-height: 126px;
    }
}

/* Academic Setup - Add Grade Level modal proportions */
.academic-grade-add {
    display: grid;
    gap: 16px;
}

.academic-grade-add-intro {
    margin: 0;
}

.academic-grade-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.academic-grade-choice {
    min-height: 142px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-muted);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
}

.academic-grade-choice-copy {
    min-height: 24px;
    display: flex;
    align-items: center;
}

.academic-grade-choice form {
    width: 100%;
}

.academic-grade-choice-action,
.academic-grade-choice-status {
    width: 100%;
    min-height: 40px;
}

.academic-grade-choice-action {
    justify-content: center;
}

.academic-grade-choice-status {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 620px) {
    .academic-grade-choice-grid {
        grid-template-columns: 1fr;
    }

    .academic-grade-choice {
        min-height: 126px;
    }
}


/* List of Misbehavior - generated discipline report */
.misbehavior-report-page {
    display: grid;
    gap: 18px;
}

.misbehavior-page-header {
    align-items: center;
}

.misbehavior-page-header h2 {
    margin-bottom: 5px;
}

.misbehavior-page-header p {
    margin: 0;
}

.misbehavior-filter-panel {
    padding: 18px;
}

.misbehavior-search-row {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) auto auto;
    gap: 10px;
    align-items: end;
}

.misbehavior-filter-options {
    margin-top: 12px;
}

.misbehavior-filter-options>summary {
    width: fit-content;
    list-style: none;
    cursor: pointer;
}

.misbehavior-filter-options>summary::-webkit-details-marker {
    display: none;
}

.misbehavior-filter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.misbehavior-filter-actions {
    justify-content: flex-end;
    margin-top: 14px;
}

.misbehavior-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.misbehavior-summary-card {
    min-width: 0;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.misbehavior-summary-card span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.misbehavior-summary-card strong {
    color: var(--ink);
    font-size: 24px;
    line-height: 1;
}

.misbehavior-summary-card.minor {
    border-top: 1px solid var(--line);
}

.misbehavior-summary-card.major {
    border-top: 1px solid var(--line);
}

.misbehavior-summary-card.grave {
    border-top: 1px solid var(--line);
}

.misbehavior-result-panel {
    padding: 0;
    overflow: hidden;
}

.misbehavior-result-header {
    min-height: 64px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--line);
}

.misbehavior-result-header>div {
    display: grid;
    gap: 3px;
}

.misbehavior-result-header span {
    color: var(--muted);
    font-size: 12px;
}

.misbehavior-table-wrap {
    overflow: auto;
    max-width: 100%;
}

.misbehavior-table {
    min-width: 1180px;
    table-layout: fixed;
}

.misbehavior-table th,
.misbehavior-table td {
    vertical-align: top;
}

.misbehavior-table th:nth-child(1),
.misbehavior-table td:nth-child(1) {
    width: 54px;
    text-align: center;
}

.misbehavior-table th:nth-child(2),
.misbehavior-table td:nth-child(2) {
    width: 190px;
}

.misbehavior-table th:nth-child(3),
.misbehavior-table td:nth-child(3) {
    width: 150px;
}

.misbehavior-table th:nth-child(4),
.misbehavior-table td:nth-child(4) {
    width: 130px;
}

.misbehavior-table th:nth-child(5),
.misbehavior-table td:nth-child(5) {
    width: 105px;
}

.misbehavior-table th:nth-child(6),
.misbehavior-table td:nth-child(6) {
    width: 180px;
}

.misbehavior-table th:nth-child(7),
.misbehavior-table td:nth-child(7) {
    width: 110px;
}

.misbehavior-table th:nth-child(8),
.misbehavior-table td:nth-child(8) {
    width: 220px;
}

.misbehavior-table th:nth-child(9),
.misbehavior-table td:nth-child(9) {
    width: 190px;
}

.misbehavior-student-cell strong,
.misbehavior-student-cell span {
    display: block;
}

.misbehavior-student-cell span {
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
}

.misbehavior-classification {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

.misbehavior-classification.minor {
    background: #fff3dd;
    color: #865f1d;
}

.misbehavior-classification.major {
    background: #e8f5ec;
    color: #2e6d43;
}

.misbehavior-classification.grave {
    background: #fbe8ea;
    color: #8e3940;
}

.print-preview-page {
    min-height: 100vh;
    background: #eef1f5;
}

.misbehavior-print-preview {
    width: min(1500px, calc(100% - 32px));
    margin: 0 auto;
    padding: 24px 0 40px;
}

.misbehavior-print-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 14px;
}

.misbehavior-print-paper {
    background: #ffffff;
    border: 1px solid #d8dde5;
    box-shadow: 0 12px 32px rgba(21, 35, 52, 0.10);
    padding: 28px;
}

.misbehavior-print-heading {
    text-align: center;
    display: grid;
    justify-items: center;
    gap: 4px;
    margin-bottom: 16px;
}

.misbehavior-print-heading>strong {
    font-size: 18px;
    letter-spacing: 0.02em;
}

.misbehavior-print-heading>span {
    font-size: 13px;
    font-weight: 700;
}

.misbehavior-print-heading h1 {
    margin: 8px 0 2px;
    font-size: 20px;
    letter-spacing: 0.05em;
}

.misbehavior-print-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
    color: #4f5c6b;
    font-size: 12px;
}

.misbehavior-print-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin: 0 0 12px;
    padding: 9px 12px;
    border: 1px solid #cfd5dd;
    font-size: 11px;
}

.misbehavior-print-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 9.5px;
}

.misbehavior-print-table th,
.misbehavior-print-table td {
    padding: 6px 5px;
    border: 1px solid #50565f;
    vertical-align: top;
    text-align: left;
    overflow-wrap: anywhere;
}

.misbehavior-print-table th {
    background: #f1f3f5;
    text-align: center;
    font-weight: 800;
}

.misbehavior-print-table th:nth-child(1) {
    width: 4%;
}

.misbehavior-print-table th:nth-child(2) {
    width: 16%;
}

.misbehavior-print-table th:nth-child(3) {
    width: 12%;
}

.misbehavior-print-table th:nth-child(4) {
    width: 10%;
}

.misbehavior-print-table th:nth-child(5) {
    width: 9%;
}

.misbehavior-print-table th:nth-child(6) {
    width: 15%;
}

.misbehavior-print-table th:nth-child(7) {
    width: 9%;
}

.misbehavior-print-table th:nth-child(8) {
    width: 15%;
}

.misbehavior-print-table th:nth-child(9) {
    width: 10%;
}

.misbehavior-print-footer {
    margin-top: 12px;
    color: #596473;
    font-size: 10px;
    text-align: right;
}

@media (max-width: 1040px) {
    .misbehavior-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .misbehavior-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {

    .misbehavior-search-row,
    .misbehavior-filter-grid,
    .misbehavior-summary-grid {
        grid-template-columns: 1fr;
    }

    .misbehavior-search-row .button,
    .misbehavior-filter-actions,
    .misbehavior-filter-actions .button,
    .misbehavior-result-header .button,
    .misbehavior-page-header .page-header-actions,
    .misbehavior-page-header .page-header-actions .button {
        width: 100%;
    }

    .misbehavior-result-header {
        align-items: stretch;
        flex-direction: column;
    }

    .misbehavior-print-preview {
        width: 100%;
        padding: 0;
    }

    .misbehavior-print-paper {
        border: 0;
        box-shadow: none;
        padding: 16px;
    }
}

@media print {
    .print-preview-page {
        background: #ffffff;
    }

    .misbehavior-print-preview {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .misbehavior-print-paper {
        border: 0;
        box-shadow: none;
        padding: 0;
    }

    .misbehavior-print-table {
        font-size: 8.5pt;
    }

    .misbehavior-print-table thead {
        display: table-header-group;
    }

    .misbehavior-print-table tr {
        break-inside: avoid;
    }
}

/* Official Guidance Office List of Misbehavior print layout. */
.misbehavior-record-sheet-paper {
    width: 100%;
    margin: 0;
    padding: 18px;
}

.misbehavior-record-sheet-shell {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #8d99a8;
    background: #fff;
}

.misbehavior-record-sheet {
    width: 100%;
    min-width: 1420px;
    border-collapse: collapse;
    table-layout: fixed;
    color: #111;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 8.5px;
}

.misbehavior-record-sheet th,
.misbehavior-record-sheet td {
    border: 1px solid #7f7f7f;
    padding: 5px 4px;
    vertical-align: middle;
    overflow-wrap: anywhere;
}

.misbehavior-record-sheet th {
    text-align: center;
    font-weight: 700;
    line-height: 1.25;
}

.misbehavior-record-sheet .sheet-title {
    padding: 8px 6px;
    background: #fff;
    font-size: 12px;
    line-height: 1.25;
}

.misbehavior-record-sheet .sheet-group {
    height: 74px;
    padding: 6px;
    white-space: normal;
    vertical-align: middle;
    font-size: 7.5px;
    line-height: 1.25;
}

.misbehavior-record-sheet .sheet-group.minor,
.misbehavior-record-sheet th.minor,
.misbehavior-record-sheet .minor-cell {
    background: #fbe5d6;
}

.misbehavior-record-sheet .sheet-group.major,
.misbehavior-record-sheet th.major,
.misbehavior-record-sheet .major-cell {
    background: #e2f0d9;
}

.misbehavior-record-sheet .sheet-group.grave,
.misbehavior-record-sheet th.grave,
.misbehavior-record-sheet .grave-cell {
    background: #f4b7bb;
}

.misbehavior-record-sheet .sheet-group.remarks {
    background: #d8d8d8;
}

.misbehavior-record-sheet .sheet-group.victim {
    background: #fff;
}

.misbehavior-record-sheet .sheet-column-headings th {
    height: 46px;
    background: #d9d9d9;
}

.misbehavior-record-sheet .sheet-column-headings th:nth-child(n + 12) {
    background: #fff;
}

.misbehavior-record-sheet tbody td {
    min-height: 38px;
    height: auto;
    background: #fff;
}

.misbehavior-record-sheet tbody .minor-cell {
    background: #fff;
}

.misbehavior-record-sheet tbody .major-cell {
    background: #fff;
}

.misbehavior-record-sheet tbody .grave-cell {
    background: #fff;
}

.misbehavior-record-sheet .col-no {
    width: 2%;
}

.misbehavior-record-sheet .col-name {
    width: 11.4%;
}

.misbehavior-record-sheet .col-gender {
    width: 3.6%;
}

.misbehavior-record-sheet .col-date {
    width: 4.6%;
}

.misbehavior-record-sheet .col-referred {
    width: 7.3%;
}

.misbehavior-record-sheet .col-grade-section {
    width: 4.4%;
}

.misbehavior-record-sheet .col-minor {
    width: 9%;
}

.misbehavior-record-sheet .col-major {
    width: 9%;
}

.misbehavior-record-sheet .col-grave {
    width: 8.2%;
}

.misbehavior-record-sheet .col-sanction {
    width: 9%;
}

.misbehavior-record-sheet .col-guidance {
    width: 10.1%;
}

.misbehavior-record-sheet .col-victim-name {
    width: 9%;
}

.misbehavior-record-sheet .col-victim-section {
    width: 7.3%;
}

.misbehavior-record-sheet .col-victim-gender {
    width: 5.1%;
}

.misbehavior-record-sheet .sheet-no,
.misbehavior-record-sheet .sheet-gender,
.misbehavior-record-sheet .sheet-date,
.misbehavior-record-sheet .sheet-victim-gender {
    text-align: center;
}

.misbehavior-record-sheet .sheet-date {
    white-space: nowrap;
}

@media print {
    .misbehavior-record-sheet-paper {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .misbehavior-record-sheet-shell {
        overflow: visible;
        border: 0;
    }

    .misbehavior-record-sheet {
        width: 100%;
        min-width: 0;
        font-size: 6.2pt;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .misbehavior-record-sheet .sheet-group {
        height: 60px;
        font-size: 5.5pt;
    }

    .misbehavior-record-sheet th,
    .misbehavior-record-sheet td {
        padding: 3px 2px;
    }

    .misbehavior-record-sheet .sheet-title {
        font-size: 8pt;
    }

    .misbehavior-record-sheet .sheet-column-headings th {
        height: 34px;
    }

    .misbehavior-record-sheet tbody td {
        height: auto;
        min-height: 32px;
    }

    .misbehavior-record-sheet thead {
        display: table-header-group;
    }

    .misbehavior-record-sheet tr {
        break-inside: avoid;
    }
}

/* Record Violations - focused data entry and review queue */
.violation-page-header h2 {
    margin-bottom: 6px;
}

.violation-page-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.violation-page-meta .badge {
    text-transform: none;
}

.violation-task-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.violation-task-nav a {
    min-height: 42px;
    padding: 9px 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    text-decoration: none;
    border-radius: calc(var(--radius) - 4px);
    font-weight: 700;
}

.violation-task-nav a:hover,
.violation-task-nav a.current {
    color: var(--primary-blue-dark);
    background: var(--primary-blue-soft);
}

.violation-task-nav a>span {
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    display: inline-grid;
    place-items: center;
    color: #fff;
    background: var(--primary-blue);
    border-radius: 999px;
    font-size: 12px;
}

.violation-section-header p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 14px;
}

.violation-student-search-row {
    grid-template-columns: minmax(260px, 1fr) auto auto;
}

.discipline-student-result {
    position: relative;
}

.discipline-student-results a.discipline-student-result>div {
    display: grid;
    gap: 3px;
}

.discipline-student-results a.discipline-student-result small {
    display: block;
    color: var(--muted);
    font-size: 12px;
    overflow-wrap: anywhere;
}

.discipline-student-results a.discipline-student-result .discipline-select-cue {
    flex: 0 0 auto;
    padding: 7px 10px;
    color: var(--primary-blue-dark);
    background: var(--primary-blue-soft);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.violation-student-context {
    grid-template-columns: minmax(260px, 1.2fr) minmax(280px, 0.9fr) auto;
    border-left-color: var(--line);
}

.violation-selected-student-main small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
}

.violation-student-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.violation-record-panel {
    scroll-margin-top: 90px;
}

.violation-entry-form {
    gap: 20px;
}

.violation-date-row {
    max-width: 260px;
}

.violation-policy-groups {
    gap: 14px;
}

.violation-policy-group {
    padding: 16px;
    background: var(--surface-muted);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.violation-policy-group+.violation-policy-group {
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.violation-policy-group legend {
    width: auto;
    margin: 0 0 0 4px;
    padding: 0 7px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.violation-policy-group legend span {
    font-size: 15px;
}

.violation-policy-group legend small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.classification-panel-minor {
    background: #fffdf2;
    border-color: #eee2a7;
}

.classification-panel-major {
    background: #f7fbff;
    border-color: #cddff1;
}

.classification-panel-grave {
    background: #fff9f8;
    border-color: #f0d4cf;
}

.violation-policy-group .discipline-policy-option {
    background: #fff;
}

.violation-submit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.violation-pending-panel {
    scroll-margin-top: 90px;
}

.violation-heading-with-count {
    display: flex;
    align-items: center;
    gap: 10px;
}

.violation-heading-with-count h2 {
    margin: 0;
}

.violation-review-table {
    min-width: 1040px;
}

.violation-review-meta {
    margin-top: 6px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.violation-guardian-contact {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
}

.violation-sms-option {
    margin-top: 4px;
}

.violation-confirm-form {
    min-width: 150px;
}

.violation-confirm-form .button {
    width: 100%;
}

.violation-history-panel>summary h2 {
    margin: 0;
}

@media (max-width: 980px) {
    .violation-student-context {
        grid-template-columns: minmax(220px, 1fr) minmax(240px, 1fr);
    }

    .violation-student-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

@media (max-width: 700px) {

    .violation-task-nav,
    .violation-student-search-row,
    .violation-student-context,
    .violation-submit-row {
        display: grid;
        grid-template-columns: 1fr;
    }

    .violation-task-nav a,
    .violation-student-actions,
    .violation-student-actions .button,
    .violation-submit-row .button {
        width: 100%;
    }

    .violation-student-actions {
        grid-column: auto;
        display: grid;
        grid-template-columns: 1fr;
    }

    .violation-date-row {
        max-width: none;
    }
}

/* Record Violations: compact classification dropdown checklists */
.violation-classification-field {
    display: grid;
    gap: 10px;
}

.violation-classification-label,
.violation-selected-summary-label {
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
}

.violation-classification-dropdowns {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}

.violation-multiselect {
    position: relative;
    min-width: 0;
}

.violation-multiselect>summary {
    min-height: 62px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "title chevron"
        "value chevron";
    align-items: center;
    column-gap: 10px;
    row-gap: 2px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
    list-style: none;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.violation-multiselect>summary::-webkit-details-marker {
    display: none;
}

.violation-multiselect>summary::marker {
    display: none;
    content: "";
}

.violation-multiselect>summary:hover,
.violation-multiselect[open]>summary {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(35, 91, 156, .08);
}

.violation-dropdown-title {
    grid-area: title;
    min-width: 0;
    font-size: 14px;
    font-weight: 800;
}

.violation-dropdown-value {
    grid-area: value;
    min-width: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.violation-dropdown-chevron {
    grid-area: chevron;
    color: var(--muted);
    font-size: 18px;
    line-height: 1;
    transition: transform .15s ease;
}

.violation-multiselect[open] .violation-dropdown-chevron {
    transform: rotate(180deg);
}

.classification-dropdown-minor>summary {
    background: #fffdf2;
    border-color: #eee2a7;
}

.classification-dropdown-major>summary {
    background: #f7fbff;
    border-color: #cddff1;
}

.classification-dropdown-grave>summary {
    background: #fff9f8;
    border-color: #f0d4cf;
}

.violation-dropdown-menu {
    position: absolute;
    z-index: 25;
    top: calc(100% + 7px);
    left: 0;
    right: 0;
    max-height: 280px;
    overflow-y: auto;
    padding: 7px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 14px 34px rgba(31, 45, 61, .16);
}

.violation-dropdown-option {
    min-height: 42px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 9px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.35;
}

.violation-dropdown-option:hover {
    background: var(--surface-muted);
}

.violation-dropdown-option input {
    flex: 0 0 auto;
    margin-top: 2px;
}

.violation-dropdown-option span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.violation-dropdown-empty {
    padding: 12px 10px;
    color: var(--muted);
    font-size: 12px;
    text-align: center;
}

.violation-selected-summary {
    display: grid;
    gap: 7px;
    padding-top: 2px;
}

.violation-selected-summary[hidden] {
    display: none;
}

.violation-selected-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.violation-selected-chip {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    max-width: 100%;
    padding: 5px 9px;
    color: var(--primary-blue-dark);
    background: var(--primary-blue-soft);
    border: 1px solid rgba(35, 91, 156, .16);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

@media (max-width: 900px) {
    .violation-classification-dropdowns {
        grid-template-columns: 1fr;
    }

    .violation-dropdown-menu {
        position: static;
        margin-top: 7px;
        box-shadow: none;
    }
}

/* Record Violations: clearer clickable/selectable affordances */
.violation-multiselect>summary {
    border-width: 1.5px;
    box-shadow: 0 1px 2px rgba(31, 45, 61, .05);
}

.violation-multiselect>summary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(31, 45, 61, .10);
}

.violation-multiselect>summary:focus-visible {
    outline: 3px solid rgba(35, 91, 156, .18);
    outline-offset: 2px;
}

.violation-dropdown-chevron {
    width: 28px;
    height: 28px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(35, 91, 156, .16);
    border-radius: 8px;
    background: rgba(255, 255, 255, .72);
}

.violation-dropdown-option {
    border: 1px solid transparent;
    background: #fff;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.violation-dropdown-option:hover {
    background: var(--primary-blue-soft);
    border-color: rgba(35, 91, 156, .18);
}

.violation-dropdown-option:has(input:checked) {
    background: var(--primary-blue-soft);
    border-color: rgba(35, 91, 156, .30);
    box-shadow: none;
    font-weight: 700;
}

.violation-dropdown-option input {
    width: 17px;
    height: 17px;
    cursor: pointer;
    accent-color: var(--primary-blue);
}

.violation-selected-summary {
    padding-top: 0;
}

/* Violation Policies UI cleanup: clearer hierarchy, affordance, and proportional controls. */
.policy-page .page-header {
    align-items: center;
}

.policy-page .page-header>div:first-child h2 {
    margin: 0;
}

.policy-page .page-header-actions {
    align-items: center;
}

.policy-page .policy-filter-panel {
    padding: 16px;
}

.policy-page .policy-filter-row {
    align-items: end;
    gap: 12px;
}

.policy-page .policy-filter-row .button {
    min-width: 92px;
    justify-content: center;
}

.policy-page .policy-create-panel {
    padding: 0;
    overflow: hidden;
}

.policy-page .policy-create-panel>summary.policy-create-trigger {
    min-height: 58px;
    padding: 13px 16px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.policy-page .policy-create-panel>summary.policy-create-trigger:hover,
.policy-page .policy-create-panel>summary.policy-create-trigger:focus-visible {
    background: #f8fbff;
    border-color: var(--primary-blue);
    outline: none;
    box-shadow: 0 0 0 3px rgba(22, 73, 138, 0.08);
}

.policy-page .policy-create-trigger-icon {
    width: 32px;
    height: 32px;
    display: inline-grid;
    place-items: center;
    color: #fff;
    background: var(--primary-blue);
    border-radius: 8px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}

.policy-page .policy-create-panel>summary.policy-create-trigger>strong {
    color: var(--ink);
    font-size: 15px;
    font-weight: 800;
}

.policy-page .policy-create-trigger-cue {
    color: var(--primary-blue);
    font-size: 18px;
    font-weight: 800;
    text-align: center;
    transition: transform 0.18s ease;
}

.policy-page .policy-create-panel[open] .policy-create-trigger-cue {
    transform: rotate(180deg);
}

.policy-page .policy-create-form {
    margin: 0;
    padding: 18px;
    border-top: 1px solid var(--line);
}

.policy-page .policy-rule-editor-grid {
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    align-items: stretch;
}

.policy-page .policy-rule-editor {
    height: 100%;
}

.policy-catalog-panel {
    padding: 18px;
}

.policy-catalog-heading {
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 9px;
}

.policy-catalog-heading h2 {
    margin: 0;
    font-size: 20px;
}

.policy-count-badge {
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    display: inline-grid;
    place-items: center;
    color: var(--primary-blue-dark);
    background: var(--primary-blue-soft);
    border: 1px solid rgba(22, 73, 138, 0.14);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.policy-page .policy-record {
    overflow: hidden;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.policy-page .policy-record:hover {
    border-color: rgba(22, 73, 138, 0.34);
}

.policy-page .policy-record[open] {
    border-color: rgba(22, 73, 138, 0.34);
    box-shadow: 0 7px 20px rgba(15, 45, 82, 0.06);
}

.policy-page .policy-record>summary {
    min-height: 72px;
    padding: 14px 16px;
    grid-template-columns: minmax(240px, 1fr) auto auto minmax(74px, auto) auto;
    gap: 10px;
    background: #fff;
    transition: background 0.18s ease;
}

.policy-page .policy-record>summary:hover,
.policy-page .policy-record>summary:focus-visible {
    background: #f8fbff;
    outline: none;
}

.policy-edit-cue {
    min-height: 34px;
    padding: 7px 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--primary-blue);
    background: #fff;
    border: 1px solid rgba(22, 73, 138, 0.28);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.policy-record>summary:hover .policy-edit-cue,
.policy-record>summary:focus-visible .policy-edit-cue {
    color: #fff;
    background: var(--primary-blue);
    border-color: var(--primary-blue);
}

.policy-page .policy-usage-count {
    min-height: 30px;
    padding: 6px 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-muted);
    border: 1px solid var(--line);
    border-radius: 999px;
    white-space: nowrap;
}

.policy-page .policy-rule-summary-grid {
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    align-items: stretch;
}

.policy-page .policy-rule-summary-grid>div {
    height: 100%;
}

.policy-page .policy-admin-actions .inline-form {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.policy-page .policy-admin-actions .inline-form .field {
    min-width: 190px;
}

@media (max-width: 1050px) {

    .policy-page .policy-rule-editor-grid,
    .policy-page .policy-rule-summary-grid {
        grid-template-columns: 1fr;
    }

    .policy-page .policy-record>summary {
        grid-template-columns: minmax(0, 1fr) auto auto;
    }

    .policy-page .policy-record-title {
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px) {

    .policy-page .page-header-actions,
    .policy-page .policy-admin-actions,
    .policy-page .policy-admin-actions .inline-form {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
    }

    .policy-page .page-header-actions .button,
    .policy-page .policy-admin-actions .button,
    .policy-page .policy-admin-actions .inline-form .field {
        width: 100%;
        min-width: 0;
    }

    .policy-page .policy-record>summary {
        grid-template-columns: 1fr auto;
    }

    .policy-page .policy-record-title {
        grid-column: 1 / -1;
    }

    .policy-page .policy-usage-count {
        justify-self: start;
    }
}

/* Behavior Categories UI cleanup */
.behavior-category-page .page-header {
    align-items: center;
}

.behavior-category-page .page-header>div:first-child p {
    margin-top: 5px;
}

.behavior-category-page .category-back-button {
    min-width: 190px;
    justify-content: center;
}

.behavior-category-page .behavior-category-grid {
    gap: 14px;
    align-items: stretch;
}

.behavior-category-page .behavior-category-card {
    min-height: 158px;
    padding: 18px;
    display: flex;
    flex-direction: column;
}

.behavior-category-page .behavior-category-card>div {
    min-height: 34px;
}

.behavior-category-page .behavior-category-code {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid currentColor;
    border-radius: 8px;
    line-height: 1;
}

.behavior-category-page .behavior-category-card h2 {
    margin: 14px 0 6px;
}

.behavior-category-page .behavior-category-card p {
    margin-top: auto;
}

.behavior-category-page #category-confirmation .panel-header {
    margin-bottom: 14px;
}

.behavior-category-page .student-search-row {
    align-items: end;
}

.behavior-category-page .student-search-row>.button {
    min-width: 92px;
    justify-content: center;
}

.behavior-category-page .discipline-student-results a {
    min-height: 68px;
    padding: 13px 14px;
    cursor: pointer;
    transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.behavior-category-page .discipline-student-results a:hover,
.behavior-category-page .discipline-student-results a:focus-visible {
    border-color: var(--primary-blue);
    background: #f8fbff;
    box-shadow: 0 4px 14px rgba(20, 64, 120, .10);
    transform: translateY(-1px);
    outline: none;
}

.behavior-category-page .category-student-result-action {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.behavior-category-page .category-student-result-action>span {
    white-space: nowrap;
}

.behavior-category-page .category-student-result-action>strong {
    padding: 7px 11px;
    color: var(--primary-blue);
    background: #fff;
    border: 1px solid var(--primary-blue);
    border-radius: 8px;
    font-size: 12px;
    line-height: 1;
}

.behavior-category-page .discipline-student-results a:hover .category-student-result-action>strong,
.behavior-category-page .discipline-student-results a:focus-visible .category-student-result-action>strong {
    color: #fff;
    background: var(--primary-blue);
}

.behavior-category-page .category-student-context {
    grid-template-columns: minmax(0, 1.4fr) minmax(150px, .55fr) auto;
    gap: 16px;
    padding: 16px 18px;
}

.behavior-category-page .category-student-context h3 {
    margin: 0 0 5px;
}

.behavior-category-page .category-student-context .button {
    min-width: 120px;
    justify-content: center;
}

.behavior-category-page .category-confirm-form {
    grid-template-columns: minmax(190px, .5fr) minmax(300px, 1fr) minmax(145px, auto);
    gap: 14px;
}

.behavior-category-page .category-confirm-form .button {
    min-width: 145px;
    justify-content: center;
}

.behavior-category-page .category-history-heading {
    display: flex;
    align-items: center;
    gap: 10px;
}

.behavior-category-page .category-history-heading h2 {
    margin: 0;
}

.behavior-category-page .category-history-count {
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-blue);
    background: #eef5ff;
    border: 1px solid #cfe0f7;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.behavior-category-page .category-history-filter {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(180px, .4fr) auto auto;
    gap: 12px;
    align-items: end;
}

.behavior-category-page .category-history-filter>.button {
    min-width: 100px;
    justify-content: center;
}

@media (max-width: 900px) {

    .behavior-category-page .category-confirm-form,
    .behavior-category-page .category-history-filter {
        grid-template-columns: 1fr 1fr;
    }

    .behavior-category-page .category-confirm-form .field.grow,
    .behavior-category-page .category-history-filter .field.grow {
        grid-column: 1 / -1;
    }

    .behavior-category-page .category-confirm-form .button,
    .behavior-category-page .category-history-filter>.button {
        width: 100%;
    }
}

@media (max-width: 640px) {

    .behavior-category-page .category-student-context,
    .behavior-category-page .category-confirm-form,
    .behavior-category-page .category-history-filter {
        grid-template-columns: 1fr;
    }

    .behavior-category-page .category-confirm-form .field.grow,
    .behavior-category-page .category-history-filter .field.grow {
        grid-column: auto;
    }

    .behavior-category-page .category-student-context .button,
    .behavior-category-page .category-back-button {
        width: 100%;
    }
}

/* Sanctions page UI cleanup */
.sanctions-page {
    display: grid;
    gap: 18px;
}

.sanctions-page .sanctions-page-header {
    margin-bottom: 0;
}

.sanctions-page .sanctions-page-header p {
    margin-top: 5px;
    color: var(--muted);
    font-weight: 700;
}

.sanctions-page .discipline-status-strip {
    min-height: 84px;
}

.sanctions-page .discipline-status-strip>div {
    padding: 16px 18px;
    display: grid;
    align-content: center;
}

.sanctions-page .follow-up-filter-panel {
    padding: 14px;
}

.sanctions-page .follow-up-filter-panel .student-search-row {
    grid-template-columns: minmax(280px, 1fr) minmax(170px, .38fr) auto auto;
    align-items: center;
    gap: 10px;
}

.sanctions-page .follow-up-filter-panel .field {
    margin-bottom: 0;
}

.sanctions-page .follow-up-filter-panel input,
.sanctions-page .follow-up-filter-panel select,
.sanctions-page .follow-up-filter-panel .button {
    min-height: 42px;
}

.sanctions-page .sanctions-section-header {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.sanctions-page .sanctions-section-header h2 {
    margin: 0;
}

.sanctions-count-badge {
    min-width: 34px;
    height: 30px;
    padding: 0 10px;
    display: inline-grid;
    place-items: center;
    background: var(--surface-muted);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--primary-blue);
    font-size: 13px;
    font-weight: 800;
}

.sanctions-page .follow-up-record {
    padding: 15px 16px;
    align-items: center;
}

.sanctions-page .follow-up-record-main {
    grid-template-columns: minmax(190px, .9fr) minmax(250px, 1.3fr) minmax(100px, .42fr);
    gap: 18px;
}

.sanctions-page .follow-up-record-actions {
    min-width: 330px;
    align-items: center;
    flex-wrap: nowrap;
}

.sanctions-page .follow-up-record-actions .inline-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sanctions-page .follow-up-record-actions .field {
    min-width: 132px;
}

.sanctions-page .follow-up-record-actions .field>span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sanctions-page .follow-up-record-actions .button,
.sanctions-page .follow-up-record-actions select {
    min-height: 38px;
}

.sanctions-page #current-suspensions .data-table th,
.sanctions-page #current-suspensions .data-table td {
    vertical-align: middle;
}

.sanctions-page #current-suspensions .data-table th:nth-child(1) {
    width: 20%;
}

.sanctions-page #current-suspensions .data-table th:nth-child(2),
.sanctions-page #current-suspensions .data-table th:nth-child(3) {
    width: 12%;
}

.sanctions-page #current-suspensions .data-table th:nth-child(4) {
    width: 25%;
}

.sanctions-page #current-suspensions .data-table th:nth-child(5) {
    width: 11%;
}

.sanctions-page #current-suspensions .data-table th:nth-child(6) {
    width: 20%;
}

.sanctions-page #current-suspensions td:last-child .inline-form {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.sanctions-page .discipline-history-panel>summary.sanctions-history-summary {
    min-height: 56px;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 18px;
    align-items: center;
    gap: 12px;
    border-radius: calc(var(--radius) - 2px);
    transition: background .18s ease, border-color .18s ease;
}

.sanctions-page .discipline-history-panel>summary.sanctions-history-summary:hover,
.sanctions-page .discipline-history-panel>summary.sanctions-history-summary:focus-visible {
    background: var(--surface-muted);
    outline: none;
}

.sanctions-page .sanctions-history-summary h2 {
    margin: 0;
    font-size: 18px;
}

.sanctions-history-meta {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.sanctions-page .sanctions-history-summary::after {
    content: '›';
    display: inline-block;
    color: var(--primary-blue);
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
    transform: rotate(90deg);
    transition: transform .18s ease;
}

.sanctions-page .discipline-history-panel[open] .sanctions-history-summary::after {
    transform: rotate(-90deg);
}

.sanctions-page .discipline-history-body {
    padding-top: 18px;
}

@media (max-width: 1100px) {
    .sanctions-page .follow-up-record-actions {
        min-width: 0;
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .sanctions-page .follow-up-record-actions .inline-form {
        flex: 1 1 280px;
        justify-content: flex-end;
    }
}

@media (max-width: 760px) {

    .sanctions-page .follow-up-filter-panel .student-search-row,
    .sanctions-page #current-suspensions td:last-child .inline-form {
        grid-template-columns: 1fr;
    }

    .sanctions-page .follow-up-filter-panel .button,
    .sanctions-page #current-suspensions td:last-child .button {
        width: 100%;
    }

    .sanctions-page .sanctions-section-header {
        align-items: center;
    }

    .sanctions-page .follow-up-record-main {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .sanctions-page .follow-up-record-actions,
    .sanctions-page .follow-up-record-actions .inline-form {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .sanctions-page .follow-up-record-actions .field,
    .sanctions-page .follow-up-record-actions .button {
        width: 100%;
    }

    .sanctions-page .discipline-history-panel>summary.sanctions-history-summary {
        grid-template-columns: minmax(0, 1fr) auto 18px;
    }
}

/* Counseling page UI cleanup */
.counseling-page {
    display: grid;
    gap: 18px;
}

.counseling-page .counseling-page-header {
    margin-bottom: 0;
}

.counseling-page .counseling-page-header p {
    margin-top: 5px;
    color: var(--muted);
    font-weight: 700;
}

.counseling-page .discipline-status-strip {
    min-height: 84px;
}

.counseling-page .discipline-status-strip>div {
    padding: 16px 18px;
    display: grid;
    align-content: center;
}

.counseling-page .follow-up-filter-panel {
    padding: 14px;
}

.counseling-page .follow-up-filter-panel .student-search-row {
    grid-template-columns: minmax(280px, 1fr) minmax(190px, .4fr) auto auto;
    align-items: center;
    gap: 10px;
}

.counseling-page .follow-up-filter-panel .field {
    margin-bottom: 0;
}

.counseling-page .follow-up-filter-panel input,
.counseling-page .follow-up-filter-panel select,
.counseling-page .follow-up-filter-panel .button,
.counseling-page .page-header-actions .button {
    min-height: 42px;
}

.counseling-page .page-header-actions .button,
.counseling-page .follow-up-filter-panel .button,
.counseling-page .counseling-case-actions .button {
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

.counseling-page .page-header-actions .button:hover,
.counseling-page .follow-up-filter-panel .button:hover,
.counseling-page .counseling-case-actions .button:hover {
    transform: translateY(-1px);
}

.counseling-page .counseling-section-header {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.counseling-page .counseling-section-header h2 {
    margin: 0;
}

.counseling-count-badge {
    min-width: 34px;
    height: 30px;
    padding: 0 10px;
    display: inline-grid;
    place-items: center;
    background: var(--surface-muted);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--primary-blue);
    font-size: 13px;
    font-weight: 800;
}

.counseling-page .counseling-case {
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.counseling-page .counseling-case:hover,
.counseling-page .counseling-case:focus-within {
    border-color: rgba(34, 75, 135, .34);
    box-shadow: 0 8px 20px rgba(31, 57, 92, .08);
}

.counseling-page .counseling-case>summary {
    min-height: 76px;
    grid-template-columns: minmax(180px, 1fr) minmax(230px, 1.25fr) minmax(180px, .9fr) minmax(100px, auto) minmax(118px, auto);
    gap: 16px;
    border-radius: calc(var(--radius) - 1px);
    transition: background .18s ease;
}

.counseling-page .counseling-case>summary:hover,
.counseling-page .counseling-case>summary:focus-visible,
.counseling-page .counseling-case[open]>summary {
    background: var(--surface-muted);
    outline: none;
}

.counseling-update-cue {
    min-height: 36px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    justify-self: end;
    border: 1px solid rgba(34, 75, 135, .28);
    border-radius: 8px;
    background: #fff;
    color: var(--primary-blue);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.counseling-update-cue>span {
    font-size: 20px;
    line-height: 1;
    transition: transform .18s ease;
}

.counseling-case[open] .counseling-update-cue>span {
    transform: rotate(90deg);
}

.counseling-page .counseling-case-body {
    padding: 18px 20px 20px;
}

.counseling-page .counseling-case-body .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
}

.counseling-page .counseling-case-actions {
    margin-top: 14px;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.counseling-page .counseling-case-actions .button {
    min-height: 40px;
}

.counseling-page .discipline-history-panel>summary.counseling-history-summary {
    min-height: 56px;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 18px;
    align-items: center;
    gap: 12px;
    border-radius: calc(var(--radius) - 2px);
    cursor: pointer;
    transition: background .18s ease;
}

.counseling-page .discipline-history-panel>summary.counseling-history-summary:hover,
.counseling-page .discipline-history-panel>summary.counseling-history-summary:focus-visible {
    background: var(--surface-muted);
    outline: none;
}

.counseling-page .counseling-history-summary h2 {
    margin: 0;
    font-size: 18px;
}

.counseling-history-meta {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.counseling-page .counseling-history-summary::after {
    content: '›';
    display: inline-block;
    color: var(--primary-blue);
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
    transform: rotate(90deg);
    transition: transform .18s ease;
}

.counseling-page .discipline-history-panel[open] .counseling-history-summary::after {
    transform: rotate(-90deg);
}

.counseling-page .discipline-history-body {
    padding-top: 18px;
}

.counseling-page .discipline-history-body .data-table th,
.counseling-page .discipline-history-body .data-table td {
    vertical-align: middle;
}

.counseling-page .discipline-history-body .data-table th:nth-child(1) {
    width: 18%;
}

.counseling-page .discipline-history-body .data-table th:nth-child(2) {
    width: 23%;
}

.counseling-page .discipline-history-body .data-table th:nth-child(3) {
    width: 10%;
}

.counseling-page .discipline-history-body .data-table th:nth-child(4) {
    width: 16%;
}

.counseling-page .discipline-history-body .data-table th:nth-child(5) {
    width: 19%;
}

.counseling-page .discipline-history-body .data-table th:nth-child(6) {
    width: 14%;
}

@media (max-width: 1100px) {
    .counseling-page .counseling-case>summary {
        grid-template-columns: minmax(190px, 1fr) minmax(220px, 1.2fr) auto;
    }

    .counseling-page .counseling-case-schedule {
        grid-column: 1 / 3;
    }

    .counseling-page .counseling-update-cue {
        grid-column: 3;
        grid-row: 2;
    }
}

@media (max-width: 760px) {

    .counseling-page .follow-up-filter-panel .student-search-row,
    .counseling-page .counseling-case-body .form-grid {
        grid-template-columns: 1fr;
    }

    .counseling-page .follow-up-filter-panel .button,
    .counseling-page .counseling-case-body .field.span-2,
    .counseling-page .counseling-case-actions .button {
        width: 100%;
        grid-column: auto;
    }

    .counseling-page .counseling-case>summary {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px 12px;
    }

    .counseling-page .counseling-case-title,
    .counseling-page .counseling-case-schedule {
        grid-column: 1 / -1;
    }

    .counseling-page .counseling-update-cue {
        grid-column: 1 / -1;
        grid-row: auto;
        width: 100%;
        justify-self: stretch;
    }

    .counseling-page .counseling-case-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .counseling-page .discipline-history-panel>summary.counseling-history-summary {
        grid-template-columns: minmax(0, 1fr) auto 18px;
    }
}

/* GMC Processing - simplified queue, batch review, and release flow */
.gmc-page .page-header {
    align-items: center;
}

.gmc-requests-page .gmc-status-strip,
.gmc-batch-page .gmc-status-strip,
.gmc-batch-review-page .gmc-status-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gmc-individual-page .gmc-release-status {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.gmc-requests-page .gmc-request-record>summary {
    grid-template-columns: minmax(190px, .9fr) minmax(260px, 1.25fr) minmax(135px, auto) auto;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.gmc-requests-page .gmc-request-record>summary:hover,
.gmc-requests-page .gmc-request-record>summary:focus-visible {
    background: #f8fbff;
    box-shadow: none;
    outline: none;
}

.gmc-open-cue {
    min-width: 108px;
    padding: 7px 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: var(--primary-blue-dark);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 800;
}

.gmc-request-record[open] .gmc-open-cue span,
.gmc-more-filters[open]>summary span,
.gmc-walkin-panel[open]>summary>strong span {
    transform: rotate(180deg);
}

.gmc-open-cue span,
.gmc-more-filters>summary span,
.gmc-walkin-panel>summary>strong span {
    display: inline-block;
    transition: transform .18s ease;
}

.gmc-walkin-panel>summary {
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    list-style: none;
    cursor: pointer;
    border-radius: var(--radius);
    transition: background .18s ease, box-shadow .18s ease;
}

.gmc-walkin-panel>summary::-webkit-details-marker {
    display: none;
}

.gmc-walkin-panel>summary:hover,
.gmc-walkin-panel>summary:focus-visible {
    background: #f8fbff;
    box-shadow: none;
    outline: none;
}

.gmc-walkin-panel>summary h2 {
    margin: 0;
    font-size: 19px;
}

.gmc-walkin-panel>summary span {
    margin-top: 4px;
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.gmc-walkin-panel>summary>strong {
    min-width: 86px;
    padding: 7px 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: var(--primary-blue-dark);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 12px;
}

.gmc-walkin-panel[open]>summary {
    border-bottom: 1px solid var(--line);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.gmc-walkin-body {
    padding: 18px;
}

.gmc-primary-filter-grid {
    display: grid;
    grid-template-columns: minmax(300px, 1.5fr) minmax(180px, .65fr) minmax(180px, .65fr);
    align-items: end;
    gap: 12px;
}

.gmc-more-filters {
    margin-top: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-muted);
}

.gmc-more-filters>summary {
    padding: 11px 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    cursor: pointer;
    color: var(--primary-blue-dark);
    font-size: 13px;
    font-weight: 800;
    border-radius: var(--radius);
    transition: background .18s ease, box-shadow .18s ease;
}

.gmc-more-filters>summary::-webkit-details-marker {
    display: none;
}

.gmc-more-filters>summary:hover,
.gmc-more-filters>summary:focus-visible {
    background: #fff;
    box-shadow: none;
    outline: none;
}

.gmc-more-filters[open]>summary {
    background: #fff;
    border-bottom: 1px solid var(--line);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.gmc-more-filters .gmc-release-filter-grid {
    padding: 14px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.gmc-filter-actions {
    margin-top: 14px;
}

.gmc-selection-toolbar {
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    background: #f8fbff;
    border-bottom: 1px solid var(--line);
}

.gmc-selection-toolbar>div>strong,
.gmc-selection-toolbar>div>span {
    display: block;
}

.gmc-selection-toolbar>div>span {
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
}

.gmc-selection-form {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex: 0 0 auto;
}

.gmc-release-table {
    min-width: 1120px;
    table-layout: fixed;
}

.gmc-release-table th:nth-child(1) {
    width: 4%;
}

.gmc-release-table th:nth-child(2) {
    width: 17%;
}

.gmc-release-table th:nth-child(3) {
    width: 19%;
}

.gmc-release-table th:nth-child(4) {
    width: 18%;
}

.gmc-release-table th:nth-child(5) {
    width: 14%;
}

.gmc-release-table th:nth-child(6) {
    width: 17%;
}

.gmc-release-table th:nth-child(7) {
    width: 11%;
}

.gmc-select-column,
.gmc-select-cell {
    text-align: center;
}

.gmc-select-column input,
.gmc-select-cell input {
    width: 17px;
    height: 17px;
    margin: 0;
    vertical-align: middle;
    accent-color: var(--primary-blue);
}

.gmc-eligibility-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.gmc-batch-filter-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gmc-batch-filter-grid .span-2 {
    grid-column: span 2;
}

.gmc-batch-actions {
    justify-content: flex-end;
}

.gmc-batch-eligibility-table {
    min-width: 900px;
    table-layout: fixed;
}

.gmc-batch-eligibility-table th:nth-child(1) {
    width: 24%;
}

.gmc-batch-eligibility-table th:nth-child(2) {
    width: 23%;
}

.gmc-batch-eligibility-table th:nth-child(3) {
    width: 12%;
}

.gmc-batch-eligibility-table th:nth-child(4) {
    width: 21%;
}

.gmc-batch-eligibility-table th:nth-child(5) {
    width: 20%;
}

.gmc-stage-progress-four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gmc-ready-print-actions {
    grid-template-columns: auto minmax(360px, 1fr);
}

.gmc-pickup-action-card {
    min-width: 0;
    padding: 14px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #f8fbff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.gmc-pickup-action-card strong,
.gmc-pickup-action-card span {
    display: block;
}

.gmc-pickup-action-card span {
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
}

.gmc-pickup-action-card .button {
    white-space: nowrap;
}

.gmc-pickup-ready-notice {
    margin-bottom: 14px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f5fbf7;
    border: 1px solid #cfe5d5;
    border-radius: var(--radius);
}

.gmc-pickup-ready-notice p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.gmc-preview-page .gmc-preview-form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gmc-batch-review-table {
    table-layout: fixed;
}

.gmc-batch-review-table th:nth-child(1) {
    width: 17%;
}

.gmc-batch-review-table th:nth-child(2) {
    width: 18%;
}

.gmc-batch-review-table th:nth-child(3) {
    width: 13%;
}

.gmc-batch-review-table th:nth-child(4) {
    width: 14%;
}

.gmc-batch-review-table th:nth-child(5) {
    width: 18%;
}

.gmc-batch-review-table th:nth-child(6) {
    width: 10%;
}

.gmc-batch-review-table th:nth-child(7) {
    width: 10%;
}

@media (max-width: 1100px) {
    .gmc-primary-filter-grid {
        grid-template-columns: minmax(260px, 1fr) repeat(2, minmax(165px, .6fr));
    }

    .gmc-more-filters .gmc-release-filter-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .gmc-batch-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gmc-ready-print-actions {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {

    .gmc-requests-page .gmc-status-strip,
    .gmc-batch-page .gmc-status-strip,
    .gmc-batch-review-page .gmc-status-strip,
    .gmc-individual-page .gmc-release-status {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gmc-primary-filter-grid,
    .gmc-more-filters .gmc-release-filter-grid,
    .gmc-batch-filter-grid,
    .gmc-preview-page .gmc-preview-form-grid {
        grid-template-columns: 1fr;
    }

    .gmc-batch-filter-grid .span-2,
    .gmc-preview-page .gmc-preview-form-grid .span-2 {
        grid-column: auto;
    }

    .gmc-requests-page .gmc-request-record>summary {
        grid-template-columns: 1fr auto;
    }

    .gmc-requests-page .gmc-request-purpose {
        grid-column: 1 / -1;
    }

    .gmc-open-cue {
        grid-column: 1 / -1;
        width: 100%;
    }

    .gmc-walkin-panel>summary,
    .gmc-pickup-action-card,
    .gmc-pickup-ready-notice {
        align-items: stretch;
        flex-direction: column;
    }

    .gmc-walkin-panel>summary>strong,
    .gmc-pickup-action-card .button,
    .gmc-batch-actions .button,
    .gmc-filter-actions .button {
        width: 100%;
    }

    .gmc-batch-actions,
    .gmc-filter-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .gmc-selection-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .gmc-selection-form {
        display: grid;
        grid-template-columns: 1fr;
    }

    .gmc-selection-form .button {
        width: 100%;
    }
}


/* GMC print preview - individual and batch */
.gmc-row-actions {
    align-items: center;
    flex-wrap: wrap;
}

.gmc-inline-print-preview,
.gmc-batch-print-preview {
    scroll-margin-top: 18px;
}

.gmc-inline-print-preview .panel-header p,
.gmc-batch-print-preview .panel-header p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.gmc-preview-toolbar {
    margin-bottom: 12px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--surface-muted);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--muted);
    font-size: 13px;
}

.gmc-inline-pdf-frame,
.gmc-batch-pdf-frame {
    min-height: 680px;
}

.gmc-preview-unavailable {
    min-height: 180px;
    padding: 28px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 6px;
    text-align: center;
    background: var(--surface-muted);
    border: 1px dashed var(--line);
    border-radius: var(--radius);
}

.gmc-preview-unavailable strong {
    color: var(--primary-blue-dark);
}

.gmc-preview-unavailable span {
    color: var(--muted);
    font-size: 13px;
}

.gmc-converter-status .panel-header {
    margin-bottom: 8px;
}

.gmc-converter-status p {
    margin: 0;
}

@media (max-width: 760px) {
    .gmc-preview-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .gmc-preview-toolbar .button,
    .gmc-inline-print-preview .panel-header .button,
    .gmc-batch-print-preview .panel-header .button,
    .gmc-batch-print-preview .panel-header form,
    .gmc-batch-print-preview .panel-header form .button {
        width: 100%;
    }

    .gmc-inline-pdf-frame,
    .gmc-batch-pdf-frame {
        min-height: 520px;
    }
}


/* Notifications - balanced filter layout */
.notifications-page .notification-filter-grid {
    grid-template-columns: minmax(300px, 1.6fr) minmax(180px, 1fr) minmax(180px, 1fr);
    column-gap: 18px;
    row-gap: 16px;
    align-items: end;
}

.notifications-page .notification-search-field {
    grid-column: auto;
}

.notifications-page .notification-filter-grid .field {
    min-width: 0;
    margin-bottom: 0;
}

.notifications-page .notification-filter-grid .field>span {
    min-height: 20px;
    display: flex;
    align-items: center;
}

.notifications-page .notification-filter-grid input,
.notifications-page .notification-filter-grid select {
    width: 100%;
    min-width: 0;
    min-height: 50px;
}

.notifications-page .notification-filter-actions {
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
}

.notifications-page .communication-status-strip>div {
    min-height: 62px;
    padding: 14px 18px;
}

.notifications-page .notification-table th:nth-child(1) {
    width: 175px;
}

.notifications-page .notification-table th:nth-child(3) {
    width: 120px;
}

.notifications-page .notification-table th:nth-child(4) {
    width: 115px;
}

.notifications-page .notification-table th:nth-child(5) {
    width: 165px;
}

.notifications-page .communication-list-panel {
    padding-top: 20px;
}

@media (max-width: 1180px) {
    .notifications-page .notification-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .notifications-page .notification-search-field {
        grid-column: span 2;
    }
}

@media (max-width: 760px) {

    .notifications-page .notification-filter-grid,
    .notifications-page .notification-search-field {
        grid-template-columns: 1fr;
        grid-column: auto;
    }

    .notifications-page .notification-filter-actions {
        justify-content: stretch;
    }

    .notifications-page .notification-filter-actions .button {
        flex: 1 1 0;
    }
}


/* SMS Delivery Logs - proportional layout */
.sms-page .sms-filter-grid {
    grid-template-columns: minmax(280px, 2fr) minmax(150px, 1fr) repeat(2, minmax(135px, 1fr)) minmax(90px, 0.65fr);
    gap: 14px;
    align-items: end;
}

.sms-page .sms-search-field {
    grid-column: auto;
}

.sms-page .sms-filter-actions {
    justify-content: flex-end;
    margin-top: 0;
}

.sms-page .communication-status-strip>div {
    min-height: 62px;
    padding: 14px 18px;
}

.sms-page .sms-log-table th:nth-child(1) {
    width: 185px;
}

.sms-page .sms-log-table th:nth-child(2) {
    width: 125px;
}

.sms-page .sms-log-table th:nth-child(4) {
    width: 135px;
}

.sms-page .sms-log-table th:nth-child(5) {
    width: 165px;
}

.sms-page .sms-log-table th:nth-child(6) {
    width: 90px;
}

.sms-page .communication-list-panel {
    padding-top: 20px;
}

@media (max-width: 1120px) {
    .sms-page .sms-filter-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sms-page .sms-search-field {
        grid-column: span 2;
    }
}

@media (max-width: 760px) {

    .sms-page .sms-filter-grid,
    .sms-page .sms-search-field {
        grid-template-columns: 1fr;
        grid-column: auto;
    }

    .sms-page .sms-filter-actions {
        justify-content: stretch;
    }

    .sms-page .sms-filter-actions .button {
        flex: 1 1 0;
    }
}

/* Users and account-management refinements */
.users-filter-grid {
    grid-template-columns: minmax(280px, 2fr) repeat(2, minmax(150px, 1fr)) 110px;
}

.users-filter-grid .span-2 {
    grid-column: span 1;
}

.simplified-user-table {
    min-width: 760px;
}

.simplified-user-table th:nth-child(1) {
    width: 30%;
}

.simplified-user-table th:nth-child(2),
.simplified-user-table th:nth-child(3),
.simplified-user-table th:nth-child(4) {
    width: 18%;
}

.simplified-user-table th:last-child {
    width: 110px;
}

.staff-access-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.permission-guide-alert {
    margin-bottom: 16px;
}

.permission-module-list {
    display: grid;
    gap: 16px;
}

.permission-module-group {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.permission-module-heading {
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-muted);
}

.permission-module-heading h3 {
    margin: 0;
    color: var(--primary-blue-dark);
    font-size: 15px;
}

.permission-group-table {
    min-width: 680px;
}

.permission-group-table th:nth-child(1) {
    width: 42%;
}

.permission-group-table th:nth-child(2),
.permission-group-table th:nth-child(3) {
    width: 18%;
}

.permission-group-table th:nth-child(4) {
    width: 22%;
}

.permission-group-table .field select {
    min-width: 140px;
}

.small-badge {
    margin-left: 6px;
    padding: 2px 6px;
    font-size: 10px;
}

.counselor-access-note {
    margin-top: 0;
}

.improved-student-account-table {
    min-width: 1120px;
}

.improved-student-account-table th:nth-child(2) {
    width: 24%;
}

.improved-student-account-table th:nth-child(3) {
    width: 22%;
}

.improved-student-account-table th:nth-child(4) {
    width: 15%;
}

.improved-student-account-table th:nth-child(5) {
    width: 15%;
}

.improved-student-account-table th:nth-child(6) {
    width: 15%;
}

.improved-student-account-table th:last-child {
    width: 130px;
}

.improved-student-account-table td:last-child form {
    margin: 0;
}

.password-change-required-alert {
    margin-bottom: 18px;
}

@media (max-width: 980px) {
    .users-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .users-filter-grid .span-2 {
        grid-column: span 2;
    }
}

@media (max-width: 760px) {

    .users-filter-grid,
    .users-filter-grid .span-2,
    .staff-access-summary-grid {
        grid-template-columns: 1fr;
        grid-column: auto;
    }
}

/* Users UI proportion cleanup */
.users-page .page-header,
.student-accounts-page .page-header {
    align-items: center;
}

.users-page .page-header>.button,
.student-accounts-page .page-header>.button {
    min-width: 145px;
    justify-content: center;
}

.users-page .administration-status-strip>div,
.student-accounts-page .administration-status-strip>div {
    min-height: 68px;
    padding: 14px 18px;
}

.users-page .administration-status-strip span,
.student-accounts-page .administration-status-strip span {
    line-height: 1.25;
}

.users-page .administration-filter-panel .button-row,
.student-accounts-page .administration-filter-panel .button-row {
    justify-content: flex-end;
}

.users-page .users-filter-grid {
    grid-template-columns: minmax(300px, 2.1fr) minmax(155px, 1fr) minmax(175px, 1.1fr) 96px;
}

.users-page .staff-registration-requests-panel .panel-header {
    margin-bottom: 4px;
}

.users-page .staff-request-table {
    min-width: 760px;
}

.users-page .staff-request-table th:nth-child(1) {
    width: 31%;
}

.users-page .staff-request-table th:nth-child(2),
.users-page .staff-request-table th:nth-child(3) {
    width: 19%;
}

.users-page .staff-request-table th:last-child {
    width: 31%;
}

.users-page .staff-request-actions {
    justify-content: flex-start;
}

.users-page .simplified-user-table {
    min-width: 780px;
}

.users-page .simplified-user-table th:nth-child(1) {
    width: 32%;
}

.users-page .simplified-user-table th:nth-child(2) {
    width: 20%;
}

.users-page .simplified-user-table th:nth-child(3) {
    width: 18%;
}

.users-page .simplified-user-table th:nth-child(4) {
    width: 20%;
}

.users-page .simplified-user-table th:last-child {
    width: 100px;
}

.users-page .simplified-user-table td:last-child {
    white-space: nowrap;
}

.users-page .access-profile-header {
    display: grid;
    grid-template-columns: minmax(220px, 0.85fr) minmax(440px, 1.55fr);
    gap: 24px;
    align-items: end;
}

.users-page .access-profile-header>div:first-child {
    min-width: 0;
}

.users-page .access-profile-header>div:first-child h2 {
    margin-bottom: 4px;
}

.users-page .access-profile-actions {
    display: grid;
    grid-template-columns: minmax(320px, 1.7fr) minmax(150px, 0.75fr);
    gap: 12px;
    align-items: end;
}

.users-page .access-profile-actions .inline-form {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) auto;
    gap: 10px;
    align-items: end;
}

.users-page .access-profile-actions .inline-form .field {
    margin: 0;
}

.users-page .access-profile-actions>form:not(.inline-form),
.users-page .access-profile-actions>form:not(.inline-form) .button {
    width: 100%;
}

.users-page .access-profile-actions>form:not(.inline-form) .button {
    min-height: 43px;
}

.users-page .staff-access-summary-grid>div {
    min-height: 72px;
}

.users-page .permission-matrix-panel .panel-header {
    margin-bottom: 12px;
}

.users-page .permission-guide-alert {
    max-width: none;
    margin: 0 0 16px;
}

.users-page .permission-module-list {
    gap: 14px;
}

.users-page .permission-module-heading {
    padding: 11px 16px;
}

.users-page .permission-group-table th:nth-child(1) {
    width: 44%;
}

.users-page .permission-group-table th:nth-child(2),
.users-page .permission-group-table th:nth-child(3) {
    width: 17%;
}

.users-page .permission-group-table th:nth-child(4) {
    width: 22%;
}

.users-page .permission-save-row {
    padding-top: 2px;
}

.student-accounts-page .student-account-filter-grid {
    grid-template-columns: minmax(280px, 2fr) repeat(4, minmax(135px, 1fr)) 92px;
}

.student-accounts-page .student-account-filter-grid .span-2 {
    grid-column: span 1;
}

.student-accounts-page .student-account-list-panel {
    overflow: hidden;
}

.student-accounts-page .student-account-list-panel>.table-wrap {
    margin-top: 0;
}

.student-accounts-page .improved-student-account-table {
    min-width: 1080px;
}

.student-accounts-page .improved-student-account-table th:nth-child(2) {
    width: 25%;
}

.student-accounts-page .improved-student-account-table th:nth-child(3) {
    width: 21%;
}

.student-accounts-page .improved-student-account-table th:nth-child(4) {
    width: 14%;
}

.student-accounts-page .improved-student-account-table th:nth-child(5) {
    width: 15%;
}

.student-accounts-page .improved-student-account-table th:nth-child(6) {
    width: 15%;
}

.student-accounts-page .improved-student-account-table th:last-child {
    width: 125px;
}

.student-accounts-page .improved-student-account-table td:last-child {
    white-space: nowrap;
}

.student-accounts-page .student-account-actions {
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
}

.student-account-action-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.student-account-batch-limit {
    margin-left: auto;
    text-align: right;
}

@media (max-width: 1180px) {
    .student-accounts-page .student-account-filter-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .student-accounts-page .student-account-filter-grid .span-2 {
        grid-column: span 2;
    }

    .users-page .access-profile-header {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
}

@media (max-width: 900px) {
    .users-page .access-profile-actions {
        grid-template-columns: 1fr;
    }

    .student-accounts-page .student-account-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .student-accounts-page .student-account-filter-grid .span-2 {
        grid-column: span 2;
    }
}

@media (max-width: 760px) {

    .users-page .users-filter-grid,
    .users-page .users-filter-grid .span-2,
    .student-accounts-page .student-account-filter-grid,
    .student-accounts-page .student-account-filter-grid .span-2 {
        grid-template-columns: 1fr;
        grid-column: auto;
    }

    .users-page .administration-filter-panel .button-row,
    .student-accounts-page .administration-filter-panel .button-row {
        justify-content: stretch;
    }

    .users-page .administration-filter-panel .button-row .button,
    .student-accounts-page .administration-filter-panel .button-row .button {
        flex: 1 1 0;
    }

    .users-page .access-profile-actions .inline-form {
        grid-template-columns: 1fr;
    }

    .student-accounts-page .student-account-actions,
    .student-account-action-buttons {
        align-items: stretch;
        flex-direction: column;
    }

    .student-account-action-buttons .button {
        width: 100%;
    }

    .student-account-batch-limit {
        margin-left: 0;
        text-align: left;
    }
}


/* Audit Log: separated actor views, focused history, and proportional filters */
.audit-page .page-header {
    margin-bottom: 14px;
}

.audit-scope-tabs {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    margin-bottom: 8px;
    background: #eef3f9;
    border: 1px solid var(--line);
    border-radius: 12px;
}

.audit-scope-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 15px;
    border-radius: 9px;
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.audit-scope-tab:hover,
.audit-scope-tab:focus-visible {
    color: var(--primary-blue-dark);
    background: rgba(255, 255, 255, 0.72);
    outline: none;
}

.audit-scope-tab.is-active {
    color: var(--primary-blue-dark);
    background: var(--surface);
    box-shadow: 0 1px 4px rgba(24, 58, 96, 0.12);
}

.audit-scope-note {
    margin: 0 0 16px;
    max-width: 860px;
    font-size: 0.9rem;
    line-height: 1.55;
}

.audit-focused-actor {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
    padding: 12px 14px;
    background: #f7faff;
    border: 1px solid #d7e4f2;
    border-radius: 12px;
}

.audit-focused-actor>div {
    min-width: 0;
}

.audit-focused-actor span,
.audit-focused-actor small {
    display: block;
    color: var(--muted);
}

.audit-focused-actor span {
    margin-bottom: 2px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.audit-focused-actor strong {
    display: block;
    color: var(--ink);
    font-size: 1rem;
}

.audit-focused-actor small {
    margin-top: 2px;
    font-size: 0.82rem;
}

.audit-page .audit-status-strip {
    gap: 14px;
    margin-bottom: 16px;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.audit-page .audit-status-strip>div {
    min-height: 72px;
    padding: 15px 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.audit-page .audit-status-strip>div:last-child {
    border-right: 1px solid var(--line);
}

.audit-page .audit-status-strip span {
    letter-spacing: 0.02em;
}

.audit-page .audit-filter-panel {
    margin-bottom: 16px;
}

.audit-page .audit-filter-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 14px;
}

.audit-page .audit-search-field {
    grid-column: span 6;
}

.audit-page .audit-module-field,
.audit-page .audit-action-field {
    grid-column: span 3;
}

.audit-page .audit-date-field {
    grid-column: span 3;
}

.audit-page .audit-rows-field {
    grid-column: span 2;
}

.audit-page .audit-filter-actions {
    justify-content: flex-end;
    margin-top: 2px;
}

.audit-page .audit-list-panel {
    padding-top: 16px;
}

.audit-list-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.audit-list-heading strong,
.audit-list-heading span {
    display: block;
}

.audit-list-heading strong {
    color: var(--ink);
    font-size: 0.98rem;
}

.audit-list-heading span {
    margin-top: 3px;
    font-size: 0.82rem;
}

.audit-page .audit-log-table {
    min-width: 980px;
    table-layout: fixed;
}

.audit-page .audit-log-table th:nth-child(1) {
    width: 16%;
}

.audit-page .audit-log-table th:nth-child(2) {
    width: 21%;
}

.audit-page .audit-log-table th:nth-child(3) {
    width: 25%;
}

.audit-page .audit-log-table th:nth-child(4) {
    width: 9%;
}

.audit-page .audit-log-table th:nth-child(5) {
    width: 13%;
}

.audit-page .audit-log-table th:nth-child(6) {
    width: 16%;
}

.audit-page .audit-log-table td:nth-child(4),
.audit-page .audit-log-table td:nth-child(5) {
    white-space: nowrap;
}

.audit-actor-link {
    color: var(--primary-blue-dark);
    font-weight: 750;
    text-decoration: none;
}

.audit-actor-link:hover,
.audit-actor-link:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.audit-page .audit-detail-action-cell {
    white-space: normal;
}

@media (max-width: 1120px) {
    .audit-page .audit-filter-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .audit-page .audit-search-field {
        grid-column: span 6;
    }

    .audit-page .audit-module-field,
    .audit-page .audit-action-field,
    .audit-page .audit-date-field {
        grid-column: span 2;
    }

    .audit-page .audit-rows-field {
        grid-column: span 2;
    }
}

@media (max-width: 760px) {
    .audit-scope-tabs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .audit-scope-tab {
        padding-inline: 10px;
        text-align: center;
    }

    .audit-focused-actor {
        align-items: stretch;
        flex-direction: column;
    }

    .audit-focused-actor .button {
        width: 100%;
    }

    .audit-page .audit-status-strip {
        gap: 10px;
    }

    .audit-page .audit-status-strip>div,
    .audit-page .audit-status-strip>div:last-child {
        min-height: 62px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
    }

    .audit-page .audit-filter-grid,
    .audit-page .audit-search-field,
    .audit-page .audit-module-field,
    .audit-page .audit-action-field,
    .audit-page .audit-date-field,
    .audit-page .audit-rows-field {
        grid-template-columns: 1fr;
        grid-column: auto;
    }

    .audit-page .audit-filter-actions {
        justify-content: stretch;
    }

    .audit-page .audit-filter-actions .button {
        flex: 1 1 0;
    }

    .audit-page .audit-log-table {
        min-width: 880px;
    }
}

/* Backup & Restore UI cleanup: proportional layout without changing backup behavior */
.backup-page .page-header {
    margin-bottom: 18px;
}

.backup-page .backup-status-strip {
    gap: 12px;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.backup-page .backup-status-strip>div {
    min-height: 76px;
    padding: 16px 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.backup-page .backup-status-strip>div:last-child {
    border-right: 1px solid var(--line);
}

.backup-page .backup-status-strip span {
    letter-spacing: 0.02em;
}

.backup-page .backup-action-grid {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 16px;
    align-items: stretch;
}

.backup-page .backup-action-grid .panel {
    min-height: 174px;
    display: flex;
    flex-direction: column;
}

.backup-page .backup-action-grid .panel-header {
    margin-bottom: 12px;
}

.backup-page .backup-create-form,
.backup-page .backup-download-panel .stacked-form,
.backup-page .backup-download-panel .academic-empty-state {
    margin-top: auto;
}

.backup-page .backup-create-form {
    min-height: 76px;
    display: flex;
    align-items: flex-end;
}

.backup-page .backup-create-form .button,
.backup-page .backup-download-panel .button {
    width: min(184px, 100%);
    min-width: 0;
}

.backup-page .backup-download-panel .stacked-form {
    width: 100%;
    gap: 12px;
}

.backup-page .backup-download-panel .field {
    margin-bottom: 0;
}

.backup-page .backup-download-panel .button-row {
    justify-content: flex-start;
}

.backup-page .backup-restore-panel .panel-header {
    margin-bottom: 16px;
}

.backup-page .backup-restore-panel .panel-header p {
    max-width: 760px;
}

.backup-page .backup-restore-form {
    grid-template-columns: minmax(340px, 1.55fr) minmax(220px, 0.8fr) minmax(156px, 180px);
    gap: 14px;
}

.backup-page .backup-restore-form .button {
    width: 100%;
}

.backup-page .backup-filter-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 14px;
}

.backup-page .backup-filter-grid .backup-search-field {
    grid-column: span 7;
}

.backup-page .backup-filter-grid .backup-operation-field,
.backup-page .backup-filter-grid .backup-status-field {
    grid-column: span 2;
}

.backup-page .backup-filter-grid .backup-rows-field {
    grid-column: span 1;
}

.backup-page .backup-filter-actions {
    justify-content: flex-end;
    margin-top: 2px;
}

.backup-page .administration-list-panel {
    padding-top: 18px;
}

.backup-page .backup-history-table {
    min-width: 680px;
    table-layout: fixed;
}

.backup-page .backup-history-table th:nth-child(1) {
    width: 48%;
    min-width: 0;
}

.backup-page .backup-history-table th:nth-child(2) {
    width: 16%;
}

.backup-page .backup-history-table th:nth-child(3) {
    width: 21%;
}

.backup-page .backup-history-table th:nth-child(4) {
    width: 15%;
    text-align: right;
}

.backup-page .backup-history-table td:nth-child(2),
.backup-page .backup-history-table td:nth-child(3),
.backup-page .backup-history-table td:nth-child(4) {
    white-space: nowrap;
}

.backup-history-row {
    cursor: pointer;
}

.backup-history-row:hover td,
.backup-history-row:focus td {
    background: var(--primary-blue-soft);
}

.backup-history-row:focus {
    outline: 2px solid var(--primary-blue);
    outline-offset: -2px;
}

.backup-file-name {
    display: block;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.backup-history-details-cell {
    text-align: right;
}

.backup-modal-file {
    padding: 14px 16px;
    border-left: 1px solid var(--line);
    background: var(--primary-blue-soft);
    color: var(--ink);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.backup-detail-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.backup-modal-notes {
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.backup-modal-notes>span {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.backup-modal-notes p {
    margin: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 1120px) {
    .backup-page .backup-action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .backup-page .backup-filter-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .backup-page .backup-filter-grid .backup-search-field {
        grid-column: span 3;
    }

    .backup-page .backup-filter-grid .backup-operation-field,
    .backup-page .backup-filter-grid .backup-status-field,
    .backup-page .backup-filter-grid .backup-rows-field {
        grid-column: span 1;
    }

    .backup-page .backup-restore-form {
        grid-template-columns: minmax(0, 1.2fr) minmax(210px, 0.8fr);
    }

    .backup-page .backup-restore-form .button {
        grid-column: span 2;
        width: auto;
        justify-self: end;
        min-width: 180px;
    }
}

@media (max-width: 760px) {
    .backup-page .backup-status-strip {
        gap: 10px;
    }

    .backup-page .backup-status-strip>div,
    .backup-page .backup-status-strip>div:last-child {
        min-height: 62px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
    }

    .backup-page .backup-action-grid .panel {
        min-height: 0;
    }

    .backup-page .backup-create-form {
        min-height: 0;
    }

    .backup-page .backup-create-form .button,
    .backup-page .backup-download-panel .button {
        width: 100%;
    }

    .backup-page .backup-filter-grid,
    .backup-page .backup-filter-grid .backup-search-field,
    .backup-page .backup-filter-grid .backup-operation-field,
    .backup-page .backup-filter-grid .backup-status-field,
    .backup-page .backup-filter-grid .backup-rows-field {
        grid-template-columns: 1fr;
        grid-column: auto;
    }

    .backup-page .backup-filter-actions {
        justify-content: stretch;
    }

    .backup-page .backup-filter-actions .button {
        flex: 1 1 0;
    }

    .backup-page .backup-restore-form .button {
        width: 100%;
        min-width: 0;
        justify-self: stretch;
    }

    .backup-page .backup-history-table {
        min-width: 620px;
    }

    .backup-detail-meta {
        grid-template-columns: 1fr;
    }
}

/* School year recovery and natural section order */
.school-year-rollback-box {
    margin-top: 14px;
    padding: 12px;
    border: 1px solid var(--school-yellow);
    border-radius: var(--radius);
    background: var(--soft-yellow);
}

.school-year-rollback-box p {
    margin: 5px 0 10px;
    color: var(--muted);
}

.school-year-page>#year-review {
    order: 4;
}

.school-year-page>#student-registration {
    order: 5;
}

/* Settings: focused configuration layout */
.settings-page .settings-status-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.settings-page .settings-status-card {
    min-width: 0;
    min-height: 118px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.settings-page .settings-status-card>span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.settings-page .settings-status-card>strong {
    color: var(--primary-blue-dark);
    font-size: 20px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.settings-page .settings-status-card>small {
    color: var(--muted);
    line-height: 1.35;
}

.settings-page .settings-status-card .text-link {
    align-self: flex-start;
    margin-top: 2px;
}

.settings-page .settings-configuration-panel {
    padding: 22px 24px;
}

.settings-page .settings-grid-balanced {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-page .settings-grid-single {
    grid-template-columns: minmax(0, 1fr);
}

.settings-page .settings-grid-single .field {
    max-width: 760px;
}

.settings-page .settings-security-grid .field {
    max-width: 360px;
}

.settings-page .settings-input-with-unit {
    display: grid;
    grid-template-columns: minmax(120px, 180px) auto;
    align-items: center;
    gap: 10px;
}

.settings-page .settings-input-with-unit>span {
    color: var(--muted);
    font-weight: 700;
}


.settings-page .settings-deployment-warning {
    color: var(--warning-text, #8a5a00);
    font-weight: 700;
}

.settings-page .settings-save-row {
    justify-content: flex-end;
    padding-top: 4px;
}

.settings-page .settings-save-row .button {
    min-width: 150px;
}

@media (max-width: 1000px) {
    .settings-page .settings-status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {

    .settings-page .settings-status-grid,
    .settings-page .settings-grid-balanced {
        grid-template-columns: 1fr;
    }

    .settings-page .settings-configuration-panel {
        padding: 18px;
    }

    .settings-page .settings-grid-single .field,
    .settings-page .settings-security-grid .field {
        max-width: none;
    }

    .settings-page .settings-input-with-unit {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .settings-page .settings-save-row .button {
        width: 100%;
    }
}

/* Student / staff shared login entry: scoped visual refinement only. */
.system-login-panel {
    width: min(900px, 100%);
    grid-template-columns: minmax(0, 1.02fr) minmax(340px, 0.98fr);
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.system-login-panel .system-login-copy,
.system-login-panel .system-login-card {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.system-login-copy {
    min-height: 500px;
    padding: 42px 46px;
    align-items: center;
    text-align: center;
    background:
        linear-gradient(145deg, rgba(21, 84, 168, 0.055), rgba(245, 197, 66, 0.09)),
        var(--surface);
}

.system-login-brand {
    display: grid;
    justify-items: center;
    gap: 24px;
    width: 100%;
}

.system-login-logo {
    width: 176px;
    height: 176px;
    display: block;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid rgba(21, 84, 168, 0.14);
    box-shadow: 0 12px 30px rgba(14, 55, 116, 0.12);
}

.system-login-identity {
    max-width: 390px;
}

.system-login-school {
    display: block;
    color: var(--primary-blue-dark);
    font-size: 13px;
    line-height: 1.45;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.035em;
}

.system-login-identity strong {
    display: block;
    margin-top: 12px;
    color: var(--primary-blue-dark);
    font-size: 34px;
    line-height: 1;
    letter-spacing: 0.02em;
}

.system-login-identity p {
    max-width: 350px;
    margin: 10px auto 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.55;
}

.system-login-card {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 46px 42px;
    border-left: 1px solid var(--line) !important;
}

.system-login-heading {
    margin-bottom: 24px;
}

.system-login-heading h1 {
    margin: 0;
    color: var(--ink);
    font-size: 28px;
    line-height: 1.15;
}

.system-login-card>.button+.button {
    margin-top: 10px;
}

@media (max-width: 900px) {
    .system-login-panel {
        width: min(560px, 100%);
        grid-template-columns: 1fr;
    }

    .system-login-copy {
        min-height: auto;
        padding: 32px 32px 28px;
    }

    .system-login-brand {
        gap: 18px;
    }

    .system-login-logo {
        width: 132px;
        height: 132px;
    }

    .system-login-identity strong {
        font-size: 30px;
    }

    .system-login-card {
        padding: 32px;
        border-left: 0 !important;
        border-top: 1px solid var(--line) !important;
    }
}

@media (max-width: 620px) {
    .system-login-panel {
        border-radius: 10px;
    }

    .system-login-copy,
    .system-login-card {
        padding: 24px 20px;
    }

    .system-login-logo {
        width: 112px;
        height: 112px;
    }

    .system-login-school {
        font-size: 12px;
    }

    .system-login-identity strong {
        margin-top: 9px;
        font-size: 27px;
    }

    .system-login-identity p {
        margin-top: 8px;
        font-size: 13px;
    }

    .system-login-heading {
        margin-bottom: 20px;
    }

    .system-login-heading h1 {
        font-size: 25px;
    }
}

/* --------------------------------------------------------------------------
   Discipline intervention forms
   -------------------------------------------------------------------------- */
.discipline-intervention-panel {
    display: grid;
    gap: 20px;
}

.discipline-intervention-context {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(180px, .75fr);
    gap: 12px;
}

.discipline-intervention-context>div {
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
}

.discipline-intervention-context span,
.discipline-intervention-context small {
    display: block;
    color: var(--muted);
}

.discipline-intervention-context span {
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.discipline-intervention-context strong {
    display: block;
    line-height: 1.35;
}

.discipline-intervention-context small {
    margin-top: 5px;
    line-height: 1.45;
}

.discipline-intervention-forms {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

.discipline-intervention-form,
.counseling-create-form {
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
}

.discipline-form-heading h3 {
    margin: 0;
    font-size: 17px;
}

.discipline-form-heading p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.violation-followup-summary {
    margin-bottom: 7px;
    white-space: normal;
}

.violation-followup-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.counseling-readonly-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.counseling-readonly-details>div {
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
}

.counseling-readonly-details span {
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.counseling-readonly-details p {
    margin: 0;
}

@media (max-width: 980px) {
    .discipline-intervention-context {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .discipline-intervention-existing {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {

    .discipline-intervention-context,
    .discipline-intervention-forms,
    .counseling-readonly-details {
        grid-template-columns: 1fr;
    }

    .discipline-intervention-existing,
    .counseling-readonly-details .span-2 {
        grid-column: auto;
    }
}

.discipline-existing-intervention {
    display: grid;
    gap: 14px;
    align-content: start;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
}

.discipline-existing-intervention .button {
    justify-self: start;
}

/* Connected List of Misbehavior */
.misbehavior-table {
    min-width: 2060px;
}

.misbehavior-table th:nth-child(1),
.misbehavior-table td:nth-child(1) {
    width: 52px;
    text-align: center;
}

.misbehavior-table th:nth-child(2),
.misbehavior-table td:nth-child(2) {
    width: 180px;
}

.misbehavior-table th:nth-child(3),
.misbehavior-table td:nth-child(3) {
    width: 80px;
}

.misbehavior-table th:nth-child(4),
.misbehavior-table td:nth-child(4) {
    width: 145px;
}

.misbehavior-table th:nth-child(5),
.misbehavior-table td:nth-child(5) {
    width: 120px;
}

.misbehavior-table th:nth-child(6),
.misbehavior-table td:nth-child(6) {
    width: 165px;
}

.misbehavior-table th:nth-child(7),
.misbehavior-table td:nth-child(7) {
    width: 105px;
}

.misbehavior-table th:nth-child(8),
.misbehavior-table td:nth-child(8) {
    width: 180px;
}

.misbehavior-table th:nth-child(9),
.misbehavior-table td:nth-child(9) {
    width: 110px;
}

.misbehavior-table th:nth-child(10),
.misbehavior-table td:nth-child(10) {
    width: 210px;
}

.misbehavior-table th:nth-child(11),
.misbehavior-table td:nth-child(11) {
    width: 190px;
}

.misbehavior-table th:nth-child(12),
.misbehavior-table td:nth-child(12) {
    width: 150px;
}

.misbehavior-table th:nth-child(13),
.misbehavior-table td:nth-child(13) {
    width: 160px;
}

.misbehavior-table th:nth-child(14),
.misbehavior-table td:nth-child(14) {
    width: 90px;
    text-align: center;
}

.misbehavior-table thead th {
    vertical-align: middle;
    white-space: normal;
}

.misbehavior-student-link {
    color: var(--ink);
    text-decoration: none;
}

.misbehavior-student-link:hover,
.misbehavior-student-link:focus-visible {
    color: var(--primary-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.misbehavior-source-note {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 11px;
}

.misbehavior-inline-edit {
    margin-top: 10px;
}

.misbehavior-occurrence {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 11px;
}

.misbehavior-incident-details {
    margin-top: 8px;
}

.misbehavior-incident-details summary {
    color: var(--primary-blue-dark);
    cursor: pointer;
    font-size: 11px;
    font-weight: 750;
}

.misbehavior-incident-details p {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.misbehavior-edit-form {
    width: 100%;
}

.misbehavior-edit-modal-panel {
    width: min(940px, 100%);
}

.misbehavior-edit-modal-panel .modal-body {
    scroll-behavior: smooth;
}

.misbehavior-edit-context {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bg);
}

.misbehavior-edit-context span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.misbehavior-edit-section {
    margin: 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.misbehavior-edit-section legend {
    padding: 0 6px;
    color: var(--ink);
    font-weight: 800;
}

.misbehavior-edit-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.misbehavior-edit-grid .span-3 {
    grid-column: span 3;
}

.misbehavior-section-toggle {
    margin-bottom: 14px;
}

.misbehavior-subsection {
    margin: 0;
    padding: 0;
    border: 0;
}

.misbehavior-subsection[disabled] {
    opacity: 0.55;
}

.suspension-toggle-row {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.suspension-fields {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg);
}

.misbehavior-linked-intervention {
    margin-top: 12px;
    padding: 12px 14px;
    display: grid;
    gap: 4px;
    border-left: 1px solid var(--line);
    background: var(--primary-blue-soft);
    color: var(--muted);
    font-size: 12px;
}

.misbehavior-linked-intervention strong {
    color: var(--ink);
}

.misbehavior-edit-policy-note {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
}

.misbehavior-edit-actions {
    position: sticky;
    z-index: 4;
    bottom: -18px;
    justify-content: flex-end;
    margin: 0 -18px -18px;
    padding: 14px 18px;
    border-top: 1px solid var(--line);
    background: var(--surface);
    box-shadow: 0 -8px 18px rgba(23, 52, 95, 0.06);
}

/* Record tables stay compact until a page contains more than 20 actual rows. */
.table-wrap.record-list-scroll-active {
    max-height: min(72vh, 920px);
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.table-wrap.record-list-scroll-active>.data-table>thead {
    position: sticky;
    z-index: 5;
    top: 0;
}

.table-wrap.record-list-scroll-active>.data-table.has-sticky-action th:last-child,
.table-wrap.record-list-scroll-active>.data-table.has-sticky-action td:last-child {
    position: sticky;
    z-index: 3;
    right: 0;
    background: var(--surface);
    box-shadow: -8px 0 12px rgba(23, 52, 95, 0.06);
}

.table-wrap.record-list-scroll-active>.data-table.has-sticky-action thead th:last-child {
    z-index: 7;
}

.violation-additional-details {
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
}

.violation-additional-details>summary {
    padding: 12px 14px;
    cursor: pointer;
    color: var(--ink);
    font-weight: 750;
}

.violation-additional-details[open]>summary {
    border-bottom: 1px solid var(--line);
}

.violation-additional-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 14px;
}

@media (max-width: 760px) {

    .misbehavior-edit-grid,
    .violation-additional-grid {
        grid-template-columns: 1fr;
    }

    .misbehavior-edit-grid .span-2,
    .misbehavior-edit-grid .span-3 {
        grid-column: auto;
    }

    .misbehavior-edit-actions {
        align-items: stretch;
    }

    .misbehavior-edit-actions .button {
        width: 100%;
    }
}

@media print {
    .table-wrap.record-list-scroll-active {
        max-height: none;
        overflow: visible;
    }

    .table-wrap.record-list-scroll-active>.data-table>thead,
    .table-wrap.record-list-scroll-active>.data-table.has-sticky-action th:last-child,
    .table-wrap.record-list-scroll-active>.data-table.has-sticky-action td:last-child {
        position: static;
        box-shadow: none;
    }
}

/* Notification inbox behavior */
.side-link .nav-notification-count {
    min-width: 22px;
    height: 22px;
    margin-left: auto;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--school-yellow);
    color: #17345f;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

.notification-read-form {
    margin: 0;
}

.notification-read-trigger {
    appearance: none;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--primary-blue-dark);
    font: inherit;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
}

.notification-read-trigger:hover {
    text-decoration: underline;
}

.notification-read-trigger:focus-visible {
    outline: 2px solid var(--primary-blue);
    outline-offset: 3px;
    border-radius: 3px;
}

/* Student notification inbox */
.student-notifications-page .panel-header form {
    margin: 0;
}

.student-notification-list {
    overflow-x: hidden;
}

.student-notification-list.is-scrollable {
    max-height: 660px;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.student-notification-list.is-scrollable thead {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surface);
}

.student-notification-table {
    display: block;
    width: 100%;
    min-width: 0;
}

.student-notification-table thead,
.student-notification-table tbody {
    display: block;
    width: 100%;
}

.student-notification-table tr {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 170px;
    border-bottom: 1px solid var(--line);
}

.student-notification-table th,
.student-notification-table td {
    min-width: 0;
    padding: 14px 20px;
    border-bottom: 0;
}

.student-notification-table th:last-child,
.student-notification-table td:last-child {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-align: right;
    padding-right: 24px;
}

.student-notification-table .empty-row {
    grid-column: 1 / -1;
}

.student-notification-row {
    cursor: pointer;
    transition: background-color 150ms ease;
}

.student-notification-row:hover,
.student-notification-row:focus-visible {
    background: var(--primary-blue-soft);
}

.student-notification-row:focus-visible {
    outline: 2px solid var(--primary-blue);
    outline-offset: -2px;
}

.student-notification-row.is-unread {
    box-shadow: none;
}

.student-notification-type {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 13px;
}

.student-notification-modal .modal-panel {
    width: min(620px, 100%);
}

.student-notification-modal .modal-header,
.student-notification-modal .modal-body {
    padding-left: 20px;
    padding-right: 20px;
}

.student-notification-modal .modal-header small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
}

.student-notification-modal-body {
    display: grid;
    gap: 20px;
    padding-bottom: 22px;
}

.student-notification-close[data-tooltip]::after {
    top: calc(100% + 0.5rem);
    right: 0;
    bottom: auto;
    left: auto;
    transform: translate(0, -0.2rem);
}

.student-notification-close[data-tooltip]:hover::after,
.student-notification-close[data-tooltip]:focus-visible::after {
    transform: translate(0, 0);
}

.student-notification-detail-message {
    padding: 16px;
    border-left: 1px solid var(--line);
    background: var(--primary-blue-soft);
    line-height: 1.65;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.student-notification-detail-meta {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(120px, 0.45fr);
    gap: 14px;
}

.student-notification-detail-meta>div {
    min-width: 0;
}

.student-notification-detail-meta dt {
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.student-notification-detail-meta dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.office-notification-table,
.office-sms-table {
    display: block;
    width: 100%;
    min-width: 0;
}

.office-notification-table thead,
.office-notification-table tbody,
.office-sms-table thead,
.office-sms-table tbody {
    display: block;
    width: 100%;
}

.office-notification-table tr,
.office-sms-table tr {
    width: 100%;
    display: grid;
    border-bottom: 1px solid var(--line);
}

.office-notification-table tr {
    grid-template-columns: minmax(150px, 0.55fr) minmax(260px, 1.45fr) 140px;
}

.office-sms-table tr {
    grid-template-columns: minmax(220px, 1fr) 170px 190px;
}

.office-notification-table th,
.office-notification-table td,
.office-sms-table th,
.office-sms-table td {
    width: auto !important;
    min-width: 0;
    padding: 14px 20px;
    border-bottom: 0;
}

.office-notification-table th:last-child,
.office-notification-table td:last-child,
.office-sms-table th:nth-child(n + 2),
.office-sms-table td:nth-child(n + 2) {
    display: flex;
    align-items: center;
}

.office-notification-table th:last-child,
.office-notification-table td:last-child {
    justify-content: flex-end;
    padding-right: 24px;
    text-align: right;
}

.office-notification-table .empty-row,
.office-sms-table .empty-row {
    grid-column: 1 / -1;
}

.office-notification-detail-meta {
    grid-template-columns: minmax(0, 1fr) minmax(180px, 0.75fr) minmax(110px, 0.4fr);
}

.office-sms-detail-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.office-sms-error-detail {
    grid-column: 1 / -1;
}

.office-sms-error-detail dd {
    color: var(--danger);
}

.student-notification-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 2px;
}

.student-notification-modal-actions form {
    margin: 0;
}

@media (max-width: 640px) {
    .student-notifications-page .panel-header {
        align-items: stretch;
    }

    .student-notifications-page .panel-header form,
    .student-notifications-page .panel-header form .button {
        width: 100%;
    }

    .student-notification-table tr {
        grid-template-columns: minmax(0, 1fr) 105px;
    }

    .student-notification-table th,
    .student-notification-table td {
        padding: 12px 14px;
    }

    .student-notification-table th:last-child,
    .student-notification-table td:last-child {
        padding-right: 14px;
    }

    .student-notification-detail-meta {
        grid-template-columns: 1fr;
    }

    .office-notification-table tr,
    .office-sms-table tr {
        grid-template-columns: minmax(0, 1fr) 110px;
    }

    .office-notification-table th:first-child,
    .office-notification-table td:first-child {
        display: none;
    }

    .office-sms-table th:last-child,
    .office-sms-table td:last-child {
        display: none;
    }

    .student-notification-modal-actions,
    .student-notification-modal-actions .button,
    .student-notification-modal-actions form {
        width: 100%;
    }
}

/* Excel Import class-assignment workflow: class context comes from Academic Setup. */
.excel-import-page .import-upload-form {
    grid-template-columns: 1fr;
    gap: 16px;
}

.excel-import-page .import-class-selector {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fbfcfe;
}

.excel-import-page .import-class-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}


.excel-import-page .import-section-field {
    max-width: 760px;
}

.excel-import-page .import-class-summary {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.excel-import-page .import-class-summary>div {
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.excel-import-page .import-class-summary span,
.excel-import-page .import-class-summary strong {
    display: block;
}

.excel-import-page .import-class-summary span {
    margin-bottom: 3px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.excel-import-page .import-class-summary strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.excel-import-page .import-class-note {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.excel-import-page .import-file-control {
    min-height: 118px;
}

.excel-import-page .import-upload-submit-row {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
}

.excel-import-page .import-upload-submit-row>span {
    margin-right: auto;
    color: var(--danger);
    font-size: 12px;
    font-weight: 600;
}

.excel-import-page .import-upload-submit-row .import-validate-button {
    width: auto;
    min-width: 150px;
}

.excel-import-page .import-column-groups-clean {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.excel-import-page .import-column-groups-clean .import-system-columns-note {
    grid-column: 1 / -1;
    background: #fbfcfe;
}

.excel-import-page .import-target-summary {
    margin-bottom: 18px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fbfcfe;
}

.excel-import-page .import-target-class {
    min-width: 0;
}

.excel-import-page .import-target-class>span,
.excel-import-page .import-target-class>strong,
.excel-import-page .import-target-class>small {
    display: block;
}

.excel-import-page .import-target-class>span {
    margin-bottom: 3px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.excel-import-page .import-target-class>strong {
    font-size: 15px;
}

.excel-import-page .import-target-class>small {
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
}

.excel-import-page .import-preview-counts {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(74px, auto));
    gap: 8px;
}

.excel-import-page .import-preview-counts>div {
    padding: 8px 12px;
    text-align: center;
    border-left: 1px solid var(--line);
}

.excel-import-page .import-preview-counts span,
.excel-import-page .import-preview-counts strong {
    display: block;
}

.excel-import-page .import-preview-counts span {
    color: var(--muted);
    font-size: 11px;
}

.excel-import-page .import-preview-counts strong {
    margin-top: 2px;
    font-size: 18px;
}

.excel-import-page .import-history-meta {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.4;
}

.side-link-standalone {
    margin-top: 8px;
}

.about-page {
    display: grid;
    gap: 20px;
    max-width: 980px;
    margin: 0 auto;
}

.about-intro {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    align-items: center;
    gap: 24px;
    padding: 28px;
    border-top: 1px solid var(--line);
}

.about-school-logo {
    display: block;
    width: 104px;
    height: 104px;
    object-fit: cover;
    border-radius: 50%;
}

.about-intro h1 {
    margin: 4px 0 8px;
    color: var(--primary-blue);
    font-size: 34px;
    letter-spacing: 0;
}

.about-system-title {
    max-width: 760px;
    margin: 0;
    color: var(--ink);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.55;
}

.about-section {
    padding: 26px 28px;
}

.about-section h2 {
    margin: 0 0 12px;
}

.about-section>p:last-child {
    margin-bottom: 0;
}

.about-developer-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0;
    padding: 0;
    list-style: none;
}

.about-developer-list li {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    border-left: 1px solid var(--line);
    color: var(--ink);
    font-weight: 700;
}

.about-affiliation {
    color: var(--muted);
    line-height: 1.6;
}

@media (max-width: 700px) {
    .about-intro {
        grid-template-columns: 1fr;
        justify-items: start;
        padding: 22px;
    }

    .about-developer-list {
        grid-template-columns: 1fr;
    }

    .about-section {
        padding: 22px;
    }
}

.excel-import-page .import-history-table {
    min-width: 650px;
    table-layout: fixed;
}

.excel-import-page .import-history-table th:nth-child(1) {
    width: 48%;
}

.excel-import-page .import-history-table th:nth-child(2) {
    width: 16%;
}

.excel-import-page .import-history-table th:nth-child(3) {
    width: 21%;
}

.excel-import-page .import-history-table th:nth-child(4) {
    width: 15%;
}

.excel-import-page .import-history-row {
    cursor: pointer;
}

.excel-import-page .import-history-row:hover td,
.excel-import-page .import-history-row:focus td {
    background: var(--primary-blue-soft);
}

.excel-import-page .import-history-row:focus {
    outline: 2px solid var(--primary-blue);
    outline-offset: -2px;
}

.excel-import-page .import-history-filename {
    display: block;
    overflow-wrap: anywhere;
}

.excel-import-page .import-history-details-cell {
    text-align: right;
}

.import-history-modal .import-history-file {
    overflow-wrap: anywhere;
    font-weight: 700;
}

.import-history-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 640px) {
    .import-history-detail-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .excel-import-page .import-class-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {

    .excel-import-page .import-class-fields,
    .excel-import-page .import-column-groups-clean {
        grid-template-columns: 1fr;
    }

    .excel-import-page .import-column-groups-clean .import-system-columns-note {
        grid-column: auto;
    }

    .excel-import-page .import-target-summary {
        align-items: stretch;
        flex-direction: column;
    }

    .excel-import-page .import-preview-counts {
        grid-template-columns: repeat(3, 1fr);
    }

    .excel-import-page .import-preview-counts>div:first-child {
        border-left: 0;
    }
}

@media (max-width: 620px) {
    .excel-import-page .import-class-summary {
        grid-template-columns: 1fr;
    }

    .excel-import-page .import-upload-submit-row {
        align-items: stretch;
        flex-direction: column;
    }

    .excel-import-page .import-upload-submit-row .import-validate-button {
        width: 100%;
        min-width: 0;
    }
}

/* Guided Sanction / Counseling recording workflow */
.intervention-launcher {
    display: grid;
    gap: 16px;
    padding: 20px;
}

.intervention-launcher-header {
    align-items: flex-start;
}

.intervention-launcher-header h2,
.counseling-action-card h3 {
    margin: 0;
}

.intervention-launcher-header p,
.counseling-action-card p {
    margin: 5px 0 0;
}

.intervention-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.intervention-steps>span {
    min-height: 44px;
    padding: 9px 12px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-muted);
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.intervention-steps strong {
    width: 25px;
    height: 25px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 25px;
    border-radius: 50%;
    background: var(--primary-blue);
    color: #fff;
    font-size: 12px;
}

.intervention-picker-form {
    display: grid;
    grid-template-columns: minmax(220px, .8fr) minmax(320px, 1.3fr) auto;
    gap: 12px;
    align-items: end;
}

.intervention-picker-form .field {
    margin-bottom: 0;
}

.intervention-picker-form select,
.intervention-picker-form .button {
    min-height: 44px;
}

.counseling-case-overview {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.counseling-case-overview>div {
    padding: 12px 14px;
    display: grid;
    gap: 4px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-muted);
}

.counseling-case-overview span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.counseling-case-overview strong {
    color: var(--ink);
    font-size: 14px;
}

.counseling-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.counseling-action-card {
    padding: 16px;
    display: grid;
    gap: 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
}

.counseling-action-card h3 {
    font-size: 16px;
}

.counseling-action-card p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.counseling-action-card .field,
.counseling-action-card .stacked-form {
    margin-bottom: 0;
}

.counseling-action-card .button {
    width: 100%;
}

.counseling-notes-form {
    margin-top: 14px;
    padding: 16px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: end;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-muted);
}

.counseling-notes-form .field {
    margin-bottom: 0;
}

.counseling-notes-form .field span small {
    margin-left: 5px;
    color: var(--muted);
    font-weight: 600;
}

.counseling-case-footer {
    margin-top: 14px;
    padding-top: 14px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    border-top: 1px solid var(--line);
}

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

.counseling-status-actions form {
    margin: 0;
}

@media (max-width: 900px) {

    .intervention-picker-form,
    .counseling-action-grid {
        grid-template-columns: 1fr;
    }

    .intervention-picker-form .button {
        width: 100%;
    }
}

@media (max-width: 760px) {

    .intervention-steps,
    .counseling-case-overview,
    .counseling-notes-form {
        grid-template-columns: 1fr;
    }

    .counseling-notes-form .button,
    .counseling-case-footer>.button {
        width: 100%;
    }

    .counseling-case-footer,
    .counseling-status-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .counseling-status-actions .button {
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   Sanctions & Suspensions — simplified first-time-user flow
   -------------------------------------------------------------------------- */
.sanctions-simple-page {
    gap: 16px;
}

.sanctions-simple-page .sanctions-page-header {
    padding-bottom: 2px;
}

.sanctions-simple-page .sanctions-entry-panel,
.sanctions-simple-page .sanctions-history-panel {
    padding: 0;
    overflow: hidden;
}

.sanctions-entry-panel>summary,
.sanctions-manage-record>summary,
.sanctions-action-choice>summary,
.sanctions-simple-history-summary {
    list-style: none;
    cursor: pointer;
}

.sanctions-entry-panel>summary::-webkit-details-marker,
.sanctions-manage-record>summary::-webkit-details-marker,
.sanctions-action-choice>summary::-webkit-details-marker,
.sanctions-simple-history-summary::-webkit-details-marker {
    display: none;
}

.sanctions-entry-summary {
    min-height: 70px;
    padding: 16px 18px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
}

.sanctions-entry-summary:hover,
.sanctions-entry-summary:focus-visible {
    background: var(--surface-muted);
    outline: none;
}

.sanctions-entry-icon {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border-radius: 9px;
    background: var(--primary-blue);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    font-weight: 700;
}

.sanctions-entry-summary strong,
.sanctions-entry-summary small {
    display: block;
}

.sanctions-entry-summary strong {
    color: var(--ink);
    font-size: 16px;
}

.sanctions-entry-summary small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
}

.sanctions-entry-chevron,
.sanctions-action-choice>summary>span:last-child {
    color: var(--primary-blue);
    font-size: 24px;
    line-height: 1;
    transition: transform .18s ease;
}

.sanctions-entry-panel[open] .sanctions-entry-chevron,
.sanctions-action-choice[open]>summary>span:last-child {
    transform: rotate(90deg);
}

.sanctions-entry-body {
    padding: 0 18px 18px;
    display: grid;
    gap: 16px;
    border-top: 1px solid var(--line);
}

.sanctions-picker-form {
    padding-top: 16px;
}

.sanctions-inline-alert {
    margin: 0;
}

.sanctions-selected-record {
    padding: 14px 16px;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(180px, .6fr);
    gap: 16px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-muted);
}

.sanctions-selected-main,
.sanctions-selected-meta {
    min-width: 0;
}

.sanctions-selected-main>strong,
.sanctions-selected-main>span,
.sanctions-selected-meta>span {
    display: block;
}

.sanctions-selected-main>strong {
    margin: 3px 0;
    color: var(--ink);
    font-size: 15px;
}

.sanctions-selected-main>span:last-child,
.sanctions-selected-meta>span {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.sanctions-record-kind {
    color: var(--primary-blue) !important;
    font-size: 11px !important;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.sanctions-selected-meta {
    display: grid;
    justify-items: end;
    gap: 3px;
    text-align: right;
}

.sanctions-action-choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.sanctions-action-choice {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    overflow: hidden;
}

.sanctions-action-choice>summary {
    min-height: 66px;
    padding: 14px 16px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
}

.sanctions-action-choice>summary:hover,
.sanctions-action-choice>summary:focus-visible {
    background: var(--surface-muted);
    outline: none;
}

.sanctions-action-choice>summary strong,
.sanctions-action-choice>summary small {
    display: block;
}

.sanctions-action-choice>summary strong {
    font-size: 15px;
    color: var(--ink);
}

.sanctions-action-choice>summary small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
}

.sanctions-action-form {
    padding: 16px;
    border-top: 1px solid var(--line);
    background: var(--surface-muted);
}

.sanctions-action-form>.stacked-form,
.sanctions-action-form.stacked-form {
    margin: 0;
}

.sanctions-action-form .compact-field {
    max-width: 220px;
}

.sanctions-existing-note {
    margin: 0;
}

.sanctions-current-panel {
    padding: 18px;
}

.sanctions-current-heading {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
}

.sanctions-current-heading h2 {
    margin: 0;
    font-size: 18px;
}

.sanctions-current-heading p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.sanctions-toolbar {
    margin-top: 14px;
    padding-top: 14px;
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(145px, .28fr) auto auto;
    gap: 9px;
    align-items: end;
    border-top: 1px solid var(--line);
}

.sanctions-toolbar .field {
    margin-bottom: 0;
}

.sanctions-toolbar input,
.sanctions-toolbar select,
.sanctions-toolbar .button {
    min-height: 40px;
}

.sanctions-record-list {
    margin-top: 14px;
    display: grid;
    gap: 8px;
}

.sanctions-record-card {
    min-width: 0;
    padding: 13px 14px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(92px, auto);
    gap: 12px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.sanctions-record-card:hover {
    border-color: rgba(22, 82, 151, .28);
    box-shadow: 0 5px 14px rgba(16, 42, 67, .05);
}

.sanctions-record-card:target {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(24, 93, 171, .09);
}

.sanctions-record-main {
    min-width: 0;
}

.sanctions-record-main>span,
.sanctions-record-main>strong,
.sanctions-student-link {
    display: block;
}

.sanctions-student-link {
    margin: 2px 0;
    color: var(--ink);
    font-weight: 800;
    text-decoration: none;
}

.sanctions-student-link:hover,
.sanctions-student-link:focus-visible {
    color: var(--primary-blue);
    text-decoration: underline;
    outline: none;
}

.sanctions-record-main>span:last-child {
    overflow: hidden;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sanctions-manage-record {
    position: relative;
}

.sanctions-manage-record>summary {
    min-height: 36px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--primary-blue);
    background: var(--surface);
    font-size: 13px;
    font-weight: 800;
}

.sanctions-manage-record>summary:hover,
.sanctions-manage-record>summary:focus-visible,
.sanctions-manage-record[open]>summary {
    border-color: rgba(22, 82, 151, .32);
    background: var(--surface-muted);
    outline: none;
}

.sanctions-manage-body {
    grid-column: 1 / -1;
    margin-top: 10px;
    padding: 12px 14px;
    display: grid;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface-muted);
}

.sanctions-manage-record[open] {
    grid-column: 1 / -1;
}

.sanctions-manage-record[open]>summary {
    margin-left: auto;
}

.sanctions-manage-body p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.sanctions-status-form {
    display: flex;
    align-items: end;
    gap: 8px;
    justify-content: flex-end;
}

.sanctions-status-form .field {
    width: 170px;
    margin-bottom: 0;
}

.sanctions-status-form .field span {
    font-size: 12px;
}

.sanctions-simple-history-summary {
    min-height: 64px !important;
    padding: 0 18px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto 18px !important;
    align-items: center;
    gap: 12px;
}

.sanctions-simple-history-summary>span:first-child strong,
.sanctions-simple-history-summary>span:first-child small {
    display: block;
}

.sanctions-simple-history-summary>span:first-child strong {
    color: var(--ink);
    font-size: 16px;
}

.sanctions-simple-history-summary>span:first-child small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
}

.sanctions-history-list {
    padding: 0 18px 18px;
    display: grid;
    gap: 7px;
    border-top: 1px solid var(--line);
}

.sanctions-history-row {
    padding: 11px 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(130px, auto);
    gap: 12px;
    align-items: center;
    border-bottom: 1px solid var(--line);
}

.sanctions-history-row:last-child {
    border-bottom: 0;
}

.sanctions-history-row>div>span {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
}

.sanctions-history-date {
    color: var(--muted);
    font-size: 12px;
    text-align: right;
}

@media (max-width: 900px) {

    .sanctions-action-choices,
    .sanctions-selected-record {
        grid-template-columns: 1fr;
    }

    .sanctions-selected-meta {
        justify-items: start;
        text-align: left;
    }

    .sanctions-record-card {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .sanctions-manage-record {
        grid-column: 1 / -1;
    }

    .sanctions-manage-record>summary {
        width: 100%;
    }
}

@media (max-width: 760px) {

    .sanctions-picker-form,
    .sanctions-toolbar,
    .sanctions-history-row {
        grid-template-columns: 1fr;
    }

    .sanctions-toolbar .button,
    .sanctions-picker-form .button,
    .sanctions-status-form .button,
    .sanctions-status-form .field {
        width: 100%;
    }

    .sanctions-record-card {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
    }

    .sanctions-record-main>span:last-child {
        white-space: normal;
    }

    .sanctions-status-form {
        display: grid;
        grid-template-columns: 1fr;
    }

    .sanctions-history-date {
        text-align: left;
    }
}

@media (max-width: 520px) {
    .sanctions-entry-summary {
        grid-template-columns: auto minmax(0, 1fr) auto;
        padding: 14px;
    }

    .sanctions-entry-body,
    .sanctions-history-list {
        padding-left: 14px;
        padding-right: 14px;
    }

    .sanctions-current-panel {
        padding: 14px;
    }

    .sanctions-current-heading {
        align-items: center;
    }

    .sanctions-record-card {
        grid-template-columns: 1fr;
    }

    .sanctions-record-card>.badge {
        justify-self: start;
    }
}

/* Counseling simplified workflow */
.counseling-simple-page {
    gap: 16px;
}

.counseling-entry-panel,
.counseling-simple-history {
    overflow: hidden;
}

.counseling-entry-summary,
.counseling-simple-history-summary {
    min-height: 66px;
    padding: 0 18px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    cursor: pointer;
    list-style: none;
}

.counseling-simple-history-summary {
    grid-template-columns: minmax(0, 1fr) auto 18px;
}

.counseling-entry-summary::-webkit-details-marker,
.counseling-simple-history-summary::-webkit-details-marker,
.counseling-manage-record>summary::-webkit-details-marker,
.counseling-manage-action>summary::-webkit-details-marker {
    display: none;
}

.counseling-entry-summary:hover,
.counseling-entry-summary:focus-visible,
.counseling-simple-history-summary:hover,
.counseling-simple-history-summary:focus-visible {
    background: var(--surface-muted);
    outline: none;
}

.counseling-entry-icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(24, 93, 171, .09);
    color: var(--primary-blue);
    font-size: 21px;
    line-height: 1;
}

.counseling-entry-summary strong,
.counseling-entry-summary small,
.counseling-simple-history-summary strong {
    display: block;
}

.counseling-entry-summary strong,
.counseling-simple-history-summary strong {
    color: var(--ink);
    font-size: 16px;
}

.counseling-entry-summary small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
}

.counseling-entry-chevron {
    color: var(--muted);
    font-size: 23px;
    line-height: 1;
    transition: transform .16s ease;
}

.counseling-entry-panel[open]>.counseling-entry-summary .counseling-entry-chevron,
.counseling-simple-history[open]>.counseling-simple-history-summary .counseling-entry-chevron {
    transform: rotate(90deg);
}

.counseling-entry-body {
    padding: 18px;
    border-top: 1px solid var(--line);
}

.counseling-picker-form {
    display: grid;
    grid-template-columns: minmax(220px, .8fr) minmax(280px, 1.2fr) auto;
    gap: 10px;
    align-items: end;
}

.counseling-picker-form .field {
    margin-bottom: 0;
}

.counseling-inline-alert {
    margin-top: 14px;
}

.counseling-selected-record {
    margin-top: 16px;
    padding: 13px 14px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-muted);
}

.counseling-selected-main,
.counseling-selected-meta {
    min-width: 0;
}

.counseling-selected-main>strong,
.counseling-selected-main>span,
.counseling-selected-meta>span,
.counseling-selected-meta>a {
    display: block;
}

.counseling-selected-main>strong {
    margin-bottom: 3px;
    color: var(--ink);
    font-size: 15px;
}

.counseling-selected-main>span,
.counseling-selected-meta>span {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.counseling-selected-meta {
    display: grid;
    justify-items: end;
    gap: 2px;
    text-align: right;
}

.counseling-simple-create-form,
.counseling-existing-intervention {
    margin-top: 14px;
}

.counseling-simple-create-form .workflow-form-actions {
    justify-content: flex-end;
}

.counseling-current-panel {
    padding: 18px;
}

.counseling-current-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.counseling-current-heading h2 {
    margin: 0;
    font-size: 18px;
}

.counseling-inline-count {
    margin-left: 5px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.counseling-toolbar {
    margin-top: 14px;
    padding-top: 14px;
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(150px, .3fr) auto auto;
    gap: 9px;
    align-items: end;
    border-top: 1px solid var(--line);
}

.counseling-toolbar .field {
    margin-bottom: 0;
}

.counseling-toolbar input,
.counseling-toolbar select,
.counseling-toolbar .button {
    min-height: 40px;
}

.counseling-simple-list {
    margin-top: 14px;
    display: grid;
    gap: 8px;
}

.counseling-simple-card {
    min-width: 0;
    padding: 13px 14px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(82px, auto);
    gap: 12px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.counseling-simple-card:hover {
    border-color: rgba(22, 82, 151, .28);
    box-shadow: 0 5px 14px rgba(16, 42, 67, .05);
}

.counseling-simple-card:target {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(24, 93, 171, .09);
}

.counseling-simple-main {
    min-width: 0;
}

.counseling-record-kind,
.counseling-simple-main>strong,
.counseling-simple-main>span,
.counseling-student-link {
    display: block;
}

.counseling-record-kind {
    color: var(--primary-blue) !important;
    font-size: 11px !important;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.counseling-student-link,
.counseling-simple-main>strong {
    margin: 2px 0;
    color: var(--ink);
    font-weight: 800;
    text-decoration: none;
}

.counseling-student-link:hover,
.counseling-student-link:focus-visible {
    color: var(--primary-blue);
    text-decoration: underline;
    outline: none;
}

.counseling-simple-main>span:not(.counseling-record-kind),
.counseling-simple-schedule {
    overflow: hidden;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.counseling-simple-schedule {
    margin-top: 2px;
    font-size: 12px !important;
}

.counseling-manage-record {
    position: relative;
}

.counseling-manage-record>summary {
    min-height: 36px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--primary-blue);
    background: var(--surface);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.counseling-manage-record>summary:hover,
.counseling-manage-record>summary:focus-visible,
.counseling-manage-record[open]>summary {
    border-color: rgba(22, 82, 151, .32);
    background: var(--surface-muted);
    outline: none;
}

.counseling-manage-record[open] {
    grid-column: 1 / -1;
}

.counseling-manage-record[open]>summary {
    margin-left: auto;
}

.counseling-manage-body {
    grid-column: 1 / -1;
    margin-top: 10px;
    padding: 12px 14px;
    display: grid;
    gap: 12px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface-muted);
}

.counseling-manage-overview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    color: var(--muted);
    font-size: 13px;
}

.counseling-manage-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.counseling-manage-action {
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface);
    overflow: hidden;
}

.counseling-manage-action>summary {
    min-height: 44px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.counseling-manage-action>summary::after {
    content: '›';
    color: var(--muted);
    font-size: 18px;
    transform: rotate(90deg);
    transition: transform .16s ease;
}

.counseling-manage-action[open]>summary::after {
    transform: rotate(-90deg);
}

.counseling-manage-action>summary:hover,
.counseling-manage-action>summary:focus-visible,
.counseling-manage-action[open]>summary {
    background: var(--surface-muted);
    outline: none;
}

.counseling-manage-action>form {
    margin: 0;
    padding: 12px;
    border-top: 1px solid var(--line);
}

.counseling-manage-action .field {
    margin-bottom: 10px;
}

.counseling-manage-action .button {
    width: 100%;
}

.counseling-simple-page .counseling-status-actions {
    padding-top: 10px;
    border-top: 1px solid var(--line);
    justify-content: flex-end;
}

.counseling-simple-history-summary {
    cursor: pointer;
}

.counseling-history-meta {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.counseling-history-list {
    padding: 0 18px 18px;
    display: grid;
    gap: 7px;
    border-top: 1px solid var(--line);
}

.counseling-history-row {
    padding: 11px 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(150px, auto);
    gap: 12px;
    align-items: center;
    border-bottom: 1px solid var(--line);
}

.counseling-history-row:last-child {
    border-bottom: 0;
}

.counseling-history-row>div>span {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
}

.counseling-history-date {
    display: grid;
    gap: 2px;
    color: var(--muted);
    font-size: 12px;
    text-align: right;
}

.counseling-history-date small {
    color: var(--muted);
    font-size: 11px;
}

@media (max-width: 980px) {
    .counseling-manage-actions {
        grid-template-columns: 1fr;
    }

    .counseling-selected-record {
        grid-template-columns: 1fr;
    }

    .counseling-selected-meta {
        justify-items: start;
        text-align: left;
    }
}

@media (max-width: 820px) {
    .counseling-simple-card {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .counseling-manage-record {
        grid-column: 1 / -1;
    }

    .counseling-manage-record>summary {
        width: 100%;
    }
}

@media (max-width: 760px) {

    .counseling-picker-form,
    .counseling-toolbar,
    .counseling-history-row {
        grid-template-columns: 1fr;
    }

    .counseling-picker-form .button,
    .counseling-toolbar .button {
        width: 100%;
    }

    .counseling-simple-main>span:not(.counseling-record-kind),
    .counseling-simple-schedule {
        white-space: normal;
    }

    .counseling-history-date {
        text-align: left;
    }

    .counseling-simple-page .counseling-status-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .counseling-simple-page .counseling-status-actions .button {
        width: 100%;
    }
}

@media (max-width: 520px) {

    .counseling-entry-summary,
    .counseling-simple-history-summary {
        padding-left: 14px;
        padding-right: 14px;
    }

    .counseling-entry-body,
    .counseling-history-list {
        padding-left: 14px;
        padding-right: 14px;
    }

    .counseling-current-panel {
        padding: 14px;
    }

    .counseling-simple-card {
        grid-template-columns: 1fr;
    }

    .counseling-simple-card>.badge {
        justify-self: start;
    }
}


/* Category D guidance alert */
.category-d-alert-backdrop {
    z-index: 80;
}

.category-d-alert-modal {
    border: 1px solid var(--line);
}

.category-d-alert-header {
    align-items: flex-start;
}

.category-d-alert-kicker {
    display: inline-block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.category-d-alert-student {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 10px;
}

.category-d-alert-student span {
    color: var(--muted);
    font-size: 13px;
}

.category-d-alert-actions {
    margin-top: 18px;
}

.category-d-alert-actions form {
    margin: 0;
}

.student-category-d-warning {
    display: flex;
    gap: 12px;
    margin: 0 0 18px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-left-width: 4px;
    border-radius: var(--radius);
    background: var(--surface);
}

.student-category-d-warning strong {
    display: block;
    margin-bottom: 4px;
}

.student-category-d-warning p {
    margin: 0;
    color: var(--muted);
}

.student-autocomplete {
    position: relative;
    width: 100%;
}

.student-autocomplete>input {
    width: 100%;
}

.student-autocomplete-list {
    position: absolute;
    z-index: 80;
    top: calc(100% + 0.25rem);
    right: 0;
    left: 0;
    max-height: 22rem;
    overflow-y: auto;
    padding: 0.35rem;
    border: 1px solid var(--border-color, #d7deea);
    border-radius: 0.65rem;
    background: #fff;
    box-shadow: 0 0.8rem 2rem rgba(22, 38, 68, 0.18);
}

.student-autocomplete-option {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.7rem 0.8rem;
    border: 0;
    border-radius: 0.45rem;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.student-autocomplete-option:hover,
.student-autocomplete-option.active {
    background: #edf4ff;
}

.student-autocomplete-option span {
    color: var(--muted-color, #667085);
    font-size: 0.82rem;
}

.dashboard-modal-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.dashboard-modal-summary-item {
    padding: 0.85rem;
    border: 1px solid var(--border-color, #d7deea);
    border-radius: 0.65rem;
    background: #f8fafc;
    text-align: center;
}

.dashboard-modal-summary-item span,
.dashboard-modal-summary-item strong {
    display: block;
}

.dashboard-modal-summary-item strong {
    margin-top: 0.25rem;
    font-size: 1.5rem;
}

@media (max-width: 560px) {
    .dashboard-modal-summary-grid {
        grid-template-columns: 1fr;
    }
}

.notification-modal {
    width: min(440px, 100%);
}

.notification-modal:focus {
    outline: none;
}

.notification-modal .modal-body {
    overflow-x: hidden;
    scrollbar-gutter: auto;
}

.notification-message-list {
    display: grid;
    gap: 0.75rem;
}

.notification-message {
    max-width: 100%;
    padding: 0.85rem 1rem;
    border-left: 1px solid var(--line);
    border-radius: var(--radius);
    background: #f7f9fc;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.notification-message.success {
    border-left-color: var(--line);
}

.notification-message.warning {
    border-left-color: var(--line);
}

.notification-message.error {
    border-left-color: var(--line);
}

.notification-modal-actions {
    justify-content: flex-end;
    margin-top: 1.25rem;
}

.notification-modal-actions [data-tooltip]::after {
    right: 0;
    left: auto;
    transform: translateY(0.2rem);
}

.notification-modal-actions [data-tooltip]:hover::after,
.notification-modal-actions [data-tooltip]:focus-visible::after {
    transform: translateY(0);
}

/* Walk-in GMC: balanced operational layout */
.gmc-walkin-page {
    width: min(100%, 1160px);
    margin-inline: auto;
}

.gmc-walkin-page .page-header {
    margin-bottom: 16px;
}

.gmc-walkin-verification {
    overflow: hidden;
}

.gmc-walkin-search {
    position: relative;
    z-index: 20;
    min-height: 190px;
    overflow: visible;
}

.gmc-walkin-page .gmc-filter-row {
    margin-bottom: 0;
    grid-template-columns: minmax(280px, 760px) auto;
    align-items: end;
    justify-content: start;
}

.gmc-walkin-page .gmc-filter-row>.field {
    min-width: 0;
}

.gmc-walkin-page .student-autocomplete,
.gmc-walkin-page .student-autocomplete input {
    width: 100%;
}

.gmc-walkin-page .student-autocomplete input {
    min-height: 52px;
    padding: 0.8rem 0.9rem;
    line-height: 1.35;
}

.gmc-walkin-page .student-autocomplete-list {
    min-width: 100%;
    max-height: 280px;
}

.gmc-walkin-page .student-autocomplete-option {
    min-height: 58px;
    white-space: normal;
    overflow-wrap: anywhere;
}

.gmc-walkin-page .gmc-student-results {
    max-height: 360px;
    margin-top: 16px;
    padding: 2px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    overflow-y: auto;
}

.gmc-walkin-page .gmc-student-result {
    min-height: 68px;
    padding: 13px 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Explicit violation intervention assignment */
.violation-intervention-panel {
    width: min(760px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    overflow: hidden;
}

.violation-finalized-table {
    width: 100%;
    table-layout: fixed;
}

.violation-finalized-table th,
.violation-finalized-table td {
    padding: 12px 12px;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.violation-finalized-table th:nth-child(1) {
    width: 12%;
}

.violation-finalized-table th:nth-child(2) {
    width: 30%;
}

.violation-finalized-table th:nth-child(3) {
    width: 11%;
}

.violation-finalized-table th:nth-child(4) {
    width: 9%;
}

.violation-finalized-table th:nth-child(5) {
    width: 16%;
}

.violation-finalized-table th:nth-child(6) {
    width: 22%;
}

.violation-finalized-table .violation-followup-actions {
    margin-top: 0;
}

.violation-finalized-table .violation-followup-summary {
    display: none;
}

.violation-finalized-table .violation-followup-actions .button {
    white-space: nowrap;
}

@media (max-width: 820px) {
    .violation-finalized-table {
        min-width: 780px;
    }
}

.violation-intervention-panel .modal-body {
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
}

.intervention-assignment-form {
    gap: 14px;
}

.intervention-recommendation {
    margin: 0;
    line-height: 1.5;
}

.intervention-option {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.intervention-option>.checkbox-control {
    margin: 0;
}

.intervention-option fieldset {
    min-width: 0;
    margin: 14px 0 0;
    padding: 14px 0 0;
    border: 0;
    border-top: 1px solid var(--line);
}

.intervention-option fieldset:disabled {
    display: none;
}

/* Sanctions page: management-only separated lists */
.sanctions-management-page {
    width: min(100%, 1280px);
    margin-inline: auto;
}

.sanctions-assignment-note {
    margin-bottom: 16px;
}

.sanctions-filter-panel {
    margin-bottom: 16px;
}

.sanctions-filter-panel .sanctions-toolbar {
    margin: 0;
}

.sanctions-separated-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.sanctions-separated-grid .sanctions-current-panel,
.sanctions-separated-grid .sanctions-history-panel {
    min-width: 0;
    margin: 0;
}

.sanctions-separated-grid .sanctions-record-card {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
}

.sanctions-separated-grid .sanctions-status-form {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(150px, 1fr) auto;
    gap: 10px;
    align-items: end;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.sanctions-separated-grid .sanctions-status-form .field {
    margin: 0;
}

.sanctions-history-grid {
    margin-top: 16px;
}

.sanctions-management-page .sanctions-history-meta {
    display: none;
}

.sanctions-management-page .sanctions-history-summary::after {
    content: none;
    display: none;
}

.sanctions-clean-toolbar {
    margin-bottom: 16px;
    grid-template-columns: minmax(280px, 1fr) minmax(150px, 210px) auto auto;
    align-items: end;
}

.sanctions-clean-toolbar .field {
    margin: 0;
}

.sanctions-management-table-wrap {
    margin-top: 14px;
}

.sanctions-management-table {
    width: 100%;
    table-layout: fixed;
}

.sanctions-management-table th,
.sanctions-management-table td {
    padding: 12px 14px;
    vertical-align: middle;
    overflow-wrap: anywhere;
}

.sanctions-management-table th:first-child {
    width: 18%;
}

.sanctions-management-table th:nth-child(2) {
    width: 18%;
}

.sanctions-management-table th:nth-child(3) {
    width: 22%;
}

.sanctions-management-table th:nth-child(4) {
    width: 12%;
}

.sanctions-management-table th:nth-child(5) {
    width: 9%;
}

.sanctions-management-table th:last-child {
    width: 21%;
}

.sanctions-table-status-form {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(100px, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.sanctions-table-status-form select {
    width: 100%;
    min-width: 0;
    min-height: 36px;
}

.sanctions-table-status-form .button {
    min-width: 58px;
    white-space: nowrap;
}

.sanctions-history-panel>.table-wrap {
    border-top: 1px solid var(--line);
}

.sanctions-history-table {
    margin: 0;
}

/* Counseling page: management-only full-width table */
.counseling-management-page {
    width: min(100%, 1280px);
    margin-inline: auto;
    gap: 16px;
}

.counseling-clean-toolbar {
    margin: 0;
    grid-template-columns: minmax(280px, 1fr) minmax(150px, 210px) auto auto;
    align-items: end;
}

.counseling-clean-toolbar .field {
    margin: 0;
}

.counseling-management-table-wrap {
    margin-top: 14px;
}

.counseling-management-table {
    width: 100%;
    table-layout: fixed;
}

.counseling-management-table th,
.counseling-management-table td {
    padding: 12px 14px;
    vertical-align: middle;
    overflow-wrap: anywhere;
}

.counseling-management-table th:first-child {
    width: 17%;
}

.counseling-management-table th:nth-child(2) {
    width: 18%;
}

.counseling-management-table th:nth-child(3) {
    width: 17%;
}

.counseling-management-table th:nth-child(4) {
    width: 15%;
}

.counseling-management-table th:nth-child(5) {
    width: 11%;
}

.counseling-management-table th:last-child {
    width: 22%;
}

.counseling-table-update-form {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(110px, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.counseling-table-update-form select {
    width: 100%;
    min-width: 0;
}

.counseling-table-update-form .button {
    min-width: 58px;
    white-space: nowrap;
}

.counseling-update-options {
    grid-column: 1 / -1;
    font-size: 13px;
}

.counseling-update-options>summary {
    color: var(--primary-blue);
    font-weight: 700;
    cursor: pointer;
}

.counseling-update-options .field {
    margin-top: 8px;
}

.counseling-history-panel {
    overflow: hidden;
}

.counseling-history-summary {
    min-height: 58px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.counseling-history-panel>.table-wrap {
    border-top: 1px solid var(--line);
}

.counseling-history-table {
    margin: 0;
}

@media (max-width: 920px) {
    .sanctions-separated-grid {
        grid-template-columns: 1fr;
    }

    .sanctions-clean-toolbar {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .counseling-clean-toolbar {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

@media (max-width: 620px) {
    .sanctions-clean-toolbar {
        grid-template-columns: 1fr;
    }

    .counseling-clean-toolbar {
        grid-template-columns: 1fr;
    }

    .sanctions-clean-toolbar .button {
        width: 100%;
    }

    .sanctions-management-table {
        min-width: 760px;
    }

    .counseling-management-table {
        min-width: 920px;
    }

    .sanctions-separated-grid .sanctions-status-form {
        grid-template-columns: 1fr;
    }

    .sanctions-separated-grid .sanctions-status-form .button {
        width: 100%;
    }
}

.violation-intervention-panel .modal-actions {
    position: sticky;
    bottom: -1px;
    padding-top: 14px;
    background: var(--surface);
}

@media (max-width: 620px) {
    .violation-intervention-panel .form-grid {
        grid-template-columns: 1fr;
    }

    .violation-intervention-panel .modal-actions .button {
        width: 100%;
    }
}

.gmc-walkin-verification {
    scroll-margin-top: 88px;
}

.gmc-walkin-verification .panel-header {
    align-items: center;
}

.gmc-walkin-verification .panel-header h2 {
    margin: 0;
}

.gmc-walkin-facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.gmc-walkin-facts>div {
    min-height: 82px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.gmc-walkin-verification>.alert {
    margin-top: 16px;
}

.gmc-walkin-print-action {
    margin-top: 18px;
    padding-top: 16px;
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid var(--line);
}

.gmc-walkin-print-action .button {
    min-width: 250px;
}

@media (max-width: 900px) {
    .gmc-walkin-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {

    .gmc-walkin-page .gmc-filter-row,
    .gmc-walkin-page .gmc-student-results,
    .gmc-walkin-facts {
        grid-template-columns: 1fr;
    }

    .gmc-walkin-page .gmc-filter-row .button,
    .gmc-walkin-print-action .button {
        width: 100%;
        min-width: 0;
    }

    .gmc-walkin-print-action {
        justify-content: stretch;
    }
}

button[data-tooltip],
a.button[data-tooltip],
[role="button"][data-tooltip] {
    position: relative;
}

button[data-tooltip]::after,
a.button[data-tooltip]::after,
[role="button"][data-tooltip]::after {
    position: absolute;
    z-index: 120;
    left: 50%;
    bottom: calc(100% + 0.5rem);
    width: max-content;
    max-width: min(16rem, 80vw);
    padding: 0.42rem 0.58rem;
    border-radius: 0.35rem;
    background: #17233b;
    color: #fff;
    box-shadow: 0 0.35rem 1rem rgba(15, 23, 42, 0.2);
    content: attr(data-tooltip);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    white-space: normal;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, 0.2rem);
    transition: opacity 0.14s ease, transform 0.14s ease;
}

button[data-tooltip]:hover::after,
button[data-tooltip]:focus-visible::after,
a.button[data-tooltip]:hover::after,
a.button[data-tooltip]:focus-visible::after,
[role="button"][data-tooltip]:hover::after,
[role="button"][data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

@media (hover: none) {

    button[data-tooltip]::after,
    a.button[data-tooltip]::after,
    [role="button"][data-tooltip]::after {
        display: none;
    }
}

.violation-sms-editor {
    width: 100%;
    min-width: 0;
    margin-top: 0.55rem;
}

.violation-sms-editor summary {
    color: var(--primary-blue);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}

.violation-sms-editor .field {
    margin-top: 0.65rem;
}

.violation-sms-editor textarea {
    width: 100%;
    min-height: 7.5rem;
    resize: vertical;
}

@media (max-width: 760px) {
    .violation-sms-editor {
        min-width: 0;
    }
}

.pending-violation-table.violation-review-table {
    width: 100%;
    min-width: 900px;
    table-layout: fixed;
}

.pending-violation-table .violation-col-student {
    width: 22%;
}

.pending-violation-table .violation-col-misbehavior {
    width: 22%;
}

.pending-violation-table .violation-col-guardian {
    width: 38%;
}

.pending-violation-table .violation-col-confirm {
    width: 18%;
}

.pending-violation-table th,
.pending-violation-table td {
    vertical-align: top;
    overflow-wrap: anywhere;
}

.pending-violation-table th {
    padding: 0.8rem 0.9rem;
    white-space: normal;
}

.pending-violation-table td {
    padding: 1rem 0.9rem;
}

.pending-violation-table .violation-expected-action {
    line-height: 1.55;
}

.pending-violation-table .violation-guardian-cell {
    overflow: visible;
}

.pending-violation-table .violation-sms-editor textarea {
    min-height: 6.5rem;
}

.pending-violation-table .violation-confirm-cell {
    vertical-align: middle;
    text-align: center;
}

.pending-violation-table .violation-confirm-form,
.pending-violation-table .discipline-confirm-form {
    width: 100%;
    min-width: 0;
    margin: 0 auto;
}

@media (max-width: 900px) {
    .pending-violation-table.violation-review-table {
        min-width: 0;
        table-layout: auto;
    }

    .pending-violation-table colgroup,
    .pending-violation-table thead {
        display: none;
    }

    .pending-violation-table,
    .pending-violation-table tbody,
    .pending-violation-table tr,
    .pending-violation-table td {
        display: block;
        width: 100%;
    }

    .pending-violation-table tbody {
        display: grid;
        gap: 1rem;
    }

    .pending-violation-table tr {
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: var(--surface);
    }

    .pending-violation-table td {
        display: grid;
        grid-template-columns: minmax(7.5rem, 34%) minmax(0, 1fr);
        gap: 0.75rem;
        padding: 0.8rem 0.9rem;
        border-bottom: 1px solid var(--line);
    }

    .pending-violation-table td::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: 0.75rem;
        font-weight: 800;
        letter-spacing: 0.03em;
        text-transform: uppercase;
    }

    .pending-violation-table td>* {
        grid-column: 2;
    }

    .pending-violation-table td:last-child {
        border-bottom: 0;
    }

    .pending-violation-table .empty-row {
        display: block;
        text-align: center;
    }

    .pending-violation-table .empty-row::before {
        content: none;
    }

    .pending-violation-table .violation-sms-editor,
    .pending-violation-table .violation-confirm-form {
        grid-column: 2;
    }

    .pending-violation-table .violation-confirm-cell {
        text-align: left;
    }
}

/* Intervention workflow */
.intervention-page {
    width: min(100%, 1280px);
    margin-inline: auto;
    gap: 16px;
}

.intervention-status-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.intervention-toolbar {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) repeat(3, minmax(150px, 190px)) auto auto;
    gap: 12px;
    align-items: end;
    margin: 0;
}

.intervention-toolbar .field,
.intervention-student-picker .field {
    margin: 0;
}

.intervention-create-panel,
.intervention-detail-panel {
    overflow: hidden;
}

.intervention-panel-summary {
    min-height: 66px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    cursor: pointer;
    list-style: none;
}

.intervention-panel-summary::-webkit-details-marker {
    display: none;
}

.intervention-panel-summary>span {
    display: grid;
    gap: 2px;
}

.intervention-panel-summary strong {
    font-size: 17px;
}

.intervention-panel-summary small {
    color: var(--muted);
}

.intervention-panel-summary::after {
    content: "+";
    margin-left: auto;
    color: var(--primary-blue);
    font-size: 24px;
    font-weight: 700;
}

.intervention-create-panel[open]>.intervention-panel-summary::after {
    content: "-";
}

.intervention-panel-body {
    padding: 18px;
    border-top: 1px solid var(--line);
}

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

.intervention-student-results {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.intervention-student-results>a {
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    text-decoration: none;
}

.intervention-student-results>a:hover,
.intervention-student-results>a:focus-visible {
    border-color: var(--primary-blue);
    background: var(--primary-blue-soft);
}

.intervention-student-results span,
.intervention-selected-student small {
    color: var(--muted);
}

.intervention-selected-student {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    padding: 12px 14px;
    border-left: 1px solid var(--line);
    background: var(--soft-yellow);
}

.intervention-selected-student>div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.intervention-record-form,
.intervention-form-fields {
    display: grid;
    gap: 14px;
}

.intervention-referral-choice,
.intervention-referral-fields {
    margin: 0;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.intervention-referral-choice legend,
.intervention-referral-fields legend {
    padding: 0 6px;
    color: var(--primary-blue-dark);
    font-weight: 700;
}

.intervention-referral-fields {
    display: grid;
    gap: 14px;
    background: var(--surface-muted);
}

.intervention-relationship {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-block: 1px solid var(--line);
    margin: 0 -18px 18px;
}

.intervention-relationship>div {
    min-width: 0;
    padding: 12px 14px;
    border-right: 1px solid var(--line);
}

.intervention-relationship>div:last-child {
    border-right: 0;
}

.intervention-relationship span,
.intervention-relationship strong {
    display: block;
    overflow-wrap: anywhere;
}

.intervention-relationship span {
    margin-bottom: 3px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.intervention-readonly-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    background: var(--line);
}

.intervention-readonly-details>div {
    min-width: 0;
    padding: 12px 14px;
    background: var(--surface);
}

.intervention-readonly-details dt {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.intervention-readonly-details dd {
    margin: 4px 0 0;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.intervention-record-meta {
    margin: 16px 0 0;
}

.intervention-record-table {
    min-width: 1040px;
    table-layout: fixed;
}

.intervention-record-table th,
.intervention-record-table td {
    padding: 11px 12px;
    vertical-align: middle;
    overflow-wrap: anywhere;
}

.intervention-history-panel .counseling-history-summary {
    justify-content: space-between;
}

@media (max-width: 1100px) {
    .intervention-toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .intervention-toolbar .grow {
        grid-column: 1 / -1;
    }

    .intervention-relationship {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .intervention-relationship>div {
        border-bottom: 1px solid var(--line);
    }
}

@media (max-width: 700px) {

    .intervention-page,
    .intervention-page>*,
    .intervention-toolbar,
    .intervention-create-panel,
    .intervention-detail-panel,
    .intervention-panel-body,
    .intervention-record-form,
    .intervention-form-fields,
    .intervention-toolbar .field,
    .intervention-student-picker .field,
    .intervention-record-form .field,
    .intervention-form-fields .field {
        min-width: 0;
        max-width: 100%;
    }

    .intervention-status-strip,
    .intervention-toolbar,
    .intervention-student-picker,
    .intervention-readonly-details {
        grid-template-columns: 1fr;
    }

    .intervention-toolbar .grow {
        grid-column: auto;
    }

    .intervention-toolbar .button,
    .intervention-student-picker .button {
        width: 100%;
    }

    .intervention-page input,
    .intervention-page select,
    .intervention-page textarea,
    .intervention-page .button {
        min-width: 0;
        max-width: 100%;
    }

    .intervention-selected-student {
        align-items: stretch;
        flex-direction: column;
    }

    .intervention-relationship {
        grid-template-columns: 1fr;
    }

    .intervention-relationship>div {
        border-right: 0;
    }
}

/* Walk-in GMC batch selection and in-place certificate review */
.gmc-walkin-batch-filter {
    display: grid;
    grid-template-columns: minmax(240px, 1.5fr) repeat(4, minmax(130px, 0.75fr)) auto;
    gap: 12px;
    align-items: end;
}

.gmc-walkin-batch-filter .field,
.gmc-walkin-batch-filter .button-row {
    min-width: 0;
    margin: 0;
}

.gmc-walkin-batch-filter-actions {
    flex-wrap: nowrap;
}

.gmc-walkin-batch-roster {
    min-width: 0;
    overflow: hidden;
}

.gmc-walkin-selection-heading,
.gmc-walkin-selection-heading strong,
.gmc-walkin-selection-heading span {
    display: block;
    min-width: 0;
}

.gmc-walkin-selection-heading span {
    margin-top: 3px;
    color: var(--muted);
    font-size: 13px;
}

.gmc-walkin-batch-table {
    min-width: 1120px;
    table-layout: fixed;
}

.gmc-walkin-batch-table th,
.gmc-walkin-batch-table td {
    padding: 11px 12px;
    vertical-align: middle;
    overflow-wrap: anywhere;
}

/* Walk-in GMC roster now has 7 columns including the selection checkbox.
   Keep the same compact table design while giving the new GMC Issued
   column its own width instead of forcing the other columns to collapse. */
.gmc-walkin-batch-table th:first-child {
    width: 54px;
}

.gmc-walkin-batch-table th:nth-child(2) {
    width: 19%;
}

.gmc-walkin-batch-table th:nth-child(3) {
    width: 24%;
}

.gmc-walkin-batch-table th:nth-child(4) {
    width: 10%;
}

.gmc-walkin-batch-table th:nth-child(5) {
    width: 10%;
}

.gmc-walkin-batch-table th:nth-child(6) {
    width: 17%;
}

.gmc-walkin-batch-table th:nth-child(7) {
    width: 15%;
}

.gmc-walkin-batch-table thead th {
    white-space: normal;
    line-height: 1.25;
}

.gmc-walkin-batch-table tbody tr {
    height: auto;
}

.gmc-walkin-batch-table input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-blue);
}

.gmc-walkin-batch-table input[type="checkbox"]:disabled {
    opacity: 0.45;
}

.gmc-walkin-batch-table-wrap.record-list-scroll-active {
    max-height: min(64vh, 720px);
}

.gmc-batch-edit-panel {
    width: min(780px, 100%);
}

.gmc-batch-edit-panel .modal-header>div {
    min-width: 0;
}

.gmc-batch-edit-panel .modal-header h2 {
    overflow-wrap: anywhere;
}

.gmc-batch-edit-form {
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.gmc-batch-edit-form>.modal-body {
    flex: 1 1 auto;
}

.gmc-batch-edit-actions {
    flex: 0 0 auto;
    justify-content: flex-end;
    margin: 0;
    padding: 14px 18px;
    border-top: 1px solid var(--line);
    background: var(--surface);
}

@media (max-width: 1500px) {
    .gmc-walkin-batch-filter {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .gmc-walkin-batch-filter .grow {
        grid-column: span 2;
    }
}

@media (max-width: 720px) {
    .gmc-walkin-batch-filter {
        grid-template-columns: 1fr;
    }

    .gmc-walkin-batch-filter .grow {
        grid-column: auto;
    }

    .gmc-walkin-batch-filter-actions,
    .gmc-walkin-batch-filter-actions .button,
    .gmc-walkin-batch-roster .gmc-selection-form,
    .gmc-walkin-batch-roster .gmc-selection-form .button,
    .gmc-batch-edit-actions .button {
        width: 100%;
    }

    .gmc-walkin-batch-filter-actions,
    .gmc-walkin-batch-roster .gmc-selection-toolbar,
    .gmc-walkin-batch-roster .gmc-selection-form,
    .gmc-batch-edit-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .gmc-batch-edit-panel .gmc-preview-form-grid {
        grid-template-columns: 1fr;
    }

    .gmc-batch-edit-panel .gmc-preview-form-grid .span-2 {
        grid-column: auto;
    }
}

/* Official School-Based Report on Incidents of Bullying */
.violation-bullying-details {
    padding: 16px;
    border: 1px solid #c7d8ed;
    border-left: 1px solid var(--line);
    border-radius: var(--radius);
    background: #f7faff;
}

.violation-bullying-details-heading h3 {
    margin: 0 0 12px;
    color: var(--primary-blue);
    font-size: 16px;
}

.violation-bullying-grid {
    grid-template-columns: minmax(180px, 1.4fr) minmax(120px, 0.65fr) minmax(190px, 1fr);
}

.bullying-report-panel,
.bullying-records-panel {
    overflow: hidden;
}

.bullying-report-header,
.bullying-records-header {
    align-items: center;
    gap: 18px;
}

.bullying-report-header h2,
.bullying-records-header h2 {
    margin: 3px 0 0;
}

.bullying-report-header span,
.bullying-records-header span {
    color: var(--muted);
}

.bullying-review-alert {
    margin: 0 18px 18px;
}

.bullying-pdf-preview {
    min-height: 540px;
    height: min(72vh, 780px);
    padding: 14px;
    background: #e9eef5;
}

.bullying-pdf-preview iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid #b9c7d8;
    border-radius: 6px;
    background: #fff;
}

.bullying-records-scroll {
    max-height: 650px;
    overflow: auto;
    scrollbar-gutter: stable;
}

.bullying-records-table {
    min-width: 940px;
}

.bullying-records-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface);
}

.bullying-records-table tr.needs-review td {
    background: #fff9df;
}

.bullying-edit-panel {
    width: min(820px, 100%);
}

.bullying-edit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bullying-edit-grid .span-2 {
    grid-column: span 2;
}

.bullying-edit-actions {
    justify-content: flex-end;
}

@media (max-width: 760px) {

    .violation-bullying-grid,
    .bullying-edit-grid {
        grid-template-columns: 1fr;
    }

    .bullying-edit-grid .span-2 {
        grid-column: auto;
    }

    .bullying-report-header,
    .bullying-records-header {
        align-items: stretch;
        flex-direction: column;
    }

    .bullying-report-header .button-row,
    .bullying-report-header .button {
        width: 100%;
    }

    .bullying-pdf-preview {
        min-height: 430px;
        height: 62vh;
        padding: 8px;
    }
}

/* GUIDE institutional interface refresh */
:root {
    --bg: #eef2f6;
    --surface: #ffffff;
    --surface-muted: #f4f7fa;
    --ink: #172235;
    --muted: #627188;
    --line: #d6dee8;
    --primary-blue: #17548e;
    --primary-blue-dark: #0c3158;
    --primary-blue-soft: #eaf2fa;
    --school-yellow: #f2c84b;
    --school-yellow-dark: #9b6b00;
    --soft-yellow: #fff8dc;
    --info-blue: #287bbd;
    --coral: #b95147;
    --danger: #b42318;
    --shadow: 0 12px 30px rgba(12, 49, 88, 0.08);
    --radius: 6px;
    --sidebar-width: 264px;
    font-family: "Aptos", "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
}

body {
    font-family: "Aptos", "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.55;
}

h1,
h2,
h3,
h4,
.topbar-title,
.sidebar .brand-block strong,
.system-login-identity strong {
    font-family: "Bahnschrift", "Aptos Display", "Segoe UI", Arial, sans-serif;
    font-weight: 650;
    letter-spacing: 0;
}

/* Authentication */
.auth-page.login-background-page,
.auth-page {
    position: relative;
    min-height: 100vh;
    background: url("../images/school-login-background.png") center / cover no-repeat fixed;
}

.auth-page::before {
    position: fixed;
    inset: 0;
    z-index: 0;
    content: "";
    background: rgba(6, 30, 57, 0.67);
    pointer-events: none;
}

.auth-shell {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    padding: clamp(18px, 4vw, 52px);
}

.login-panel {
    width: min(1080px, 100%);
    grid-template-columns: minmax(0, 1.08fr) minmax(390px, 0.92fr);
    gap: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 28px 70px rgba(2, 18, 36, 0.34);
}

.login-copy,
.login-card,
.system-login-panel .system-login-copy,
.system-login-panel .system-login-card,
.staff-registration-panel .login-copy,
.staff-registration-panel .login-card {
    min-height: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.login-copy,
.system-login-copy {
    min-height: 600px;
    padding: clamp(36px, 5vw, 68px);
    background: rgba(10, 49, 88, 0.95);
    color: #fff;
}

.system-login-brand {
    align-items: flex-start;
    gap: 28px;
}

.system-login-logo {
    width: 138px;
    height: 138px;
    flex: 0 0 138px;
    border: 4px solid rgba(255, 255, 255, 0.88);
    background: #fff;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
}

.system-login-identity {
    gap: 8px;
}

.system-login-school {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    text-transform: none;
}

.system-login-identity strong {
    color: var(--school-yellow);
    font-size: clamp(42px, 6vw, 68px);
    line-height: 1;
}

.system-login-identity p {
    max-width: 430px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 16px;
    line-height: 1.65;
}

.login-card,
.system-login-card {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(30px, 4vw, 54px);
    background: #fff;
}

.system-login-heading {
    margin-bottom: 26px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}

.system-login-heading h1 {
    margin: 0;
    color: var(--primary-blue-dark);
    font-size: 30px;
}

.login-card .field {
    margin-bottom: 18px;
}

.login-card .button.primary {
    margin-top: 4px;
}

.staff-registration-panel .registration-name-grid {
    gap: 14px;
}

/* Application frame */
.app-shell {
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    background: var(--bg);
}

.sidebar {
    padding: 18px 16px;
    border-right: 1px solid rgba(255, 255, 255, 0.09);
    background: #0d3765;
    box-shadow: 8px 0 28px rgba(8, 35, 66, 0.08);
}

.sidebar .brand-block {
    min-height: 150px;
    margin: -18px -16px 16px;
    padding: 22px 18px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    background: #0a2d53;
}

.sidebar .brand-block img {
    width: 76px !important;
    height: 76px !important;
    border: 3px solid rgba(255, 255, 255, 0.82);
    box-shadow: 0 8px 20px rgba(1, 18, 35, 0.26);
}

.sidebar .brand-block strong {
    color: #fff;
    font-size: 20px;
}

.side-nav {
    gap: 4px;
}

.side-section-label,
.side-group-toggle {
    color: var(--school-yellow);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0;
    text-transform: uppercase;
}

.side-group {
    margin-top: 6px;
}

.side-group-toggle {
    min-height: 40px;
    padding: 9px 12px;
    border-radius: 5px;
}

.side-group-toggle:hover,
.side-group.has-active>.side-group-toggle {
    background: rgba(255, 255, 255, 0.08);
}

.side-group-links {
    gap: 3px;
    padding: 4px 0 5px 8px;
}

.side-link {
    position: relative;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 5px;
    color: rgba(255, 255, 255, 0.84);
    font-weight: 540;
}

.side-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.side-link.active {
    border-color: rgba(255, 255, 255, 0.88);
    background: #fff;
    color: var(--primary-blue-dark);
    box-shadow: 0 8px 18px rgba(2, 23, 45, 0.18);
}

.side-link.active::before {
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: -5px;
    width: 3px;
    border-radius: 2px;
    background: var(--school-yellow);
    content: none;
}

.side-link-standalone {
    margin-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0 0 5px 5px;
}

.sidebar-footer {
    padding: 16px 4px 2px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.sidebar-footer .button {
    width: 100%;
    border-color: rgba(255, 255, 255, 0.72);
    background: transparent;
    color: #fff;
}

.app-main {
    min-width: 0;
}

.topbar {
    min-height: 82px;
    padding: 14px clamp(22px, 3vw, 42px);
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: none;
}

.school-header-title {
    color: var(--primary-blue-dark);
    font-size: clamp(18px, 2vw, 23px);
}

.user-chip-link {
    padding: 7px 9px;
    border: 1px solid transparent;
    border-radius: 5px;
}

.user-chip-link:hover {
    border-color: var(--line);
    background: var(--surface-muted);
}

.avatar.small {
    background: var(--school-yellow);
    color: var(--primary-blue-dark);
}

.page-content {
    padding: clamp(20px, 3vw, 38px);
}

.page-section {
    width: min(1500px, 100%);
    margin: 0 auto;
    gap: 22px;
}

/* Controls and content surfaces */
.panel,
.summary-card,
.status-banner,
.login-copy,
.login-card {
    border-color: var(--line);
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(12, 49, 88, 0.045);
}

.panel-header {
    gap: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

.panel-header h2,
.page-header h2 {
    color: var(--primary-blue-dark);
}

.page-header {
    position: relative;
    align-items: center;
    padding: 4px 0 18px;
    border-bottom: 2px solid var(--line);
}

.page-header::after {
    position: absolute;
    bottom: -2px;
    left: 0;
    display: block;
    width: 64px;
    height: 3px;
    background: var(--school-yellow);
    content: none;
}

.button {
    min-height: 42px;
    border-radius: 5px;
    padding: 9px 16px;
    font-weight: 700;
    box-shadow: none;
}

.button.primary {
    border-color: var(--primary-blue);
    background: var(--primary-blue);
    color: #fff;
    box-shadow: 0 6px 14px rgba(23, 84, 142, 0.16);
}

.button.primary:hover {
    border-color: var(--primary-blue-dark);
    background: var(--primary-blue-dark);
}

.button.secondary {
    border-color: #b9cce0;
    background: var(--primary-blue-soft);
    color: var(--primary-blue-dark);
}

.button.ghost {
    border-color: #cbd5e1;
    background: #fff;
    color: var(--primary-blue-dark);
}

.button.danger {
    border-color: var(--danger);
}

.field {
    gap: 7px;
}

.field>span:first-child,
.field>label:first-child {
    color: #2d3c51;
    font-size: 13px;
    font-weight: 700;
}

.field input,
.field select,
.field textarea {
    min-height: 44px;
    border-color: #cbd5e1;
    border-radius: 4px;
    background: #fff;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
    border-color: #9fb1c5;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(23, 84, 142, 0.12);
}

.badge {
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
}

.table-wrap {
    border-color: var(--line);
    border-radius: 5px;
    background: #fff;
}

.data-table {
    color: #243247;
}

.data-table th {
    padding: 12px 14px;
    border-bottom: 2px solid #bdcddd;
    background: #edf3f8;
    color: #33465e;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0;
    text-transform: uppercase;
}

.data-table td {
    padding: 13px 14px;
    border-bottom-color: #e2e8f0;
    vertical-align: middle;
}

.data-table tbody tr:hover td {
    background: #f8fafc;
}

.alert {
    border-radius: 5px;
    border-left-width: 4px;
    box-shadow: none;
}

.modal-backdrop {
    padding: clamp(14px, 3vw, 32px);
    background: rgba(7, 24, 43, 0.64);
    backdrop-filter: blur(3px);
}

.modal-panel {
    border: 1px solid rgba(255, 255, 255, 0.56);
    border-radius: 7px;
    box-shadow: 0 28px 64px rgba(4, 24, 47, 0.28);
}

.modal-header {
    padding: 18px 22px;
    border-bottom: 1px solid var(--line);
    background: #f7f9fc;
}

.modal-header h2 {
    color: var(--primary-blue-dark);
}

.modal-body {
    padding: 22px;
}

/* Dashboard */
.dashboard-page {
    gap: 24px;
}

.dashboard-overview {
    position: relative;
    overflow: hidden;
    min-height: 132px;
    padding: 26px 28px;
    border: 0;
    border-radius: 7px;
    background: #0d3a69;
    color: #fff;
    box-shadow: 0 12px 26px rgba(12, 49, 88, 0.16);
}

.dashboard-overview::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 6px;
    background: var(--school-yellow);
    content: none;
}

.dashboard-year-line h2 {
    color: #fff;
    font-size: clamp(25px, 3vw, 34px);
}

.dashboard-overview p {
    color: rgba(255, 255, 255, 0.78);
}

.dashboard-active-badge {
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(242, 200, 75, 0.16);
    color: #ffe789;
}

.dashboard-overview .button.primary {
    border-color: var(--school-yellow);
    background: var(--school-yellow);
    color: #17324f;
    box-shadow: none;
}

.dashboard-overview .button.primary:hover {
    border-color: #ffe071;
    background: #ffe071;
}

.dashboard-summary-grid {
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 7px 18px rgba(12, 49, 88, 0.05);
}

.dashboard-stat-card,
.summary-card.dashboard-stat-card {
    position: relative;
    min-height: 132px;
    padding: 22px;
    border: 0;
    border-right: 1px solid var(--line);
    border-radius: 0;
    background: #fff;
    box-shadow: none;
}

.dashboard-stat-card:last-child {
    border-right: 0;
}

.dashboard-stat-card::before {
    top: 0;
    right: 22px;
    bottom: auto;
    left: 22px;
    height: 3px;
    width: auto;
    content: none;
}

.dashboard-stat-card.accent-primary::before {
    background: var(--primary-blue);
    content: none;
}

.dashboard-stat-card.accent-blue::before {
    background: var(--info-blue);
    content: none;
}

.dashboard-stat-card.accent-yellow::before {
    background: var(--school-yellow);
    content: none;
}

.dashboard-stat-card.accent-coral::before {
    background: var(--coral);
    content: none;
}

.dashboard-stat-card:hover {
    z-index: 1;
    background: #f8fafc;
    transform: none;
    box-shadow: none;
}

.dashboard-stat-card strong {
    color: var(--primary-blue-dark);
    font-family: "Bahnschrift", "Aptos Display", sans-serif;
    font-size: 32px;
}

.dashboard-work-grid,
.dashboard-activity-grid {
    gap: 18px;
}

.dashboard-page .panel {
    box-shadow: 0 7px 18px rgba(12, 49, 88, 0.045);
}

.dashboard-violation-summary .table-wrap {
    overflow-x: hidden;
}

.dashboard-violation-summary .dashboard-table {
    min-width: 0;
    table-layout: fixed;
}

.dashboard-violation-summary .dashboard-table th,
.dashboard-violation-summary .dashboard-table td {
    overflow-wrap: anywhere;
}

.dashboard-violation-summary .dashboard-table .button {
    max-width: 100%;
    white-space: normal;
}

.dashboard-metric-row {
    min-height: 52px;
    padding: 13px 4px;
    border-bottom-color: #dfe6ee;
}

.dashboard-metric-row:hover {
    padding-right: 10px;
    padding-left: 10px;
    background: var(--primary-blue-soft);
}

.dashboard-metric-row strong {
    color: var(--primary-blue-dark);
}

/* Responsive layout */
@media (max-width: 980px) {
    .login-panel {
        grid-template-columns: 1fr;
        width: min(620px, 100%);
    }

    .login-copy,
    .system-login-copy {
        min-height: 0;
        padding: 28px;
    }

    .system-login-logo {
        width: 96px;
        height: 96px;
        flex-basis: 96px;
    }

    .system-login-identity strong {
        font-size: 42px;
    }

    .system-login-identity p {
        margin-bottom: 0;
        font-size: 14px;
    }

    .dashboard-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-stat-card:nth-child(2) {
        border-right: 0;
    }

    .dashboard-stat-card:nth-child(-n + 2) {
        border-bottom: 1px solid var(--line);
    }
}

@media (max-width: 700px) {
    .auth-shell {
        align-items: start;
        padding: 12px;
    }

    .login-panel {
        border-radius: 6px;
    }

    .system-login-brand {
        align-items: center;
        gap: 18px;
    }

    .system-login-logo {
        width: 76px;
        height: 76px;
        flex-basis: 76px;
    }

    .system-login-school {
        font-size: 12px;
    }

    .system-login-identity strong {
        font-size: 34px;
    }

    .system-login-identity p {
        display: none;
    }

    .login-card,
    .system-login-card {
        padding: 24px 20px;
    }

    .topbar {
        min-height: 68px;
        padding: 10px 14px;
    }

    .page-content {
        padding: 16px 12px 24px;
    }

    .dashboard-overview {
        align-items: stretch;
        min-height: 0;
        padding: 22px 20px;
    }

    .dashboard-overview .button {
        width: 100%;
    }

    .dashboard-summary-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-stat-card,
    .dashboard-stat-card:nth-child(2),
    .dashboard-stat-card:nth-child(-n + 2) {
        min-height: 112px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .dashboard-stat-card:last-child {
        border-bottom: 0;
    }

    .modal-header,
    .modal-body {
        padding: 16px;
    }
}

/* GUIDE final visual harmony overrides */
:root {
    --bg: #f1f4f7;
    --surface-muted: #f5f7fa;
    --primary-blue: #1d5f96;
    --primary-blue-dark: #123f6d;
    --primary-blue-soft: #edf4fa;
    --line: #d8e0e9;
    --sidebar-width: 252px;
}

h1,
h2,
h3,
h4,
.topbar-title,
.sidebar .brand-block strong,
.system-login-identity strong,
.dashboard-stat-card strong {
    font-family: "Aptos Display", "Segoe UI Variable Display", "Segoe UI", Arial, sans-serif;
    font-weight: 650;
}

/* Keep authentication focused instead of using an oversized split screen. */
.login-panel,
.system-login-panel,
.staff-registration-panel,
.otp-verification-panel {
    width: min(470px, 100%);
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
}

.staff-registration-panel {
    width: min(610px, 100%);
}

.login-copy,
.system-login-copy,
.system-login-panel .system-login-copy,
.staff-registration-panel .login-copy {
    min-height: 0;
    padding: 24px 28px;
    background: rgba(18, 63, 109, 0.96);
}

.system-login-brand {
    align-items: center;
    gap: 18px;
}

.system-login-logo,
.system-login-panel .system-login-logo {
    width: 76px;
    height: 76px;
    flex: 0 0 76px;
    border-width: 3px;
    box-shadow: 0 7px 18px rgba(3, 25, 48, 0.2);
}

.system-login-identity {
    gap: 3px;
}

.system-login-school {
    font-size: 12px;
    line-height: 1.35;
}

.system-login-identity strong,
.system-login-panel .system-login-identity strong {
    color: var(--school-yellow);
    font-size: 32px;
    line-height: 1.05;
}

.system-login-identity p,
.system-login-panel .system-login-identity p {
    margin: 2px 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 12px;
    line-height: 1.4;
}

.login-card,
.system-login-card,
.system-login-panel .system-login-card,
.staff-registration-panel .login-card {
    padding: 28px 30px 30px;
}

.system-login-heading {
    margin-bottom: 22px;
    padding-bottom: 14px;
}

.system-login-heading h1 {
    font-size: 26px;
}

.staff-registration-panel .registration-name-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Use one school-blue family without the detached white active block. */
.sidebar {
    padding-right: 14px;
    padding-left: 14px;
    background: #174c7e;
    box-shadow: 5px 0 18px rgba(13, 55, 101, 0.07);
}

.sidebar .brand-block {
    min-height: 132px;
    margin-right: -14px;
    margin-left: -14px;
    padding: 18px 16px 16px;
    background: #174c7e;
}

.sidebar .brand-block img {
    width: 68px !important;
    height: 68px !important;
    border-width: 2px;
    box-shadow: none;
}

.sidebar .brand-block strong {
    font-size: 18px;
}

.side-nav {
    gap: 3px;
}

.side-group {
    margin-top: 4px;
}

.side-group-toggle {
    min-height: 38px;
    padding: 8px 11px;
    color: #ffe47b;
}

.side-group-toggle:hover,
.side-group.has-active>.side-group-toggle {
    background: rgba(8, 42, 75, 0.22);
    color: #fff0ac;
}

.side-group-links {
    padding-left: 5px;
}

.side-link {
    min-height: 40px;
    padding: 9px 12px;
    color: rgba(255, 255, 255, 0.88);
}

.side-link:hover {
    background: rgba(255, 255, 255, 0.08);
}

.side-link.active {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(8, 42, 75, 0.34);
    color: #fff;
    box-shadow: none;
}

.side-link.active::before {
    top: 7px;
    bottom: 7px;
    left: -3px;
    width: 3px;
    background: var(--school-yellow);
    content: none;
}

/* Restore comfortable interior spacing to headers and profile actions. */
.page-header {
    padding: 22px 24px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
    box-shadow: 0 5px 14px rgba(18, 63, 109, 0.035);
}

.page-header::after {
    bottom: -1px;
    left: 24px;
    width: 58px;
    height: 3px;
    content: none;
}

.student-profile-header {
    align-items: center;
    gap: 24px;
}

.student-profile-identity {
    flex: 1 1 420px;
    min-width: 0;
    padding: 4px 0;
}

.student-profile-actions,
.button-row.compact.student-profile-actions {
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

.student-profile-actions .button {
    width: auto;
    min-width: 124px;
    min-height: 40px;
}

.panel {
    box-shadow: 0 5px 16px rgba(18, 63, 109, 0.04);
}

@media (max-width: 760px) {
    .staff-registration-panel {
        width: min(500px, 100%);
    }

    .staff-registration-panel .registration-name-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .student-profile-header {
        align-items: stretch;
        flex-direction: column;
    }

    .student-profile-identity {
        flex-basis: auto;
    }

    .student-profile-actions,
    .button-row.compact.student-profile-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .student-profile-actions .button {
        width: 100%;
    }
}

@media (max-width: 480px) {

    .login-copy,
    .system-login-copy,
    .system-login-panel .system-login-copy,
    .staff-registration-panel .login-copy {
        padding: 20px;
    }

    .system-login-logo,
    .system-login-panel .system-login-logo {
        width: 64px;
        height: 64px;
        flex-basis: 64px;
    }

    .system-login-identity strong,
    .system-login-panel .system-login-identity strong {
        font-size: 28px;
    }

    .system-login-identity p,
    .system-login-panel .system-login-identity p {
        display: none;
    }

    .login-card,
    .system-login-card,
    .system-login-panel .system-login-card,
    .staff-registration-panel .login-card {
        padding: 24px 20px;
    }

    .page-header {
        padding: 19px 18px;
    }

    .page-header::after {
        left: 18px;
        content: none;
    }
}

/* =========================================================
   Guidance Notifications / Student Notification History
   Scoped UI polish only. Keeps SMS and unrelated modules untouched.
   ========================================================= */

.notifications-page .page-header {
    align-items: flex-start;
}

.notifications-page .page-header>.button-row {
    margin-top: 0;
    flex-wrap: wrap;
    align-items: center;
}

.notifications-page .page-header>.button-row form {
    margin: 0;
}

.notifications-page .communication-status-strip {
    margin-bottom: 18px;
}

/* Main Guidance inbox: Notice | Date | Status */
.notifications-page:not(.student-notification-history-page) .office-notification-table tr {
    grid-template-columns: minmax(300px, 1fr) 190px 150px;
}

.notifications-page:not(.student-notification-history-page) .office-notification-table th:nth-child(2),
.notifications-page:not(.student-notification-history-page) .office-notification-table td:nth-child(2) {
    display: flex;
    align-items: center;
}

.notifications-page:not(.student-notification-history-page) .office-notification-table th:last-child,
.notifications-page:not(.student-notification-history-page) .office-notification-table td:last-child {
    justify-content: flex-end;
    text-align: right;
}

/* Guidance view of student-notification history: Student | Notice | Date | Status */
.student-notification-history-page .office-notification-table tr {
    grid-template-columns: minmax(190px, 0.8fr) minmax(280px, 1.35fr) 190px 180px;
}

.student-notification-history-page .office-notification-table th:nth-child(3),
.student-notification-history-page .office-notification-table td:nth-child(3),
.student-notification-history-page .office-notification-table th:nth-child(4),
.student-notification-history-page .office-notification-table td:nth-child(4) {
    display: flex;
    align-items: center;
}

.student-notification-history-page .office-notification-table th:nth-child(4),
.student-notification-history-page .office-notification-table td:nth-child(4) {
    justify-content: flex-end;
    padding-right: 24px;
    text-align: right;
}

.student-notification-history-page .panel-header {
    align-items: flex-start;
}

.student-notification-history-page .panel-header h2 {
    margin-bottom: 4px;
}

.student-notification-history-page .panel-header .muted {
    margin: 0;
}

.student-notification-history-page .student-notification-status .badge {
    white-space: nowrap;
}

.student-notification-history-page .student-notification-row.is-unread td:first-child strong,
.student-notification-history-page .student-notification-row.is-unread td:nth-child(2) strong {
    color: var(--primary-blue-dark);
}

.student-notification-history-page .student-notification-row:hover,
.student-notification-history-page .student-notification-row:focus-visible {
    background: var(--primary-blue-soft);
}

/* Modal is deliberately display-only for Guidance. */
.student-notification-history-page .student-notification-modal .modal-panel {
    width: min(660px, 100%);
}

.student-notification-history-page .student-notification-detail-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.student-notification-history-page .student-notification-detail-meta>div {
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-muted);
}

.student-notification-history-page .student-notification-detail-message {
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

@media (max-width: 900px) {
    .notifications-page .page-header {
        align-items: stretch;
    }

    .notifications-page .page-header>.button-row {
        width: 100%;
        justify-content: flex-start;
    }

    .notifications-page:not(.student-notification-history-page) .office-notification-table tr {
        grid-template-columns: minmax(0, 1fr) 150px 120px;
    }

    .student-notification-history-page .office-notification-table tr {
        grid-template-columns: minmax(170px, 0.8fr) minmax(230px, 1.2fr) 150px 155px;
    }
}

@media (max-width: 640px) {

    .notifications-page .page-header>.button-row,
    .notifications-page .page-header>.button-row .button,
    .notifications-page .page-header>.button-row form {
        width: 100%;
    }

    .notifications-page:not(.student-notification-history-page) .office-notification-table tr {
        grid-template-columns: minmax(0, 1fr) 112px;
    }

    .notifications-page:not(.student-notification-history-page) .office-notification-table th:nth-child(2),
    .notifications-page:not(.student-notification-history-page) .office-notification-table td:nth-child(2) {
        display: none;
    }

    .student-notification-history-page .office-notification-table tr {
        grid-template-columns: minmax(0, 1fr) 145px;
    }

    .student-notification-history-page .office-notification-table th:first-child,
    .student-notification-history-page .office-notification-table td:first-child,
    .student-notification-history-page .office-notification-table th:nth-child(3),
    .student-notification-history-page .office-notification-table td:nth-child(3) {
        display: none;
    }

    .student-notification-history-page .office-notification-table th:nth-child(4),
    .student-notification-history-page .office-notification-table td:nth-child(4) {
        padding-right: 14px;
    }

    .student-notification-history-page .student-notification-detail-meta {
        grid-template-columns: 1fr;
    }

    /* Student Notifications modal
   Keep the message box consistent with the system's neutral modal design. */
    .guidance-student-notifications-page .student-notification-detail-message,
    .student-notification-history-page .student-notification-detail-message,
    .student-notification-modal .student-notification-detail-message {
        border-left: 1px solid var(--line);
    }
}

/* Responsive repairs: use the available content width, including tablet sidebars. */
@media screen {

    .app-main,
    .page-content,
    .page-section,
    .page-section>*,
    .panel,
    .field,
    fieldset {
        min-width: 0;
    }

    .page-content {
        container-name: workspace;
        container-type: inline-size;
    }

    .table-wrap {
        min-width: 0;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .page-header>div,
    .panel-header>div,
    .modal-header>div {
        min-width: 0;
    }

    .page-header h2,
    .panel-header h2,
    .modal-header h2,
    .student-autocomplete-option {
        overflow-wrap: anywhere;
    }
}

/* Match the original sidebar breakpoint. The later desktop grid used to override it. */
@media screen and (max-width: 820px) {
    .app-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .app-main {
        width: 100%;
    }

    .sidebar {
        width: min(var(--sidebar-width), 86vw);
        height: 100dvh;
    }

    .topbar {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        padding: 12px 16px;
        min-height: 70px;
    }

    .school-header-title {
        margin: 0;
        min-width: 0;
        font-size: clamp(14px, 2.3vw, 20px);
        line-height: 1.3;
        text-align: left;
        overflow-wrap: break-word;
    }

    .topbar-actions {
        min-width: 0;
        gap: 8px;
        flex-wrap: nowrap;
    }

    .topbar .user-chip-copy {
        display: none;
    }

    .topbar .user-chip {
        min-width: 0;
        margin: 0;
        padding: 4px;
    }

    .topbar .avatar {
        flex-shrink: 0;
    }

    .page-content {
        padding: 16px;
    }

    .modal-backdrop {
        padding: 12px;
    }

    .modal-panel {
        max-width: 100%;
        max-height: calc(100dvh - 24px);
    }

    .modal-header,
    .modal-body {
        padding: 16px;
    }

    .modal-header .button {
        flex: 0 0 auto;
        align-self: center;
        width: auto;
    }

    .modal-body {
        min-height: 0;
        overflow-y: auto;
    }

    .modal-panel .form-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .modal-panel .form-grid>* {
        min-width: 0;
        grid-column: auto;
    }
}

/* These rules also work when the visible sidebar reduces a tablet's content area. */
@container workspace (max-width: 900px) {

    .page-section .page-header,
    .page-section .panel-header {
        flex-wrap: wrap;
        gap: 14px;
        align-items: center;
    }

    .page-section .page-header-actions,
    .page-section .button-row {
        flex-wrap: wrap;
        gap: 10px;
    }

    .page-section :is(.student-filter-grid, .communication-filter-grid,
        .administration-filter-grid, .intervention-toolbar,
        .gmc-walkin-batch-filter, .gmc-release-filter-grid,
        .gmc-batch-filter-grid, .misbehavior-filter-grid,
        .school-year-source-row, .school-year-target-controls) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: end;
    }

    .page-section :is(.field, .student-autocomplete) {
        min-width: 0;
        max-width: 100%;
    }

    .page-section .field :is(input, select, textarea) {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .page-section :is(.policy-rule-editor-grid, .category-summary-grid,
        .dashboard-summary-grid, .school-year-overview-grid) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .notifications-page .office-notification-table {
        min-width: 0;
        width: 100%;
    }

    /* Stack notification details instead of hiding them or squeezing table columns. */
    .notifications-page .office-notification-table thead {
        display: none;
    }

    .notifications-page .office-notification-table tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 6px;
        padding: 14px 16px;
    }

    .notifications-page .office-notification-table tbody tr td {
        display: block !important;
        padding: 0 !important;
        text-align: left !important;
        min-width: 0;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .notifications-page .office-notification-table tbody tr td:last-child {
        display: flex !important;
        justify-content: flex-start !important;
        padding: 2px 0 0 !important;
    }

    .notifications-page .office-notification-table tbody tr .badge {
        white-space: normal;
    }
}

@container workspace (max-width: 600px) {

    .page-section .page-header,
    .page-section .panel-header {
        align-items: flex-start;
    }

    .page-section .page-header>.button-row,
    .page-section .page-header-actions {
        width: 100%;
        margin-left: 0;
        justify-content: flex-start;
    }

    .page-section :is(.student-search-row, .misbehavior-search-row,
        .school-year-source-row, .school-year-target-controls,
        .student-filter-grid, .communication-filter-grid,
        .administration-filter-grid, .intervention-toolbar,
        .intervention-student-picker, .gmc-walkin-batch-filter,
        .gmc-release-filter-grid, .gmc-batch-filter-grid, .misbehavior-filter-grid,
        .backup-restore-form, .policy-rule-editor-grid, .form-grid.two,
        .school-year-overview-grid, .backup-action-grid) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px;
    }

    .page-section :is(.student-search-row, .misbehavior-search-row,
        .school-year-source-row, .school-year-target-controls,
        .communication-filter-grid, .administration-filter-grid,
        .student-filter-grid, .intervention-toolbar, .form-grid.two)>* {
        grid-column: auto !important;
        grid-row: auto;
        min-width: 0;
    }

    .page-section :is(.student-search-row, .misbehavior-search-row)>.button {
        width: 100%;
        min-height: 44px;
    }

    .page-section .button-row .button,
    .page-section .page-header-actions .button {
        min-height: 44px;
        height: auto;
        white-space: normal;
        text-align: center;
    }

    .page-section .field :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
        width: 100%;
        font-size: 16px;
    }

    .page-section :is(.dashboard-summary-grid, .summary-grid,
        .category-summary-grid, .intervention-status-strip,
        .student-status-grid, .profile-count-grid) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 480px) {
    .page-content {
        padding: 12px;
    }

    .topbar {
        padding: 10px 12px;
        gap: 8px;
    }

    .page-header,
    .panel,
    .student-filter-panel {
        padding: 16px;
    }

    .page-section {
        gap: 16px;
    }

    .pagination {
        flex-wrap: wrap;
        gap: 12px;
    }

    .pagination-links {
        flex-wrap: wrap;
    }
}

@container workspace (max-width: 600px) {
    .backup-page #restore-backup .backup-restore-form {
        grid-template-areas: "file" "hint" "confirm" "submit" !important;
    }

    .gmc-preview-page #certificate-actions .gmc-ready-actions:not(.gmc-ready-print-actions),
    .gmc-preview-page #certificate-actions .gmc-release-form,
    .gmc-preview-page #void-certificate .gmc-void-form {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .gmc-preview-page #certificate-actions .gmc-ready-actions .button,
    .gmc-preview-page #void-certificate .gmc-void-form .button {
        width: 100%;
    }
}

/* Mobile navigation dismissal. Desktop navigation keeps its existing layout. */
.sidebar-close,
.sidebar-backdrop {
    display: none;
}

@media screen and (max-width: 820px) {
    body.sidebar-drawer-open {
        overflow: hidden;
    }

    .sidebar .sidebar-close {
        display: inline-grid;
        position: sticky;
        top: 0;
        z-index: 2;
        align-self: flex-end;
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        min-height: 40px;
        padding: 0;
        margin: 0;
        border: 1px solid var(--line);
        background: var(--surface);
        color: var(--primary-blue-dark);
        font-size: 26px;
        line-height: 1;
    }

    .sidebar-backdrop:not([hidden]) {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 29;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: rgba(7, 24, 43, 0.4);
        box-shadow: none;
        cursor: pointer;
    }
}


/* =========================================================
   FINAL AUTH RESPONSIVENESS
   Login + Guidance Associate Registration
   Center when space allows; scroll safely on short viewports
   and while a phone/tablet software keyboard is open.
   ========================================================= */

.auth-page,
.auth-page.login-background-page {
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
}

.auth-page.login-background-page {
    background-attachment: scroll;
}

.auth-shell {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    height: auto;
    align-items: center;
    justify-content: center;
    overflow: visible;
    padding: clamp(18px, 4vw, 52px);
}

.auth-shell>.login-panel,
.auth-shell>.staff-registration-panel {
    flex: 0 1 auto;
    margin: auto;
}

/* Keep every identity line visible on every supported viewport. */
.system-login-identity,
.system-login-panel .system-login-identity,
.staff-registration-panel .system-login-identity {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 7px;
}

.system-login-identity strong,
.system-login-panel .system-login-identity strong,
.staff-registration-panel .system-login-identity strong {
    order: 1;
}

.system-login-identity p,
.system-login-panel .system-login-identity p,
.staff-registration-panel .system-login-identity p {
    order: 2;
    display: block !important;
    margin: 0;
    max-width: 100%;
    font-weight: 400;
    overflow-wrap: anywhere;
}

.system-login-school,
.system-login-panel .system-login-school,
.staff-registration-panel .system-login-school {
    order: 3;
    display: block !important;
    margin-top: 2px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

/* Registration is taller than sign-in; never lock it to viewport height. */
.staff-registration-panel,
.staff-registration-panel .login-card,
.staff-registration-panel .system-login-card {
    height: auto;
    max-height: none;
}

.staff-registration-panel .system-login-card {
    justify-content: flex-start;
}

/* Tablet and narrower layouts use one column but stay centered. */
@media (max-width: 900px) {
    .auth-shell {
        align-items: center;
        justify-content: center;
        padding: clamp(16px, 3vw, 30px);
    }

    .login-panel,
    .system-login-panel,
    .staff-registration-panel {
        width: min(560px, 100%);
        grid-template-columns: 1fr;
    }

    .staff-registration-panel {
        width: min(620px, 100%);
    }

    .login-copy,
    .system-login-copy,
    .system-login-panel .system-login-copy,
    .staff-registration-panel .login-copy {
        min-height: 0;
    }

    .system-login-brand,
    .system-login-panel .system-login-brand,
    .staff-registration-panel .system-login-brand {
        align-items: center;
    }
}

/* Phones and narrow tablets: compact, but do not hide branding. */
@media (max-width: 700px) {
    .auth-shell {
        align-items: center !important;
        justify-content: center !important;
        padding: 14px 12px;
    }

    .login-panel,
    .system-login-panel,
    .staff-registration-panel {
        width: min(500px, 100%);
    }

    .system-login-identity p,
    .system-login-panel .system-login-identity p,
    .staff-registration-panel .system-login-identity p {
        display: block !important;
    }
}

@media (max-width: 480px) {
    .auth-shell {
        padding: 12px 10px;
    }

    .system-login-brand,
    .system-login-panel .system-login-brand,
    .staff-registration-panel .system-login-brand {
        gap: 12px;
    }

    .system-login-identity strong,
    .system-login-panel .system-login-identity strong,
    .staff-registration-panel .system-login-identity strong {
        font-size: 28px;
    }

    .system-login-identity p,
    .system-login-panel .system-login-identity p,
    .staff-registration-panel .system-login-identity p {
        display: block !important;
        font-size: 11px;
        line-height: 1.35;
    }

    .system-login-school,
    .system-login-panel .system-login-school,
    .staff-registration-panel .system-login-school {
        font-size: 11px;
        line-height: 1.35;
    }
}

/* Short screens, landscape phones/tablets, split windows, and software keyboard.
   Move content to the top and let the document scroll instead of clipping it. */
@media (max-height: 760px) {
    .auth-shell {
        align-items: flex-start !important;
        justify-content: center !important;
        min-height: 100dvh;
        padding-top: 12px;
        padding-bottom: 24px;
    }

    .auth-shell>.login-panel,
    .auth-shell>.staff-registration-panel {
        margin-top: 0;
        margin-bottom: 0;
    }
}

@media (max-height: 560px) {
    .auth-shell {
        padding-top: 8px;
        padding-bottom: 18px;
    }

    .login-copy,
    .system-login-copy,
    .system-login-panel .system-login-copy,
    .staff-registration-panel .login-copy {
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .login-card,
    .system-login-card,
    .system-login-panel .system-login-card,
    .staff-registration-panel .login-card {
        padding-top: 18px;
        padding-bottom: 20px;
    }
}

/* =========================================================
   USERS & PERMISSIONS - MOBILE RESPONSIVENESS
   Compact permission popups + mobile-friendly permission UI
   ========================================================= */

@media (max-width: 760px) {

    /* ---------------------------------------------------------
       1. COMPACT CONFIRMATION / NOTIFICATION POPUPS
       --------------------------------------------------------- */

    .notification-modal-backdrop,
    [data-confirm].modal-backdrop {
        padding: 12px;
    }

    .notification-modal,
    [data-confirm] .modal-panel.compact {
        width: min(340px, calc(100vw - 24px));
        max-width: 340px;
        max-height: calc(100dvh - 24px);
        border-radius: 7px;
    }

    .notification-modal .modal-header,
    [data-confirm] .modal-header {
        padding: 11px 14px;
    }

    .notification-modal .modal-header h2,
    [data-confirm] .modal-header h2 {
        font-size: 16px;
        line-height: 1.25;
    }

    .notification-modal .modal-body,
    [data-confirm] .modal-body {
        padding: 12px 14px 14px;
    }

    .notification-message-list {
        gap: 8px;
    }

    .notification-message {
        padding: 9px 10px;
        font-size: 13px;
        line-height: 1.4;
    }

    .notification-modal-actions,
    [data-confirm] .button-row {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        gap: 8px;
        margin-top: 10px;
    }

    .notification-modal-actions .button,
    [data-confirm] .button-row .button {
        width: auto !important;
        min-width: 76px;
        min-height: 36px;
        padding: 7px 14px;
        flex: 0 0 auto;
        font-size: 13px;
    }


    /* ---------------------------------------------------------
       2. USERS PAGE HEADER
       --------------------------------------------------------- */

    .users-page .page-header {
        align-items: stretch;
        gap: 10px;
    }

    .users-page .page-header > .button {
        width: 100%;
        min-width: 0;
    }


    /* ---------------------------------------------------------
       3. ACCOUNT SUMMARY - USE 2 x 2 GRID ON MOBILE
       --------------------------------------------------------- */

    .users-page .users-status-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1px;
        background: var(--line);
    }

    .users-page .users-status-strip > div {
        min-height: 58px;
        padding: 10px 12px;
        border: 0 !important;
        background: var(--surface);
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 3px;
    }

    .users-page .users-status-strip span {
        font-size: 10px;
        line-height: 1.2;
    }

    .users-page .users-status-strip strong {
        font-size: 18px;
        text-align: left;
    }


    /* ---------------------------------------------------------
       4. FILTERS
       --------------------------------------------------------- */

    .users-page .users-filter-grid,
    .users-page .users-filter-grid .span-2 {
        grid-template-columns: 1fr !important;
        grid-column: auto !important;
    }

    .users-page .administration-filter-panel .button-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .users-page .administration-filter-panel .button-row .button {
        width: 100%;
    }


    /* ---------------------------------------------------------
       5. SCHOOL GUIDANCE ASSOCIATE ACCOUNT LIST
       Turn desktop table into cards on mobile
       --------------------------------------------------------- */

    .users-page .administration-list-panel > .table-wrap {
        overflow: visible;
        border: 0;
        background: transparent;
    }

    .users-page .simplified-user-table {
        width: 100%;
        min-width: 0 !important;
        border-collapse: separate;
        border-spacing: 0;
    }

    .users-page .simplified-user-table thead {
        display: none;
    }

    .users-page .simplified-user-table tbody {
        display: grid;
        gap: 10px;
    }

    .users-page .simplified-user-table tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px 12px;
        padding: 13px;
        border: 1px solid var(--line);
        border-radius: 6px;
        background: var(--surface);
    }

    .users-page .simplified-user-table tbody td {
        min-width: 0;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    /* Associate name */
    .users-page .simplified-user-table tbody td:nth-child(1) {
        grid-column: 1 / -1;
    }

    /* Role */
    .users-page .simplified-user-table tbody td:nth-child(2) {
        grid-column: 1 / -1;
    }

    .users-page .simplified-user-table tbody td:nth-child(2)::before {
        content: "Role";
        display: block;
        margin-bottom: 3px;
        color: var(--muted);
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
    }

    /* Status */
    .users-page .simplified-user-table tbody td:nth-child(3) {
        grid-column: 1;
    }

    .users-page .simplified-user-table tbody td:nth-child(3)::before {
        content: "Status";
        display: block;
        margin-bottom: 4px;
        color: var(--muted);
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
    }

    /* Last Login */
    .users-page .simplified-user-table tbody td:nth-child(4) {
        grid-column: 1 / -1;
        font-size: 13px;
    }

    .users-page .simplified-user-table tbody td:nth-child(4)::before {
        content: "Last Login";
        display: block;
        margin-bottom: 3px;
        color: var(--muted);
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
    }

    /* Manage */
    .users-page .simplified-user-table tbody td:nth-child(5) {
        grid-column: 1 / -1;
    }

    .users-page .simplified-user-table tbody td:nth-child(5) .button {
        width: 100%;
    }

    .users-page .simplified-user-table .empty-row {
        grid-column: 1 / -1;
        padding: 12px !important;
        text-align: center;
    }


    /* ---------------------------------------------------------
       6. SELECTED USER PROFILE
       --------------------------------------------------------- */

    .users-page .access-profile-header {
        grid-template-columns: 1fr !important;
        gap: 14px;
        align-items: stretch;
    }

    .users-page .access-profile-actions {
        grid-template-columns: 1fr !important;
        gap: 10px;
    }

    .users-page .access-profile-actions .inline-form {
        grid-template-columns: 1fr !important;
        gap: 8px;
    }

    .users-page .access-profile-actions .button {
        width: 100%;
    }


    /* ---------------------------------------------------------
       7. PROFILE DETAILS
       Role / Status / Password / Last Login
       --------------------------------------------------------- */

    .users-page .staff-access-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 1px;
        background: var(--line);
    }

    .users-page .staff-access-summary-grid > div {
        min-height: 66px;
        padding: 11px 12px;
        border: 0 !important;
        background: var(--surface);
    }

    .users-page .staff-access-summary-grid dt {
        font-size: 10px;
    }

    .users-page .staff-access-summary-grid dd {
        margin-top: 4px;
        font-size: 13px;
    }


    /* ---------------------------------------------------------
       8. PERMISSION INFORMATION BOX
       --------------------------------------------------------- */

    .users-page .permission-guide-alert {
        margin-bottom: 12px;
        padding: 11px 12px;
        font-size: 13px;
        line-height: 1.45;
    }

    .users-page .permission-module-list {
        gap: 10px;
    }

    .users-page .permission-module-heading {
        padding: 10px 12px;
    }

    .users-page .permission-module-heading h3 {
        font-size: 14px;
    }


    /* ---------------------------------------------------------
       9. PERMISSION TABLES
       Turn each permission into a mobile card
       --------------------------------------------------------- */

    .users-page .permission-module-group .table-wrap {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .users-page .permission-group-table {
        width: 100%;
        min-width: 0 !important;
        border-collapse: separate;
        border-spacing: 0;
    }

    .users-page .permission-group-table thead {
        display: none;
    }

    .users-page .permission-group-table tbody {
        display: grid;
        gap: 8px;
        padding: 10px;
    }

    .users-page .permission-group-table tbody tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 12px;
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 6px;
        background: #fff;
    }

    .users-page .permission-group-table tbody td {
        min-width: 0;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    /* Permission name */
    .users-page .permission-group-table tbody td:nth-child(1) {
        grid-column: 1 / -1;
    }

    .users-page .permission-group-table tbody td:nth-child(1) strong {
        font-size: 14px;
        line-height: 1.35;
    }

    /* Type */
    .users-page .permission-group-table tbody td:nth-child(2)::before {
        content: "Type";
        display: block;
        margin-bottom: 4px;
        color: var(--muted);
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
    }

    /* Current access */
    .users-page .permission-group-table tbody td:nth-child(3)::before {
        content: "Current Access";
        display: block;
        margin-bottom: 4px;
        color: var(--muted);
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
    }

    /* Assignment */
    .users-page .permission-group-table tbody td:nth-child(4) {
        grid-column: 1 / -1;
    }

    .users-page .permission-group-table tbody td:nth-child(4)::before {
        content: "Assignment";
        display: block;
        margin-bottom: 5px;
        color: var(--muted);
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .users-page .permission-group-table .field,
    .users-page .permission-group-table select {
        width: 100%;
        min-width: 0 !important;
    }


    /* ---------------------------------------------------------
       10. SAVE PERMISSIONS
       --------------------------------------------------------- */

    .users-page .permission-save-row {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 14px;
    }

    .users-page .permission-save-row .field,
    .users-page .permission-save-row .button {
        width: 100%;
    }
}


/* Extra-small phones */
@media (max-width: 420px) {

    .notification-modal,
    [data-confirm] .modal-panel.compact {
        width: min(315px, calc(100vw - 20px));
    }

    .users-page .users-status-strip,
    .users-page .staff-access-summary-grid {
        grid-template-columns: 1fr !important;
    }

    .users-page .permission-group-table tbody tr {
        grid-template-columns: 1fr;
    }

    .users-page .permission-group-table tbody td:nth-child(1),
    .users-page .permission-group-table tbody td:nth-child(2),
    .users-page .permission-group-table tbody td:nth-child(3),
    .users-page .permission-group-table tbody td:nth-child(4) {
        grid-column: 1;
    }
}

/* =========================================================
   AUDIT LOG TABLE - PROPORTIONAL WIDTH / NO HORIZONTAL SCROLL
   ========================================================= */

.audit-page .audit-list-panel {
    min-width: 0;
    max-width: 100%;
}

/* Remove the horizontal scrollbar only from Audit Log */
.audit-page .audit-list-panel > .table-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

/* Main Audit Log table */
.audit-page .audit-log-table {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    table-layout: fixed;
}

/* Allow content to wrap instead of increasing table width */
.audit-page .audit-log-table th,
.audit-page .audit-log-table td {
    min-width: 0;
    padding: 11px 12px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    vertical-align: top;
}

/* Date */
.audit-page .audit-log-table th:nth-child(1),
.audit-page .audit-log-table td:nth-child(1) {
    width: 16%;
}

/* Guidance Office User / Student */
.audit-page .audit-log-table th:nth-child(2),
.audit-page .audit-log-table td:nth-child(2) {
    width: 28%;
}

/* Activity */
.audit-page .audit-log-table th:nth-child(3),
.audit-page .audit-log-table td:nth-child(3) {
    width: 26%;
}

/* IP Address */
.audit-page .audit-log-table th:nth-child(4),
.audit-page .audit-log-table td:nth-child(4) {
    width: 14%;
    white-space: normal;
}

/* Details */
.audit-page .audit-log-table th:nth-child(5),
.audit-page .audit-log-table td:nth-child(5) {
    width: 16%;
    white-space: normal;
}

/* Keep the details button inside its own column */
.audit-page .audit-detail-action-cell {
    white-space: normal;
    overflow-wrap: anywhere;
}

.audit-page .audit-change-toggle {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Expanded Audit Log details table */
.audit-page .audit-change-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

.audit-page .audit-change-table {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    table-layout: fixed;
}

.audit-page .audit-change-table th,
.audit-page .audit-change-table td {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Tablet / smaller screens */
@media (max-width: 900px) {
    .audit-page .audit-log-table th,
    .audit-page .audit-log-table td {
        padding: 9px 8px;
        font-size: 12px;
    }

    .audit-page .audit-log-table th:nth-child(1),
    .audit-page .audit-log-table td:nth-child(1) {
        width: 18%;
    }

    .audit-page .audit-log-table th:nth-child(2),
    .audit-page .audit-log-table td:nth-child(2) {
        width: 27%;
    }

    .audit-page .audit-log-table th:nth-child(3),
    .audit-page .audit-log-table td:nth-child(3) {
        width: 25%;
    }

    .audit-page .audit-log-table th:nth-child(4),
    .audit-page .audit-log-table td:nth-child(4) {
        width: 14%;
    }

    .audit-page .audit-log-table th:nth-child(5),
    .audit-page .audit-log-table td:nth-child(5) {
        width: 16%;
    }
}

/* =========================================================
   BACKUP & RESTORE - MOBILE RESPONSIVE FIXES
   ========================================================= */

@media screen and (max-width: 760px) {

    /* -----------------------------------------
       Backup summary
       Keep the four totals compact on mobile.
       ----------------------------------------- */

    .backup-page .backup-status-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .backup-page .backup-status-strip > div,
    .backup-page .backup-status-strip > div:last-child {
        min-width: 0;
        min-height: 58px;
        padding: 10px 12px;

        border: 1px solid var(--line);
        border-radius: var(--radius);
    }

    .backup-page .backup-status-strip span {
        font-size: 10px;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    .backup-page .backup-status-strip strong {
        flex: 0 0 auto;
        font-size: 18px;
    }


    /* -----------------------------------------
       Main Backup / Download / Restore controls
       ----------------------------------------- */

    .backup-page .backup-action-grid,
    .backup-page .backup-restore-form,
    .backup-page .backup-filter-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .backup-page .backup-action-grid > *,
    .backup-page .backup-restore-form > *,
    .backup-page .backup-filter-grid > * {
        min-width: 0;
        grid-column: auto !important;
    }

    .backup-page .backup-create-form .button,
    .backup-page .backup-download-panel .button,
    .backup-page .backup-restore-form .button {
        width: 100%;
        min-width: 0;
    }

    .backup-page .backup-restore-panel .panel-header p {
        max-width: 100%;
        overflow-wrap: anywhere;
    }


    /* -----------------------------------------
       Backup History
       Convert the wide table into mobile cards.
       ----------------------------------------- */

    .backup-page .backup-history-list {
        width: 100%;
        max-width: 100%;
        overflow-x: visible;
    }

    .backup-page .backup-history-table {
        display: block;

        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .backup-page .backup-history-table thead {
        display: none;
    }

    .backup-page .backup-history-table tbody {
        display: grid;
        gap: 10px;

        width: 100%;
    }

    .backup-page
    .backup-history-table
    tbody
    tr.backup-history-row {
        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            auto;

        gap: 8px 12px;

        width: 100%;
        padding: 12px;

        border: 1px solid var(--line);
        border-radius: var(--radius);

        background: var(--surface);
    }

    .backup-page
    .backup-history-table
    tbody
    tr.backup-history-row
    td {
        display: block;

        width: auto !important;
        min-width: 0;

        padding: 0 !important;

        border: 0;

        white-space: normal !important;

        overflow-wrap: anywhere;
    }


    /* Backup filename */

    .backup-page
    .backup-history-table
    tbody
    tr.backup-history-row
    td:nth-child(1) {
        grid-column: 1 / -1;
    }


    /* Status */

    .backup-page
    .backup-history-table
    tbody
    tr.backup-history-row
    td:nth-child(2) {
        grid-column: 1;

        align-self: center;
    }


    /* Date */

    .backup-page
    .backup-history-table
    tbody
    tr.backup-history-row
    td:nth-child(3) {
        grid-column: 1 / -1;

        color: var(--muted);

        font-size: 12px;
    }


    /* View Details */

    .backup-page
    .backup-history-table
    tbody
    tr.backup-history-row
    td:nth-child(4) {
        grid-column: 2;
        grid-row: 2;

        align-self: center;

        text-align: right;
    }

    .backup-page
    .backup-history-details-cell
    .button {
        width: auto;

        min-height: 36px;

        padding: 8px 10px;
    }


    /* Empty history */

    .backup-page
    .backup-history-table
    tbody
    tr:not(.backup-history-row) {
        display: block;

        width: 100%;
    }

    .backup-page
    .backup-history-table
    .empty-row {
        display: block;

        width: 100%;

        padding: 14px !important;

        white-space: normal;
    }


    /* -----------------------------------------
       Backup Details modal
       ----------------------------------------- */

    .backup-history-modal .modal-panel {
        width: 100%;
        max-width: 100%;

        max-height: calc(100dvh - 24px);
    }

    .backup-history-modal .modal-header,
    .backup-history-modal .modal-body {
        padding: 14px;
    }

    .backup-history-modal
    .student-notification-modal-body {
        gap: 14px;
    }

    .backup-history-modal
    .backup-detail-meta {
        grid-template-columns: minmax(0, 1fr);

        gap: 10px;
    }

    .backup-history-modal
    .student-notification-modal-actions {
        display: grid;

        grid-template-columns: minmax(0, 1fr);

        width: 100%;

        gap: 8px;
    }

    .backup-history-modal
    .student-notification-modal-actions
    .button {
        width: 100%;
    }
}


/* =========================================================
   BACKUP NOTIFICATION - SMALL PHONE VIEW
   ========================================================= */

@media screen and (max-width: 600px) {

    .backup-notification-modal-backdrop {
        padding: 10px;
    }

    .backup-notification-modal {
        width: 100%;
        max-width: 100%;

        max-height:
            min(
                320px,
                calc(100dvh - 20px)
            );
    }

    .backup-notification-modal .modal-header {
        padding: 11px 14px;
    }

    .backup-notification-modal .modal-header h2 {
        font-size: 16px;
    }

    .backup-notification-modal .modal-body {
        padding: 12px 14px 14px;

        overflow-y: auto;
    }

    .backup-notification-modal
    .notification-message-list {
        gap: 8px;
    }

    .backup-notification-modal
    .notification-message {
        padding: 10px 11px;

        font-size: 13px;
        line-height: 1.4;

        overflow-wrap: anywhere;
    }

    .backup-notification-modal
    .notification-modal-actions {
        margin-top: 10px;
    }

    .backup-notification-modal
    .notification-modal-actions
    .button {
        width: 100%;

        min-height: 40px;
    }
}


/* Very narrow phones */
@media screen and (max-width: 380px) {

    .backup-page .backup-status-strip {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* =========================================================
   GLOBAL FLOATING TOOLTIPS
   Keep tooltips outside overflow-clipped modals/tables/cards.
   ========================================================= */
button[data-tooltip]::after,
a.button[data-tooltip]::after,
[role="button"][data-tooltip]::after {
    display: none !important;
    content: none !important;
}

.guide-floating-tooltip {
    position: fixed;
    z-index: 10000;
    width: max-content;
    max-width: min(16rem, calc(100vw - 20px));
    padding: 0.42rem 0.58rem;
    border-radius: 0.35rem;
    background: #17233b;
    color: #fff;
    box-shadow: 0 0.35rem 1rem rgba(15, 23, 42, 0.2);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.2rem);
    transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s ease;
}

.guide-floating-tooltip.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

@media (hover: none) {
    .guide-floating-tooltip {
        display: none !important;
    }
}

/* =========================================================
   CAPTCHA - MOBILE RESPONSIVENESS
   Sign In + School Guidance Associate Registration
   ========================================================= */

.captcha-challenge {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.captcha-image-row {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.captcha-image {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.captcha-refresh-button {
    flex: 0 0 auto;
    box-sizing: border-box;
}

.captcha-answer-field,
.captcha-answer-field input {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/*
 * Phones and small devices:
 * Put the CAPTCHA picture and refresh button on separate rows
 * so neither element can be cut by the login/registration card.
 */
@media (max-width: 560px) {
    .captcha-challenge {
        margin-top: 14px;
        margin-bottom: 14px;
        padding: 10px;
    }

    .captcha-image-row {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .captcha-image {
        width: 100%;
        max-width: 100%;
        height: auto;
        aspect-ratio: 230 / 72;
        object-fit: contain;
    }

    .captcha-refresh-button {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        height: auto;
        padding: 9px 12px;
    }

    .captcha-answer-field {
        margin-top: 10px;
    }
}

/* Extra-small phones */
@media (max-width: 360px) {
    .captcha-challenge {
        padding: 8px;
    }

    .captcha-prompt {
        font-size: 12px;
        line-height: 1.4;
    }

    .captcha-answer-field input {
        font-size: 16px;
    }
}

/* =========================================================
   WALK-IN GMC TABLE - ACTION COLUMN WIDTH FIX
   ========================================================= */

.gmc-walkin-batch-table {
    min-width: 1280px;
    table-layout: fixed;
}

.gmc-walkin-batch-table th:first-child {
    width: 52px;
}

.gmc-walkin-batch-table th:nth-child(2) {
    width: 190px;
}

.gmc-walkin-batch-table th:nth-child(3) {
    width: 270px;
}

.gmc-walkin-batch-table th:nth-child(4) {
    width: 120px;
}

.gmc-walkin-batch-table th:nth-child(5) {
    width: 100px;
}

.gmc-walkin-batch-table th:nth-child(6) {
    width: 160px;
}

.gmc-walkin-batch-table th:nth-child(7) {
    width: 190px;
}

.gmc-walkin-batch-table th:nth-child(8) {
    width: 170px;
}

/* Do not break Action text letter-by-letter */
.gmc-walkin-batch-table th:last-child,
.gmc-walkin-batch-table td:last-child {
    overflow-wrap: normal;
    word-break: normal;
}

.gmc-walkin-batch-table td:last-child .button {
    width: auto;
    min-width: 130px;
    white-space: nowrap;
    text-align: center;
}

/* Keep the action cell readable even inside the scrollable table */
.gmc-walkin-batch-table td:last-child {
    padding-left: 12px;
    padding-right: 12px;
}

/* =========================================================
   FORM AND ACTION ALIGNMENT FIX
   Keeps search fields, selects, and action buttons aligned.
   ========================================================= */

/*
 * Remove the default field bottom margin only inside
 * horizontal action/filter rows.
 */
:is(
    .student-search-row,
    .misbehavior-search-row,
    .gmc-student-search,
    .gmc-new-request-form,
    .gmc-filter-row,
    .gmc-request-review-form,
    .gmc-release-form,
    .gmc-void-form,
    .gmc-ready-actions,
    .gmc-walkin-batch-filter,
    .sanctions-toolbar,
    .sanctions-clean-toolbar,
    .intervention-toolbar,
    .intervention-student-picker,
    .counseling-toolbar,
    .counseling-clean-toolbar,
    .discipline-add-row-form,
    .category-confirm-form,
    .policy-filter-row
) > .field {
    margin-bottom: 0;
}


/*
 * Inputs, selects, and buttons in the same row
 * use the same minimum height.
 */
:is(
    .student-search-row,
    .misbehavior-search-row,
    .gmc-student-search,
    .gmc-new-request-form,
    .gmc-filter-row,
    .gmc-request-review-form,
    .gmc-release-form,
    .gmc-void-form,
    .gmc-ready-actions,
    .gmc-walkin-batch-filter,
    .sanctions-toolbar,
    .sanctions-clean-toolbar,
    .intervention-toolbar,
    .intervention-student-picker,
    .counseling-toolbar,
    .counseling-clean-toolbar,
    .discipline-add-row-form,
    .category-confirm-form,
    .policy-filter-row
) > .button {
    min-height: 44px;
    height: 44px;
    box-sizing: border-box;
}


/*
 * Keep direct input/select controls consistent with buttons.
 */
:is(
    .student-search-row,
    .misbehavior-search-row,
    .gmc-student-search,
    .gmc-new-request-form,
    .gmc-filter-row,
    .gmc-request-review-form,
    .gmc-release-form,
    .gmc-void-form,
    .gmc-walkin-batch-filter,
    .sanctions-toolbar,
    .sanctions-clean-toolbar,
    .intervention-toolbar,
    .intervention-student-picker,
    .counseling-toolbar,
    .counseling-clean-toolbar
) .field > :is(input, select) {
    min-height: 44px;
    height: 44px;
    box-sizing: border-box;
}


/* ---------------------------------------------------------
   List of Misbehavior
   --------------------------------------------------------- */

.misbehavior-search-row {
    align-items: end;
}

.misbehavior-search-row .field {
    margin-bottom: 0;
}

.misbehavior-search-row > .button {
    min-height: 44px;
    height: 44px;
}


/* ---------------------------------------------------------
   GMC - Received By / Mark as Issued
   --------------------------------------------------------- */

.gmc-release-form {
    align-items: end;
}

.gmc-release-form .field {
    margin-bottom: 0;
}

.gmc-release-form > .button {
    min-height: 44px;
    height: 44px;
    align-self: end;
}


/* ---------------------------------------------------------
   Sanctions and Intervention filters
   --------------------------------------------------------- */

.sanctions-toolbar,
.intervention-toolbar,
.counseling-toolbar {
    align-items: end;
}

.sanctions-toolbar .field,
.intervention-toolbar .field,
.counseling-toolbar .field {
    margin-bottom: 0;
}

.sanctions-toolbar > .button,
.intervention-toolbar > .button,
.counseling-toolbar > .button {
    min-height: 44px;
    height: 44px;
}


/* ---------------------------------------------------------
   Mobile and narrow screens
   Buttons can grow normally when they stack.
   --------------------------------------------------------- */

@media screen and (max-width: 600px) {
    :is(
        .student-search-row,
        .misbehavior-search-row,
        .gmc-student-search,
        .gmc-new-request-form,
        .gmc-filter-row,
        .gmc-request-review-form,
        .gmc-release-form,
        .gmc-void-form,
        .gmc-walkin-batch-filter,
        .sanctions-toolbar,
        .sanctions-clean-toolbar,
        .intervention-toolbar,
        .intervention-student-picker,
        .counseling-toolbar,
        .counseling-clean-toolbar
    ) > .button {
        width: 100%;
        height: auto;
        min-height: 44px;
    }
}

/* =========================================================
   STANDARD EXPANDABLE FILTER UI
   Student Records
   School Year Repository
   School Year Student Filters
   List of Misbehavior
   Online GMC Requests
   ========================================================= */

.student-filter-options,
.misbehavior-filter-options,
.gmc-more-filters {
    width: 100%;
    margin-top: 12px;
    padding-top: 0;
    border-top: 0;
}

.student-filter-options > summary,
.misbehavior-filter-options > summary,
.gmc-more-filters > summary {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    list-style: none;
    cursor: pointer;

    color: var(--primary-blue-dark);
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--radius);

    font-size: 14px;
    font-weight: 700;

    transition:
        background 0.15s ease,
        border-color 0.15s ease;
}

.student-filter-options > summary::-webkit-details-marker,
.misbehavior-filter-options > summary::-webkit-details-marker,
.gmc-more-filters > summary::-webkit-details-marker {
    display: none;
}

.student-filter-options > summary:hover,
.misbehavior-filter-options > summary:hover,
.gmc-more-filters > summary:hover {
    background: #f8fbff;
    border-color: #b9cbe2;
}

.student-filter-options > summary:focus-visible,
.misbehavior-filter-options > summary:focus-visible,
.gmc-more-filters > summary:focus-visible {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
}


/*
 * Remove the old Student Records circular + icon
 * and any old GMC filter arrow.
 */
.student-filter-options > summary::before {
    display: none !important;
    content: none !important;
}

.gmc-more-filters > summary > span {
    display: none !important;
}


/*
 * Use the same simple ASCII indicator everywhere.
 * No emoji or special Unicode characters.
 */
.student-filter-options > summary::after,
.misbehavior-filter-options > summary::after,
.gmc-more-filters > summary::after {
    content: "+";
    flex: 0 0 auto;

    width: 22px;
    height: 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: var(--primary-blue-dark);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}

.student-filter-options[open] > summary::after,
.misbehavior-filter-options[open] > summary::after,
.gmc-more-filters[open] > summary::after {
    content: "-";
}


/* =========================================================
   STANDARD FILTER CONTROL SIZE
   ========================================================= */

/*
 * Prevent filter controls from stretching vertically
 * just because another field in the same row has a label.
 */
.student-filter-grid,
.misbehavior-filter-grid,
.gmc-release-filter-grid {
    align-items: end;
}

.student-filter-grid .field,
.misbehavior-filter-grid .field,
.gmc-release-filter-grid .field {
    min-width: 0;
    margin-bottom: 0;
    align-content: end;
}


/*
 * All filter input/select boxes use the same normal height.
 */
.student-filter-grid .field > select,
.student-filter-grid .field > input,
.misbehavior-filter-grid .field > select,
.misbehavior-filter-grid .field > input,
.gmc-release-filter-grid .field > select,
.gmc-release-filter-grid .field > input {
    width: 100%;
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    box-sizing: border-box;
}


/*
 * Student Records currently has several hidden labels
 * plus one visible "Rows Per Page" label.
 * Fixed control height prevents the other selects
 * from stretching to the full label height.
 */
.student-filter-grid .field > select {
    align-self: end;
}


/* Keep Rows Per Page aligned with the other filters. */
.student-page-size {
    align-content: end;
}

.student-page-size > span {
    margin-bottom: 0;
}

.student-page-size > select {
    height: 44px;
    min-height: 44px;
}


/* =========================================================
   FILTER CONTENT SPACING
   ========================================================= */

.student-filter-options > .student-filter-grid,
.misbehavior-filter-options > .misbehavior-filter-grid,
.gmc-more-filters > .gmc-release-filter-grid {
    margin-top: 12px;
    padding-top: 0;
}


/* =========================================================
   RESPONSIVE FILTER GRIDS
   ========================================================= */

@media (max-width: 1100px) {
    .student-filter-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .student-filter-grid,
    .misbehavior-filter-grid,
    .gmc-release-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .student-filter-grid,
    .misbehavior-filter-grid,
    .gmc-release-filter-grid {
        grid-template-columns: 1fr;
    }

    .student-filter-options > summary,
    .misbehavior-filter-options > summary,
    .gmc-more-filters > summary {
        min-height: 44px;
        padding: 10px 12px;
    }
}
/* =========================================================
   WALK-IN GMC TABLE
   Action column should scroll normally with the table
   ========================================================= */

.gmc-walkin-batch-table.has-sticky-action th:last-child,
.gmc-walkin-batch-table.has-sticky-action td:last-child {
    position: static !important;
    right: auto !important;
    z-index: auto !important;
    box-shadow: none !important;
}

/* Match the Action header with the other table headers */
.gmc-walkin-batch-table.has-sticky-action thead th:last-child {
    background: #edf3f8 !important;
    color: #33465e !important;
}

/* Body cells stay the same as the other columns */
.gmc-walkin-batch-table.has-sticky-action tbody td:last-child {
    background: transparent !important;
}

/* Give the Action column enough normal width */
.gmc-walkin-batch-table th:last-child,
.gmc-walkin-batch-table td:last-child {
    width: 170px;
    min-width: 170px;
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
}

/* Keep action buttons readable */
.gmc-walkin-batch-table td:last-child .button {
    width: auto;
    min-width: 130px;
    white-space: nowrap;
}

/*
 * The entire table is intentionally wider than the container.
 * Users can horizontally scroll to reach the Action column.
 */
.gmc-walkin-batch-table {
    min-width: 1280px;
}

/* =========================================================
   ABOUT PAGE - PROJECT CREDITS
   Clean, formal, neutral design
   ========================================================= */

.about-developer-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 18px;
    border-top: 1px solid #d9e0e8;
    border-bottom: 1px solid #d9e0e8;
}

.about-person {
    min-width: 0;
    padding: 20px 18px;
    background: transparent;
}

.about-developer-grid .about-person + .about-person {
    border-left: 1px solid #d9e0e8;
}


/* Name */
.about-person-name {
    margin: 0 0 7px;

    color: #27384b;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}


/* Role */
.about-person-role {
    margin-bottom: 8px;

    color: #68778a;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
}


/* Email / contact */
.about-person-contact {
    display: inline-block;
    max-width: 100%;

    color: #506981;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;

    text-decoration: none;
    overflow-wrap: anywhere;
}

.about-person-contact:hover {
    color: #27384b;
    text-decoration: underline;
}

.about-person-contact:focus-visible {
    outline: 1px solid #506981;
    outline-offset: 3px;
}


/* School affiliation */
.about-affiliation {
    margin-top: 18px;
    color: #68778a;
    font-size: 14px;
    line-height: 1.55;
}

.about-affiliation p {
    margin: 2px 0;
}


/* Adviser section */
.about-adviser-block {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid #d9e0e8;
}

.about-adviser-block > .eyebrow {
    margin-bottom: 10px;
}

.about-adviser {
    max-width: 420px;
    padding: 14px 0 0;
}


/* No decorative effects */
.about-person,
.about-adviser {
    border-radius: 0;
    box-shadow: none;
}


/* Responsive */
@media (max-width: 800px) {
    .about-developer-grid {
        grid-template-columns: 1fr;
    }

    .about-developer-grid .about-person + .about-person {
        border-left: 0;
        border-top: 1px solid #d9e0e8;
    }
}

@media (max-width: 520px) {
    .about-person {
        padding: 16px 4px;
    }

    .about-person-name {
        font-size: 14px;
    }

    .about-person-role,
    .about-person-contact {
        font-size: 12.5px;
    }
}