/* RenalCare360 - Site Styles */
/* Bootstrap is loaded via CDN in HTML files */
/* This file contains custom site-wide styles */

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* -------------------------------------------------------------------------
   Top navigation — keep all menu items visible at 100% zoom on desktop.

   The staff menu is 9 groups wide, so it does not fit on one line on a
   1366px / 1440px laptop at 100% browser zoom. Bootstrap 4's
   .navbar-expand-lg sets flex-wrap:nowrap on .navbar-nav, so overflowing
   groups were clipped. We wrap NAV ITEMS and hide group icons at desktop
   widths so more labels fit before a second row is needed.

   IMPORTANT: do NOT set overflow-x/y on .navbar-collapse or .navbar-nav
   at the desktop breakpoint. Any overflow other than "visible" creates a
   scroll/clip container that hides Bootstrap's absolute-positioned
   .dropdown-menu, making every top-nav dropdown appear dead (menu
   toggles "show" but nothing is painted). Wrapping covers overflow
   without needing a scroll strip.

   Only .navbar-nav wraps. The outer .container-fluid keeps Bootstrap's
   flex-wrap:nowrap so brand | nav | account stay on one outer row.

   .navbar-collapse must use flex-basis:0 (not auto). With flex-basis:auto
   its base size is its full un-wrapped content width and it breaks to
   its own line before its contents can wrap.

   The navbar is .fixed-top and pages hardcode body{padding-top:80px},
   enough for a single-line bar only. syncNavbarOffset() in
   js/role-based-menu.js measures the bar and raises padding so wrapped
   rows never cover page content.

   Scoped to .fixed-top (staff navbar). Patient portal navbar is Bootstrap 5
   and not fixed — do not inherit these flex/link rules there.
   ------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .navbar.navbar-expand-lg.fixed-top > .container-fluid {
        flex-wrap: nowrap;
        align-items: center;
    }

    .navbar.navbar-expand-lg.fixed-top .navbar-collapse {
        flex-grow: 1;
        flex-basis: 0;
        min-width: 0;
        /* Must stay visible so absolute dropdown menus paint below the bar */
        overflow: visible;
    }

    .navbar.navbar-expand-lg.fixed-top .navbar-nav {
        flex-wrap: wrap;
        align-items: center;
        row-gap: 0.125rem;
        max-width: 100%;
        overflow: visible;
    }

    .navbar.navbar-expand-lg.fixed-top .navbar-nav .nav-item.dropdown {
        overflow: visible;
    }

    .navbar.navbar-expand-lg.fixed-top .navbar-nav .nav-link {
        font-size: 0.8125rem;
        padding: 0.35rem 0.4rem;
        white-space: nowrap;
        cursor: pointer;
    }

    /* Icons cost ~18px each × 9 groups; hide at desktop so items fit at 100% zoom */
    .navbar.navbar-expand-lg.fixed-top .navbar-nav .nav-link > i {
        display: none !important;
    }

    .navbar.navbar-expand-lg.fixed-top .navbar-nav .dropdown-menu {
        z-index: 1060;
    }

    .navbar.navbar-expand-lg.fixed-top .logged-in-user-info {
        flex-shrink: 0;
        margin-left: 0.5rem;
        position: relative;
        z-index: 1060;
        max-width: 14rem;
    }

    .navbar.navbar-expand-lg.fixed-top .logged-in-user-info .dropdown-toggle {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Below the expand breakpoint the menu becomes a burger panel. Cap the
   collapse (not the whole navbar) so open dropdowns/static menus still
   participate in the scrollable panel without trapping the closed bar. */
@media (max-width: 991.98px) {
    .navbar.fixed-top .navbar-collapse.show,
    .navbar.fixed-top .navbar-collapse.collapsing {
        max-height: calc(100vh - 56px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Account dropdown: avoid toast/pointer-event conflicts on all pages */
.logged-in-user-info .dropdown {
    position: relative;
}

.logged-in-user-info .dropdown-menu {
    z-index: 1061;
}