/* Mobile layout for the Sendiman dispatch screen.
   Everything that changes the layout lives inside the media query below, so the
   desktop design is untouched. Most of the legacy markup carries inline styles,
   which is why the overrides need !important. */

/* Mobile-only controls - never shown on desktop. */
.order-mobile-menu-btn,
.areas-menu-chevron,
.orders-panel-toggle {
    display: none;
}

/* The ⋮ order-menu button replaces right-click wherever there is no mouse: on phones, and on
   touch-first devices such as iPads (pointer: coarse), which otherwise keep the desktop layout.
   A desktop with a mouse matches neither, so it never shows the button. */
@media (max-width: 768px), (pointer: coarse) {
    .order-mobile-menu-btn {
        display: inline-block;
        float: left;
        margin: -4px 8px 0 0;
        padding: 2px 10px;
        font-size: 20px;
        line-height: 1;
        color: #2f68b2;
        background: #ffffff;
        border: 1px solid #c9d3e0;
        border-radius: 4px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
}

/* Touch tablets keep the desktop layout and dropdown, but the dropdown would open on top of the
   ⋮ button; drop it just below so the same button can close it again. (Phones use a bottom sheet.) */
@media (min-width: 769px) and (pointer: coarse) {
    .orderMenu {
        top: 44px !important;
    }
}

@media (max-width: 768px) {

    /* Only the root scrolls; overflow on body too would turn it into a 100%-high inner scroller. */
    html {
        overflow-x: hidden;
        overflow-y: auto;
    }

    /* Stack the panels vertically: areas, tabs, orders, daily stats - then the map below. */
    #main-container {
        display: flex;
        flex-direction: column;
    }

    /* ---------- Alerts are not shown on mobile ---------- */
    #alert-notification-list,
    #areasAlertsElements,
    .top-menu-kebab-alert-badge {
        display: none !important;
    }

    /* ---------- Areas menu: foldable, folded by default ---------- */
    .areas-menu {
        order: 1;
        position: relative !important;
        right: auto !important;
        width: 100% !important;
        height: auto !important;
        z-index: 3;
    }

    .areas-menu-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        direction: rtl;
        height: auto !important;
        padding: 14px 0 !important;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .areas-menu-chevron {
        display: inline-block;
        width: 8px;
        height: 8px;
        margin-left: 18px;
        border-right: 2px solid #000;
        border-bottom: 2px solid #000;
        transform: rotate(45deg);
        transition: transform 0.2s;
    }

    .areas-menu-open .areas-menu-chevron {
        transform: rotate(-135deg);
    }

    .areas-menu:not(.areas-menu-open) .areas-menu-list {
        display: none;
    }

    .areas-menu-list {
        max-height: 60vh;
        overflow-y: auto;
    }

    /* ---------- Top tabs bar ---------- */
    .top-menu {
        order: 2;
        width: 100% !important;
        height: auto !important;
        border-bottom: 1px solid #ededed;
    }

        .top-menu > div {
            display: flex;
            align-items: center;
            direction: rtl;
            min-height: 44px;
        }

    .top-menu-tabs {
        position: static !important;
        flex: 1;
        display: flex;
        gap: 8px;
        height: auto !important;
        margin: 0 !important;
        padding: 12px 8px 12px 4px;
        font-size: 12px;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none;
    }

        .top-menu-tabs::-webkit-scrollbar {
            height: 0;
        }

        .top-menu-tabs > span {
            margin: 0 !important;
        }

    .top-menu-actions {
        position: relative !important;
        left: auto !important;
        flex: none;
        height: auto !important;
        margin: 0 12px 0 16px !important;
    }

    /* ---------- Orders panel: foldable, open by default ---------- */
    .orders-panel-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 28px;
        height: 32px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .orders-panel-chevron {
        width: 8px;
        height: 8px;
        border-right: 2px solid #000;
        border-bottom: 2px solid #000;
        /* open = pointing up (tap to fold) */
        transform: translateY(2px) rotate(-135deg);
        transition: transform 0.2s;
    }

    .orders-collapsed .orders-panel-chevron {
        transform: translateY(-2px) rotate(45deg);
    }

    /* Folded: list and daily stats go away so the map sits right under the tabs. */
    .orders-collapsed .main-content,
    .orders-collapsed .orders-count-box {
        display: none !important;
    }

    /* ---------- Orders / runners / future orders list ---------- */
    .main-content {
        order: 3;
        position: relative !important;
        right: auto !important;
        width: 100% !important;
        height: 65vh !important;
        padding: 0 !important;
        margin-top: 10px;
        box-sizing: border-box;
    }

    .search-tab-container input {
        width: calc(100% - 24px) !important;
        box-sizing: border-box;
    }

    #orderStatusesBanner,
    #deliveryBoysStatusBanner {
        white-space: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

        #orderStatusesBanner label[style*="width:45px"],
        #deliveryBoysStatusBanner label[style*="width:45px"] {
            width: 22px !important;
        }

        #orderStatusesBanner span[style*="margin-left:20px"],
        #deliveryBoysStatusBanner span[style*="margin-left:20px"] {
            margin-left: 8px !important;
        }

    .orderElement {
        -webkit-touch-callout: none;
    }

    .order-row {
        width: auto !important;
        margin-left: 12px !important;
        margin-right: 12px;
        box-sizing: border-box;
    }

        /* Reserve room for the left-hand block (menu button, short id, minutes). */
        .order-row:first-child {
            padding-left: 130px;
        }

    /* The order menu is taller than the list box, so on phones it opens as a bottom sheet
       (fixed escapes the list's scroll clipping). The huge spread shadow dims the page behind it. */
    .orderMenu {
        position: fixed !important;
        top: auto !important;
        left: 8px !important;
        right: 8px;
        bottom: 8px;
        width: auto !important;
        max-height: 70vh;
        overflow-y: auto;
        border-radius: 12px !important;
        box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.35) !important;
        z-index: 1015 !important;
    }

    .runners-list-scroll {
        width: auto !important;
        padding-left: 0 !important;
    }

    .boyMenu {
        left: 10px !important;
        top: 44px !important;
        z-index: 5;
    }

        .boyMenu > div[style*="border-left: 10px solid white"] {
            display: none;
        }

    /* ---------- Daily stats card ---------- */
    .orders-count-box {
        order: 4;
        position: static !important;
        margin: 12px 16px 0 16px;
    }

        .orders-count-box [style*="width: 233px"] {
            width: 100% !important;
            box-sizing: border-box;
        }

    /* ---------- Map, below the lists ---------- */
    #map-container {
        width: calc(100% - 32px) !important;
        height: 55vh !important;
        margin: 12px 16px 16px 16px !important;
    }

    /* Orders folded: the map takes the rest of the screen under the tabs. */
    #main-container.orders-collapsed ~ #map-container {
        height: calc(100vh - 140px) !important;
    }

    /* ---------- Popups opened from the order menu ---------- */
    /* Status tracking opens a clone of #status-tracking-popup with id "status-tracking-popup_<orderId>",
       so target the clones by class. Scoped to #main-container so the inline copy inside the
       order-history modal keeps its own layout. */
    #main-container > .statusTrackingPopup {
        position: fixed !important;
        top: 60px !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        z-index: 1020 !important;
    }

    /* Above the areas bar (z-index 3) and the page; below the ui-bootstrap modals (1040+). */
    .popup-container,
    #boysInfoPopup {
        position: fixed !important;
        z-index: 1030 !important;
    }

        .popup-container > div {
            width: calc(100% - 24px) !important;
            max-width: 552px;
            max-height: calc(100% - 24px);
            overflow-y: auto;
        }
}