/* Accent: #638007, the brand green -- the same one .main-btn, the Connexion pill and the
   .auth-card controls paint. It used to be #04a9f5, Datta Able's cyan, left over from the
   vendor dashboard theme; next to an olive-green brand it read as another site's menu.
   Backgrounds are its light tints (#eff4e2 selected, #f4f7ea hover).

   Unified sticky top menu for all logged-in dashboards (replaces the pcoded-navbar sidebar).
   Selectors are deliberately scoped under .dash-topnav with !important on the properties that
   legacy per-portal stylesheets (e.g. nfdcDash-added-styles-B.css's unscoped ".nav-link
   { background-color: #415500; }") also target, so this file always wins regardless of load
   order or which portal's legacy CSS happens to be loaded alongside it. */

.dash-topnav {
    position: sticky !important;
    top: 0;
    z-index: 1030;
    background: #fff !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
    padding: .5rem 1rem;
    flex-wrap: wrap;
}

.dash-topnav .navbar-brand img {
    max-height: 36px;
}

/* At expanded (desktop, >=992px) widths, keep the brand/logo and the nav items on the SAME row
   instead of letting the brand wrap onto its own line above them: .dash-topnav is itself a flex
   container of [brand, toggler, .navbar-collapse], and its base flex-wrap: wrap (needed below,
   for the mobile toggler layout) was letting that top-level row split in two whenever the brand
   plus every nav item together didn't fit -- which .navbar-nav's own nowrap (below) made *more*
   likely to happen, not less, since items could no longer shrink by wrapping their own text. */
