/* BPBytes page shell: sidebar + topbar + content, with the curved-corner signature shape */

html, body {
    margin: 0;
    padding: 0;
    background: var(--bp-bg);
    color: var(--bp-text);
    font-family: var(--bp-font);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#bootstrap-container.bpbytes-shell {
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

/* ---- Sidebar ---- */
.bpbytes-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--bp-sidebar-width);
    background: linear-gradient(180deg, var(--bp-sidebar-bg), var(--bp-sidebar-bg-2));
    color: var(--bp-sidebar-text);
    display: flex;
    flex-direction: column;
    z-index: var(--bp-z-sidebar);
    transition: width var(--bp-transition);
    overflow: hidden;
}

body.bpbytes-sidebar-collapsed .bpbytes-sidebar {
    width: var(--bp-sidebar-collapsed-width);
}

.bpbytes-sidebar__brand,
.bpbytes-sidebar__nav {
    position: relative;
    z-index: 1;
}

.bpbytes-sidebar__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    height: var(--bp-topbar-height);
    padding: 0 20px;
    flex: 0 0 auto;
    border-bottom: 1px solid var(--bp-sidebar-border);
}

.bpbytes-logo-fallback {
    height: 40px;
    max-width: 200px;
    object-fit: contain;
}

/*
 * Two logo images always sit in the DOM (custom/themes/BPBytes/tpls/_headerModuleList.tpl) —
 * the full lockup, and company_logo_sort.png (a white version of the favicon's "bP" mark,
 * generated from custom/themes/BPBytes/images/sugar_icon.ico) for the collapsed rail, where the
 * full wide lockup has nowhere near enough room. CSS just swaps which one is visible, so
 * there's no reflow/asset-swap flash when the sidebar toggles.
 */
.bpbytes-sidebar__logo-full {
    height: 40px;
    max-width: 200px;
    object-fit: contain;
}

.bpbytes-sidebar__logo-mark {
    display: none;
    height: 40px;
    width: 40px;
    object-fit: contain;
}

body.bpbytes-sidebar-collapsed .bpbytes-sidebar__brand {
    padding: 0;
    justify-content: center;
}

body.bpbytes-sidebar-collapsed .bpbytes-sidebar__logo-full {
    display: none;
}

body.bpbytes-sidebar-collapsed .bpbytes-sidebar__logo-mark {
    display: block;
}

/* Floating circular toggle straddling the sidebar's right edge */
.bpbytes-sidebar__toggle {
    position: absolute;
    top: 26px;
    left: var(--bp-sidebar-width);
    transform: translateX(-14px);
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bp-surface);
    border: 1px solid var(--bp-border);
    color: var(--bp-text-muted);
    cursor: pointer;
    box-shadow: var(--bp-shadow);
    z-index: calc(var(--bp-z-sidebar) + 1);
    transition: left var(--bp-transition);
}

.bpbytes-sidebar__toggle:hover {
    color: var(--bp-primary);
}

.bpbytes-sidebar__toggle svg {
    transition: transform var(--bp-transition);
}

body.bpbytes-sidebar-collapsed .bpbytes-sidebar__toggle {
    left: var(--bp-sidebar-collapsed-width);
}

/* Flip the chevron pair so it always points the direction the next click will do */
body.bpbytes-sidebar-collapsed .bpbytes-sidebar__toggle svg {
    transform: rotate(180deg);
}

.bpbytes-sidebar__nav {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 12px 12px 16px;
}

.bpbytes-sidebar__nav::-webkit-scrollbar {
    width: 6px;
}

.bpbytes-sidebar__nav::-webkit-scrollbar-thumb {
    background: var(--bp-sidebar-hover);
    border-radius: 4px;
}

/* Corner-fill patch: sits behind the topbar/content's curved top-left corner so the
   curve appears to be cut out of the sidebar rather than floating on the page background */
.bpbytes-corner-fill {
    position: fixed;
    top: 0;
    left: var(--bp-sidebar-width);
    width: var(--bp-radius-xl);
    height: var(--bp-radius-xl);
    background: var(--bp-sidebar-bg);
    z-index: calc(var(--bp-z-header) - 1);
    transition: left var(--bp-transition);
}

body.bpbytes-sidebar-collapsed .bpbytes-corner-fill {
    left: var(--bp-sidebar-collapsed-width);
}

