/* jobs - responsive fixes for this module only. Loaded after css/shared/responsive.css
   on every page in the area. See DOCS/Showcase-Mobile.md.

   Calendar layouts (Dispatch, Monthly Schedule, Team Scheduling, Routing Workbench)
   do not collapse: the side panel stacks above the board and the board scrolls
   inside its own container. */

@media (max-width: 1023.98px) {

    /* ---- Dispatch ---------------------------------------------------- */
    /* The page is sized to the shell's fixed height on desktop; on a phone the
       body scrolls, so each section carries its own height instead. */
    .dispatch-page {
        height: auto;
        overflow: visible;
    }

    .dispatch-toolbar {
        padding: 8px 12px;
    }

    .dispatch-toolbar .filter-buttons,
    .dispatch-toolbar .filter-group {
        flex-wrap: wrap;
    }

    .dispatch-body {
        flex-direction: column;
        overflow: visible;
    }

    /* Pending Jobs panel above the board, full width, capped so the board is
       still reachable without a long scroll. The collapse toggle keeps working. */
    .dispatch-body .jobs-panel:not(.collapsed) {
        order: -1;
        width: 100% !important;
        min-width: 0 !important;
        max-height: 340px;
        border-left: none;
        border-bottom: 1px solid #e2e8f0;
    }

    .dispatch-body .split-pane {
        overflow: visible;
    }

    /* Leaflet needs a real height or it collapses to nothing */
    .dispatch-body .map-section {
        height: 280px !important;
        min-height: 280px;
    }

    .dispatch-body .split-handle {
        display: none;
    }

    .dispatch-body .dispatch-section {
        height: 460px;
        min-height: 460px;
        overflow: hidden;
    }

    .dispatch-body .tech-list {
        width: 150px;
        min-width: 150px;
    }

    /* ---- Monthly Schedule -------------------------------------------- */
    .monthly-schedule-page {
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    .ms-body {
        flex-direction: column;
        overflow: visible;
    }

    .ms-sidebar {
        width: 100%;
        margin-right: 0;
        margin-bottom: 14px;
        max-height: 320px;
    }

    /* Seven day columns need ~640px; the calendar scrolls sideways inside its card */
    .ms-cal {
        overflow-x: auto;
        min-height: 560px;
    }

    .ms-weekdays,
    .ms-grid {
        min-width: 640px;
    }

    .ms-cal-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* ---- Routing Workbench ------------------------------------------- */
    /* The 420px plan column made the document wider than a phone, which let
       the module-tab scrollIntoView drag the whole viewport sideways. */
    .workbench-column,
    .workbench-column-wide {
        min-width: 0;
        flex-basis: 100%;
    }

    /* ---- Team Scheduling --------------------------------------------- */
    .team-sidebar {
        max-height: 320px;
    }

    /* ---- Page header with a single action (Service Quotes, Tasks) ----- */
    /* The shared two-up grid leaves a lone button at half width. */
    .page-header-actions > .btn:only-child,
    .page-header-actions > .btn-secondary + .btn-primary:last-child {
        grid-column: 1 / -1;
    }
}

/* Tablet tables: keep the identifying columns readable while the table scrolls */
@media (min-width: 768px) and (max-width: 1023.98px) {
    #jobs-table td:nth-child(2) {
        min-width: 240px;
    }

    #queue-table td:nth-child(2) {
        white-space: nowrap;
    }

    #quotes-table td:nth-child(2) {
        min-width: 200px;
    }
}

@media (max-width: 767.98px) {
    .dispatch-body .tech-list {
        width: 120px;
        min-width: 120px;
    }

    .dispatch-body .map-section {
        height: 240px !important;
        min-height: 240px;
    }
}