.table-order-hint{text-align:left;color:#5c6f87;font-size:.85rem;padding:6px 0 12px;font-weight:400}
/* Keep navigation reachable while viewing a drawer on a desktop. Mobile gets
   an explicit menu action beside the sticky return button. */
@media(min-width:901px){body:has(#attendance-view:not([hidden]).attendance-detail-open) .sidebar{z-index:3000}}
#attendance-detail-drawer .attendance-drawer-tools{position:sticky;top:0;z-index:3;display:flex;flex-wrap:wrap;gap:8px;padding-bottom:10px;background:#f5f8fc}
#attendance-detail-drawer .attendance-drawer-tools button{min-height:44px;width:auto;position:static}
@media(max-width:900px){body:has(#attendance-view:not([hidden]).attendance-detail-open) .sidebar.mobile-open{position:fixed;inset:0 0 auto;z-index:3001;max-height:90dvh;overflow:auto}}

/* Student filters wrap to the actual content width, including beside the
   desktop sidebar and when the toolbar is moved into the mobile header. */
.toolbar.student-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
}
.toolbar.student-toolbar > * { min-width: 0; max-width: 100%; box-sizing: border-box; }
.toolbar.student-toolbar > #student-search { flex: 1 1 16rem; }
.toolbar.student-toolbar > select { flex: 1 1 10rem; }
.toolbar.student-toolbar > #student-status-filter { flex-basis: 8rem; }
.toolbar.student-toolbar > .management-page-size-field {
  flex: 0 0 auto;
  min-width: 7rem;
  margin: 0;
}
.toolbar.student-toolbar > button {
  flex: 0 0 auto;
  width: auto;
  white-space: nowrap;
}
.toolbar.student-toolbar > :is(#refresh-students, #new-student) { min-width: 7rem; }
.toolbar.student-toolbar :is(input, select, button) { min-height: 48px; }
.toolbar.student-toolbar select:not([hidden]) { display: block; }
.toolbar.student-toolbar > .search-scope-summary {
  flex: 1 0 100%;
  overflow-wrap: anywhere;
}


/* R12: tablets use the collapsed navigation, so announcements must stay in
   workspace flow. Keep the existing phone and desktop layouts unchanged. */
@media (min-width: 761px) and (max-width: 1024px) {
  .admin-app .announcement-strip {
    position: relative;
    inset: auto;
    width: 100%;
  }
  .admin-app .announcement-content,
  .admin-app .announcement-content.is-running {
    width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    transform: none;
    animation: none;
  }
  .admin-app.announcement-pinned .workspace { padding-top: 12px; }
  .admin-app.announcement-pinned .topbar,
  .admin-app.announcement-pinned #page-sticky-header:has(#attendance-controls) {
    top: 0;
  }
}

/* Only a desktop's persistent sidebar needs to sit above the class preview
   backdrop. Do not cover the full-screen mobile drawer with its navigation. */
@media (min-width: 1025px) {
  body:has(#schedules-view:not([hidden]).class-detail-open:not(.class-manage-mode):not(.class-editor-open)) .sidebar {
    z-index: 3000;
  }
}

/* The mobile journal table is a block/card list; its caption must also be a
   full-width block instead of an anonymous table shrunk to one character. */
@media (max-width: 1023px) {
  #journals-view .list-panel table > caption.table-order-hint {
    display: block;
    width: 100%;
    box-sizing: border-box;
    white-space: normal;
  }
}

/* Mobile journal title owns a row; batch actions wrap below it. */
@media (max-width: 760px) {
  #journals-view .list-panel > .panel-heading {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  #journals-view .list-panel > .panel-heading > h2 {
    flex: none;
    width: 100%;
    margin: 0;
    white-space: nowrap;
  }
  #journals-view .list-panel > .panel-heading > .journal-bulk-actions {
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}