/* ============================================================
   RESPONSIVE FIXES
   Add this whole block to the END of custom_ayushi.css
   Fixes:
   1) WebPhone View / Emails in Queue / Calls in Queue overlapping on mobile
   2) NO LIVE CALL + icon toolbar (transfer/users/record/list/hangup/
      callbacks/call-log/dial-next) overlapping on mobile
   ============================================================ */

/* ---------- 1. TOP STATUS BAR (WebPhone View / Emails / Calls) ---------- */

/* Container that holds the 3 status links - let it wrap instead of overflowing */
.navbar-nav.float-left.mr-auto.ml-3.pl-1 {
    flex-wrap: wrap;
    row-gap: 8px;
}

.navbar-nav.float-left.mr-auto.ml-3.pl-1 > li.nav-item.dropdown {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
}

/* .btn-status had fixed 65px left/right padding - this is what breaks on mobile.
   Replaced with balanced, content-based padding that scales down responsively. */

@media (max-width: 767px) {

    /* Parent that holds the 3 buttons - stack them vertically, full width */
    .navbar-nav.float-left.mr-auto.ml-3.pl-1 > li.nav-item.dropdown {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 8px;
    }

    /* Each btn-status becomes a full width block, one per line.
       Original background/color/border-radius from .btn-status is untouched -
       we only override display, width and remove the huge fixed padding
       so the text fits on small screens instead of overlapping. */
    .btn-status {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
        padding-top: 11px !important;
        padding-bottom: 13px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        text-align: center;
        margin: 0 !important;
    }
}

@media (max-width: 400px) {
    .btn-status {
        font-size: 13px;
    }
}


/* ---------- 2. LIVE CALL STATUS + ICON TOOLBAR ROW ---------- */

/* Desktop: live call badge on the left, icon toolbar on the right (unchanged) */
.row.align-items-center {
    row-gap: 12px;
}

/* Mobile: stack - live call status on top, icon row below it, both full width */
@media (max-width: 768px) {

    .row.align-items-center {
        flex-direction: column;
        align-items: stretch !important;
    }

    /* Live call status - full width, centered */
    .row.align-items-center > .col-6.d-flex.align-items-center {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        justify-content: center;
        order: 1;
    }

    /* Icon toolbar - full width, wraps onto new lines instead of overlapping,
       centered instead of pushed to the far right */
    .row.align-items-center > .col-6.d-flex.justify-content-end.align-items-center.gap-4 {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        justify-content: center !important;
        flex-wrap: wrap;
        row-gap: 10px;
        order: 2;
        margin-top: 4px;
    }

    /* Shrink icon buttons a bit so more fit per row without crowding */
    .menu-icon {
        width: 34px;
        height: 34px;
        font-size: 14px;
        margin-right: 2px;
    }
}

@media (max-width: 420px) {
    .menu-icon {
        width: 30px;
        height: 30px;
        font-size: 13px;
    }

    .row.align-items-center > .col-6.d-flex.justify-content-end.align-items-center.gap-4 {
/*         gap: 8px !important; */
    }
}