/*
 * BUILDERSBIDS UNIVERSAL RESPONSIVE SYSTEM V4
 *
 * Admin + GC + Sub + Sales Rep + shared portal pages.
 * UI ONLY.
 *
 * IMPORTANT:
 * - Never convert tables into cards.
 * - Never crush table columns.
 * - Wide screen = ordinary table.
 * - Narrow screen = horizontal table scrolling only when required.
 */

/* ---------- SAFE GLOBAL SIZING ---------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/*
 * Grid/flex descendants must be allowed to shrink to the viewport.
 */
main,
.main,
.main-content,
.content,
.page-content,
.dashboard-content,
.workspace-main,
.portal-content,
.layout,
.shell,
.app-shell,
.dashboard-shell,
.workspace {
    min-width: 0 !important;
    max-width: 100%;
}

/* ---------- SIDEBARS ---------- */

.sidebar,
aside.sidebar,
.side-nav,
.admin-sidebar,
.portal-sidebar {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* ---------- UNIVERSAL TABLE CONTAINER ---------- */

.bb-responsive-scroll {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;

    overflow-x: auto;
    overflow-y: visible;

    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

/*
 * Preserve the page's original table appearance.
 */
.bb-responsive-scroll > table {
    max-width: none;
}

/* Never use the old card conversion again. */
table.bb-responsive-table,
table.bb-responsive-table thead,
table.bb-responsive-table tbody,
table.bb-responsive-table tr,
table.bb-responsive-table th,
table.bb-responsive-table td {
    display: revert !important;
}

table.bb-responsive-table td::before,
table.bb-responsive-table th::before {
    content: none !important;
    display: none !important;
}

/* ---------- AUTOMATIC TOP SLIDER ---------- */

.bb-auto-hscroll {
    display: block;
    width: 100%;
    height: 18px;

    margin: 0 0 8px 0;

    overflow-x: scroll;
    overflow-y: hidden;

    background: transparent;
}

.bb-auto-hscroll[hidden] {
    display: none !important;
}

.bb-auto-hscroll-inner {
    height: 1px;
}

/* Chrome / Safari scrollbar presentation */
.bb-auto-hscroll::-webkit-scrollbar,
.bb-responsive-scroll::-webkit-scrollbar {
    height: 12px;
}

.bb-auto-hscroll::-webkit-scrollbar-track,
.bb-responsive-scroll::-webkit-scrollbar-track {
    background: #e8edf4;
    border-radius: 999px;
}

.bb-auto-hscroll::-webkit-scrollbar-thumb,
.bb-responsive-scroll::-webkit-scrollbar-thumb {
    background: #65768d;
    border: 2px solid #e8edf4;
    border-radius: 999px;
}

.bb-auto-hscroll::-webkit-scrollbar-thumb:hover,
.bb-responsive-scroll::-webkit-scrollbar-thumb:hover {
    background: #162c4b;
}

/* ---------- NARROW WINDOWS ---------- */

@media (max-width: 1180px) {

    /*
     * Do not let desktop data tables collapse into unreadable columns.
     *
     * JavaScript calculates an appropriate minimum width from the
     * table's real desktop structure.
     */
    .bb-responsive-scroll > table[data-bb-wide-table="1"] {
        width: max-content !important;
        max-width: none !important;
        table-layout: auto !important;
    }

    .bb-responsive-scroll > table[data-bb-wide-table="1"] th,
    .bb-responsive-scroll > table[data-bb-wide-table="1"] td {
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    /*
     * Short status text and buttons should never split letter-by-letter.
     */
    .bb-responsive-scroll .status,
    .bb-responsive-scroll .badge,
    .bb-responsive-scroll button,
    .bb-responsive-scroll .btn {
        word-break: normal !important;
    }
}

/* ---------- MEDIA ---------- */

img,
video,
iframe {
    max-width: 100%;
}

pre,
code {
    max-width: 100%;
}

/* =========================================================
   BUILDERSBIDS UNIVERSAL PORTAL MOBILE SHELL V5
   GC + SUB + SALES REP
   ========================================================= */

.bb-universal-mobile-header,
.bb-universal-menu-overlay {
    display: none;
}

@media (max-width: 1180px) {

    /*
     * Non-admin portal shell.
     * Desktop sidebar becomes an off-canvas navigation drawer.
     */

    body.bb-universal-portal-shell {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    body.bb-universal-portal-shell .layout {
        display: block !important;
        grid-template-columns: 1fr !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
    }

    body.bb-universal-portal-shell .layout > .main {
        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        margin-left: 0 !important;

        overflow-x: visible !important;
    }

    body.bb-universal-portal-shell .layout > .main > * {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /*
     * Sidebar becomes drawer.
     */
    body.bb-universal-portal-shell .layout > .sidebar {
        position: fixed !important;

        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;

        z-index: 10020 !important;

        width: min(320px, 86vw) !important;
        max-width: 86vw !important;
        min-width: 0 !important;
        height: 100dvh !important;

        margin: 0 !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        transform: translateX(-105%);
        transition: transform .22s ease;

        box-shadow: 18px 0 50px rgba(0, 18, 45, .28);
    }

    body.bb-universal-portal-shell.bb-universal-menu-open
        .layout > .sidebar {
        transform: translateX(0);
    }

    /*
     * Mobile top bar.
     */
    body.bb-universal-portal-shell .bb-universal-mobile-header {
        position: sticky;
        top: 0;
        z-index: 10010;

        display: flex;
        align-items: center;
        justify-content: space-between;

        width: 100%;
        min-height: 78px;

        padding: 14px 20px;

        background: #071d3d;
        border-bottom: 1px solid rgba(255,255,255,.12);

        box-shadow: 0 8px 24px rgba(0,18,45,.12);
    }

    .bb-universal-mobile-brand {
        display: flex;
        align-items: center;

        min-width: 0;
        max-width: calc(100% - 125px);
    }

    .bb-universal-mobile-brand img {
        display: block;

        width: auto !important;
        height: auto !important;

        max-width: 210px !important;
        max-height: 48px !important;

        object-fit: contain;
    }

    .bb-universal-mobile-brand-text {
        color: #fff;
        font-size: 25px;
        line-height: 1;
        font-weight: 900;
        letter-spacing: -.03em;
    }

    .bb-universal-mobile-brand-text span {
        color: #ffa20a;
    }

    .bb-universal-menu-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        gap: 10px;

        min-height: 48px;
        padding: 10px 17px;

        border: 1px solid rgba(255,255,255,.28);
        border-radius: 14px;

        background: rgba(255,255,255,.06);
        color: #fff;

        font: inherit;
        font-weight: 800;
        font-size: 17px;

        cursor: pointer;
    }

    .bb-universal-menu-button:hover {
        background: rgba(255,255,255,.12);
    }

    .bb-universal-menu-lines {
        display: grid;
        gap: 5px;
    }

    .bb-universal-menu-lines span {
        display: block;

        width: 26px;
        height: 2px;

        border-radius: 20px;
        background: currentColor;
    }

    /*
     * Dark backdrop behind open drawer.
     */
    body.bb-universal-portal-shell .bb-universal-menu-overlay {
        position: fixed;
        inset: 0;

        z-index: 10015;

        display: block;

        background: rgba(2, 14, 33, .62);
        backdrop-filter: blur(2px);

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transition:
            opacity .2s ease,
            visibility .2s ease;
    }

    body.bb-universal-portal-shell.bb-universal-menu-open
        .bb-universal-menu-overlay {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    body.bb-universal-portal-shell.bb-universal-menu-open {
        overflow: hidden !important;
    }

    /*
     * Stop hero sections/cards/grids from creating
     * whole-page horizontal overflow.
     */
    body.bb-universal-portal-shell .main section,
    body.bb-universal-portal-shell .main article,
    body.bb-universal-portal-shell .main .card,
    body.bb-universal-portal-shell .main .panel,
    body.bb-universal-portal-shell .main .hero {
        max-width: 100% !important;
        min-width: 0 !important;
    }
}

@media (max-width: 700px) {

    body.bb-universal-portal-shell
        .bb-universal-mobile-header {
        min-height: 70px;
        padding: 11px 14px;
    }

    .bb-universal-mobile-brand img {
        max-width: 180px !important;
        max-height: 42px !important;
    }

    .bb-universal-menu-button {
        min-height: 44px;
        padding: 8px 13px;
        font-size: 16px;
    }
}

/* END BUILDERSBIDS UNIVERSAL PORTAL MOBILE SHELL V5 */