/* static/css/notifications.css */
.notification-bell-container {
  position: relative;
}

#notification-badge {
  font-size: 0.6rem;
  padding: 0.2rem 0.4rem;
  border-radius: 10px;
  transform: translate(-120%, 25%);
}

#notification-panel {
  width: 400px;
  max-width: 100vw;
}

.notification-item {
  padding: 1rem;
  border-bottom: 1px solid #e5e7eb;
  cursor: pointer;
  transition: background-color 0.2s;
}

.notification-item:hover {
  background-color: #f8f9fa;
}

.notification-item.unread {
  background-color: #e3f2fd;
  font-weight: 500;
}

.notification-item.read {
  opacity: 0.7;
}

@media (max-width: 768px) {
  #notification-panel {
    width: 100vw;
  }
}