/* Top bar controls: full-screen toggle, notification bell, and the
   organisation / logged-in user menu on the right. */

.page-header .hdrTool {
  display: flex;
  align-items: center;
}

/* Shared icon button treatment for the header tools. */
.page-header .hdrIconBtn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: relative;
  /* Roomy enough for a 39px glyph without the hover square crowding it. */
  width: 52px;
  height: 52px;
  margin: 0 2px;
  padding: 0 !important;
  border-radius: 8px;
  color: #636363;
  background: transparent;
  transition: background 0.15s ease, color 0.15s ease;
}

.page-header .hdrIconBtn:hover,
.page-header .hdrIconBtn:focus {
  background: #f2f3f5;
  color: var(--Theme-Primary-Color-dark, #6e063d);
}

.page-header .hdrIconBtn svg {
  display: block;
}

/* Sized here rather than left to the SVG's width/height attributes, so the
   glyph is deterministic. mobile.css sizes these inside its media queries with
   !important, so these carry it too — otherwise the mobile rule wins below
   991px and the bell shrinks again.
   39px matches the organisation avatar sitting next to it, which the theme
   sets in layout.min.css. */
.page-header .hdrTool > .hdrIconBtn > svg {
  width: 34px !important;
  height: 34px !important;
}

.page-header .hdrTool > .hdrBell > svg {
  width: 39px !important;
  height: 39px !important;
}

/* Bell count. The theme places this badge for its own 24px-padded toggle:
     .page-header.navbar .top-menu .navbar-nav>li.dropdown>.dropdown-toggle>.badge
     { position:absolute; top:17px; right:9px; padding:3px 6px }
   which lands in the wrong place on the 36px icon button, so this selector
   carries more classes in order to win. */
.page-header.navbar
  .top-menu
  .navbar-nav
  > li.dropdown.hdrTool
  > .dropdown-toggle.hdrBell
  > .badge.hdrBadge {
  position: absolute;
  top: 3px;
  right: 2px;
  left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  border: 2px solid #fff;
  background: #b62319;
  color: #fff;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  line-height: 13px;
  text-align: center;
  text-shadow: none;
  box-shadow: none;
}

/* ---- organisation / user menu ----
   The Metronic theme pins this menu to a fixed 175px:
     .page-header.navbar .top-menu .navbar-nav>li.dropdown-user .dropdown-menu{width:175px}
   These selectors carry more classes than that one so the width and the
   alignment stick; the menu is anchored to both edges of its trigger, so it
   covers exactly the control it drops from. */

/* Sit flush with the right edge of the bar — the theme leaves a left pad on
   this item and the toggle carries its own horizontal padding. */
.page-header.navbar .top-menu .navbar-nav > li.dropdown-user.hdrOrg {
  position: relative;
  margin-right: 0;
  padding-right: 0;
}

.page-header.navbar .top-menu .navbar-nav > li.dropdown-user.hdrOrg > .dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 0;
}

/* One centred row: the theme floats these items and gives the user toggle
   24px of vertical padding, which left the bell and expand icons sitting at a
   different level from the organisation name. The bar's own height is fixed
   (60px in branding.css), so dropping that padding does not collapse it. */
.page-header.navbar .top-menu .navbar-nav.pull-right {
  display: flex;
  align-items: center;
  margin-right: 0;
}

.page-header.navbar .top-menu .navbar-nav.pull-right > li {
  float: none;
  display: flex;
  align-items: center;
}

.page-header.navbar .top-menu .navbar-nav.pull-right > li > .dropdown-toggle {
  display: flex;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
}

.page-header.navbar .top-menu .navbar-nav.pull-right > li.dropdown-user.hdrOrg img.img-circle {
  margin: 0;
}

/* Affordance that this opens a menu; rotates while the menu is open. */
.page-header .hdrOrgCaret {
  display: inline-block;
  flex: 0 0 auto;
  width: 0;
  height: 0;
  margin-left: 8px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #636363;
  transition: transform 0.15s ease;
}

.page-header .hdrOrg > .dropdown-toggle:hover .hdrOrgCaret {
  border-top-color: var(--Theme-Primary-Color-dark, #6e063d);
}

.page-header .hdrOrg.open .hdrOrgCaret {
  transform: rotate(180deg);
}

.page-header .hdrOrg > .dropdown-toggle {
  cursor: pointer;
}

.page-header.navbar .top-menu .navbar-nav > li.dropdown-user.hdrOrg .dropdown-menu.hdrOrgMenu {
  left: 0;
  right: 0;
  width: auto;
  min-width: 100%;
  max-width: none;
  margin-top: 2px;
  padding: 6px;
  border: 1px solid #e3e4e8;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(16, 18, 27, 0.16);
}

.page-header.navbar .top-menu .navbar-nav > li.dropdown-user.hdrOrg .dropdown-menu.hdrOrgMenu > li > a {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 9px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 400;
  color: #2c2c2c;
  white-space: nowrap;
}

.page-header.navbar .top-menu .navbar-nav > li.dropdown-user.hdrOrg .dropdown-menu.hdrOrgMenu > li > a:hover,
.page-header.navbar .top-menu .navbar-nav > li.dropdown-user.hdrOrg .dropdown-menu.hdrOrgMenu > li > a:focus {
  background: #f6f7f9;
  color: var(--Theme-Primary-Color-dark, #6e063d);
}

.page-header .hdrOrgMenu > li > a svg {
  flex: 0 0 auto;
}

/* Phone: the bell was the one control that came out too small here — the
   media-query rules in mobile.css pin it to 24px. The button tightens to suit
   the narrower bar, but the glyph stays legible. */
@media (max-width: 991px) {
  .page-header .hdrTool > .hdrBell > svg {
    width: 32px !important;
    height: 32px !important;
  }

  .page-header .hdrTool > .hdrIconBtn > svg {
    width: 26px !important;
    height: 26px !important;
  }
}

@media (max-width: 767px) {
  .page-header .hdrIconBtn {
    width: 42px;
    height: 42px;
    margin: 0 1px;
  }
}