/* Full-width desktop toolbar for the visible BATON header controls. */

/* One height, used by the topbar itself and by everything that has to sit
   below it -- the sticky sidebar in particular. Declared outside the media
   query so it is always resolvable. */
:root {
  --pms-topbar-height: 4.75rem;
}

@media (min-width: 992px) {
  body:not(.login):not(.page-logout) #header {
    display: none !important;
  }

  #admin-topbar {
    position: sticky;
    top: 0;
    z-index: 120;
    display: grid;
    grid-template-columns: max-content max-content minmax(16rem, 1fr) max-content;
    align-items: center;
    gap: 2rem;
    box-sizing: border-box;
    width: 100%;
    min-height: var(--pms-topbar-height);
    padding: .7rem 1.25rem;
    background: #2f6fed;
    color: #fff;
    box-shadow: 0 2px 9px rgba(0, 0, 0, .18);
  }

  #admin-topbar #branding {
    grid-column: 2;
    min-width: 0;
    margin: 0;
    padding: 0;
  }

  #admin-topbar #branding h1 {
    margin: 0;
    font-size: 1.45rem;
    line-height: 1.2;
    white-space: nowrap;
  }

  #admin-topbar #branding a {
    color: #fff !important;
    text-decoration: none;
  }

  #admin-topbar .search-field-tool {
    grid-column: 3;
    position: relative;
    width: 100%;
    max-width: 48rem;
    margin: 0 auto;
  }

  #admin-topbar .search-field-tool input {
    box-sizing: border-box;
    width: 100%;
    min-height: 2.5rem;
    padding: .45rem 2.4rem .45rem .85rem;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: .3rem;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    outline: 0;
  }

  #admin-topbar .search-field-tool input:focus {
    border-color: #ffffff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .25);
  }

  #admin-topbar .search-field-tool input::placeholder {
    color: rgba(255, 255, 255, .65);
  }

  #admin-topbar .search-field-tool::after {
    position: absolute;
    top: 50%;
    right: .8rem;
    color: #ffffff;
    content: "\f002";
    font-family: "Font Awesome 5 Free";
    font-size: 1rem;
    font-weight: 900;
    transform: translateY(-50%);
    pointer-events: none;
  }

  #admin-topbar .search-field-tool.loading::after {
    animation: fa-spin 2s linear infinite;
    content: "\f1ce";
  }

  #admin-topbar #admin-search-datalist {
    position: absolute;
    top: calc(100% + .25rem);
    z-index: 140;
    width: 100%;
    max-height: 50vh;
    overflow: auto;
    background: #fff;
    color: #263238;
    box-shadow: 0 .4rem 1rem rgba(0, 0, 0, .25);
  }

  #admin-topbar #admin-search-datalist .datalist-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .55rem .75rem;
    border-bottom: 1px solid #eceff1;
    cursor: pointer;
  }

  #admin-topbar #admin-search-datalist .datalist-option.selected {
    background: #eceff1;
  }

  #admin-topbar #admin-search-datalist a {
    color: #263238;
    text-decoration: none;
  }

  #admin-topbar #user-tools-sidebar {
    grid-column: 4;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: max-content;
    margin: 0;
    padding: 0;
    text-align: left;
  }

  #admin-topbar #user-tools-sidebar .user-info {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: .55rem;
    color: #fff;
    font-size: 1rem;
  }

  #admin-topbar #user-tools-sidebar .gravatar-icon {
    width: 2.25rem;
    height: 2.25rem;
    border: 2px solid #fff;
    border-radius: 50%;
    object-fit: cover;
  }

  #admin-topbar #user-tools-sidebar .user-links {
    display: flex;
    align-items: center;
    height: auto;
    margin: 0 0 0 .65rem;
  }

  #admin-topbar #user-tools-sidebar .user-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    color: #ffffff !important;
    text-decoration: none;
  }

  #admin-topbar #user-tools-sidebar .user-links a::after {
    display: inline-block;
    color: #ffffff;
    font-family: "Font Awesome 5 Free";
    font-size: 1.15rem;
    font-weight: 900;
  }

  #admin-topbar #user-tools-sidebar .view-site::after {
    content: "\f108";
  }

  #admin-topbar #user-tools-sidebar .password::after {
    content: "\f084";
  }

  #admin-topbar #user-tools-sidebar .logout::after {
    content: "\f2f5";
  }

  #admin-menu-view-toggle {
    grid-column: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.65rem;
    height: 2.65rem;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: .35rem;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    cursor: pointer;
  }

  #admin-menu-view-toggle:hover,
  #admin-menu-view-toggle:focus {
    border-color: #ffffff;
    background: rgba(255, 255, 255, .22);
    color: #ffffff;
  }

  #admin-menu-view-toggle:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
  }

  #admin-menu-view-toggle i {
    font-size: 1.15rem;
  }

  .sidebar-menu .depth-0 > li > a,
  .sidebar-menu .depth-0 > li > span {
    display: flex;
    align-items: center;
    min-height: 3.25rem;
    padding: .75rem 1.25rem;
    font-size: 1.1rem;
    line-height: 1.3;
  }

  .sidebar-menu .depth-0 > li > a > i,
  .sidebar-menu .depth-0 > li > span > i {
    flex: 0 0 1.55rem;
    width: 1.55rem;
    margin-right: .7rem;
    font-size: 1.22rem;
    text-align: center;
  }

  .sidebar-menu .depth-0 > li > .has-children::after {
    margin-left: auto;
    font-size: 1rem;
  }

  /* The sidebar stays in view while the page scrolls.
     Baton leaves it `position: static` on desktop, so it is an ordinary
     column in the Bootstrap row: the flex row stretches it to the full height
     of the page and the menu itself sits at the top of that column, which is
     why it disappears as soon as you scroll.
     `align-self: flex-start` is the part that actually makes this work --
     without it the column is still stretched to the row's height, and a
     sticky box as tall as its scroll container never has anywhere to stick.
     `top` clears the sticky topbar above it. */
  body:not(.menu-mobile) .sidebar-menu.col-lg-2 {
    position: sticky;
    top: var(--pms-topbar-height);
    align-self: flex-start;
    height: calc(100vh - var(--pms-topbar-height));
    overflow-y: auto;
    /* A long menu scrolls on its own without dragging the page with it once
       it reaches the end. */
    overscroll-behavior: contain;
  }

  body.admin-menu-icons-only .sidebar-menu.col-lg-2 {
    position: sticky;
    z-index: 110;
    flex: 0 0 5.25rem !important;
    width: 5.25rem !important;
    max-width: 5.25rem !important;
    /* Collapsed, the submenus fly out sideways as absolutely positioned
       cards. A scroll container would clip them, so this mode keeps the
       overflow visible and sizes to its content instead -- an icon column is
       short enough not to need scrolling of its own. */
    height: auto;
    overflow: visible;
  }

  .sidebar-menu.col-lg-2,
  #content.col-lg-10 {
    transition: flex-basis .22s ease, width .22s ease, max-width .22s ease;
  }

  body.admin-menu-icons-only #content.col-lg-10 {
    flex: 0 0 calc(100% - 5.25rem) !important;
    width: calc(100% - 5.25rem) !important;
    max-width: calc(100% - 5.25rem) !important;
  }

  body.admin-menu-icons-only .sidebar-menu .depth-0 {
    overflow: visible;
  }

  body.admin-menu-icons-only .sidebar-menu .depth-0 > li {
    position: relative;
    overflow: visible;
  }

  body.admin-menu-icons-only .sidebar-menu .depth-0 > li > a,
  body.admin-menu-icons-only .sidebar-menu .depth-0 > li > span {
    position: relative;
    justify-content: center;
    box-sizing: border-box;
    width: 5.25rem;
    min-height: 3.75rem;
    padding: .75rem 0;
    text-align: center;
  }

  body.admin-menu-icons-only .sidebar-menu .depth-0 > li > a > i,
  body.admin-menu-icons-only .sidebar-menu .depth-0 > li > span > i {
    flex: 0 0 auto;
    width: 1.75rem;
    margin: 0;
    font-size: 1.42rem;
  }

  body.admin-menu-icons-only .sidebar-menu .depth-0 > li > .has-children::after {
    display: none;
  }

  body.admin-menu-icons-only .sidebar-menu-label {
    position: absolute;
    top: 50%;
    left: calc(100% + .65rem);
    z-index: 180;
    display: none !important;
    visibility: hidden;
    opacity: 0;
    width: max-content;
    max-width: 16rem;
    padding: .45rem .7rem;
    border-radius: .3rem;
    background: #ffffff;
    color: #22323a;
    font-size: 1rem;
    font-weight: 400;
    border: 1px solid #d7dfe3;
    line-height: 1.25;
    text-align: left;
    white-space: nowrap;
    box-shadow: 0 .25rem .7rem rgba(0, 0, 0, .28);
    transform: translateY(-50%);
    pointer-events: none;
  }

  body.admin-menu-icons-only .sidebar-menu-label::before {
    position: absolute;
    top: 50%;
    right: 100%;
    border: .38rem solid transparent;
    border-right-color: #ffffff;
    content: "";
    transform: translateY(-50%);
  }

  body.admin-menu-icons-only .depth-0 > li > a > i:hover ~ .sidebar-menu-label,
  body.admin-menu-icons-only .depth-0 > li > span > i:hover ~ .sidebar-menu-label,
  body.admin-menu-icons-only .depth-0 > li > a:focus-visible > .sidebar-menu-label,
  body.admin-menu-icons-only .depth-0 > li > span:focus-visible > .sidebar-menu-label {
    display: block !important;
    visibility: visible;
    opacity: 1;
  }

  body.admin-menu-icons-only .sidebar-menu .depth-0 > li > .depth-1 {
    position: absolute;
    top: 0;
    left: 5.25rem;
    z-index: 170;
    display: none !important;
    width: 17rem;
    min-width: 17rem;
    max-height: calc(100vh - 6rem);
    margin: 0;
    padding: .4rem 0;
    overflow: auto;
    background: #ffffff;
    border: 1px solid #d7dfe3;
    border-left: 3px solid #2f6fed;
    border-radius: 0 .35rem .35rem 0;
    box-shadow: .45rem .45rem 1rem rgba(0, 0, 0, .32);
  }

  body.admin-menu-icons-only .sidebar-menu .depth-0 > li.open > .depth-1 {
    display: block !important;
  }

  body.admin-menu-icons-only .sidebar-menu .depth-0 > li.open .sidebar-menu-label {
    display: none !important;
  }

  body.admin-menu-icons-only .sidebar-menu .depth-1 li,
  body.admin-menu-icons-only .sidebar-menu .depth-1 li a {
    width: 100%;
    white-space: normal;
  }

  body.admin-menu-icons-only .sidebar-menu .depth-1 li a {
    box-sizing: border-box;
    padding: .7rem 1rem;
    color: #22323a;
    font-size: 1rem;
  }

  body.admin-menu-icons-only .sidebar-menu .depth-1 li a:hover,
  body.admin-menu-icons-only .sidebar-menu .depth-1 li a:focus {
    background: #eaf1fd;
    color: #2f6fed;
    text-decoration: none;
  }

  body.admin-menu-icons-only .sidebar-menu .depth-1::-webkit-scrollbar {
    width: .45rem;
  }

  body.admin-menu-icons-only .sidebar-menu .depth-1::-webkit-scrollbar-thumb {
    border-radius: .5rem;
    background: rgba(0, 0, 0, .2);
  }

}

@media (max-width: 1199.98px) and (min-width: 992px) {
  #admin-topbar {
    grid-template-columns: max-content max-content minmax(12rem, 1fr) max-content;
    gap: 1rem;
  }

  #admin-topbar #branding h1 {
    font-size: 1.2rem;
  }

  #admin-topbar #user-tools-sidebar .user-info > div:last-child {
    display: none;
  }
}

@media (max-width: 991.98px) {
  #admin-topbar {
    display: none !important;
  }
}