html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden; /* https://stackoverflow.com/questions/30099310/how-to-fix-background-content-shaking-issue-on-desktop-browser-triggered-by-scro */
}

@keyframes blue-shadow {
    from { box-shadow: 0 0 10px -10px #9ab8fd; }
    to { box-shadow: 0 0 10px 10px #9ab8fd; }
}

@keyframes yellow-shadow {
    from { box-shadow: 0 0 10px -10px #fddc9a; }
    to { box-shadow: 0 0 10px 10px #fddc9a; }
}

@keyframes purple-shadow {
    from { box-shadow: 0 0 10px -10px #6e3d6e; }
    to { box-shadow: 0 0 10px 10px #6e3d6e; }
}

@keyframes green-shadow {
    from { box-shadow: 0 0 10px -10px #74ff74; }
    to { box-shadow: 0 0 10px 10px #74ff74; }
}

@keyframes gray-shadow {
    from { box-shadow: 0 0 5px -5px #bababa; }
    to { box-shadow: 0 0 5px 5px #bababa; }
}

@keyframes report-blue-shadow {
    from { box-shadow: 0 0 5px -5px #0d2570; }
    to { box-shadow: 0 0 5px 5px #0d2570; }
}

@keyframes report-purple-shadow {
    from { box-shadow: 0 0 5px -5px #700084; }
    to { box-shadow: 0 0 5px 5px #700084; }
}

@keyframes report-green-shadow {
    from { box-shadow: 0 0 5px -5px #2d9c45; }
    to { box-shadow: 0 0 5px 5px #2d9c45; }
}

@keyframes report-yellow-shadow {
    from { box-shadow: 0 0 5px -5px #ffc800; }
    to { box-shadow: 0 0 5px 5px #ffc800; }
}

@keyframes report-teal-shadow {
    from { box-shadow: 0 0 5px -5px #1e8aa8; }
    to { box-shadow: 0 0 5px 5px #1e8aa8; }
}

@keyframes report-gray-shadow {
    from { box-shadow: 0 0 5px -5px #a0aab2; }
    to { box-shadow: 0 0 5px 5px #a0aab2; }
}

nav {
    margin-bottom: 20px;
}

div.footer {
    text-align: center;
    font-size: smaller;
}

div.card {
    margin-bottom: 20px;
}

.bus-button {
    background-color: #ffcf02;
    color: #000000;
    border: 1px solid #e3b800;
}

.bus-button:hover {
    background-color: #f7ca08;
}

.bus-container .card-header {
    background-color: #ffcf02;
    color: #000000;
}

.login-btn {
    background-color: #1a4a7d;
    color: #f0f0f0;
    border: 1px solid #0f3b6b;
    font-size: 125%;
    animation: blue-shadow 2s 20 alternate;
}

.login-btn div.box {
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
}

.login-btn div.box img {
    margin-right: 10px;
}

.login-btn:hover {
    background-color: #1a3a5d;
    color: #ffffff;
    border: 1px solid #062b53;
    cursor: pointer;
}

.impersonation-bar {
    width: 100%;
    background-color: #3c3c3c;
    color: #ededed;
    font-family: Roboto, sans-serif;
    border-bottom: 5px dashed #ededed;
}

.impersonation-bar .btn {
    background-color: #2a2a2a;
    color: #ededed;
    border: 1px solid #000000;
}

/* Mobile-only toggle to collapse the impersonation bar body (buttons/details). The body
   carries .collapse.d-md-block so it stays open on desktop (d-md-block wins) and collapses
   on phones; this toggle is hidden on desktop via d-md-none. */
.impersonation-bar-toggle {
    display: block;
    width: 100%;
    background: transparent;
    border: 0;
    color: #ededed;
    font-family: Roboto, sans-serif;
    font-size: 14px;
    padding: 8px 12px;
    text-align: center;
    cursor: pointer;
}
.impersonation-bar-caret {
    transition: transform 0.15s ease;
}
.impersonation-bar-toggle[aria-expanded="true"] .impersonation-bar-caret {
    transform: rotate(180deg);
}

.card-danger .card-header {
    background-color: #5a0e0e;
    color: #ffffff;
}

.card-danger .card-body {
    background-color: #f8dfdf;
    border: 1px solid #5a0e0e;
}

.card-danger .card-body .table td, .card-danger .card-body .table thead th {
    border-color: #e1c0be;
}

.blue-shadow-animate {
    animation: blue-shadow 2s 20 alternate;
}

.yellow-shadow-animate {
    animation: yellow-shadow 2s 20 alternate;
}

.green-shadow-animate {
    animation: green-shadow 2s 20 alternate;
}

.gray-shadow-animate {
    animation: gray-shadow 2s 20 alternate;
}

.transition-transform {
    transition: transform 0.3s ease;
}

.rotate-180 {
    transform: rotate(180deg);
}

.filter-glow {
    animation: glowPulse 1.5s infinite;
    box-shadow: 0 0 4px rgba(0, 123, 255, 0.6);
}

@keyframes glowPulse {
    0% { box-shadow: 0 0 4px rgba(0, 123, 255, 0.5); }
    50% { box-shadow: 0 0 8px rgba(0, 123, 255, 0.9); }
    100% { box-shadow: 0 0 4px rgba(0, 123, 255, 0.5); }
}
.filter-glow {
    animation: glowPulse 1.5s infinite;
    box-shadow: 0 0 4px rgba(0, 123, 255, 0.6);
}

/* pulsing glow in the badge's own color, set via the --badge-glow-color variable */
.badge-glow {
    --badge-glow-color: rgba(0, 123, 255, 0.75);
    animation: badgeGlowPulse 1.5s infinite;
    box-shadow: 0 0 4px 0 var(--badge-glow-color);
}

@keyframes badgeGlowPulse {
    0% { box-shadow: 0 0 4px 0 var(--badge-glow-color); }
    50% { box-shadow: 0 0 8px 3px var(--badge-glow-color); }
    100% { box-shadow: 0 0 4px 0 var(--badge-glow-color); }
}

.student-filter-chevron-transition {
    transition: transform 0.2s ease-in-out;
}

.student-filter-chevron-collapsed {
    transform: rotate(180deg);
}

#studentViewFiltersCard {
    position: sticky;
    top: 10px;
    z-index: 1020;
}

/* Active-filter badges in the Student view filters header: keep them grouped next to the
   title (pushing the clear/chevron controls to the right) on desktop; mobile.css drops them
   to their own left-aligned row. Hidden when there are no active filters. */
.student-view-filters-badges {
    margin-right: auto;
}
#studentViewFilterBadges:empty {
    display: none;
}

#studentOverviewScrollspyNav {
    position: sticky;
    top: 10px;
    align-self: flex-start;
    z-index: 1015;
}

#studentOverviewScrollspyNav .card {
    margin-bottom: 1rem;
}

#studentOverviewScrollspyNav .nav-link {
    padding: 0.25rem 0.45rem;
    font-size: 1rem;
}

#studentOverviewScrollspyNav .nav .nav .nav-link {
    font-size: 0.9rem;
}

body.student-overview-scrollspy-enabled {
    position: relative;
}

#studentOverviewScrollspyNavList .nav-link.active {
    font-weight: 600;
}

#studentOverviewScrollspyNavList .nav .nav-link.active {
    background-color: transparent;
    color: #007bff;
    border-left: 3px solid #007bff;
    border-radius: 0;
    font-weight: 500;
    padding-left: calc(0.6rem - 3px);
}

.student-summary-counts {
    margin-left: 0;
    margin-right: 0;
}

.student-summary-count-col {
    flex: 0 0 50%;
    max-width: 50%;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    margin-bottom: 0.5rem;
}

.student-summary-count-label-line {
    white-space: nowrap;
}

@media (min-width: 1700px) {
    .student-summary-count-col {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

@keyframes glowPulse {
    0% { box-shadow: 0 0 4px rgba(0, 123, 255, 0.5); }
    50% { box-shadow: 0 0 8px rgba(0, 123, 255, 0.9); }
    100% { box-shadow: 0 0 4px rgba(0, 123, 255, 0.5); }
}

.big-btn {
    padding: 15px;
    font-size: 125%;
}

/* Landing incident-type tabs: 2x2 grid on phones, single row of four at sm+. */
#incident_tab .nav-item {
    width: 50%;
}

@media (min-width: 576px) {
    #incident_tab .nav-item {
        width: 25%;
    }
}

.yellow-card .card-header {
    background-color: #ffbf00;
}

.yellow-card {
    border-color: #ffd000;
}

.green-card .card-header {
    background-color: #0d6621;
    color: #ffffff;
}

.green-card {
    border-color: #20923b;
}

.gray-card .card-header {
    background-color: #a6a6a6;
    color: #ffffff;
}

.gray-card {
    border-color: #a7a7a7;
}

.filepond--root {
    margin-bottom: 0;
}

.input-validation-success ~ .select2 .select2-selection {
    border: 2px solid #1086009d;
}

.input-validation-error ~ .select2 .select2-selection {
    border: 2px solid #8600009d;
}

.wide-badge {
    margin-right: 10px;
}

/* Keep district-defined note types from expanding the search incidents table. */
.incident-note-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    max-width: 18rem;
    vertical-align: bottom;
}

.incident-note-type-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chart-resource {
    max-width: 99%;
}

.student-element {
    margin-top: 10px;
    text-align: center;
}

/* .badge-iep {
    font-size: larger;
    color: #fefefe;
    background-color: #4e004e;
} */

.badge-truant {
    font-size: larger;
}

.fc-event {
    cursor: pointer;
}

div#incident_calendar a {
    color: #000000;
}

.calendar-event-complete .fc-event-title,
.calendar-event-complete .fc-list-event-title,
.calendar-event-complete .fc-list-event-title a,
.calendar-event-complete .fc-list-item-title,
.calendar-event-complete .fc-list-item-title a {
    text-decoration: line-through;
}

/* Mobile / small-screen responsive rules (incl. the FullCalendar toolbar stacking)
   live in mobile.css, loaded after this file. */

.location-sync-checkbox {
    width: 15px;
    height: 15px;
    border-radius: 5px;
    border: 2px solid #ffffff;
}

div.expiration-bar {
    width: 100%;
    background-color: #ffc400;
    color: #000000;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
}

.notification-detail-badge {
    cursor: pointer;
}

.notification-detail-message {
    font-size: smaller;
    color: #6c6c6c;
}

.darkblue-card .card-header {
    background-color: #080d42;
    color: #f0f0f0;
}

.darkblue-card {
    border-color: #080d42;
}

.help-button {
    color: #202020;
    font-size: 150%;
}

.help-button:hover {
    color: #000000;
    font-size: 150%;
}

span.redact-minor-replace-highlight {
    border-bottom: 3px solid #e2a900;
    font-weight: bold;
    font-size: larger;
    padding-bottom: 1px;
}

.redacted-minor-narrative-block {
    border-left: 5px solid #e2a900;
    padding-left: 20px;
}

.original-minor-narrative-block {
    border-left: 5px solid #414157;
    padding-left: 20px;
}

.sortable-handle {
    cursor: move;
	cursor: -webkit-grabbing;
}

.long-dropdown-scroll .action-code-class-list {
  max-height: clamp(200px, 50vh, 480px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Row accents */
.attn-marked   { border-left: 4px solid #28a745; } /* green */
.attn-unmarked { border-left: 4px solid #ced4da; } /* gray */
.attn-changed  { border-left: 4px solid #ffc107; } /* amber */

/* Status chip inside the “Attendance status” cell */
.attn-chip {
  display: inline-flex; align-items: center;
  font-size: .8rem; line-height: 1; padding: .15rem .4rem;
  border-radius: 10rem; background: #f8f9fa; color: #6c757d;
  border: 1px solid #e9ecef; margin-left: .5rem;
}
.attn-chip .dot {
  width: .5rem; height: .5rem; border-radius: 50%; display: inline-block; margin-right: .3rem;
  background: #adb5bd; /* default */
}
.attn-chip.marked  { color: #155724; border-color: #c3e6cb; background: #eaf7ea; }
.attn-chip.marked .dot { background: #28a745; }
.attn-chip.changed { color: #856404; border-color: #ffe8a1; background: #fffbea; }
.attn-chip.changed .dot { background: #ffc107; }

#attendance_activity_card .card-header { cursor: pointer; }
#attendance_activity_card .toggle-icon {
  transition: transform 0.2s ease;
  transform: rotate(0deg);
}
#attendance_activity_card .card-header:not(.collapsed) .toggle-icon {
  transform: rotate(180deg);
}

.student-badges {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.student-badges .badge {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  line-height: 1;
  padding: 2px 6px;
  font-size: 0.875rem;
  box-sizing: border-box;
}

.student-badges .badge i {
  line-height: 1;
  font-size: 1em;
}

.student-badges .badge:empty {
  display: none;
}

.badge-iep {
  background-color: #6f42c1;
  color: #fff;
  font-weight: 600;
}

div.report-link {
    background-color: #08194a;
    padding: 20px;
    color: #ffffff;
    border: 1px solid #05123a;
    margin-bottom: 10px;
}
div.report-link:hover {
    background-color: #030d2e;
    animation-name: report-blue-shadow;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-direction: normal;
    animation-iteration-count: 1;
}
div.report-link a, div.report-link a:hover {
    color: #ffffff;
    font-size: 125%;
}

div.report-link.report-link-purple {
    background-color: #3f004a;
}
div.report-link.report-link-purple:hover {
    background-color: #2c0034;
    animation-name: report-purple-shadow;
}

div.report-link.report-link-yellow {
    background-color: #f8c200;
    border-color: #c09100;
    color: #0f0f0f;
}
div.report-link.report-link-yellow:hover {
    background-color: #f8c200;
    border-color: #c09100;
    color: #000000;
    animation-name: report-yellow-shadow;
}
div.report-link.report-link-yellow a, div.report-link.report-link-yellow a:hover {
    color: #000000;
    font-size: 125%;
}

div.report-link.report-link-green {
    background-color: #0d6621;
    border-color: #065417;
    color: #ffffff;
}
div.report-link.report-link-green:hover {
    background-color: #0d6621;
    border-color: #065417;
    color: #ffffff;
    animation-name: report-green-shadow;
}
div.report-link.report-link-green a, div.report-link.report-link-green a:hover {
    color: #ffffff;
    font-size: 125%;
}

div.report-link.report-link-gray {
    background-color: #6b747d;
    border-color: #5e666d;
    color: #ffffff;
}
div.report-link.report-link-gray:hover {
    background-color: #6b747d;
    border-color: #5e666d;
    color: #ffffff;
    animation-name: report-gray-shadow;
}
div.report-link.report-link-gray a, div.report-link.report-link-gray a:hover {
    color: #ffffff;
    font-size: 125%;
}

div.report-link.report-link-teal {
    background-color: #134e5e;
    border-color: #104250;
    color: #ffffff;
}
div.report-link.report-link-teal:hover {
    background-color: #134e5e;
    border-color: #104250;
    color: #ffffff;
    animation-name: report-teal-shadow;
}
div.report-link.report-link-teal a, div.report-link.report-link-teal a:hover {
    color: #ffffff;
    font-size: 125%;
}

.air-datepicker { --adp-z-index: 2000; }

@keyframes field-error-flash {
    0%   { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7); border-color: #dc3545; }
    50%  { box-shadow: 0 0 0 8px rgba(220, 53, 69, 0); border-color: #dc3545; }
    100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); border-color: #dc3545; }
}
.field-error-flash {
    animation: field-error-flash 2s ease-out 4;
}
.field-error-flash-select2 {
    animation: field-error-flash 2s ease-out 4;
}

#reportsTabs.nav-tabs { border-bottom: 0; }
.reports-tab {
    font-weight: 500;
    padding: .6rem 1rem;
    border: 2px solid transparent !important;
    border-radius: .375rem .375rem 0 0;
    color: #495057;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.reports-tab .reports-tab-icon { transition: color .15s ease; }

.reports-tab-purple .reports-tab-icon { color: #3f004a; }
.reports-tab-teal   .reports-tab-icon { color: #134e5e; }
.reports-tab-navy   .reports-tab-icon { color: #00194a; }
.reports-tab-yellow .reports-tab-icon { color: #deae00; }
.reports-tab-green  .reports-tab-icon { color: #0d6621; }
.reports-tab-gray   .reports-tab-icon { color: #6b747d; }

.reports-tab-purple:hover { background-color: rgba(63,  0,  74, .08); }
.reports-tab-teal:hover   { background-color: rgba(19, 78,  94, .08); }
.reports-tab-navy:hover   { background-color: rgba( 0, 25,  74, .08); }
.reports-tab-yellow:hover { background-color: rgba(222,174,  0, .15); }
.reports-tab-green:hover  { background-color: rgba(13,102,  33, .10); }
.reports-tab-gray:hover   { background-color: rgba(107,116,125, .12); }

.reports-tab.active,
.reports-tab.active:focus,
.reports-tab.active:hover {
    background-color: #fff !important;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 4px;
    position: relative;
    z-index: 1;
}

.reports-tab-purple.active { border-color: #3f004a !important; color: #3f004a !important; }
.reports-tab-teal.active   { border-color: #134e5e !important; color: #134e5e !important; }
.reports-tab-navy.active   { border-color: #00194a !important; color: #00194a !important; }
.reports-tab-yellow.active { border-color: #deae00 !important; color: #8a6c00 !important; }
.reports-tab-green.active  { border-color: #0d6621 !important; color: #0d6621 !important; }
.reports-tab-gray.active   { border-color: #6b747d !important; color: #495057 !important; }

.reports-tab.active { border-bottom-color: #fff !important; }

.reports-tab-content {
    margin-top: -2px;
    position: relative;
    padding: 0 0 1rem 0;
}

/* Landing "recent incidents" table frame — a reports-style colored border that
   connects to the active tab; border-color is set per active tab in landing.js. */
.incidents-table-frame {
    border: 2px solid #dee2e6;
    border-radius: 0 0 .375rem .375rem;
    padding: 1rem;
    margin-top: -2px;
    position: relative;
}

/* PWA document viewer wrapper + standalone Back affordances.
   The viewer keeps installed-app users (iOS standalone has no browser chrome)
   on an HTML page with the navbar + a Back button instead of a raw PDF. */
.document-viewer-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px 0;
}
.document-viewer-title {
    font-weight: bold;
    margin: 0 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.document-viewer-actions {
    margin-left: auto;
    white-space: nowrap;
}
.document-viewer-frame {
    width: 100%;
    height: calc(100vh - 200px);
    min-height: 360px;
    border: 1px solid #dee2e6;
    border-radius: .25rem;
}
.document-pdf-render {
    height: calc(100vh - 200px);
    min-height: 360px;
    overflow-y: auto;
    background: #525659;
    border-radius: .25rem;
    padding: 12px;
    text-align: center;
}
.document-pdf-page {
    display: block;
    margin: 0 auto 12px auto;
    max-width: 100%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}
.document-viewer-loading {
    color: #fff;
    padding: 24px;
}
/* Custom "Share image" icon injected into the ApexCharts toolbar on iOS (replaces the
   built-in download menu, which iOS blocks). Sized/coloured to match the native tools. */
.apex-share-icon {
    display: inline-block;
    width: 20px;
    text-align: center;
    color: #6e8192;
}
.document-viewer-imagewrap {
    text-align: center;
}
.document-viewer-image {
    max-width: 100%;
    height: auto;
    border: 1px solid #dee2e6;
    border-radius: .25rem;
}
.standalone-floating-back {
    position: fixed;
    left: 12px;
    bottom: 12px;
    z-index: 1080;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}

/* Horizontal action/button bar */
.action-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 20px;
}

/* Per-letter action buttons (View/Download/Translate/...) */
.letter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.mass-notification-button {
    animation: mass-notification-glow 1.8s ease-in-out infinite;
}
.btn-warning.mass-notification-button { --mass-glow-color: rgba(255, 193, 7, 0.85); }
.btn-success.mass-notification-button { --mass-glow-color: rgba(40, 167, 69, 0.85); }
.btn-primary.mass-notification-button { --mass-glow-color: rgba(0, 123, 255, 0.85); }
@keyframes mass-notification-glow {
    0%, 100% { box-shadow: 0 0 3px 1px var(--mass-glow-color, rgba(255, 193, 7, 0.85)); }
    50%      { box-shadow: 0 0 8px 3px var(--mass-glow-color, rgba(255, 193, 7, 0.85)); }
}

.mass-notification-card {
    border: 2px solid #6c757d;
    border-radius: 0.4rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.mass-notification-card > .card-header {
    background-color: #e2e6ea;
    border-bottom: 2px solid #6c757d;
    font-size: 110%;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

.incident-participant-modal .modal-body {
    position: relative;
}
.incident-participant-modal .modal-body [id$="_search_container"] {
    min-height: 360px;
}
.incident-participant-modal .modal-body .select2-results__options {
    max-height: 260px;
}
/* Auto-redact dropdown in the per-student narrative block: btn-block on a
   dropdown-toggle only fills its .dropdown wrapper, so force the wrapper and
   toggle to span the full column width. */
.student-narrative-container > .dropdown {
    display: block;
    width: 100%;
}
.student-narrative-container > .dropdown > .dropdown-toggle {
    display: block;
    width: 100%;
}

/* Mobile / small-screen (<=575.98px) responsive rules moved to mobile.css. */

.student-quick-lookup-button-navbar {
    background-color: #00a3ff;
    color: #ffffff;
    margin-right: 20px;
    white-space: nowrap;
}

.student-quick-lookup-button-navbar:hover,
.student-quick-lookup-button-navbar:focus {
    background-color: #008ee0;
    color: #ffffff;
}

.student-quick-lookup-icon {
    display: inline-block;
    position: relative;
    line-height: 1;
    margin-right: 0.2rem;
}

.student-quick-lookup-icon-search {
    position: absolute;
    right: -0.45rem;
    bottom: -0.3rem;
    padding: 0.16rem;
    border-radius: 50%;
    background-color: #ffffff;
    color: #007bff;
    font-size: 0.5rem;
    box-shadow: 0 0 0 1px rgba(0, 123, 255, 0.2);
}

.student-quick-lookup-menu {
    width: 430px;
    max-width: calc(100vw - 24px);
    padding: 0;
    overflow: hidden;
    z-index: 1050;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.student-quick-lookup-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #dee2e6;
    background-color: #f8f9fa;
}

.student-quick-lookup-body {
    padding: 1rem;
}

.student-quick-lookup-search:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.student-quick-lookup-status {
    min-height: 1.25rem;
    margin-top: 0.5rem;
    font-size: 0.8rem;
}

.student-quick-lookup-results {
    max-height: 360px;
    overflow-y: auto;
    border-top: 1px solid #dee2e6;
}

.student-quick-lookup-result {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    text-align: left;
}

.student-quick-lookup-result:focus {
    z-index: 1;
    outline: 0;
    box-shadow: inset 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.student-quick-lookup-photo {
    flex: 0 0 52px;
    width: 52px;
    height: 64px;
    object-fit: cover;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    background-color: #f8f9fa;
    margin-right: 0.75rem;
}

.student-quick-lookup-result-content {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
}

.student-quick-lookup-result-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.student-quick-lookup-result-name {
    color: #212529;
    font-weight: 600;
    line-height: 1.25;
}

.student-quick-lookup-grade {
    flex: 0 0 auto;
    margin-left: 0.5rem;
}

.student-quick-lookup-badges,
.student-quick-lookup-result-meta {
    display: block;
    margin-top: 0.2rem;
    color: #6c757d;
    font-size: 0.8rem;
    line-height: 1.3;
}

.student-quick-lookup-badges .student-badges {
    margin: 0;
}

.student-quick-lookup-locations > .fa-school {
    margin-right: 0.25rem;
}

.student-quick-lookup-location {
    margin-right: 0.25rem;
    margin-bottom: 0.2rem;
    white-space: normal;
    text-align: left;
}

.student-quick-lookup-result-arrow {
    flex: 0 0 auto;
    color: #adb5bd;
    font-size: 0.75rem;
    margin-left: 0.75rem;
}

.student-quick-lookup-footer {
    padding: 0.75rem 1rem;
    border-top: 1px solid #dee2e6;
    background-color: #f8f9fa;
    font-size: 0.875rem;
}

@media (min-width: 992px) {
    .student-quick-lookup-navbar > .student-quick-lookup-menu {
        right: 0;
        left: auto;
    }
}

@media (max-width: 575.98px) {
    .student-quick-lookup-menu {
        width: calc(100vw - 24px);
    }

    .student-quick-lookup-results {
        max-height: 280px;
    }
}

@media (max-width: 767.98px) {
    ul.reviewer-navbar .student-quick-lookup-root.dropright > .student-quick-lookup-menu {
        top: 100%;
        right: auto;
        left: 0;
        margin-top: 0.125rem;
        margin-left: 0;
    }
}

/* Printing a document from the in-app viewer (the letter Print button opens the
   viewer with ?print=1 and auto-prints): drop all app chrome so only the rendered
   PDF pages (pdf.js canvases) / image print. */
@media print {
    /* Print only the rendered PDF: hide every top-level element, then reveal just the
       viewer page. body > * is future-proof against any chrome (navbar, footer,
       impersonation/expiration bars, modals) without having to name each one.
       Scope to `body:has(> .document-viewer-page)` so this only fires on the document
       viewer — main.css loads on every page, and an unscoped `body > *` would blank the
       printout of every normal page (student views, incidents, reports). */
    body:has(> .document-viewer-page) > * {
        display: none !important;
    }
    body:has(> .document-viewer-page) > .document-viewer-page {
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .document-viewer-bar {
        display: none !important;
    }
    /* The on-screen render is a fixed-height dark scroll box; iOS prints it as a
       clipped, on-screen-sized box instead of flowing the pages. Neutralize it so
       every canvas / previewed page flows onto the printed pages. .document-viewer-frame
       is the text-preview iframe, otherwise clamped to calc(100vh - 200px). */
    .document-pdf-render,
    .document-viewer-frame {
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow: visible !important;
        background: none !important;
        padding: 0 !important;
    }
    .document-pdf-page,
    .document-viewer-image {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-shadow: none !important;
        page-break-inside: avoid;
        page-break-after: always;
    }
    .document-pdf-page:last-child,
    .document-viewer-image:last-child {
        page-break-after: auto;
    }
}