/*
 * mobile.css - Mobile / small-screen responsive overrides, split out of main.css
 * (and admin.css). Loaded after main.css in every header so these breakpoint rules
 * keep their place at the end of the cascade. simpledu - www.simpledu.org
 */

/* FullCalendar header toolbar on small screens: by default the date title is
   crammed between the prev/next/today nav and the four view buttons, so it wraps
   and reads oddly. Stack the three toolbar chunks onto their own centered rows so
   the date title is legible and the button groups wrap cleanly. */
@media (max-width: 767.98px) {
    #incident_calendar .fc-header-toolbar.fc-toolbar {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
    #incident_calendar .fc-header-toolbar .fc-toolbar-chunk {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    #incident_calendar .fc-toolbar-title {
        font-size: 1.1rem;
        text-align: center;
    }
}

@media (max-width: 575.98px) {
    /* Infraction-description "Auto redact student name" dropdown: the .dropdown
       wrapper is already a full-width block, so widen the toggle to fill it. */
    .narrative-redact-toggle {
        display: block;
        width: 100%;
    }
    /* "Select location" button on the reviewer location-select page: full width on mobile. */
    .location-select-btn {
        display: block;
        width: 100%;
    }
    /* Approve-incident page: stack all the card buttons (redact, view contacts, split,
       add/edit/delete behavior-action-object, add attribute) full width on mobile. Scoped
       to .approve-incident-card so the modal step/next buttons are left untouched. */
    .approve-incident-page .approve-incident-card .btn {
        display: block;
        width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* Stacked buttons touch once full-width; add a gap between adjacent ones (Add behavior
       code / Copy to participant, Edit / Delete behavior, View contacts / Split, ...). */
    .approve-incident-page .approve-incident-card .btn + .btn {
        margin-top: 8px;
    }
    /* The primary Approve/Update incident button sits outside the cards; make it full width. */
    #approve_incident_button,
    #update_incident_button {
        display: block;
        width: 100%;
    }
    /* Badges default to white-space:nowrap, so long ones (e.g. "This action took less than
       a day") overflow the card on phones. Let them wrap within the card. */
    .approve-incident-page .badge {
        white-space: normal;
    }
    /* Incident participant cards (reporter/victim/witness/offender) stack thumbnail-over-name
       on narrow cards; stack their action buttons (View contacts, SIS, Delete, Replace, View
       summary) and the Add-participant buttons full width too. Exclude the offender name link
       button, which is a heading, not an action. */
    .incident-participant-block .btn:not(.view-student-overview-frame-button),
    .add-participant-button {
        display: block;
        width: 100%;
    }
    /* The full-width toggle button drops the "(Click to expand)" hint onto its own line;
       center it instead of leaving it left-aligned. */
    .collapse-expand-hint {
        display: block;
        text-align: center;
        margin-left: 0 !important;
        margin-top: 4px;
    }
    .action-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .action-bar > .btn {
        width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* Pending merge/split toolbar: the secondary buttons live in nested
       show/hide (#mergeActions / #splitActions) divs, so stack those too. */
    .action-bar-pending #mergeActions .btn,
    .action-bar-pending #splitActions .btn {
        width: 100%;
        margin-right: 0 !important;
        margin-bottom: 8px;
    }
    .letter-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .letter-actions > .btn {
        width: 100%;
    }
    /* Calendar page actions: stack View dashboard / Take event status. */
    #calendar_page_actions {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    #calendar_page_actions .calendar-page-action .btn {
        width: 100%;
        margin-right: 0 !important;
    }
    /* Admin card action buttons: stack full-width in the card footer/body. */
    .admin-page .card-footer .btn,
    .admin-page .card-body > .btn,
    .admin-page .card-body > form > .btn {
        display: block;
        width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .admin-page .card-footer .btn + .btn,
    .admin-page .card-body > .btn + .btn {
        margin-top: 8px;
    }
    /* Stack Document viewer bar */
    .document-viewer-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .document-back-btn {
        width: 100%;
        order: 1;
    }
    .document-viewer-actions {
        order: 2;
        margin-left: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
        white-space: normal;
    }
    .document-viewer-actions > .btn {
        width: 100%;
        margin-left: 0 !important;
    }
    .document-viewer-title {
        order: 3;
        margin: 0;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        text-align: center;
    }
    .report-card-body {
        padding: 1rem !important;
    }
    /* Report tiles use `col-auto` (content-width) + an inline min-width, so on phones
       short and long labels yield different tile widths — ragged and inconsistent.
       Force every tile to a uniform half-width (two per row) so they line up
       identically across the reports pages and the student-overview reports. */
    .reports-tab-content .d-flex > [class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
        min-width: 0 !important;
    }
    /* Tighten tile padding/label size on phones so long words (e.g. "Comprehensive")
       fit whole on a line and wrap as full words — never split mid-word. */
    .reports-tab-content div.report-link {
        padding: 12px 10px;
    }
    .reports-tab-content div.report-link a {
        font-size: 100%;
    }
    .student-summary-metrics {
        margin-left: 0 !important;
    }
    /* A lone report tile (e.g. the "Comprehensive student record totals" metrics
       card) spans the whole row and centers, instead of sitting in the left half. */
    .reports-tab-content .d-flex > [class*="col-"]:only-child {
        flex: 0 0 100%;
        max-width: 100%;
        text-align: center;
    }
    /* Student-overview reports: one tile per row on phones (the reports pages keep the
       two-per-row default above). Same specificity as that rule, so it must come after. */
    .reports-single-column .d-flex > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
    /* Student overview toolbox: full-width "View parent/guardian contacts". */
    #studentSectionToolbox .btn {
        display: block;
        width: 100%;
    }
    /* Student card action buttons (View student overview / View contacts): full width and
       stacked on mobile. The container is an inline display:flex row, so force column so
       multiple buttons (e.g. on notes) stack instead of squeezing side by side. */
    .student-overview-actions {
        width: 100%;
        margin-left: 0 !important;
        padding-left: 15px;
        padding-right: 15px;
        flex-direction: column;
    }
    .student-overview-actions .btn {
        display: block;
        width: 100%;
    }
    /* Convert page choice buttons ("Submit it myself" / "Return to submitter"): stack full
       width on mobile instead of sitting side by side. */
    #convert_submit_choice_button,
    #convert_return_choice_button {
        display: block;
        width: 100%;
        margin-right: 0 !important;
    }
    #convert_submit_choice_button {
        margin-bottom: 15px;
    }
    /* Convert action buttons: full width on mobile. */
    #convert_submit_button,
    #convert_return_button {
        display: block;
        width: 100%;
    }
    /* Minor & positive infraction edit (standard + reviewer): stack the in-card action
       buttons (Add a student, per-student remove/contacts/redact/add-action) full width on
       mobile. Scoped to .card so the modal buttons are left alone. */
    .minor-edit-page .card .btn,
    .positive-edit-page .card .btn {
        display: block;
        width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .minor-edit-page .card .btn + .btn,
    .positive-edit-page .card .btn + .btn {
        margin-top: 8px;
    }
    /* Filter card headers get cramped on phones; drop the "Clear filters" label so the
       button is a compact icon (its title tooltip keeps it clear). */
    .clear-filters-label {
        display: none;
    }
    /* Student view filters header: drop the active-filter badges to their own full-width,
       left-aligned row below the title; the title + clear button + chevron stay on the top
       row (chevron to the right of the clear button). */
    #studentViewFiltersHeader .student-view-filters-badges {
        order: 1;
        flex: 1 1 100%;
        margin-left: 0;
        margin-right: 0;
        margin-top: 6px;
        text-align: left;
    }
    /* Quick-entry menus open in different directions (dropdown-menu / -right /
       dropright) across the app, so on phones any of them can spill off-screen.
       Present the menu as a centered popup that is always fully in view. The
       !important overrides Popper's inline positioning transform. */
    .quick-entry-dropdown .dropdown-menu {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        transform: translate(-50%, -50%) !important;
        width: calc(100vw - 32px);
        max-width: 320px;
        max-height: 80vh;
        overflow-y: auto;
        z-index: 1050;
    }
    /* Incident-new form: stack every action button full-width and uniform on
       phones — Add reporter/victim/offender/witness, the participant card
       delete buttons, the location-details toggle, and submit/return. The
       modals live outside #incident_new, so their button groups are unaffected. */
    #incident_new .btn {
        display: block;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    /* Visibility-settings "Mass assign" buttons: half width on desktop (w-50), full width
       on mobile. button.* beats Bootstrap's .w-50 !important on specificity. */
    button.mass-assign-button {
        width: 100% !important;
    }
}