/* =============================================================
   LEAD Web Studio - responsive layer for tprmap.com
   Loaded after the theme stylesheets so it can correct them.

   Why this file exists: the admin layout hardcoded
   style="margin-left:220px" inline on <main> and <footer>, which no
   stylesheet could override. Those inline styles were removed from the
   blades; the desktop offset is restored here and dropped below lg so
   the sidebar can go off-canvas on phones and tablets.
   ============================================================= */

/* ---------- ADMIN: desktop keeps the sidebar offset ---------- */
@media (min-width: 992px) {
    /* the theme ships 200px here while the sidebar is actually 220px wide,
       so this needs !important to beat html:not([dir="rtl"]) .sidebar-lg-show... */
    html body.app .app-body .main,
    html body.app .app-footer {
        margin-left: 220px !important;
    }
}

/* ---------- ADMIN: tablet and phone ---------- */
@media (max-width: 991.98px) {

    .app-body .main,
    .app-footer {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Sidebar slides in instead of stealing 220px of a 375px screen.
       The header burger already toggles .sidebar-show on <body>. */
    .app-body .sidebar {
        position: fixed;
        top: 55px;
        bottom: 0;
        left: 0;
        width: 220px;
        z-index: 1035;
        transform: translateX(-100%);
        transition: transform .25s ease;
    }

    body.sidebar-show .app-body .sidebar {
        transform: translateX(0);
    }

    /* dim the page while the menu is open, and let a tap close it */
    body.sidebar-show .app-body .main::before {
        content: '';
        position: fixed;
        top: 55px;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0, 0, 0, .45);
        z-index: 1030;
    }

    .app-body .aside-menu {
        transform: translateX(100%);
    }

    /* Wide data tables scroll inside their card instead of crushing the page */
    .dataTables_wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .dataTables_wrapper > .row > [class^="col-"],
    .dataTables_wrapper > .row > [class*=" col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .dataTables_filter,
    .dataTables_length {
        text-align: left;
        float: none;
    }

    .dataTables_filter input {
        width: 100%;
        margin-left: 0;
    }

    .app-body .card-body {
        padding: .75rem;
    }

    .app-body .breadcrumb {
        flex-wrap: wrap;
    }

    /* forms in the admin stack instead of sitting in half-width columns */
    .app-body form .col-md-3,
    .app-body form .col-md-4,
    .app-body form .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}


/* ---------- FRONTEND: header ---------- */
@media (max-width: 991.98px) {
    /* The top bar wrapped onto a third row (logo / currency / language) and grew to
       122px while the nav below it starts at 104px, so they overlapped by 18px.
       Taking the language switcher out of the flow keeps the bar at ~98px. */
    nav.first-nav .container {
        position: relative;
    }

    nav .switcher-popup {
        position: absolute !important;
        right: 104px;
        top: 12px;
        margin: 0 !important;
    }

    /* flag only - the word does not fit next to Post Ad */
    nav .switcher-popup span {
        display: none !important;
    }

    /* the "Tropical World" badge is absolutely positioned and ran past the edge */
    .globe.row {
        max-width: calc(100vw - 24px);
    }
}

/* ---------- FRONTEND: stray 12px of horizontal scroll ---------- */
@media (max-width: 991.98px) {
    /* pe-0 removes the right padding of the container while the row inside keeps
       its -12px gutter, so every page using this pattern scrolled 12px sideways */
    .container.pe-0 > .row,
    .container-fluid.pe-0 > .row {
        margin-right: 0 !important;
    }

    /* p-0 does the same on both sides */
    .container.p-0 > .row,
    .container-fluid.p-0 > .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* the "Tropical World" badge is absolute and stuck out past the right edge */
    .globe.row {
        max-width: 90px !important;
    }

    .globe.row p {
        font-size: 11px;
        line-height: 1.15;
    }
}

/* ---------- FRONTEND: listing grids ---------- */
@media (max-width: 767.98px) {
    /* these rows are col-3 at every breakpoint, so a 221px button sat in a 96px column */
    #residential-properties .row > [class^="col-"],
    #residential-properties .row > [class*=" col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    #residential-properties .row.justify-content-center {
        justify-content: flex-start !important;
    }

    #residential-properties h5 {
        margin-left: 0 !important;
        max-width: 100%;
    }

    #residential-properties .float-start,
    #residential-properties .float-end {
        float: none !important;
    }

    /* the container carries pe-0, so the row negative gutter leaked 12px past the edge */
    #residential-properties .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .globe.row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .btn {
        white-space: normal;
    }

    img {
        max-width: 100%;
        height: auto;
    }
}
