/* BPBytes responsive breakpoints */

/*
 * Phones and tablets: the menu is a drawer. The icon rail is gone (icons alone did not say which module was which);
 * a hamburger button in the top bar opens the full menu with every module name over a dimmed page, and a tap on the
 * dimmed part or on a module closes it. The page itself uses the full width, so the "collapsed width" is zero here.
 */
.bpbytes-sidebar-backdrop {
    display: none;
}

@media (max-width: 991px) {
    :root {
        --bp-sidebar-collapsed-width: 0px;
    }

    .bpbytes-sidebar {
        width: min(var(--bp-sidebar-width), 86vw);
        z-index: 1060;
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform var(--bp-transition), visibility 0s linear 0.3s;
    }

    body.bpbytes-sidebar-expanded-mobile .bpbytes-sidebar {
        transform: none;
        visibility: visible;
        transition: transform var(--bp-transition);
    }

    body.bpbytes-sidebar-expanded-mobile .bpbytes-sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.45);
        z-index: 1050;
    }

    /* The round collapse button belongs to the desktop sidebar. */
    .bpbytes-sidebar__toggle {
        display: none;
    }

    #content.bpbytes-content {
        margin-left: 0;
    }

    .bpbytes-topbar,
    .bpbytes-header,
    .bpbytes-corner-fill,
    .bpbytes-footer {
        left: 0;
    }

    /* No sidebar beside the page: no curved corner either. */
    .bpbytes-topbar,
    .bpbytes-header {
        border-top-left-radius: 0;
        padding-left: 12px;
    }

    .bpbytes-corner-fill {
        display: none;
    }

    /* The top bar is menu, search, assistant, notifications and the profile picture. The calendar is a module in the
       menu, and the name and arrow beside the picture would crowd the search box. */
    .bpbytes-topbar__calendar-item,
    .bpbytes-profile__name,
    .bpbytes-profile__caret {
        display: none;
    }

    /* The dashboard is laid out in tables that grow to fit their widest dashlet, which made the whole page (and the
       top bar with it) wider than the screen. Fixed layout keeps the page at the screen width, and a wide dashlet
       table scrolls inside its own box instead. */
    #pagecontent > table,
    #pageContainer > table,
    #pageNum_0_div > table {
        table-layout: fixed;
        width: 100%;
    }

    .dashletPanel .bd {
        overflow-x: auto;
    }
}

/*
 * Every table.list.view / table.panelContainer is wrapped in this div by style.js's
 * wrapScrollableTables() — CSS alone can't add the wrapper (no template overrides for List/Edit/
 * Detail/Dashboard views), but it can define what the wrapper does once JS creates it: contain
 * horizontal overflow to just the table instead of the whole page. Not scoped to a media query —
 * an unnecessarily wide table is exactly as much of a problem on a narrow desktop window as on a
 * phone, and overflow-x:auto is a no-op (no scrollbar at all) whenever the table already fits.
 */
.bpbytes-table-scroll {
    overflow-x: auto;
    width: 100%;
}

/*
 * Mirrors SuiteP's own narrow-width swap for the Filter modal's tab bar (search.css hides
 * .searchTabHeader outright at every other width): below 460px the ACTIVE tab's own nav-link
 * hides and its matching plain-text .searchTabHeader shows instead, while the OTHER (inactive)
 * tab stays a real link so switching between Quick/Advanced Filter is still possible.
 */
@media (max-width: 460px) {
    #searchDialog .nav-tabs > li.active {
        display: none;
    }

    #searchDialog .searchTabHeader.active {
        display: block;
        margin: 0 0 10px;
        font-size: 15px;
        font-weight: 700;
        color: var(--bp-text);
    }
}

@media (max-width: 640px) {
    /* The core pagination toolbar's icon row was nowrap — with a narrow-enough viewport (after
       the sidebar/padding eat into it) there isn't room for search/filter/column-chooser icons
       plus the "records selected" text on one line, and nowrap just clips whatever doesn't fit
       instead of the icons remaining reachable. Wrapping is the standard toolbar fallback for
       that; .bpbytes-table-scroll above is still there as a fallback of its own for anything that
       still doesn't fit even wrapped. */
    td.paginationActionButtons:not([width]) {
        flex-wrap: wrap;
    }

    .bpbytes-topbar,
    .bpbytes-header {
        padding: 0 12px;
        gap: 10px;
    }

    .bpbytes-topbar__search {
        max-width: none;
    }

    .bpbytes-profile__name {
        display: none;
    }

    /* Tighter than the base rule's topbar+32px/36px/footer+26px (layout.css) - narrow screens
       don't have the room to spare. Overriding #content.bpbytes-content itself, same as the base
       rule, rather than #pagecontent - see layout.css's comment on that rule for why. */
    #content.bpbytes-content {
        padding: calc(var(--bp-topbar-height) + 14px) 14px calc(var(--bp-footer-height) + 14px);
    }

    /*
     * Tightening the notice/legal rows' own text padding for narrow screens — NOT
     * .bpbytes-footer itself, which is the outer left/right-positioned bar that must keep
     * spanning full-bleed edge to edge with zero padding of its own.
     */
    .bpbytes-footer__notice {
        padding-left: 14px;
        padding-right: 14px;
    }

    .bpbytes-footer__legal {
        padding-left: 14px;
        padding-right: 14px;
        gap: 10px;
    }

    .bpbytes-footer__legal span:last-child {
        display: none;
    }
}

