/**
 * Message Badge Fix Styles for Imployii
 * Specialized fix for message notification badges
 */

/* Message badge specific styling overrides */
.message-badge {
  background-color: #3498db !important;
  z-index: 101 !important; /* Higher than regular badges */
}

/* Fix for message count badge in header */
.header-nav .message-count {
  top: -5px !important;
  right: -5px !important;
}

/* Fix for message badge in sidebar */
.sidebar-nav .message-badge {
  top: 3px !important;
  right: 5px !important;
}

/* Fix for message badge in dropdown menus */
.dropdown-menu .message-badge {
  right: 10px !important;
}

/* Fix for message badge in mobile view */
@media (max-width: 768px) {
  .mobile-nav .message-badge {
    top: 0 !important;
    right: 0 !important;
  }
}

/* Ensure message badges are visible over other elements */
.message-badge,
.message-count {
  z-index: 1000 !important;
}

/* Animation for new messages */
.message-badge.new-message {
  animation: pulse-blue 2s infinite;
}

@keyframes pulse-blue {
  0% {
    box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.7);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(52, 152, 219, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(52, 152, 219, 0);
  }
}

/* Message badge for conversation items */
.conversation-item .message-badge {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

/* Unread message styling */
.unread-message .message-badge {
  background-color: #3498db !important;
  display: flex !important;
}

/* Read message styling - hide badge */
.read-message .message-badge {
  display: none !important;
}

/* Fix for message badge in conversation list */
.conversation-list-item .message-badge {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  min-width: 20px;
  height: 20px;
}

/* Fix for message badge in dashboard cards */
.dashboard-card .message-badge {
  top: 10px;
  right: 10px;
}

/* Fix for message badge in navigation tabs */
.nav-tabs .message-badge {
  position: absolute;
  top: -5px;
  right: -5px;
}

/* Fix for message badge in floating action buttons */
.floating-action-btn .message-badge {
  top: -5px;
  right: -5px;
}

/* Fix for profile section message badges */
.profile-section .message-badge {
  top: 0;
  right: 0;
}

/* Fix for message badge in employer dashboard */
.employer-dashboard .message-badge {
  top: 5px;
  right: 5px;
}