@media (min-width: 992px) {
    .dash-topnav {
        flex-wrap: nowrap;
    }

    .dash-topnav .navbar-collapse {
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* NOT overflow-x: hidden/auto here: every dropdown-menu (Roles, Settings, Documentation,
   language) is a position: absolute child of .navbar-collapse and extends below its box to
   render -- clipping/scrolling this container clips the dropdowns themselves, closed-looking
   even though they did technically open. Items are sized to fit without needing this at all
   (see font-size/padding on .nav-link below); if something still doesn't fit, letting it extend
   past the edge is far less broken than silently eating every dropdown in the nav. */

/* share/2025/brand.php renders both an .iconOnly and a .fullLogo image (a leftover of the old
   pcoded sidebar, which showed just the icon when collapsed). Only nfdcDashboard/cusmDashboard's
   own brand-specific stylesheets defined the show/hide toggle, so now that brand.php is shared by
   every layout (including the public ones, which never loaded those stylesheets), both images
   rendered stacked on top of each other. Defined here instead so it applies everywhere. */
.dash-topnav .b-brand .iconOnly {
    display: none;
}

.dash-topnav .b-brand .fullLogo {
    display: block;
}

.navbar-collapsed .dash-topnav .b-brand .iconOnly {
    display: block;
}

.navbar-collapsed .dash-topnav .b-brand .fullLogo {
    display: none;
}

.dash-topnav .navbar-nav {
    align-items: center;
    flex-wrap: nowrap;
}

/* Top-level items (Home, Roles, Recipes, Contact, Documentation, Settings, the name/email
   display, Two-step verification, Logout, ...) must stay one row of single-line labels --
   without white-space: nowrap, the longer ones (the identity display, "Two-step verification")
   wrap onto a second line as soon as the row gets even slightly tight, which then drags
   everything after it down too since they're all flex siblings in the same row. */
.dash-topnav .navbar-nav .nav-link,
.dash-topnav .navbar-nav .nav-link.dropdown-toggle {
    color: #313a46 !important;
    background-color: transparent !important;
    font-weight: 500;
    font-size: .9rem;
    padding: .45rem .55rem;
    line-height: 1.4 !important;
    white-space: nowrap;
}

.dash-topnav .navbar-nav .nav-link:hover,
.dash-topnav .navbar-nav .nav-link:focus {
    color: #638007 !important;
}

.dash-topnav .dropdown-menu {
    display: none;
    border: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
    padding: .5rem 0;
    background-color: #fff !important;
    max-height: 80vh;
    overflow-y: auto;
    /* ~1.75x Bootstrap's default 10rem dropdown min-width, so longer labels (e.g. "Province
       programs") fit on one line instead of wrapping -- max-width is a safety net so it can't
       overflow a narrow mobile viewport now that it's wider than the screen can be on some phones. */
    min-width: 17.5rem;
    max-width: calc(100vw - 2rem);
}

.dash-topnav .dropdown-menu.show {
    display: block !important;
}

.dash-topnav .dropdown-item {
    padding: .45rem 1.25rem;
    font-size: .9rem;
    color: #313a46 !important;
    background-color: transparent !important;
    white-space: normal;
}

.dash-topnav .dropdown-item:hover,
.dash-topnav .dropdown-item:focus {
    background-color: #f4f7ea !important;
    color: #638007 !important;
}

.dash-topnav .dropdown-header {
    color: #8a94a6;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700;
    padding: .5rem 1.25rem .15rem;
}

/* Every dropdown-menu in this nav -- Settings, Documentation, language, and Roles (including
   each role-category's own option list) -- renders as one plain single-column list using the
   base .dropdown-menu rules above; nothing here needs its own width/columns/flex layout. This
   used to be two special cases (.mega with CSS column-count for Staff/Coordinator, .mega-roles
   with flex-wrap for the Roles panel as a whole) that made the menu look and behave differently
   depending on which one you opened -- removed in favor of one consistent shape everywhere. */
/* Each nested group (Roles > role name > Control Panel > section > tool, Documentation >
   Training Guides, ...) is a click-to-expand toggle (Bootstrap's own .collapse component -- no
   custom JS needed) rather than always-open. Not scoped to .mega-roles: the same markup/behavior
   is used for any nested group in any dropdown, not just the Roles mega-menu, so the styling has
   to apply everywhere it appears. Text styling (color/size/weight) intentionally matches
   .dropdown-item exactly, regardless of nesting depth -- one uniform look for every level of the
   menu, same as the top nav's own .nav-link, rather than the toggle-vs-leaf / depth-0-vs-deeper
   distinctions this used to have. */
.dash-topnav .role-category-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .45rem 1.25rem;
    font-size: .9rem;
    font-weight: 500;
    color: #313a46;
    cursor: pointer;
    text-decoration: none;
}

.dash-topnav .role-category-toggle:hover {
    color: #638007;
}

.dash-topnav .role-category-caret {
    font-size: .7rem;
    margin-left: .5rem;
    transition: transform .15s ease-in-out;
}

.dash-topnav .role-category-toggle[aria-expanded="true"] .role-category-caret {
    transform: rotate(180deg);
}

/* Indent each nesting level a bit further than the last (Roles > Administrator > Control Panel >
   Users > All Users, up to 3 .collapse ancestors deep today), so depth reads visually instead of
   every level sharing the same left edge now that toggles and leaf items are also styled
   identically (see the uniform color/size/weight above). Descendant selectors, not child (>):
   what matters is how many .collapse ancestors an item has, not whether they're its immediate
   parent. Each rule below is more specific (one more .collapse class) than the last, so the
   cascade naturally picks the deepest one that applies without needing !important. */
.dash-topnav .collapse .role-category-toggle,
.dash-topnav .collapse .dropdown-item {
    padding-left: 2rem;
}

.dash-topnav .collapse .collapse .role-category-toggle,
.dash-topnav .collapse .collapse .dropdown-item {
    padding-left: 2.75rem;
}

.dash-topnav .collapse .collapse .collapse .role-category-toggle,
.dash-topnav .collapse .collapse .collapse .dropdown-item {
    padding-left: 3.5rem;
}

.dash-topnav .collapse .collapse .collapse .collapse .role-category-toggle,
.dash-topnav .collapse .collapse .collapse .collapse .dropdown-item {
    padding-left: 4.25rem;
}

/* "active" styling for the currently-open section, replacing the old pcoded-trigger/active-link classes.
   Needs to read as clearly "selected" even while the dropdown is closed, so it gets its own pill
   background/underline rather than just the (barely different from :hover) text color change.
   Selectors repeat the ".navbar-nav" ancestor from the base ".nav-link"/".dropdown-toggle" reset rules
   above so this wins on specificity (both use !important) instead of only on source order.
   The active-link script (bottom of dashboard_topnav.php) adds .active directly to the matched
   <a> itself -- never to its parent <li> -- so ".nav-link.active" is the selector that actually
   needs to match; ".nav-item.active > .nav-link" never does (nothing ever puts .active on the
   <li>) and was silently leaving every plain top-level link (Home, Recipes, Contact, ...)
   unstyled despite correctly having the class, while only .dropdown-toggle/.role-category-toggle
   items (styled separately, by class on the element itself) visibly highlighted. */
   :not(.main-btn) excludes the Connexion pill: the active-link script marks it too when you
   are on /login, and this rule's selector ties with the one painting that button solid green
   (four classes each, both !important), so whichever file loaded last won -- the button came
   out a washed pale pill on the one page it matters most. It is a call to action, not a
   section marker; it should never wear the selected pill. */
.dash-topnav .navbar-nav .nav-link.active:not(.main-btn),
.dash-topnav .navbar-nav .dropdown-toggle.active {
    color: #638007 !important;
    background-color: #eff4e2 !important;
    font-weight: 600;
    border-radius: .5rem;
    box-shadow: inset 0 -2px 0 #638007;
}

.dash-topnav .dropdown-item.active,
.dash-topnav .role-category-toggle.active {
    background-color: #eff4e2 !important;
    color: #638007 !important;
    font-weight: 600;
}

/* the pcoded sidebar is gone: reclaim the space Datta Able's vendor CSS otherwise reserves for it */
.pcoded-main-container {
    margin-left: 0 !important;
}

.pcoded-header.headerpos-fixed ~ .pcoded-main-container,
.pcoded-main-container {
    padding-top: 0 !important;
}

@media (max-width: 991.98px) {
    .dash-topnav .navbar-collapse {
        max-height: 80vh;
        overflow-y: auto;
    }

    .dash-topnav .dropdown-menu {
        box-shadow: none;
        padding-left: 1rem;
    }
}