/* TRACKERS HEADER - E20-4068.
   On every Trackers-group page the top chrome used to be two stacked
   blocks: the Trackers menu (templates/header-3af2627953.html, the ul with
   ng-controller="TrackersCtrl") at 60px (78px once a label wrapped), and
   the bell / search / client switch / user list floated UNDERNEATH it at
   another 60px. Now:

   - the container is a flex row, so the controls sit at the right of the
     menu's FIRST line and the menu wraps its own items beneath itself as
     needed - the controls can never end up on a line of their own;
   - each menu line is 42px (link padding 12px instead of 21px), so the
     header is 42px when the menu fits on one line and 84px when it needs
     two, against 120-138px before;
   - a small grey pipe separates the menu items.

   style.css is compiled from less/ - this file is deliberately separate,
   loaded after it, and scoped to the Trackers menu via :has() (the ng-if
   removes that ul on every other group, so nothing else is touched). */
@media (min-width: 768px) {
    /* ── The bar must be as tall as its content ─────────────────── */
    /* With the container a flex row its floated-ul clearfix no longer
       props the ancestors open: #MainCollapse and .container collapse to
       0 and the nav sits at its 50px minimum, so a second menu line
       spilled out of the white bar onto the page. */
    nav.navbar-default:has(.ei-nav-container > ul.main-nav[ng-controller="TrackersCtrl"]) {
        height: auto;
        min-height: 50px;
    }
    nav.navbar-default:has(.ei-nav-container > ul.main-nav[ng-controller="TrackersCtrl"]) > .container,
    nav.navbar-default:has(.ei-nav-container > ul.main-nav[ng-controller="TrackersCtrl"]) #MainCollapse {
        height: auto !important;
    }

    /* ── Row layout ─────────────────────────────────────────────── */
    .navbar-default .ei-nav-container:has(> ul.main-nav[ng-controller="TrackersCtrl"]) {
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-start;
    }
    .navbar-default .ei-nav-container > ul.main-nav[ng-controller="TrackersCtrl"] {
        flex: 1 1 auto;
        min-width: 0;
        flex-wrap: wrap;
        width: auto;
    }
    .navbar-default .ei-nav-container:has(> ul.main-nav[ng-controller="TrackersCtrl"]) > ul.navbar-right {
        flex: 0 0 auto;
        align-self: flex-start;   /* first line, whatever the menu does below */
        margin-left: 12px;
        float: none;
    }

    /* ── Menu items: 42px lines, pipes between ──────────────────── */
    .navbar-default .ei-nav-container > ul.main-nav[ng-controller="TrackersCtrl"] > li {
        margin-right: 0;
    }
    .navbar-default .ei-nav-container > ul.main-nav[ng-controller="TrackersCtrl"] > li > a {
        padding-top: 12px;
        padding-bottom: 12px;
    }
    .navbar-default .ei-nav-container > ul.main-nav[ng-controller="TrackersCtrl"] > li.dropdown {
        position: relative;
        padding-left: 9px;
        padding-right: 9px;
    }
    /* Only an item with a VISIBLE item before it gets a pipe, so the first
       entry stays clean whatever ng-show hides ahead of it. */
    .navbar-default .ei-nav-container > ul.main-nav[ng-controller="TrackersCtrl"] > li.dropdown:not(.ng-hide) ~ li.dropdown:not(.ng-hide)::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        width: 1px;
        height: 14px;
        margin-top: -7px;
        background: #cfd4dc;
    }
    /* The My Digital Classrooms pill is the one non-link item; its own
       mt15 / mb12 utilities would hold its line at 60px. */
    .navbar-default .ei-nav-container > ul.main-nav[ng-controller="TrackersCtrl"] > li > div.mt15[data-toggle="dropdown"] {
        margin-top: 5px !important;
        margin-bottom: 4px !important;
    }

    /* ── Controls: 42px tall to match a menu line ───────────────── */
    .navbar-default .ei-nav-container > ul.navbar-right > li,
    .navbar-default .ei-nav-container > ul.navbar-right > li.has-icon {
        height: auto;
        min-height: 42px;
    }
    .navbar-default .ei-nav-container > ul.navbar-right > li > a,
    .navbar-default .ei-nav-container > ul.navbar-right > li.has-icon a,
    .navbar-default .ei-nav-container > ul.navbar-right > li.user-menu > a,
    .navbar-default .ei-nav-container > ul.navbar-right .user-menu .user-options {
        padding-top: 9px;
        padding-bottom: 9px;
    }
}