/*
 * The Home dashboard's dashlet columns (dashboard.css: table-layout:fixed, 65%/35%) had no mobile
 * override at all — on a narrow screen that just crushes both columns into unusably thin strips
 * side by side instead of stacking them. table/tr/td forced to display:block turns each column
 * into its own full-width block, stacked in source order (left dashlet, then right).
 *
 * Scoped with `>` child combinators all the way down to MySugar.tpl's own top-level layout table
 * (#pageContainer > div#pageNum_x_div > table) specifically — a plain "#pageContainer table"
 * descendant selector also matched every individual dashlet's OWN inner listview table nested
 * many levels deeper inside it (e.g. My Compliance Status), since those cells carry `width`
 * attributes too. That forced only SOME of a dashlet table's rows/cells to display:block while
 * its header row stayed in normal table layout — a half-converted table, which is what was
 * rendering as overlapping/garbled rows on a narrow screen.
 */
@media (max-width: 767px) {
    #content.bpbytes-content #pageContainer > div > table,
    #content.bpbytes-content #pageContainer > div > table > tbody,
    #content.bpbytes-content #pageContainer > div > table > tbody > tr,
    #content.bpbytes-content #pageContainer > div > table > tbody > tr > td[width] {
        display: block !important;
        width: 100% !important;
    }

    #content.bpbytes-content #pageContainer > div > table > tbody > tr > td[width]:not(:first-child) {
        padding-left: 0 !important;
        padding-top: 20px;
    }
}

/* ---- Tablet and phone refinements ---- */

@media (max-width: 560px) {
    #content.bpbytes-content .bpbytes-welcome-greeting {
        padding: 16px 18px;
    }

    #content.bpbytes-content .bpbytes-welcome-greeting h2 {
        font-size: 19px;
    }

    #content.bpbytes-content .bpbytes-welcome-metrics {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    #content.bpbytes-content .bpbytes-metric-card {
        padding: 14px 8px;
    }
}

@media (max-width: 900px) {
    /* Edit / detail forms: label above value, one column, instead of the 4-column grid that
       pushed every input off the right edge of a phone. Only the form's own grid is stacked
       (">" combinators) - nested tables inside a value, such as the date/time field, stay tables. */
    #content.bpbytes-content table.panelContainer,
    #content.bpbytes-content table.panelContainer > tbody,
    #content.bpbytes-content table.panelContainer > tbody > tr,
    #content.bpbytes-content table.panelContainer > tbody > tr > td {
        display: block;
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
    }

    #content.bpbytes-content table.panelContainer > colgroup,
    #content.bpbytes-content table.panelContainer > tbody > tr > td:empty,
    #content.bpbytes-content table.panelContainer > tbody > tr > td.edit-view-field-shim {
        display: none;
    }

    #content.bpbytes-content table.panelContainer > tbody > tr {
        padding: 6px 0;
    }

    #content.bpbytes-content table.panelContainer > tbody > tr > td {
        padding: 4px 16px;
    }

    /* Date + time on one row, wrapping if the phone is too narrow for all five pieces */
    #content.bpbytes-content table.dateTime,
    #content.bpbytes-content table.dateTime > tbody {
        display: block;
        width: 100% !important;
    }

    #content.bpbytes-content table.dateTime > tbody > tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
    }

    #content.bpbytes-content table.dateTime > tbody > tr > td {
        display: block;
        width: auto !important;
        padding: 0;
    }

}

@media (max-width: 767px) {
    /* List views: show every column (SuiteP hid most of them on phones) and let the table scroll
       sideways inside its own wrapper, so the data is reachable instead of missing. */
    #content.bpbytes-content table.list th.hidden-xs,
    #content.bpbytes-content table.list td.hidden-xs {
        display: table-cell !important;
    }

    /* Tabs and filters wrap rather than overflow */
    #content.bpbytes-content .nav-tabs {
        display: flex;
        flex-wrap: wrap;
    }
}