/*
  NOTE: no rem units in here. lib/bootstrap_old sets html { font-size: 10px }, so a rem is 10px on
  this site and anything sized in rem comes out about a third too small. px throughout.
*/

/*
  Modern staff left rail (class.staff_sidebar.php). Pilot only - the markup is not on the page at
  all for anyone off staff_sidebar::PILOT_USER_IDS, so none of this can reach the old layout.

  The rail is fixed and runs the full height of the window, so the black upper navbar has to be
  pushed off its left edge (.navbar_upper_staff_modern) and the layout table keeps an empty cell
  of the same width in the flow (.staff_sidebar_spacer).
*/

.staff_sidebar
{
  position: fixed;
  top: 0px;
  left: 0px;
  width: 260px;
  height: 100vh;
  height: 100dvh;
  background: #16323a;
  z-index: 7;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: env(safe-area-inset-top);
}

/* the rail replaces the light 240px menu only where that menu was shown (bootstrap hidden-xs) */
@media (max-width: 767px)
{
  .staff_sidebar { display: none; }
}

@media (min-width: 768px)
{
  .navbar_upper_staff_modern { margin-left: 260px; }
  .staff_sidebar_spacer { width: 260px !important; min-width: 260px !important; }
}

/* ---- brand ---- */

.ssb_brand
{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px 16px;
  flex-shrink: 0;
  text-decoration: none;
}
.ssb_brand:hover, .ssb_brand:focus { text-decoration: none; }

.ssb_brand_logo
{
  width: 38px;
  height: 38px;
  border-radius: 9px;
  object-fit: contain;
  flex-shrink: 0;
  background: rgba(255,255,255,0.06);
  padding: 4px;
}

.ssb_brand_name
{
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.ssb_brand_sub
{
  display: block;
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.02em;
}

/* ---- sections ---- */

.ssb_nav
{
  flex: 1;
  padding: 8px 12px;
  overflow-y: auto;
  scrollbar-width: none;
}
.ssb_nav::-webkit-scrollbar { width: 0px; }

.ssb_section_label
{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  padding: 12px 10px 6px;
}

.ssb_item
{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  margin-bottom: 3px;
  border-radius: 8px;
  color: rgba(255,255,255,0.75);
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.ssb_item:hover, .ssb_item:focus
{
  background: rgba(255,255,255,0.06);
  color: #fff;
  text-decoration: none;
}

.ssb_item_active
{
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-weight: 600;
  box-shadow: inset 3px 0 0 #5cb85c;
}

.ssb_icon
{
  font-size: 19px;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}

.ssb_label { flex: 1; }

.ssb_badge
{
  background: #d9534f;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
}

/* ---- account card ---- */

.ssb_footer
{
  padding: 12px;
  flex-shrink: 0;
  position: relative;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

.ssb_user_card
{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.08);
  transition: background 0.12s;
}

.ssb_user_card:hover { background: rgba(255,255,255,0.06); }

.ssb_user_card_active
{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.16);
}

.ssb_avatar
{
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: #5cb85c;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ssb_user_text { flex: 1; min-width: 0; }

.ssb_user_name
{
  font-size: 14px;
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ssb_user_sub
{
  font-size: 12px;
  color: rgba(255,255,255,0.5);
}

.ssb_user_dot
{
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d9534f;
  vertical-align: middle;
  margin-left: 4px;
}

.ssb_chevron
{
  color: rgba(255,255,255,0.45);
  font-size: 9px;
  line-height: 1;
  flex-shrink: 0;
}
.ssb_chevron i { display: block; }

.ssb_user_popup
{
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(100% - 6px);
  background: #1e4149;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  padding: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  z-index: 8;
}

.ssb_popup_item
{
  display: block;
  padding: 10px 12px;
  border-radius: 7px;
  color: rgba(255,255,255,0.8);
  font-size: 14px;
  text-decoration: none;
}

.ssb_popup_item:hover, .ssb_popup_item:focus
{
  background: rgba(255,255,255,0.08);
  color: #fff;
  text-decoration: none;
}

.ssb_popup_item i { margin-right: 8px; font-size: 15px; vertical-align: -1px; }

.ssb_popup_item_danger:hover { color: #ff8a80; }

.ssb_popup_divider
{
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 4px 6px;
}

.ssb_popup_badge
{
  background: #d9534f;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 10px;
  margin-left: 4px;
}