/* ---- Topbar ---- */
.bpbytes-topbar,
.bpbytes-header {
    position: fixed;
    top: 0;
    left: var(--bp-sidebar-width);
    right: 0;
    height: var(--bp-topbar-height);
    background: var(--bp-surface-alt);
    border-bottom: 1px solid var(--bp-border);
    border-top-left-radius: var(--bp-radius-xl);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 26px;
    z-index: var(--bp-z-header);
    transition: left var(--bp-transition);
}

body.bpbytes-sidebar-collapsed .bpbytes-topbar,
body.bpbytes-sidebar-collapsed .bpbytes-header {
    left: var(--bp-sidebar-collapsed-width);
}

/* ---- Content ---- */
/*
 * The 32px/36px/footer-clearance padding below used to live on #pagecontent instead of here - but
 * that div is only ever emitted by header.tpl/footer.tpl, and SuiteCRM's own ajax_load handling
 * (include/MVC/View/views/view.config.php) skips rendering those for ordinary in-app navigation:
 * SUGAR.ajaxUI.go() only ever replaces #content's innerHTML (include/javascript/ajaxUI.js), and
 * the ajax response for that path has no #pagecontent wrapper in it at all. That made the page's
 * inner spacing depend entirely on which of two unrelated code paths happened to render it: tight
 * with no #pagecontent on most in-app navigation, vs. this padding reappearing the moment
 * something triggers a genuine full page reload instead - e.g. a ListView's Studio tabs
 * (custom/include/MVC/View/views/view.list.php's renderStudioTabs()) whose links were never
 * wrapped in ajaxLink(), so clicking one is a real browser navigation, not an ajax one. #content
 * itself is never destroyed or rebuilt by ajax navigation (only its innerHTML is replaced), so
 * putting the padding here instead keeps the page's spacing the same regardless of which path
 * loaded it. #bpbytes-safety-counts and #pageContainer's own #pagecontent-presence workarounds
 * (dashboard.css/responsive.css) are removed along with this for the same reason - #content now
 * supplies this spacing to every child uniformly, so nothing needs its own copy or a fallback for
 * when #pagecontent is missing.
 */
#content.bpbytes-content {
    margin-left: var(--bp-sidebar-width);
    /* --bp-footer-total is kept in sync with the footer's real (possibly two-row) height by
       style.js's syncFooterHeight(), re-run on an interval/resize since a system notice row (or
       web fonts finishing loading) can make the footer taller than --bp-footer-height alone after
       the first measurement — without that, the LAST subpanel on a DetailView page rendered
       underneath the fixed footer, since --bp-footer-total was stuck at a too-short value. */
    padding: calc(var(--bp-topbar-height) + 16px) 20px calc(var(--bp-footer-total, var(--bp-footer-height)) + 26px);
    min-height: calc(100vh - var(--bp-footer-total, var(--bp-footer-height)));
    background: var(--bp-surface);
    transition: margin-left var(--bp-transition);
    box-sizing: border-box;
}

body.bpbytes-sidebar-collapsed #content.bpbytes-content {
    margin-left: var(--bp-sidebar-collapsed-width);
}

/* ---- Footer: fixed to the bottom of the viewport, always visible.
   Stacks as a column so an active system notice sits on its own row ABOVE the legal row,
   rather than squeezed into the same line. ---- */
.bpbytes-footer {
    position: fixed;
    bottom: 0;
    left: var(--bp-sidebar-width);
    right: 0;
    display: flex;
    flex-direction: column;
    background: var(--bp-surface);
    z-index: var(--bp-z-header);
    transition: left var(--bp-transition);
}

body.bpbytes-sidebar-collapsed .bpbytes-footer {
    left: var(--bp-sidebar-collapsed-width);
}

.bpbytes-footer__notice {
    flex: 0 0 auto;
    overflow: hidden;
    padding: 8px 26px;
    font-size: 12px;
    font-weight: 600;
    color: var(--bp-warning);
    background: var(--bp-warning-soft);
    border-top: 1px solid var(--bp-border);
}

.bpbytes-footer__notice marquee {
    color: var(--bp-warning);
}

.bpbytes-footer__legal {
    flex: 0 0 auto;
    height: var(--bp-footer-height);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 0 26px;
    font-size: 11.5px;
    color: var(--bp-text-faint);
    background: var(--bp-surface);
    border-top: 1px solid var(--bp-border);
    white-space: nowrap;
}

@media print {
    .bpbytes-sidebar, .bpbytes-topbar, .bpbytes-header, .bpbytes-corner-fill, .bpbytes-footer {
        display: none !important;
    }

    #content.bpbytes-content {
        margin-left: 0 !important;
        padding-top: 0 !important;
    }
}